From ebf5b3f47ec7479f7d0cd1a3f78bc81f7af6f3f5 Mon Sep 17 00:00:00 2001
From: Noah Petherbridge <root@kirsle.net>
Date: Fri, 22 Dec 2023 21:59:23 -0800
Subject: [PATCH] Fix image click handler and emoji popup

---
 public/static/css/chat.css    | 8 +++++++-
 src/App.vue                   | 7 +++++++
 src/components/MessageBox.vue | 6 +++---
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/public/static/css/chat.css b/public/static/css/chat.css
index 6885abc..f845632 100644
--- a/public/static/css/chat.css
+++ b/public/static/css/chat.css
@@ -9,7 +9,13 @@ body {
 /* No dragging images - it plays wrongly with the drag/drop image sharing feature
    and users can accidentally share in chat by dragging an on-page image */
 img {
-    pointer-events: none;
+    /* https://stackoverflow.com/questions/12906789/preventing-an-image-from-being-draggable-or-selectable-without-using-js */
+    user-drag: none;
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-drag: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
 }
 
 .float-right {
diff --git a/src/App.vue b/src/App.vue
index 6726fac..43435d5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2800,6 +2800,13 @@ export default {
             let $body = document.querySelector("body");
 
             // Set up drag/drop file upload events.
+            $body.addEventListener("dragstart", (e) => {
+                // Nothing ON the page should begin being draggable. Prevents on-page images from
+                // being dragged and then dropped (and sent as files on chat), but still allows
+                // their click handler to view in the lightbox modal.
+                e.preventDefault();
+                return false;
+            })
             $body.addEventListener("dragenter", (e) => {
                 e.preventDefault();
                 e.stopPropagation();
diff --git a/src/components/MessageBox.vue b/src/components/MessageBox.vue
index 8eef33e..7e31dc1 100644
--- a/src/components/MessageBox.vue
+++ b/src/components/MessageBox.vue
@@ -311,7 +311,7 @@ export default {
             </div>
 
             <div class="column dropdown is-right"
-                :class="{ 'is-up': position >= 2 || reportEnabled, 'is-active': showEmojiPicker }"
+                :class="{ 'is-up': position >= 2, 'is-active': showEmojiPicker }"
                 @click="showEmojiPicker = true">
                 <div class="dropdown-trigger">
                     <button type="button" class="button is-small px-2" aria-haspopup="true"
@@ -411,7 +411,7 @@ export default {
             <div class="columns is-mobile is-gapless mb-0">
                 <!-- More buttons menu (DM, mute, report, etc.) -->
                 <div class="column dropdown is-right"
-                    :class="{ 'is-up': position >= 2 || reportEnabled, 'is-active': menuVisible }"
+                    :class="{ 'is-up': position >= 2, 'is-active': menuVisible }"
                     @click="menuVisible = !menuVisible">
                     <div class="dropdown-trigger">
                         <button type="button" class="button is-small px-2 mr-1" aria-haspopup="true"
@@ -463,7 +463,7 @@ export default {
 
                 <!-- Emoji reactions -->
                 <div class="column dropdown is-right"
-                    :class="{ 'is-up': position >= 2 || reportEnabled, 'is-active': showEmojiPicker }"
+                    :class="{ 'is-up': position >= 2, 'is-active': showEmojiPicker }"
                     @click="showEmojiPicker = true">
                     <div class="dropdown-trigger">
                         <button type="button" class="button is-small px-2" aria-haspopup="true"