github-mirror/discourse
github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-04-08 10:40:49 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

FIX: customise themes/components CSS (#25127)

Browse Source 
Previous PR removed overflow-y CSS parameter which was required: https://github.com/discourse/discourse/pull/25105/files#diff-eae50f20f62ec6d720f9a100ccdef41622588c724bc68f6027ae13e2661bd3c4L249

Overflow is conflicting with select-kit so both search and filter were moved out of `themes-list-container`
This commit is contained in:
Krzysztof Kotlarek 2024-01-04 16:00:25 +11:00 committed by GitHub
parent be841e666e
commit 7b81c39a8b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 94 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
app/assets/javascripts/admin/addon/components/themes-list.hbs
View File

@ -16,29 +16,29 @@
/> />
</div> </div>
<div class="themes-list-container"> {{#if this.showSearch}}
{{#if this.showSearch}} <div class="themes-list-search">
<div class="themes-list-container__search themes-list-container__item"> <Input
<Input class="themes-list-search__input"
class="themes-list-container__search-input" placeholder={{i18n "admin.customize.theme.search_placeholder"}}
placeholder={{i18n "admin.customize.theme.search_placeholder"}} autocomplete="off"
autocomplete="off" @type="search"
@type="search" @value={{mut this.searchTerm}}
@value={{mut this.searchTerm}}
/>
{{d-icon "search"}}
</div>
{{/if}}
<div class="themes-list-container__filter themes-list-container__item">
<div class="themes-list-container__filter-label">
{{i18n "admin.customize.theme.filter_by"}}
</div>
<ComboBox
@content={{this.selectableFilters}}
@value={{this.filter}}
@class="themes-list-container__filter-input"
/> />
{{d-icon "search"}}
</div> </div>
{{/if}}
<div class="themes-list-filter">
<div class="themes-list-filter__label">
{{i18n "admin.customize.theme.filter_by"}}
</div>
<ComboBox
@content={{this.selectableFilters}}
@value={{this.filter}}
@class="themes-list-filter__input"
/>
</div>
<div class="themes-list-container">
{{#if this.hasThemes}} {{#if this.hasThemes}}
{{#if (and this.hasActiveThemes (not this.inactiveFilter))}} {{#if (and this.hasActiveThemes (not this.inactiveFilter))}}
{{#each this.activeThemes as |theme|}} {{#each this.activeThemes as |theme|}}

32
app/assets/javascripts/discourse/tests/integration/components/themes-list-test.js
View File

@ -79,7 +79,7 @@ module("Integration | Component | themes-list", function (hooks) {
); );
assert.strictEqual( assert.strictEqual(
queryAll(".inactive-indicator").index(), queryAll(".inactive-indicator").index(),
4, 3,
"the separator is in the right location" "the separator is in the right location"
); );
@ -184,8 +184,8 @@ module("Integration | Component | themes-list", function (hooks) {
hbs`<ThemesList @themes={{this.themes}} @components={{(array)}} @currentTab={{this.currentTab}} />` hbs`<ThemesList @themes={{this.themes}} @components={{(array)}} @currentTab={{this.currentTab}} />`
); );
assert.ok(exists(".themes-list-container__search-input")); assert.ok(exists(".themes-list-search__input"));
await fillIn(".themes-list-container__search-input", " oSAma "); await fillIn(".themes-list-search__input", " oSAma ");
assert.deepEqual( assert.deepEqual(
[...queryAll(".themes-list-container__item .info .name")].map((node) => [...queryAll(".themes-list-container__item .info .name")].map((node) =>
node.textContent.trim() node.textContent.trim()
@ -220,7 +220,7 @@ module("Integration | Component | themes-list", function (hooks) {
hbs`<ThemesList @themes={{this.themes}} @components={{(array)}} @currentTab={{this.currentTab}} />` hbs`<ThemesList @themes={{this.themes}} @components={{(array)}} @currentTab={{this.currentTab}} />`
); );
assert.ok(exists(".themes-list-container__filter-input")); assert.ok(exists(".themes-list-filter__input"));
assert.deepEqual( assert.deepEqual(
[...queryAll(".themes-list-container__item .info .name")].map((node) => [...queryAll(".themes-list-container__item .info .name")].map((node) =>
node.textContent.trim() node.textContent.trim()
@ -233,10 +233,8 @@ module("Integration | Component | themes-list", function (hooks) {
] ]
); );
await selectKit(".themes-list-container__filter-input").expand(); await selectKit(".themes-list-filter__input").expand();
await selectKit(".themes-list-container__filter-input").selectRowByValue( await selectKit(".themes-list-filter__input").selectRowByValue("active");
"active"
);
assert.deepEqual( assert.deepEqual(
[...queryAll(".themes-list-container__item .info .name")].map((node) => [...queryAll(".themes-list-container__item .info .name")].map((node) =>
node.textContent.trim() node.textContent.trim()
@ -244,10 +242,8 @@ module("Integration | Component | themes-list", function (hooks) {
["Theme enabled 1", "Theme enabled 2"] ["Theme enabled 1", "Theme enabled 2"]
); );
await selectKit(".themes-list-container__filter-input").expand(); await selectKit(".themes-list-filter__input").expand();
await selectKit(".themes-list-container__filter-input").selectRowByValue( await selectKit(".themes-list-filter__input").selectRowByValue("inactive");
"inactive"
);
assert.deepEqual( assert.deepEqual(
[...queryAll(".themes-list-container__item .info .name")].map((node) => [...queryAll(".themes-list-container__item .info .name")].map((node) =>
node.textContent.trim() node.textContent.trim()
@ -255,8 +251,8 @@ module("Integration | Component | themes-list", function (hooks) {
["Theme disabled 1", "Theme disabled 2"] ["Theme disabled 1", "Theme disabled 2"]
); );
await selectKit(".themes-list-container__filter-input").expand(); await selectKit(".themes-list-filter__input").expand();
await selectKit(".themes-list-container__filter-input").selectRowByValue( await selectKit(".themes-list-filter__input").selectRowByValue(
"updates_available" "updates_available"
); );
assert.deepEqual( assert.deepEqual(
@ -289,7 +285,7 @@ module("Integration | Component | themes-list", function (hooks) {
hbs`<ThemesList @themes={{this.themes}} @components={{this.components}} @currentTab={{this.currentTab}} />` hbs`<ThemesList @themes={{this.themes}} @components={{this.components}} @currentTab={{this.currentTab}} />`
); );
await fillIn(".themes-list-container__search-input", "11"); await fillIn(".themes-list-search__input", "11");
assert.strictEqual( assert.strictEqual(
query(".themes-list-container__item .info").textContent.trim(), query(".themes-list-container__item .info").textContent.trim(),
"Theme 11", "Theme 11",
@ -297,7 +293,7 @@ module("Integration | Component | themes-list", function (hooks) {
); );
await click(".themes-list-header .components-tab"); await click(".themes-list-header .components-tab");
assert.ok( assert.ok(
!exists(".themes-list-container__search-input"), !exists(".themes-list-search__input"),
"search input/term do not persist when we switch to the other" + "search input/term do not persist when we switch to the other" +
" tab because it has fewer than 10 items" " tab because it has fewer than 10 items"
); );
@ -330,11 +326,11 @@ module("Integration | Component | themes-list", function (hooks) {
) )
); );
assert.ok( assert.ok(
exists(".themes-list-container__search-input"), exists(".themes-list-search__input"),
"search is now shown for the components tab" "search is now shown for the components tab"
); );
await fillIn(".themes-list-container__search-input", "66"); await fillIn(".themes-list-search__input", "66");
assert.strictEqual( assert.strictEqual(
query(".themes-list-container__item .info").textContent.trim(), query(".themes-list-container__item .info").textContent.trim(),
"Component 66", "Component 66",

108
app/assets/stylesheets/common/admin/customize.scss
View File

@ -244,8 +244,67 @@
@include ellipsis; @include ellipsis;
} }
} }
.themes-list-search {
display: flex;
align-items: center;
position: sticky;
top: 0;
z-index: z("base");
height: 3em;
background: var(--primary-very-low);
.d-icon {
position: absolute;
padding-left: 0.5em;
}
&__input {
width: 100%;
height: 100%;
margin: 0;
border: 0;
padding-left: 2em;
background-color: var(--primary-very-low);
&:focus {
outline: 0;
~ .d-icon {
color: var(--tertiary-hover);
}
}
}
}
.themes-list-filter {
padding-left: 0.67em;
display: flex;
height: 3em;
align-items: center;
background-color: var(--primary-very-low);
&__label {
white-space: nowrap;
margin-right: 1em;
}
&__input {
margin-right: 0.5em;
summary {
width: auto;
}
}
}
.themes-list-filter,
.themes-list-search {
color: var(--primary);
border-bottom: 1px solid var(--primary-low);
display: flex;
border-right: 1px solid var(--primary-low);
border-bottom: 1px solid var(--primary-low);
border-left: 1px solid var(--primary-low);
}
.themes-list-container { .themes-list-container {
overflow-y: auto;
box-sizing: border-box; box-sizing: border-box;
max-height: 60vh; max-height: 60vh;
border-bottom-right-radius: var(--d-border-radius); border-bottom-right-radius: var(--d-border-radius);
@ -390,55 +449,6 @@
width: 100%; width: 100%;
} }
} }
&__filter {
padding-left: 0.67em;
display: flex;
height: 3em;
align-items: center;
background-color: var(--primary-very-low);
}
&__filter-label {
white-space: nowrap;
margin-right: 1em;
}
&__filter-input {
margin-right: 0.5em;
summary {
width: auto;
}
}
&__search {
display: flex;
align-items: center;
position: sticky;
top: 0;
z-index: z("base");
height: 3em;
background: var(--primary-very-low);
.d-icon {
position: absolute;
padding-left: 0.5em;
}
}
&__search-input {
width: 100%;
height: 100%;
margin: 0;
border: 0;
padding-left: 2em;
background-color: var(--primary-very-low);
&:focus {
outline: 0;
~ .d-icon {
color: var(--tertiary-hover);
}
}
}
} }
.theme.settings { .theme.settings {