Merge branch '617-channel-page-ui-qa' into 'dev'

Resolve "Channel Page UI QA"

See merge request keanuapp/keanuapp-weblite!327

src/assets/css/channel.scss

@@ -153,6 +153,11 @@
     display: none;
   }
 
+  .poll-percent-indicator {
+    background: #EBE9E9;
+    border-radius: 4px;
+  }
+
   .messageOut.pinned,
   .messageIn.pinned,
   .messageOut.from-admin.pinned,
@@ -175,31 +180,41 @@
   .thumbnail-item.file-item {
     background-color: rgba(245,245,245,1);
     border-radius: 8px;
-    padding: 15px 40px 15px 60px;
+    padding: 12px 40px 12px 76px;
     align-items: start;
     position: relative;
     font-family: Inter;
     font-size: 14 * $chat-text-size;
     font-weight: 400;
-    line-height: 16.38 * $chat-text-size;
+    line-height: 16.8 * $chat-text-size;
     letter-spacing: 0.4 * $chat-text-size;
     text-align: left;
-    b {
-      font-weight: 600;
+    min-height: 80px;
+    .file-name {
+      font-weight: 700;
+      display: block;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      word-break: break-all;
+      text-overflow: ellipsis;
+      max-lines: 2;
+      line-clamp: 2;
+      -webkit-line-clamp: 2;
     }
     svg, .v-icon {
       position: absolute;
       top: 12px;
       left: 12px;
-      width: 40px;
-      height: 40px;
+      width: 56px;
+      height: 56px;
     }
     &::after {
       content: " ";
       background: url("~@/assets/icons/ic_export.svg") no-repeat;
       background-position: 0 0; 
       position: absolute;
-      right: 15px;
+      right: 12px;
       height: 24px;
       width: 24px;
       margin: auto 0;
@@ -207,6 +222,14 @@
     &:hover {
       opacity: 0.7;
     }
+    .file-size {
+      font-size: 12 * $chat-text-size;
+      font-weight: 400;
+      line-height: 14.4 * $chat-text-size;
+    }
+    & .zip {
+      color: #0060e5;
+    }   
   }
 
   .swipeable-thumbnails-view {

src/assets/css/chat.scss

@@ -251,6 +251,7 @@ body {
         overflow: hidden;
         text-overflow: ellipsis;
         display: -webkit-box;
+        line-clamp: 4;
         -webkit-line-clamp: 4;
         -webkit-box-orient: vertical;
       }
@@ -1610,4 +1611,18 @@ body {
   height: $small-button-height !important;
   margin-top: $chat-standard-padding-xs;
   margin-bottom: $chat-standard-padding-xs;
-}
+}
+
+.thumbnail-item {
+  line-height: 16.38 * $chat-text-size;
+  .file-name {
+    font-weight: 700;
+  }
+  .file-size {
+    margin-top: 8px;
+    color: #61605F;
+  }
+  .zip {
+    color: #1d1d1d;
+  }
+}

src/assets/icons/ic_zip.vue

@@ -3,6 +3,6 @@
         <rect width="56" height="56" rx="13" fill="#FCFCFC" />
         <path
             d="M30.5667 36.6733C30.5667 38.8627 25.4307 38.8453 25.4307 36.6773C25.4307 34.4267 30.5667 34.3747 30.5667 36.6733ZM44 18.6667V37.3333C44 41.0147 41.016 44 37.3333 44H18.6667C14.984 44 12 41.0147 12 37.3333V18.6667C12 14.9853 14.984 12 18.6667 12H37.3333C41.016 12 44 14.9853 44 18.6667ZM25.3333 21.3333H30.6667V20H25.3333V21.3333ZM25.3333 18.6667H30.6667V17.3333H25.3333V18.6667ZM25.3333 16H30.6667V14.6667H25.3333V16ZM25.3333 24H30.6667V22.6667H25.3333V24ZM25.3333 26.6667H30.6667V25.3333H25.3333V26.6667ZM32.1573 35.7147C31.64 33.056 30.668 28 30.668 28H25.3347C25.3347 28 24.3907 32.944 23.8453 35.7147C23.3053 38.4493 25.2173 40 28.0013 40C30.788 40 32.6893 38.4467 32.1573 35.7147Z"
-            fill="#1D1D1D" />
+            fill="currentColor" />
     </svg>
 </template>

src/components/Chat.vue

@@ -1601,7 +1601,7 @@ export default {
      * @param {*} element Root element for the chat message.
      */
     onLayoutChange(action, element) {
-      if (!element || !element.parentElemen || this.useVoiceMode || this.useFileModeNonAdmin) {
+      if (!element || !element.parentElement || this.useVoiceMode || this.useFileModeNonAdmin) {
         action();
         return
       }

src/components/file_mode/ThumbnailView.vue

@@ -7,9 +7,9 @@
         </v-responsive>
         <v-img v-else-if="item.event.getContent().msgtype == 'm.image' && item.src" :aspect-ratio="previewOnly ? (16 / 9) : undefined" :class="{'thumbnail-item': true, 'preview': previewOnly}" :src="item.src" :contain="!previewOnly" :cover="previewOnly" />
         <div v-else :class="{'thumbnail-item': true, 'preview': previewOnly, 'file-item': true}" >
-            <v-icon>{{ fileTypeIcon }}</v-icon>
-            <b>{{ $sanitize(fileName) }}</b>
-            <div>{{ fileSize }}</div>
+            <v-icon :class="fileTypeIconClass">{{ fileTypeIcon }}</v-icon>
+            <div class="file-name">{{ $sanitize(fileName) }}</div>
+            <div class="file-size">{{ fileSize }}</div>
         </div>
     </div>
 </template>
@@ -54,6 +54,12 @@ export default {
             }
             return "description"
         },
+        fileTypeIconClass() {
+            if (util.isFileTypeZip(this.item.event)) {
+                return "zip";
+            } 
+            return undefined;
+        },
         fileName() {
             return util.getFileName(this.item.event);
         },