next-ucap-messenger/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html

<mat-toolbar class="app-layout-native-title-bar">
  <div class="app-layout-native-title-bar-logo">
    <img src="assets/images/logo/64_64.png" />
  </div>
  <div class="app-layout-native-title-bar-title">DS Talk</div>
  <div class="btn-area">
    <div
      *ngIf="!!loginRes && !!weblink"
      class="app-layout-native-title-bar-link"
    >
      <ng-container *ngFor="let link of weblink" [ngSwitch]="link.key">
        <button
          mat-icon-button
          *ngSwitchCase="WebLinkType.Webhard"
          class="button"
          [matTooltip]="link.title"
          (click)="onClickWebLink(link)"
        >
          <span class="weblink webhard">웹하드</span>
        </button>
        <button
          mat-icon-button
          *ngSwitchCase="WebLinkType.Dsp"
          class="button"
          [matTooltip]="link.title"
          (click)="onClickWebLink(link)"
        >
          <span class="weblink dsp">DSP</span>
        </button>
        <button
          mat-icon-button
          *ngSwitchCase="WebLinkType.Sms"
          class="button"
          [matTooltip]="link.title"
          (click)="onClickWebLink(link)"
        >
          <span class="weblink sms">SMS</span>
        </button>
        <button
          mat-icon-button
          *ngSwitchCase="WebLinkType.Conf"
          class="button"
          [matTooltip]="link.title"
          (click)="onClickWebLink(link)"
        >
          <span class="weblink vc">화상회의</span>
        </button>
        <button
          mat-icon-button
          *ngSwitchCase="WebLinkType.Ep"
          class="button"
          [matTooltip]="link.title"
          (click)="onClickWebLink(link)"
        >
          <span class="weblink ep">EP</span>
        </button>
        <button
          mat-icon-button
          *ngSwitchCase="WebLinkType.Som"
          class="button"
          [matTooltip]="link.title"
          (click)="onClickWebLink(link)"
        >
          <span class="weblink S_OM">S&OM</span>
        </button>
        <button
          mat-icon-button
          *ngSwitchCase="WebLinkType.Elephant"
          class="button"
          [matTooltip]="link.title"
          (click)="onClickWebLink(link)"
        >
          <span class="weblink elephant">코끼리</span>
        </button>
        <button
          mat-icon-button
          *ngSwitchCase="WebLinkType.Itsvcdesk"
          class="button"
          [matTooltip]="link.title"
          (click)="onClickWebLink(link)"
        >
          <span class="weblink it-service">IT</span>
        </button>
        <button
          mat-icon-button
          *ngSwitchCase="WebLinkType.UrgntNews"
          class="button"
          [matTooltip]="link.title"
          (click)="onClickWebLink(link)"
        >
          <span class="weblink Personal-news">NEWS</span>
        </button>
        <button
          mat-icon-button
          *ngSwitchCase="WebLinkType.Mail"
          class="button"
          [matBadgeHidden]="webLinkBadgeMail === 0"
          [matBadge]="webLinkBadgeMail"
          matBadgeDescription="확인하지 않은 메시지가 있습니다."
          matBadgeColor="accent"
          matBadgePosition="above after"
          [matTooltip]="link.title"
          (click)="onClickWebLink(link)"
        >
          <span class="weblink mail">메일</span>
        </button>
        <button
          mat-icon-button
          *ngSwitchCase="WebLinkType.Payment"
          class="button"
          [matBadgeHidden]="webLinkBadgePayment === 0"
          [matBadge]="webLinkBadgePayment"
          matBadgeDescription="확인하지 않은 메시지가 있습니다."
          matBadgeColor="accent"
          matBadgePosition="above after"
          [matTooltip]="link.title"
          (click)="onClickWebLink(link)"
        >
          <span class="weblink approved">결제</span>
        </button>
      </ng-container>
      <button
        *ngIf="updateInfo$ | async as updateInfo"
        mat-icon-button
        class="button app-layout-native-title-bar-setting"
        matTooltip="{{ 'update.label' | translate }}"
        (click)="onClickUpdate()"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="18"
          height="18"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1.5"
          stroke-linecap="butt"
          stroke-linejoin="round"
          alt="Update"
        >
          <circle cx="12" cy="12" r="3"></circle>
          <path
            d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
          ></path>
        </svg>
      </button>
      <span
        *ngIf="(!!weblink && weblink.length > 0) || (updateInfo$ | async)"
        class="stroke-bar"
      ></span>
    </div>
    <ucap-profile-my-profile-widget
      [profileImageRoot]="sessionVerinfo.profileRoot"
      [profileImageFile]="getMyProfileImageWidget()"
      [presence]="myStatus"
      *ngIf="!!loginRes"
      class="myprofile-item"
      [matMenuTriggerFor]="profileMenu"
    ></ucap-profile-my-profile-widget>

    <div class="app-layout-native-title-bar-actions">
      <button
        mat-icon-button
        class="button app-layout-native-title-bar-minimize"
        (click)="onClickMinimize()"
      >
        <!--<mat-icon>minimize</mat-icon>-->
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="20"
          height="20"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="butt"
          stroke-linejoin="round"
        >
          <line x1="5" y1="18" x2="19" y2="18"></line>
        </svg>
      </button>
      <button
        mat-icon-button
        class="button app-layout-native-title-bar-maximize"
        (click)="onClickMaxmize()"
      >
        <ng-container [ngSwitch]="windowStateChanged$ | async">
          <!--<mat-icon *ngSwitchCase="WindowState.Maximized">filter_none</mat-icon>-->
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="butt"
            stroke-linejoin="round"
            *ngSwitchCase="WindowState.Maximized"
          >
            <path
              class="st0"
              d="M15,9.5v7c0,0.8-0.7,1.5-1.5,1.5h-7C5.7,18,5,17.3,5,16.5v-7C5,8.7,5.7,8,6.5,8h7C14.3,8,15,8.7,15,9.5z"
            />
            <path
              class="st0"
              d="M8.8,6.8V6c0-0.8,0.7-1.5,1.5-1.5H17c0.8,0,1.5,0.7,1.5,1.5v6.8c0,0.8-0.7,1.5-1.5,1.5h-0.8"
            />
          </svg>

          <!--<mat-icon *ngSwitchDefault>crop_din</mat-icon>-->
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="butt"
            stroke-linejoin="round"
            *ngSwitchDefault
          >
            <rect x="5" y="5" width="12" height="12" rx="2" ry="2"></rect>
          </svg>
        </ng-container>
      </button>
      <button
        mat-icon-button
        class="button app-layout-native-title-bar-close"
        (click)="onClickClose()"
      >
        <!--<mat-icon>close</mat-icon>-->
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="20"
          height="20"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="butt"
          stroke-linejoin="round"
        >
          <line x1="18" y1="6" x2="6" y2="18"></line>
          <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
      </button>
    </div>
  </div>
</mat-toolbar>

<mat-menu
  #profileMenu="matMenu"
  class="myset"
  xPosition="after"
  yPosition="below"
  (closed)="onClosedProfileMenu($event)"
>
  <div class="setting">
    <button mat-menu-item [matMenuTriggerFor]="presenseMenu">
      <ng-container [ngSwitch]="myStatus.pcStatus">
        <ng-container *ngSwitchCase="StatusCode.OnLine">
          {{ 'presence.online' | translate }}
        </ng-container>
        <ng-container *ngSwitchCase="StatusCode.Away">
          {{ 'presence.away' | translate }}
        </ng-container>
        <ng-container *ngSwitchCase="StatusCode.Busy">
          {{ myStatus.statusMessage }}
        </ng-container>
      </ng-container>
    </button>
  </div>
  <div class="setting">
    <button mat-menu-item (click)="onClickOpenProfile($event)">
      {{ 'profile.open' | translate }}
    </button>
  </div>
  <!-- <div class="setting">
    <button
      mat-menu-item
      class="zoom minus-square"
      (click)="onClickZoomOut($event)"
    >
      축소</button
    ><span class="set-size" (click)="onClickZoomLabel($event)">{{ zoom }}%</span
    ><button
      mat-menu-item
      class="zoom plus-square"
      (click)="onClickZoomIn($event)"
    >
      확대
    </button>
  </div> -->
  <div class="setting">
    <button mat-menu-item (click)="onClickNotice()">
      {{ 'notice.label' | translate }}
    </button>
  </div>
  <div class="setting">
    <button mat-menu-item (click)="onClickRemoteSupport($event)">
      {{ 'profile.remoteSupport' | translate }}
    </button>
  </div>
  <div class="setting">
    <button mat-menu-item (click)="onClickSettings()">
      {{ 'settings.label' | translate }}
    </button>
  </div>
  <mat-divider></mat-divider>
  <div class="setting">
    <button
      mat-menu-item
      [matMenuTriggerFor]="informationMenu"
      (menuOpened)="onMenuOpenedinformationMenu()"
    >
      {{ 'information.checkForUpdates' | translate }}
    </button>
  </div>
  <mat-divider></mat-divider>
  <div class="setting">
    <button mat-menu-item (click)="onClickLogout()">
      {{ 'accounts.logout' | translate }}
    </button>
  </div>
</mat-menu>

<mat-menu #presenseMenu="matMenu" class="status-pc-set">
  <div class="setting">
    <button mat-menu-item (click)="onClickStatusOnline($event)">
      <span class="presence pcOn"> </span>
      {{ 'presence.online' | translate }}
    </button>
  </div>
  <div class="setting">
    <button mat-menu-item (click)="onClickStatusAway($event)">
      <span class="presence pcOut"> </span>
      {{ 'presence.away' | translate }}
    </button>
    <button
      mat-menu-item
      class="clock"
      [matMenuTriggerFor]="awayTimeMenu"
    ></button>
  </div>
  <div class="setting">
    <button mat-menu-item (click)="onClickStatusBusy($event, 1)">
      <span class="presence pcOther"> </span>
      <ucap-inline-edit-input
        (apply)="
          $event.stopPropagation();
          onApplyStatusMessage(1, statusMessage1.value)
        "
        (edit)="$event.stopPropagation()"
        (cancel)="$event.stopPropagation()"
        class="form-eidt"
      >
        <span ucapInlineEditInput="view">{{ loginRes?.statusMessage1 }}</span>
        <span ucapInlineEditInput="edit"
          ><input
            matInput
            #statusMessage1
            type="text"
            maxlength="5"
            [value]="loginRes?.statusMessage1"
            (click)="$event.stopPropagation()"
        /></span>
      </ucap-inline-edit-input>
    </button>
  </div>
  <div class="setting">
    <button mat-menu-item (click)="onClickStatusBusy($event, 2)">
      <span class="presence pcOther"> </span>
      <ucap-inline-edit-input
        (apply)="
          $event.stopPropagation();
          onApplyStatusMessage(2, statusMessage2.value)
        "
        (edit)="$event.stopPropagation()"
        (cancel)="$event.stopPropagation()"
        class="form-eidt"
      >
        <span ucapInlineEditInput="view">{{ loginRes?.statusMessage2 }}</span>
        <span ucapInlineEditInput="edit"
          ><input
            matInput
            #statusMessage2
            type="text"
            maxlength="5"
            [value]="loginRes?.statusMessage2"
            (click)="$event.stopPropagation()"
        /></span>
      </ucap-inline-edit-input>
    </button>
  </div>
  <div class="setting">
    <button mat-menu-item (click)="onClickStatusBusy($event, 3)">
      <span class="presence pcOther"> </span>
      <ucap-inline-edit-input
        (apply)="
          $event.stopPropagation();
          onApplyStatusMessage(3, statusMessage3.value)
        "
        (edit)="$event.stopPropagation()"
        (cancel)="$event.stopPropagation()"
        class="form-eidt"
      >
        <span ucapInlineEditInput="view">{{ loginRes?.statusMessage3 }}</span>
        <span ucapInlineEditInput="edit"
          ><input
            matInput
            #statusMessage3
            type="text"
            maxlength="5"
            [value]="loginRes?.statusMessage3"
            (click)="$event.stopPropagation()"
        /></span>
      </ucap-inline-edit-input>
    </button>
  </div>
</mat-menu>

<mat-menu #awayTimeMenu="matMenu">
  <div mat-menu-item (click)="$event.stopPropagation()">
    {{ 'presence.settingOfAwayTime' | translate }}
  </div>
  <mat-radio-group aria-label="Select an option" [value]="myIdleCheckTime">
    <div mat-menu-item *ngFor="let awayTime of awayTimeList">
      <mat-radio-button [value]="awayTime" (change)="onChangeAwayTime($event)">
        {{ awayTime }}{{ 'common.units.minute' | translate }}</mat-radio-button
      >
    </div>
  </mat-radio-group>
</mat-menu>

<mat-menu #informationMenu="matMenu">
  <div
    class="version-info-container menu-item"
    (click)="$event.stopPropagation()"
  >
    <div>
      <span>
        {{ 'information.installedVersion' | translate }}:{{ appVersion }}
      </span>
    </div>
    <div *ngIf="checkingUpdate">
      <div *ngIf="checkingUpdateIsProcessing" style="display: flex;">
        <mat-spinner
          *ngIf="checkingUpdate && checkingUpdateIsProcessing"
          diameter="20"
          strokeWidth="1"
        ></mat-spinner>
        {{ 'information.checkForUpdatesInProgress' | translate }}
      </div>

      <div *ngIf="!checkingUpdateIsProcessing" style="display: flex;">
        <span>
          {{ 'information.latestVersion' | translate }}:{{
            checkingUpdateAppVersion
          }}
        </span>
        <span>
          <button
            *ngIf="checkingUpdateIsExist"
            mat-button
            (click)="onClickApplyUpdate($event)"
          >
            {{ 'information.applyUpdates' | translate }}
          </button>
        </span>
      </div>
    </div>
  </div>
</mat-menu>