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"
    >
      <ucap-integrated-search-form (search)="onIntegratedSearch($event)">
      </ucap-integrated-search-form>

      <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()"
      >
        <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)"
>
  <ng-template matMenuContent>
    <div class="setting" style="width: 200px;">
      <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>
    <div class="setting">
      <button mat-menu-item (click)="onClickQuit()">
        {{ 'common.messages.quit' | translate }}
      </button>
    </div>
  </ng-template>
</mat-menu>

<mat-menu #presenseMenu="matMenu" class="status-pc-set">
  <ng-template matMenuContent>
    <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();
            statusMessage1.value = loginRes?.statusMessage1
          "
          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();
            statusMessage2.value = loginRes?.statusMessage2
          "
          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();
            statusMessage3.value = loginRes?.statusMessage3
          "
          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>
  </ng-template>
</mat-menu>

<mat-menu #awayTimeMenu="matMenu">
  <ng-template matMenuContent>
    <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>
  </ng-template>
</mat-menu>

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

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