UX: chat composer design update (mobile) (#25789)

This commit is contained in:
chapoi 2024-02-22 13:42:07 +02:00 committed by GitHub
parent 6e9fbb5bab
commit 64a41729f7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 65 additions and 2 deletions

View File

@ -27,11 +27,20 @@
{{will-destroy this.cancelPersistDraft}}
>
<div class="chat-composer__outer-container">
<div class="chat-composer__inner-container">
{{#if this.site.mobileView}}
<ChatComposerDropdown
@buttons={{this.dropdownButtons}}
@isDisabled={{this.disabled}}
/>
{{/if}}
<div class="chat-composer__inner-container">
{{#if this.site.desktopView}}
<ChatComposerDropdown
@buttons={{this.dropdownButtons}}
@isDisabled={{this.disabled}}
/>
{{/if}}
<div
class="chat-composer__input-container"
@ -78,6 +87,21 @@
<Chat::Composer::Separator />
{{/if}}
{{#if this.site.desktopView}}
<Chat::Composer::Button
@icon="paper-plane"
class="-send"
title={{i18n "chat.composer.send"}}
disabled={{or this.disabled (not this.sendEnabled)}}
tabindex={{if this.sendEnabled 0 -1}}
{{on "click" this.onSend}}
{{on "mousedown" this.trapMouseDown}}
{{on "focus" (fn this.computeIsFocused true)}}
{{on "blur" (fn this.computeIsFocused false)}}
/>
{{/if}}
</div>
{{#if this.site.mobileView}}
<Chat::Composer::Button
@icon="paper-plane"
class="-send"
@ -89,7 +113,7 @@
{{on "focus" (fn this.computeIsFocused true)}}
{{on "blur" (fn this.computeIsFocused false)}}
/>
</div>
{{/if}}
</div>
</div>

View File

@ -1,7 +1,46 @@
.chat-composer {
&__wrapper {
padding-top: 0;
background: none;
}
&__outer-container {
padding: 0;
.chat-composer.is-disabled {
opacity: 0.5;
}
}
&__inner-container {
min-height: unset;
.chat-composer.is-focused & {
border-color: var(--primary-low);
box-shadow: 0px 0px 2px 0px rgba(10, 173, 255, 0.5);
}
}
&__input-container {
padding: 0.15em 0.5em;
background: var(--primary-very-low);
}
&__input {
.ios-device & {
background-color: transparent;
}
}
&-button__wrapper {
align-self: unset;
}
&-button.-send {
height: 100%;
width: auto;
align-self: unset;
.d-icon {
padding: 0.5rem;
border-radius: 100%;
.is-send-enabled.is-focused & {
background-color: var(--tertiary-high);
color: var(--secondary);
}
}
}
}