대화방 검색, 사운드 뷰 컴포넌트, 이벤트 - 수정중

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

@@ -50,6 +50,16 @@
           line-height: 40px;
         }
       }
+      width: 50px;
+      height: 50px;
+      &.thumbnail-mask {
+        border-radius: 50%;
+        overflow: hidden;
+        img {
+          width: 50px;
+          height: auto;
+        }
+      }
     }
     .room-info {
       display: flex;

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

@@ -90,8 +90,8 @@ $lg-red: (
 $aquaBlue-daesang: (
   50: #f9feff,
   //#e0f7fa,
-    100: #b2ebf2,
+    /* 100: #b2ebf2,*/ 100: #ebfdff,
-  200: #4dd0e1,
+  200: #65e4f5,
   //#80deea,
     300: #4dd0e1,
   400: #26c6da,
@@ -379,4 +379,25 @@ $daesang-grey: (
       background-color: mat-color($accent, B100);
     }
   }
+
+  .message-row {
+    .message-main {
+      .bubble {
+        background-color: mat-color($accent, 100);
+        border: 1px solid mat-color($accent, 200);
+        overflow: hidden;
+      }
+    }
+    &.me {
+      .message-main {
+        .bubble {
+          background-color: #ffffff;
+          border: 1px solid mat-color($primary, 300);
+          .event-info {
+            border-radius: 0 0 0 6px;
+          }
+        }
+      }
+    }
+  }
 }

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/schedule.component.html

@@ -1,4 +1,4 @@
-<div class="event-main">
+<div class="event-main bg-accent-dark">
   <div class="event-header">
     <ng-container
       *ngIf="!!message.sentMessageJson && !!message.sentMessageJson.contents"
@@ -20,15 +20,16 @@
     </ng-container>
   </div>
   <ul class="event-info">
-    <li class="event-title">
+    <li class="event-date bg-accent-brightest">
+      <span class="bg-accent-dark">날짜</span
+      >{{ date | ucapDate: 'YYYY.MM.DD' }}
+    </li>
+    <li class="event-time bg-accent-brightest">
+      <span class="bg-accent-dark">시간</span>{{ date | ucapDate: 'a hh:mm' }}
+    </li>
+    <li class="event-content">
       {{ message.sentMessageJson.title }}
     </li>
-    <li class="event-date">
-      <span>날짜</span>{{ date | ucapDate: 'YYYY.MM.DD' }}
-    </li>
-    <li class="event-time">
-      <span>시간</span>{{ date | ucapDate: 'a hh:mm' }}
-    </li>
   </ul>
 
   <!-- <div class="btn-box">

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/schedule.component.scss

@@ -1,32 +1,49 @@
 .event-main {
   flex-direction: column;
   text-align: left;
+  padding: 4px;
   .event-header {
-    padding: 10px;
+    padding: 10px 10px 10px 36px;
-    background-color: #efefef;
-    text-align: center;
     font-size: 14px;
     font-weight: 600;
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-calendar'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: 10px center;
+    border-radius: 3px 3px 0 0;
+    min-width: 200px;
+    vertical-align: middle;
+    stroke: #ffffff;
   }
   .event-info {
-    padding: 10px 14px;
+    border-radius: 0 0 6px 6px;
-    line-height: 1.6em;
+    background-color: #ffffff;
     li {
-      margin-bottom: 4px;
       &.event-title {
-        border-bottom: 1px solid #dddddd;
         margin-bottom: 10px;
         padding-bottom: 10px;
         font-size: 14px;
       }
       &.event-date,
       &.event-time {
-        color: #666666;
+        padding: 4px 10px;
+        border-bottom: 1px dotted #dddddd;
+        span {
+          width: 60px;
+          padding: 1px 6px;
+          margin-right: 6px;
+          border-radius: 100px;
+          line-height: 20px;
+          display: inline-flex;
+          justify-content: center;
+          font-size: 0.96em;
+          margin-bottom: 2px;
+        }
       }
-      span {
+      &.event-content {
-        padding: 2px 6px;
+        padding: 10px;
-        background-color: #efefef;
+        color: #444444;
-        margin-right: 10px;
+        font-weight: normal;
+        font-size: 1em;
       }
     }
   }
@@ -40,3 +57,11 @@
     }
   }
 }
+
+::ng-deep .message-row.me > .event-info {
+  border-radius: 0 0 0 6px;
+}
+
+.feather-calendar {
+  stroke: #ffffff;
+}

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

@@ -129,30 +129,16 @@
       <ng-template #contents>
         <div
           *ngIf="getUserProfile(message.senderSeq) != ''"
-          class="profile-img"
+          class="profile-img thumbnail-mask"
         >
-          <!-- <img
+            <img
-                class="avatar"
+              class="avatar"
-                style="width: 50px; height: 50px;"
+              ucapImage
-                [src]="
+              [base]="profileImageRoot"
-                  profileImageRoot
+              [path]="getUserProfile(message.senderSeq)"
-                    | ucapUiImaage
+              [default]="'assets/images/img_nophoto_50.png'"
-                      : {
+              (click)="onClickOpenProfile($event, getUerInfo(message.senderSeq))"
-                          path: getUserProfile(message.senderSeq),
+            />
-                          default: 'assets/images/img_nophoto_50.png'
-                        }
-                    | async
-                "
-              /> -->
-          <img
-            class="avatar"
-            style="width: 50px; height: 50px;"
-            ucapImage
-            [base]="profileImageRoot"
-            [path]="getUserProfile(message.senderSeq)"
-            [default]="'assets/images/img_nophoto_50.png'"
-            (click)="onClickOpenProfile($event, getUerInfo(message.senderSeq))"
-          />
           <!-- <ucap-ui-imaage
             [style]="'width: 50px; height: 50px;'"
             [imageClass]="'avatar'"

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

@@ -31,8 +31,15 @@ $meBox-bg: #ffffff;
     margin-left: 0;
     .profile-img {
       flex: 0 0 auto;
-      img {
+      &.thumbnail-mask {
         border-radius: 50%;
+        width: 50px;
+        height: 50px;
+        overflow: hidden;
+        img {
+          width: 50px;
+          height: auto;
+        }
       }
     }
   }
@@ -58,7 +65,7 @@ $meBox-bg: #ffffff;
       color: #333333;
       margin-bottom: 6px;
     }
-    .bubble {
+    /*.bubble {
       border: 1px solid $otherBox-line;
       font-weight: 900;
       position: relative;
@@ -91,6 +98,14 @@ $meBox-bg: #ffffff;
         left: -10px;
         top: 5px;
       }
+    }*/
+    .bubble {
+      border-radius: 0 10px 10px 10px;
+      font-weight: 900;
+      position: relative;
+      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
+      word-break: break-all;
+      word-wrap: break-word;
     }
   }
   .secondary-text {
@@ -110,10 +125,10 @@ $meBox-bg: #ffffff;
   }
 }
 
-.message-row.me > .bubble {
+/*.message-row.me > .bubble {
   border: 1px solid $meBox-line;
   background-color: $meBox-bg;
-}
+}*/
 .message-row.me {
   .profile-img {
     display: none;
@@ -125,7 +140,10 @@ $meBox-bg: #ffffff;
     text-align: right;
     margin-left: 10px;
     margin-right: 20px;
-    & .bubble:before {
+    .bubble {
+      border-radius: 10px 10px 0 10px;
+    }
+    /* & .bubble:before {
       content: '';
       width: 0px;
       height: 0px;
@@ -150,7 +168,7 @@ $meBox-bg: #ffffff;
       left: initial;
       right: -10px;
       top: 5px;
-    }
+    }*/
   }
 }
 .bubble-main {

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

@@ -25,14 +25,82 @@
     </form>
   </div>
   <div class="btns">
-    <button mat-stroked-button (click)="onClickSearchAndPrev()">
+    <button
-      <span class="mdi mdi-arrow-up-bold-box-outline mid-18px"></span>
+      mat-stroked-button
+      (click)="onClickSearchAndPrev()"
+      class="btn-toggle"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="feather feather-arrow-up"
+      >
+        <path d="M3.3,9v6.7c0,0.9,0.7,1.7,1.7,1.7h10c0.9,0,1.7-0.7,1.7-1.7V9" />
+        <polyline class="st0" points="13.3,6 10,2.7 6.7,6 " />
+        <line class="st0" x1="10" y1="2.7" x2="10" y2="12.5" />
+      </svg>
     </button>
-    <button mat-stroked-button (click)="onClickPrevSearch()">
+    <button mat-stroked-button (click)="onClickPrevSearch()" class="btn-toggle">
-      <span class="mdi mdi-arrow-up-bold mid-18px"></span>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="feather feather-arrow-up"
+      >
+        <line class="st0" x1="10" y1="15.8" x2="10" y2="4.2" />
+        <polyline class="st0" points="4.2,10 10,4.2 15.8,10 " />
+      </svg>
     </button>
-    <button mat-stroked-button (click)="onClickNextSearch()">
+    <button mat-stroked-button (click)="onClickNextSearch()" class="btn-toggle">
-      <span class="mdi mdi-arrow-down-bold mid-18px"></span>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="feather feather-arrow-up"
+      >
+        <line class="st0" x1="10" y1="4.2" x2="10" y2="15.8" />
+        <polyline class="st0" points="15.8,10 10,15.8 4.2,10 " />
+      </svg>
     </button>
+    <!--<mat-button-toggle-group>
+      <mat-button-toggle></mat-button-toggle>
+      <mat-button-toggle >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="feather feather-arrow-up"
+        >
+          <line x1="12" y1="19" x2="12" y2="5"></line>
+          <polyline points="5 12 12 5 19 12"></polyline>
+        </svg>
+      </mat-button-toggle>
+      <mat-button-toggle ></mat-button-toggle>
+    </mat-button-toggle-group>-->
   </div>
 </div>

projects/ucap-webmessenger-ui-chat/src/lib/components/search.component.scss

@@ -1,6 +1,7 @@
 .chatroom-search {
   display: flex;
   flex: 1 1 auto;
+  justify-items: center;
   .search-form {
     flex-flow: row;
     flex: 1 1 auto;
@@ -11,6 +12,10 @@
         flex-flow: row;
         flex: 1 1 auto;
         margin-right: 20px;
+        .mat-form-field-label,
+        .mat-hint {
+          color: rgba(0, 0, 0, 0.54);
+        }
       }
       .text-amount {
         display: inline-flex;
@@ -24,3 +29,41 @@
     flex: 0 0 0%;
   }
 }
+
+.mat-form-field-label,
+.mat-hint {
+  color: rgba(0, 0, 0, 0.54);
+}
+
+::ng-deep .btns {
+  border: 1px solid #dddddd;
+  border-radius: 4px;
+  height: 42px;
+  .mat-stroked-button {
+    border: none;
+    min-width: 40px;
+    height: 42px;
+    padding: 0 10px;
+    &.btn-toggle {
+      display: flex;
+      border-right: 1px solid #dddddd;
+      justify-items: center;
+      &:last-child {
+        border-right: none;
+      }
+      .mat-button-wrapper {
+        display: flex;
+        line-height: inherit;
+        justify-content: center;
+        justify-items: center;
+        width: 20px;
+        height: 20px;
+        svg {
+          width: 100%;
+          height: 100%;
+          stroke: #555555;
+        }
+      }
+    }
+  }
+}

projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.html

@@ -60,7 +60,19 @@
         (loadeddata)="onLoadedDataAudio()"
       ></audio>
       <div class="circle-box">
-        <mat-icon class="ucap-sound-viewer-icon">music_note</mat-icon>
+        <!--<mat-icon class="ucap-sound-viewer-icon">music_note</mat-icon>-->
+        <div class='sound-wave'>
+          <div class='sound-bar bg-accent-darkest'></div>
+          <div class='sound-bar bg-accent-darkest'></div>
+          <div class='sound-bar bg-accent-darkest'></div>
+          <div class='sound-bar bg-accent-darkest'></div>
+          <div class='sound-bar bg-accent-darkest'></div>
+          <div class='sound-bar bg-accent-darkest'></div>
+          <div class='sound-bar bg-accent-darkest'></div>
+          <div class='sound-bar bg-accent-darkest'></div>
+          <div class='sound-bar bg-accent-darkest'></div>
+          <div class='sound-bar bg-accent-darkest'></div>
+        </div>
       </div>
     </div>
     <div class="viewer-bottom">

projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.scss

@@ -13,7 +13,7 @@
     }
 
     .ucap-sound-viewer-title {
-      font-size:16px;
+      font-size: 16px;
     }
     .stroke-bar {
       width: 1px;
@@ -33,29 +33,38 @@
     width: 100%;
     height: calc(100% - 60px);
 
-    .circle-box{
+    .circle-box {
-      display:flex;
+      position: relative;
-      width:140px;
+      display: flex;
-      height:140px;
+      width: 140px;
-      border-radius:50%;
+      height: 140px;
+      border-radius: 50%;
       justify-content: center;
       align-items: center;
-      border:2px solid #ffffff;
+      border: 2px solid #ffffff;
-      background-color:rgba(256, 256, 256, 0.7);
+      background-color: rgba(256, 256, 256, 0.7);
-      .mat-icon{
+      .mat-icon {
         font-size: 100px;
         height: 100px;
         width: 100px;
       }
+      .sound-wave {
+        height: 80px;
+        left: 50%;
+        margin: -35px 0 0 -35px;
+        position: absolute;
+        bottom: 30px;
+        width: 70px;
+      }
     }
 
-    .ucap-sound-viewer-sound-icon{
+    .ucap-sound-viewer-sound-icon {
       width: 100%;
-       height: calc(100% - 80px);
+      height: calc(100% - 80px);
     }
-    .viewer-bottom{
+    .viewer-bottom {
       background-color: #212121;
-      color:#ffffff;
+      color: #ffffff;
       .ucap-sound-viewer-sound-time {
         width: 100%;
         height: 30px;
@@ -78,22 +87,83 @@
     flex: 1 1 auto;
   }
   .ucap-sound-viewer-action {
-    .mat-icon{
+    .mat-icon {
       font-size: 40px;
       width: 100%;
       height: 100%;
-      line-height:40px;
+      line-height: 50px;
     }
   }
 }
 
+.sound-bar {
+  bottom: 1px;
+  height: 10px;
+  position: absolute;
+  width: 5px;
+  animation: sound-play 0ms -800ms linear infinite alternate;
+}
+.sound-bar:nth-child(1) {
+  left: 0px;
+  animation-duration: 474ms;
+}
+.sound-bar:nth-child(2) {
+  left: 7px;
+  animation-duration: 433ms;
+}
+.sound-bar {
+  left: 14px;
+  animation-duration: 407ms;
+}
+.sound-bar:nth-child(4) {
+  left: 21px;
+  animation-duration: 458ms;
+}
+.sound-bar:nth-child(5) {
+  left: 28px;
+  animation-duration: 400ms;
+}
+.sound-bar:nth-child(6) {
+  left: 35px;
+  animation-duration: 427ms;
+}
+.sound-bar:nth-child(7) {
+  left: 42px;
+  animation-duration: 441ms;
+}
+.sound-bar:nth-child(8) {
+  left: 49px;
+  animation-duration: 419ms;
+}
+.sound-bar:nth-child(9) {
+  left: 56px;
+  animation-duration: 487ms;
+}
+.sound-bar:nth-child(10) {
+  left: 63px;
+  animation-duration: 442ms;
+}
+
+@keyframes sound-play {
+  0% {
+    opacity: 0.35;
+    height: 10px;
+  }
+  100% {
+    opacity: 1;
+    height: 60px;
+  }
+}
+
 mat-slider {
   width: 94%;
 }
 
-::ng-deep .mat-slider-horizontal .mat-slider-track-background{
+::ng-deep .mat-slider-horizontal .mat-slider-track-background {
   background-color: #999999 !important;
 }
-::ng-deep .mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb{
+::ng-deep
+  .mat-slider-min-value:not(.mat-slider-thumb-label-showing)
+  .mat-slider-thumb {
   border-color: #999999 !important;
 }