검색 input창 정리 및 통합검색 진행중

projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html

@@ -4,13 +4,12 @@
   </div>
   <div class="app-layout-native-title-bar-title">DS Talk</div>
   <div class="btn-area">
+    <ucap-integrated-search-form (search)="onIntegratedSearch($event)" class="input-lineless integrated-search">
+    </ucap-integrated-search-form>
     <div
       *ngIf="!!loginRes && !!weblink"
       class="app-layout-native-title-bar-link"
     >
-      <ucap-integrated-search-form (search)="onIntegratedSearch($event)">
-      </ucap-integrated-search-form>
-
       <ng-container *ngFor="let link of weblink" [ngSwitch]="link.key">
         <button
           mat-icon-button
@@ -147,11 +146,8 @@
           ></path>
         </svg>
       </button>
-      <span
-        *ngIf="(!!weblink && weblink.length > 0) || (updateInfo$ | async)"
-        class="stroke-bar"
-      ></span>
     </div>
+    <span *ngIf="(!!weblink && weblink.length > 0) || (updateInfo$ | async)" class="stroke-bar"></span>
     <ucap-profile-my-profile-widget
       [profileImageRoot]="sessionVerinfo.profileRoot"
       [profileImageFile]="getMyProfileImageWidget()"

projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss

@@ -25,42 +25,43 @@
     }
     .btn-area {
       display: flex;
+      flex-wrap: wrap;
       margin-left: auto;
       flex-flow: row;
       justify-items: center;
-      width: calc(100% - 100px);
+      max-width: calc(100% - 100px);
       overflow: hidden;
       white-space: nowrap;
       position: relative;
       margin-left: auto;
       justify-content: flex-end;
       height: 100%;
+      align-items: center;
+
+      .integrated-search {
+        height: 100%;
+        display: inline-flex;
+        align-items: center;
+      }
 
       .app-layout-native-title-bar-link {
+        -webkit-box-align: center;
         align-items: center;
         position: relative;
-        display: flex;
+        display: inline-block;
-        justify-content: flex-end;
+        min-width: 0;
-        width: calc(100% - 100px);
+        width: auto;
         overflow: hidden;
         white-space: nowrap;
-        transform: translateY(2px);
-        .stroke-bar {
-          width: 1px;
-          height: 20px;
-          background-color: rgba(256, 256, 256, 0.3);
-          margin: 0 10px 0 20px;
-          display: inline-flex;
-        }
         .button {
           -webkit-app-region: no-drag;
           outline: 0;
           cursor: pointer;
           border: none;
-          height: 30px;
+          width: 28px;
-          min-width: 30px;
+          height: 28px;
-          max-width: 30px;
+          min-width: 28px;
-          padding: 3px;
+          max-width: 28px;
           line-height: 10px;
           background-color: #ffffff;
           border-radius: 50%;
@@ -68,7 +69,8 @@
           text-align: center;
           font-size: 10px;
           vertical-align: middle;
-          margin-left: 16px;
+          margin-left: 10px;
+          transform: translateY(-2px);
           .weblink {
             display: inline-flex;
             line-height: 24px;
@@ -115,7 +117,13 @@
           }
         }
       }
-
+      .stroke-bar {
+        width: 10px;
+        height: 20px;
+        border-right: 1px solid rgba(255, 255, 255, 0.3);
+        margin: 0 10px 0 10px;
+        display: inline-block;
+      }
       .myprofile-item {
         -webkit-app-region: no-drag;
         align-items: center;

projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html

@@ -38,8 +38,8 @@
       >
         <span
           class="mdi"
-          [class.mdi-greater-than]="!showLeftDrawer"
+          [class.mdi-chevron-right]="!showLeftDrawer"
-          [class.mdi-less-than]="showLeftDrawer"
+          [class.mdi-chevron-left]="showLeftDrawer"
         ></span>
       </button>
     </div>

projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss

@@ -61,7 +61,5 @@
   display: flex;
   justify-content: center;
   justify-items: center;
-  .mat-icon {
+  font-size: 1.8em;
-    font-size: 18px;
-  }
 }

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

@@ -1,7 +1,9 @@
 <div fxFlex fxLayout="row" class="chatroom-search">
-  <div fxLayout="row" fxLayoutAlign="start center" class="input search-form">
+  <div fxLayout="row" fxLayoutAlign="start center" class="input input-lineless search-form">
     <form [formGroup]="fgSearch">
-      <i class="material-icons icon-search"> </i>
+      <span class="icon-img">
+        <i class="mid mdi-magnify"></i>
+      </span>
       <mat-form-field floatLabel="never">
         <input
           matInput
@@ -12,14 +14,6 @@
           formControlName="searchInput"
           (keydown.enter)="onKeyDownEnter($event, inputSearch.value)"
         />
-        <!-- <button
-          mat-button
-          matSuffix
-          mat-icon-button
-          aria-label="Clear"
-          (click)="inputSearch.value = ''; onClickSearchCancel()"
-        >
-        -->
         <button
           mat-button
           matSuffix
@@ -42,22 +36,7 @@
       (click)="onClickSearchAndPrev()"
       class="btn-toggle"
     >
-      <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="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 class="icon-button btn-search" (click)="onClickPrevSearch()">
       <i class="mid mdi-arrow-up"></i>

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

@@ -1,5 +1,6 @@
 $tablet-l-width: 1024px;
 $tablet-s-width: 768px;
+$search-item-color: #ffffff;
 
 .chatroom-search {
   display: flex;
@@ -18,14 +19,17 @@ $tablet-s-width: 768px;
     }
     form {
       display: inline-flex;
-      flex: 0 0 auto;
+      .icon-img {
-      width: 100%;
+        color: $search-item-color;
+      }
+      @media screen and (max-width: #{$tablet-s-width}),
+      (max-height: 600px) {
+        .icon-img {
+          display: none;
+        }
+      }
       .mat-form-field {
-        flex-flow: row;
-        flex: 1 1 auto;
         width: 70%;
-        align-items: center;
-        display: flex;
         .mat-form-field-label,
         .mat-hint {
           color: rgba(0, 0, 0, 0.54);
@@ -46,61 +50,6 @@ $tablet-s-width: 768px;
   }
 }
 
-::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 {
-            font-size: 1em;
-          }
-        }
-        .mat-form-field-suffix {
-          button {
-            position: relative;
-            transform: translateY(2px);
-            .mat-button-wrapper {
-              width: 100%;
-              height: 100%;
-              display: flex;
-              justify-content: center;
-              font-size: 1.2em;
-            }
-          }
-        }
-        .mat-form-field-label {
-          color: rgba(255, 255, 255, 0.7) !important;
-          font-size: 1em;
-        }
-        .mat-form-field-underline {
-          height: 0;
-          .mat-form-field-ripple {
-            top: 6px;
-            height: 1px;
-            overflow: hidden;
-            display: none;
-          }
-        }
-      }
-    }
-  }
-}
 ::ng-deep .chat-search {
   margin: 0 4px 4px;
   padding: 6px;
@@ -111,40 +60,12 @@ $tablet-s-width: 768px;
     .search-form {
       form {
         display: flex;
-        i {
+        icon-img {
           display: none;
         }
       }
     }
   }
-
-  .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;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
 }
 
 ::ng-deep .chatroom-search {
@@ -161,22 +82,18 @@ $tablet-s-width: 768px;
         align-self: center;
         width: 30px;
         height: 30px;
-        color: #ffffff;
+        color: $search-item-color;
       }
     }
   }
   .btn-close-searchbox {
     width: 36px;
     height: 100%;
-    //background: #0367a6;
+    stroke: $search-item-color;
-    stroke: #ffffff;
     border: none;
     display: flex;
     justify-content: center;
     justify-items: center;
-    svg {
-      stroke: #ffffff;
-    }
   }
 }
 

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

@@ -13,3 +13,90 @@ textarea {
   -webkit-appearance: none;
   outline: none;
 }
+
+.input-lineless {
+  form {
+    display: flex;
+    flex: 0 0 auto;
+    width: 100%;
+    .mat-form-field-appearance-legacy {
+      .mat-form-field-wrapper {
+        color: #ffffff;
+        width: 100%;
+        padding-bottom: 0.8em;
+        .mat-form-field-infix {
+          .mat-input-element {
+            font-size: 1em;
+          }
+        }
+        .mat-form-field-suffix {
+          button {
+            position: relative;
+            transform: translateY(2px);
+            .mat-button-wrapper {
+              width: 100%;
+              height: 100%;
+              display: flex;
+              justify-content: center;
+              font-size: 1.2em;
+            }
+          }
+        }
+        .mat-form-field-label {
+          color: rgba(255, 255, 255, 0.7) !important;
+          font-size: 1em;
+        }
+        .mat-form-field-underline {
+          height: 0;
+          .mat-form-field-ripple {
+            top: 6px;
+            height: 1px;
+            overflow: hidden;
+            display: none;
+          }
+        }
+      }
+    }
+
+    .icon-img {
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      display: flex;
+      align-self: center;
+      margin-right: 10px;
+    }
+  }
+
+  .mat-form-field {
+    flex-flow: row;
+    flex: 1 1 auto;
+    width: 90%;
+    align-items: center;
+    display: flex;
+    .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;
+            color: rgba(255, 255, 255, 0.7) !important;
+            font-size: 0.9em;
+          }
+        }
+      }
+      .mat-form-field-underline {
+        display: none;
+      }
+    }
+  }
+}

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

@@ -25,7 +25,8 @@ mat-icon {
   }
 }
 
-.icon-button {
+.icon-button,
+.icon-img {
   display: flex;
   justify-content: center;
   justify-items: center;

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

@@ -1,5 +1,9 @@
 <div class="search-container">
-  <mat-form-field appearance="outline">
+  <span class="icon-img">
+    <i class="mid mdi-magnify"></i>
+  </span>
+  <!--<mat-form-field appearance="outline">-->
+  <mat-form-field>
     <input
       matInput
       #searchWordInput
@@ -7,6 +11,5 @@
       (keydown.enter)="onKeyDownEnter(searchWordInput.value)"
       [value]="!!searchWord ? searchWord : ''"
     />
-    <mat-icon matPrefix>search</mat-icon>
   </mat-form-field>
 </div>

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

@@ -1,3 +1,13 @@
 .search-container {
   -webkit-app-region: no-drag;
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+  width: 250px;
+  max-width: 250px;
+  color: #ffffff;
+  font-size: 0.9em;
+  .icon-img {
+    flex: 0 0 auto;
+  }
 }