feat: Attachment view improvements (#7314)

app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss

@@ -29,13 +29,13 @@
     }
 
     .modal-image {
-      max-height: 80vh;
+      max-height: 76vh;
-      max-width: 80vw;
+      max-width: 76vw;
     }
 
     .modal-video {
-      max-height: 80vh;
+      max-height: 76vh;
-      max-width: 80vw;
+      max-width: 76vw;
     }
 
     &::before {

app/javascript/dashboard/components/Modal.vue

@@ -8,6 +8,7 @@
     >
       <div :class="modalContainerClassName" @click.stop>
         <woot-button
+          v-if="showCloseButton"
           color-scheme="secondary"
           icon="dismiss"
           variant="clear"
@@ -28,6 +29,10 @@ export default {
       default: true,
     },
     show: Boolean,
+    showCloseButton: {
+      type: Boolean,
+      default: true,
+    },
     onClose: {
       type: Function,
       required: true,

app/javascript/dashboard/components/widgets/conversation/Message.vue

@@ -52,7 +52,7 @@
           {{ $t('CONVERSATION.UPLOADING_ATTACHMENTS') }}
         </span>
         <div v-if="!isPending && hasAttachments">
-          <div v-for="attachment in data.attachments" :key="attachment.id">
+          <div v-for="attachment in attachments" :key="attachment.id">
             <bubble-image-audio-video
               v-if="isAttachmentImageVideoAudio(attachment.file_type)"
               :attachment="attachment"
@@ -199,6 +199,14 @@ export default {
     };
   },
   computed: {
+    attachments() {
+      // Here it is used to get sender and created_at for each attachment
+      return this.data?.attachments.map(attachment => ({
+        ...attachment,
+        sender: this.data.sender || {},
+        created_at: this.data.created_at || '',
+      }));
+    },
     shouldRenderMessage() {
       return (
         this.hasAttachments ||

app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue

@@ -1,12 +1,53 @@
 <template>
-  <woot-modal full-width :show.sync="show" :on-close="onClose">
+  <woot-modal
+    full-width
+    :show.sync="show"
+    :show-close-button="false"
+    :on-close="onClose"
+  >
     <div v-on-clickaway="onClose" class="gallery-modal--wrap" @click="onClose">
+      <div class="gallery-modal--header">
+        <div class="header-info--wrap" @click.stop>
+          <thumbnail
+            :username="senderDetails.name"
+            :src="senderDetails.avatar"
+          />
+          <div class="header-info">
+            <h3 class="sub-block-title sender-name">
+              <span class="text-truncate">{{ senderDetails.name }}</span>
+            </h3>
+            <span class="time-stamp text-truncate">{{ readableTime }}</span>
+          </div>
+        </div>
+        <div class="file-name--header text-block-title">
+          <span class="text-truncate">
+            {{ fileNameFromDataUrl }}
+          </span>
+        </div>
+        <div class="header-actions" @click.stop>
+          <woot-button
+            size="large"
+            color-scheme="secondary"
+            variant="clear"
+            icon="arrow-download"
+            @click="onClickDownload"
+          />
+          <woot-button
+            size="large"
+            color-scheme="secondary"
+            variant="clear"
+            icon="dismiss"
+            @click="onClose"
+          />
+        </div>
+      </div>
+      <div class="gallery-modal--body">
         <div class="attachment-toggle--button">
           <woot-button
             v-if="hasMoreThanOneAttachment"
             size="large"
             variant="smooth"
-          color-scheme="secondary"
+            color-scheme="primary"
             icon="chevron-left"
             :disabled="activeImageIndex === 0"
             @click.stop="
@@ -21,15 +62,15 @@
           <div class="attachment-view">
             <img
               v-if="isImage"
-            :key="attachmentSrc"
+              :key="activeAttachment.message_id"
-            :src="attachmentSrc"
+              :src="activeAttachment.data_url"
               class="modal-image skip-context-menu"
               @click.stop
             />
             <video
               v-if="isVideo"
-            :key="attachmentSrc"
+              :key="activeAttachment.message_id"
-            :src="attachmentSrc"
+              :src="activeAttachment.data_url"
               controls
               playsInline
               class="modal-video skip-context-menu"
@@ -37,12 +78,12 @@
             />
             <audio
               v-if="isAudio"
-            :key="attachmentSrc"
+              :key="activeAttachment.message_id"
               controls
               class="skip-context-menu"
               @click.stop
             >
-            <source :src="`${attachmentSrc}?t=${Date.now()}`" />
+              <source :src="`${activeAttachment.data_url}?t=${Date.now()}`" />
             </audio>
           </div>
         </div>
@@ -51,7 +92,7 @@
             v-if="hasMoreThanOneAttachment"
             size="large"
             variant="smooth"
-          color-scheme="secondary"
+            color-scheme="primary"
             :disabled="activeImageIndex === allAttachments.length - 1"
             icon="chevron-right"
             @click.stop="
@@ -63,17 +104,28 @@
           />
         </div>
       </div>
+      <div class="gallery-modal--footer">
+        <div class="header-count text-block-title">
+          <span class="count">
+            {{ `${activeImageIndex + 1} / ${allAttachments.length}` }}
+          </span>
+        </div>
+      </div>
+    </div>
   </woot-modal>
 </template>
 <script>
 import { mixin as clickaway } from 'vue-clickaway';
-
+import { mapGetters } from 'vuex';
 import {
   isEscape,
   hasPressedArrowLeftKey,
   hasPressedArrowRightKey,
 } from 'shared/helpers/KeyboardHelpers';
 import eventListenerMixins from 'shared/mixins/eventListenerMixins';
+import timeMixin from 'dashboard/mixins/time';
+
+import Thumbnail from 'dashboard/components/widgets/Thumbnail';
 
 const ALLOWED_FILE_TYPES = {
   IMAGE: 'image',
@@ -82,7 +134,10 @@ const ALLOWED_FILE_TYPES = {
 };
 
 export default {
-  mixins: [eventListenerMixins, clickaway],
+  components: {
+    Thumbnail,
+  },
+  mixins: [eventListenerMixins, clickaway, timeMixin],
   props: {
     show: {
       type: Boolean,
@@ -99,18 +154,29 @@ export default {
   },
   data() {
     return {
-      attachmentSrc: '',
+      activeAttachment: {},
       activeFileType: '',
       activeImageIndex:
         this.allAttachments.findIndex(
-          attachment => attachment.id === this.attachment.id
+          attachment => attachment.message_id === this.attachment.message_id
         ) || 0,
     };
   },
   computed: {
+    ...mapGetters({
+      currentUser: 'getCurrentUser',
+    }),
     hasMoreThanOneAttachment() {
       return this.allAttachments.length > 1;
     },
+    readableTime() {
+      if (!this.activeAttachment.created_at) return '';
+      const time = this.messageTimestamp(
+        this.activeAttachment.created_at,
+        'LLL d yyyy, h:mm a'
+      );
+      return time || '';
+    },
     isImage() {
       return this.activeFileType === ALLOWED_FILE_TYPES.IMAGE;
     },
@@ -120,6 +186,21 @@ export default {
     isAudio() {
       return this.activeFileType === ALLOWED_FILE_TYPES.AUDIO;
     },
+    senderDetails() {
+      const { name, available_name: availableName, avatar_url, thumbnail, id } =
+        this.activeAttachment?.sender || this.attachment?.sender;
+      const currentUserID = this.currentUser?.id;
+      return {
+        name: currentUserID === id ? 'You' : name || availableName || '',
+        avatar: thumbnail || avatar_url || '',
+      };
+    },
+    fileNameFromDataUrl() {
+      const { data_url: dataUrl } = this.activeAttachment;
+      if (!dataUrl) return '';
+      const fileName = dataUrl?.split('/').pop();
+      return fileName || '';
+    },
   },
   mounted() {
     this.setImageAndVideoSrc(this.attachment);
@@ -140,7 +221,7 @@ export default {
       if (!Object.values(ALLOWED_FILE_TYPES).includes(type)) {
         return;
       }
-      this.attachmentSrc = attachment.data_url;
+      this.activeAttachment = attachment;
       this.activeFileType = type;
     },
     onKeyDownHandler(e) {
@@ -158,29 +239,121 @@ export default {
         );
       }
     },
+    onClickDownload() {
+      const { file_type: type, data_url: url } = this.activeAttachment;
+      if (!Object.values(ALLOWED_FILE_TYPES).includes(type)) {
+        return;
+      }
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = `attachment.${type}`;
+      link.click();
+    },
   },
 };
 </script>
 <style lang="scss" scoped>
 .gallery-modal--wrap {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
-  align-items: center;
-  width: inherit;
   height: inherit;
+  width: inherit;
+
+  .gallery-modal--header {
+    align-items: center;
+    display: flex;
+    height: var(--space-jumbo);
+    justify-content: space-between;
+    padding: var(--space-small) var(--space-medium);
+    width: 100%;
+
+    .header-info--wrap {
+      align-items: center;
+      display: flex;
+      justify-content: flex-start;
+      min-width: var(--space-giga);
+
+      .header-info {
+        align-items: flex-start;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        margin-left: var(--space-small);
+
+        .sender-name {
+          display: inline-block;
+          line-height: 1.4;
+          margin: 0;
+          padding: 0;
+          text-transform: capitalize;
+        }
+
+        .time-stamp {
+          color: var(--s-400);
+          font-size: var(--font-size-mini);
+          margin: 0;
+          padding: 0;
+        }
+      }
+    }
+
+    .file-name--header {
+      align-items: center;
+      color: var(--s-700);
+      display: flex;
+      font-weight: var(--font-weight-bold);
+      justify-content: flex-start;
+      min-width: 0;
+      padding: var(--space-smaller);
+      width: auto;
+    }
+
+    .header-actions {
+      align-items: center;
+      display: flex;
+      gap: var(--space-small);
+      justify-content: flex-end;
+      min-width: var(--space-giga);
+    }
+  }
+
+  .gallery-modal--body {
+    align-items: center;
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    width: 100%;
+  }
+
+  .gallery-modal--footer {
+    align-items: center;
+    display: flex;
+    height: var(--space-jumbo);
+    justify-content: center;
+    padding: var(--space-small) var(--space-medium);
+    width: 100%;
+
+    .header-count {
+      align-items: center;
+      border-radius: var(--border-radius-small);
+      background-color: var(--s-25);
+      color: var(--s-600);
+      display: flex;
+      font-weight: var(--font-weight-bold);
+      justify-content: center;
+      min-width: 8rem;
+      padding: var(--space-smaller);
+    }
+  }
 
   .attachments-viewer {
     display: flex;
     flex-direction: column;
+    height: 100%;
     justify-content: center;
     width: 100%;
-    height: 100%;
 
     .attachment-view {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
       img {
         margin: 0 auto;
       }
@@ -192,10 +365,10 @@ export default {
   }
 
   .attachment-toggle--button {
-    width: var(--space-mega);
-    min-width: var(--space-mega);
     display: flex;
     justify-content: center;
+    min-width: var(--space-mega);
+    width: var(--space-mega);
   }
 }
 </style>