통합검색 마무리 ( 하단 초기화와 접기를 상단에 아이콘 형태로 바꿨는데 문제있으심 알려주세요)

electron-projects/ucap-webmessenger-electron/src/app/AppWindow.ts

@@ -30,8 +30,8 @@ export class AppWindow {
   private minWidth = 700;
   private minHeight = 600;
 
-  private defaultWidth = 1160;
+  private defaultWidth = 1024;
-  private defaultHeight = 800;
+  private defaultHeight = 768;
 
   public constructor(private appIconPath: string) {
     const savedWindowState = windowStateKeeper({

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

@@ -7,10 +7,22 @@
       class="card-header"
       >{{ 'search.label' | translate }}</mat-card-title
     >
-    <button class="icon-button btn-dialog-close" (click)="onCancel()">
+    <div class="btn-top-frme" fxFlex="0 0 auto">
-      <i class="mdi mdi-window-close"></i>
+      <button class="icon-button btn-dialog-refresh" matTooltip="{{ 'search.clear' | translate }}" (click)="onCancel()">
-    </button>
+        <i class="mdi mdi-refresh"></i>
+      </button>
+      <button class="icon-button btn-dialog-fold"  matTooltip="{{ 'search.fold' | translate }}" (click)="onClickHide()">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="fill:#444444">
+          <path
+            d="M19,19H5V5h9.38V3H5A2,2,0,0,0,3,5V19a2,2,0,0,0,2,2H19a2,2,0,0,0,2-2V10.36H19Zm-4.24-2.76v-2H11.17L21,4.41,19.59,3,9.76,12.83V9.24h-2v7Z" />
+        </svg>
+      </button>
+      <button class="icon-button btn-dialog-close" (click)="onCancel()">
+        <i class="mdi mdi-window-close"></i>
+      </button>
+    </div>
   </mat-card-header>
+
   <mat-card-content>
     <div
       fxLayout="column"
@@ -24,7 +36,7 @@
           (search)="onSearch($event)"
         >
         </ucap-integrated-search-form>
-        <div class="organization-option  selectbox input-lineless">
+        <div class="organization-option selectbox">
           <mat-form-field>
             <mat-label>{{ 'search.fieldCompany' | translate }}</mat-label>
             <mat-select
@@ -32,8 +44,9 @@
               [formControl]="fcCompany"
               multiple
               (openedChange)="onOpenedChange($event)"
+              class="select-item"
             >
-              <mat-select-trigger>
+              <mat-select-trigger class="select-trigger">
                 {{ fcCompany.value ? fcCompany.value[0] : '' }}
                 <span
                   *ngIf="fcCompany.value?.length > 1"
@@ -59,8 +72,9 @@
               [formControl]="fcGrade"
               multiple
               (openedChange)="onOpenedChange($event)"
+              class="select-item"
             >
-              <mat-select-trigger>
+              <mat-select-trigger class="select-trigger">
                 {{ fcGrade.value ? fcGrade.value[0] : '' }}
                 <span
                   *ngIf="fcGrade.value?.length > 1"
@@ -86,8 +100,9 @@
               [formControl]="fcWorkPlace"
               multiple
               (openedChange)="onOpenedChange($event)"
+              class="select-item"
             >
-              <mat-select-trigger>
+              <mat-select-trigger class="select-trigger">
                 {{ fcWorkPlace.value ? fcWorkPlace.value[0] : '' }}
                 <span
                   *ngIf="fcWorkPlace.value?.length > 1"
@@ -113,8 +128,9 @@
               [formControl]="fcPresence"
               multiple
               (openedChange)="onOpenedChange($event)"
+              class="select-item"
             >
-              <mat-select-trigger>
+              <mat-select-trigger class="select-trigger">
                 {{ setFilterOptionSelectedTextPresence() }}
                 <span
                   *ngIf="fcPresence.value?.length > 1"
@@ -257,6 +273,7 @@
           </div>
         </div>
       </div>
+      <!--상단 아이콘 버튼으로 대체
       <div class="btn-box">
         <ul class="">
           <li>
@@ -270,7 +287,7 @@
             </button>
           </li>
         </ul>
-      </div>
+      </div>-->
     </div>
   </mat-card-content>
 </mat-card>

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

@@ -4,12 +4,28 @@
     .mat-card-header-text {
       margin: 0;
     }
-    .btn-dialog-close {
+    .btn-top-frme {
-      font-size: 20px;
       display: flex;
       margin-left: auto;
-      align-self: flex-start;
+      justify-content: space-between;
-      color: #444444;
+
+      .btn-dialog-close,
+      .btn-dialog-refresh {
+        font-size: 20px;
+        display: flex;
+        margin-left: auto;
+        align-self: flex-start;
+        color: #444444;
+      }
+      .btn-dialog-fold {
+        width: 56px;
+        height: 26px;
+        padding: 0;
+        svg {
+          width: 24px;
+          height: 24px;
+        }
+      }
     }
   }
   .mat-card-content {
@@ -20,32 +36,43 @@
   }
 }
 .search-area {
+  display: flex;
+  align-items: center;
   ucap-integrated-search-form {
     position: relative;
     display: inline-flex;
     width: 30%;
     margin: 0 -10px;
+    .search-container {
+      padding: 0;
+    }
+  }
+  .organization-option {
+    position: relative;
+    display: inline-flex;
+    width: 70%;
+    padding-left: 20px;
+    .mat-form-field {
+      margin-left: 20px;
+      &:first-child {
+        margin-left: 0;
+      }
+    }
   }
 }
-.organization-option {
+.select-item {
-  position: relative;
+  border: 1x soild red;
-  display: inline-flex;
+  line-height: 1.4em;
-  width: 70%;
+
-  transform: translateY(-10px);
+  .select-trigger {
-  padding-bottom: 10px;
+    font-size: 0.88rem;
-  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% - 120px);
+  //height: calc(100% - 120px);하단 초기화, 접기 버튼 있는 경우
+  height: calc(100% - 70px);
   flex-wrap: wrap;
   flex-direction: column;
   flex: 0 0 auto;
@@ -109,9 +136,20 @@
     li {
       display: inline-flex;
       margin-left: 4px;
+      width: 120px;
+      button {
+        width: 100%;
+      }
     }
   }
 }
 .integrate-search-org {
+  width: 100%;
+  height: 100%;
   overflow: auto;
 }
+
+.list-chip {
+  max-height: 220px;
+  overflow-y: auto;
+}

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

@@ -416,8 +416,8 @@ export class TopBarComponent implements OnInit, OnDestroy {
       .replace(/(\(%USER_ID%\))/g, loginId)
       .replace(/(\(%USER_PASS%\))/g, loginPw);
 
-    let width = 1160;
+    let width = 1024;
-    let height = 800;
+    let height = 768;
     let openType = 'INNER-POPUP';
     switch (link.key) {
       case WebLinkType.Sms:

projects/ucap-webmessenger-app/src/assets/i18n/en.json

@@ -79,6 +79,7 @@
     "searchFormPlaceholder": "Name, department, position, phone number, email",
     "fold": "Folding",
     "unfold": "Unfolding",
+    "clear": "Data clear",
     "clearAndColse": "Data clear & Close",
     "andOthers": "and {{count}}others",
     "fieldProfile": "Profile",

projects/ucap-webmessenger-app/src/assets/i18n/ko.json

@@ -79,6 +79,7 @@
     "searchFormPlaceholder": "이름, 부서, 직위, 전화번호, 이메일",
     "fold": "접어두기",
     "unfold": "펼쳐보기",
+    "clear":"검색 초기화",
     "clearAndColse": "검색 초기화 & 닫기",
     "andOthers": "외 {{count}}건",
     "fieldProfile": "프로필",

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

@@ -7,7 +7,7 @@
   font-size: 0.88rem;
   color: #2d3a4a;
   background-color: #ffffff;
-  padding: 4px 10px;
+  padding: 0 10px;
   border-radius: 3px;
   width: 100%;
   height: 100%;
@@ -20,3 +20,6 @@
     flex: 1 1 auto;
   }
 }
+::ng-deep .mat-form-field-infix {
+  width: inherit;
+}