대화방검색, 스티커, 번역 수정중

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

@@ -92,6 +92,7 @@
     }
     .room-option {
       margin-left: auto;
+      margin-right: -10px;
     }
   }
   .chat-search-frame {

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

@@ -8,6 +8,7 @@
   font-weight: 600;
   span {
     margin-left: auto;
+    margin-right: -10px;
   }
 }
 ::ng-deep .mat-tab-labels {

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.scss

@@ -69,7 +69,8 @@ $tablet-s-width: 768px;
   padding: 0 10px;
   height: calc(100% - 450px);
   @media screen and (max-width: #{$tablet-s-width}), (max-height: 800px) {
-    height: calc(100% - 160px);
+    margin-top: 10px;
+    height: calc(100% - 170px);
   }
   overflow-y: auto;
   flex-wrap: wrap;

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

@@ -45,8 +45,12 @@ textarea[name='message'] {
   line-height: 1.2em;
   font-size: 0.9em;
 }
+.mat-form-field-flex {
+  padding-top: 0;
+}
 .mat-form-field-underline {
   background-color: none;
+  transform: scaleY(0);
 }
 ::ng-deep .send-message-button {
   margin-left: 20px;

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

@@ -21,16 +21,16 @@
   </div>
   <ul class="event-info">
     <li class="event-date bg-accent-brightest">
-      <span class="text-accent-darkest">{{
+      <label class="text-accent-darkest">{{
         'common.units.date' | translate
-      }}</span
+      }}</label
-      >{{ date | ucapDate: 'YYYY.MM.DD' }}
+      ><span>{{ date | ucapDate: 'YYYY.MM.DD' }}</span>
     </li>
     <li class="event-time bg-accent-brightest">
-      <span class="text-accent-darkest">{{
+      <label class="text-accent-darkest">{{
         'common.units.time' | translate
-      }}</span
+      }}</label
-      >{{ date | ucapDate: 'a hh:mm' }}
+      ><span>{{ date | ucapDate: 'a hh:mm' }}</span>
     </li>
     <li class="event-content">
       {{ message.sentMessageJson.title }}

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

@@ -29,8 +29,14 @@
       &.event-time {
         padding: 4px 10px;
         border-bottom: 1px dotted #dddddd;
+        label {
+          margin-right: 10px;
+          flex: 0 0 auto;
+          font-size: 0.96em;
+          font-weight: 600;
+          width: 30px;
+        }
         span {
-          width: 60px;
           padding: 1px 6px;
           margin-right: 6px;
           border-radius: 100px;
@@ -39,7 +45,7 @@
           justify-content: center;
           font-size: 0.96em;
           margin-bottom: 2px;
-          color: #777777;
+          color: #444444;
         }
       }
       &.event-content {

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

@@ -1,6 +1,6 @@
 <div fxFlex fxLayout="row" class="chatroom-search">
   <div fxLayout="row" fxLayoutAlign="start center" class="input search-form">
-    <form [formGroup]="fgSearch" class="w-100-p">
+    <form [formGroup]="fgSearch">
       <i class="material-icons icon-search"> </i>
       <mat-form-field floatLabel="never">
         <input
@@ -31,10 +31,10 @@
           <mat-icon>close</mat-icon>
         </button>
       </mat-form-field>
-      <span class="stroke-bar"></span>
+      <span class="text-amount">{{ curIndex }} / {{ totalCount }}</span>
     </form>
   </div>
-
+  <span class="stroke-bar"></span>
   <div class="btns">
     <button
       *ngIf="false"
@@ -59,39 +59,11 @@
         <line class="st0" x1="10" y1="2.7" x2="10" y2="12.5" />
       </svg>
     </button>
-    <button mat-stroked-button (click)="onClickPrevSearch()" class="btn-toggle">
+    <button class="icon-button btn-search" (click)="onClickPrevSearch()">
-      <svg
+      <i class="mid mdi-arrow-up"></i>
-        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()" class="btn-toggle">
+    <button class="icon-button btn-search" (click)="onClickNextSearch()">
-      <svg
+      <i class="mid mdi-arrow-down"></i>
-        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>
@@ -115,27 +87,11 @@
       </mat-button-toggle>
       <mat-button-toggle ></mat-button-toggle>
     </mat-button-toggle-group>-->
-  </div>
-  <span class="stroke-bar"></span>
-  <span class="text-amount">{{ curIndex }} / {{ totalCount }}</span>
     <button
-    class="btn-close-searchbox bg-accent-dark"
+      class="icon-button btn-close-searchbox bg-accent-dark"
       (click)="inputSearch.value = ''; onClickSearchCancel()"
     >
-    <svg
+      <i class="mid mdi-window-close"></i>
-      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-x"
-    >
-      <line x1="18" y1="6" x2="6" y2="18"></line>
-      <line x1="6" y1="6" x2="18" y2="18"></line>
-    </svg>
     </button>
+  </div>
 </div>

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

@@ -1,18 +1,31 @@
+$tablet-l-width: 1024px;
+$tablet-s-width: 768px;
+
 .chatroom-search {
   display: flex;
-  flex: 1 1 auto;
+  flex: 0 0 auto;
   justify-items: center;
+  width: 100%;
   .search-form {
     flex-flow: row;
     padding: 0 0 0 20px;
-    flex: 1 1 auto;
+    width: calc(100% - 126px);
+    position: relative;
+    @media screen and (max-width: #{$tablet-s-width}),
+    (max-height: 600px) {
+      padding: 0 0 0 14px;
+      flex: 0 0 auto;
+    }
     form {
-      display: flex;
+      display: inline-flex;
-      .mat-form-field {
+      flex: 0 0 auto;
       width: 100%;
+      .mat-form-field {
         flex-flow: row;
         flex: 1 1 auto;
-        margin-right: 20px;
+        width: 70%;
+        align-items: center;
+        display: flex;
         .mat-form-field-label,
         .mat-hint {
           color: rgba(0, 0, 0, 0.54);
@@ -22,20 +35,36 @@
   }
   .text-amount {
     display: inline-flex;
-    min-width: 80px;
+    flex: 0 0 auto;
+    min-width: 30px;
     padding: 0 10px;
     align-self: center;
-    font-size: 0.7em;
+    font-size: 0.9em;
+    font-weight: normal;
     justify-content: center;
-    border-radius: 50px;
+    margin-left: auto;
-    margin-right: 10px;
   }
 }
 
 ::ng-deep .search-form {
+  form {
+    .icon-search {
+      height: 100%;
+      display: flex;
+      align-self: center;
+      color: #ffffff;
+      margin-right: 10px;
+    }
+    @media screen and (max-width: #{$tablet-s-width}),
+    (max-height: 600px) {
+      .icon-search {
+        display: none;
+      }
+    }
     .mat-form-field-appearance-legacy {
       .mat-form-field-wrapper {
         color: #ffffff;
+        width: 100%;
         padding-bottom: 0.8em;
         .mat-form-field-infix {
           .mat-input-element {
@@ -45,7 +74,7 @@
         .mat-form-field-suffix {
           button {
             position: relative;
-          transform: translateY(4px);
+            transform: translateY(2px);
             .mat-button-wrapper {
               width: 100%;
               height: 100%;
@@ -57,6 +86,7 @@
         }
         .mat-form-field-label {
           color: rgba(255, 255, 255, 0.7) !important;
+          font-size: 1em;
         }
         .mat-form-field-underline {
           height: 0;
@@ -69,12 +99,51 @@
         }
       }
     }
-  .icon-search {
+  }
-    height: 100%;
+}
+::ng-deep .chat-search {
+  margin: 0 4px 4px;
+  padding: 6px;
+  font-size: 14px;
+  @media screen and (max-width: #{$tablet-s-width}),
+  (max-height: 600px) {
+    padding: 4px;
+    .search-form {
+      form {
         display: flex;
-    align-self: center;
+        i {
-    color: #ffffff;
+          display: none;
-    margin-right: 10px;
+        }
+      }
+    }
+  }
+
+  .search-form {
+    form {
+      display: flex;
+      .mat-form-field {
+        .mat-form-field-wrapper {
+          padding: 0;
+          display: flex;
+          flex: 1 1 auto;
+          .mat-form-field-infix {
+            border: 0;
+            padding: 0;
+            width: auto;
+            input {
+              margin: 0;
+            }
+            .mat-form-field-label-wrapper {
+              top: 0;
+              .mat-form-field-label {
+                top: 0;
+                font-size: 0.9em;
+              }
+            }
+          }
+        }
+      }
+    }
   }
 }
 
@@ -83,39 +152,21 @@
   .btns {
     display: flex;
     flex: 0 0 0%;
-    height: 40px;
+    margin-left: auto;
-    margin-top: 10px;
+    margin-top: 0;
-    border-radius: 50px;
-    .mat-stroked-button {
-      border: none;
-      min-width: 40px;
-      height: 40px;
-      padding: 0 10px;
-      overflow: hidden;
-      border-radius: 50%;
-      background-color: (0, 0, 0, 0.7);
-      &.btn-toggle {
-        display: flex;
-        //border-right: 1px solid #ffffff;
-        justify-items: center;
-        .mat-button-wrapper {
-          display: flex;
-          line-height: inherit;
-          justify-content: center;
-          justify-items: center;
-          width: 20px;
-          height: 20px;
-          svg {
-            width: 100%;
     height: 100%;
-            stroke: #ffffff;
+    button {
-          }
+      margin-left: 4px;
-        }
+      &.btn-search.icon-button {
+        align-self: center;
+        width: 30px;
+        height: 30px;
+        color: #ffffff;
       }
     }
   }
   .btn-close-searchbox {
-    width: 3em;
+    width: 36px;
     height: 100%;
     //background: #0367a6;
     stroke: #ffffff;
@@ -133,7 +184,7 @@
   width: 2px;
   height: 20px;
   background-color: rgba(255, 255, 255, 0.3);
-  margin: 0 10px;
   display: inline-flex;
   align-self: center;
+  margin: 0 6px;
 }

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

@@ -26,9 +26,28 @@ mat-icon {
 }
 
 .icon-button {
+  display: flex;
+  justify-content: center;
+  justify-items: center;
   background: none;
   border: none;
+  width: 20px;
+  height: 20px;
   i {
     font-family: 'material-outline-icons';
+    font-size: 20px;
+    width: 20px;
+    height: 20px;
+    line-height: 20px;
+    font-weight: normal;
+    &:before {
+      display: inline-block;
+      font: normal normal normal 20px/1 'Material Design Icons';
+      font-size: inherit;
+      text-rendering: auto;
+      line-height: inherit;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
   }
 }

projects/ucap-webmessenger-ui/src/lib/components/sticker-selector.component.scss

@@ -1,5 +1,8 @@
+$tablet-l-width: 1024px;
+$tablet-s-width: 768px;
+
 ::ng-deep .sticker-selector {
-  height: 220px;
+  height: 210px;
   border-top: 1px solid #cccccc;
   .mat-tab-header {
     .mat-tab-label {
@@ -7,27 +10,40 @@
     }
   }
   .mat-tab-body-wrapper {
-    height: 180px;
+    height: 150px;
     overflow: auto;
   }
+  @media screen and (max-width: #{$tablet-s-width}) {
+    height: 180px;
+    .mat-tab-body-wrapper {
+      height: 130px;
+    }
+  }
 }
-
 .sticker-item-box {
   flex-wrap: wrap;
-  padding: 20px 20px 0;
+  padding: 10px 20px 0;
   overflow: auto;
 
   .sticker-item {
     width: 60px;
-    margin-bottom: 20px;
+    margin-bottom: 10px;
     display: inline-flex;
     cursor: pointer;
   }
 }
 
+@media screen and (max-width: #{$tablet-s-width}) {
+  .sticker-item-box {
+    .sticker-item {
+      width: 50px;
+    }
+  }
+}
+
 .selected-sticker {
   position: relative;
-  padding: 20px;
+  padding: 10px 20px;
   text-align: right;
   background-color: rgba(45, 58, 74, 0.8);
   img {
@@ -36,7 +52,7 @@
   .btn-close {
     position: absolute;
     top: 2px;
-    right: 20px;
+    right: 10px;
     width: 40px;
     height: 40px;
     color: #ffffff;

projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.scss

@@ -1,3 +1,6 @@
+$tablet-l-width: 1024px;
+$tablet-s-width: 768px;
+
 .translation-preview {
   position: relative;
   display: flex;
@@ -7,7 +10,7 @@
   .translation-section {
     display: flex;
     flex: 1 1 auto;
-    font-size: 1.1em;
+    font-size: 1em;
 
     .translate-text {
       margin: 14px 20px 14px 30px;
@@ -18,6 +21,10 @@
       overflow-y: auto;
       display: flex;
       flex: 1 1 auto;
+      @media screen and (max-width: #{$tablet-s-width}),
+      (max-height: 600px) {
+        margin: 10px;
+      }
     }
     .btn-translation-send {
       align-self: center;
@@ -27,7 +34,7 @@
       min-width: 40px;
       border: 2px solid #ffffff;
       border-radius: 50%;
-      margin-right: 20px;
+      margin-right: 10px;
       padding: 0;
       line-height: 1;
     }
@@ -52,10 +59,6 @@
   padding: 0 2vw;
   justify-items: flex-end;
   align-content: space-between;
-  font-size: 0.9em;
-  /*background-color: rgba(30, 167, 185, 0.1);
-  border-top: 1px solid rgba(30, 167, 185, 0.3);
-  border-bottom: 1px solid rgba(30, 167, 185, 0.3);*/
   .text-language {
     display: inline-flex;
     margin-right: 20px;
@@ -65,11 +68,22 @@
     align-items: center;
     margin-right: 20px;
   }
+  @media screen and (max-width: #{$tablet-s-width}) {
+    padding: 10px 20px 4px;
+    .text-language {
+      display: none;
+    }
+  }
   .select-language {
     display: inline-flex;
     width: 300px;
     flex: 0 1 auto;
     margin-right: 20px;
+    font-size: 1em;
+    @media screen and (max-width: #{$tablet-s-width}),
+    (max-height: 600px) {
+      width: 50%;
+    }
     .mat-form-field-wrapper {
       width: 100%;
       line-height: 0.8em;
@@ -85,6 +99,13 @@
     display: inline-flex;
     width: 120px;
     height: unset;
+    @media screen and (max-width: #{$tablet-s-width}) {
+      .mat-slide-toggle-label {
+        width: 20%;
+        flex-flow: column;
+        font-size: 0.9em;
+      }
+    }
     &.simpleview {
       margin-right: 20px;
       margin-left: auto;