ucap-lg-web/src/app/sections/chat/components/info.section.component.html

<mat-toolbar class="info-chat-toolbar">
  <mat-toolbar-row class="info-chat-toolbar-content">
    <div class="chat-room-profile">
      <div
        class="profile-image"
        (click)="onOpenProfile()"
        [style.cursor]="
          !!currentRoomInfo && currentRoomInfo.roomType === RoomType.Single
            ? 'pointer'
            : 'default'
        "
      >
        <img
          class="thumbnail"
          ucapImage
          [base]="versionInfo?.profileRoot"
          [path]="roomImage"
          [default]="
            currentRoomInfo?.roomType === RoomType.Multi
              ? defaultProfileImageMulti
              : defaultProfileImage
          "
        />
      </div>
    </div>
    <span class="chat-room-subject"
      ><mat-icon
        *ngIf="!!currentRoomInfo?.isTimeRoom"
        class="ico-timer-unit material-icons-outlined"
        >timer</mat-icon
      ><span>{{ roomName }}</span>
      <strong
        class="user-count text-accent-color"
        *ngIf="currentRoomInfo?.roomType === RoomType.Multi"
      >
        {{ currentRoomInfo?.joinUserCount }}
      </strong>
    </span>
    <span class="example-spacer"></span>
    <div class="btn-chat-room-top">
      <button
        mat-icon-button
        color="primary"
        aria-label="search"
        matTooltip="{{ 'chat:label.search' | ucapI18n }}"
        (click)="onOpenChatSearch()"
      >
        <mat-icon>search</mat-icon>
      </button>
      <button
        mat-icon-button
        color="primary"
        aria-label="alarm"
        matTooltip="{{
          (currentRoomInfo?.receiveAlarm
            ? 'chat:label.turnOnRoomAlert'
            : 'chat:label.turnOffRoomAlert'
          ) | ucapI18n
        }}"
        (click)="onToggleAlarm(currentRoomInfo)"
      >
        <mat-icon
          *ngIf="currentRoomInfo?.receiveAlarm"
          class="material-icons-outlined"
          >notifications</mat-icon
        >

        <mat-icon
          *ngIf="!currentRoomInfo?.receiveAlarm"
          class="material-icons-outlined"
          >notifications_off</mat-icon
        >
      </button>
      <!-- <button
        mat-icon-button
        class="btn-icon-favorite"
        color="primary"
        aria-label="show room users"
        matTooltip="{{ 'chat:label.favorite' | ucapI18n }}"
        (click)="onRightDrawerToggle()"
      >
        <mat-icon>star_outline</mat-icon>
      </button> -->
      <button
        mat-icon-button
        color="primary"
        aria-label=""
        [matMenuTriggerFor]="chatRoomMenu"
        matTooltip="{{ 'chat:label.menu' | ucapI18n }}"
      >
        <mat-icon>more_horiz</mat-icon>
      </button>
    </div>
  </mat-toolbar-row>
</mat-toolbar>

<mat-menu #chatRoomMenu="matMenu" class="chat-menu-box">
  <div class="menu-title" (click)="$event.stopPropagation()">
    {{ roomName }}
  </div>
  <mat-divider></mat-divider>
  <div class="chat-menu-box-body">
    <div class="data">
      <div class="sub-title" (click)="$event.stopPropagation()">
        <mat-icon class="material-icons-outlined">inbox</mat-icon
        ><span>{{ 'chat:label.data' | ucapI18n }}</span>
        <!--<mat-slide-toggle labelPosition="before" class="simpleview">
        </mat-slide-toggle>-->
      </div>
      <div class="btn">
        <button mat-button (click)="onClickRoomMenu('ATTACH_IMAGE')">
          {{ 'chat:label.image' | ucapI18n }}
        </button>
        <button mat-button (click)="onClickRoomMenu('ATTACH_VIDEO')">
          {{ 'chat:label.video' | ucapI18n }}
        </button>
        <button mat-button (click)="onClickRoomMenu('ATTACH_FILE')">
          {{ 'chat:label.attachFile' | ucapI18n }}
        </button>
      </div>
    </div>
    <!-- <button
      mat-menu-item
      *ngIf="getShowContextMenu('EVENT')"
      (click)="onClickRoomMenu('EVENT')"
    >
      <mat-icon class="material-icons-outlined">calendar_today</mat-icon
      >{{ 'chat:label.event' | ucapI18n }}
    </button> -->
    <button
      mat-menu-item
      *ngIf="getShowContextMenu('ROOM_USERS')"
      (click)="onClickRoomMenu('ROOM_USERS')"
    >
      <mat-icon>person_outline</mat-icon
      >{{ 'chat:label.showRoomUsers' | ucapI18n }}
    </button>
    <button
      mat-menu-item
      *ngIf="getShowContextMenu('CHANGE_ROOM_USERS')"
      (click)="onClickRoomMenu('CHANGE_ROOM_USERS')"
    >
      <mat-icon class="material-icons-outlined">person_add</mat-icon
      >{{ 'chat:label.addRoomUsers' | ucapI18n }}
    </button>
    <button
      mat-menu-item
      *ngIf="getShowContextMenu('ADD_GROUP')"
      (click)="onClickRoomMenu('ADD_GROUP')"
    >
      <mat-icon class="material-icons-outlined">group_add</mat-icon
      >{{ 'chat:label.addGroup' | ucapI18n }}
    </button>
    <button
      mat-menu-item
      *ngIf="getShowContextMenu('SETTING')"
      (click)="onClickRoomMenu('SETTING')"
    >
      <mat-icon class="material-icons-outlined">settings</mat-icon
      >{{ 'chat:label.roomSetting' | ucapI18n }}
    </button>
    <button
      mat-menu-item
      class="btn-exit"
      *ngIf="getShowContextMenu('EXIT')"
      (click)="onClickRoomMenu('EXIT')"
    >
      {{ 'chat:label.exitFromRoom' | ucapI18n }}
    </button>
  </div>
</mat-menu>