대화방 검색( 디자인적용)

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

@@ -185,27 +185,19 @@
         </mat-menu>
       </div>
     </div>
+    <div class="chat-search-frame">
+      <div *ngIf="(eventListProcessing$ | async) || isTranslationProcess" style="position: absolute; width: 100%;">
+        <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+      </div>
+      <div *ngIf="isShowSearchArea" class="chat-search bg-accent-color">
+        <ucap-chat-search [totalCount]="searchTotalCount" [curIndex]="searchCurrentIndex"
+          (searchText)="onSearchChat($event)" (prevSearch)="onPrevSearch()" (nextSearch)="onNextSearch()"
+          (searchAndPrev)="onSearchAndPrev()" (closeSearchArea)="onCloseSearchArea()"></ucap-chat-search>
+      </div>
+    </div>
   </mat-toolbar>
   <!-- / CHAT TOOLBAR -->
-  <div style="position: relative;">
+
-    <div
-      *ngIf="(eventListProcessing$ | async) || isTranslationProcess"
-      style="position: absolute; width: 100%;"
-    >
-      <mat-progress-bar mode="indeterminate"></mat-progress-bar>
-    </div>
-    <div *ngIf="isShowSearchArea" class="char-search">
-      <ucap-chat-search
-        [totalCount]="searchTotalCount"
-        [curIndex]="searchCurrentIndex"
-        (searchText)="onSearchChat($event)"
-        (prevSearch)="onPrevSearch()"
-        (nextSearch)="onNextSearch()"
-        (searchAndPrev)="onSearchAndPrev()"
-        (closeSearchArea)="onCloseSearchArea()"
-      ></ucap-chat-search>
-    </div>
-  </div>
   <!-- CHAT CONTENT -->
   <div
     fxFlex="1 1 auto"

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

@@ -23,20 +23,27 @@
   width: 100%;
 }
 .chat-toolbar {
+  position: relative;
+  display: flex;
+  flex-flow: column;
   width: 100%;
-  height: 70px;
+  height: auto;
-  min-height: 70px;
   align-items: center;
   background-color: #ffffff !important;
   border-bottom: 1px solid #dddddd;
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
+  z-index: 1;
+  padding: 0;
   .chat-header {
     width: 100%;
     align-items: center;
     display: flex;
     justify-content: space-between;
+    justify-items: center;
+    padding: 10px 20px;
     .profile-img {
       margin-right: 16px;
+
       .responsive-chats-button {
         display: none;
         &:last-child {
@@ -87,6 +94,13 @@
       margin-left: auto;
     }
   }
+  .chat-search-frame {
+    position: relative;
+    width: 100%;
+    .chat-search {
+      margin: 0 4px 4px;
+    }
+  }
 }
 
 .chat-content {
@@ -152,12 +166,3 @@
     }
   }
 }
-
-.char-search {
-  width: 100%;
-  height: 80px;
-  background-color: #ffffff;
-  padding: 20px;
-  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
-  border-bottom: 1px solid #dddddd;
-}

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

@@ -1,6 +1,7 @@
 <div fxFlex fxLayout="row" class="chatroom-search">
   <div fxLayout="row" fxLayoutAlign="start center" class="input search-form">
     <form [formGroup]="fgSearch" class="w-100-p">
+      <i class="material-icons icon-search"> </i>
       <mat-form-field floatLabel="never">
         <input
           matInput
@@ -11,19 +12,29 @@
           formControlName="searchInput"
           (keydown.enter)="onKeyDownEnter($event, inputSearch.value)"
         />
-        <button
+        <!-- <button
           mat-button
           matSuffix
           mat-icon-button
           aria-label="Clear"
           (click)="inputSearch.value = ''; onClickSearchCancel()"
+        >
+        -->
+        <button
+          mat-button
+          matSuffix
+          mat-icon-button
+          aria-label="Clear"
+          *ngIf="inputSearch.value"
+          (click)="inputSearch.value = ''"
         >
           <mat-icon>close</mat-icon>
         </button>
       </mat-form-field>
-      <span class="text-amount">{{ curIndex }} / {{ totalCount }}</span>
+      <span class="stroke-bar"></span>
     </form>
   </div>
+
   <div class="btns">
     <button
       mat-stroked-button
@@ -81,6 +92,7 @@
         <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 >
@@ -103,4 +115,26 @@
       <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"
+    (click)="inputSearch.value = ''; onClickSearchCancel()"
+  >
+    <svg
+      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>

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

@@ -4,6 +4,7 @@
   justify-items: center;
   .search-form {
     flex-flow: row;
+    padding: 0 10px 0 20px;
     flex: 1 1 auto;
     form {
       display: flex;
@@ -17,53 +18,123 @@
           color: rgba(0, 0, 0, 0.54);
         }
       }
-      .text-amount {
-        display: inline-flex;
-        width: 80px;
-        align-self: center;
-      }
     }
   }
-  .btns {
+  .text-amount {
-    display: flex;
+    display: inline-flex;
-    flex: 0 0 0%;
+    min-width: 80px;
+    padding: 0 10px;
+    align-self: center;
+    font-size: 0.7em;
+    justify-content: center;
+    border-radius: 50px;
+    margin-right: 10px;
   }
 }
 
-.mat-form-field-label,
+::ng-deep .search-form {
-.mat-hint {
+  .mat-form-field-appearance-legacy {
-  color: rgba(0, 0, 0, 0.54);
+    .mat-form-field-wrapper {
-}
+      color: #ffffff;
-
+      padding-bottom: 0.8em;
-::ng-deep .btns {
+      .mat-form-field-infix {
-  border: 1px solid #dddddd;
+        .mat-input-element {
-  border-radius: 4px;
+          font-size: 1em;
-  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 {
+      .mat-form-field-suffix {
-        display: flex;
+        button {
-        line-height: inherit;
+          position: relative;
-        justify-content: center;
+          transform: translateY(4px);
-        justify-items: center;
+          .mat-button-wrapper {
-        width: 20px;
+            width: 100%;
-        height: 20px;
+            height: 100%;
-        svg {
+            display: flex;
-          width: 100%;
+            justify-content: center;
-          height: 100%;
+            font-size: 1.2em;
-          stroke: #555555;
+          }
+        }
+      }
+      .mat-form-field-label {
+        color: rgba(255, 255, 255, 0.7) !important;
+      }
+      .mat-form-field-underline {
+        height: 0;
+        .mat-form-field-ripple {
+          top: 6px;
+          height: 1px;
+          overflow: hidden;
+          display: none;
         }
       }
     }
   }
+  .icon-search {
+    height: 100%;
+    display: flex;
+    align-self: center;
+    color: #ffffff;
+    margin-right: 10px;
+  }
+}
+
+::ng-deep .chatroom-search {
+  position: relative;
+  .btns {
+    display: flex;
+    flex: 0 0 0%;
+    height: 40px;
+    margin-top: 10px;
+    //border: 1px solid #ffffff;
+    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;
+          }
+        }
+      }
+    }
+  }
+  .btn-close-searchbox {
+    width: 3em;
+    height: 100%;
+    //background: #0367a6;
+    stroke: #ffffff;
+    border: none;
+    display: flex;
+    justify-content: center;
+    justify-items: center;
+    svg {
+      stroke: #ffffff;
+    }
+  }
+}
+
+.stroke-bar {
+  width: 1px;
+  height: 20px;
+  background-color: rgba(255, 255, 255, 0.3);
+  margin: 0 10px;
+  display: inline-flex;
+  align-self: center;
 }