From 54770770f9fb75861ebfa8e93f1327731cb84409 Mon Sep 17 00:00:00 2001 From: N-Pex Date: Tue, 3 Dec 2024 10:11:26 +0100 Subject: [PATCH 1/4] Fix zip icon color --- src/assets/css/channel.scss | 3 +++ src/assets/css/chat.scss | 6 +++++- src/assets/icons/ic_zip.vue | 2 +- src/components/Chat.vue | 2 +- src/components/file_mode/ThumbnailView.vue | 8 +++++++- 5 files changed, 17 insertions(+), 4 deletions(-) diff --git a/src/assets/css/channel.scss b/src/assets/css/channel.scss index 9f306ee..c34efc9 100644 --- a/src/assets/css/channel.scss +++ b/src/assets/css/channel.scss @@ -207,6 +207,9 @@ &:hover { opacity: 0.7; } + & .zip { + color: #0060e5; + } } .swipeable-thumbnails-view { diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss index 4fae2ca..63c895c 100644 --- a/src/assets/css/chat.scss +++ b/src/assets/css/chat.scss @@ -1610,4 +1610,8 @@ 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 .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..b1d4990 100644 --- a/src/components/file_mode/ThumbnailView.vue +++ b/src/components/file_mode/ThumbnailView.vue @@ -7,7 +7,7 @@
- {{ fileTypeIcon }} + {{ 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); }, From 5ff466f38f6c2d6b787876ff1117e3e2df0b77b3 Mon Sep 17 00:00:00 2001 From: N-Pex Date: Tue, 3 Dec 2024 10:55:25 +0100 Subject: [PATCH 2/4] Improve file thumbnail channel layout --- src/assets/css/channel.scss | 25 ++++++++++++++++------ src/assets/css/chat.scss | 15 +++++++++++-- src/components/file_mode/ThumbnailView.vue | 4 ++-- 3 files changed, 33 insertions(+), 11 deletions(-) diff --git a/src/assets/css/channel.scss b/src/assets/css/channel.scss index c34efc9..0996808 100644 --- a/src/assets/css/channel.scss +++ b/src/assets/css/channel.scss @@ -175,31 +175,37 @@ .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; + 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 +213,11 @@ &: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; } diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss index 63c895c..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; } @@ -1612,6 +1613,16 @@ body { margin-bottom: $chat-standard-padding-xs; } -.thumbnail-item .zip { - color: #1d1d1d; +.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/components/file_mode/ThumbnailView.vue b/src/components/file_mode/ThumbnailView.vue index b1d4990..3cc290c 100644 --- a/src/components/file_mode/ThumbnailView.vue +++ b/src/components/file_mode/ThumbnailView.vue @@ -8,8 +8,8 @@
{{ fileTypeIcon }} - {{ $sanitize(fileName) }} -
{{ fileSize }}
+
{{ $sanitize(fileName) }}
+
{{ fileSize }}
From 2aa089df9147a889c6b2a896a1b5c25f3ed88b94 Mon Sep 17 00:00:00 2001 From: N-Pex Date: Wed, 4 Dec 2024 10:09:19 +0100 Subject: [PATCH 3/4] Fix max lines 2 (on webkit browsers) --- src/assets/css/channel.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/assets/css/channel.scss b/src/assets/css/channel.scss index 0996808..8fec515 100644 --- a/src/assets/css/channel.scss +++ b/src/assets/css/channel.scss @@ -187,6 +187,10 @@ 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; From 63565f104cf9f6189dbd5d9311179dccb9ccd945 Mon Sep 17 00:00:00 2001 From: N-Pex Date: Wed, 4 Dec 2024 10:40:10 +0100 Subject: [PATCH 4/4] Fix channel poll answer background color --- src/assets/css/channel.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/assets/css/channel.scss b/src/assets/css/channel.scss index 8fec515..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,