UX: implements new composer design (#21588)

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
This commit is contained in:
Joffrey JAFFEUX 2023-05-16 17:17:12 +02:00 committed by GitHub
parent f6670aecfd
commit f45d1e6791
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 101 additions and 87 deletions

View File

@ -1,11 +1,14 @@
{{#if @buttons.length}}
<DButton
@disabled={{@isDisabled}}
@class="chat-composer-dropdown__trigger-btn btn-flat btn-icon"
@title="chat.composer.toggle_toolbar"
@icon={{if @hasActivePanel "times" "plus"}}
@action={{this.toggleExpand}}
<Chat::Composer::Button
{{on "click" this.toggleExpand}}
@icon="plus"
title={{i18n "chat.composer.toggle_toolbar"}}
disabled={{@isDisabled}}
{{did-insert this.setupTrigger}}
class={{concat-class
"chat-composer-dropdown__trigger-btn"
(if @hasActivePanel "has-active-panel")
}}
/>
{{#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}}
/>
</li>

View File

@ -1,4 +1,6 @@
{{! template-lint-disable no-down-event-binding }}
{{! template-lint-disable no-invalid-interactive }}
<div class="chat-composer__wrapper">
{{#if this.shouldRenderMessageDetails}}
<ChatComposerMessageDetails
@ -40,7 +42,10 @@
@onCloseActivePanel={{this.chatEmojiPickerManager.close}}
/>
<div class="chat-composer__input-container">
<div
class="chat-composer__input-container"
{{on "click" this.focusTextarea}}
>
<DTextarea
id={{this.composerId}}
value={{readonly this.currentMessage.message}}
@ -62,12 +67,12 @@
/>
</div>
<DButton
@action={{this.onSend}}
<Chat::Composer::Button
{{on "click" this.onSend}}
@icon="paper-plane"
class="chat-composer__send-btn icon-only"
@title="chat.composer.send"
@disabled={{or this.disabled (not this.sendEnabled)}}
class="chat-composer__send-btn"
title="chat.composer.send"
disabled={{or this.disabled (not this.sendEnabled)}}
tabindex={{if this.sendEnabled 0 -1}}
{{on "focus" (fn this.computeIsFocused true)}}
{{on "blur" (fn this.computeIsFocused false)}}
@ -77,7 +82,6 @@
<ChatComposerInlineButtons @buttons={{this.inlineButtons}} />
{{/unless}}
</div>
</div>
</div>

View File

@ -174,6 +174,11 @@ export default class ChatComposer extends Component {
});
}
@action
focusTextarea() {
this.textareaInteractor.focus();
}
@action
uploadClicked() {
document.querySelector(`#${this.fileUploadElementId}`).click();

View File

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

View File

@ -0,0 +1,3 @@
import Component from "@glimmer/component";
export default class ChatComposerButton extends Component {}

View File

@ -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;
}
}

View File

@ -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);
}
}
}

View File

@ -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;

View File

@ -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

View File

@ -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";

View File

@ -1,8 +1,4 @@
.chat-composer {
&__wrapper {
padding: 0;
}
&__input {
.ios-device & {
background-color: transparent;