리스트 목록 - 높이값 64px조정

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss

@@ -10,12 +10,13 @@
 }
 ::ng-deep .mat-tab-header {
   border-bottom: none !important;
+  width: 100%;
 }
 
 .left-side-tabs-body {
   position: relative;
   height: 100%;
-  width: calc(100% - 70px);
+  width: calc(100% - 60px);
   div[id^='tabs'] {
     height: 100%;
     width: 100%;
@@ -30,7 +31,7 @@
 
 .mat-tab-group {
   display: flex;
-  width: 70px;
+  width: 60px;
   flex-direction: row;
 }
 
@@ -64,7 +65,7 @@
         .mat-tab-label {
           width: 100%;
           height: 80px;
-          padding: 0 16px;
+          padding: 0;
         }
       }
       .mat-ink-bar {
@@ -102,6 +103,9 @@
         stroke-linejoin: miter;
         fill: none;
       }
+      .mat-badge-content {
+        right: -4px !important;
+      }
     }
   }
   &[aria-selected='true'] {

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.scss

@@ -17,7 +17,6 @@
   position: relative;
   display: flex;
   flex-direction: row;
-  height: 60px;
   align-items: center;
   padding: 0;
   font-size: 14px;
@@ -70,7 +69,7 @@
 }
 
 .app-layout-chat-left-sidenav-chat-list {
-  height: calc(100% - 130px);
+  height: calc(100% - 120px);
   position: relative;
 }
 

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.scss

@@ -20,7 +20,6 @@
 .list-search {
   display: flex;
   flex-direction: row;
-  height: 60px;
   align-items: center;
   padding: 0;
   font-size: 14px;
@@ -75,7 +74,7 @@
 ::ng-deep .message-box {
   .message-section {
     position: relative;
-    height: calc(100% - 130px);
+    height: calc(100% - 120px);
     .message-tab {
       position: relative;
       height: 100%;

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.scss

@@ -42,7 +42,7 @@
   }
 }
 .search-result {
-  height: calc(100% - 40px);
+  height: calc(100% - 30px);
   overflow: auto;
   .result-num {
     padding: 10px;
@@ -52,7 +52,7 @@
 }
 
 .oraganization-tab {
-  height: calc(100% - 130px);
+  height: calc(100% - 120px);
   flex-direction: inherit;
   display: flex;
   .oraganization-tab-tree {

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss

@@ -43,6 +43,8 @@
     padding: 10px 20px;
     .profile-img {
       margin-right: 10px;
+      width: 40px;
+      height: 40px;
       .responsive-chats-button {
         display: none;
         line-height: normal;
@@ -57,8 +59,6 @@
           font-size: 16px;
         }
       }
-      width: 50px;
-      height: 50px;
       &.thumbnail-mask {
         border-radius: 50%;
         overflow: hidden;
@@ -73,20 +73,20 @@
       flex-flow: column;
       overflow: hidden;
       .room-name {
-        font-size: 16px;
+        font-size: 1rem;
         line-height: normal;
         @include ellipsis(1);
       }
       .room-type {
-        font-size: 14px;
+        font-size: 0.9rem;
         line-height: normal;
-        margin-top: 6px;
+        margin-top: 2px;
         height: 20px;
         span {
           border-radius: 10px;
           padding: 1px 10px;
           margin-right: 6px;
-          font-size: 13px;
+          font-size: 0.7rem;
         }
       }
     }
@@ -182,7 +182,7 @@
         .mat-icon {
           line-height: normal;
           color: #ffffff;
-          transform: translateY(-3px);
+          transform: translateY(-1px);
         }
       }
     }

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.scss

@@ -73,18 +73,21 @@
   }
 }
 
-::ng-deep .mat-dialog-container .mat-tab-body-wrapper {
+::ng-deep .mat-dialog-container {
-  height: 380px;
+  .mat-tab-body-wrapper {
-  width: 100%;
+    height: 380px;
-  .mat-tab-body {
     width: 100%;
-    height: 100%;
+    .mat-tab-body {
-    .mat-tab-body-content {
       width: 100%;
       height: 100%;
+      .mat-tab-body-content {
+        width: 100%;
+        height: 100%;
+      }
     }
   }
 }
+
 .mat-tab-frame {
   width: 100%;
   height: 100%;

projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss

@@ -9,7 +9,7 @@
     display: flex;
     padding: 0 10px;
     cursor: pointer;
-    height: 50px;
+    height: 60px;
     color: #ffffff;
     //background: rgba(37, 27, 30, 0.9);
     //border-bottom: 1px solid #d5dadb;

projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss

@@ -2,7 +2,7 @@
   height: 100%;
   display: flex;
   flex-flow: row;
-  padding-top: 47px;
+  padding-top: 57px;
   border-top: none;
   .split-area {
     overflow: hidden;

projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss

@@ -337,7 +337,7 @@ $daesang-grey: (
     display: flex;
     justify-content: center;
     padding: 0 10px;
-    height: 70px;
+    height: 60px;
     background-color: #eeeeee;
     background: $gradient-light;
     background: -webkit-linear-gradient(
@@ -349,6 +349,10 @@ $daesang-grey: (
     color: #ffffff;
   }
 
+  .list-search{
+    height:60px;
+  }
+
   mat-tab-group[vertical] {
     display: flex;
     flex-direction: row;

projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html

@@ -1,6 +1,6 @@
 <cdk-virtual-scroll-viewport
   #cvsvGroup
-  itemSize="80"
+  itemSize="64"
   perfectScrollbar
   fxFlexFill
 >
@@ -16,7 +16,6 @@
     <!-- This is the tree node template for leaf nodes -->
     <mat-tree-node
       *matTreeNodeDef="let node"
-      style="height: 80px;"
       [attr.node-type]="node?.nodeType"
       matRipple
     >
@@ -37,7 +36,6 @@
     <mat-tree-node
       *matTreeNodeDef="let node; when: isHeader"
       class="tree-node-frame ucap-clickable"
-      style="height: 80px;"
       [attr.node-type]="node?.nodeType"
       matRipple
     >

projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.scss

@@ -13,7 +13,7 @@
 
 .tree-node-frame {
   border-bottom: 1px solid #dddddd;
-  height: 40px;
+  height: 64px;
 
   .tree-node-header {
     position: relative;
@@ -49,6 +49,7 @@
 
   .mat-tree-node {
     width: 100%;
+    height: 100%;
     &:hover {
       background-color: #f4f4f4;
       border: 1px solid #cccccc;

projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.html

@@ -64,7 +64,7 @@
     <span>{{ message.regDate | ucapDate: 'C' }}</span>
     <span
       *ngIf="message.type === MessageType.Receive && !message.readYn"
-      class="badge-new bg-warn-darkest"
+      class="noti-new bg-warn-darkest"
     >
       N
     </span>

projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.scss

@@ -7,22 +7,22 @@
       width: calc(100% - 80px);
       dt {
         .name {
-          font-size: 16px;
+          font-size: 1.1em;
           overflow: hidden;
           text-overflow: ellipsis;
           display: block;
           white-space: nowrap;
           word-wrap: normal;
           font-weight: 600;
+          margin-bottom: 2px;
           span {
-            font-size: 13px;
+            font-size: 0.9em;
           }
         }
       }
 
       dd {
         color: #777777;
-        margin-top: 4px;
         white-space: nowrap;
         word-wrap: normal;
         text-overflow: ellipsis;
@@ -30,22 +30,25 @@
         width: 100%;
         position: relative;
         overflow: hidden;
+        font-size: 0.9em;
       }
     }
     .date {
       display: flex;
       flex-flow: column;
-      align-self: flex-start;
+      font-size: 0.9em;
-      .badge-new {
+      height: 40px;
+      .noti-new {
         border-radius: 50%;
         color: #ffffff;
         padding: 0;
         text-align: center;
         align-self: flex-end;
+        align-items: center;
         width: 20px;
         height: 20px;
-        font-size: 12px;
+        font-size: 0.9em;
-        margin-top: 4px;
+        margin-top: 3px;
       }
     }
   }

projects/ucap-webmessenger-ui-message/src/lib/components/write.component.html

@@ -1,167 +1,185 @@
 <mat-card class="mat-elevation-z0 ucap-message-write">
   <form name="messageWriteForm" [formGroup]="messageWriteForm" novalidate>
-    <div class="add-row">
+    <perfect-scrollbar>
-      <button
+      <div class="add-row">
-        mat-button
+        <button
-        (click)="onClickReceiverList()"
+          mat-button
-        class="mat-mini-fab mat-button-base mat-accent mat-elevation-z"
+          (click)="onClickReceiverList()"
-      >
+          class="mat-mini-fab mat-button-base mat-accent mat-elevation-z"
-        <mat-icon>add</mat-icon>
+        >
-        <span class="mat-fab__label">{{
+          <mat-icon>add</mat-icon>
-          'message.addReceiver' | translate
+          <span class="mat-fab__label">{{
-        }}</span>
+            'message.addReceiver' | translate
-      </button>
+          }}</span>
-      <span
+        </button>
-        *ngIf="receiverList.length > 0"
-        class="receiver-sum text-accent-color"
-      >
-        {{
-          'message.countOfReceiver' | translate: { count: receiverList.length }
-        }}
-      </span>
-    </div>
-    <mat-chip-list #chipList aria-label="receiver selection">
-      <mat-chip
-        *ngFor="let receiver of receiverList"
-        removable="true"
-        (removed)="onRemovedReceiver(receiver)"
-      >
-        {{ receiver.name }}
-        <span matChipRemove class="mdi mdi-close"></span>
-      </mat-chip>
-    </mat-chip-list>
-
-    <!--<mat-form-field class="message-receiver-list">
-      <perfect-scrollbar>
-        <mat-chip-list #chipList aria-label="receiver selection">
-          <mat-chip
-            *ngFor="let receiver of receiverList"
-            removable="true"
-            (removed)="onRemovedReceiver(receiver)"
-          >
-            {{ receiver.name }}
-            <span matChipRemove class="mdi mdi-close"></span>
-          </mat-chip>
-          <input
-            [matChipInputFor]="chipList"
-            placeholder="{{ 'message.fieldReceiver' | translate }}"
-            readonly
-            (click)="onClickReceiverList()"
-          />
-        </mat-chip-list>
-      </perfect-scrollbar>
-    </mat-form-field>
-    -->
-
-    <mat-form-field class="message-title">
-      <input
-        matInput
-        formControlName="title"
-        placeholder="{{ 'message.fieldTitle' | translate }}"
-      />
-    </mat-form-field>
-
-    <div class="message-content">
-      <mat-card-content class="message-write-body">
-        <div
-          #editor
-          class="ucap-message-write-editor"
-          contenteditable="true"
-          (paste)="onPasteEditor($event)"
-          (input)="onInputEditor()"
-        ></div>
-        <input type="file" #fileInput style="display: none" multiple />
-        <mat-list>
-          <mat-list-item *ngFor="let oldAttachment of oldAttachmentList">
-            {{ oldAttachment.resContent }}
-            <button
-              mat-button
-              aria-label="이미지삭제"
-              (click)="onClickDeleteOldAttachment(oldAttachment)"
-            >
-              <span class="mdi mdi-delete"></span>
-            </button>
-          </mat-list-item>
-          <mat-list-item *ngFor="let attachment of attachmentList">
-            {{ attachment.name }}
-          </mat-list-item>
-        </mat-list>
-        <div class="message-option">
-          <div class="editor-tools">
-            <button
-              mat-icon-button
-              aria-label="이미지"
-              (click)="onClickImage()"
-            >
-              <span class="mdi mdi-camera mdi-24px"></span>
-            </button>
-            <button
-              mat-icon-button
-              aria-label="첨부파일"
-              (click)="onClickAttachment()"
-            >
-              <span class="mdi mdi-attachment mdi-rotate-90 mdi-24px"></span>
-            </button>
-          </div>
-          <div class="length">
-            <span
-              [class.editor-length-invalid]="
-                0 === contentLength || 1000 < contentLength
-              "
-              >{{ contentLength }}</span
-            >/1000
-          </div>
-        </div>
-      </mat-card-content>
-    </div>
-    <mat-card-actions>
-      <!--<div>
         <span
-          [class.editor-length-invalid]="
+          *ngIf="receiverList.length > 0"
-            0 === contentLength || 1000 < contentLength
+          class="receiver-sum text-accent-color"
-          "
-          >{{ contentLength }}</span
-        >/1000
-      </div>-->
-      <div class="editor-actions-spacer"></div>
-      <div class="editor-actions">
-        <button
-          mat-stroked-button
-          (click)="onClickCancel()"
-          class="mat-primary"
         >
-          {{ 'common.messages.cancel' | translate }}
+          {{
-        </button>
+            'message.countOfReceiver'
-        <button
+              | translate: { count: receiverList.length }
-          mat-flat-button
+          }}
-          (click)="onClickSend()"
+        </span>
-          [disabled]="
+      </div>
-            messageWriteForm.invalid ||
+      <mat-chip-list #chipList aria-label="receiver selection">
-            !receiverList ||
+        <mat-chip
-            0 === receiverList.length ||
+          *ngFor="let receiver of receiverList"
-            0 === contentLength ||
+          removable="true"
-            1000 < contentLength
+          (removed)="onRemovedReceiver(receiver)"
-          "
-          class="mat-primary"
         >
-          {{ 'message.sendTo' | translate }}
+          {{ receiver.name }}
-        </button>
+          <span matChipRemove class="mdi mdi-close"></span>
-        <button
+        </mat-chip>
-          mat-flat-button
+      </mat-chip-list>
-          (click)="onClickSendSchedule()"
-          [disabled]="
-            messageWriteForm.invalid ||
-            !receiverList ||
-            0 === receiverList.length ||
-            0 === contentLength ||
-            1000 < contentLength
-          "
-          class="mat-primary"
-        >
-          {{ 'message.sendReservation' | translate }}
-        </button>
 
-        <!-- <mat-menu #appMenu="matMenu" yPosition="above">
+      <!--<mat-form-field class="message-receiver-list">
+        <perfect-scrollbar>
+          <mat-chip-list #chipList aria-label="receiver selection">
+            <mat-chip
+              *ngFor="let receiver of receiverList"
+              removable="true"
+              (removed)="onRemovedReceiver(receiver)"
+            >
+              {{ receiver.name }}
+              <span matChipRemove class="mdi mdi-close"></span>
+            </mat-chip>
+            <input
+              [matChipInputFor]="chipList"
+              placeholder="{{ 'message.fieldReceiver' | translate }}"
+              readonly
+              (click)="onClickReceiverList()"
+            />
+          </mat-chip-list>
+        </perfect-scrollbar>
+      </mat-form-field>
+      -->
+
+      <mat-form-field class="message-title">
+        <input
+          matInput
+          formControlName="title"
+          placeholder="{{ 'message.fieldTitle' | translate }}"
+        />
+      </mat-form-field>
+
+      <div class="message-content">
+        <mat-card-content class="message-write-body">
+          <div
+            #editor
+            class="ucap-message-write-editor"
+            contenteditable="true"
+            (paste)="onPasteEditor($event)"
+            (input)="onInputEditor()"
+          ></div>
+          <input type="file" #fileInput style="display: none" multiple />
+          <mat-list>
+            <mat-list-item *ngFor="let oldAttachment of oldAttachmentList">
+              {{ oldAttachment.resContent }}
+              <button
+                mat-button
+                aria-label="이미지삭제"
+                (click)="onClickDeleteOldAttachment(oldAttachment)"
+              >
+                <span class="mdi mdi-delete"></span>
+              </button>
+            </mat-list-item>
+            <mat-list-item
+              *ngFor="let attachment of attachmentList"
+              class="attach-file"
+            >
+              <div class="file-name">
+                <span class="mdi mdi-attachment mdi-18px"> </span
+                >{{ attachment.name }}
+                <button mat-button aria-label="파일삭제">
+                  <!--<span class="mdi mdi-delete"></span>-->
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    class="feather feather-trash-2"
+                  >
+                    <polyline points="3 6 5 6 21 6"></polyline>
+                    <path
+                      d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
+                    ></path>
+                    <line x1="10" y1="11" x2="10" y2="17"></line>
+                    <line x1="14" y1="11" x2="14" y2="17"></line>
+                  </svg>
+                </button>
+              </div>
+            </mat-list-item>
+          </mat-list>
+        </mat-card-content>
+      </div>
+    </perfect-scrollbar>
+  </form>
+
+  <div class="message-option">
+    <div class="editor-tools">
+      <button mat-icon-button aria-label="이미지" (click)="onClickImage()">
+        <span class="mdi mdi-camera mdi-24px"></span>
+      </button>
+      <button
+        mat-icon-button
+        aria-label="첨부파일"
+        (click)="onClickAttachment()"
+      >
+        <span class="mdi mdi-attachment mdi-rotate-90 mdi-24px"></span>
+      </button>
+    </div>
+    <div class="length">
+      <span
+        [class.editor-length-invalid]="
+          0 === contentLength || 1000 < contentLength
+        "
+        >{{ contentLength }}</span
+      >/1000
+    </div>
+  </div>
+
+  <mat-card-actions>
+    <div class="editor-actions-spacer"></div>
+    <div class="editor-actions">
+      <button mat-stroked-button (click)="onClickCancel()" class="mat-primary">
+        {{ 'common.messages.cancel' | translate }}
+      </button>
+      <button
+        mat-flat-button
+        (click)="onClickSend()"
+        [disabled]="
+          messageWriteForm.invalid ||
+          !receiverList ||
+          0 === receiverList.length ||
+          0 === contentLength ||
+          1000 < contentLength
+        "
+        class="mat-primary"
+      >
+        {{ 'message.sendTo' | translate }}
+      </button>
+      <button
+        mat-flat-button
+        (click)="onClickSendSchedule()"
+        [disabled]="
+          messageWriteForm.invalid ||
+          !receiverList ||
+          0 === receiverList.length ||
+          0 === contentLength ||
+          1000 < contentLength
+        "
+        class="mat-primary"
+      >
+        {{ 'message.sendReservation' | translate }}
+      </button>
+
+      <!-- <mat-menu #appMenu="matMenu" yPosition="above">
           <button mat-menu-item (click)="onClickSendSchedule()">
             <span class="mdi mdi-send-clock"></span
             ><span>{{ 'message.sendReservation' | translate }}</span>
@@ -196,7 +214,6 @@
         >
           {{ 'message.sendReservation' | translate }}
         </button>-->
-      </div>
+    </div>
-    </mat-card-actions>
+  </mat-card-actions>
-  </form>
 </mat-card>

projects/ucap-webmessenger-ui-message/src/lib/components/write.component.scss

@@ -1,22 +1,16 @@
 .ucap-message-write {
   width: 100%;
   height: 100%;
-
+  form {
-  .message-receiver-list {
+    height: 400px;
-    width: 100%;
+    perfect-scrollbar {
-    height: 100px;
+      .ps--active-x > .ps__rail-x {
+        display: none;
+      }
+    }
   }
 
   .message-write-body {
-
-
-    [contenteditable] {
-    }
-
-    [contenteditable]:hover,
-    [contenteditable]:focus {
-    }
-
     [contenteditable]:hover {
       background: #fafafa;
     }
@@ -37,6 +31,18 @@
       flex: 1 1 auto;
     }
   }
+  .message-option {
+    display: flex;
+    flex-flow: row;
+    flex: 1 1 auto;
+    height: 40px;
+    .editor-tools {
+    }
+    .length {
+      margin-left: auto;
+      align-self: center;
+    }
+  }
 }
 
 .message-content {
@@ -60,23 +66,13 @@
       width: 100%;
       height: 100%;
       padding: 10px;
-      height: 280px;
+      min-height: 250px;
-      overflow: auto;
+      border: 1px solid #dddddd;
-    }
+      //overflow: auto;
-    .message-option {
-      display: flex;
-      flex-flow: row;
-      flex: 1 1 auto;
-      height: 40px;
-      .editor-tools {
-      }
-      .length {
-        margin-left: auto;
-        align-self: center;
-      }
     }
   }
 }
+
 .mat-card-actions {
   margin: 0 0 20px;
   border-top: 1px solid #dddddd;
@@ -119,8 +115,9 @@
   }
   .mat-chip-list {
     .mat-chip-list-wrapper {
-      max-height: 100px;
+      margin: 0;
-      overflow: auto;
+      /* max-height: 100px;
+      overflow: auto;*/
     }
   }
   .message-title {
@@ -128,3 +125,25 @@
     margin-top: 10px;
   }
 }
+::ng-deep .attach-file {
+  display: flex;
+  flex-flow: row;
+  flex: 1 1 auto;
+  .mat-list-item-content {
+    padding: 0 !important;
+    .file-name {
+      display: flex;
+      width: 100%;
+      align-items: center;
+      font-size: 0.9em;
+      border-bottom: 1px dotted #dddddd;
+      span {
+        margin-right: 6px;
+      }
+      button {
+        width: 24px;
+        margin-left: auto;
+      }
+    }
+  }
+}

projects/ucap-webmessenger-ui-profile/src/lib/components/my-profile-widget.component.scss

@@ -39,6 +39,7 @@
       height: 10px;
       border: 1px solid #ffffff;
       align-self: flex-end;
+      transform: translateY(0px);
     }
     button {
       cursor: pointer;

projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html

@@ -23,7 +23,7 @@
     </dt>
     <dd class="info">
       <div class="detail">
-        <div>
+        <div class="user-info">
           <span
             *ngIf="getWorkstatusInfo('text').length > 0"
             class="work-status"
@@ -32,7 +32,7 @@
           >
           <span class="name">
             <b>{{ userInfo | ucapTranslate: 'name' }}</b>
-            {{ userInfo | ucapTranslate: 'grade' }}
+            <span class="grade">{{ userInfo | ucapTranslate: 'grade' }}</span>
           </span>
         </div>
         <span class="dept">

projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.scss

@@ -7,7 +7,7 @@ $font-white: #ffffff;
 $line-basic: 1px solid #dddddd;
 $bg-list-item-msg: #f0f4f6;
 $bg-list-hover: #efefef;
-$listH-row2: 80px;
+$listH-row2: 60px;
 $presence-size: 8px;
 $thumbnail-msize: 40px;
 
@@ -26,23 +26,6 @@ $thumbnail-msize: 40px;
   }
 }
 
-.badge-mobile-state {
-  position: absolute;
-  background-color: #ffffff;
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  bottom: 14px;
-  left: 60px;
-  text-align: center;
-  .mat-icon {
-    font-size: 14px;
-    width: 18px;
-    height: 18px;
-    line-height: 18px;
-  }
-}
-
 %list-item {
   position: relative;
   display: flex;
@@ -65,7 +48,7 @@ $thumbnail-msize: 40px;
   border-radius: 4px;
 }
 
-.list-item {
+/*.list-item {
   @extend %list-item;
   &:hover {
     background-color: $bg-list-hover;
@@ -73,13 +56,14 @@ $thumbnail-msize: 40px;
   .mat-checkbox {
     padding-left: 10px;
   }
-}
+}*/
 
 .item-default {
   display: flex;
   width: 100%;
   dt {
     flex: none;
+    position: relative;
     .thumbnail {
       width: $thumbnail-msize;
       height: auto;
@@ -92,34 +76,37 @@ $thumbnail-msize: 40px;
     margin: 0;
     padding: 0;
     width: calc(100% - 50px);
+    transform: translateY(2px);
     .detail {
-      div {
+      .user-info {
         display: flex;
         flex-flow: row;
+        margin-bottom: 2px;
         .work-status {
           margin-right: 4px;
           border-radius: 4px;
           padding: 0 6px;
           color: #ffffff;
-          font-size: 12px;
+          font-size: 0.9em;
           width: 40px;
           justify-items: center;
           height: 100%;
         }
         .name {
-          font-size: 13px;
           margin-bottom: 2px;
           color: $font-dark;
           width: calc(100% - 40px);
           @include ellipsis(1);
           b {
-            font-size: 16px;
             font-weight: 600;
           }
+          .grade {
+            font-size: 0.9em;
+          }
         }
       }
       .dept {
-        font-size: 12px;
+        font-size: 0.9em;
         color: $font-mid;
         @include ellipsis(1);
       }

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

@@ -60,8 +60,7 @@
             class="num bg-accent-light"
             *ngIf="roomInfo.roomType === RoomType.Multi"
           >
-            {{ roomInfo.joinUserCount }}
+            {{ roomInfo.joinUserCount }}{{ 'common.units.persons' | translate }}
-            {{ 'common.units.persons' | translate }}
           </div>
           <div *ngIf="!checkable && !roomInfo.receiveAlarm">
             <mat-icon>notifications_off</mat-icon>

projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss

@@ -24,23 +24,6 @@ $thumbnail-msize: 40px;
   }
 }
 
-.badge-timer {
-  position: absolute;
-  background-color: #ffffff;
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  bottom: 14px;
-  left: 46px;
-  text-align: center;
-  .mat-icon {
-    font-size: 14px;
-    width: 18px;
-    height: 18px;
-    line-height: 18px;
-  }
-}
-
 .profile {
   white-space: normal;
   text-align: left;
@@ -84,15 +67,7 @@ $thumbnail-msize: 40px;
     line-height: 20px;
   }
 }
-%list-item {
+
-  position: relative;
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: $listH-row2;
-  border-bottom: $line-basic;
-  padding: 20px;
-}
 .item-default {
   display: flex;
   width: 100%;
@@ -113,10 +88,9 @@ $thumbnail-msize: 40px;
         display: inline-flex;
         color: $font-dark;
         width: 100%;
-        margin-bottom: 2px;
         align-items: center;
         .name {
-          font-size: 16px;
+          font-size: 1.1em;
           @include ellipsis(1);
           font-weight: 600;
         }
@@ -126,17 +100,17 @@ $thumbnail-msize: 40px;
           fill: currentColor;
           height: 12px;
           width: 12px;
-          font-size: 16px;
+          font-size: 1.1em;
           color: #666666;
           margin-left: 4px;
           line-height: unset;
         }
         .num {
-          font-size: 12px;
+          font-size: 0.9em;
           flex: none;
           margin-left: 6px;
           border-radius: 3px;
-          padding: 1px 6px;
+          padding: 0 4px;
           color: #ffffff;
         }
       }
@@ -167,7 +141,6 @@ $thumbnail-msize: 40px;
 }
 
 .list-item {
-  @extend %list-item;
   &:hover {
     background-color: $bg-list-hover;
   }

projects/ucap-webmessenger-ui/src/assets/scss/partials/_list-item.scss

@@ -14,6 +14,19 @@
   -webkit-box-orient: vertical;
   word-wrap: break-word;
 }
+
+$listH-row2: 64px;
+$line-basic: 1px solid #dddddd;
+%list-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  width: 100%;
+  height: $listH-row2;
+  border-bottom: $line-basic;
+  padding: 0 20px;
+}
 .mat-card-header .mat-card-title {
   margin: 0 -16px;
   padding-bottom: 10px;
@@ -27,6 +40,7 @@
 }
 
 .list-item {
+  @extend %list-item;
   .thumbnail {
     &-mask {
       width: 40px;
@@ -34,6 +48,7 @@
       border-radius: 50%;
       overflow: hidden;
       margin-right: 16px;
+      position: relative;
       img {
         width: 40px;
         height: auto;
@@ -41,4 +56,25 @@
       }
     }
   }
+  span[class*='badge'] {
+    position: absolute;
+    background-color: #ffffff;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    bottom: 0px;
+    left: 30px;
+    display: flex;
+    align-items: center;
+    align-content: center;
+    justify-content: center;
+    .mat-icon {
+      font-size: 1em;
+      width: 18px;
+      height: 18px;
+      line-height: 18px;
+      min-width: 18px;
+      min-height: 18px;
+    }
+  }
 }

projects/ucap-webmessenger-ui/src/assets/scss/partials/_presence.scss

@@ -7,6 +7,7 @@
   text-indent: -10000000px;
   margin-right: 4px;
   border-radius: 50%;
+  transform: translateY(12px);
 }
 .presence {
   @extend %presence;