From aea898dea77f7c2f20fe0b21e6a36e5c2370e390 Mon Sep 17 00:00:00 2001
From: khk <khk@gmail.com>
Date: Fri, 7 Feb 2020 14:13:56 +0900
Subject: [PATCH] =?UTF-8?q?=EB=8C=80=ED=99=94=EB=B0=A9=20=EA=B2=80?=
 =?UTF-8?q?=EC=83=89=20=EB=B3=80=EA=B2=BD,=20=EB=8F=99=EC=98=81=EC=83=81?=
 =?UTF-8?q?=20=EB=AF=B8=EC=A7=80=EC=9B=90=20=EA=B0=80=EC=9D=B4=EC=9D=B4?=
 =?UTF-8?q?=EB=93=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/messages.component.html        |  2 +-
 .../right-drawer/album-box.component.html     |  7 +-
 .../right-drawer/album-box.component.scss     | 13 ++++
 .../src/assets/scss/global/_default.scss      | 13 +++-
 .../src/lib/components/search.component.html  | 72 +++----------------
 .../src/lib/components/search.component.scss  | 26 ++++---
 .../src/assets/scss/partials/_forms.scss      | 12 +++-
 7 files changed, 65 insertions(+), 80 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
index 04d87cf1..27f3229a 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
@@ -154,7 +154,7 @@
       >
         <mat-progress-bar mode="indeterminate"></mat-progress-bar>
       </div>
-      <div *ngIf="isShowSearchArea" class="chat-search bg-accent-color">
+      <div *ngIf="isShowSearchArea" class="chat-search">
         <ucap-chat-search
           [totalCount]="searchTotalCount"
           [curIndex]="searchCurrentIndex"
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.html
index 9110e07e..36f93b0f 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.html
@@ -77,7 +77,12 @@
           fxFlexFill
           class="guide-msg"
         >
-          {{ 'common.file.errors.cantPlay' | translate }}
+          <div>
+            <span class="icon-img">
+              <i class="mid mdi-information-outline"></i>
+            </span>
+            {{ 'common.file.errors.cantPlay' | translate }}
+          </div>
         </div>
       </div>
       <ul>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.scss
index d07e9674..37193755 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.scss
@@ -41,6 +41,19 @@ $tablet-s-width: 768px;
     border-bottom: 1px dotted #dddddd;
     text-align: center;
     padding-bottom: 10px;
+    .guide-msg {
+      div {
+        display: flex;
+        flex-flow: column;
+        height: 140px;
+        justify-content: center;
+        justify-items: center;
+        color: #999999;
+        .icon-img {
+          margin-bottom: 6px;
+        }
+      }
+    }
   }
   ul {
     padding-top: 10px;
diff --git a/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss b/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
index 4279bbae..a6202655 100644
--- a/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
+++ b/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
@@ -420,12 +420,13 @@ $daesang-grey: (
       }
     }
   }
-  .chat-search-frame {
+  /*.대화방 검색창 bg
+  chat-search-frame {
     .chat-search {
       //background-color: mat-color($accent, 600, 0.7);
       background-color: mat-color($accent, 800, 0.8);
     }
-  }
+  }*/
   .translationForm {
     background-color: mat-color($accent, 200, 0.4);
   }
@@ -454,4 +455,12 @@ $daesang-grey: (
       background-color: mat-color($accent, 500);
     }
   }
+  .chatroom-search{
+    .search-form{
+      border: 2px solid mat-color($accent, B100);
+    }
+    .btns{
+       background-color: mat-color($accent, B100);
+    }
+  }
 }
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/search.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/search.component.html
index 111cd570..7bb1eceb 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/search.component.html
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/search.component.html
@@ -1,61 +1,3 @@
-<!--<div fxFlex fxLayout="row" class="chatroom-search">
-  <div
-    fxLayout="row"
-    fxLayoutAlign="start center"
-    class="input input-lineless search-form"
-  >
-    <form [formGroup]="fgSearch">
-      <span class="icon-img">
-        <i class="mid mdi-magnify"></i>
-      </span>
-      <mat-form-field floatLabel="never">
-        <input
-          matInput
-          #inputSearch
-          type="text"
-          placeholder="{{ 'chat.searchEventByText' | translate }}"
-          value=""
-          formControlName="searchInput"
-          (keydown.enter)="onKeyDownEnter($event, inputSearch.value)"
-        />
-        <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>
-    </form>
-  </div>
-  <span class="stroke-bar"></span>
-  <div class="btns">
-    <button
-      *ngIf="false"
-      mat-stroked-button
-      (click)="onClickSearchAndPrev()"
-      class="btn-toggle"
-    >
-      <i class="mid mdi-arrow-up"></i>
-    </button>
-    <button class="icon-button btn-search" (click)="onClickPrevSearch()">
-      <i class="mid mdi-arrow-up mdi-chevron-up"></i>
-    </button>
-    <button class="icon-button btn-search" (click)="onClickNextSearch()">
-      <i class="mid mdi-arrow-down mdi-chevron-down"></i>
-    </button>
-    <button
-      class="icon-button btn-close-searchbox bg-accent-dark"
-      (click)="inputSearch.value = ''; onClickSearchCancel()"
-    >
-      <i class="mid mdi-window-close"></i>
-    </button>
-  </div>
-</div>-->
 <div fxFlex fxLayout="row" class="chatroom-search">
   <div
     fxLayout="row"
@@ -66,7 +8,7 @@
       <span class="icon-img">
         <i class="mid mdi-magnify"></i>
       </span>
-      <mat-form-field floatLabel="never">
+      <mat-form-field floatLabel="never" class="white">
         <input
           matInput
           #inputSearch
@@ -90,7 +32,7 @@
       <span class="text-amount">{{ curIndex }} / {{ totalCount }}</span>
     </form>
   </div>
-  <span class="stroke-bar"></span>
+
   <div class="btns">
     <button
       *ngIf="false"
@@ -101,16 +43,18 @@
       <i class="mid mdi-arrow-up"></i>
     </button>
     <button class="icon-button btn-search" (click)="onClickPrevSearch()">
-      <i class="mid  mdi-chevron-up"></i>
+      <i class="mid  mid-24 mdi-chevron-up"></i>
     </button>
+    <span class="stroke-bar"></span>
     <button class="icon-button btn-search" (click)="onClickNextSearch()">
-      <i class="mid mdi-chevron-down"></i>
+      <i class="mid mid-24 mdi-chevron-down"></i>
     </button>
+    <span class="stroke-bar"></span>
     <button
-      class="icon-button btn-close-searchbox bg-accent-dark"
+      class="icon-button btn-close-searchbox"
       (click)="inputSearch.value = ''; onClickSearchCancel()"
     >
-      <i class="mid mdi-window-close"></i>
+      <i class="mid  mdi-window-close"></i>
     </button>
   </div>
 </div>
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/search.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/search.component.scss
index 208c13da..5852ae26 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/search.component.scss
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/search.component.scss
@@ -1,21 +1,22 @@
 $tablet-l-width: 1024px;
 $tablet-s-width: 768px;
-$search-item-color: #ffffff;
+$search-item-color: #444444;
 
 .chatroom-search {
   display: flex;
-  flex: 0 0 auto;
+  flex: 1 1 auto;
   justify-items: center;
   width: 100%;
   .search-form {
     flex-flow: row;
-    padding: 0 0 0 20px;
+    padding: 0 0 0 10px;
+    margin-left: 10px;
     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;
+      flex: 1 1 auto;
     }
     form {
       display: inline-flex;
@@ -34,6 +35,12 @@ $search-item-color: #ffffff;
         .mat-hint {
           color: rgba(0, 0, 0, 0.54);
         }
+        &.white {
+          .mat-form-field-label,
+          .mat-hint {
+            color: rgba(0, 0, 0, 0.54);
+          }
+        }
       }
     }
   }
@@ -72,17 +79,17 @@ $search-item-color: #ffffff;
   position: relative;
   .btns {
     display: flex;
-    flex: 0 0 0%;
+    flex: 1 1 auto;
     margin-left: auto;
     margin-top: 0;
     height: 100%;
     button {
       margin-left: 4px;
-      &.btn-search.icon-button {
+      &.icon-button {
         align-self: center;
         width: 30px;
         height: 30px;
-        color: $search-item-color;
+        color: #ffffff;
       }
     }
   }
@@ -94,14 +101,15 @@ $search-item-color: #ffffff;
     display: flex;
     justify-content: center;
     justify-items: center;
+    margin-right: 4px;
   }
 }
 
 .stroke-bar {
-  width: 2px;
+  width: 1px;
   height: 20px;
   background-color: rgba(255, 255, 255, 0.3);
   display: inline-flex;
   align-self: center;
-  margin: 0 6px;
+  margin: 0 4px;
 }
diff --git a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_forms.scss b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_forms.scss
index 7319a8e9..3c97fb02 100644
--- a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_forms.scss
+++ b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_forms.scss
@@ -21,7 +21,7 @@ textarea {
     width: 100%;
     .mat-form-field-appearance-legacy {
       .mat-form-field-wrapper {
-        color: #ffffff;
+        //color: #ffffff;
         width: 100%;
         .mat-form-field-infix {
           .mat-input-element {
@@ -42,7 +42,8 @@ textarea {
           }
         }
         .mat-form-field-label {
-          color: rgba(255, 255, 255, 0.7) !important;
+          color: currentColor;
+          opacity: 0.7;
           font-size: 1em;
         }
         .mat-form-field-underline {
@@ -73,6 +74,7 @@ textarea {
     width: 90%;
     align-items: center;
     display: flex;
+    color: #ffffff;
     .mat-form-field-wrapper {
       padding: 0;
       display: flex;
@@ -89,7 +91,8 @@ textarea {
           top: 0;
           .mat-form-field-label {
             top: 0;
-            color: rgba(255, 255, 255, 0.7) !important;
+            color: currentColor;
+            opacity: 0.7;
             font-size: 0.9em;
           }
         }
@@ -99,6 +102,9 @@ textarea {
       }
     }
     //텍스트 선명도
+    &.white {
+      color: #333333;
+    }
   }
 }