Discource-C/discourse
1
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-11 22:04:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

simplify toggle further

Browse Source
This commit is contained in:
chapoi 2024-12-21 16:42:13 +10:00 committed by Renato Atilio
parent 35073395eb
commit 9fc0313a31
No known key found for this signature in database
GPG Key ID: CBF93DCB5CBCA1A5
2 changed files with 84 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
app/assets/javascripts/discourse/app/components/composer/toggle-switch.gjs
View File

@ -2,34 +2,38 @@ import concatClass from "discourse/helpers/concat-class";
import icon from "discourse-common/helpers/d-icon"; import icon from "discourse-common/helpers/d-icon";
const ComposerToggleSwitch = <template> const ComposerToggleSwitch = <template>
<div class="composer-toggle-switch"> {{! template-lint-disable no-redundant-role }}
<label class="composer-toggle-switch__label"> <button
{{! template-lint-disable no-redundant-role }} class="{{concatClass
<button 'composer-toggle-switch'
class="composer-toggle-switch__checkbox" (if @state '--rte' '--markdown')
type="button" }}"
role="switch" type="button"
aria-checked={{if @state "true" "false"}} role="switch"
...attributes aria-pressed={{if @state "true" "false"}}
></button> ...attributes
{{! template-lint-enable no-redundant-role }} >
{{! template-lint-enable no-redundant-role }}
<span class="composer-toggle-switch__checkbox-slider"> <span class="composer-toggle-switch__slider" focusable="false">
<span <span
class={{concatClass class={{concatClass
"composer-toggle-switch__left-icon" "composer-toggle-switch__left-icon"
(unless @state "--active") (unless @state "--active")
}} }}
>{{icon "fab-markdown"}}</span> aria-hidden="true"
<span focusable="false"
class={{concatClass >{{icon "fab-markdown"}}</span>
"composer-toggle-switch__right-icon" <span
(if @state "--active") class={{concatClass
}} "composer-toggle-switch__right-icon"
>{{icon "a"}}</span> (if @state "--active")
</span> }}
</label> aria-hidden="true"
</div> focusable="false"
>{{icon "a"}}</span>
</span>
</button>
</template>; </template>;
export default ComposerToggleSwitch; export default ComposerToggleSwitch;

158
app/assets/stylesheets/common/components/composer-toggle-switch.scss
View File

@ -1,146 +1,94 @@
.composer-toggle-switch { .composer-toggle-switch {
$root: &; --toggle-switch-width: 40px;
--toggle-switch-width: 48px;
--toggle-switch-height: 24px; --toggle-switch-height: 24px;
height: 100%;
grid-column: span 2; grid-column: span 2;
justify-content: center; justify-content: center;
&:focus {
&__checkbox-slider {
outline: 2px solid var(--tertiary);
outline-offset: 2px;
}
}
&:hover {
&__checkbox-slider {
background-color: var(--primary-high);
}
&__checkbox[aria-checked="true"]:not([disabled])
+ #{$root}__checkbox-slider {
background-color: var(--tertiary-hover);
}
}
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem;
&__label { border: 0;
position: relative; padding: 0;
display: inline-block; background: transparent;
cursor: pointer;
margin: 0; &:focus-visible {
outline: none;
} }
&[disabled] {
&__checkbox {
position: absolute;
border: 0;
padding: 0;
background: transparent;
&:focus {
+ #{$root}__checkbox-slider {
outline: 2px solid var(--tertiary);
outline-offset: 2px;
}
// Outline should show only when tabbing, not clicking
&:not(:focus-visible) {
+ #{$root}__checkbox-slider {
outline: none;
}
}
}
}
&__checkbox[aria-checked="true"] + &__checkbox-slider::before {
left: calc(var(--toggle-switch-width) - var(--toggle-switch-height));
}
&__checkbox[disabled] + &__checkbox-slider {
opacity: 0.5; opacity: 0.5;
cursor: not-allowed; cursor: not-allowed;
&::before {
cursor: not-allowed;
}
} }
&__checkbox-slider { &__slider {
display: inline-block; display: inline-block;
cursor: pointer; background: var(--primary-low);
background: var(--primary-low-mid);
width: var(--toggle-switch-width); width: var(--toggle-switch-width);
height: var(--toggle-switch-height); height: var(--toggle-switch-height);
position: relative; position: relative;
vertical-align: middle; vertical-align: middle;
transition: background 0.25s; border-radius: 0.25em;
}
&__left-icon { :focus-visible & {
opacity: 0; outline: 2px solid var(--tertiary);
transition: opacity 0.25s; outline-offset: 2px;
@media (prefers-reduced-motion: reduce) {
transition-duration: 0ms;
} }
&.--active { &:before {
opacity: 1; content: "";
} display: block;
& .d-icon {
font-size: var(--font-down-1);
color: var(--primary);
left: 5px;
top: 6px;
position: absolute; position: absolute;
background-color: var(--tertiary-low);
width: calc(var(--toggle-switch-height) - 2px);
height: calc(var(--toggle-switch-height) - 4px);
top: 2px;
transition: left 0.25s, right 0.25s;
border-radius: 0.25em;
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.1);
.--markdown & {
left: 2px;
}
.--rte & {
right: 2px;
}
@media (prefers-reduced-motion: reduce) {
transition-duration: 0ms;
}
} }
} }
&__left-icon,
&__right-icon { &__right-icon {
display: inline-block;
position: absolute;
opacity: 0; opacity: 0;
transition: opacity 0.25s; transition: opacity 0.25s left 0.25s, right 0.25s;
height: 100%;
width: calc(var(--toggle-switch-height) - 2px);
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
transition-duration: 0ms; transition-duration: 0ms;
} }
& .d-icon { .--markdown & {
font-size: var(--font-down-1); left: 2px;
color: var(--primary); }
right: 5px;
top: 6px; .--rte & {
position: absolute; right: 2px;
} }
&.--active { &.--active {
opacity: 1; opacity: 1;
} }
}
&__checkbox-slider::before, .d-icon {
&__checkbox-slider::after { font-size: var(--font-down-1);
content: ""; color: var(--primary);
display: block; vertical-align: text-bottom;
position: absolute;
cursor: pointer;
}
&__checkbox-slider::before {
background-color: var(--tertiary-low);
width: var(--toggle-switch-height);
height: var(--toggle-switch-height);
top: 0;
left: 0;
transition: left 0.25s;
@media (prefers-reduced-motion: reduce) {
transition-duration: 0ms;
} }
} }
} }