bitwarden-estensione-browser/src/popup/vault/groupings.component.html

<header>
    <div class="left" *ngIf="showLeftHeader">
        <app-pop-out></app-pop-out>
    </div>
    <div class="search">
        <input type="search" placeholder="{{'searchVault' | i18n}}" id="search" [(ngModel)]="searchText"
            (input)="search(200)" appAutofocus>
        <i class="fa fa-search"></i>
    </div>
    <div class="right">
        <button appBlurClick (click)="addCipher()" title="{{'addItem' | i18n}}">
            <i class="fa fa-plus fa-lg fa-fw"></i>
        </button>
    </div>
</header>
<content>
    <div class="no-items" *ngIf="(!ciphers || !ciphers.length) && !showSearching()">
        <i class="fa fa-spinner fa-spin fa-3x" *ngIf="!loaded"></i>
        <ng-container *ngIf="loaded">
            <i class="fa fa-frown-o fa-4x"></i>
            <p>{{'noItemsInList' | i18n}}</p>
            <button (click)="addCipher()" class="btn block primary link">{{'addItem' | i18n}}</button>
        </ng-container>
    </div>
    <ng-container *ngIf="ciphers && ciphers.length && !showSearching()">
        <div class="box list" *ngIf="favoriteCiphers">
            <div class="box-header">
                {{'favorites' | i18n}}
                <span class="flex-right">{{favoriteCiphers.length}}</span>
            </div>
            <div class="box-content">
                <app-ciphers-list [ciphers]="favoriteCiphers" title="{{'viewItem' | i18n}}"
                    (onSelected)="selectCipher($event)" (onDoubleSelected)="launchCipher($event)"></app-ciphers-list>
            </div>
        </div>
        <div class="box list">
            <div class="box-header">
                {{'types' | i18n}}
                <span class="flex-right">4</span>
            </div>
            <div class="box-content single-line">
                <a href="#" class="box-content-row" appStopClick appBlurClick (click)="selectType(cipherType.Login)">
                    <div class="row-main">
                        <div class="icon"><i class="fa fa-fw fa-lg fa-globe"></i></div>
                        <span class="text">{{'typeLogin' | i18n}}</span>
                    </div>
                    <span class="row-sub-label">{{typeCounts.get(cipherType.Login) || 0}}</span>
                    <span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
                </a>
                <a href="#" class="box-content-row" appStopClick appBlurClick (click)="selectType(cipherType.Card)">
                    <div class="row-main">
                        <div class="icon"><i class="fa fa-fw fa-lg fa-credit-card"></i></div>
                        <span class="text">{{'typeCard' | i18n}}</span>
                    </div>
                    <span class="row-sub-label">{{typeCounts.get(cipherType.Card) || 0}}</span>
                    <span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
                </a>
                <a href="#" class="box-content-row" appStopClick appBlurClick (click)="selectType(cipherType.Identity)">
                    <div class="row-main">
                        <div class="icon"><i class="fa fa-fw fa-lg fa-id-card-o"></i></div>
                        <span class="text">{{'typeIdentity' | i18n}}</span>
                    </div>
                    <span class="row-sub-label">{{typeCounts.get(cipherType.Identity) || 0}}</span>
                    <span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
                </a>
                <a href="#" class="box-content-row" appStopClick appBlurClick
                    (click)="selectType(cipherType.SecureNote)">
                    <div class="row-main">
                        <div class="icon"><i class="fa fa-fw fa-lg fa-sticky-note-o"></i></div>
                        <span class="text">{{'typeSecureNote' | i18n}}</span>
                    </div>
                    <span class="row-sub-label">{{typeCounts.get(cipherType.SecureNote) || 0}}</span>
                    <span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
                </a>
            </div>
        </div>
        <div class="box list" *ngIf="nestedFolders && nestedFolders.length">
            <div class="box-header">
                {{'folders' | i18n}}
                <span class="flex-right">{{folderCount}}</span>
            </div>
            <div class="box-content single-line">
                <a *ngFor="let f of nestedFolders" href="#" class="box-content-row" appStopClick appBlurClick
                    (click)="selectFolder(f.node)">
                    <div class="row-main">
                        <div class="icon">
                            <i class="fa fa-fw fa-lg"
                                [ngClass]="{'fa-folder-open': f.node.id, 'fa-folder-open-o': !f.node.id}"></i>
                        </div>
                        <span class="text">{{f.node.name}}</span>
                    </div>
                    <span class="row-sub-label">{{folderCounts.get(f.node.id) || 0}}</span>
                    <span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
                </a>
            </div>
        </div>
        <div class="box list" *ngIf="nestedCollections && nestedCollections.length">
            <div class="box-header">
                {{'collections' | i18n}}
                <span class="flex-right">{{nestedCollections.length}}</span>
            </div>
            <div class="box-content single-line">
                <a *ngFor="let c of nestedCollections" href="#" class="box-content-row" appStopClick appBlurClick
                    (click)="selectCollection(c.node)">
                    <div class="row-main">
                        <div class="icon"><i class="fa fa-fw fa-lg fa-cube"></i></div>
                        <span class="text">{{c.node.name}}</span>
                    </div>
                    <span class="row-sub-label">{{collectionCounts.get(c.node.id) || 0}}</span>
                    <span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
                </a>
            </div>
        </div>
        <div class="box list" *ngIf="showNoFolderCiphers">
            <div class="box-header">
                {{'noneFolder' | i18n}}
                <div class="flex-right">{{noFolderCiphers.length}}</div>
            </div>
            <div class="box-content">
                <app-ciphers-list [ciphers]="noFolderCiphers" title="{{'viewItem' | i18n}}"
                    (onSelected)="selectCipher($event)" (onDoubleSelected)="launchCipher($event)"></app-ciphers-list>
            </div>
        </div>
    </ng-container>
    <ng-container *ngIf="showSearching()">
        <div class="no-items" *ngIf="!ciphers || !ciphers.length">
            <p>{{'noItemsInList' | i18n}}</p>
        </div>
        <div class="box list full-list" *ngIf="ciphers && ciphers.length > 0">
            <div class="box-content">
                <app-ciphers-list [ciphers]="ciphers" title="{{'viewItem' | i18n}}" (onSelected)="selectCipher($event)"
                    (onDoubleSelected)="launchCipher($event)"></app-ciphers-list>
            </div>
        </div>
    </ng-container>
</content>