github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-01-18 18:12:46 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: loading slider for select-kit filter (#21401)

Browse Source
This commit is contained in:
Penar Musaraj 2023-05-08 14:56:46 -04:00 committed by GitHub
parent 81aff58d09
commit c69c7578f3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 56 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
app/assets/javascripts/select-kit/addon/components/multi-select.hbs
View File

@ -30,32 +30,24 @@
</div>
{{/if}}
{{#if this.selectKit.isLoading}}
<span class="is-loading">
{{#if this.site}}
{{loading-spinner size="small"}}
{{/if}}
</span>
{{else}}
{{#each this.collections as |collection|}}
{{component
(component-for-collection collection.identifier this.selectKit)
collection=collection
selectKit=this.selectKit
value=this.value
}}
{{/each}}
{{#each this.collections as |collection|}}
{{component
(component-for-collection collection.identifier this.selectKit)
collection=collection
selectKit=this.selectKit
value=this.value
}}
{{/each}}
{{#if this.selectKit.filter}}
{{#if this.selectKit.hasNoContent}}
<span class="no-content" role="alert">
{{i18n "select_kit.no_content"}}
</span>
{{else}}
<span class="results-count" role="alert">
{{i18n "select_kit.results_count" count=this.mainCollection.length}}
</span>
{{/if}}
{{#if this.selectKit.filter}}
{{#if this.selectKit.hasNoContent}}
<span class="no-content" role="alert">
{{i18n "select_kit.no_content"}}
</span>
{{else}}
<span class="results-count" role="alert">
{{i18n "select_kit.results_count" count=this.mainCollection.length}}
</span>
{{/if}}
{{/if}}
</SelectKit::SelectKitBody>

43
app/assets/javascripts/select-kit/addon/components/single-select.hbs
View File

@ -18,33 +18,26 @@
id=(concat this.selectKit.uniqueID "-filter")
}}
{{#if this.selectKit.isLoading}}
<span class="is-loading">
{{#if this.site}}
{{loading-spinner size="small"}}
{{/if}}
</span>
{{else}}
{{#each this.collections as |collection|}}
{{component
(component-for-collection collection.identifier this.selectKit)
collection=collection
selectKit=this.selectKit
value=this.value
}}
{{/each}}
{{#each this.collections as |collection|}}
{{component
(component-for-collection collection.identifier this.selectKit)
collection=collection
selectKit=this.selectKit
value=this.value
}}
{{/each}}
{{#if this.selectKit.filter}}
{{#if this.selectKit.hasNoContent}}
<span class="no-content" role="alert">
{{i18n "select_kit.no_content"}}
</span>
{{else}}
<span class="results-count" role="alert">
{{i18n "select_kit.results_count" count=this.mainCollection.length}}
</span>
{{/if}}
{{#if this.selectKit.filter}}
{{#if this.selectKit.hasNoContent}}
<span class="no-content" role="alert">
{{i18n "select_kit.no_content"}}
</span>
{{else}}
<span class="results-count" role="alert">
{{i18n "select_kit.results_count" count=this.mainCollection.length}}
</span>
{{/if}}
{{/if}}
</SelectKit::SelectKitBody>
{{/unless}}

25
app/assets/stylesheets/common/select-kit/select-kit.scss
View File

@ -278,6 +278,7 @@
align-items: center;
justify-content: space-between;
width: 100%;
position: relative;
.filter-input {
background: none;
@ -321,7 +322,6 @@
}
.no-content,
.is-loading,
.results-count {
display: flex;
flex: 1 0 auto;
@ -345,8 +345,25 @@
white-space: nowrap;
}
.is-loading {
align-items: flex-start;
justify-content: center;
@keyframes lineDrawToRight {
0% {
width: 0;
}
100% {
width: 100%;
}
}
&.is-loading {
.select-kit-filter::after {
content: "";
position: absolute;
background: var(--tertiary);
width: 100%;
height: 2px;
left: 0;
bottom: 0;
animation: lineDrawToRight 0.5s ease-in;
}
}
}