expand/collapse groupings
This commit is contained in:
parent
553d1bfc5c
commit
af5788c9da
|
@ -48,13 +48,17 @@
|
|||
<li *ngFor="let f of folders"
|
||||
[ngClass]="{active: selectedFolder && f.node.id === selectedFolderId}">
|
||||
<a href="#" appStopClick appBlurClick (click)="selectFolder(f.node)">
|
||||
<i class="fa-li fa fa-caret-right"></i> {{f.node.name}}
|
||||
<i class="fa-li fa" title="{{'toggleCollapse' | i18n}}"
|
||||
[ngClass]="{'fa-caret-right': isCollapsed(f.node),
|
||||
'fa-caret-down': !isCollapsed(f.node)}"
|
||||
(click)="collapse(f.node)" appStopProp></i>
|
||||
{{f.node.name}}
|
||||
<span appStopProp appStopClick (click)="editFolder(f.node)" title="{{'editFolder' | i18n}}"
|
||||
*ngIf="f.node.id">
|
||||
<i class="fa fa-pencil fa-fw"></i>
|
||||
</span>
|
||||
</a>
|
||||
<ul class="fa-ul" *ngIf="f.children.length">
|
||||
<ul class="fa-ul" *ngIf="f.children.length && !isCollapsed(f.node)">
|
||||
<ng-container
|
||||
*ngTemplateOutlet="recursiveFolders; context:{ $implicit: f.children }"></ng-container>
|
||||
</ul>
|
||||
|
@ -69,9 +73,13 @@
|
|||
<ng-template #recursiveCollections let-collections>
|
||||
<li *ngFor="let c of collections" [ngClass]="{active: c.node.id === selectedCollectionId}">
|
||||
<a href="#" appStopClick appBlurClick (click)="selectCollection(c.node)">
|
||||
<i class="fa-li fa fa-caret-right"></i> {{c.node.name}}
|
||||
<i class="fa-li fa" title="{{'toggleCollapse' | i18n}}"
|
||||
[ngClass]="{'fa-caret-right': isCollapsed(c.node),
|
||||
'fa-caret-down': !isCollapsed(c.node)}"
|
||||
(click)="collapse(c.node)" appStopProp></i>
|
||||
{{c.node.name}}
|
||||
</a>
|
||||
<ul class="fa-ul" *ngIf="c.children.length">
|
||||
<ul class="fa-ul" *ngIf="c.children.length && !isCollapsed(c.node)">
|
||||
<ng-container
|
||||
*ngTemplateOutlet="recursiveCollections; context:{ $implicit: c.children }">
|
||||
</ng-container>
|
||||
|
|
|
@ -112,6 +112,10 @@
|
|||
"toggleVisibility": {
|
||||
"message": "Toggle Visibility"
|
||||
},
|
||||
"toggleCollapse": {
|
||||
"message": "Toggle Collapse",
|
||||
"description": "Toggling an expand/collapse state."
|
||||
},
|
||||
"cardholderName": {
|
||||
"message": "Cardholder Name"
|
||||
},
|
||||
|
|
|
@ -76,6 +76,7 @@
|
|||
|
||||
.fa-li {
|
||||
top: 8px;
|
||||
width: 1.1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -89,11 +90,11 @@
|
|||
}
|
||||
|
||||
.fa-li {
|
||||
left: -11px;
|
||||
left: -4px;
|
||||
}
|
||||
|
||||
&.active > a .fa-li {
|
||||
left: 4px;
|
||||
left: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -104,11 +105,11 @@
|
|||
}
|
||||
|
||||
.fa-li {
|
||||
left: 0;
|
||||
left: 7px;
|
||||
}
|
||||
|
||||
&.active > a .fa-li {
|
||||
left: 15px;
|
||||
left: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -119,11 +120,11 @@
|
|||
}
|
||||
|
||||
.fa-li {
|
||||
left: 11px;
|
||||
left: 18px;
|
||||
}
|
||||
|
||||
&.active > a .fa-li {
|
||||
left: 26px;
|
||||
left: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -134,11 +135,11 @@
|
|||
}
|
||||
|
||||
.fa-li {
|
||||
left: 22px;
|
||||
left: 29px;
|
||||
}
|
||||
|
||||
&.active > a .fa-li {
|
||||
left: 37px;
|
||||
left: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -149,11 +150,11 @@
|
|||
}
|
||||
|
||||
.fa-li {
|
||||
left: 33px;
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
&.active > a .fa-li {
|
||||
left: 48px;
|
||||
left: 55px;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -164,11 +165,11 @@
|
|||
}
|
||||
|
||||
.fa-li {
|
||||
left: 44px;
|
||||
left: 51px;
|
||||
}
|
||||
|
||||
&.active > a .fa-li {
|
||||
left: 59px;
|
||||
left: 66px;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -179,11 +180,11 @@
|
|||
}
|
||||
|
||||
.fa-li {
|
||||
left: 55px;
|
||||
left: 62px;
|
||||
}
|
||||
|
||||
&.active > a .fa-li {
|
||||
left: 70px;
|
||||
left: 77px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue