From c6e810742a896e366ac101ecf259ec87b597006f Mon Sep 17 00:00:00 2001
From: 10G Meow <10gmeow@gmail.com>
Date: Sun, 6 Feb 2022 14:21:18 +0200
Subject: [PATCH] implemented image preview in mobile and desktop

---
 src/assets/css/chat.scss                         |  6 ++++--
 src/components/messages/MessageIncomingImage.vue | 14 +++++++++++---
 src/components/messages/MessageOutgoingImage.vue |  8 ++++++++
 3 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss
index 653c22c..a875487 100644
--- a/src/assets/css/chat.scss
+++ b/src/assets/css/chat.scss
@@ -264,6 +264,7 @@ $admin-fg: white;
         display: inline-block;
         width: 70%;
         max-width: 70%;
+        cursor: pointer;
     }
     .bubble.sticker-bubble {
         padding: 0px;
@@ -358,8 +359,9 @@ $admin-fg: white;
         display: inline-block;
         width: 70%;
         max-width: 70%;
-        .v-image,
-        video {
+        cursor: pointer;
+
+        .v-image, video {
             border-radius: 10px 10px 0 10px;
             [dir="rtl"] & {
                 border-radius: 10px 10px 10px 0px;
diff --git a/src/components/messages/MessageIncomingImage.vue b/src/components/messages/MessageIncomingImage.vue
index 7015b31..b73752f 100644
--- a/src/components/messages/MessageIncomingImage.vue
+++ b/src/components/messages/MessageIncomingImage.vue
@@ -1,15 +1,22 @@
 <template>
-<message-incoming v-bind="{...$props, ...$attrs}" v-on="$listeners">
-      <div class="bubble image-bubble">
+  <message-incoming v-bind="{...$props, ...$attrs}" v-on="$listeners">
+    <div class="bubble image-bubble">
       <v-img
         :aspect-ratio="16 / 9"
         ref="image"
         :src="src"
         :cover="cover"
         :contain="contain"
+        @click.stop="dialog = true"
       />
     </div>
-</message-incoming>  
+    <v-dialog
+      v-model="dialog"
+      :width="$vuetify.breakpoint.smAndUp ? '940px' : '90%'"
+    >
+      <v-img :src="src"/>
+    </v-dialog>
+  </message-incoming>
 </template>
 
 <script>
@@ -24,6 +31,7 @@ export default {
       src: null,
       cover: true,
       contain: false,
+      dialog: false
     };
   },
   mounted() {
diff --git a/src/components/messages/MessageOutgoingImage.vue b/src/components/messages/MessageOutgoingImage.vue
index a0b1bec..e9e5c29 100644
--- a/src/components/messages/MessageOutgoingImage.vue
+++ b/src/components/messages/MessageOutgoingImage.vue
@@ -7,8 +7,15 @@
         :src="src"
         :cover="cover"
         :contain="contain"
+        @click.stop="dialog = true"
       />
     </div>
+    <v-dialog
+      v-model="dialog"
+      :width="$vuetify.breakpoint.smAndUp ? '940px' : '90%'"
+    >
+      <v-img :src="src"/>
+    </v-dialog>
   </message-outgoing>
 </template>
 
@@ -24,6 +31,7 @@ export default {
       src: null,
       cover: true,
       contain: false,
+      dialog: false
     };
   },
   mounted() {