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

2020-03-19 10:37:16 +09:00 · 2020-03-19 10:37:16 +09:00 · 18395f7e48
commit 18395f7e48
parent 1a67230dae
7 changed files with 92 additions and 32 deletions
--- a/electron-projects/ucap-webmessenger-electron/src/app/AppWindow.ts
+++ b/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 defaultHeight = 800;
+  private defaultWidth = 1024;
+  private defaultHeight = 768;

  public constructor(private appIconPath: string) {
    const savedWindowState = windowStateKeeper({
--- 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
@ -7,10 +7,22 @@
      class="card-header"
      >{{ 'search.label' | translate }}</mat-card-title
    >
-    <button class="icon-button btn-dialog-close" (click)="onCancel()">
-      <i class="mdi mdi-window-close"></i>
-    </button>
+    <div class="btn-top-frme" fxFlex="0 0 auto">
+      <button class="icon-button btn-dialog-refresh" matTooltip="{{ 'search.clear' | translate }}" (click)="onCancel()">
+        <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>
--- 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
@ -4,12 +4,28 @@
    .mat-card-header-text {
      margin: 0;
    }
-    .btn-dialog-close {
-      font-size: 20px;
+    .btn-top-frme {
      display: flex;
      margin-left: auto;
-      align-self: flex-start;
-      color: #444444;
+      justify-content: space-between;
+
+      .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 {
-  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;
-    }
+.select-item {
+  border: 1x soild red;
+  line-height: 1.4em;
+
+  .select-trigger {
+    font-size: 0.88rem;
  }
 }

 .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;
+}
--- a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.ts
+++ b/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 height = 800;
+    let width = 1024;
+    let height = 768;
    let openType = 'INNER-POPUP';
    switch (link.key) {
      case WebLinkType.Sms:
--- a/projects/ucap-webmessenger-app/src/assets/i18n/en.json
+++ b/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",
--- a/projects/ucap-webmessenger-app/src/assets/i18n/ko.json
+++ b/projects/ucap-webmessenger-app/src/assets/i18n/ko.json
@ -79,6 +79,7 @@
    "searchFormPlaceholder": "이름, 부서, 직위, 전화번호, 이메일",
    "fold": "접어두기",
    "unfold": "펼쳐보기",
+    "clear":"검색 초기화",
    "clearAndColse": "검색 초기화 & 닫기",
    "andOthers": "외 {{count}}건",
    "fieldProfile": "프로필",
--- 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
@ -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;
+}