IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

DEV: regroups composer button code (#21690)

Browse Source 
This commit makes it easier to ensure each button have a similar behavior: hover, disabled, focus...

It also removes some dead code (__inline-button) and fixes a bug where the emoji button didnt have the right un-focused color (it was more visible than it should.
This commit is contained in:
Joffrey JAFFEUX 2023-05-23 10:12:03 +02:00 committed by GitHub
parent d1334a7aaf
commit b8bd3b07ef
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 47 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
plugins/chat/assets/javascripts/discourse/components/chat-composer.hbs
View File

@ -21,7 +21,7 @@
(if this.isFocused "is-focused") (if this.isFocused "is-focused")
(if this.pane.sending "is-sending") (if this.pane.sending "is-sending")
(if this.sendEnabled "is-send-enabled" "is-send-disabled") (if this.sendEnabled "is-send-enabled" "is-send-disabled")
(if this.disabled "is-disabled") (if this.disabled "is-disabled" "is-enabled")
}} }}
{{did-update this.didUpdateMessage this.currentMessage}} {{did-update this.didUpdateMessage this.currentMessage}}
{{did-update this.didUpdateInReplyTo this.currentMessage.inReplyTo}} {{did-update this.didUpdateInReplyTo this.currentMessage.inReplyTo}}
@ -73,7 +73,7 @@
<Chat::Composer::Button <Chat::Composer::Button
@icon={{button.icon}} @icon={{button.icon}}
class={{button.id}} class={{button.id}}
disabled={{button.disabled}} disabled={{or this.disabled button.disabled}}
tabindex={{if button.disabled -1 0}} tabindex={{if button.disabled -1 0}}
{{on {{on
"click" "click"
@ -90,7 +90,7 @@
<Chat::Composer::Button <Chat::Composer::Button
@icon="paper-plane" @icon="paper-plane"
class="chat-composer__send-btn" class="chat-composer__send-btn primary"
title={{i18n "chat.composer.send"}} title={{i18n "chat.composer.send"}}
disabled={{or this.disabled (not this.sendEnabled)}} disabled={{or this.disabled (not this.sendEnabled)}}
tabindex={{if this.sendEnabled 0 -1}} tabindex={{if this.sendEnabled 0 -1}}

15
plugins/chat/assets/stylesheets/common/chat-composer-dropdown.scss
View File

@ -21,23 +21,8 @@
.d-icon { .d-icon {
padding: 5px; padding: 5px;
transition: transform 0.1s ease-in-out; transition: transform 0.1s ease-in-out;
color: var(--primary-high);
background: var(--secondary-very-high); background: var(--secondary-very-high);
border-radius: 100%; border-radius: 100%;
.is-disabled & {
color: var(--primary-low-mid);
}
}
.no-touch & {
&:hover,
&:focus {
cursor: pointer;
.d-icon {
color: var(--primary);
}
}
} }
&.has-active-panel { &.has-active-panel {

96
plugins/chat/assets/stylesheets/common/chat-composer.scss
View File

@ -37,18 +37,6 @@
padding-inline: 1rem; padding-inline: 1rem;
} }
&__inline-button {
.d-icon {
color: var(--primary-medium);
}
&:hover {
.d-icon {
color: var(--primary);
}
}
}
&__inner-container { &__inner-container {
display: flex; display: flex;
align-items: center; align-items: center;
@ -75,6 +63,45 @@
} }
} }
.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 { &__send-btn {
will-change: scale; will-change: scale;
@ -90,55 +117,16 @@
} }
} }
.chat-composer.is-focused.is-send-disabled & {
.d-icon {
color: var(--primary-high);
}
}
.chat-composer.is-sending & { .chat-composer.is-sending & {
animation: sendingScales 1s infinite linear; animation: sendingScales 1s infinite linear;
} }
.d-icon { &:not(:disabled) {
background: none !important;
color: var(--primary);
}
.chat-composer.is-send-enabled & {
.d-icon {
color: var(--tertiary);
}
&:hover { &:hover {
.d-icon { .d-icon {
transform: scale(1.2); transform: scale(1.2);
} }
} }
&:focus {
outline: auto;
}
}
.chat-composer.is-send-disabled & {
cursor: default;
.d-icon {
color: var(--primary-low-mid);
}
&:hover {
background: none !important;
}
}
.chat-composer.is-disabled & {
opacity: 0.4;
&:hover {
background: none !important;
}
} }
} }
@ -177,6 +165,10 @@
&[disabled] { &[disabled] {
background: none; background: none;
.d-icon {
opacity: 0.4;
}
} }
&:focus, &:focus,