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="app-layout-native-title-bar-spacer"></div>
  <div class="btn-area">
    <div *ngIf="!!loginRes" 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="업데이트"
        (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="업데이트"
        >
          <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()"
      *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"
>
  <div class="setting">
    <button mat-menu-item [matMenuTriggerFor]="presenseMenu">대화 가능</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">100%</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 (click)="onClickLogout()">
      {{ 'accounts.logout' | translate }}
    </button>
  </div>
</mat-menu>

<mat-menu #presenseMenu="matMenu" class="status-pc-set">
  <div class="setting">
    <button mat-menu-item>
      <span class="presence pcOn"> </span>{{ 'presence.online' | translate }}
    </button>
  </div>
  <div class="setting">
    <button mat-menu-item>
      <span class="presence pcOut"> </span
      >{{ 'presence.offline' | translate }}</button
    ><button mat-menu-item class="clock"></button>
  </div>
  <div class="setting">
    <button mat-menu-item>
      <span class="presence pcOther"> </span>다른용무중</button
    ><button mat-menu-item class="edit"></button>
  </div>
  <div class="setting">
    <button mat-menu-item><span class="presence pcOther"> </span>회의중</button
    ><button mat-menu-item class="edit"></button>
  </div>
  <div class="setting">
    <button mat-menu-item>
      <span class="presence pcOther"> </span>집중근무중</button
    ><button mat-menu-item class="edit"></button>
  </div>
</mat-menu>