From 07e1b0591fd5a45b62d53b170575afcac8d0f2ec Mon Sep 17 00:00:00 2001 From: Joffrey JAFFEUX Date: Thu, 10 Nov 2022 15:08:14 +0100 Subject: [PATCH] REFACTOR: chat-msgactions (#18969) - s/chat-msg-actions/chat-message-actions - s/chat-msgactions-hover/chat-message-actions-container - creates dedicated css files for this component - removes useless code - removes grayscale --- .../chat-message-actions-desktop.js | 2 +- .../components/chat-message-actions-mobile.js | 4 +- .../discourse/components/chat-message.js | 4 +- .../services/chat-emoji-picker-manager.js | 2 +- .../chat-message-actions-desktop.hbs | 6 +- .../chat-message-actions-mobile.hbs | 6 +- .../common/chat-message-actions.scss | 176 +++++++++++++++++ .../stylesheets/common/chat-message.scss | 182 ------------------ .../desktop/chat-message-actions.scss | 5 + .../stylesheets/desktop/chat-message.scss | 2 +- .../assets/stylesheets/desktop/desktop.scss | 10 - .../mobile/chat-message-actions.scss | 160 +++++++++++++++ .../stylesheets/mobile/chat-message.scss | 168 ---------------- plugins/chat/plugin.rb | 3 + .../acceptance/chat-flagging-test.js | 6 +- .../chat-live-pane-silenced-user-test.js | 2 +- .../acceptance/chat-live-pane-test.js | 4 +- .../chat-message-bookmarking-test.js | 8 +- .../acceptance/chat-message-test.js | 2 +- .../chat-move-message-to-channel-test.js | 8 +- .../acceptance/chat-quoting-test.js | 2 +- .../test/javascripts/acceptance/chat-test.js | 34 ++-- 22 files changed, 392 insertions(+), 404 deletions(-) create mode 100644 plugins/chat/assets/stylesheets/common/chat-message-actions.scss create mode 100644 plugins/chat/assets/stylesheets/desktop/chat-message-actions.scss create mode 100644 plugins/chat/assets/stylesheets/mobile/chat-message-actions.scss diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-message-actions-desktop.js b/plugins/chat/assets/javascripts/discourse/components/chat-message-actions-desktop.js index 7fafa026484..2affd3718dc 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat-message-actions-desktop.js +++ b/plugins/chat/assets/javascripts/discourse/components/chat-message-actions-desktop.js @@ -25,7 +25,7 @@ export default Component.extend({ `.chat-message-container[data-id="${this.message.id}"]` ), document.querySelector( - `.chat-msgactions-hover[data-id="${this.message.id}"] .chat-msgactions` + `.chat-message-actions-container[data-id="${this.message.id}"] .chat-message-actions` ), { placement: "right-start", diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-message-actions-mobile.js b/plugins/chat/assets/javascripts/discourse/components/chat-message-actions-mobile.js index 5ffb58def35..1457f56e55e 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat-message-actions-mobile.js +++ b/plugins/chat/assets/javascripts/discourse/components/chat-message-actions-mobile.js @@ -54,13 +54,13 @@ export default Component.extend({ _addFadeIn() { document - .querySelector(".chat-msgactions-backdrop") + .querySelector(".chat-message-actions-backdrop") ?.classList.add("fade-in"); }, _removeFadeIn() { document - .querySelector(".chat-msgactions-backdrop") + .querySelector(".chat-message-actions-backdrop") ?.classList?.remove("fade-in"); }, }); diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-message.js b/plugins/chat/assets/javascripts/discourse/components/chat-message.js index 139b8291ee6..52908dd15d7 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat-message.js +++ b/plugins/chat/assets/javascripts/discourse/components/chat-message.js @@ -261,7 +261,7 @@ export default Component.extend({ restore: this.restore, rebakeMessage: this.rebakeMessage, toggleBookmark: this.toggleBookmark, - startReactionForMsgActions: this.startReactionForMsgActions, + startReactionForMessageActions: this.startReactionForMessageActions, }; }, @@ -502,7 +502,7 @@ export default Component.extend({ }, @action - startReactionForMsgActions() { + startReactionForMessageActions() { this.chatEmojiPickerManager.startFromMessageActions( this.message, this.site.desktopView, diff --git a/plugins/chat/assets/javascripts/discourse/services/chat-emoji-picker-manager.js b/plugins/chat/assets/javascripts/discourse/services/chat-emoji-picker-manager.js index 48e2b9ef515..b19d53b61a5 100644 --- a/plugins/chat/assets/javascripts/discourse/services/chat-emoji-picker-manager.js +++ b/plugins/chat/assets/javascripts/discourse/services/chat-emoji-picker-manager.js @@ -77,7 +77,7 @@ export default class ChatEmojiPickerManager extends Service { startFromMessageActions(message, isDesktop, callback) { const trigger = document.querySelector( - `.chat-msgactions-hover[data-id="${message.id}"] .chat-msgactions` + `.chat-message-actions-container[data-id="${message.id}"] .chat-message-actions` ); this.startFromMessage(callback, isDesktop, trigger); } diff --git a/plugins/chat/assets/javascripts/discourse/templates/components/chat-message-actions-desktop.hbs b/plugins/chat/assets/javascripts/discourse/templates/components/chat-message-actions-desktop.hbs index f8a0ce3534c..4f8ec192932 100644 --- a/plugins/chat/assets/javascripts/discourse/templates/components/chat-message-actions-desktop.hbs +++ b/plugins/chat/assets/javascripts/discourse/templates/components/chat-message-actions-desktop.hbs @@ -1,5 +1,5 @@ -
-
+
+
{{#if this.chatPreferredMode.isFullPage}} {{#each this.emojiReactions as |reaction|}} @@ -7,7 +7,7 @@ {{/if}} {{#if this.messageCapabilities.canReact}} - + {{/if}} {{#if this.messageCapabilities.canBookmark}} diff --git a/plugins/chat/assets/javascripts/discourse/templates/components/chat-message-actions-mobile.hbs b/plugins/chat/assets/javascripts/discourse/templates/components/chat-message-actions-mobile.hbs index e814080e9f9..55a4c1e0511 100644 --- a/plugins/chat/assets/javascripts/discourse/templates/components/chat-message-actions-mobile.hbs +++ b/plugins/chat/assets/javascripts/discourse/templates/components/chat-message-actions-mobile.hbs @@ -1,4 +1,4 @@ -
+
-
+
@@ -57,7 +57,7 @@ @class="btn-flat react-btn" @action={{action "actAndCloseMenu" - this.messageActions.startReactionForMsgActions + this.messageActions.startReactionForMessageActions }} @icon="discourse-emojis" @title="chat.react" diff --git a/plugins/chat/assets/stylesheets/common/chat-message-actions.scss b/plugins/chat/assets/stylesheets/common/chat-message-actions.scss new file mode 100644 index 00000000000..356cf39dfa6 --- /dev/null +++ b/plugins/chat/assets/stylesheets/common/chat-message-actions.scss @@ -0,0 +1,176 @@ +.chat-message-actions-desktop-anchor { + position: relative; + z-index: z("dropdown"); +} + +.chat-message-actions { + .chat-message-reaction { + @include chat-reaction; + + &:not(.show) { + display: none; + } + } +} + +.chat-message-actions-container { + @include unselectable; + position: relative; +} + +.chat-message-actions { + border-radius: 0.25em; + background-color: var(--secondary); + display: flex; + box-shadow: 0 0.75px 0px rgba(0, 0, 0, 0.15); + + .emoji-picker-anchor { + position: absolute; + height: 34px; + } + + .link-to-message-btn { + .d-icon { + transition: all 0.25s ease-in-out; + } + + &.copied { + .d-icon { + transform: scale(1.1); + color: var(--tertiary); + } + } + } + + .react-btn, + .reply-btn, + .bookmark-btn { + margin-right: -1px; + padding: 0.5em 0; + width: 2.5em; + transition: background 0.2s, border-color 0.2s; + + &:focus { + .d-icon { + color: var(--primary); + } + } + + &:first-child { + border-bottom-left-radius: 0.25em; + border-top-left-radius: 0.25em; + } + + &:first-child:not(:hover) { + border-color: var(--primary-low); + border-right-color: transparent; + } + + .d-icon { + color: var(--primary-medium); + + &.bookmark-icon__bookmarked { + color: var(--tertiary); + } + } + } + + .more-buttons.dropdown-select-box { + .select-kit-header { + background: none; + border: 1px solid var(--primary-low); + border-left-color: transparent; + border-radius: 0 0.25em 0.25em 0; + padding: 0.5em 0; + width: 2.5em; + transition: background 0.2s, border-color 0.2s; + + &:focus { + border-color: var(--primary-low); + border-left-color: transparent; + + .select-kit-header-wrapper .d-icon { + color: var(--primary); + } + } + + .select-kit-header-wrapper { + justify-content: center; + + .d-icon { + color: var(--primary-medium); + margin: 0; + } + } + + &:hover { + background: var(--primary-low); + border-color: var(--primary-low-mid); + + .select-kit-header-wrapper { + .d-icon { + color: var(--primary); + } + } + } + } + + .select-kit-body { + padding: 0.5rem; + box-shadow: shadow("card"); + border: 1px solid var(--primary-low); + } + + .select-kit-row { + .texts .name { + font-size: var(--font-0); + font-weight: 500; + } + + .icons .d-icon { + font-size: var(--font-0); + color: var(--primary-medium); + } + } + } + + .chat-message-reaction { + align-items: center; + border-radius: 0; + border-left-color: transparent; + border-right-color: transparent; + box-sizing: border-box; + font-size: var(--font-0); + justify-content: center; + margin: 0; + margin-right: -1px; + padding: 0.5em 0; + width: 2.5em; + + &:focus { + background: var(--primary-low); + outline: none; + } + + &:first-child { + border-bottom-left-radius: 0.25em; + border-left-color: var(--primary-low); + border-top-left-radius: 0.25em; + } + + &.reacted { + border-left-color: var(--tertiary-medium); + z-index: 1; + + &:focus { + background: var(--tertiary-low); + } + } + + .emoji { + height: 15px; + width: auto; + margin: 0; + } + } +} diff --git a/plugins/chat/assets/stylesheets/common/chat-message.scss b/plugins/chat/assets/stylesheets/common/chat-message.scss index 00abf400385..2778ce81908 100644 --- a/plugins/chat/assets/stylesheets/common/chat-message.scss +++ b/plugins/chat/assets/stylesheets/common/chat-message.scss @@ -14,11 +14,6 @@ } } -.chat-message-actions-desktop-anchor { - position: relative; - z-index: z("dropdown"); -} - @mixin chat-reaction { align-items: center; display: inline-flex; @@ -56,16 +51,6 @@ } } -.chat-msgactions { - .chat-message-reaction { - @include chat-reaction; - - &:not(.show) { - display: none; - } - } -} - .chat-message { align-items: flex-start; padding: 0.25em 0.5em 0.25em 0.75em; @@ -261,173 +246,6 @@ background-color: var(--tertiary-low) !important; } -.chat-msgactions-hover { - @include unselectable; - position: relative; -} - -.chat-msgactions { - border-radius: 0.25em; - background-color: var(--secondary); - display: flex; - box-shadow: 0 0.75px 0px rgba(0, 0, 0, 0.15); - - .emoji-picker-anchor { - position: absolute; - height: 34px; - } - - .link-to-message-btn { - .d-icon { - transition: all 0.25s ease-in-out; - } - - &.copied { - .d-icon { - transform: scale(1.1); - color: var(--tertiary); - } - } - } - - .react-btn, - .reply-btn, - .bookmark-btn { - margin-right: -1px; - padding: 0.5em 0; - width: 2.5em; - transition: background 0.2s, border-color 0.2s; - - &:focus { - .d-icon { - color: var(--primary); - } - } - - &:first-child { - border-bottom-left-radius: 0.25em; - border-top-left-radius: 0.25em; - } - - &:first-child:not(:hover) { - border-color: var(--primary-low); - border-right-color: transparent; - } - - .d-icon { - color: var(--primary-medium); - - &.bookmark-icon__bookmarked { - color: var(--tertiary); - } - } - } - - .more-buttons.dropdown-select-box { - .select-kit-header { - background: none; - border: 1px solid var(--primary-low); - border-left-color: transparent; - border-radius: 0 0.25em 0.25em 0; - padding: 0.5em 0; - width: 2.5em; - transition: background 0.2s, border-color 0.2s; - - &:focus { - border-color: var(--primary-low); - border-left-color: transparent; - - .select-kit-header-wrapper .d-icon { - color: var(--primary); - } - } - - .select-kit-header-wrapper { - justify-content: center; - - .d-icon { - color: var(--primary-medium); - margin: 0; - } - } - - &:hover { - background: var(--primary-low); - border-color: var(--primary-low-mid); - - .select-kit-header-wrapper { - .d-icon { - color: var(--primary); - } - } - } - } - - .select-kit-body { - padding: 0.5rem; - box-shadow: shadow("card"); - border: 1px solid var(--primary-low); - } - - .select-kit-row { - .texts .name { - font-size: var(--font-0); - font-weight: 500; - } - - .icons .d-icon { - font-size: var(--font-0); - color: var(--primary-medium); - } - } - } - - .chat-message-reaction { - align-items: center; - border-radius: 0; - border-left-color: transparent; - border-right-color: transparent; - box-sizing: border-box; - font-size: var(--font-0); - justify-content: center; - margin: 0; - margin-right: -1px; - padding: 0.5em 0; - width: 2.5em; - filter: grayscale(100%); - - &:hover { - filter: grayscale(0); - } - - &:focus { - background: var(--primary-low); - outline: none; - } - - &:first-child { - border-bottom-left-radius: 0.25em; - border-left-color: var(--primary-low); - border-top-left-radius: 0.25em; - } - - &.reacted { - border-left-color: var(--tertiary-medium); - z-index: 1; - - &:focus { - background: var(--tertiary-low); - } - } - - .emoji { - height: 15px; - width: auto; - margin: 0; - } - } -} - .chat-messages-container { .not-mobile-device & .chat-message:hover, .chat-message.chat-message-selected { diff --git a/plugins/chat/assets/stylesheets/desktop/chat-message-actions.scss b/plugins/chat/assets/stylesheets/desktop/chat-message-actions.scss new file mode 100644 index 00000000000..3d015632e7c --- /dev/null +++ b/plugins/chat/assets/stylesheets/desktop/chat-message-actions.scss @@ -0,0 +1,5 @@ +.chat-message-actions[data-popper-reference-hidden], +.chat-message-actions[data-popper-escaped] { + visibility: hidden; + pointer-events: none; +} diff --git a/plugins/chat/assets/stylesheets/desktop/chat-message.scss b/plugins/chat/assets/stylesheets/desktop/chat-message.scss index 934d736fa95..8ea9c38357c 100644 --- a/plugins/chat/assets/stylesheets/desktop/chat-message.scss +++ b/plugins/chat/assets/stylesheets/desktop/chat-message.scss @@ -1,4 +1,4 @@ -.chat-msgactions { +.chat-message-actions { .react-btn, .reply-btn, .bookmark-btn { diff --git a/plugins/chat/assets/stylesheets/desktop/desktop.scss b/plugins/chat/assets/stylesheets/desktop/desktop.scss index e55781648e9..fa1cb31d43a 100644 --- a/plugins/chat/assets/stylesheets/desktop/desktop.scss +++ b/plugins/chat/assets/stylesheets/desktop/desktop.scss @@ -56,16 +56,6 @@ .chat-message.user-info-hidden { padding: 0.15em 1em; - - .chat-msgactions-hover { - top: -2em; - } -} - -.chat-msgactions[data-popper-reference-hidden], -.chat-msgactions[data-popper-escaped] { - visibility: hidden; - pointer-events: none; } // Full Page Styling in Core diff --git a/plugins/chat/assets/stylesheets/mobile/chat-message-actions.scss b/plugins/chat/assets/stylesheets/mobile/chat-message-actions.scss new file mode 100644 index 00000000000..eac83541f83 --- /dev/null +++ b/plugins/chat/assets/stylesheets/mobile/chat-message-actions.scss @@ -0,0 +1,160 @@ +.chat-message-actions { + position: absolute; + bottom: -100vh; + left: 0; + right: 0; + display: flex; + flex-direction: column; + border-radius: 8px 8px 0 0; + margin: 0 2px; + transition: bottom 0.2s ease; + + .selected-message-container { + padding: 0.5em 0.5em 1em 0.5em; + } + + .selected-message { + display: flex; + align-items: center; + padding: 0.5em; + border: 1px solid var(--primary-low); + box-shadow: 0 0 4px rgba(0, 0, 0, 0.125); + border-radius: 8px; + + .selected-message-reply { + &:not(.is-expanded) { + @include ellipsis; + } + + &.is-expanded { + @include user-select(text); + max-height: 80px; + overflow-y: scroll; + } + } + } + + .main-actions { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1em 1em 1.5em 1em; + + .chat-message-reaction { + background: none; + border: 1px solid transparent; + + img.emoji { + width: 30px; + height: 30px; + object-fit: contain; + } + + &.reacted { + border-color: var(--tertiary-medium); + background: var(--tertiary-very-low); + color: var(--tertiary-hover); + + &:hover { + background: var(--tertiary-low); + } + } + } + + .react-btn { + .d-icon { + color: var(--primary-medium); + font-size: var(--font-up-4); + } + } + + .chat-message-reaction, + .react-btn { + margin: 0; + } + + .chat-message-reaction, + .reply-btn, + .react-btn, + .bookmark-btn { + flex-grow: 1; + height: 42px; + } + + .bookmark-btn, + .react-btn { + > .svg-icon-title, + > .svg-icon { + font-size: var(--font-up-4); + } + } + + .reply-btn { + border-radius: 3px; + .d-icon { + font-size: var(--font-up-4); + } + } + } + + .secondary-actions { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + padding: 0.5em; + margin: 0; + + .chat-message-action-item { + border-bottom: 1px solid var(--primary-low); + width: 100%; + list-style: none; + padding-bottom: 0.25em; + margin-bottom: 0.25em; + display: flex; + + &:last-child { + border: 0; + margin: 0; + padding: 0; + } + + .chat-message-action { + justify-content: flex-start; + background: none; + width: 100%; + border: 0; + color: var(--primary); + + &:focus, + .d-icon { + color: var(--primary); + } + } + } + } +} + +.chat-message-actions-backdrop { + position: fixed; + bottom: 0; + left: 0; + right: 0; + height: 100%; + width: 100%; + z-index: z("header") + 1; + transition: background-color 0.2s ease; + + .collapse-area { + width: 100%; + height: 100%; + } + + &.fade-in { + background-color: rgba(0, 0, 0, 0.35); + + .chat-message-actions { + bottom: 0; + } + } +} diff --git a/plugins/chat/assets/stylesheets/mobile/chat-message.scss b/plugins/chat/assets/stylesheets/mobile/chat-message.scss index d9ae4b07cff..c3517ab9858 100644 --- a/plugins/chat/assets/stylesheets/mobile/chat-message.scss +++ b/plugins/chat/assets/stylesheets/mobile/chat-message.scss @@ -1,10 +1,3 @@ -.chat-message-selected { - .chat-msgactions-hover { - bottom: 0; - transition: top 1s linear; - } -} - .chat-message *, .chat-composer-row, .chat-reply, @@ -15,164 +8,3 @@ .chat-message-container { transform: translateZ(0); } - -.chat-msgactions-backdrop { - position: fixed; - bottom: 0; - left: 0; - right: 0; - height: 100%; - width: 100%; - z-index: z("header") + 1; - transition: background-color 0.2s ease; - - .collapse-area { - width: 100%; - height: 100%; - } - - &.fade-in { - background-color: rgba(0, 0, 0, 0.35); - - .chat-msgactions { - bottom: 0; - } - } - - .chat-msgactions { - position: absolute; - bottom: -100vh; - left: 0; - right: 0; - display: flex; - flex-direction: column; - border-radius: 8px 8px 0 0; - margin: 0 2px; - transition: bottom 0.2s ease; - - .selected-message-container { - padding: 0.5em 0.5em 1em 0.5em; - } - - .selected-message { - display: flex; - align-items: center; - padding: 0.5em; - border: 1px solid var(--primary-low); - box-shadow: 0 0 4px rgba(0, 0, 0, 0.125); - border-radius: 8px; - - .selected-message-reply { - &:not(.is-expanded) { - @include ellipsis; - } - - &.is-expanded { - @include user-select(text); - max-height: 80px; - overflow-y: scroll; - } - } - } - - .main-actions { - display: flex; - justify-content: space-between; - align-items: center; - padding: 1em 1em 1.5em 1em; - - .chat-message-reaction { - background: none; - border: 1px solid transparent; - - img.emoji { - width: 30px; - height: 30px; - object-fit: contain; - } - - &.reacted { - border-color: var(--tertiary-medium); - background: var(--tertiary-very-low); - color: var(--tertiary-hover); - - &:hover { - background: var(--tertiary-low); - } - } - } - - .react-btn { - .d-icon { - color: var(--primary-medium); - font-size: var(--font-up-4); - } - } - - .chat-message-reaction, - .react-btn { - margin: 0; - } - - .chat-message-reaction, - .reply-btn, - .react-btn, - .bookmark-btn { - flex-grow: 1; - height: 42px; - } - - .bookmark-btn, - .react-btn { - > .svg-icon-title, - > .svg-icon { - font-size: var(--font-up-4); - } - } - - .reply-btn { - border-radius: 3px; - .d-icon { - font-size: var(--font-up-4); - } - } - } - - .secondary-actions { - display: flex; - flex-direction: column; - justify-content: flex-start; - align-items: flex-start; - padding: 0.5em; - margin: 0; - - .chat-message-action-item { - border-bottom: 1px solid var(--primary-low); - width: 100%; - list-style: none; - padding-bottom: 0.25em; - margin-bottom: 0.25em; - display: flex; - - &:last-child { - border: 0; - margin: 0; - padding: 0; - } - - .chat-message-action { - justify-content: flex-start; - background: none; - width: 100%; - border: 0; - color: var(--primary); - - &:focus, - .d-icon { - color: var(--primary); - } - } - } - } - } -} diff --git a/plugins/chat/plugin.rb b/plugins/chat/plugin.rb index e789776d186..ab32fcd0c18 100644 --- a/plugins/chat/plugin.rb +++ b/plugins/chat/plugin.rb @@ -56,6 +56,9 @@ register_asset "stylesheets/mobile/mobile.scss", :mobile register_asset "stylesheets/desktop/desktop.scss", :desktop register_asset "stylesheets/sidebar-extensions.scss" register_asset "stylesheets/desktop/sidebar-extensions.scss", :desktop +register_asset "stylesheets/common/chat-message-actions.scss" +register_asset "stylesheets/desktop/chat-message-actions.scss", :desktop +register_asset "stylesheets/mobile/chat-message-actions.scss", :mobile register_asset "stylesheets/common/chat-message-separator.scss" register_asset "stylesheets/common/chat-onebox.scss" register_asset "stylesheets/common/chat-skeleton.scss" diff --git a/plugins/chat/test/javascripts/acceptance/chat-flagging-test.js b/plugins/chat/test/javascripts/acceptance/chat-flagging-test.js index ab091287b6c..63cbd5bf330 100644 --- a/plugins/chat/test/javascripts/acceptance/chat-flagging-test.js +++ b/plugins/chat/test/javascripts/acceptance/chat-flagging-test.js @@ -53,7 +53,9 @@ acceptance("Discourse Chat - Flagging test", function (needs) { assert.notOk(exists(".chat-live-pane .chat-message .chat-message-flagged")); await triggerEvent(".chat-message-container", "mouseenter"); - let moreButtons = selectKit(".chat-msgactions-hover .more-buttons"); + const moreButtons = selectKit( + ".chat-message-actions-container .more-buttons" + ); await moreButtons.expand(); const content = moreButtons.displayedContent(); @@ -85,7 +87,7 @@ acceptance("Discourse Chat - Flagging test", function (needs) { await visit("/chat/channel/9/@hawk"); await triggerEvent(".chat-message-container", "mouseenter"); - let moreButtons = selectKit(".chat-msgactions .more-buttons"); + const moreButtons = selectKit(".chat-message-actions .more-buttons"); await moreButtons.expand(); const content = moreButtons.displayedContent(); diff --git a/plugins/chat/test/javascripts/acceptance/chat-live-pane-silenced-user-test.js b/plugins/chat/test/javascripts/acceptance/chat-live-pane-silenced-user-test.js index 777124eb3fb..1316017f3d1 100644 --- a/plugins/chat/test/javascripts/acceptance/chat-live-pane-silenced-user-test.js +++ b/plugins/chat/test/javascripts/acceptance/chat-live-pane-silenced-user-test.js @@ -75,7 +75,7 @@ acceptance("Discourse Chat - Chat live pane", function (needs) { test("Textarea and message interactions are disabled when user is silenced", async function (assert) { await visit("/chat/channel/1/cat"); assert.equal(query(".chat-composer-input").disabled, true); - assert.notOk(exists(".chat-msgactions-hover")); + assert.notOk(exists(".chat-message-actions-container")); assert.notOk(exists(".chat-message-react-btn")); }); }); diff --git a/plugins/chat/test/javascripts/acceptance/chat-live-pane-test.js b/plugins/chat/test/javascripts/acceptance/chat-live-pane-test.js index 311012f0091..c348161d78b 100644 --- a/plugins/chat/test/javascripts/acceptance/chat-live-pane-test.js +++ b/plugins/chat/test/javascripts/acceptance/chat-live-pane-test.js @@ -305,11 +305,11 @@ acceptance( const message = query(".chat-message-container"); await tap(message); - assert.ok(exists(".chat-msgactions-backdrop")); + assert.ok(exists(".chat-message-actions-backdrop")); await tap(".collapse-area"); - assert.notOk(exists(".chat-msgactions-backdrop")); + assert.notOk(exists(".chat-message-actions-backdrop")); }); } ); diff --git a/plugins/chat/test/javascripts/acceptance/chat-message-bookmarking-test.js b/plugins/chat/test/javascripts/acceptance/chat-message-bookmarking-test.js index 2f7b22d5fe8..eb4a2510910 100644 --- a/plugins/chat/test/javascripts/acceptance/chat-message-bookmarking-test.js +++ b/plugins/chat/test/javascripts/acceptance/chat-message-bookmarking-test.js @@ -46,7 +46,7 @@ acceptance("Discourse Chat | bookmarking | desktop", function (needs) { const message = query(".chat-message-container"); await triggerEvent(message, "mouseenter"); - await click(".chat-msgactions .bookmark-btn"); + await click(".chat-message-actions .bookmark-btn"); assert.ok( exists("#bookmark-reminder-modal"), "it shows the bookmark modal" @@ -60,7 +60,7 @@ acceptance("Discourse Chat | bookmarking | desktop", function (needs) { "the message should be bookmarked and show the icon on the message info" ); assert.ok( - ".chat-msgactions .bookmark-btn .d-icon-discourse-bookmark-clock", + ".chat-message-actions .bookmark-btn .d-icon-discourse-bookmark-clock", "the message actions icon shows the reminder icon" ); }); @@ -71,7 +71,7 @@ acceptance("Discourse Chat | bookmarking | desktop", function (needs) { const message = query(".chat-message-container"); await triggerEvent(message, "mouseenter"); - await click(".chat-msgactions .bookmark-btn"); + await click(".chat-message-actions .bookmark-btn"); assert.ok( exists("#bookmark-reminder-modal"), "it shows the bookmark modal" @@ -83,7 +83,7 @@ acceptance("Discourse Chat | bookmarking | desktop", function (needs) { "the message should be bookmarked and show the icon on the message info" ); assert.ok( - exists(".chat-msgactions .bookmark-btn .d-icon-bookmark"), + exists(".chat-message-actions .bookmark-btn .d-icon-bookmark"), "the message actions icon shows the bookmark icon" ); }); diff --git a/plugins/chat/test/javascripts/acceptance/chat-message-test.js b/plugins/chat/test/javascripts/acceptance/chat-message-test.js index 5ddc50ecdde..776fd607f93 100644 --- a/plugins/chat/test/javascripts/acceptance/chat-message-test.js +++ b/plugins/chat/test/javascripts/acceptance/chat-message-test.js @@ -77,7 +77,7 @@ acceptance("Discourse Chat - Chat Message", function (needs) { await visit("/chat/channel/4/public-category"); await triggerEvent(".chat-message-container[data-id='176']", "mouseenter"); - await click(".chat-msgactions-hover .react-btn"); + await click(".chat-message-actions-container .react-btn"); await click(`[data-emoji="grinning"]`); assert.deepEqual( diff --git a/plugins/chat/test/javascripts/acceptance/chat-move-message-to-channel-test.js b/plugins/chat/test/javascripts/acceptance/chat-move-message-to-channel-test.js index 1a745e65fa8..1d0db0ad4fa 100644 --- a/plugins/chat/test/javascripts/acceptance/chat-move-message-to-channel-test.js +++ b/plugins/chat/test/javascripts/acceptance/chat-move-message-to-channel-test.js @@ -57,7 +57,7 @@ acceptance( assert.ok(exists(".chat-message-container")); const firstMessage = query(".chat-message-container"); await triggerEvent(firstMessage, "mouseenter"); - const dropdown = selectKit(".chat-msgactions .more-buttons"); + const dropdown = selectKit(".chat-message-actions .more-buttons"); await dropdown.expand(); await dropdown.selectRowByValue("selectMessage"); @@ -109,7 +109,7 @@ acceptance( assert.ok(exists(".chat-message-container")); const firstMessage = query(".chat-message-container"); await triggerEvent(firstMessage, "mouseenter"); - const dropdown = selectKit(".chat-msgactions .more-buttons"); + const dropdown = selectKit(".chat-message-actions .more-buttons"); await dropdown.expand(); await dropdown.selectRowByValue("selectMessage"); assert.ok(firstMessage.classList.contains("selecting-messages")); @@ -151,7 +151,7 @@ acceptance( assert.ok(exists(".chat-message-container")); const firstMessage = query(".chat-message-container"); await triggerEvent(firstMessage, "mouseenter"); - const dropdown = selectKit(".chat-msgactions .more-buttons"); + const dropdown = selectKit(".chat-message-actions .more-buttons"); await dropdown.expand(); await dropdown.selectRowByValue("selectMessage"); @@ -168,7 +168,7 @@ acceptance( const firstMessage = query(".chat-message-container"); await triggerEvent(firstMessage, "mouseenter"); const dropdown = selectKit( - `.chat-msgactions-hover[data-id="${firstMessage.dataset.id}"] .more-buttons` + `.chat-message-actions-container[data-id="${firstMessage.dataset.id}"] .more-buttons` ); await dropdown.expand(); await dropdown.selectRowByValue("selectMessage"); diff --git a/plugins/chat/test/javascripts/acceptance/chat-quoting-test.js b/plugins/chat/test/javascripts/acceptance/chat-quoting-test.js index e30af93eab1..1a9fe0c3426 100644 --- a/plugins/chat/test/javascripts/acceptance/chat-quoting-test.js +++ b/plugins/chat/test/javascripts/acceptance/chat-quoting-test.js @@ -62,7 +62,7 @@ acceptance("Discourse Chat | Copying messages", function (needs) { const firstMessage = query(".chat-message-container"); await triggerEvent(firstMessage, "mouseenter"); const dropdown = selectKit( - `.chat-msgactions-hover[data-id="${firstMessage.dataset.id}"] .more-buttons` + `.chat-message-actions-container[data-id="${firstMessage.dataset.id}"] .more-buttons` ); await dropdown.expand(); await dropdown.selectRowByValue("selectMessage"); diff --git a/plugins/chat/test/javascripts/acceptance/chat-test.js b/plugins/chat/test/javascripts/acceptance/chat-test.js index 36cb1bb54a8..90235ce2e85 100644 --- a/plugins/chat/test/javascripts/acceptance/chat-test.js +++ b/plugins/chat/test/javascripts/acceptance/chat-test.js @@ -217,7 +217,7 @@ acceptance("Discourse Chat - without unread", function (needs) { await triggerEvent(".chat-message-container[data-id='174']", "mouseenter"); const currentUserDropdown = selectKit( - ".chat-msgactions-hover[data-id='174'] .more-buttons" + ".chat-message-actions-container[data-id='174'] .more-buttons" ); await currentUserDropdown.expand(); @@ -243,7 +243,7 @@ acceptance("Discourse Chat - without unread", function (needs) { ); const notCurrentUserDropdown = selectKit( - ".chat-msgactions-hover[data-id='175'] .more-buttons" + ".chat-message-actions-container[data-id='175'] .more-buttons" ); await triggerEvent(".chat-message-container[data-id='175']", "mouseenter"); await notCurrentUserDropdown.expand(); @@ -259,12 +259,12 @@ acceptance("Discourse Chat - without unread", function (needs) { // User created this message assert.ok( - ".chat-msgactions-hover[data-id='174'] .reply-btn", + ".chat-message-actions-container[data-id='174'] .reply-btn", "it shows the reply button" ); const currentUserDropdown = selectKit( - ".chat-msgactions-hover[data-id='174'] .more-buttons" + ".chat-message-actions-container[data-id='174'] .more-buttons" ); await currentUserDropdown.expand(); @@ -301,11 +301,11 @@ acceptance("Discourse Chat - without unread", function (needs) { // User _didn't_ create this message await triggerEvent(".chat-message-container[data-id='175']", "mouseenter"); assert.ok( - ".chat-msgactions-hover[data-id='175'] .reply-btn", + ".chat-message-actions-container[data-id='175'] .reply-btn", "it shows the reply button" ); const notCurrentUserDropdown = selectKit( - ".chat-msgactions-hover[data-id='175'] .more-buttons" + ".chat-message-actions-container[data-id='175'] .more-buttons" ); await notCurrentUserDropdown.expand(); @@ -376,7 +376,7 @@ acceptance("Discourse Chat - without unread", function (needs) { await click(".topic-chat-drawer-header__return-to-channels-btn"); await click(".chat-channel-row.chat-channel-9"); await triggerEvent(".chat-message-container[data-id='174']", "mouseenter"); - await click(".chat-msgactions-hover[data-id='174'] .reply-btn"); + await click(".chat-message-actions-container[data-id='174'] .reply-btn"); // Reply-to line is present assert.ok(exists(".chat-composer-message-details .chat-reply")); await click(".topic-chat-drawer-header__return-to-channels-btn"); @@ -386,7 +386,7 @@ acceptance("Discourse Chat - without unread", function (needs) { // Now click on reply btn and cancel it on channel 7 await triggerEvent(".chat-message-container[data-id='174']", "mouseenter"); - await click(".chat-msgactions-hover[data-id='174'] .reply-btn"); + await click(".chat-message-actions-container[data-id='174'] .reply-btn"); await click(".cancel-message-action"); // Go back to channel 9 and check that reply-to is present @@ -687,7 +687,7 @@ Widget.triangulate(arg: "test") const firstMessage = query(".chat-message-container"); await triggerEvent(firstMessage, "mouseenter"); const dropdown = selectKit( - `.chat-msgactions-hover[data-id="${firstMessage.dataset.id}"] .more-buttons` + `.chat-message-actions-container[data-id="${firstMessage.dataset.id}"] .more-buttons` ); await dropdown.expand(); await dropdown.selectRowByValue("selectMessage"); @@ -700,7 +700,9 @@ Widget.triangulate(arg: "test") updateCurrentUser({ admin: false, moderator: false }); await visit("/chat/channel/11/another-category"); assert.notOk( - exists(".chat-message-container .chat-msgactions-hover .select-btn") + exists( + ".chat-message-container .chat-message-actions-container .select-btn" + ) ); }); @@ -735,7 +737,7 @@ Widget.triangulate(arg: "test") const message = query(".chat-message-container"); await triggerEvent(message, "mouseenter"); assert.notOk(message.querySelector(".chat-message-reaction-list")); - await click(".chat-msgactions .react-btn"); + await click(".chat-message-actions .react-btn"); await click(`.chat-emoji-picker .emoji[alt="grinning"]`); assert.ok(message.querySelector(".chat-message-reaction-list")); @@ -831,7 +833,7 @@ Widget.triangulate(arg: "test") assert.deepEqual(lastMessage.dataset.id, "202"); await triggerEvent(lastMessage, "mouseenter"); await click( - `.chat-msgactions-hover[data-id="${lastMessage.dataset.id}"] .react-btn` + `.chat-message-actions-container[data-id="${lastMessage.dataset.id}"] .react-btn` ); await click(`.emoji[alt="grinning"]`); @@ -937,7 +939,7 @@ Widget.triangulate(arg: "test") test("changing channel resets message selection", async function (assert) { await visit("/chat/channel/11/another-category"); await triggerEvent(".chat-message-container", "mouseenter"); - const dropdown = selectKit(".chat-msgactions .more-buttons"); + const dropdown = selectKit(".chat-message-actions .more-buttons"); await dropdown.expand(); await dropdown.selectRowByValue("selectMessage"); await click("#chat-copy-btn"); @@ -1631,7 +1633,7 @@ acceptance( test("read only channels do not show the reply, react, delete, edit, restore, or rebuild options for messages", async function (assert) { await visit("/chat/channel/5/public-category"); await triggerEvent(".chat-message-container", "mouseenter"); - const dropdown = selectKit(".chat-msgactions .more-buttons"); + const dropdown = selectKit(".chat-message-actions .more-buttons"); await dropdown.expand(); assert.notOk(exists(".select-kit-row[data-value='edit']")); assert.notOk(exists(".select-kit-row[data-value='deleteMessage']")); @@ -1684,7 +1686,7 @@ acceptance( await visit("/chat/channel/4/public-category"); await triggerEvent(".chat-message-container", "mouseenter"); - const dropdown = selectKit(".chat-msgactions .more-buttons"); + const dropdown = selectKit(".chat-message-actions .more-buttons"); await dropdown.expand(); assert.notOk(exists(".select-kit-row[data-value='edit']")); @@ -1729,7 +1731,7 @@ acceptance( test("closed channels show the reply, react, delete, edit, restore, or rebuild options for messages", async function (assert) { await visit("/chat/channel/4/public-category"); await triggerEvent(".chat-message-container", "mouseenter"); - const dropdown = selectKit(".chat-msgactions .more-buttons"); + const dropdown = selectKit(".chat-message-actions .more-buttons"); await dropdown.expand(); assert.ok( exists(".select-kit-row[data-value='edit']"),