Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-23 11:56:00 +01:00
Code Issues Projects Releases Wiki Activity

nested folders and collections

Browse Source
This commit is contained in:
Kyle Spearrin 2018-10-25 23:04:14 -04:00
parent 9db980f96a
commit 4da8a4d176
4 changed files with 154 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
jslib

@ -1 +1 @@
Subproject commit 4165a78277048d7b37319e63bd7e6473cbba5156
Subproject commit b0eea9d7cefdc5453750f49985689fefa1fa53a5

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

@ -44,24 +44,43 @@
</button>
</h2>
<ul class="fa-ul">
<li *ngFor="let f of folders" [ngClass]="{active: selectedFolder && f.id === selectedFolderId}">
<a href="#" appStopClick appBlurClick (click)="selectFolder(f)">
<i class="fa-li fa fa-caret-right"></i> {{f.name}}
<span appStopProp appStopClick (click)="editFolder(f)" title="{{'editFolder' | i18n}}"
*ngIf="f.id">
<i class="fa fa-pencil fa-fw"></i>
</span>
</a>
</li>
<ng-template #recursiveFolders let-folders>
<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}}
<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">
<ng-container
*ngTemplateOutlet="recursiveFolders; context:{ $implicit: f.children }"></ng-container>
</ul>
</li>
</ng-template>
<ng-container
*ngTemplateOutlet="recursiveFolders; context:{ $implicit: nestedFolders }"></ng-container>
</ul>
<div *ngIf="collections && collections.length">
<h2>{{'collections' | i18n}}</h2>
<ul class="fa-ul">
<li *ngFor="let c of collections" [ngClass]="{active: c.id === selectedCollectionId}">
<a href="#" appStopClick appBlurClick (click)="selectCollection(c)">
<i class="fa-li fa fa-caret-right"></i> {{c.name}}
</a>
</li>
<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}}
</a>
<ul class="fa-ul" *ngIf="c.children.length">
<ng-container
*ngTemplateOutlet="recursiveCollections; context:{ $implicit: c.children }">
</ng-container>
</ul>
</li>
</ng-template>
<ng-container
*ngTemplateOutlet="recursiveCollections; context:{ $implicit: nestedCollections }">
</ng-container>
</ul>
</div>
</ng-container>

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

@ -12,5 +12,7 @@ import { GroupingsComponent as BaseGroupingsComponent } from 'jslib/angular/comp
export class GroupingsComponent extends BaseGroupingsComponent {
constructor(collectionService: CollectionService, folderService: FolderService) {
super(collectionService, folderService);
this.loadNestedCollections = true;
this.loadNestedFolders = true;
}
}

122
src/scss/vault.scss
View File

@ -27,6 +27,10 @@
.inner-content {
padding-bottom: 0;
padding-right: 5px;
> ul {
margin: 0 0 15px 0;
}
}
h2 {
@ -71,23 +75,122 @@
word-break: break-all;
.fa-li {
left: -11px;
top: 8px;
}
}
}
a {
// Nested indentions
ul.fa-ul {
// Level 1
li {
> a {
padding-left: 12px;
}
&.active .fa-li {
.fa-li {
left: -11px;
}
&.active > a .fa-li {
left: 4px;
}
}
// Level 2
ul li {
> a {
padding-left: 23px;
}
.fa-li {
left: 0;
}
&.active > a .fa-li {
left: 15px;
}
}
// Level 3
ul ul li {
> a {
padding-left: 34px;
}
.fa-li {
left: 11px;
}
&.active > a .fa-li {
left: 26px;
}
}
// Level 4
ul ul ul li {
> a {
padding-left: 45px;
}
.fa-li {
left: 22px;
}
&.active > a .fa-li {
left: 37px;
}
}
// Level 5
ul ul ul ul li {
> a {
padding-left: 56px;
}
.fa-li {
left: 33px;
}
&.active > a .fa-li {
left: 48px;
}
}
// Level 6
ul ul ul ul ul li {
> a {
padding-left: 67px;
}
.fa-li {
left: 44px;
}
&.active > a .fa-li {
left: 59px;
}
}
// Level 7
ul ul ul ul ul ul li {
> a {
padding-left: 78px;
}
.fa-li {
left: 55px;
}
&.active > a .fa-li {
left: 70px;
}
}
}
ul {
padding: 0;
margin: 0 0 15px 0;
margin: 0;
li {
a {
@ -130,6 +233,17 @@
@include themify($themes) {
background-color: themed('groupingsActiveColor');
}
ul {
@include themify($themes) {
background-color: themed('backgroundColorAlt');
}
margin-left: -15px;
margin-right: -5px;
padding-left: 15px;
padding-right: 5px;
}
}
}
}