github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-05-24 03:36:18 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

REFACTOR: chat-msgactions (#18969)

Browse Source 
- 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
This commit is contained in:
Joffrey JAFFEUX
2022-11-10 15:08:14 +01:00
committed by GitHub
parent 8abd150c98
commit 07e1b0591f
22 changed files with 392 additions and 404 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
plugins/chat/assets/javascripts/discourse/components/chat-message-actions-desktop.js
View File

@ -25,7 +25,7 @@ export default Component.extend({
`.chat-message-container[data-id="${this.message.id}"]` `.chat-message-container[data-id="${this.message.id}"]`
), ),
document.querySelector( 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", placement: "right-start",

4
plugins/chat/assets/javascripts/discourse/components/chat-message-actions-mobile.js
View File

@ -54,13 +54,13 @@ export default Component.extend({
_addFadeIn() { _addFadeIn() {
document document
.querySelector(".chat-msgactions-backdrop") .querySelector(".chat-message-actions-backdrop")
?.classList.add("fade-in"); ?.classList.add("fade-in");
}, },
_removeFadeIn() { _removeFadeIn() {
document document
.querySelector(".chat-msgactions-backdrop") .querySelector(".chat-message-actions-backdrop")
?.classList?.remove("fade-in"); ?.classList?.remove("fade-in");
}, },
}); });

4
plugins/chat/assets/javascripts/discourse/components/chat-message.js
View File

@ -261,7 +261,7 @@ export default Component.extend({
restore: this.restore, restore: this.restore,
rebakeMessage: this.rebakeMessage, rebakeMessage: this.rebakeMessage,
toggleBookmark: this.toggleBookmark, toggleBookmark: this.toggleBookmark,
startReactionForMsgActions: this.startReactionForMsgActions, startReactionForMessageActions: this.startReactionForMessageActions,
}; };
}, },
@ -502,7 +502,7 @@ export default Component.extend({
}, },
@action @action
startReactionForMsgActions() { startReactionForMessageActions() {
this.chatEmojiPickerManager.startFromMessageActions( this.chatEmojiPickerManager.startFromMessageActions(
this.message, this.message,
this.site.desktopView, this.site.desktopView,

2
plugins/chat/assets/javascripts/discourse/services/chat-emoji-picker-manager.js
View File

@ -77,7 +77,7 @@ export default class ChatEmojiPickerManager extends Service {
startFromMessageActions(message, isDesktop, callback) { startFromMessageActions(message, isDesktop, callback) {
const trigger = document.querySelector( 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); this.startFromMessage(callback, isDesktop, trigger);
} }

6
plugins/chat/assets/javascripts/discourse/templates/components/chat-message-actions-desktop.hbs
View File

@ -1,5 +1,5 @@
<div class="chat-msgactions-hover" data-id={{this.message.id}}> <div class="chat-message-actions-container" data-id={{this.message.id}}>
<div class="chat-msgactions"> <div class="chat-message-actions">
{{#if this.chatPreferredMode.isFullPage}} {{#if this.chatPreferredMode.isFullPage}}
{{#each this.emojiReactions as |reaction|}} {{#each this.emojiReactions as |reaction|}}
<ChatMessageReaction @reaction={{reaction}} @react={{this.messageActions.react}} @class="show" /> <ChatMessageReaction @reaction={{reaction}} @react={{this.messageActions.react}} @class="show" />
@ -7,7 +7,7 @@
{{/if}} {{/if}}
{{#if this.messageCapabilities.canReact}} {{#if this.messageCapabilities.canReact}}
<DButton @class="btn-flat react-btn" @action={{this.messageActions.startReactionForMsgActions}} @icon="discourse-emojis" @title="chat.react" /> <DButton @class="btn-flat react-btn" @action={{this.messageActions.startReactionForMessageActions}} @icon="discourse-emojis" @title="chat.react" />
{{/if}} {{/if}}
{{#if this.messageCapabilities.canBookmark}} {{#if this.messageCapabilities.canBookmark}}

6
plugins/chat/assets/javascripts/discourse/templates/components/chat-message-actions-mobile.hbs
View File

@ -1,4 +1,4 @@
<div class="chat-msgactions-backdrop"> <div class="chat-message-actions-backdrop">
<div <div
role="button" role="button"
class="collapse-area" class="collapse-area"
@ -6,7 +6,7 @@
> >
</div> </div>
<div class="chat-msgactions"> <div class="chat-message-actions">
<div class="selected-message-container"> <div class="selected-message-container">
<div class="selected-message"> <div class="selected-message">
<ChatUserAvatar @user={{this.message.user}} /> <ChatUserAvatar @user={{this.message.user}} />
@ -57,7 +57,7 @@
@class="btn-flat react-btn" @class="btn-flat react-btn"
@action={{action @action={{action
"actAndCloseMenu" "actAndCloseMenu"
this.messageActions.startReactionForMsgActions this.messageActions.startReactionForMessageActions
}} }}
@icon="discourse-emojis" @icon="discourse-emojis"
@title="chat.react" @title="chat.react"

176
plugins/chat/assets/stylesheets/common/chat-message-actions.scss Normal file
View File

@ -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;
}
}
}

182
plugins/chat/assets/stylesheets/common/chat-message.scss
View File

@ -14,11 +14,6 @@
} }
} }
.chat-message-actions-desktop-anchor {
position: relative;
z-index: z("dropdown");
}
@mixin chat-reaction { @mixin chat-reaction {
align-items: center; align-items: center;
display: inline-flex; display: inline-flex;
@ -56,16 +51,6 @@
} }
} }
.chat-msgactions {
.chat-message-reaction {
@include chat-reaction;
&:not(.show) {
display: none;
}
}
}
.chat-message { .chat-message {
align-items: flex-start; align-items: flex-start;
padding: 0.25em 0.5em 0.25em 0.75em; padding: 0.25em 0.5em 0.25em 0.75em;
@ -261,173 +246,6 @@
background-color: var(--tertiary-low) !important; 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 { .chat-messages-container {
.not-mobile-device & .chat-message:hover, .not-mobile-device & .chat-message:hover,
.chat-message.chat-message-selected { .chat-message.chat-message-selected {

5
plugins/chat/assets/stylesheets/desktop/chat-message-actions.scss Normal file
View File

@ -0,0 +1,5 @@
.chat-message-actions[data-popper-reference-hidden],
.chat-message-actions[data-popper-escaped] {
visibility: hidden;
pointer-events: none;
}

2
plugins/chat/assets/stylesheets/desktop/chat-message.scss
View File

@ -1,4 +1,4 @@
.chat-msgactions { .chat-message-actions {
.react-btn, .react-btn,
.reply-btn, .reply-btn,
.bookmark-btn { .bookmark-btn {

10
plugins/chat/assets/stylesheets/desktop/desktop.scss
View File

@ -56,16 +56,6 @@
.chat-message.user-info-hidden { .chat-message.user-info-hidden {
padding: 0.15em 1em; 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 // Full Page Styling in Core

160
plugins/chat/assets/stylesheets/mobile/chat-message-actions.scss Normal file
View File

@ -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;
}
}
}

168
plugins/chat/assets/stylesheets/mobile/chat-message.scss
View File

@ -1,10 +1,3 @@
.chat-message-selected {
.chat-msgactions-hover {
bottom: 0;
transition: top 1s linear;
}
}
.chat-message *, .chat-message *,
.chat-composer-row, .chat-composer-row,
.chat-reply, .chat-reply,
@ -15,164 +8,3 @@
.chat-message-container { .chat-message-container {
transform: translateZ(0); 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);
}
}
}
}
}
}

3
plugins/chat/plugin.rb
View File

@ -56,6 +56,9 @@ register_asset "stylesheets/mobile/mobile.scss", :mobile
register_asset "stylesheets/desktop/desktop.scss", :desktop register_asset "stylesheets/desktop/desktop.scss", :desktop
register_asset "stylesheets/sidebar-extensions.scss" register_asset "stylesheets/sidebar-extensions.scss"
register_asset "stylesheets/desktop/sidebar-extensions.scss", :desktop 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-message-separator.scss"
register_asset "stylesheets/common/chat-onebox.scss" register_asset "stylesheets/common/chat-onebox.scss"
register_asset "stylesheets/common/chat-skeleton.scss" register_asset "stylesheets/common/chat-skeleton.scss"

6
plugins/chat/test/javascripts/acceptance/chat-flagging-test.js
View File

@ -53,7 +53,9 @@ acceptance("Discourse Chat - Flagging test", function (needs) {
assert.notOk(exists(".chat-live-pane .chat-message .chat-message-flagged")); assert.notOk(exists(".chat-live-pane .chat-message .chat-message-flagged"));
await triggerEvent(".chat-message-container", "mouseenter"); 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(); await moreButtons.expand();
const content = moreButtons.displayedContent(); const content = moreButtons.displayedContent();
@ -85,7 +87,7 @@ acceptance("Discourse Chat - Flagging test", function (needs) {
await visit("/chat/channel/9/@hawk"); await visit("/chat/channel/9/@hawk");
await triggerEvent(".chat-message-container", "mouseenter"); await triggerEvent(".chat-message-container", "mouseenter");
let moreButtons = selectKit(".chat-msgactions .more-buttons"); const moreButtons = selectKit(".chat-message-actions .more-buttons");
await moreButtons.expand(); await moreButtons.expand();
const content = moreButtons.displayedContent(); const content = moreButtons.displayedContent();

2
plugins/chat/test/javascripts/acceptance/chat-live-pane-silenced-user-test.js
View File

@ -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) { test("Textarea and message interactions are disabled when user is silenced", async function (assert) {
await visit("/chat/channel/1/cat"); await visit("/chat/channel/1/cat");
assert.equal(query(".chat-composer-input").disabled, true); 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")); assert.notOk(exists(".chat-message-react-btn"));
}); });
}); });

4
plugins/chat/test/javascripts/acceptance/chat-live-pane-test.js
View File

@ -305,11 +305,11 @@ acceptance(
const message = query(".chat-message-container"); const message = query(".chat-message-container");
await tap(message); await tap(message);
assert.ok(exists(".chat-msgactions-backdrop")); assert.ok(exists(".chat-message-actions-backdrop"));
await tap(".collapse-area"); await tap(".collapse-area");
assert.notOk(exists(".chat-msgactions-backdrop")); assert.notOk(exists(".chat-message-actions-backdrop"));
}); });
} }
); );

8
plugins/chat/test/javascripts/acceptance/chat-message-bookmarking-test.js
View File

@ -46,7 +46,7 @@ acceptance("Discourse Chat | bookmarking | desktop", function (needs) {
const message = query(".chat-message-container"); const message = query(".chat-message-container");
await triggerEvent(message, "mouseenter"); await triggerEvent(message, "mouseenter");
await click(".chat-msgactions .bookmark-btn"); await click(".chat-message-actions .bookmark-btn");
assert.ok( assert.ok(
exists("#bookmark-reminder-modal"), exists("#bookmark-reminder-modal"),
"it shows the bookmark 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" "the message should be bookmarked and show the icon on the message info"
); );
assert.ok( 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" "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"); const message = query(".chat-message-container");
await triggerEvent(message, "mouseenter"); await triggerEvent(message, "mouseenter");
await click(".chat-msgactions .bookmark-btn"); await click(".chat-message-actions .bookmark-btn");
assert.ok( assert.ok(
exists("#bookmark-reminder-modal"), exists("#bookmark-reminder-modal"),
"it shows the bookmark 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" "the message should be bookmarked and show the icon on the message info"
); );
assert.ok( 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" "the message actions icon shows the bookmark icon"
); );
}); });

2
plugins/chat/test/javascripts/acceptance/chat-message-test.js
View File

@ -77,7 +77,7 @@ acceptance("Discourse Chat - Chat Message", function (needs) {
await visit("/chat/channel/4/public-category"); await visit("/chat/channel/4/public-category");
await triggerEvent(".chat-message-container[data-id='176']", "mouseenter"); 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"]`); await click(`[data-emoji="grinning"]`);
assert.deepEqual( assert.deepEqual(

8
plugins/chat/test/javascripts/acceptance/chat-move-message-to-channel-test.js
View File

@ -57,7 +57,7 @@ acceptance(
assert.ok(exists(".chat-message-container")); assert.ok(exists(".chat-message-container"));
const firstMessage = query(".chat-message-container"); const firstMessage = query(".chat-message-container");
await triggerEvent(firstMessage, "mouseenter"); await triggerEvent(firstMessage, "mouseenter");
const dropdown = selectKit(".chat-msgactions .more-buttons"); const dropdown = selectKit(".chat-message-actions .more-buttons");
await dropdown.expand(); await dropdown.expand();
await dropdown.selectRowByValue("selectMessage"); await dropdown.selectRowByValue("selectMessage");
@ -109,7 +109,7 @@ acceptance(
assert.ok(exists(".chat-message-container")); assert.ok(exists(".chat-message-container"));
const firstMessage = query(".chat-message-container"); const firstMessage = query(".chat-message-container");
await triggerEvent(firstMessage, "mouseenter"); await triggerEvent(firstMessage, "mouseenter");
const dropdown = selectKit(".chat-msgactions .more-buttons"); const dropdown = selectKit(".chat-message-actions .more-buttons");
await dropdown.expand(); await dropdown.expand();
await dropdown.selectRowByValue("selectMessage"); await dropdown.selectRowByValue("selectMessage");
assert.ok(firstMessage.classList.contains("selecting-messages")); assert.ok(firstMessage.classList.contains("selecting-messages"));
@ -151,7 +151,7 @@ acceptance(
assert.ok(exists(".chat-message-container")); assert.ok(exists(".chat-message-container"));
const firstMessage = query(".chat-message-container"); const firstMessage = query(".chat-message-container");
await triggerEvent(firstMessage, "mouseenter"); await triggerEvent(firstMessage, "mouseenter");
const dropdown = selectKit(".chat-msgactions .more-buttons"); const dropdown = selectKit(".chat-message-actions .more-buttons");
await dropdown.expand(); await dropdown.expand();
await dropdown.selectRowByValue("selectMessage"); await dropdown.selectRowByValue("selectMessage");
@ -168,7 +168,7 @@ acceptance(
const firstMessage = query(".chat-message-container"); const firstMessage = query(".chat-message-container");
await triggerEvent(firstMessage, "mouseenter"); await triggerEvent(firstMessage, "mouseenter");
const dropdown = selectKit( 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.expand();
await dropdown.selectRowByValue("selectMessage"); await dropdown.selectRowByValue("selectMessage");

2
plugins/chat/test/javascripts/acceptance/chat-quoting-test.js
View File

@ -62,7 +62,7 @@ acceptance("Discourse Chat | Copying messages", function (needs) {
const firstMessage = query(".chat-message-container"); const firstMessage = query(".chat-message-container");
await triggerEvent(firstMessage, "mouseenter"); await triggerEvent(firstMessage, "mouseenter");
const dropdown = selectKit( 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.expand();
await dropdown.selectRowByValue("selectMessage"); await dropdown.selectRowByValue("selectMessage");

34
plugins/chat/test/javascripts/acceptance/chat-test.js
View File

@ -217,7 +217,7 @@ acceptance("Discourse Chat - without unread", function (needs) {
await triggerEvent(".chat-message-container[data-id='174']", "mouseenter"); await triggerEvent(".chat-message-container[data-id='174']", "mouseenter");
const currentUserDropdown = selectKit( const currentUserDropdown = selectKit(
".chat-msgactions-hover[data-id='174'] .more-buttons" ".chat-message-actions-container[data-id='174'] .more-buttons"
); );
await currentUserDropdown.expand(); await currentUserDropdown.expand();
@ -243,7 +243,7 @@ acceptance("Discourse Chat - without unread", function (needs) {
); );
const notCurrentUserDropdown = selectKit( 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 triggerEvent(".chat-message-container[data-id='175']", "mouseenter");
await notCurrentUserDropdown.expand(); await notCurrentUserDropdown.expand();
@ -259,12 +259,12 @@ acceptance("Discourse Chat - without unread", function (needs) {
// User created this message // User created this message
assert.ok( assert.ok(
".chat-msgactions-hover[data-id='174'] .reply-btn", ".chat-message-actions-container[data-id='174'] .reply-btn",
"it shows the reply button" "it shows the reply button"
); );
const currentUserDropdown = selectKit( const currentUserDropdown = selectKit(
".chat-msgactions-hover[data-id='174'] .more-buttons" ".chat-message-actions-container[data-id='174'] .more-buttons"
); );
await currentUserDropdown.expand(); await currentUserDropdown.expand();
@ -301,11 +301,11 @@ acceptance("Discourse Chat - without unread", function (needs) {
// User _didn't_ create this message // User _didn't_ create this message
await triggerEvent(".chat-message-container[data-id='175']", "mouseenter"); await triggerEvent(".chat-message-container[data-id='175']", "mouseenter");
assert.ok( assert.ok(
".chat-msgactions-hover[data-id='175'] .reply-btn", ".chat-message-actions-container[data-id='175'] .reply-btn",
"it shows the reply button" "it shows the reply button"
); );
const notCurrentUserDropdown = selectKit( const notCurrentUserDropdown = selectKit(
".chat-msgactions-hover[data-id='175'] .more-buttons" ".chat-message-actions-container[data-id='175'] .more-buttons"
); );
await notCurrentUserDropdown.expand(); 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(".topic-chat-drawer-header__return-to-channels-btn");
await click(".chat-channel-row.chat-channel-9"); await click(".chat-channel-row.chat-channel-9");
await triggerEvent(".chat-message-container[data-id='174']", "mouseenter"); 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 // Reply-to line is present
assert.ok(exists(".chat-composer-message-details .chat-reply")); assert.ok(exists(".chat-composer-message-details .chat-reply"));
await click(".topic-chat-drawer-header__return-to-channels-btn"); 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 // Now click on reply btn and cancel it on channel 7
await triggerEvent(".chat-message-container[data-id='174']", "mouseenter"); 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"); await click(".cancel-message-action");
// Go back to channel 9 and check that reply-to is present // 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"); const firstMessage = query(".chat-message-container");
await triggerEvent(firstMessage, "mouseenter"); await triggerEvent(firstMessage, "mouseenter");
const dropdown = selectKit( 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.expand();
await dropdown.selectRowByValue("selectMessage"); await dropdown.selectRowByValue("selectMessage");
@ -700,7 +700,9 @@ Widget.triangulate(arg: "test")
updateCurrentUser({ admin: false, moderator: false }); updateCurrentUser({ admin: false, moderator: false });
await visit("/chat/channel/11/another-category"); await visit("/chat/channel/11/another-category");
assert.notOk( 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"); const message = query(".chat-message-container");
await triggerEvent(message, "mouseenter"); await triggerEvent(message, "mouseenter");
assert.notOk(message.querySelector(".chat-message-reaction-list")); 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"]`); await click(`.chat-emoji-picker .emoji[alt="grinning"]`);
assert.ok(message.querySelector(".chat-message-reaction-list")); assert.ok(message.querySelector(".chat-message-reaction-list"));
@ -831,7 +833,7 @@ Widget.triangulate(arg: "test")
assert.deepEqual(lastMessage.dataset.id, "202"); assert.deepEqual(lastMessage.dataset.id, "202");
await triggerEvent(lastMessage, "mouseenter"); await triggerEvent(lastMessage, "mouseenter");
await click( 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"]`); await click(`.emoji[alt="grinning"]`);
@ -937,7 +939,7 @@ Widget.triangulate(arg: "test")
test("changing channel resets message selection", async function (assert) { test("changing channel resets message selection", async function (assert) {
await visit("/chat/channel/11/another-category"); await visit("/chat/channel/11/another-category");
await triggerEvent(".chat-message-container", "mouseenter"); 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.expand();
await dropdown.selectRowByValue("selectMessage"); await dropdown.selectRowByValue("selectMessage");
await click("#chat-copy-btn"); 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) { 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 visit("/chat/channel/5/public-category");
await triggerEvent(".chat-message-container", "mouseenter"); 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.expand();
assert.notOk(exists(".select-kit-row[data-value='edit']")); assert.notOk(exists(".select-kit-row[data-value='edit']"));
assert.notOk(exists(".select-kit-row[data-value='deleteMessage']")); assert.notOk(exists(".select-kit-row[data-value='deleteMessage']"));
@ -1684,7 +1686,7 @@ acceptance(
await visit("/chat/channel/4/public-category"); await visit("/chat/channel/4/public-category");
await triggerEvent(".chat-message-container", "mouseenter"); 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.expand();
assert.notOk(exists(".select-kit-row[data-value='edit']")); 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) { 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 visit("/chat/channel/4/public-category");
await triggerEvent(".chat-message-container", "mouseenter"); 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.expand();
assert.ok( assert.ok(
exists(".select-kit-row[data-value='edit']"), exists(".select-kit-row[data-value='edit']"),