IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-28 19:53:53 -06:00
Code Issues Packages Projects Releases Wiki Activity

UX: fix color preference layout (#21346)

Browse Source
This commit is contained in:
Kris 2023-05-02 22:11:52 -04:00 committed by GitHub
parent 9ee8a54d97
commit 3ea86985b9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 52 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
app/assets/javascripts/discourse/app/templates/preferences/interface.hbs
View File

@ -35,56 +35,57 @@
{{#if this.showColorSchemeSelector}}
<fieldset class="control-group color-scheme">
<legend class="control-label">{{i18n "user.color_scheme"}}</legend>
<div class="control-subgroup light-color-scheme">
{{#if this.showDarkColorSchemeSelector}}
<div class="instructions">{{i18n "user.color_schemes.regular"}}</div>
{{/if}}
<div class="controls">
<ComboBox
@content={{this.userSelectableColorSchemes}}
@value={{this.selectedColorSchemeId}}
@onChange={{action "loadColorScheme"}}
@options={{hash
translatedNone=this.selectedColorSchemeNoneLabel
autoInsertNoneItem=this.showColorSchemeNoneItem
}}
/>
</div>
</div>
{{#if this.showDarkColorSchemeSelector}}
<div class="control-subgroup dark-color-scheme">
<div class="instructions">{{i18n "user.color_schemes.dark"}}</div>
<div class="controls">
<div class="control-subgroup light-color-scheme">
{{#if this.showDarkColorSchemeSelector}}
<div class="instructions">{{i18n "user.color_schemes.regular"}}</div>
{{/if}}
<div class="controls">
<ComboBox
@content={{this.userSelectableDarkColorSchemes}}
@value={{this.selectedDarkColorSchemeId}}
@onChange={{action "loadDarkColorScheme"}}
@content={{this.userSelectableColorSchemes}}
@value={{this.selectedColorSchemeId}}
@onChange={{action "loadColorScheme"}}
@options={{hash
translatedNone=this.selectedColorSchemeNoneLabel
autoInsertNoneItem=this.showColorSchemeNoneItem
}}
/>
</div>
</div>
{{#if this.showDarkColorSchemeSelector}}
<div class="control-subgroup dark-color-scheme">
<div class="instructions">{{i18n "user.color_schemes.dark"}}</div>
<div class="controls">
<ComboBox
@content={{this.userSelectableDarkColorSchemes}}
@value={{this.selectedDarkColorSchemeId}}
@onChange={{action "loadDarkColorScheme"}}
/>
</div>
</div>
{{/if}}
{{#if this.previewingColorScheme}}
{{#if this.previewingColorScheme}}
<DButton
@action={{action "undoColorSchemePreview"}}
@label="user.color_schemes.undo"
@icon="undo"
@class="btn-default btn-small undo-preview"
/>
{{/if}}
<div class="controls color-scheme-checkbox">
<PreferenceCheckbox
@labelKey="user.color_scheme_default_on_all_devices"
@checked={{this.makeColorSchemeDefault}}
/>
</div>
{{/if}}
</div>
{{#if this.showDarkColorSchemeSelector}}
<div class="instructions">
{{i18n "user.color_schemes.dark_instructions"}}
</div>
{{/if}}
{{#if this.previewingColorScheme}}
{{#if this.previewingColorScheme}}
<DButton
@action={{action "undoColorSchemePreview"}}
@label="user.color_schemes.undo"
@icon="undo"
@class="btn-default btn-small undo-preview"
/>
{{/if}}
<div class="controls color-scheme-checkbox">
<PreferenceCheckbox
@labelKey="user.color_scheme_default_on_all_devices"
@checked={{this.makeColorSchemeDefault}}
/>
</div>
{{/if}}
</fieldset>
{{/if}}

4
app/assets/stylesheets/common/base/discourse.scss
View File

@ -573,10 +573,6 @@ table {
max-width: 100%;
}
.control-group {
@include clearfix;
}
.control-label:not(.checkbox-label) {
font-family: var(--heading-font-family);
font-weight: bold;

6
app/assets/stylesheets/common/base/user.scss
View File

@ -545,7 +545,6 @@
.instructions {
color: var(--primary-medium);
margin-bottom: 10px;
font-size: var(--font-down-1);
line-height: var(--line-height-large);
@ -595,8 +594,11 @@
font-size: var(--font-down-1);
}
.color-scheme .controls {
display: flex;
}
.control-subgroup {
float: left;
+ .controls {
clear: both;
padding-top: 1em;

6
app/assets/stylesheets/common/components/ignored-user-list.scss
View File

@ -1,3 +1,9 @@
.user-ignore {
.btn-icon-text {
margin-top: 0.5em;
}
}
.ignored-list {
overflow: auto;
max-height: 150px;