From f45d1e6791b4a0ff7e7d61f6844e279d34022263 Mon Sep 17 00:00:00 2001 From: Joffrey JAFFEUX Date: Tue, 16 May 2023 17:17:12 +0200 Subject: [PATCH] UX: implements new composer design (#21588) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This is only the first steps of a redesign - redesigns the buttons to have a larger hitzone - generally bigger composer - clicking near textarea focuses the input - relies on the fact that safe-area-inset-bottom is set globally and doesn’t need to be set in sub components --- .../components/chat-composer-dropdown.hbs | 17 ++-- .../discourse/components/chat-composer.hbs | 18 +++-- .../discourse/components/chat-composer.js | 5 ++ .../components/chat/composer/button.hbs | 5 ++ .../components/chat/composer/button.js | 3 + .../common/chat-composer-button.scss | 14 ++++ .../common/chat-composer-dropdown.scss | 35 ++++---- .../stylesheets/common/chat-composer.scss | 81 +++++++++---------- .../common/chat-replying-indicator.scss | 5 -- .../chat/assets/stylesheets/common/index.scss | 1 + .../stylesheets/mobile/chat-composer.scss | 4 - 11 files changed, 101 insertions(+), 87 deletions(-) create mode 100644 plugins/chat/assets/javascripts/discourse/components/chat/composer/button.hbs create mode 100644 plugins/chat/assets/javascripts/discourse/components/chat/composer/button.js create mode 100644 plugins/chat/assets/stylesheets/common/chat-composer-button.scss diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-composer-dropdown.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-composer-dropdown.hbs index fa5698b639d..162fdcb3e52 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat-composer-dropdown.hbs +++ b/plugins/chat/assets/javascripts/discourse/components/chat-composer-dropdown.hbs @@ -1,11 +1,14 @@ {{#if @buttons.length}} - {{#if this.isExpanded}} @@ -22,7 +25,7 @@ button.id }} @icon={{button.icon}} - @action={{(fn this.onButtonClick button)}} + @action={{fn this.onButtonClick button}} @label={{button.label}} /> diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-composer.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-composer.hbs index 3b401ab1ea9..57ec49e8b8e 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat-composer.hbs +++ b/plugins/chat/assets/javascripts/discourse/components/chat-composer.hbs @@ -1,4 +1,6 @@ {{! template-lint-disable no-down-event-binding }} +{{! template-lint-disable no-invalid-interactive }} +
{{#if this.shouldRenderMessageDetails}} -
+
- {{/unless}}
-
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-composer.js b/plugins/chat/assets/javascripts/discourse/components/chat-composer.js index 7ca43144eb3..1bbc4f17a32 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat-composer.js +++ b/plugins/chat/assets/javascripts/discourse/components/chat-composer.js @@ -174,6 +174,11 @@ export default class ChatComposer extends Component { }); } + @action + focusTextarea() { + this.textareaInteractor.focus(); + } + @action uploadClicked() { document.querySelector(`#${this.fileUploadElementId}`).click(); diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/composer/button.hbs b/plugins/chat/assets/javascripts/discourse/components/chat/composer/button.hbs new file mode 100644 index 00000000000..6300d4631ed --- /dev/null +++ b/plugins/chat/assets/javascripts/discourse/components/chat/composer/button.hbs @@ -0,0 +1,5 @@ +
+ +
\ No newline at end of file diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/composer/button.js b/plugins/chat/assets/javascripts/discourse/components/chat/composer/button.js new file mode 100644 index 00000000000..f91ff5d29be --- /dev/null +++ b/plugins/chat/assets/javascripts/discourse/components/chat/composer/button.js @@ -0,0 +1,3 @@ +import Component from "@glimmer/component"; + +export default class ChatComposerButton extends Component {} diff --git a/plugins/chat/assets/stylesheets/common/chat-composer-button.scss b/plugins/chat/assets/stylesheets/common/chat-composer-button.scss new file mode 100644 index 00000000000..9e6c9528775 --- /dev/null +++ b/plugins/chat/assets/stylesheets/common/chat-composer-button.scss @@ -0,0 +1,14 @@ +.chat-composer-button { + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + + &__btn { + box-sizing: border-box; + width: 50px; + border: 0; + height: 100%; + background: none; + } +} diff --git a/plugins/chat/assets/stylesheets/common/chat-composer-dropdown.scss b/plugins/chat/assets/stylesheets/common/chat-composer-dropdown.scss index e1e457beb21..24685d740cf 100644 --- a/plugins/chat/assets/stylesheets/common/chat-composer-dropdown.scss +++ b/plugins/chat/assets/stylesheets/common/chat-composer-dropdown.scss @@ -7,32 +7,27 @@ } .chat-composer-dropdown__trigger-btn { - padding: 5px !important; // overwrite ios rule - border-radius: 100%; - background: var(--primary-med-or-secondary-high); - border: 1px solid transparent; - display: flex; - .d-icon { - color: var(--secondary-very-high); + padding: 5px; + transition: transform 0.1s ease-in-out; + color: var(--primary-high); + background: var(--secondary-very-high); + border-radius: 100%; } - &:focus { - border-color: var(--tertiary); - } - - .discourse-no-touch &:hover { - background: var(--primary-high); - .d-icon { - color: var(--primary-low); + .no-touch & { + &:hover, + &:focus { + cursor: pointer; + .d-icon { + color: var(--primary); + } } } - .chat-composer.is-disabled & { - background: var(--primary-400); - - &:hover { - cursor: not-allowed; + &.has-active-panel { + .d-icon { + transform: rotate(45deg); } } } diff --git a/plugins/chat/assets/stylesheets/common/chat-composer.scss b/plugins/chat/assets/stylesheets/common/chat-composer.scss index d724cda7a04..29af82e54ba 100644 --- a/plugins/chat/assets/stylesheets/common/chat-composer.scss +++ b/plugins/chat/assets/stylesheets/common/chat-composer.scss @@ -3,8 +3,8 @@ display: flex; flex-direction: column; z-index: 3; - background-color: var(--secondary); - margin-top: 0.1rem; + background-color: var(--primary-very-low); + padding: 12px 10px 0 10px; #chat-full-page-uploader, #chat-widget-uploader { @@ -16,10 +16,14 @@ } } + .chat-composer-button, + .chat-composer-separator { + align-self: stretch; + } + &__outer-container { display: flex; align-items: center; - padding-inline: 0.25rem; box-sizing: border-box; width: 100%; } @@ -30,11 +34,12 @@ box-sizing: border-box; width: 100%; flex-direction: row; - border: 1px solid var(--primary-low-mid); - border-radius: 5px; + border: 1px solid var(--primary-medium); + border-radius: 10px; background-color: var(--secondary); - padding-inline: 0.25rem; - min-height: 42px; + min-height: 50px; + box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1); + overflow: hidden; .chat-composer.is-focused & { border-color: var(--primary-medium); @@ -50,8 +55,6 @@ } &__send-btn { - border-radius: 3px; - background: none; will-change: scale; @keyframes sendingScales { @@ -65,23 +68,38 @@ transform: scale(0.9); } } + .chat-composer.is-sending & { animation: sendingScales 1s infinite linear; } + .d-icon { + background: none !important; + } + .chat-composer.is-send-enabled & { - background: var(--tertiary-50); - &:focus { - outline: auto; + .d-icon { + color: var(--tertiary); } - .d-icon { - color: var(--tertiary) !important; + &:hover { + .d-icon { + transform: scale(1.2); + } + } + + &:focus { + outline: auto; } } .chat-composer.is-send-disabled & { cursor: default; + + .d-icon { + color: var(--primary-high); + } + &:hover { background: none !important; } @@ -89,41 +107,14 @@ .chat-composer.is-disabled & { opacity: 0.4; + &:hover { background: none !important; } } - > * { - pointer-events: none; - } - .d-icon { - color: var(--primary) !important; - } - } - - &__close-emoji-picker-btn { - margin-left: 0.2rem; - padding: 5px !important; - border-radius: 100%; - background: var(--primary-med-or-secondary-high); - border: 1px solid transparent; - display: flex; - - .d-icon { - color: var(--secondary-very-high); - } - - &:focus { - border-color: var(--tertiary); - } - - .discourse-no-touch &:hover { - background: var(--primary-high); - .d-icon { - color: var(--primary-low); - } + color: var(--primary); } } @@ -132,6 +123,8 @@ align-items: center; box-sizing: border-box; width: 100%; + padding: 0 5px; + align-self: stretch; } &__input { @@ -144,7 +137,7 @@ max-height: 125px; background: none; margin: 0; - padding: 0.25rem 0.5rem; + padding: 0; text-overflow: ellipsis; cursor: inherit; diff --git a/plugins/chat/assets/stylesheets/common/chat-replying-indicator.scss b/plugins/chat/assets/stylesheets/common/chat-replying-indicator.scss index 3d93fc44576..4c436062c72 100644 --- a/plugins/chat/assets/stylesheets/common/chat-replying-indicator.scss +++ b/plugins/chat/assets/stylesheets/common/chat-replying-indicator.scss @@ -1,12 +1,7 @@ -.chat-replying-indicator-container { - padding: 0 0.5rem; -} - .chat-replying-indicator { color: var(--primary-medium); display: inline-flex; font-size: var(--font-down-2); - padding-bottom: unquote("max(0px, 0.5rem - env(safe-area-inset-bottom, 0))"); &:before { // unicode zero width space character diff --git a/plugins/chat/assets/stylesheets/common/index.scss b/plugins/chat/assets/stylesheets/common/index.scss index c4f7183e36b..ec538d9b1b1 100644 --- a/plugins/chat/assets/stylesheets/common/index.scss +++ b/plugins/chat/assets/stylesheets/common/index.scss @@ -14,6 +14,7 @@ @import "chat-composer-upload"; @import "chat-composer-uploads"; @import "chat-composer"; +@import "chat-composer-button"; @import "chat-draft-channel"; @import "chat-drawer"; @import "chat-emoji-picker"; diff --git a/plugins/chat/assets/stylesheets/mobile/chat-composer.scss b/plugins/chat/assets/stylesheets/mobile/chat-composer.scss index 487c2b61055..d6334192c33 100644 --- a/plugins/chat/assets/stylesheets/mobile/chat-composer.scss +++ b/plugins/chat/assets/stylesheets/mobile/chat-composer.scss @@ -1,8 +1,4 @@ .chat-composer { - &__wrapper { - padding: 0; - } - &__input { .ios-device & { background-color: transparent;