From 556c7c5ad32d6754dcdf1f8453c93aeaf92a0a4f Mon Sep 17 00:00:00 2001
From: khk <khk@gmail.com>
Date: Mon, 16 Mar 2020 17:25:40 +0900
Subject: [PATCH] =?UTF-8?q?=ED=86=B5=ED=95=A9=EA=B2=80=EC=83=89=20-=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=EC=A4=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../integrated-search.dialog.component.html   | 195 +++++++++---------
 .../integrated-search.dialog.component.scss   |  56 +++++
 .../assets/scss/partials/_search-frame.scss   |  13 ++
 3 files changed, 167 insertions(+), 97 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.html
index 0f720b5d..88858317 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.html
@@ -19,7 +19,7 @@
           (search)="onSearch($event)"
         >
         </ucap-integrated-search-form>
-        <div class="organization-option">
+        <div class="organization-option selectbox">
           <mat-form-field>
             <mat-label>{{ 'search.fieldCompany' | translate }}</mat-label>
             <mat-select
@@ -137,112 +137,113 @@
           </mat-form-field>
         </div>
       </div>
-      <div style="position: relative;">
+      <div class="content-area">
         <div
           *ngIf="searchingProcessing$ | async"
           style="position: absolute; width: 100%; z-index: 101;"
         >
           <mat-progress-bar mode="indeterminate"></mat-progress-bar>
         </div>
-      </div>
-      <div class="contents-table">
-        <div fxFlex="0 0 auto" class="table-box">
-          <ucap-organization-detail-table
-            [loginRes]="loginRes"
-            [presence$]="presenceSubject.asObservable()"
-            [departmentUserInfoList]="departmentUserInfoList"
-            [profileImageRoot]="profileImageRoot"
-            [selectedUserList]="selectedUserList"
-            (openProfile)="onClickOpenProfile($event)"
-            (toggleAllUser)="onToggleAllUser($event)"
-            (toggleUser)="onToggleUser($event)"
-            (sendCall)="onClickCall($event)"
-            class="integrate-search-org detail-table"
-          ></ucap-organization-detail-table>
-        </div>
-        <div class="footer-fix search-result-footer">
-          <mat-accordion>
-            <mat-expansion-panel>
-              <mat-expansion-panel-header>
-                <mat-panel-title>
-                  {{ 'organization.selectedUser' | translate }}
-                  <span *ngIf="selectedUserList.length > 0">
-                    ({{ selectedUserList.length }})
-                    {{ 'common.units.persons' | translate }}
-                  </span>
-                </mat-panel-title>
-                <mat-panel-description> </mat-panel-description>
-              </mat-expansion-panel-header>
 
-              <div class="list-chip">
-                <mat-chip-list aria-label="User selection">
-                  <mat-chip
-                    *ngFor="let userInfo of selectedUserList"
-                    (removed)="onClickDeleteUser(userInfo)"
-                  >
-                    {{ userInfo.name }}
-                    <mat-icon matChipRemove>clear</mat-icon>
-                  </mat-chip>
-                </mat-chip-list>
-              </div>
-              <div class="btn-box">
-                <ul>
-                  <li>
-                    <button
-                      mat-flat-button
-                      [disabled]="
-                        selectedUserList.length > 0 ? 'false' : 'true'
-                      "
-                      (click)="onClickAddGroup()"
-                      class="mat-primary"
+        <div class="contents-table" fxFlex="1 1 100%" fxLayout="column">
+          <div class="table-box">
+            <ucap-organization-detail-table
+              [loginRes]="loginRes"
+              [presence$]="presenceSubject.asObservable()"
+              [departmentUserInfoList]="departmentUserInfoList"
+              [profileImageRoot]="profileImageRoot"
+              [selectedUserList]="selectedUserList"
+              (openProfile)="onClickOpenProfile($event)"
+              (toggleAllUser)="onToggleAllUser($event)"
+              (toggleUser)="onToggleUser($event)"
+              (sendCall)="onClickCall($event)"
+              class="integrate-search-org detail-table"
+            ></ucap-organization-detail-table>
+          </div>
+          <div class="footer-fix search-result-footer">
+            <mat-accordion>
+              <mat-expansion-panel>
+                <mat-expansion-panel-header>
+                  <mat-panel-title>
+                    {{ 'organization.selectedUser' | translate }}
+                    <span *ngIf="selectedUserList.length > 0">
+                      ({{ selectedUserList.length }})
+                      {{ 'common.units.persons' | translate }}
+                    </span>
+                  </mat-panel-title>
+                  <mat-panel-description> </mat-panel-description>
+                </mat-expansion-panel-header>
+
+                <div class="list-chip">
+                  <mat-chip-list aria-label="User selection">
+                    <mat-chip
+                      *ngFor="let userInfo of selectedUserList"
+                      (removed)="onClickDeleteUser(userInfo)"
                     >
-                      {{ 'organization.addToGroup' | translate }}
-                    </button>
-                  </li>
-                  <li>
-                    <button
-                      mat-flat-button
-                      [disabled]="
-                        selectedUserList.length > 0 ? 'false' : 'true'
-                      "
-                      (click)="onClickChatOpen()"
-                      class="mat-primary"
-                    >
-                      {{ 'organization.startChat' | translate }}
-                    </button>
-                  </li>
-                  <li *ngIf="!!authInfo && authInfo.canVideoConference">
-                    <button
-                      mat-flat-button
-                      [disabled]="
-                        selectedUserList.length > 0 ? 'false' : 'true'
-                      "
-                      (click)="onClickConference()"
-                      class="mat-primary"
-                    >
-                      {{ 'organization.startVideoConference' | translate }}
-                    </button>
-                  </li>
-                  <li>
-                    <button
-                      mat-flat-button
-                      [disabled]="
-                        selectedUserList.length > 0 ? 'false' : 'true'
-                      "
-                      (click)="onClickMessage()"
-                      class="mat-primary"
-                    >
-                      {{ 'organization.startMessage' | translate }}
-                    </button>
-                  </li>
-                </ul>
-              </div>
-            </mat-expansion-panel>
-          </mat-accordion>
+                      {{ userInfo.name }}
+                      <mat-icon matChipRemove>clear</mat-icon>
+                    </mat-chip>
+                  </mat-chip-list>
+                </div>
+                <div class="btn-box">
+                  <ul>
+                    <li>
+                      <button
+                        mat-flat-button
+                        [disabled]="
+                          selectedUserList.length > 0 ? 'false' : 'true'
+                        "
+                        (click)="onClickAddGroup()"
+                        class="mat-primary"
+                      >
+                        {{ 'organization.addToGroup' | translate }}
+                      </button>
+                    </li>
+                    <li>
+                      <button
+                        mat-flat-button
+                        [disabled]="
+                          selectedUserList.length > 0 ? 'false' : 'true'
+                        "
+                        (click)="onClickChatOpen()"
+                        class="mat-primary"
+                      >
+                        {{ 'organization.startChat' | translate }}
+                      </button>
+                    </li>
+                    <li *ngIf="!!authInfo && authInfo.canVideoConference">
+                      <button
+                        mat-flat-button
+                        [disabled]="
+                          selectedUserList.length > 0 ? 'false' : 'true'
+                        "
+                        (click)="onClickConference()"
+                        class="mat-primary"
+                      >
+                        {{ 'organization.startVideoConference' | translate }}
+                      </button>
+                    </li>
+                    <li>
+                      <button
+                        mat-flat-button
+                        [disabled]="
+                          selectedUserList.length > 0 ? 'false' : 'true'
+                        "
+                        (click)="onClickMessage()"
+                        class="mat-primary"
+                      >
+                        {{ 'organization.startMessage' | translate }}
+                      </button>
+                    </li>
+                  </ul>
+                </div>
+              </mat-expansion-panel>
+            </mat-accordion>
+          </div>
         </div>
       </div>
-      <div class="footer-fix search-result-footer">
-        <ul>
+      <div class="btn-box">
+        <ul class="">
           <li>
             <button mat-flat-button (click)="onCancel()" class="mat-primary">
               {{ 'search.clearAndColse' | translate }}
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.scss
index dc54373b..b30fa22a 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.scss
@@ -10,3 +10,59 @@
     color: #444444;
   }
 }
+
+ucap-integrated-search-form {
+  position: relative;
+  display: inline-flex;
+  .search-container {
+    width: 20%;
+  }
+}
+.organization-option {
+  position: relative;
+  display: inline-flex;
+  width: 70%;
+}
+.content-area {
+  display: flex;
+  height: calc(100% - 140px);
+}
+
+.contents-table {
+  position: relative;
+  flex-direction: column;
+  box-sizing: border-box;
+  display: flex;
+  flex: 1 1 100%;
+  max-width: 100%;
+  height: 100%;
+  overflow: hidden;
+  .table-box {
+    position: relative;
+    width: 100%;
+    height: calc(100% - 60px);
+    overflow: hidden;
+    display: flex;
+  }
+  .footer-fix {
+    display: flex;
+    flex: 1 1 auto;
+    bottom: 0;
+    width: 100%;
+    flex-direction: column;
+    box-sizing: border-box;
+  }
+}
+.btn-box {
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+  ul {
+    display: flex;
+    flex-flow: row;
+    li {
+      display: inline-flex;
+      margin-left: 4px;
+    }
+  }
+}
diff --git a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_search-frame.scss b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_search-frame.scss
index 64286e83..45558f23 100644
--- a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_search-frame.scss
+++ b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_search-frame.scss
@@ -118,3 +118,16 @@ $search-font-size: 14px;
     }
   }
 }
+.search-area {
+  .selectbox {
+    display: inline-flex;
+    width: 70%;
+    padding-left: 20px;
+    line-height: 1.4em;
+    .mat-form-field {
+      font-size: 0.88rem;
+      color: #333333;
+      flex: 1 1 auto;
+    }
+  }
+}