From f29f1313876c738bf64298810d2a89c4181e7942 Mon Sep 17 00:00:00 2001 From: chapoi <101828855+chapoi@users.noreply.github.com> Date: Fri, 28 Apr 2023 17:24:49 +0900 Subject: [PATCH] UX: composer use BEM + small tweaks to enabled/disabled styling (#21246) - using BEM notation - making animation linear instead of default ease - small tweaks to composer state (disabled/send-disabled/send-enabled) - fixing bug with disabled composer on mobile --- .../discourse/components/chat-composer.hbs | 12 ++-- .../common/chat-composer-dropdown.scss | 8 +++ .../stylesheets/common/chat-composer.scss | 56 ++++++++++--------- .../stylesheets/mobile/chat-composer.scss | 12 ++-- .../chat/spec/system/chat_composer_spec.rb | 2 +- .../system/page_objects/chat/chat_channel.rb | 2 +- .../system/page_objects/chat/chat_thread.rb | 2 +- 7 files changed, 52 insertions(+), 42 deletions(-) diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-composer.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-composer.hbs index 8c6953fcfbb..fbb555f026e 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat-composer.hbs +++ b/plugins/chat/assets/javascripts/discourse/components/chat-composer.hbs @@ -17,14 +17,10 @@ aria-label={{i18n "chat.aria_roles.composer"}} class={{concat-class "chat-composer" - (if this.isFocused "chat-composer--focused") - (if this.pane.sending "chat-composer--sending") - (if - this.sendEnabled - "chat-composer--send-enabled" - "chat-composer--send-disabled" - ) - (if this.disabled "chat-composer--disabled") + (if this.isFocused "is-focused") + (if this.pane.sending "is-sending") + (if this.sendEnabled "is-send-enabled" "is-send-disabled") + (if this.disabled "is-disabled") }} {{did-update this.didUpdateMessage this.currentMessage}} {{did-update this.didUpdateInReplyTo this.currentMessage.inReplyTo}} diff --git a/plugins/chat/assets/stylesheets/common/chat-composer-dropdown.scss b/plugins/chat/assets/stylesheets/common/chat-composer-dropdown.scss index 93dd7af86cb..e1e457beb21 100644 --- a/plugins/chat/assets/stylesheets/common/chat-composer-dropdown.scss +++ b/plugins/chat/assets/stylesheets/common/chat-composer-dropdown.scss @@ -27,6 +27,14 @@ color: var(--primary-low); } } + + .chat-composer.is-disabled & { + background: var(--primary-400); + + &:hover { + cursor: not-allowed; + } + } } .chat-composer-dropdown__list { diff --git a/plugins/chat/assets/stylesheets/common/chat-composer.scss b/plugins/chat/assets/stylesheets/common/chat-composer.scss index bd5ea8c3e42..d724cda7a04 100644 --- a/plugins/chat/assets/stylesheets/common/chat-composer.scss +++ b/plugins/chat/assets/stylesheets/common/chat-composer.scss @@ -1,7 +1,4 @@ .chat-composer { - display: flex; - align-items: center; - &__wrapper { display: flex; flex-direction: column; @@ -39,12 +36,16 @@ padding-inline: 0.25rem; min-height: 42px; - .chat-composer--focused & { + .chat-composer.is-focused & { border-color: var(--primary-medium); } - .chat-composer--disabled & { + .chat-composer.is-disabled & { background: var(--primary-low); + + &:hover { + cursor: not-allowed; + } } } @@ -53,13 +54,24 @@ background: none; will-change: scale; - .chat-composer--send-enabled & { - &:hover { - background: none; + @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; + } + .chat-composer.is-send-enabled & { + background: var(--tertiary-50); &:focus { - background: none; outline: auto; } @@ -68,26 +80,15 @@ } } - @keyframes sendingScales { - 0% { - transform: scale(0.8); - } - 50% { - transform: scale(1.2); - } - 100% { - transform: scale(0.8); - } - } - - .chat-composer--sending & { - animation: sendingScales 1s infinite; - } - - .chat-composer--send-disabled & { + .chat-composer.is-send-disabled & { cursor: default; - opacity: 0.6 !important; + &:hover { + background: none !important; + } + } + .chat-composer.is-disabled & { + opacity: 0.4; &:hover { background: none !important; } @@ -145,6 +146,7 @@ margin: 0; padding: 0.25rem 0.5rem; text-overflow: ellipsis; + cursor: inherit; @include chat-scrollbar(); diff --git a/plugins/chat/assets/stylesheets/mobile/chat-composer.scss b/plugins/chat/assets/stylesheets/mobile/chat-composer.scss index edbc974c9dd..487c2b61055 100644 --- a/plugins/chat/assets/stylesheets/mobile/chat-composer.scss +++ b/plugins/chat/assets/stylesheets/mobile/chat-composer.scss @@ -1,7 +1,11 @@ -.chat-composer-container { - padding: 0; +.chat-composer { + &__wrapper { + padding: 0; + } - .chat-composer { - margin: 0.5rem 10px 0 10px; + &__input { + .ios-device & { + background-color: transparent; + } } } diff --git a/plugins/chat/spec/system/chat_composer_spec.rb b/plugins/chat/spec/system/chat_composer_spec.rb index 9b2095d4743..472346a060a 100644 --- a/plugins/chat/spec/system/chat_composer_spec.rb +++ b/plugins/chat/spec/system/chat_composer_spec.rb @@ -321,7 +321,7 @@ RSpec.describe "Chat composer", type: :system, js: true do chat.visit_channel(channel_1) find("body").send_keys("1") - expect(page).to have_css(".chat-composer--send-disabled") + expect(page).to have_css(".chat-composer.is-send-disabled") end end end 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 6975f561410..d59d96aaeac 100644 --- a/plugins/chat/spec/system/page_objects/chat/chat_channel.rb +++ b/plugins/chat/spec/system/page_objects/chat/chat_channel.rb @@ -18,7 +18,7 @@ module PageObjects end def click_send_message - find(".chat-composer--send-enabled .chat-composer__send-btn").click + find(".chat-composer.is-send-enabled .chat-composer__send-btn").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 6b744ef0439..ed6016b9f42 100644 --- a/plugins/chat/spec/system/page_objects/chat/chat_thread.rb +++ b/plugins/chat/spec/system/page_objects/chat/chat_thread.rb @@ -50,7 +50,7 @@ module PageObjects def click_send_message(id) find(thread_selector_by_id(id)).find( - ".chat-composer--send-enabled .chat-composer__send-btn", + ".chat-composer.is-send-enabled .chat-composer__send-btn", ).click end