next-ucap-messenger/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html

<div class="list-item" matRipple>
  <dl class="item-default">
    <dt>
      <div class="thumbnail-mask">
        <img
          class="thumbnail"
          ucapImage
          [base]="sessionVerinfo.profileRoot"
          [path]="imagePath"
          [default]="defaultPath"
        />
      </div>
      <span *ngIf="roomInfo.isTimeRoom" class="text-warn-color badge-timer">
        <mat-icon>timer</mat-icon>
      </span>
      <!-- <div style="position: relative;">
        <div
          class="num text-accent-darkest thumbnail"
          *ngIf="roomInfo.roomType === RoomType.Multi"
          style="position: absolute; width: 40px; height: 40px; top: -40px"
        >
          {{ roomInfo.joinUserCount }}
        </div>
      </div> -->
    </dt>
    <dd class="info">
      <div class="detail">
        <div class="room-name">
          <div class="name">
            <ng-container [ngSwitch]="roomInfo.roomType">
              <ng-container *ngSwitchCase="RoomType.Mytalk">
                MyTalk
              </ng-container>
              <ng-container
                *ngSwitchCase="
                  RoomType.Bot ||
                  RoomType.Allim ||
                  RoomType.Allim_Elephant ||
                  RoomType.Allim_TMS
                "
              >
                {{ _roomUserInfos | ucapTranslate: 'name':',' }}
              </ng-container>
              <ng-container *ngSwitchDefault>
                <ng-template
                  [ngIf]="
                    !!roomInfo.roomName && '' !== roomInfo.roomName.trim()
                  "
                  [ngIfElse]="roomNameNotExist"
                >
                  {{ roomInfo.roomName }}
                </ng-template>
                <ng-template #roomNameNotExist>
                  {{ _roomUserInfos | ucapTranslate: 'name':',' }}
                </ng-template>
              </ng-container>
            </ng-container>
          </div>
          <div
            class="num bg-accent-light"
            *ngIf="roomInfo.roomType === RoomType.Multi"
          >
            {{ roomInfo.joinUserCount }}{{ 'common.units.persons' | translate }}
          </div>
          <div *ngIf="!checkable && !roomInfo.receiveAlarm">
            <mat-icon>notifications_off</mat-icon>
          </div>
        </div>
        <div class="room-msg">
          {{ finalEventMessage }}
        </div>
      </div>

      <div class="date">
        {{ roomInfo.finalEventDate | ucapDate: 'C' }}
      </div>
    </dd>
    <dd *ngIf="checkable">
      <mat-checkbox
        #checkbox
        [checked]="isChecked"
        (change)="onChangeCheck(checkbox.checked, roomInfo)"
        (click)="$event.stopPropagation()"
      >
      </mat-checkbox>
    </dd>
  </dl>

  <span
    class="notiBadge"
    *ngIf="roomInfo.noReadCnt > 0"
    [matBadgeHidden]="roomInfo.noReadCnt === 0"
    [matBadge]="roomInfo.noReadCnt"
    matBadgeOverlap="true"
    matBadgeColor="accent"
    matBadgePosition="below after"
  >
  </span>
</div>