diff --git a/src/assets/css/channel.scss b/src/assets/css/channel.scss index 6538043..bdf6895 100644 --- a/src/assets/css/channel.scss +++ b/src/assets/css/channel.scss @@ -71,6 +71,22 @@ color: black !important; display: flex; flex-direction: column; + .more-less-control__content { + transition: height 0.3s linear; + overflow: hidden; + } + .more-less-control.collapsed .more-less-control__content { + max-height: 4 * 24 * $chat-text-size; // Four lines - font size is 16 and line height 1.5 + } + .more-less-control__read-more, .more-less-control__read-less { + font-family: "Inter", sans-serif; + font-size: 16 * $chat-text-size; + font-weight: 500; + line-height: 20.8 * $chat-text-size; + letter-spacing: 0.400 * $chat-text-size; + text-align: left; + color: #6360F0; + } } } .bubble { @@ -124,8 +140,17 @@ } } + .poll-bubble svg { + color: black; + } .poll-answer { - border-radius: 10px; + + &.selected { + font-weight: 500; + } + } + .poll-check-icon { + display: none; } .messageOut.pinned, @@ -148,11 +173,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 +204,9 @@ width: 24px; margin: auto 0; } + &:hover { + opacity: 0.7; + } } .swipeable-thumbnails-view { @@ -192,7 +229,7 @@ margin: 0 2.5px; background: #D9D9D9; &.current { - background: #1C1C31; + background: #6360F0; } } diff --git a/src/assets/css/components/_poll.scss b/src/assets/css/components/_poll.scss index 4715902..9541f2f 100644 --- a/src/assets/css/components/_poll.scss +++ b/src/assets/css/components/_poll.scss @@ -37,7 +37,7 @@ border-radius: 4px; padding: 15px 14px; margin: 0px; - height: $min-touch-target; + min-height: $min-touch-target; &:hover { cursor: pointer; } @@ -165,6 +165,7 @@ color: white; text-transform: uppercase; height: 42px; + min-width: 132px; } .poll-disclose { 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/assets/icons/ic_like_filled.vue b/src/assets/icons/ic_like_filled.vue index 2900686..1328d3f 100644 --- a/src/assets/icons/ic_like_filled.vue +++ b/src/assets/icons/ic_like_filled.vue @@ -2,6 +2,6 @@ + stroke="currentColor" stroke-width="1.875" fill="currentColor" /> 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/InputControl.vue b/src/components/InputControl.vue index fb74749..539831c 100644 --- a/src/components/InputControl.vue +++ b/src/components/InputControl.vue @@ -1,21 +1,18 @@ @@ -29,25 +26,25 @@ export default { props: { label: { type: String, - default: function() { + default: function () { return ""; }, }, error: { type: String, - default: function() { + default: function () { return ""; }, }, disabled: { type: Boolean, - default: function() { + default: function () { return false; }, }, modelValue: { type: String, - default: function() { + default: function () { return null; }, }, @@ -73,12 +70,20 @@ export default { width: 100%; display: flex; position: relative; - min-height: $min-touch-target; + min-height: 58px; background: #f5f5f5; border-radius: 4px; transition: background-color 0.4s, box-shadow 0.4s; margin-bottom: 12px; + + .input-wrapper { + width: 100%; + display: flex; + flex-direction: row; + padding: 22px 16px 0px 16px; + } + &.errored { border: 1px solid #e31b00; } @@ -95,6 +100,7 @@ export default { right: 16px; display: flex; } + .placeholder { text-align: start; font-family: "Inter"; @@ -122,10 +128,11 @@ export default { position: absolute; left: 0px; right: 0px; - top: 14px; + top: 20px; font-size: 16px; color: rgba(0, 0, 0, 0.7); margin-right: 0px; + &:only-child { top: 8px; } @@ -139,16 +146,12 @@ export default { line-height: 117%; letter-spacing: 0.4px; color: #000000; - position: absolute; - top: 20px; - left: 16px; - right: 16px; - bottom: 0; - width: 100%; + flex: 1 1 100%; &:focus { top: 20px; } + &:focus, &:focus-visible { border: none; @@ -157,14 +160,7 @@ export default { } .slot { - position: absolute; - right: 16px; - align-self: center; - - [dir="rtl"] & { - left: 16px; - right: unset; - } + flex: 0 0 auto; } } diff --git a/src/components/MoreLessControl.vue b/src/components/MoreLessControl.vue new file mode 100644 index 0000000..52693a7 --- /dev/null +++ b/src/components/MoreLessControl.vue @@ -0,0 +1,61 @@ + + + + + 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"; diff --git a/src/components/messages/MessageIncoming.vue b/src/components/messages/MessageIncoming.vue index da616c8..d468d5c 100644 --- a/src/components/messages/MessageIncoming.vue +++ b/src/components/messages/MessageIncoming.vue @@ -4,7 +4,7 @@
{{ eventSenderDisplayName(event) }}
- {{ utils.formatTime(event.event.origin_server_ts) }} + {{ room.displayType == ROOM_TYPE_CHANNEL ? formatTimeAgo(event.event.origin_server_ts) : utils.formatTime(event.event.origin_server_ts) }}
diff --git a/src/components/messages/MessageIncomingText.vue b/src/components/messages/MessageIncomingText.vue index 1e30c2b..f98648d 100644 --- a/src/components/messages/MessageIncomingText.vue +++ b/src/components/messages/MessageIncomingText.vue @@ -14,10 +14,12 @@ block {{ redactedBySomeoneElse(event) ? $t('message.incoming_message_deleted_text') : $t('message.outgoing_message_deleted_text')}} - - - {{ $t('message.edited') }} - + + + + {{ $t('message.edited') }} + + @@ -26,11 +28,12 @@ diff --git a/src/components/messages/MessageOutgoing.vue b/src/components/messages/MessageOutgoing.vue index 10e2c66..da41b18 100644 --- a/src/components/messages/MessageOutgoing.vue +++ b/src/components/messages/MessageOutgoing.vue @@ -4,7 +4,7 @@
{{ eventSenderDisplayName(event) }}
- {{ utils.formatTime(event.event.origin_server_ts) }} + {{ room.displayType == ROOM_TYPE_CHANNEL ? formatTimeAgo(event.event.origin_server_ts) : utils.formatTime(event.event.origin_server_ts) }}
{{ event.status }}
diff --git a/src/components/messages/MessageOutgoingText.vue b/src/components/messages/MessageOutgoingText.vue index 0267983..fd55d75 100644 --- a/src/components/messages/MessageOutgoingText.vue +++ b/src/components/messages/MessageOutgoingText.vue @@ -14,10 +14,12 @@ block {{ redactedBySomeoneElse(event) ? $t('message.incoming_message_deleted_text') : $t('message.outgoing_message_deleted_text')}} - - - {{ $t('message.edited') }} - + + + + {{ $t('message.edited') }} + + @@ -25,10 +27,11 @@