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

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 class="themes-list-container">
{{#if this.showSearch}}
<div class="themes-list-container__search themes-list-container__item">
<Input
class="themes-list-container__search-input"
placeholder={{i18n "admin.customize.theme.search_placeholder"}}
autocomplete="off"
@type="search"
@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"
{{#if this.showSearch}}
<div class="themes-list-search">
<Input
class="themes-list-search__input"
placeholder={{i18n "admin.customize.theme.search_placeholder"}}
autocomplete="off"
@type="search"
@value={{mut this.searchTerm}}
/>
{{d-icon "search"}}
</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 (and this.hasActiveThemes (not this.inactiveFilter))}}
{{#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(
queryAll(".inactive-indicator").index(),
4,
3,
"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}} />`
);
assert.ok(exists(".themes-list-container__search-input"));
await fillIn(".themes-list-container__search-input", " oSAma ");
assert.ok(exists(".themes-list-search__input"));
await fillIn(".themes-list-search__input", " oSAma ");
assert.deepEqual(
[...queryAll(".themes-list-container__item .info .name")].map((node) =>
node.textContent.trim()
@ -220,7 +220,7 @@ module("Integration | Component | themes-list", function (hooks) {
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(
[...queryAll(".themes-list-container__item .info .name")].map((node) =>
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-container__filter-input").selectRowByValue(
"active"
);
await selectKit(".themes-list-filter__input").expand();
await selectKit(".themes-list-filter__input").selectRowByValue("active");
assert.deepEqual(
[...queryAll(".themes-list-container__item .info .name")].map((node) =>
node.textContent.trim()
@ -244,10 +242,8 @@ module("Integration | Component | themes-list", function (hooks) {
["Theme enabled 1", "Theme enabled 2"]
);
await selectKit(".themes-list-container__filter-input").expand();
await selectKit(".themes-list-container__filter-input").selectRowByValue(
"inactive"
);
await selectKit(".themes-list-filter__input").expand();
await selectKit(".themes-list-filter__input").selectRowByValue("inactive");
assert.deepEqual(
[...queryAll(".themes-list-container__item .info .name")].map((node) =>
node.textContent.trim()
@ -255,8 +251,8 @@ module("Integration | Component | themes-list", function (hooks) {
["Theme disabled 1", "Theme disabled 2"]
);
await selectKit(".themes-list-container__filter-input").expand();
await selectKit(".themes-list-container__filter-input").selectRowByValue(
await selectKit(".themes-list-filter__input").expand();
await selectKit(".themes-list-filter__input").selectRowByValue(
"updates_available"
);
assert.deepEqual(
@ -289,7 +285,7 @@ module("Integration | Component | themes-list", function (hooks) {
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(
query(".themes-list-container__item .info").textContent.trim(),
"Theme 11",
@ -297,7 +293,7 @@ module("Integration | Component | themes-list", function (hooks) {
);
await click(".themes-list-header .components-tab");
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" +
" tab because it has fewer than 10 items"
);
@ -330,11 +326,11 @@ module("Integration | Component | themes-list", function (hooks) {
)
);
assert.ok(
exists(".themes-list-container__search-input"),
exists(".themes-list-search__input"),
"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(
query(".themes-list-container__item .info").textContent.trim(),
"Component 66",

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

@ -244,8 +244,67 @@
@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 {
overflow-y: auto;
box-sizing: border-box;
max-height: 60vh;
border-bottom-right-radius: var(--d-border-radius);
@ -390,55 +449,6 @@
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 {