diff --git a/src/assets/css/channel.scss b/src/assets/css/channel.scss index 9f306ee..12f9729 100644 --- a/src/assets/css/channel.scss +++ b/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 { diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss index 4fae2ca..c355851 100644 --- a/src/assets/css/chat.scss +++ b/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; -} \ No newline at end of file +} + +.thumbnail-item { + line-height: 16.38 * $chat-text-size; + .file-name { + font-weight: 700; + } + .file-size { + margin-top: 8px; + color: #61605F; + } + .zip { + color: #1d1d1d; + } +} diff --git a/src/assets/icons/ic_zip.vue b/src/assets/icons/ic_zip.vue index a58cdeb..c5439eb 100644 --- a/src/assets/icons/ic_zip.vue +++ b/src/assets/icons/ic_zip.vue @@ -3,6 +3,6 @@ + fill="currentColor" /> \ No newline at end of file diff --git a/src/components/Chat.vue b/src/components/Chat.vue index c6bc948..76de6bc 100644 --- a/src/components/Chat.vue +++ b/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 } diff --git a/src/components/file_mode/ThumbnailView.vue b/src/components/file_mode/ThumbnailView.vue index 19fa788..3cc290c 100644 --- a/src/components/file_mode/ThumbnailView.vue +++ b/src/components/file_mode/ThumbnailView.vue @@ -7,9 +7,9 @@
- {{ fileTypeIcon }} - {{ $sanitize(fileName) }} -
{{ fileSize }}
+ {{ fileTypeIcon }} +
{{ $sanitize(fileName) }}
+
{{ fileSize }}
@@ -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); },