Upstream/bitwarden-desktop
1
0
Fork 0
mirror of https://github.com/bitwarden/desktop.git synced 2024-11-24 11:55:50 +01:00
Code Issues Projects Releases Wiki Activity

expand/collapse groupings

Browse Source
This commit is contained in:
Kyle Spearrin 2018-11-09 23:03:43 -05:00
parent 553d1bfc5c
commit af5788c9da
3 changed files with 31 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/app/vault/groupings.component.html
View File

@ -48,13 +48,17 @@
<li *ngFor="let f of folders" <li *ngFor="let f of folders"
[ngClass]="{active: selectedFolder && f.node.id === selectedFolderId}"> [ngClass]="{active: selectedFolder && f.node.id === selectedFolderId}">
<a href="#" appStopClick appBlurClick (click)="selectFolder(f.node)"> <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}}" <span appStopProp appStopClick (click)="editFolder(f.node)" title="{{'editFolder' | i18n}}"
*ngIf="f.node.id"> *ngIf="f.node.id">
<i class="fa fa-pencil fa-fw"></i> <i class="fa fa-pencil fa-fw"></i>
</span> </span>
</a> </a>
<ul class="fa-ul" *ngIf="f.children.length"> <ul class="fa-ul" *ngIf="f.children.length && !isCollapsed(f.node)">
<ng-container <ng-container
*ngTemplateOutlet="recursiveFolders; context:{ $implicit: f.children }"></ng-container> *ngTemplateOutlet="recursiveFolders; context:{ $implicit: f.children }"></ng-container>
</ul> </ul>
@ -69,9 +73,13 @@
<ng-template #recursiveCollections let-collections> <ng-template #recursiveCollections let-collections>
<li *ngFor="let c of collections" [ngClass]="{active: c.node.id === selectedCollectionId}"> <li *ngFor="let c of collections" [ngClass]="{active: c.node.id === selectedCollectionId}">
<a href="#" appStopClick appBlurClick (click)="selectCollection(c.node)"> <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> </a>
<ul class="fa-ul" *ngIf="c.children.length"> <ul class="fa-ul" *ngIf="c.children.length && !isCollapsed(c.node)">
<ng-container <ng-container
*ngTemplateOutlet="recursiveCollections; context:{ $implicit: c.children }"> *ngTemplateOutlet="recursiveCollections; context:{ $implicit: c.children }">
</ng-container> </ng-container>

4
src/locales/en/messages.json
View File

@ -112,6 +112,10 @@
"toggleVisibility": { "toggleVisibility": {
"message": "Toggle Visibility" "message": "Toggle Visibility"
}, },
"toggleCollapse": {
"message": "Toggle Collapse",
"description": "Toggling an expand/collapse state."
},
"cardholderName": { "cardholderName": {
"message": "Cardholder Name" "message": "Cardholder Name"
}, },

29
src/scss/vault.scss
View File

@ -76,6 +76,7 @@
.fa-li { .fa-li {
top: 8px; top: 8px;
width: 1.1em;
} }
} }
} }
@ -89,11 +90,11 @@
} }
.fa-li { .fa-li {
left: -11px; left: -4px;
} }
&.active > a .fa-li { &.active > a .fa-li {
left: 4px; left: 11px;
} }
} }
@ -104,11 +105,11 @@
} }
.fa-li { .fa-li {
left: 0; left: 7px;
} }
&.active > a .fa-li { &.active > a .fa-li {
left: 15px; left: 22px;
} }
} }
@ -119,11 +120,11 @@
} }
.fa-li { .fa-li {
left: 11px; left: 18px;
} }
&.active > a .fa-li { &.active > a .fa-li {
left: 26px; left: 33px;
} }
} }
@ -134,11 +135,11 @@
} }
.fa-li { .fa-li {
left: 22px; left: 29px;
} }
&.active > a .fa-li { &.active > a .fa-li {
left: 37px; left: 44px;
} }
} }
@ -149,11 +150,11 @@
} }
.fa-li { .fa-li {
left: 33px; left: 40px;
} }
&.active > a .fa-li { &.active > a .fa-li {
left: 48px; left: 55px;
} }
} }
@ -164,11 +165,11 @@
} }
.fa-li { .fa-li {
left: 44px; left: 51px;
} }
&.active > a .fa-li { &.active > a .fa-li {
left: 59px; left: 66px;
} }
} }
@ -179,11 +180,11 @@
} }
.fa-li { .fa-li {
left: 55px; left: 62px;
} }
&.active > a .fa-li { &.active > a .fa-li {
left: 70px; left: 77px;
} }
} }
} }