bitwarden-browser/apps/browser/src/tools/popup/send/send-groupings.component.html

<app-header>
  <div class="left" *ngIf="showLeftHeader">
    <app-pop-out></app-pop-out>
  </div>
  <h1 class="sr-only">{{ "send" | i18n }}</h1>
  <div class="search center">
    <input
      type="search"
      placeholder="{{ 'searchSends' | i18n }}"
      id="search"
      [(ngModel)]="searchText"
      (input)="search(200)"
      autocomplete="off"
      appAutofocus
    />
    <i class="bwi bwi-search"></i>
  </div>
  <div class="right">
    <button
      type="button"
      (click)="addSend()"
      appA11yTitle="{{ 'addSend' | i18n }}"
      [disabled]="disableSend"
    >
      <i class="bwi bwi-plus bwi-lg bwi-fw" aria-hidden="true"></i>
    </button>
  </div>
</app-header>
<main tabindex="-1" [ngClass]="{ flex: disableSend, 'tab-page': disableSend }">
  <app-callout type="warning" title="{{ 'sendDisabled' | i18n }}" *ngIf="disableSend">
    {{ "sendDisabledWarning" | i18n }}
  </app-callout>
  <div class="no-items" *ngIf="(!sends || !sends.length) && !showSearching() && !disableSend">
    <i class="bwi bwi-spinner bwi-spin bwi-3x" *ngIf="!loaded"></i>
    <ng-container *ngIf="loaded">
      <img class="no-items-image" aria-hidden="true" />
      <p>{{ "noItemsInList" | i18n }}</p>
      <button
        type="button"
        (click)="addSend()"
        class="btn block primary link"
        [disabled]="disableSend"
      >
        {{ "addSend" | i18n }}
      </button>
    </ng-container>
  </div>
  <ng-container *ngIf="sends && sends.length && !showSearching()">
    <div class="box list">
      <h2 class="box-header">
        {{ "types" | i18n }}
      </h2>
      <div class="box-content single-line">
        <button
          type="button"
          class="box-content-row"
          appStopClick
          (click)="selectType(sendType.Text)"
        >
          <div class="row-main">
            <div class="icon"><i class="bwi bwi-fw bwi-lg bwi-file-text"></i></div>
            <span class="text">{{ "sendTypeText" | i18n }}</span>
          </div>
          <span class="row-sub-label">{{ getSendCount(sends, sendType.Text) }}</span>
          <span><i class="bwi bwi-angle-right bwi-lg row-sub-icon"></i></span>
        </button>
        <button
          type="button"
          class="box-content-row"
          appStopClick
          (click)="selectType(sendType.File)"
        >
          <div class="row-main">
            <div class="icon"><i class="bwi bwi-fw bwi-lg bwi-file"></i></div>
            <span class="text">{{ "sendTypeFile" | i18n }}</span>
          </div>
          <span class="row-sub-label">{{ getSendCount(sends, sendType.File) }}</span>
          <span><i class="bwi bwi-angle-right bwi-lg row-sub-icon"></i></span>
        </button>
      </div>
    </div>
    <div class="box list">
      <h2 class="box-header">
        {{ "allSends" | i18n }}
        <div class="flex-right">{{ sends.length }}</div>
      </h2>
      <div class="box-content">
        <app-send-list
          [sends]="sends"
          title="{{ 'editItem' | i18n }}"
          [disabledByPolicy]="disableSend"
          (onSelected)="selectSend($event)"
          (onCopySendLink)="copy($event)"
          (onRemovePassword)="removePassword($event)"
          (onDeleteSend)="delete($event)"
        ></app-send-list>
      </div>
    </div>
  </ng-container>
  <ng-container *ngIf="showSearching()">
    <div class="no-items" *ngIf="!filteredSends || !filteredSends.length">
      <p>{{ "noItemsInList" | i18n }}</p>
    </div>
    <div class="box list full-list" *ngIf="filteredSends && filteredSends.length > 0">
      <div class="box-content">
        <app-send-list
          [sends]="filteredSends"
          title="{{ 'editItem' | i18n }}"
          [disabledByPolicy]="disableSend"
          (onSelected)="selectSend($event)"
          (onCopySendLink)="copy($event)"
          (onRemovePassword)="removePassword($event)"
          (onDeleteSend)="delete($event)"
        >
        </app-send-list>
      </div>
    </div>
  </ng-container>
</main>