ui: Adds ability to show a 'partial' list in list-collections (#10174)

* ui: Add support for showing partial lists in ListCollection

* Add CSS for partial 'View more' button, and move all CSS to /components

* Enable partial view for intention permissions
This commit is contained in:
John Cowen 2021-05-07 16:54:45 +01:00 committed by GitHub
parent e7ef202850
commit 0fd17a3e2b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 65 additions and 31 deletions

3
.changelog/10174.txt Normal file
View File

@ -0,0 +1,3 @@
```release-note:improvement
ui: Only show a partial list of intention permissions, with the option to show all
```

View File

@ -3,6 +3,7 @@
class="consul-intention-permission-list{{if (not onclick) ' readonly'}}"
@scroll="native"
@items={{items}}
@partial={{5}}
as |item|>
<BlockSlot @name="details">
<div onclick={{action (optional onclick) item}}>

View File

@ -42,9 +42,10 @@
{{~/each~}}
</EmberNativeScrollable>
{{else}}
{{#let (if (and partial (not this.expand)) (slice 0 partial items) items) as |slice|}}
<ul>
<li style="display: none;"></li>
{{~#each items as |item index|~}}
{{~#each slice as |item index|~}}
<li
data-test-list-row
onclick={{action 'click'}}
@ -67,5 +68,22 @@
</li>
{{~/each~}}
</ul>
{{#if (and partial (gt items.length partial))}}
{{#let (not-eq slice.length items.length) as |more|}}
<button
class={{if more 'closed'}}
type="button"
onclick={{action (mut this.expand) more}}
>
{{#if more}}
View {{sub items.length slice.length}} more
{{else}}
View less
{{/if}}
</button>
{{/let}}
{{/if}}
{{/let}}
{{/if}}
</div>

View File

@ -0,0 +1,11 @@
@import './skin';
@import './layout';
.list-collection {
@extend %list-collection;
}
.list-collection-scroll-virtual {
@extend %list-collection-scroll-virtual;
}
%list-collection > button {
@extend %list-collection-partial-button;
}

View File

@ -0,0 +1,15 @@
%list-collection > ul > li,
%list-collection-scroll-virtual {
position: relative;
}
%list-collection-scroll-virtual {
height: 500px;
}
%list-collection-scroll-virtual > ul {
overflow-x: hidden !important;
}
%list-collection-partial-button {
width: 100%;
padding: 15px;
}

View File

@ -0,0 +1,15 @@
%list-collection > ul {
border-top: 1px solid;
border-color: var(--gray-200);
}
%list-collection-partial-button {
cursor: pointer;
background-color: var(--gray-050);
color: var(--blue-500);
}
%list-collection-partial-button::after {
@extend %with-chevron-up-mask, %as-pseudo;
}
%list-collection-partial-button.closed::after {
@extend %with-chevron-down-mask;
}

View File

@ -27,7 +27,6 @@
@import './components/empty-state';
@import './components/tabular-details';
@import './components/tabular-collection';
@import './components/list-collection';
@import './components/popover-select';
@import './components/tooltip-panel';
@import './components/menu-panel';
@ -52,6 +51,7 @@
@import 'consul-ui/components/tooltip';
@import 'consul-ui/components/notice';
@import 'consul-ui/components/modal-dialog';
@import 'consul-ui/components/list-collection';
@import 'consul-ui/components/filter-bar';
@import 'consul-ui/components/freetext-filter';
@import 'consul-ui/components/informed-action';

View File

@ -1,29 +0,0 @@
.list-collection {
@extend %list-collection;
}
.list-collection-scroll-virtual {
@extend %list-collection-scroll-virtual;
}
%list-collection-scroll-virtual {
height: 500px;
position: relative;
}
%list-collection > ul {
border-top: 1px solid $gray-200;
}
%list-collection > ul > li {
position: relative;
}
%list-collection-scroll-virtual > ul {
overflow-x: hidden !important;
}
%list-collection > ul > li:nth-child(2) .with-feedback p {
bottom: auto;
top: 24px;
}
%list-collection > ul > li:nth-child(2) p::after {
bottom: auto;
top: -10px !important;
border-bottom-width: 18px;
border-top-width: 0;
}