mirror of
https://github.com/discourse/discourse.git
synced 2025-05-24 01:21:23 +08:00
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
This commit is contained in:
Joffrey JAFFEUX
@ -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",
|
||||
|
||||
@ -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");
|
||||
},
|
||||
});
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<div class="chat-msgactions-hover" data-id={{this.message.id}}>
|
||||
<div class="chat-msgactions">
|
||||
<div class="chat-message-actions-container" data-id={{this.message.id}}>
|
||||
<div class="chat-message-actions">
|
||||
{{#if this.chatPreferredMode.isFullPage}}
|
||||
{{#each this.emojiReactions as |reaction|}}
|
||||
<ChatMessageReaction @reaction={{reaction}} @react={{this.messageActions.react}} @class="show" />
|
||||
@ -7,7 +7,7 @@
|
||||
{{/if}}
|
||||
|
||||
{{#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 this.messageCapabilities.canBookmark}}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div class="chat-msgactions-backdrop">
|
||||
<div class="chat-message-actions-backdrop">
|
||||
<div
|
||||
role="button"
|
||||
class="collapse-area"
|
||||
@ -6,7 +6,7 @@
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="chat-msgactions">
|
||||
<div class="chat-message-actions">
|
||||
<div class="selected-message-container">
|
||||
<div class="selected-message">
|
||||
<ChatUserAvatar @user={{this.message.user}} />
|
||||
@ -57,7 +57,7 @@
|
||||
@class="btn-flat react-btn"
|
||||
@action={{action
|
||||
"actAndCloseMenu"
|
||||
this.messageActions.startReactionForMsgActions
|
||||
this.messageActions.startReactionForMessageActions
|
||||
}}
|
||||
@icon="discourse-emojis"
|
||||
@title="chat.react"
|
||||
|
||||
176
plugins/chat/assets/stylesheets/common/chat-message-actions.scss
Normal file
176
plugins/chat/assets/stylesheets/common/chat-message-actions.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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 {
|
||||
|
||||
@ -0,0 +1,5 @@
|
||||
.chat-message-actions[data-popper-reference-hidden],
|
||||
.chat-message-actions[data-popper-escaped] {
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
.chat-msgactions {
|
||||
.chat-message-actions {
|
||||
.react-btn,
|
||||
.reply-btn,
|
||||
.bookmark-btn {
|
||||
|
||||
@ -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
|
||||
|
||||
160
plugins/chat/assets/stylesheets/mobile/chat-message-actions.scss
Normal file
160
plugins/chat/assets/stylesheets/mobile/chat-message-actions.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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"));
|
||||
});
|
||||
});
|
||||
|
||||
@ -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"));
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
@ -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"
|
||||
);
|
||||
});
|
||||
|
||||
@ -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(
|
||||
|
||||
@ -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");
|
||||
|
||||
@ -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");
|
||||
|
||||
@ -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']"),
|
||||
|
||||
Reference in New Issue
Block a user