blockchain/src/gui/qt-daemon/html_source/src/app/sidebar/sidebar.component.html

<div class="sidebar-accounts">
  <div class="sidebar-accounts-header">
    <h3>{{ 'SIDEBAR.TITLE' | translate }}</h3><button [routerLink]="['main']">{{ 'SIDEBAR.ADD_NEW' | translate }}</button>
  </div>
  <div class="sidebar-accounts-list scrolled-content">
    <div class="sidebar-account" *ngFor="let wallet of variablesService.wallets" [class.active]="wallet?.wallet_id === walletActive" [routerLink]="['/wallet/' + wallet.wallet_id + '/history']">
      <div class="sidebar-account-row account-title-balance">
        <span class="title" tooltip="{{ wallet.name }}" placement="top-left" tooltipClass="table-tooltip account-tooltip" [delay]="500" [showWhenNoOverflow]="false">{{wallet.name}}</span>
        <span class="balance">{{wallet.balance | intToMoney : '3' }} {{variablesService.defaultCurrency}}</span>
      </div>
      <div class="sidebar-account-row account-alias">
        <div class="name">
          <span tooltip="{{wallet.alias['name']}}" placement="top-left" tooltipClass="table-tooltip account-tooltip" [delay]="500" [showWhenNoOverflow]="false">{{wallet.alias['name']}}</span>
          <ng-container *ngIf="wallet.alias['comment'] && wallet.alias['comment'].length">
            <i class="icon comment" tooltip="{{wallet.alias['comment']}}" placement="top" tooltipClass="table-tooltip account-tooltip" [delay]="500"></i>
          </ng-container>
        </div>
        <span class="price">$ {{wallet.getMoneyEquivalent(variablesService.moneyEquivalent) | intToMoney | number : '1.2-2'}}</span>
      </div>
      <div class="sidebar-account-row account-staking" *ngIf="!(!wallet.loaded && variablesService.daemon_state === 2)">
        <span class="text">{{ 'SIDEBAR.ACCOUNT.STAKING' | translate }}</span>
        <app-staking-switch [wallet_id]="wallet.wallet_id" [(staking)]="wallet.staking"></app-staking-switch>
      </div>
      <div class="sidebar-account-row account-messages" *ngIf="!(!wallet.loaded && variablesService.daemon_state === 2)">
        <span class="text">{{ 'SIDEBAR.ACCOUNT.MESSAGES' | translate }}</span>
        <span class="indicator">{{wallet.new_contracts}}</span>
      </div>
      <div class="sidebar-account-row account-synchronization" *ngIf="!wallet.loaded && variablesService.daemon_state === 2">
        <span class="status">{{ 'SIDEBAR.ACCOUNT.SYNCING' | translate }}</span>
        <div class="progress-bar-container">
          <div class="progress-bar">
            <div class="fill" [style.width]="wallet.progress + '%'"></div>
          </div>
          <div class="progress-percent">{{ wallet.progress }}%</div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="sidebar-settings">
  <div class="wrap-button" routerLinkActive="active" *ngIf="variablesService.appPass === ''; else contactsShow" tooltip="{{ 'SIDEBAR.CONTACTS_TOOLTIP' | translate }}" placement="top" tooltipClass="table-tooltip account-tooltip" [delay]="500" [timeDelay]="500">
    <button (click)="contactsRoute()" [class.disabled]="variablesService.daemon_state !== 2 || variablesService.appPass === ''" 
      [disabled]="variablesService.daemon_state !== 2 || variablesService.appPass === ''">
      <i class="icon contacts"></i>
      <span>{{ 'SIDEBAR.CONTACTS' | translate }}</span>
    </button>
  </div>
  <ng-template #contactsShow>
    <div class="wrap-button" routerLinkActive="active">
      <button (click)="contactsRoute()" [class.disabled]="variablesService.daemon_state !== 2" [disabled]="variablesService.daemon_state !== 2"
        (mouseover)="menuItem = true"
        (mouseleave)="menuItem = false"
      >
        <i class="icon contacts" *ngIf="!menuItem; else svgContacts"></i>
        <ng-template #svgContacts>
          <div class="animated" [innerHTML]="contacts | safeHTML"></div>
        </ng-template>
        <span>{{ 'SIDEBAR.CONTACTS' | translate }}</span>
      </button>
    </div>
  </ng-template>
  <div class="wrap-button" routerLinkActive="active">
    <button [routerLink]="['/settings']"
      (mouseover)="menuItemHovered = true"
      (mouseleave)="menuItemHovered = false"
    >
      <i class="icon settings" *ngIf="!menuItemHovered; else svgSetting"></i>
      <ng-template #svgSetting>
        <div class="animated" [innerHTML]="settings | safeHTML"></div>
      </ng-template>
      <span>{{ 'SIDEBAR.SETTINGS' | translate }}</span>
    </button>
  </div>
  <div class="wrap-button" *ngIf="variablesService.appPass === ''; else masterPass" tooltip="{{ 'SIDEBAR.LOG_OUT_TOOLTIP' | translate }}" placement="bottom" tooltipClass="table-tooltip account-tooltip" [delay]="500" [timeDelay]="500">
    <button (click)="logOut()" [class.disabled]="variablesService.appPass === ''" [disabled]="variablesService.appPass === ''">
      <i class="icon logout"></i>
      <span>{{ 'SIDEBAR.LOG_OUT' | translate }}</span>
    </button>
  </div>
  <ng-template #masterPass>
    <div class="wrap-button">
      <button 
      (mouseover)="itemHovered = true"
      (mouseleave)="itemHovered = false"
      (click)="logOut()">
        <i class="icon logout" *ngIf="!itemHovered; else svgLogout"></i>
        <ng-template #svgLogout>
          <div class="animated" [innerHTML]="exit | safeHTML"></div>
        </ng-template>
        
        <span>{{ 'SIDEBAR.LOG_OUT' | translate }}</span>
      </button>
    </div>
  </ng-template>
</div>
<div class="sidebar-synchronization-status" [ngStyle]="{'align-items': variablesService.daemon_state === 1 ? 'flex-start' : 'center'}">
  <div class="status-container">
    <span class="offline" *ngIf="variablesService.daemon_state === 0">
      {{ 'SIDEBAR.SYNCHRONIZATION.OFFLINE' | translate }}
    </span>
    <span class="syncing" *ngIf="variablesService.daemon_state === 1">
      {{ 'SIDEBAR.SYNCHRONIZATION.SYNCING' | translate }} {{ variablesService.height_app }}{{ 'SIDEBAR.SYNCHRONIZATION.SLASH' | translate }}{{ variablesService.height_max }}
    </span>
    <span class="online" *ngIf="variablesService.daemon_state === 2">
      {{ 'SIDEBAR.SYNCHRONIZATION.ONLINE' | translate }}
    </span>
    <span class="loading" *ngIf="variablesService.daemon_state === 3">
      {{ 'SIDEBAR.SYNCHRONIZATION.LOADING' | translate }}
    </span>
    <span class="offline" *ngIf="variablesService.daemon_state === 4">
      {{ 'SIDEBAR.SYNCHRONIZATION.ERROR' | translate }}
    </span>
    <span class="online" *ngIf="variablesService.daemon_state === 5">
      {{ 'SIDEBAR.SYNCHRONIZATION.COMPLETE' | translate }}
    </span>
    <div class="progress-bar-container" *ngIf="variablesService.daemon_state === 1 || variablesService.daemon_state === 3">
      <div class="syncing" *ngIf="variablesService.daemon_state === 1">
        <div class="progress-bar">
          <div class="fill" [style.width]="variablesService.sync.progress_value + '%'"></div>
        </div>
        <div class="progress-percent">{{ variablesService.sync.progress_value_text }}%</div>
      </div>
      <div class="loading" *ngIf="variablesService.daemon_state === 3"></div>
    </div>
  </div>
  <div class="update-container" *ngIf="(variablesService.daemon_state === 0 || variablesService.daemon_state === 2) && [2, 3, 4].indexOf(variablesService.last_build_displaymode) !== -1">
    <ng-container *ngIf="variablesService.last_build_displaymode === 2">
      <div class="update-text standard">
        <span [style.cursor]="'pointer'" (click)="getUpdate()">{{ 'SIDEBAR.UPDATE.STANDARD' | translate }}</span>
      </div>
      <i class="icon update standard" tooltip="{{ 'SIDEBAR.UPDATE.STANDARD_TOOLTIP' | translate }}" placement="right-bottom" tooltipClass="update-tooltip" [delay]="500"></i>
    </ng-container>
    <ng-container *ngIf="variablesService.last_build_displaymode === 3">
      <div class="update-text important">
        <span [style.cursor]="'pointer'" (click)="getUpdate()">{{ 'SIDEBAR.UPDATE.IMPORTANT' | translate }}</span>
        <br>
        <span style="font-size: 1rem">{{ 'SIDEBAR.UPDATE.IMPORTANT_HINT' | translate }}</span>
      </div>
      <i class="icon update important" tooltip="{{ 'SIDEBAR.UPDATE.IMPORTANT_TOOLTIP' | translate }}" placement="right-bottom" tooltipClass="update-tooltip important" [delay]="500"></i>
    </ng-container>
    <ng-container *ngIf="variablesService.last_build_displaymode === 4">
      <div class="update-text critical">
        <span [style.cursor]="'pointer'" (click)="getUpdate()">{{ 'SIDEBAR.UPDATE.CRITICAL' | translate }}</span>
        <br>
        <span style="font-size: 1rem">{{ 'SIDEBAR.UPDATE.IMPORTANT_HINT' | translate }}</span>
      </div>
      <i class="icon update critical" tooltip="{{ 'SIDEBAR.UPDATE.CRITICAL_TOOLTIP' | translate }}" placement="right-bottom" tooltipClass="update-tooltip critical" [delay]="500"></i>
    </ng-container>
  </div>
  <div class="update-container" *ngIf="variablesService.daemon_state === 2 && variablesService.net_time_delta_median !== 0">
    <div class="update-text time">
      <span>{{ 'SIDEBAR.UPDATE.TIME' | translate }}</span>
    </div>
    <i class="icon time" tooltip="{{ 'SIDEBAR.UPDATE.TIME_TOOLTIP' | translate }}" placement="right-bottom" tooltipClass="update-tooltip important" [delay]="500"></i>
  </div>
</div>