From 1f37fe5fa546d46c1d5fa3fffdb7bdd6f4671a77 Mon Sep 17 00:00:00 2001 From: chapoi <101828855+chapoi@users.noreply.github.com> Date: Wed, 31 May 2023 22:12:35 +0900 Subject: [PATCH] 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 --- .../discourse/components/chat-composer.hbs | 4 +- .../components/chat/composer/button.hbs | 4 +- .../common/chat-composer-button.scss | 78 +++++++++++++++++-- .../stylesheets/common/chat-composer.scss | 67 ---------------- .../system/page_objects/chat/chat_channel.rb | 2 +- .../system/page_objects/chat/chat_thread.rb | 2 +- .../page_objects/chat/components/composer.rb | 2 +- .../chat/spec/system/silenced_user_spec.rb | 2 +- .../acceptance/chat-composer-test.js | 4 +- 9 files changed, 80 insertions(+), 85 deletions(-) diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-composer.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-composer.hbs index 588905cbf2e..94443656145 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat-composer.hbs +++ b/plugins/chat/assets/javascripts/discourse/components/chat-composer.hbs @@ -73,7 +73,7 @@ {{#each this.inlineButtons as |button|}} - \ No newline at end of file diff --git a/plugins/chat/assets/stylesheets/common/chat-composer-button.scss b/plugins/chat/assets/stylesheets/common/chat-composer-button.scss index c390bcc017c..4aed231c684 100644 --- a/plugins/chat/assets/stylesheets/common/chat-composer-button.scss +++ b/plugins/chat/assets/stylesheets/common/chat-composer-button.scss @@ -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); + } } } diff --git a/plugins/chat/assets/stylesheets/common/chat-composer.scss b/plugins/chat/assets/stylesheets/common/chat-composer.scss index 44ea8da1bd8..2f8f8bbf5c4 100644 --- a/plugins/chat/assets/stylesheets/common/chat-composer.scss +++ b/plugins/chat/assets/stylesheets/common/chat-composer.scss @@ -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; diff --git a/plugins/chat/spec/system/page_objects/chat/chat_channel.rb b/plugins/chat/spec/system/page_objects/chat/chat_channel.rb index 5a9834cb01d..bfeb94507b0 100644 --- a/plugins/chat/spec/system/page_objects/chat/chat_channel.rb +++ b/plugins/chat/spec/system/page_objects/chat/chat_channel.rb @@ -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) diff --git a/plugins/chat/spec/system/page_objects/chat/chat_thread.rb b/plugins/chat/spec/system/page_objects/chat/chat_thread.rb index 2632a37c9d7..3187cb98e45 100644 --- a/plugins/chat/spec/system/page_objects/chat/chat_thread.rb +++ b/plugins/chat/spec/system/page_objects/chat/chat_thread.rb @@ -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) diff --git a/plugins/chat/spec/system/page_objects/chat/components/composer.rb b/plugins/chat/spec/system/page_objects/chat/components/composer.rb index e425a9a0198..cb5606c5551 100644 --- a/plugins/chat/spec/system/page_objects/chat/components/composer.rb +++ b/plugins/chat/spec/system/page_objects/chat/components/composer.rb @@ -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) diff --git a/plugins/chat/spec/system/silenced_user_spec.rb b/plugins/chat/spec/system/silenced_user_spec.rb index 5c845134d59..ba5d3425a66 100644 --- a/plugins/chat/spec/system/silenced_user_spec.rb +++ b/plugins/chat/spec/system/silenced_user_spec.rb @@ -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 diff --git a/plugins/chat/test/javascripts/acceptance/chat-composer-test.js b/plugins/chat/test/javascripts/acceptance/chat-composer-test.js index 26f06d481f7..b6444ae3a8c 100644 --- a/plugins/chat/test/javascripts/acceptance/chat-composer-test.js +++ b/plugins/chat/test/javascripts/acceptance/chat-composer-test.js @@ -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,