Fix cropped quick reactions on images

Unify placement across different message bubble types. Work on issue #122.

src/assets/css/chat.scss

@@ -412,16 +412,20 @@ $admin-fg: white;
 }
 
 .quick-reaction-container {
+    display: inline-block;
     position: absolute;
+    top: -12px;
+    left: 50px;
+    z-index: 2;
     background-color: #000000;
     border: 2px solid white;
     border-radius: 13px;
     height: 26px;
     width: max-content;
-    top: -15px;
     padding: 0px 6px;
     .messageOut & {
-        right: 10px;
+        left: unset;
+        right: 50px;
     }
     .quick-reaction {
         position: relative;

src/components/messages/MessageIncomingAudio.vue

@@ -6,9 +6,9 @@
         messageEventDisplayName(event).substring(0, 1).toUpperCase()
       }}</span>
     </v-avatar>
+    <QuickReactions :event="event" :reactions="reactions" />
     <div class="audio-bubble">
       <audio controls :src="src">Audio file</audio>
-      <QuickReactions :event="event" :reactions="reactions" />
     </div>
     <div class="op-button" ref="opbutton">
       <v-btn icon @click.stop="showContextMenu($refs.opbutton)"

src/components/messages/MessageIncomingFile.vue

@@ -6,18 +6,24 @@
         messageEventDisplayName(event).substring(0, 1).toUpperCase()
       }}</span>
     </v-avatar>
-
+    <QuickReactions :event="event" :reactions="reactions" />
     <div class="bubble">
-      <QuickReactions :event="event" :reactions="reactions" />
       <div class="original-message" v-if="inReplyToText">
         <div class="original-message-sender">
           {{ inReplyToSender || "Someone" }} said:
         </div>
-        <div class="original-message-text" v-html="linkify($sanitize(inReplyToText))" />
+        <div
+          class="original-message-text"
+          v-html="linkify($sanitize(inReplyToText))"
+        />
       </div>
       <div class="message">
         <span>File: </span>
-        <span style="cursor:pointer" @click.stop="$emit('download')" v-html="linkify($sanitize(messageText))" />
+        <span
+          style="cursor: pointer"
+          @click.stop="$emit('download')"
+          v-html="linkify($sanitize(messageText))"
+        />
         <span class="edit-marker" v-if="event.replacingEventId()"
           >(edited)</span
         >

src/components/messages/MessageIncomingImage.vue

@@ -6,9 +6,15 @@
         messageEventDisplayName(event).substring(0, 1).toUpperCase()
       }}</span>
     </v-avatar>
+    <QuickReactions :event="event" :reactions="reactions" />
     <div class="bubble image-bubble">
-      <v-img :aspect-ratio="16 / 9" ref="image" :src="src" :cover="cover" :contain="contain" />
-      <QuickReactions :event="event" :reactions="reactions" />
+      <v-img
+        :aspect-ratio="16 / 9"
+        ref="image"
+        :src="src"
+        :cover="cover"
+        :contain="contain"
+      />
     </div>
     <div class="op-button" ref="opbutton">
       <v-btn icon @click.stop="showContextMenu($refs.opbutton)"

src/components/messages/MessageIncomingSticker.vue

@@ -6,9 +6,15 @@
         messageEventDisplayName(event).substring(0, 1).toUpperCase()
       }}</span>
     </v-avatar>
+    <QuickReactions :event="event" :reactions="reactions" />
     <div class="bubble sticker-bubble">
-      <v-img :aspect-ratio="16 / 9" ref="image" :src="src" :cover="cover" :contain="contain" />
-      <QuickReactions :event="event" :reactions="reactions" />
+      <v-img
+        :aspect-ratio="16 / 9"
+        ref="image"
+        :src="src"
+        :cover="cover"
+        :contain="contain"
+      />
     </div>
     <div class="op-button" ref="opbutton">
       <v-btn icon @click.stop="showContextMenu($refs.opbutton)"
@@ -39,7 +45,7 @@ export default {
   },
   mounted() {
     //console.log("Mounted with event:", JSON.stringify(this.event.getContent()));
-    this.src = stickers.getStickerImage(this.event.getContent().body)
+    this.src = stickers.getStickerImage(this.event.getContent().body);
   },
 };
 </script>

src/components/messages/MessageIncomingText.vue

@@ -6,14 +6,16 @@
         messageEventDisplayName(event).substring(0, 1).toUpperCase()
       }}</span>
     </v-avatar>
-
+    <QuickReactions :event="event" :reactions="reactions" />
     <div class="bubble">
-      <QuickReactions :event="event" :reactions="reactions" />
       <div class="original-message" v-if="inReplyToText">
         <div class="original-message-sender">
           {{ inReplyToSender || "Someone" }} said:
         </div>
-        <div class="original-message-text" v-html="linkify($sanitize(inReplyToText))" />
+        <div
+          class="original-message-text"
+          v-html="linkify($sanitize(inReplyToText))"
+        />
       </div>
       <div class="message">
         <span v-html="linkify($sanitize(messageText))" />

src/components/messages/MessageIncomingVideo.vue

@@ -6,14 +6,18 @@
         messageEventDisplayName(event).substring(0, 1).toUpperCase()
       }}</span>
     </v-avatar>
+    <QuickReactions :event="event" :reactions="reactions" />
     <div class="bubble image-bubble">
       <v-responsive :aspect-ratio="16 / 9" :src="src">
-        <video :src="src" controls style="width:100%;height:100%">Video file</video>
+        <video :src="src" controls style="width: 100%; height: 100%">
+          Video file
+        </video>
         <div v-if="downloadProgress" class="download-overlay">
-          <div class="text-center download-text">{{ downloadProgress }}% downloaded</div>
+          <div class="text-center download-text">
+            {{ downloadProgress }}% downloaded
+          </div>
         </div>
       </v-responsive>
-      <QuickReactions :event="event" :reactions="reactions" />
     </div>
     <div class="op-button" ref="opbutton">
       <v-btn icon @click.stop="showContextMenu($refs.opbutton)"

src/components/messages/MessageOutgoingAudio.vue

@@ -5,11 +5,16 @@
         ><v-icon>more_vert</v-icon></v-btn
       >
     </div>
+    <QuickReactions :event="event" :reactions="reactions" />
     <div class="audio-bubble">
       <audio controls :src="src">Audio file</audio>
-      <QuickReactions :event="event" :reactions="reactions" />
     </div>
-    <v-avatar class="avatar" size="32" color="#ededed" @click.stop="ownAvatarClicked">
+    <v-avatar
+      class="avatar"
+      size="32"
+      color="#ededed"
+      @click.stop="ownAvatarClicked"
+    >
       <img v-if="userAvatar" :src="userAvatar" />
       <span v-else class="white--text headline">{{ userAvatarLetter }}</span>
     </v-avatar>

src/components/messages/MessageOutgoingFile.vue

@@ -5,24 +5,36 @@
         ><v-icon>more_vert</v-icon></v-btn
       >
     </div>
+    <QuickReactions :event="event" :reactions="reactions" />
     <div class="bubble">
-      <QuickReactions :event="event" :reactions="reactions" />
       <div class="original-message" v-if="inReplyToText">
         <div class="original-message-sender">
           {{ inReplyToSender || "Someone" }} said:
         </div>
-        <div class="original-message-text" v-html="linkify($sanitize(inReplyToText))" />
+        <div
+          class="original-message-text"
+          v-html="linkify($sanitize(inReplyToText))"
+        />
       </div>
 
       <div class="message">
         <span>File: </span>
-        <span style="cursor:pointer" @click.stop="$emit('download')" v-html="linkify($sanitize(messageText))" />
+        <span
+          style="cursor: pointer"
+          @click.stop="$emit('download')"
+          v-html="linkify($sanitize(messageText))"
+        />
         <span class="edit-marker" v-if="event.replacingEventId()"
           >(edited)</span
         >
       </div>
     </div>
-    <v-avatar class="avatar" size="32" color="#ededed" @click.stop="ownAvatarClicked">
+    <v-avatar
+      class="avatar"
+      size="32"
+      color="#ededed"
+      @click.stop="ownAvatarClicked"
+    >
       <img v-if="userAvatar" :src="userAvatar" />
       <span v-else class="white--text headline">{{ userAvatarLetter }}</span>
     </v-avatar>

src/components/messages/MessageOutgoingImage.vue

@@ -5,11 +5,22 @@
         ><v-icon>more_vert</v-icon></v-btn
       >
     </div>
+    <QuickReactions :event="event" :reactions="reactions" />
     <div class="bubble image-bubble">
-      <v-img :aspect-ratio="16 / 9" ref="image" :src="src" :cover="cover" :contain="contain" />
-      <QuickReactions :event="event" :reactions="reactions" />
+      <v-img
+        :aspect-ratio="16 / 9"
+        ref="image"
+        :src="src"
+        :cover="cover"
+        :contain="contain"
+      />
     </div>
-    <v-avatar class="avatar" size="32" color="#ededed" @click.stop="ownAvatarClicked">
+    <v-avatar
+      class="avatar"
+      size="32"
+      color="#ededed"
+      @click.stop="ownAvatarClicked"
+    >
       <img v-if="userAvatar" :src="userAvatar" />
       <span v-else class="white--text headline">{{ userAvatarLetter }}</span>
     </v-avatar>

src/components/messages/MessageOutgoingSticker.vue

@@ -5,11 +5,22 @@
         ><v-icon>more_vert</v-icon></v-btn
       >
     </div>
+    <QuickReactions :event="event" :reactions="reactions" />
     <div class="bubble sticker-bubble">
-      <v-img :aspect-ratio="16 / 9" ref="image" :src="src" :cover="cover" :contain="contain" />
-      <QuickReactions :event="event" :reactions="reactions" />
+      <v-img
+        :aspect-ratio="16 / 9"
+        ref="image"
+        :src="src"
+        :cover="cover"
+        :contain="contain"
+      />
     </div>
-    <v-avatar class="avatar" size="32" color="#ededed" @click.stop="ownAvatarClicked">
+    <v-avatar
+      class="avatar"
+      size="32"
+      color="#ededed"
+      @click.stop="ownAvatarClicked"
+    >
       <img v-if="userAvatar" :src="userAvatar" />
       <span v-else class="white--text headline">{{ userAvatarLetter }}</span>
     </v-avatar>
@@ -37,7 +48,7 @@ export default {
     };
   },
   mounted() {
-    this.src = stickers.getStickerImage(this.event.getContent().body)
+    this.src = stickers.getStickerImage(this.event.getContent().body);
   },
 };
 </script>

src/components/messages/MessageOutgoingText.vue

@@ -5,13 +5,16 @@
         ><v-icon>more_vert</v-icon></v-btn
       >
     </div>
+    <QuickReactions :event="event" :reactions="reactions" />
     <div class="bubble">
-      <QuickReactions :event="event" :reactions="reactions" />
       <div class="original-message" v-if="inReplyToText">
         <div class="original-message-sender">
           {{ inReplyToSender || "Someone" }} said:
         </div>
-        <div class="original-message-text" v-html="linkify($sanitize(inReplyToText))" />
+        <div
+          class="original-message-text"
+          v-html="linkify($sanitize(inReplyToText))"
+        />
       </div>
 
       <div class="message">
@@ -21,7 +24,12 @@
         >
       </div>
     </div>
-    <v-avatar class="avatar" size="32" color="#ededed" @click.stop="ownAvatarClicked">
+    <v-avatar
+      class="avatar"
+      size="32"
+      color="#ededed"
+      @click.stop="ownAvatarClicked"
+    >
       <img v-if="userAvatar" :src="userAvatar" />
       <span v-else class="white--text headline">{{ userAvatarLetter }}</span>
     </v-avatar>

src/components/messages/MessageOutgoingVideo.vue

@@ -5,13 +5,20 @@
         ><v-icon>more_vert</v-icon></v-btn
       >
     </div>
+    <QuickReactions :event="event" :reactions="reactions" />
     <div class="bubble image-bubble">
       <v-responsive :aspect-ratio="16 / 9" class="ma-0 pa-0">
-        <video :src="src" controls style="width:100%;height:100%">Video file</video>
+        <video :src="src" controls style="width: 100%; height: 100%">
+          Video file
+        </video>
       </v-responsive>
-            <QuickReactions :event="event" :reactions="reactions" />
     </div>
-    <v-avatar class="avatar" size="32" color="#ededed" @click.stop="ownAvatarClicked">
+    <v-avatar
+      class="avatar"
+      size="32"
+      color="#ededed"
+      @click.stop="ownAvatarClicked"
+    >
       <img v-if="userAvatar" :src="userAvatar" />
       <span v-else class="white--text headline">{{ userAvatarLetter }}</span>
     </v-avatar>