From e31ea61c97f3d548b6f98af1388db3e9f4b49b40 Mon Sep 17 00:00:00 2001 From: N-Pex Date: Mon, 4 Nov 2024 11:29:19 +0100 Subject: [PATCH] New style for file attachment items --- src/assets/css/channel.scss | 14 +++++++++++++- src/assets/icons/ic_channel_apk.vue | 8 ++++++++ src/assets/icons/ic_channel_pdf.vue | 11 +++++++++++ src/components/Chat.vue | 1 + src/components/file_mode/ThumbnailView.vue | 6 ++++++ 5 files changed, 39 insertions(+), 1 deletion(-) create mode 100644 src/assets/icons/ic_channel_apk.vue create mode 100644 src/assets/icons/ic_channel_pdf.vue diff --git a/src/assets/css/channel.scss b/src/assets/css/channel.scss index 9a6fc7a..ef96e9e 100644 --- a/src/assets/css/channel.scss +++ b/src/assets/css/channel.scss @@ -148,11 +148,20 @@ /* Style file items (i.e. PDF files) */ .thumbnail-item.file-item { - border: 1px solid black; + background-color: rgba(245,245,245,1); border-radius: 8px; padding: 15px 40px 15px 60px; align-items: start; position: relative; + font-family: Inter; + font-size: 14 * $chat-text-size; + font-weight: 400; + line-height: 16.38 * $chat-text-size; + letter-spacing: 0.4 * $chat-text-size; + text-align: left; + b { + font-weight: 600; + } svg, .v-icon { position: absolute; top: 12px; @@ -170,6 +179,9 @@ width: 24px; margin: auto 0; } + &:hover { + opacity: 0.7; + } } .swipeable-thumbnails-view { diff --git a/src/assets/icons/ic_channel_apk.vue b/src/assets/icons/ic_channel_apk.vue new file mode 100644 index 0000000..472ee1b --- /dev/null +++ b/src/assets/icons/ic_channel_apk.vue @@ -0,0 +1,8 @@ + \ No newline at end of file diff --git a/src/assets/icons/ic_channel_pdf.vue b/src/assets/icons/ic_channel_pdf.vue new file mode 100644 index 0000000..b3a392b --- /dev/null +++ b/src/assets/icons/ic_channel_pdf.vue @@ -0,0 +1,11 @@ + \ No newline at end of file diff --git a/src/components/Chat.vue b/src/components/Chat.vue index 4d9202d..c15c022 100644 --- a/src/components/Chat.vue +++ b/src/components/Chat.vue @@ -999,6 +999,7 @@ export default { const pinnedEvents = this.$matrix.getPinnedEvents(this.room); updated.forEach((e) => { Vue.set(e, "isPinned", pinnedEvents.includes(e.threadParent ? e.threadParent.getId() : e.getId())); + Vue.set(e, "isChannelMessage", (this.room && this.roomDisplayType == ROOM_TYPE_CHANNEL)); }); updated = updated.sort((e1, e2) => { diff --git a/src/components/file_mode/ThumbnailView.vue b/src/components/file_mode/ThumbnailView.vue index 02f9b77..19fa788 100644 --- a/src/components/file_mode/ThumbnailView.vue +++ b/src/components/file_mode/ThumbnailView.vue @@ -38,10 +38,16 @@ export default { computed: { fileTypeIcon() { if (util.isFileTypeAPK(this.item.event)) { + if (this.item.event.isChannelMessage) { + return "$vuetify.icons.ic_channel_apk"; + } return "$vuetify.icons.ic_apk"; } else if (util.isFileTypeIPA(this.item.event)) { return "$vuetify.icons.ic_ipa"; } else if (util.isFileTypePDF(this.item.event)) { + if (this.item.event.isChannelMessage) { + return "$vuetify.icons.ic_channel_pdf"; + } return "$vuetify.icons.ic_pdf"; } else if (util.isFileTypeZip(this.item.event)) { return "$vuetify.icons.ic_zip";