Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-09-18 02:41:15 +02:00
Code Issues Projects Releases Wiki Activity

display nested folders

Browse Source
This commit is contained in:
Kyle Spearrin 2018-10-25 09:38:52 -04:00
parent 8da1bb13ff
commit 1390d7eb1d
4 changed files with 28 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
jslib

@ -1 +1 @@
Subproject commit 4165a78277048d7b37319e63bd7e6473cbba5156 Subproject commit 6aba4550a4b1e643528392d6305df00977046232

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

@ -3,8 +3,8 @@
{{'filters' | i18n}} {{'filters' | i18n}}
</div> </div>
<div class="card-body"> <div class="card-body">
<input type="search" placeholder="{{searchPlaceholder || ('searchVault' | i18n)}}" id="search" class="form-control" [(ngModel)]="searchText" <input type="search" placeholder="{{searchPlaceholder || ('searchVault' | i18n)}}" id="search" class="form-control"
(input)="searchTextChanged()" appAutofocus> [(ngModel)]="searchText" (input)="searchTextChanged()" appAutofocus>
<ul class="fa-ul card-ul"> <ul class="fa-ul card-ul">
<li [ngClass]="{active: selectedAll}"> <li [ngClass]="{active: selectedAll}">
<a href="#" appStopClick (click)="selectAll()"> <a href="#" appStopClick (click)="selectAll()">
@ -52,13 +52,22 @@
</a> </a>
</h3> </h3>
<ul class="fa-ul card-ul carets"> <ul class="fa-ul card-ul carets">
<li *ngFor="let f of folders" class="d-flex" [ngClass]="{active: selectedFolder && f.id === selectedFolderId}"> <ng-template #recursiveList let-folders>
<a href="#" appStopClick (click)="selectFolder(f)"> <li *ngFor="let f of folders" [ngClass]="{active: selectedFolder && f.node.id === selectedFolderId}">
<i class="fa-li fa fa-caret-right"></i> {{f.name}}</a> <div class="d-flex">
<a href="#" class="text-muted ml-auto show-active" appStopClick (click)="editFolder(f)" title="{{'editFolder' | i18n}}" *ngIf="f.id"> <a href="#" appStopClick (click)="selectFolder(f.node)">
<i class="fa fa-pencil fa-fw"></i> <i class="fa-li fa fa-caret-right"></i> {{f.node.name}}</a>
</a> <a href="#" class="text-muted ml-auto show-active" appStopClick (click)="editFolder(f.node)"
</li> title="{{'editFolder' | i18n}}" *ngIf="f.node.id">
<i class="fa fa-pencil fa-fw"></i>
</a>
</div>
<ul class="fa-ul card-ul carets" *ngIf="f.children.length">
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: f.children }"></ng-container>
</ul>
</li>
</ng-template>
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: nestedFolders }"></ng-container>
</ul> </ul>
</ng-container> </ng-container>
<ng-container *ngIf="showCollections && collections && collections.length"> <ng-container *ngIf="showCollections && collections && collections.length">

1
src/app/vault/groupings.component.ts
View File

@ -21,6 +21,7 @@ export class GroupingsComponent extends BaseGroupingsComponent {
constructor(collectionService: CollectionService, folderService: FolderService) { constructor(collectionService: CollectionService, folderService: FolderService) {
super(collectionService, folderService); super(collectionService, folderService);
this.loadNestedFolder = true;
} }
searchTextChanged() { searchTextChanged() {

10
src/scss/styles.scss
View File

@ -207,6 +207,12 @@ input, select, textarea {
left: -24px; left: -24px;
} }
} }
ul {
&.carets {
margin-left: 0.85em;
}
}
} }
.modal-dialog { .modal-dialog {
@ -419,13 +425,13 @@ app-vault-groupings, app-org-vault-groupings {
} }
li.active { li.active {
.show-active { > .show-active, > div .show-active {
display: inline; display: inline;
} }
} }
li.active { li.active {
a:first-child { > a:first-child, > div a:first-child {
font-weight: bold; font-weight: bold;
color: theme-color("primary"); color: theme-color("primary");
} }