fix(chat): change message hover (#2276)

Satellite-im · Mar 17, 2022 · f2227d9 · f2227d9
1 parent 7e68620
commit f2227d9
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 22 deletions.
diff --git a/components/ui/Chat/Image/Image.html b/components/ui/Chat/Image/Image.html
@@ -4,7 +4,7 @@
       <img
         class="is-image-in-mask"
         :src="image.url"
-        v-click-outside="() => $data.showfull = !$data.showfull"
+        v-click-outside="clickHandler"
       />
       <a class="link" :href="image.url" target="_blank">
         {{ $t('files.view_original') }}
@@ -16,6 +16,6 @@
     data-cy="chat-image"
     :class="full ? 'is-full-image' : 'is-normal-image'"
     :src="image.url"
-    @click="() => $data.showfull = !$data.showfull"
+    @click="clickHandler"
   />
 </div>
diff --git a/components/ui/Chat/Image/Image.vue b/components/ui/Chat/Image/Image.vue
@@ -28,6 +28,11 @@ export default Vue.extend({
       showfull: false,
     }
   },
+  methods: {
+    clickHandler(event: MouseEvent): void {
+      this.showfull = !this.showfull
+    },
+  },
 })
 </script>
 <style scoped lang="less" src="./Image.less"></style>
diff --git a/components/views/chat/message/Message.html b/components/views/chat/message/Message.html
@@ -4,9 +4,7 @@
   @contextmenu="contextMenu"
 >
   <div
-    @mouseenter="mouseOver"
-    @mouseleave="mouseOver"
-    :class="`message-container ${messageHover ? 'message-hover' : '' } ${message.pinned ? 'pinned-message' : ''}`"
+    :class="`message-container ${message.pinned ? 'pinned-message' : ''}`"
   >
     <div v-if="message.pinned" class="pinned-badge">
       <archive-icon size="0.85x" />
@@ -27,7 +25,7 @@
       <TypographyText :text="timestamp" />
     </div>
     <MessageActions
-      v-if="messageHover && !hideActions"
+      v-if="!hideActions"
       :setReplyChatbarContent="setReplyChatbarContent"
       :emojiReaction="emojiReaction"
       :editMessage="editMessage"

diff --git a/components/views/chat/message/Message.less b/components/views/chat/message/Message.less
@@ -68,9 +68,14 @@
     position: relative;
     word-break: break-word;
   }
-
-  .message-hover {
+  .message-actions{
+    display: none;
+  }
+  &:hover {
     &:extend(.background-semitransparent-light);
+    .message-actions{
+      display: flex;
+    }
   }
   .glyph {
     width: 192px;

diff --git a/components/views/chat/message/Message.vue b/components/views/chat/message/Message.vue
@@ -50,14 +50,9 @@ export default Vue.extend({
       type: Boolean,
       default: false,
     },
-    setMessageHover: {
-      type: Function,
-      default: () => {},
-    },
   },
   data() {
     return {
-      messageHover: false,
       disData: 'DataFromTheProperty',
       contextMenuValues: [
         { text: 'quickReaction', func: this.quickReaction },
@@ -139,14 +134,6 @@ export default Vue.extend({
     testFunc() {
       this.$Logger.log('Message Context', 'Test func')
     },
-    /**
-     * @method mouseOver DocsTODO
-     * @description
-     * @example
-     */
-    mouseOver() {
-      this.$data.messageHover = !this.$data.messageHover
-    },
     /**
      * @method setReplyChatbarContent DocsTODO
      * @description
@@ -264,4 +251,4 @@ export default Vue.extend({
   },
 })
 </script>
-<style lang="less" src="./Message.less"></style>
+<style lang="less" scoped src="./Message.less"></style>