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

2020-01-29 17:08:20 +09:00 · 2020-01-29 17:08:20 +09:00 · 87a9a76e04
commit 87a9a76e04
parent 542aa0433c
10 changed files with 154 additions and 155 deletions
--- a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
+++ b/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()"
--- a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss
+++ b/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;
-        justify-content: flex-end;
-        width: calc(100% - 100px);
+        display: inline-block;
+        min-width: 0;
+        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;
-          min-width: 30px;
-          max-width: 30px;
-          padding: 3px;
+          width: 28px;
+          height: 28px;
+          min-width: 28px;
+          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;
--- a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html
+++ b/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-less-than]="showLeftDrawer"
+          [class.mdi-chevron-right]="!showLeftDrawer"
+          [class.mdi-chevron-left]="showLeftDrawer"
        ></span>
      </button>
    </div>
--- a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss
+++ b/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: 18px;
-  }
+  font-size: 1.8em;
 }
--- 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,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
-        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>
+      <i class="mid mdi-arrow-up"></i>
    </button>
    <button class="icon-button btn-search" (click)="onClickPrevSearch()">
      <i class="mid mdi-arrow-up"></i>
--- 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,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;
-      width: 100%;
+      .icon-img {
+        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: #ffffff;
+    stroke: $search-item-color;
    border: none;
    display: flex;
    justify-content: center;
    justify-items: center;
-    svg {
-      stroke: #ffffff;
-    }
  }
 }

--- a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_forms.scss
+++ b/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;
+      }
+    }
+  }
+}
--- a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_icons.scss
+++ b/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;
--- a/projects/ucap-webmessenger-ui/src/lib/components/integrated-search-form.component.html
+++ b/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>
--- a/projects/ucap-webmessenger-ui/src/lib/components/integrated-search-form.component.scss
+++ b/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;
+  }
 }