Merge branch '228-need-a-full-size-preview-of-images-on-mobile' into 'dev'

implemented image preview in mobile and desktop

See merge request keanuapp/keanuapp-weblite!40

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;

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() {

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() {