2018-01-24 04:21:14 +01:00
|
|
|
<div class="content">
|
|
|
|
<div class="inner-content">
|
2019-04-02 14:43:28 +02:00
|
|
|
<h2 class="sr-only">{{'filters' | i18n}}</h2>
|
2018-01-24 04:21:14 +01:00
|
|
|
<ul>
|
2018-01-27 14:52:39 +01:00
|
|
|
<li [ngClass]="{active: selectedAll}">
|
2018-04-05 15:11:56 +02:00
|
|
|
<a href="#" appStopClick appBlurClick (click)="selectAll()">
|
2019-04-02 05:08:54 +02:00
|
|
|
<i class="fa fa-fw fa-th" aria-hidden="true"></i> {{'allItems' | i18n}}
|
2018-01-27 05:32:03 +01:00
|
|
|
</a>
|
|
|
|
</li>
|
2018-01-27 14:52:39 +01:00
|
|
|
<li [ngClass]="{active: selectedFavorites}">
|
2018-04-05 15:11:56 +02:00
|
|
|
<a href="#" appStopClick appBlurClick (click)="selectFavorites()">
|
2019-04-02 05:08:54 +02:00
|
|
|
<i class="fa fa-fw fa-star" aria-hidden="true"></i> {{'favorites' | i18n}}
|
2018-01-27 05:32:03 +01:00
|
|
|
</a>
|
|
|
|
</li>
|
2018-01-24 04:21:14 +01:00
|
|
|
</ul>
|
2018-01-27 20:43:29 +01:00
|
|
|
<h2>{{'types' | i18n}}</h2>
|
2018-01-24 04:21:14 +01:00
|
|
|
<ul>
|
2018-01-27 14:52:39 +01:00
|
|
|
<li [ngClass]="{active: selectedType === cipherType.Login}">
|
2018-04-05 15:11:56 +02:00
|
|
|
<a href="#" appStopClick appBlurClick (click)="selectType(cipherType.Login)">
|
2019-04-02 05:08:54 +02:00
|
|
|
<i class="fa fa-fw fa-globe" aria-hidden="true"></i> {{'typeLogin' | i18n}}
|
2018-01-27 05:32:03 +01:00
|
|
|
</a>
|
|
|
|
</li>
|
2018-01-27 14:52:39 +01:00
|
|
|
<li [ngClass]="{active: selectedType === cipherType.Card}">
|
2018-04-05 15:11:56 +02:00
|
|
|
<a href="#" appStopClick appBlurClick (click)="selectType(cipherType.Card)">
|
2019-04-02 05:08:54 +02:00
|
|
|
<i class="fa fa-fw fa-credit-card" aria-hidden="true"></i> {{'typeCard' | i18n}}
|
2018-01-27 05:32:03 +01:00
|
|
|
</a>
|
|
|
|
</li>
|
2018-01-27 14:52:39 +01:00
|
|
|
<li [ngClass]="{active: selectedType === cipherType.Identity}">
|
2018-04-05 15:11:56 +02:00
|
|
|
<a href="#" appStopClick appBlurClick (click)="selectType(cipherType.Identity)">
|
2019-04-02 05:08:54 +02:00
|
|
|
<i class="fa fa-fw fa-id-card-o" aria-hidden="true"></i> {{'typeIdentity' | i18n}}
|
2018-01-27 05:32:03 +01:00
|
|
|
</a>
|
|
|
|
</li>
|
2018-01-27 14:52:39 +01:00
|
|
|
<li [ngClass]="{active: selectedType === cipherType.SecureNote}">
|
2018-04-05 15:11:56 +02:00
|
|
|
<a href="#" appStopClick appBlurClick (click)="selectType(cipherType.SecureNote)">
|
2019-04-02 05:08:54 +02:00
|
|
|
<i class="fa fa-fw fa-sticky-note-o" aria-hidden="true"></i> {{'typeSecureNote' | i18n}}
|
2018-01-27 05:32:03 +01:00
|
|
|
</a>
|
2018-01-24 04:21:14 +01:00
|
|
|
</li>
|
|
|
|
</ul>
|
2018-02-09 17:18:37 +01:00
|
|
|
<p *ngIf="!loaded" class="text-muted">{{'loading' | i18n}}</p>
|
|
|
|
<ng-container *ngIf="loaded">
|
2019-04-02 14:43:28 +02:00
|
|
|
<div class="heading">
|
|
|
|
<h2>{{'folders' | i18n}}</h2>
|
2019-04-02 04:43:42 +02:00
|
|
|
<button appBlurClick (click)="addFolder()" appA11yTitle="{{'addFolder' | i18n}}">
|
2019-04-02 04:56:28 +02:00
|
|
|
<i class="fa fa-plus fa-fw" aria-hidden="true"></i>
|
2018-02-09 17:18:37 +01:00
|
|
|
</button>
|
2019-04-02 14:43:28 +02:00
|
|
|
</div>
|
2018-01-27 05:32:03 +01:00
|
|
|
<ul class="fa-ul">
|
2018-10-26 05:04:14 +02:00
|
|
|
<ng-template #recursiveFolders let-folders>
|
2019-02-21 22:53:32 +01:00
|
|
|
<li *ngFor="let f of folders"
|
2018-10-26 05:04:14 +02:00
|
|
|
[ngClass]="{active: selectedFolder && f.node.id === selectedFolderId}">
|
|
|
|
<a href="#" appStopClick appBlurClick (click)="selectFolder(f.node)">
|
2019-04-02 04:56:28 +02:00
|
|
|
<i class="fa-li fa" title="{{'toggleCollapse' | i18n}}" aria-hidden="true"
|
2019-04-02 04:43:42 +02:00
|
|
|
[ngClass]="{'fa-caret-right': isCollapsed(f.node), 'fa-caret-down': !isCollapsed(f.node)}"
|
|
|
|
(click)="collapse(f.node)" appStopProp></i>
|
2018-11-10 05:03:43 +01:00
|
|
|
{{f.node.name}}
|
2019-04-02 04:43:42 +02:00
|
|
|
<span appStopProp appStopClick (click)="editFolder(f.node)"
|
|
|
|
appA11yTitle="{{'editFolder' | i18n}}" *ngIf="f.node.id">
|
2019-04-02 04:56:28 +02:00
|
|
|
<i class="fa fa-pencil fa-fw" aria-hidden="true"></i>
|
2018-10-26 05:04:14 +02:00
|
|
|
</span>
|
|
|
|
</a>
|
2018-11-10 05:03:43 +01:00
|
|
|
<ul class="fa-ul" *ngIf="f.children.length && !isCollapsed(f.node)">
|
2019-02-21 22:53:32 +01:00
|
|
|
<ng-container *ngTemplateOutlet="recursiveFolders; context:{ $implicit: f.children }">
|
|
|
|
</ng-container>
|
2018-10-26 05:04:14 +02:00
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
</ng-template>
|
2019-02-21 22:53:32 +01:00
|
|
|
<ng-container *ngTemplateOutlet="recursiveFolders; context:{ $implicit: nestedFolders }"></ng-container>
|
2018-01-27 05:32:03 +01:00
|
|
|
</ul>
|
2018-02-09 17:18:37 +01:00
|
|
|
<div *ngIf="collections && collections.length">
|
|
|
|
<h2>{{'collections' | i18n}}</h2>
|
|
|
|
<ul class="fa-ul">
|
2018-10-26 05:04:14 +02:00
|
|
|
<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)">
|
2019-04-02 04:56:28 +02:00
|
|
|
<i class="fa-li fa" title="{{'toggleCollapse' | i18n}}" aria-hidden="true"
|
2019-04-02 04:43:42 +02:00
|
|
|
[ngClass]="{'fa-caret-right': isCollapsed(c.node), 'fa-caret-down': !isCollapsed(c.node)}"
|
|
|
|
(click)="collapse(c.node)" appStopProp></i>
|
2018-11-10 05:03:43 +01:00
|
|
|
{{c.node.name}}
|
2018-10-26 05:04:14 +02:00
|
|
|
</a>
|
2018-11-10 05:03:43 +01:00
|
|
|
<ul class="fa-ul" *ngIf="c.children.length && !isCollapsed(c.node)">
|
2018-10-26 05:04:14 +02:00
|
|
|
<ng-container
|
|
|
|
*ngTemplateOutlet="recursiveCollections; context:{ $implicit: c.children }">
|
|
|
|
</ng-container>
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
</ng-template>
|
2019-02-21 22:53:32 +01:00
|
|
|
<ng-container *ngTemplateOutlet="recursiveCollections; context:{ $implicit: nestedCollections }">
|
2018-10-26 05:04:14 +02:00
|
|
|
</ng-container>
|
2018-02-09 17:18:37 +01:00
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</ng-container>
|
2018-01-24 04:21:14 +01:00
|
|
|
</div>
|
|
|
|
</div>
|