buddy list modify

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

@@ -1,10 +1,12 @@
 @charset 'utf-8';
 
 $listH-row3: 90px;
+$listH-row2: 60px;
 $checkbox-size: 16px;
 $presence-size: 10px;
-$thumbnail-msize: 50px !global;
+$thumbnail-msize: 40px;
-$bg-list-hover: #efefef !global;
+$bg-list-hover: #efefef;
+$bg-list-item-msg: #f0f4f6;
 
 @mixin ellipsis($row) {
   overflow: hidden;
@@ -28,9 +30,6 @@ $bg-list-hover: #efefef !global;
 @mixin visible($sh) {
   display: $sh;
 }
-@function position-m($h, $o, $p) {
-  @return ($h - $o - $p) / 2;
-}
 @mixin presence-status($status) {
   @if $status == pcOn {
     background-color: #28ad66;
@@ -42,3 +41,6 @@ $bg-list-hover: #efefef !global;
     background-color: #f0c10a;
   }
 }
+@function position-m($h, $o, $p) {
+  @return ($h - $o - $p) / 2;
+}

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

@@ -1,20 +1,29 @@
 <!--체크박스 보여줄때는 <div class="list-item checkbox" matRipple>  클래스에 checkbox만 추가-->
-<div class="list-item checkbox" matRipple>
+<div class="list-item" matRipple>
-  <!--presence-pcOn , presence-pcOut  presence-pcOff , presence-pcOther-->
+  <!--pcOn , pcOut  pcOff , pcOther-->
-  <span class="presence-pcOn" *ngIf="presence">{{ presence.pcStatus }} </span>
+  <span class="presence pcOn" *ngIf="presence">{{ presence.pcStatus }} </span>
-  <div class="item-default">
+  <dl class="item-default">
+    <dt>
       <img
         class="thumbnail"
         src="{{ profileImageRoot + userInfo.profileImageFile }}"
       />
-    <ul class="info">
+    </dt>
-      <li class="name">{{ userInfo.name }} {{ userInfo.grade }}</li>
+    <dd class="info">
-      <li class="dept">
+      <div class="detail">
+        <span class="name">
+          <b>{{ userInfo.name }}</b>
+          {{ userInfo.grade }}
+        </span>
+        <span class="dept">
           {{ userInfo.deptName }}
           가나다라마바사아자차카파하가나다라마바사아자차카파하하가나다
-      </li>
+        </span>
-      <li class="record">{{ userInfo.intro }}</li>
-    </ul>
       </div>
+      <div class="msg-status">
+        {{ userInfo.intro }}상태메시지 상태메시지 상태메시지
+      </div>
+    </dd>
+  </dl>
   <mat-checkbox *ngIf="checkable"></mat-checkbox>
 </div>

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

@@ -6,21 +6,31 @@
   display: flex;
   align-items: center;
   width: 100%;
-  height: $listH-row3;
+  height: $listH-row2;
   border-bottom: 1px solid #dddddd;
-  padding: 14px;
+  padding: 0 10px;
 }
-
 %presence {
   display: inline-block;
   width: $presence-size;
   height: $presence-size;
-  vertical-align: middle;
+  //margin-top: position-m($listH-row2, $presence-size, 0);
-  margin-top: position-m($thumbnail-msize, $presence-size, 0) * -1;
+  align-items: center;
   text-indent: -10000000px;
-  margin-right: 10px;
+  margin-right: 8px;
   border-radius: 100px;
 }
+%msg-status {
+  display: inline-block;
+  height: 40px;
+  background-color: $bg-list-item-msg;
+  font-size: 11px;
+  padding: 2px 6px;
+  vertical-align: middle;
+  align-items: center;
+  @include ellipsis(20);
+  @include border-radius(4px);
+}
 
 .list-item {
   @extend %list-item;
@@ -28,20 +38,17 @@
     background-color: $bg-list-hover;
   }
   .presence {
-    &-pcOn {
     @extend %presence;
+    &.pcOn {
       @include presence-status(pcOn);
     }
-    &-pcOut {
+    &.pcOut {
-      @extend %presence;
       @include presence-status(pcOut);
     }
-    &-pcOff {
+    &.pcOff {
-      @extend %presence;
       @include presence-status(pcOff);
     }
-    &-pcOther {
+    &.pcOther {
-      @extend %presence;
       @include presence-status(pcOther);
     }
   }
@@ -60,39 +67,65 @@
     @include border-radius(100px);
   }
   .info {
+    position: relative;
     display: inline-block;
     margin: 0;
     padding: 0;
-    width: calc(100% - 62px);
+    width: calc(100% - 50px);
-    li {
+    .detail {
-      margin-bottom: 4px;
+      display: inline-block;
+      float: left;
+      .name {
+        font-size: 14px;
+        margin-bottom: 2px;
         @include ellipsis(1);
-      &.name {
+        b {
-        display: block;
-        font-size: 15px;
           font-weight: bold;
+        }
+      }
+      .dept {
+        font-size: 12px;
         @include ellipsis(1);
       }
-      &.dept {
-        display: block;
-        font-size: 13px;
     }
-      &.record {
+    .msg-status {
-        //@include visible(none);
+      display: inline-block;
+      float: right;
+      @extend %msg-status;
     }
   }
 }
-}
+//가변에 따른 list-item width값 변경
-
 .list-item {
-  span[class*='presence'] {
+  .item-default {
+    .detail {
+      width: 60%;
+    }
+    .msg-status {
+      width: 38%;
+    }
+  }
+  .presence {
     + .item-default {
       width: calc(100% - 20px);
     }
   }
   &.checkbox {
+    .presence {
+      + .item-default {
+        width: calc(100% - 50px);
+      }
+    }
     .item-default {
       width: calc(100% - 30px);
+      .info {
+        .detail {
+          width: 100%;
+        }
+        .msg-status {
+          @include visible(none);
+        }
+      }
     }
   }
 }