통합검색 - 3차 수정 (디테일 수정 남았어요)

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.html

@@ -24,7 +24,7 @@
           (search)="onSearch($event)"
         >
         </ucap-integrated-search-form>
-        <div class="organization-option selectbox">
+        <div class="organization-option  selectbox input-lineless">
           <mat-form-field>
             <mat-label>{{ 'search.fieldCompany' | translate }}</mat-label>
             <mat-select
@@ -176,12 +176,17 @@
                 <mat-expansion-panel-header>
                   <mat-panel-title class="select-user-title">
                     {{ 'organization.selectedUser' | translate }}
-                    <span *ngIf="selectedUserList.length > 0">
+                    <span *ngIf="selectedUserList.length > 0" class="text-accent-color">
                       ({{ selectedUserList.length }})
                       {{ 'common.units.persons' | translate }}
                     </span>
                   </mat-panel-title>
-                  <mat-panel-description> </mat-panel-description>
+                  <mat-panel-description fxFlex="0 0 auto" class="btn-dropdown">
+                    <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" class="indicator">
+                      <path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" />
+                      <path d="M0 0h24v24H0z" fill="none" />
+                    </svg>
+                  </mat-panel-description>
                 </mat-expansion-panel-header>
 
                 <div class="list-chip">

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.scss

@@ -16,24 +16,36 @@
     flex-direction: row;
     box-sizing: border-box;
     display: flex;
-    height: 100%;
+    height: calc(100% - 40px);
   }
 }
-ucap-integrated-search-form {
-  position: relative;
-  display: inline-flex;
-  .search-container {
-    width: 20%;
+.search-area {
+  ucap-integrated-search-form {
+    position: relative;
+    display: inline-flex;
+    width: 30%;
+    margin: 0 -10px;
   }
 }
 .organization-option {
   position: relative;
   display: inline-flex;
   width: 70%;
+  transform: translateY(-10px);
+  padding-bottom: 10px;
+  padding-left: 0;
+  border-bottom: 1px solid;
+  .mat-form-field {
+    margin-left: 20px;
+    &:first-child {
+      margin-left: 0;
+    }
+  }
 }
+
 .content-area {
   display: flex;
-  height: calc(100% - 140px);
+  height: calc(100% - 120px);
   flex-wrap: wrap;
   flex-direction: column;
   flex: 0 0 auto;
@@ -62,10 +74,30 @@ ucap-integrated-search-form {
       width: 100%;
       flex-direction: column;
       box-sizing: border-box;
+      margin-top: 10px;
+      .mat-accordion {
+        .mat-expansion-panel {
+          &-header {
+            .select-user-title {
+              font-weight: 600;
+              span {
+                margin-left: 10px;
+              }
+            }
+            .btn-dropdown {
+              margin-right: 0;
+            }
+          }
+
+          .btn-box {
+            position: relative;
+            margin-top: 20px;
+          }
+        }
+      }
     }
   }
 }
-
 .btn-box {
   position: absolute;
   width: 100%;
@@ -73,6 +105,7 @@ ucap-integrated-search-form {
   ul {
     display: flex;
     flex-flow: row;
+    justify-content: flex-end;
     li {
       display: inline-flex;
       margin-left: 4px;

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

@@ -665,7 +665,7 @@ export class TopBarComponent implements OnInit, OnDestroy {
         IntegratedSearchDialogResult
       >(IntegratedSearchDialogComponent, {
         height: '90vh',
-        width: '90vw',
+        width: '96vw',
         data: {
           keyword
         },

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

@@ -28,7 +28,6 @@
         flex: 0 0 auto;
         height: 100%;
         button {
-          //background-color: #00b6d5;
           border-radius: 2px;
           span {
             padding: 0 20px;
@@ -74,3 +73,14 @@
     }
   }
 }
+
+.cdk-overlay-container {
+  .cdk-global-overlay-wrapper {
+    .cdk-overlay-pane {
+      max-width: 90vw !important;
+      .mat-dialog-container {
+        overflow: hidden;
+      }
+    }
+  }
+}

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

@@ -10,6 +10,7 @@
   padding: 4px 10px;
   border-radius: 3px;
   width: 100%;
+  height: 100%;
   .icon-img {
     flex: 0 0 auto;
   }