From f55266e1ca747865296fbc3a713b624f92dd0805 Mon Sep 17 00:00:00 2001 From: Joffrey JAFFEUX Date: Tue, 11 Apr 2023 09:03:12 +0200 Subject: [PATCH] UX: chat mobile tweaks (#21041) - rounded active style for messages - better active state on chat message actions rows - ensures long press on a message is not selecting text - slightly improved messages actions animation and background fading - ensures chat emoji picker is not cutoff on right side - removes old legacy code related to hovered message --- .../discourse/components/chat-message.js | 15 ++++++---- .../discourse/services/chat-channel-pane.js | 1 - .../javascripts/discourse/services/chat.js | 10 ------- .../common/chat-message-separator.scss | 2 +- .../stylesheets/common/chat-message.scss | 1 + .../stylesheets/mobile/chat-emoji-picker.scss | 1 + .../mobile/chat-message-actions.scss | 29 ++++++++++++------- .../stylesheets/mobile/chat-message.scss | 15 ++++++---- 8 files changed, 42 insertions(+), 32 deletions(-) diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-message.js b/plugins/chat/assets/javascripts/discourse/components/chat-message.js index 5a6d6620330..b475a19b8c9 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat-message.js +++ b/plugins/chat/assets/javascripts/discourse/components/chat-message.js @@ -123,7 +123,7 @@ export default class ChatMessage extends Component { return; } - if (this.pane.hoveredMessageId === this.args.message.id) { + if (this.chat.activeMessage?.model?.id === this.args.message.id) { return; } @@ -166,11 +166,12 @@ export default class ChatMessage extends Component { model: this.args.message, context: this.args.context, }; - this.pane.hoveredMessageId = this.args.message.id; } @action - handleTouchStart() { + handleTouchStart(event) { + event.stopPropagation(); + // if zoomed don't track long press if (isZoomed()) { return; @@ -188,12 +189,16 @@ export default class ChatMessage extends Component { } @action - handleTouchMove() { + handleTouchMove(event) { + event.stopPropagation(); + cancel(this._isPressingHandler); } @action - handleTouchEnd() { + handleTouchEnd(event) { + event.stopPropagation(); + cancel(this._isPressingHandler); } diff --git a/plugins/chat/assets/javascripts/discourse/services/chat-channel-pane.js b/plugins/chat/assets/javascripts/discourse/services/chat-channel-pane.js index db0392e3f1c..9e5e9461d86 100644 --- a/plugins/chat/assets/javascripts/discourse/services/chat-channel-pane.js +++ b/plugins/chat/assets/javascripts/discourse/services/chat-channel-pane.js @@ -12,7 +12,6 @@ export default class ChatChannelPane extends Service { @tracked reacting = false; @tracked selectingMessages = false; - @tracked hoveredMessageId = false; @tracked lastSelectedMessage = null; @tracked sendingLoading = false; diff --git a/plugins/chat/assets/javascripts/discourse/services/chat.js b/plugins/chat/assets/javascripts/discourse/services/chat.js index 48cdc614bc5..c5e58e52c44 100644 --- a/plugins/chat/assets/javascripts/discourse/services/chat.js +++ b/plugins/chat/assets/javascripts/discourse/services/chat.js @@ -9,7 +9,6 @@ import { and } from "@ember/object/computed"; import { computed } from "@ember/object"; import discourseLater from "discourse-common/lib/later"; import ChatMessageDraft from "discourse/plugins/chat/discourse/models/chat-message-draft"; -import { MESSAGE_CONTEXT_THREAD } from "discourse/plugins/chat/discourse/components/chat-message"; const CHAT_ONLINE_OPTIONS = { userUnseenTime: 300000, // 5 minutes seconds with no interaction @@ -78,17 +77,8 @@ export default class Chat extends Service { } set activeMessage(hash) { - this.chatChannelPane.hoveredMessageId = null; - this.chatChannelThreadPane.hoveredMessageId = null; - if (hash) { this._activeMessage = hash; - - if (hash.context === MESSAGE_CONTEXT_THREAD) { - this.chatChannelThreadPane.hoveredMessageId = hash.model.id; - } else { - this.chatChannelPane.hoveredMessageId = hash.model.id; - } } else { this._activeMessage = null; } diff --git a/plugins/chat/assets/stylesheets/common/chat-message-separator.scss b/plugins/chat/assets/stylesheets/common/chat-message-separator.scss index 820e3e95384..f01d3708ade 100644 --- a/plugins/chat/assets/stylesheets/common/chat-message-separator.scss +++ b/plugins/chat/assets/stylesheets/common/chat-message-separator.scss @@ -95,7 +95,7 @@ } & + .chat-message-separator__line-container { - padding: 20px 0 20px 1em; + padding: 20px 0; box-sizing: border-box; .chat-message-separator__line { diff --git a/plugins/chat/assets/stylesheets/common/chat-message.scss b/plugins/chat/assets/stylesheets/common/chat-message.scss index 2b8505747d3..2b0e650ac6e 100644 --- a/plugins/chat/assets/stylesheets/common/chat-message.scss +++ b/plugins/chat/assets/stylesheets/common/chat-message.scss @@ -197,6 +197,7 @@ .touch & { &:active { background: var(--primary-very-low); + border-radius: 5px; } &.chat-message-bookmarked { diff --git a/plugins/chat/assets/stylesheets/mobile/chat-emoji-picker.scss b/plugins/chat/assets/stylesheets/mobile/chat-emoji-picker.scss index 7491d4ddd21..0e204af6407 100644 --- a/plugins/chat/assets/stylesheets/mobile/chat-emoji-picker.scss +++ b/plugins/chat/assets/stylesheets/mobile/chat-emoji-picker.scss @@ -11,6 +11,7 @@ box-shadow: shadow("card"); z-index: z("header") + 2; max-width: 100vw; + box-sizing: border-box; &__backdrop { position: fixed; diff --git a/plugins/chat/assets/stylesheets/mobile/chat-message-actions.scss b/plugins/chat/assets/stylesheets/mobile/chat-message-actions.scss index 733341f0e28..d0c535fa02c 100644 --- a/plugins/chat/assets/stylesheets/mobile/chat-message-actions.scss +++ b/plugins/chat/assets/stylesheets/mobile/chat-message-actions.scss @@ -6,8 +6,11 @@ display: flex; flex-direction: column; border-radius: 8px 8px 0 0; - margin: 0 2px; - transition: bottom 0.2s ease; + margin: 0 5px; + transition: bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1), + visibility cubic-bezier(0.4, 0, 0.2, 1); + visibility: hidden; + box-sizing: border-box; .selected-message-container { padding: 0.5em 0.5em 1em 0.5em; @@ -82,6 +85,10 @@ .bookmark-btn { flex-grow: 1; height: 42px; + + &:active { + background: var(--primary-low); + } } .bookmark-btn, @@ -112,14 +119,15 @@ border-bottom: 1px solid var(--primary-low); width: 100%; list-style: none; - padding-bottom: 0.25em; - margin-bottom: 0.25em; + padding: 0.25em 0; display: flex; + &:active { + background: var(--primary-low); + } + &:last-child { - border: 0; - margin: 0; - padding: 0; + border-bottom: 0; } .chat-message-action { @@ -146,7 +154,7 @@ height: 100%; width: 100%; z-index: z("header") + 1; - transition: background-color 0.2s ease; + transition: background-color 0.4s ease; .collapse-area { width: 100%; @@ -154,10 +162,11 @@ } &.fade-in { - background-color: rgba(0, 0, 0, 0.35); + background: rgba(var(--always-black-rgb), 0.75); .chat-message-actions { - bottom: 0; + bottom: 0px; + visibility: visible; } } } diff --git a/plugins/chat/assets/stylesheets/mobile/chat-message.scss b/plugins/chat/assets/stylesheets/mobile/chat-message.scss index 20c267d2e8c..c6f772e9b60 100644 --- a/plugins/chat/assets/stylesheets/mobile/chat-message.scss +++ b/plugins/chat/assets/stylesheets/mobile/chat-message.scss @@ -1,6 +1,11 @@ -.chat-message *, -.chat-composer-row, -.chat-reply, -.replying-text { - @include unselectable; +.mobile-view.has-full-page-chat { + #skip-link, + .d-header, + .chat-message-actions-mobile-outlet, + .chat-live-pane, + .chat-thread { + > * { + @include user-select(none); + } + } }