From 62cf15f2de14b9fea5b29c86bb1888dba9d522cf Mon Sep 17 00:00:00 2001 From: 10G Meow <10gmeow@gmail.com> Date: Sat, 18 May 2024 22:13:07 +0300 Subject: [PATCH] Mobile: top level heart reaction on double tab --- src/assets/css/_variables.scss | 4 +- src/assets/css/chat.scss | 12 +++- src/assets/css/components/_poll.scss | 4 +- src/assets/css/filedrop.scss | 8 +-- src/assets/heart.png | Bin 0 -> 11548 bytes src/components/Chat.vue | 55 +++++++++++++++++- src/components/InputControl.vue | 2 +- src/components/MessageRetentionDialog.vue | 2 +- src/components/file_mode/ThumbnailView.vue | 45 +++++++++----- src/components/messages/MessageIncoming.vue | 12 +++- .../messages/MessageIncomingImage.vue | 18 +++++- src/components/messages/MessageOutgoing.vue | 12 +++- .../messages/MessageOutgoingImage.vue | 18 +++++- .../messages/MessageOutgoingThread.vue | 6 +- src/components/messages/messageMixin.js | 20 ++++++- src/plugins/utils.js | 20 +++++++ 16 files changed, 199 insertions(+), 39 deletions(-) create mode 100644 src/assets/heart.png diff --git a/src/assets/css/_variables.scss b/src/assets/css/_variables.scss index ea510aa..88fa7b5 100644 --- a/src/assets/css/_variables.scss +++ b/src/assets/css/_variables.scss @@ -18,4 +18,6 @@ $voice-recording-color: red; $voice-recorded-color: #3ae17d; $poll-hilite-color: #6360f0; $poll-hilite-color-bg: #d6d5fc; -$alert-bg-color: #FF3300; \ No newline at end of file +$alert-bg-color: #FF3300; + +$min-touch-target: 48px; \ No newline at end of file diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss index 4938df9..0636372 100644 --- a/src/assets/css/chat.scss +++ b/src/assets/css/chat.scss @@ -286,7 +286,7 @@ body { .input-area-button { margin: 0; padding: 0; - min-width: 48px; + min-width: $min-touch-target; &.input-more-icon { svg { @@ -430,6 +430,10 @@ body { display: inline-block; position: relative; max-width: 70%; + + @media #{map-get($display-breakpoints, 'sm-and-down')} { + min-height: $min-touch-target; + } } &.from-admin .bubble { background-color: rgba($admin-bg,0.8); @@ -520,6 +524,10 @@ body { display: inline-block; position: relative; max-width: 70%; + + @media #{map-get($display-breakpoints, 'sm-and-down')} { + min-height: $min-touch-target; + } } .audio-bubble { background-color: rgba(#e5e5e5,0.8); @@ -1409,7 +1417,7 @@ body { bottom: 68px; left: 8px; right: 8px; - height: 48px; + height: $min-touch-target; background: rgba(0, 0, 0, 0.69); border: 1px solid #000000; border-radius: 5px; diff --git a/src/assets/css/components/_poll.scss b/src/assets/css/components/_poll.scss index 89374a2..8e39b64 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: 48px; + height: $min-touch-target; &:hover { cursor: pointer; } @@ -225,7 +225,7 @@ .add-answer-button { border-radius: 4px; - height: 48px; + height: $min-touch-target; width: 100%; overflow: hidden; border: 1px solid #242424; diff --git a/src/assets/css/filedrop.scss b/src/assets/css/filedrop.scss index f4cccd1..b66c5dd 100644 --- a/src/assets/css/filedrop.scss +++ b/src/assets/css/filedrop.scss @@ -1,4 +1,4 @@ -$large-button-height: 48px; +$large-button-height: $min-touch-target; $small-button-height: 36px; .file-drop-root { @@ -295,11 +295,11 @@ $small-button-height: 36px; position: relative; padding: 8px; .v-image { - width: 48px; - height: 48px; + width: $min-touch-target; + height: $min-touch-target; border-radius: 8px; object-fit: cover; - flex: 0 0 48px; + flex: 0 0 $min-touch-target; margin-right: 8px; } margin-bottom: 8px; diff --git a/src/assets/heart.png b/src/assets/heart.png new file mode 100644 index 0000000000000000000000000000000000000000..8d357d196d64dc5efe740119b9456ebce795be11 GIT binary patch literal 11548 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�Z9O{* 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 literal 0 HcmV?d00001 diff --git a/src/components/Chat.vue b/src/components/Chat.vue index 0446698..bac6bbc 100644 --- a/src/components/Chat.vue +++ b/src/components/Chat.vue @@ -82,6 +82,7 @@ showMoreMessageOperations({event: event, anchor: $event.anchor}) " v-on:layout-change="onLayoutChange" + v-on:addQuickHeartReaction="addQuickHeartReaction(event)" /> @@ -327,6 +328,9 @@ +
+
+
@@ -493,6 +497,7 @@ export default { retentionTimer: null, showProfileDialog: false, showPurgeConfirmation: false, + heartAnimation: false }; }, @@ -533,6 +538,9 @@ export default { }, computed: { + heartEmoji() { + return this.$refs.emojiPicker.mapEmojis["Symbols"].find(({ aliases }) => aliases.includes('heart')).data; + }, compActiveMember() { const currentUserId= this.selectedEvent?.sender.userId || this.$matrix.currentUserId return this.joinedAndInvitedMembers.find(({userId}) => userId === currentUserId) @@ -1569,6 +1577,10 @@ export default { this.sendQuickReaction({ reaction: e.emoji, event: e.event }); }, + addQuickHeartReaction(event) { + this.sendQuickReaction({ reaction: this.heartEmoji, event }, true); + }, + setReplyToImage(event) { util .getThumbnail(this.$matrix.matrixClient, event, this.$config) @@ -1652,7 +1664,15 @@ export default { }); }, - sendQuickReaction(e) { + showHeartAnimation() { + const self = this; + this.heartAnimation = true; + setTimeout(() => { + self.heartAnimation = false; + }, 1000) + }, + + sendQuickReaction(e, heartAnimationFlag = false) { let previousReaction = null; // Figure out if we have already sent this emoji, in that case redact it again (toggle) @@ -1679,6 +1699,10 @@ export default { .catch((err) => { console.log("Failed to send quick reaction:", err); }); + + if(heartAnimationFlag) { + this.showHeartAnimation(); + } } }, @@ -1909,4 +1933,33 @@ export default { diff --git a/src/components/InputControl.vue b/src/components/InputControl.vue index 251bd7e..fb74749 100644 --- a/src/components/InputControl.vue +++ b/src/components/InputControl.vue @@ -73,7 +73,7 @@ export default { width: 100%; display: flex; position: relative; - min-height: 48px; + min-height: $min-touch-target; background: #f5f5f5; border-radius: 4px; diff --git a/src/components/MessageRetentionDialog.vue b/src/components/MessageRetentionDialog.vue index 8ebb7ce..6a37160 100644 --- a/src/components/MessageRetentionDialog.vue +++ b/src/components/MessageRetentionDialog.vue @@ -117,6 +117,6 @@ export default { } .v-radio.flex-row-reverse { - height: 48px; + height: $min-touch-target; } diff --git a/src/components/file_mode/ThumbnailView.vue b/src/components/file_mode/ThumbnailView.vue index 1756151..02f9b77 100644 --- a/src/components/file_mode/ThumbnailView.vue +++ b/src/components/file_mode/ThumbnailView.vue @@ -1,16 +1,16 @@ diff --git a/src/components/messages/MessageIncoming.vue b/src/components/messages/MessageIncoming.vue index 6e945be..eb40a2c 100644 --- a/src/components/messages/MessageIncoming.vue +++ b/src/components/messages/MessageIncoming.vue @@ -14,7 +14,9 @@ }} - + + +
more_vert @@ -28,10 +30,16 @@ diff --git a/src/components/messages/MessageIncomingImage.vue b/src/components/messages/MessageIncomingImage.vue index 732c584..08bb1dd 100644 --- a/src/components/messages/MessageIncomingImage.vue +++ b/src/components/messages/MessageIncomingImage.vue @@ -1,13 +1,12 @@