111 lines
3.7 KiB
HTML
111 lines
3.7 KiB
HTML
<header>
|
|
<div class="left">
|
|
<button type="button" appBlurClick (click)="back()">
|
|
<span class="header-icon"><i class="bwi bwi-angle-left" aria-hidden="true"></i></span>
|
|
<span>{{ "back" | i18n }}</span>
|
|
</button>
|
|
</div>
|
|
<h1 class="sr-only">{{ "myVault" | i18n }}</h1>
|
|
<div class="search">
|
|
<input
|
|
type="{{ searchTypeSearch ? 'search' : 'text' }}"
|
|
placeholder="{{ searchPlaceholder || ('searchVault' | i18n) }}"
|
|
id="search"
|
|
[(ngModel)]="searchText"
|
|
(input)="search(200)"
|
|
autocomplete="off"
|
|
appAutofocus
|
|
/>
|
|
<i class="bwi bwi-search" aria-hidden="true"></i>
|
|
</div>
|
|
<div class="right">
|
|
<button type="button" appBlurClick (click)="addCipher()" appA11yTitle="{{ 'addItem' | i18n }}">
|
|
<i class="bwi bwi-plus bwi-lg bwi-fw" aria-hidden="true"></i>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
<content [ngClass]="{ 'stacked-boxes': showGroupings() }">
|
|
<ng-container *ngIf="showGroupings()">
|
|
<div class="box list" *ngIf="nestedFolders && nestedFolders.length">
|
|
<h2 class="box-header">
|
|
{{ "folders" | i18n }}
|
|
</h2>
|
|
<div class="box-content single-line">
|
|
<button
|
|
type="button"
|
|
*ngFor="let f of nestedFolders"
|
|
class="box-content-row"
|
|
appStopClick
|
|
appBlurClick
|
|
(click)="selectFolder(f.node)"
|
|
>
|
|
<div class="row-main">
|
|
<div class="icon">
|
|
<i class="bwi bwi-fw bwi-lg bwi-folder" aria-hidden="true"></i>
|
|
</div>
|
|
<span class="text">{{ f.node.name }}</span>
|
|
</div>
|
|
<span><i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="box list" *ngIf="nestedCollections && nestedCollections.length">
|
|
<h2 class="box-header">
|
|
{{ "collections" | i18n }}
|
|
</h2>
|
|
<div class="box-content single-line">
|
|
<button
|
|
type="button"
|
|
*ngFor="let c of nestedCollections"
|
|
class="box-content-row"
|
|
appStopClick
|
|
appBlurClick
|
|
(click)="selectCollection(c.node)"
|
|
>
|
|
<div class="row-main">
|
|
<div class="icon">
|
|
<i class="bwi bwi-fw bwi-lg bwi-collection" aria-hidden="true"></i>
|
|
</div>
|
|
<span class="text">{{ c.node.name }}</span>
|
|
</div>
|
|
<span><i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</ng-container>
|
|
<ng-container *ngIf="ciphers">
|
|
<div class="no-items" *ngIf="!ciphers.length">
|
|
<i class="bwi bwi-spinner bwi-spin bwi-3x" *ngIf="!loaded" aria-hidden="true"></i>
|
|
<ng-container *ngIf="loaded">
|
|
<p>{{ "noItemsInList" | i18n }}</p>
|
|
<button type="button" (click)="addCipher()" class="btn block primary link">
|
|
{{ "addItem" | i18n }}
|
|
</button>
|
|
</ng-container>
|
|
</div>
|
|
<cdk-virtual-scroll-viewport
|
|
itemSize="46"
|
|
minBufferPx="400"
|
|
maxBufferPx="600"
|
|
*ngIf="ciphers.length"
|
|
#virtualScrollViewport
|
|
>
|
|
<div class="box list only-list">
|
|
<h2 class="box-header">
|
|
{{ groupingTitle }}
|
|
<span class="flex-right">{{ isSearching() ? ciphers.length : ciphers.length }}</span>
|
|
</h2>
|
|
<div class="box-content">
|
|
<app-cipher-row
|
|
*cdkVirtualFor="let c of ciphers"
|
|
[cipher]="c"
|
|
title="{{ 'viewItem' | i18n }}"
|
|
(onSelected)="selectCipher($event)"
|
|
(launchEvent)="launchCipher($event)"
|
|
></app-cipher-row>
|
|
</div>
|
|
</div>
|
|
</cdk-virtual-scroll-viewport>
|
|
</ng-container>
|
|
</content>
|