Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: chat composer buttons refactor + emoji (#21852) 

- Made the emoji btn blue when composer is focused
- Moved everything chat-composer-button to its own file and BEM-ified it and making the choice to only work with our own is-disabled definition instead of with the attribute :disabled, for consistency
This commit is contained in:
chapoi 2023-05-31 22:12:35 +09:00 committed by GitHub
parent f189c20578
commit 1f37fe5fa5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 80 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
plugins/chat/assets/javascripts/discourse/components/chat-composer.hbs
View File

@ -73,7 +73,7 @@
{{#each this.inlineButtons as |button|}}
<Chat::Composer::Button
@icon={{button.icon}}
class={{button.id}}
class="-{{button.id}}"
disabled={{or this.disabled button.disabled}}
tabindex={{if button.disabled -1 0}}
{{on
@ -91,7 +91,7 @@
<Chat::Composer::Button
@icon="paper-plane"
class="chat-composer__send-btn primary"
class="-send"
title={{i18n "chat.composer.send"}}
disabled={{or this.disabled (not this.sendEnabled)}}
tabindex={{if this.sendEnabled 0 -1}}

4
plugins/chat/assets/javascripts/discourse/components/chat/composer/button.hbs
View File

@ -1,5 +1,5 @@
<div class="chat-composer-button">
<button type="button" class="chat-composer-button__btn" ...attributes>
<div class="chat-composer-button__wrapper">
<button type="button" class="chat-composer-button" ...attributes>
{{d-icon @icon}}
</button>
</div>

78
plugins/chat/assets/stylesheets/common/chat-composer-button.scss
View File

@ -1,14 +1,76 @@
.chat-composer-button {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
border: 0;
height: 50px;
background: none;
&__btn {
.is-disabled & {
cursor: not-allowed;
}
&__wrapper {
box-sizing: border-box;
width: 50px;
border: 0;
height: 50px;
background: none;
display: flex;
align-items: center;
justify-content: center;
}
.d-icon {
color: var(--primary-low-mid);
&:hover {
color: var(--primary-low-mid);
}
.is-send-disabled.is-focused & {
color: var(--primary-high);
}
.is-disabled & {
cursor: not-allowed;
}
}
&.-send {
will-change: scale;
@keyframes sendingScales {
0% {
transform: scale(0.9);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(0.9);
}
}
.is-send-disabled & {
cursor: default;
}
.chat-composer.is-sending & {
animation: sendingScales 1s infinite linear;
}
.d-icon {
.is-send-enabled.is-focused & {
color: var(--tertiary);
}
}
&:hover {
.d-icon.is-send-enabled & {
transform: scale(1.2);
}
}
}
&.-emoji {
.d-icon.is-focused & {
color: var(--tertiary);
}
}
}

67
plugins/chat/assets/stylesheets/common/chat-composer.scss
View File

@ -63,73 +63,6 @@
}
}
.chat-composer-button__btn {
background: none;
&:not(:disabled) {
.d-icon {
color: var(--primary-high);
}
.no-touch & {
&:hover,
&:focus {
.d-icon {
color: var(--primary);
}
&.primary {
.d-icon {
color: var(--tertiary);
}
}
}
}
&.primary {
.d-icon {
color: var(--tertiary);
}
}
}
&:disabled {
cursor: default;
.d-icon {
color: var(--primary-low-mid);
}
}
}
&__send-btn {
will-change: scale;
@keyframes sendingScales {
0% {
transform: scale(0.9);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(0.9);
}
}
.chat-composer.is-sending & {
animation: sendingScales 1s infinite linear;
}
&:not(:disabled) {
&:hover {
.d-icon {
transform: scale(1.2);
}
}
}
}
&__input-container {
display: flex;
align-items: center;

2
plugins/chat/spec/system/page_objects/chat/chat_channel.rb
View File

@ -30,7 +30,7 @@ module PageObjects
end
def click_send_message
find(".chat-composer.is-send-enabled .chat-composer__send-btn").click
find(".chat-composer.is-send-enabled .chat-composer-button.-send").click
end
def message_by_id_selector(id)

2
plugins/chat/spec/system/page_objects/chat/chat_thread.rb
View File

@ -68,7 +68,7 @@ module PageObjects
end
def click_send_message
find(".chat-thread .chat-composer.is-send-enabled .chat-composer__send-btn").click
find(".chat-thread .chat-composer.is-send-enabled .chat-composer-button.-send").click
end
def has_message?(text: nil, id: nil, thread_id: nil)

2
plugins/chat/spec/system/page_objects/chat/components/composer.rb
View File

@ -67,7 +67,7 @@ module PageObjects
end
def open_emoji_picker
find(context).find(SELECTOR).find(".chat-composer-button__btn.emoji").click
find(context).find(SELECTOR).find(".chat-composer-button.-emoji").click
end
def editing_message?(message)

2
plugins/chat/spec/system/silenced_user_spec.rb
View File

@ -30,7 +30,7 @@ RSpec.describe "Silenced user", type: :system, js: true do
it "disables the send button" do
chat.visit_channel(channel_1)
expect(page).to have_css(".chat-composer__send-btn[disabled]")
expect(page).to have_css(".chat-composer-button.-send[disabled]")
end
it "prevents reactions" do

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

@ -98,7 +98,7 @@ acceptance("Discourse Chat - Composer - unreliable network", function (needs) {
skip("Sending a message with unreliable network", async function (assert) {
await visit("/chat/c/-/11");
await fillIn(".chat-composer__input", "network-error-message");
await click(".send-btn");
await click(".chat-composer-button.-send");
assert.ok(
exists(".chat-message-container[data-id='1'] .retry-staged-message-btn"),
@ -106,7 +106,7 @@ acceptance("Discourse Chat - Composer - unreliable network", function (needs) {
);
await fillIn(".chat-composer__input", "network-error-message");
await click(".send-btn");
await click(".chat-composer-button.-send");
await publishToMessageBus(`/chat/11`, {
type: "sent",
staged_id: 1,