대화방 header수정

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

@@ -8,20 +8,33 @@
         <button
           mat-icon-button
           aria-label="chats button"
-          fxHide.gt-md
           class="responsive-chats-button"
         >
           <mat-icon>chat</mat-icon>
         </button>
         <!-- / RESPONSIVE CHATS BUTTON-->
+        <button
+          mat-icon-button
+          aria-label="chats button"
+          class="responsive-chats-button"
+           *ngIf="!!roomInfo && roomInfo.isTimeRoom">
+          <mat-icon>timer</mat-icon>
+        </button>
       </div>
-      <div class="room-name">
+      <div class="room-info">
-        {{ getRoomName() }}
+        <h3 class="room-name">
+          {{ getRoomName() }}
+        </h3>
+        <!-- Timer Room Info -->
+        <div *ngIf="roomInfo && roomInfo.isTimeRoom" class="room-type text-accent-color ">
+          <span class="bg-accent-light">{{ getConvertTimer(roomInfo.timeRoomInterval) }} </span>비밀 대화방입니다.
+        </div>
+        <!-- Timer Room Info -->
       </div>
-      <div *ngIf="!!roomInfo && roomInfo.isTimeRoom">
+      <!--<div *ngIf="!!roomInfo && roomInfo.isTimeRoom">
         <mat-icon>timer</mat-icon>
         {{ getConvertTimer(roomInfo.timeRoomInterval) }}
-      </div>
+      </div>-->
       <div class="room-option">
         <button
           *ngIf="!!roomInfo"
@@ -69,9 +82,7 @@
     (fileDragOver)="onFileDragOver()"
     (fileDragLeave)="onFileDragLeave()"
   >
-    <!-- Timer Room Info -->
+
-    <span *ngIf="roomInfo && roomInfo.isTimeRoom">비밀 대화방입니다.</span>
-    <!-- Timer Room Info -->
 
     <!-- CHAT MESSAGES -->
     <perfect-scrollbar

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

@@ -1,278 +1,85 @@
-/*.chat-messages {
+@charset 'utf-s';
-  position: relative;
+:host {
-  padding: 16px 40px;
-
-  .message-row {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-end;
-    padding: 0 16px 4px 16px;
-
-    .avatar {
-      position: absolute;
-      left: -32px;
-      margin: 0;
-    }
-
-    .bubble {
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 12px;
-      max-width: 100%;
-
-      .message {
-        white-space: pre-wrap;
-        line-height: 1.2;
-      }
-
-      .time {
-        position: absolute;
-        display: none;
-        width: 100%;
-        font-size: 11px;
-        margin-top: 8px;
-        top: 100%;
-        left: 0;
-        white-space: nowrap;
-      }
-    }
-
-    &.contact {
-      .bubble {
-        border-top-left-radius: 5px;
-        border-bottom-left-radius: 5px;
-
-        border-top-right-radius: 20px;
-        border-bottom-right-radius: 20px;
-
-        .time {
-          margin-left: 12px;
-        }
-      }
-
-      &.first-of-group {
-        .bubble {
-          border-top-left-radius: 20px;
-        }
-      }
-
-      &.last-of-group {
-        .bubble {
-          border-bottom-left-radius: 20px;
-        }
-      }
-    }
-
-    &.me {
-      padding-left: 40px;
-
-      .avatar {
-        order: 2;
-        margin: 0 0 0 16px;
-      }
-
-      .bubble {
-        margin-left: auto;
-
-        border-top-left-radius: 20px;
-        border-bottom-left-radius: 20px;
-
-        border-top-right-radius: 5px;
-        border-bottom-right-radius: 5px;
-
-        .time {
-          justify-content: flex-end;
-          right: 0;
-          margin-right: 12px;
-        }
-      }
-
-      &.first-of-group {
-        .bubble {
-          border-top-right-radius: 20px;
-        }
-      }
-
-      &.last-of-group {
-        .bubble {
-          border-bottom-right-radius: 20px;
-        }
-      }
-    }
-
-    &.contact + .me,
-    &.me + .contact {
-      padding-top: 20px;
-      margin-top: 20px;
-    }
-
-    &.first-of-group {
-      .bubble {
-        border-top-left-radius: 20px;
-        padding-top: 13px;
-      }
-    }
-
-    &.last-of-group {
-      .bubble {
-        border-bottom-left-radius: 20px;
-        padding-bottom: 13px;
-
-        .time {
-          display: flex;
-        }
-      }
-    }
-  }
-}
-*/
-$otherBox-line: #cccccc;
-$otherBox-bg: #ffffff;
-$meBox-line: #cccccc;
-$meBox-bg: #ffffff;
-
-.chat-messages {
-  padding: 30px 40px;
   display: flex;
-  flex-direction: column;
-}
-.information-msg {
   width: 100%;
   height: 100%;
-  text-align: center;
-  background-color: #dddddd;
-  padding: 10px;
-  margin: 10px 0;
 }
-
+@mixin ellipsis($row) {
-.message-row {
+  overflow: hidden;
-  margin-bottom: 20px;
+  text-overflow: ellipsis;
-  .date-splitter {
+  @if $row == 1 {
     display: block;
-    width: 100%;
-    margin-bottom: 10px;
-  }
-  .chat-row {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    .profile-img {
-      flex: 0 0 auto;
-      img{
-        border-radius: 50%;
-      }
-    }
-  }
-  &.me {
-    .chat-row {
-      flex-direction: row-reverse;
-      .profile-info {
-        flex-direction: row-reverse;
-        display: flex;
-        justify-content: flex-end;
-      }
-    }
-  }
-
-  .message-main {
-    margin-left: 20px;
-    margin-right: 10px;
-    .chat-name {
-      font-size: 12px;
-      color: #333333;
-      margin-bottom: 6px;
-    }
-    .bubble {
-      border: 1px solid $otherBox-line;
-      font-weight: 900;
-      position: relative;
-      background-color: $otherBox-bg;
-      border-radius: 4px;
-      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
-      &:before {
-        content: '';
-        width: 0px;
-        height: 0px;
-        position: absolute;
-        border-left: 6px solid transparent;
-        border-right: 6px solid $otherBox-line;
-        border-top: 6px solid $otherBox-line;
-        border-bottom: 6px solid transparent;
-        left: -12px;
-        top: 4px;
-      }
-      &:after {
-        content: '';
-        width: 0px;
-        height: 0px;
-        position: absolute;
-        border-left: 6px solid transparent;
-        border-right: 6px solid $otherBox-bg;
-        border-top: 6px solid $otherBox-bg;
-        border-bottom: 6px solid transparent;
-        left: -10px;
-        top: 5px;
-      }
-    }
-  }
-  .secondary-text {
-    align-self: flex-end;
-    font-size: 11px;
-    color: #666666;
-    word-wrap: break-word;
     white-space: nowrap;
-  }
+    word-wrap: normal;
-  &.me {
+  } @else if $row >= 2 {
-    .secondary-text {
+    display: -webkit-box;
-      text-align: end;
+    -webkit-line-clamp: $row;
-    }
+    -webkit-box-orient: vertical;
+    word-wrap: break-word;
   }
 }
+.container{
+  position: relative;
+  width:100%;
+}
+.chat-toolbar {
+  width:100%;
+  height: 70px;
+  min-height: 70px;
+  align-items: center;
+  background-color: #ffffff !important;
+  border: 1px solid #dddddd;
 
-.message-row.me > .bubble {
+  .chat-header {
-  border: 1px solid $meBox-line;
+    width: 100%;
-  background-color: $meBox-bg;
+    align-items: center;
-}
+    display: flex;
-.message-row.me {
+    justify-content: space-between;
-  .profile-img {
+    .profile-img {
-    display: none;
+      margin-right: 20px;
-  }
+      .responsive-chats-button {
-  .chat-name {
+        display: none;
-    display: none;
+        &:last-child {
-  }
+          display: block;
-  .message-main {
+          padding: 0;
-    text-align: right;
+          width: 40px;
-    margin-left: 10px;
+          height: 40px;
-    margin-right: 20px;
+          border-radius: 50%;
-    & .bubble:before {
+          background-color: #252525;
-      content: '';
+          color: #efefef;
-      width: 0px;
+          font-size: 16px;
-      height: 0px;
+          line-height: 40px;
-      position: absolute;
+        }
-      border-left: 6px solid $meBox-line;
+      }
-      border-right: 6px solid transparent;
-      border-top: 6px solid $meBox-line;
-      border-bottom: 6px solid transparent;
-      left: initial;
-      right: -12px;
-      top: 4px;
     }
-    & .bubble:after {
+    .room-info {
-      content: '';
+      display:flex;
-      width: 0px;
+      flex-flow: column;
-      height: 0px;
+      overflow: hidden;
-      position: absolute;
+      .room-name {
-      border-left: 6px solid $meBox-bg;
+        font-size: 16px;
-      border-right: 6px solid transparent;
+        line-height: normal;
-      border-top: 6px solid $meBox-bg;
+        @include ellipsis(1);
-      border-bottom: 6px solid transparent;
+      }
-      left: initial;
+      .room-type {
-      right: -10px;
+        font-size: 14px;
-      top: 5px;
+        line-height: normal;
+        margin-top: 6px;
+        height:20px;
+        span{
+          border-radius:10px;
+          padding:1px 10px;
+          margin-right:6px;
+          font-size:13px;
+        }
+      }
+    }
+    .room-option {
+      wdith: 100%;
+      margin-left: auto;
     }
   }
 }
+.chat-content {
+  overflow: auto;
+}

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

@@ -97,6 +97,10 @@ $lg-red: (
     background: mat-color($accent, 600);
     color: mat-color($primary, default-contrast);
   }
+  .bg-accent-light {
+    background: mat-color($accent, 300);
+    color: mat-color($primary, default-contrast);
+  }
   .bg-accent-color {
     background: mat-color($accent);
     color: mat-color($accent, default-contrast);
@@ -107,6 +111,9 @@ $lg-red: (
   .text-accent-color {
     color: mat-color($accent);
   }
+  .text-warn-color{
+    color:mat-color($warn);
+  }
   .border-primary-color {
     border: 1px solid mat-color($primary);
   }

projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html

@@ -37,6 +37,7 @@
           <ucap-chat-message-box-information
             *ngSwitchCase="EventType.Exit"
             [message]="message"
+            class="information-msg"
           >
           </ucap-chat-message-box-information>
           <ucap-chat-message-box-information

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

@@ -9,7 +9,7 @@
         [path]="imagePath"
         [default]="defaultPath"
       />
-      <span *ngIf="roomInfo.isTimeRoom" class="badge-timer">
+      <span *ngIf="roomInfo.isTimeRoom" class="text-warn-color badge-timer">
           <mat-icon>timer</mat-icon>
       </span>
       <!-- <ucap-ui-imaage

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

@@ -35,7 +35,6 @@ $thumbnail-msize: 40px;
   text-align:center;
   .mat-icon{
     font-size:14px;
-    color:red;
      width: 18px;
     height: 18px;
     line-height:18px;