From abfeaa4dc95ccf770e50c328890382c412609d7d Mon Sep 17 00:00:00 2001
From: Richard Park <richard.park@loafle.com>
Date: Tue, 26 Nov 2019 10:43:37 +0900
Subject: [PATCH 01/10] organization is modified

---
 .../src/lib/components/tree.component.html    | 45 ++++++----
 .../src/lib/components/tree.component.scss    | 22 +++--
 .../src/lib/components/tree.component.ts      | 89 +++++++++++++------
 .../src/lib/services/splash-screen.service.ts |  2 +-
 4 files changed, 107 insertions(+), 51 deletions(-)

diff --git a/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.html b/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.html
index 43b0b034..edd9a963 100644
--- a/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.html
+++ b/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.html
@@ -20,18 +20,25 @@
       matTreeNodePaddingIndent="20"
       class="tree-no-child"
     >
-      <div class="tree-node-closer-container">
-        <div class="tree-node-closer-top"></div>
+      <div
+        class="tree-node-closer-container"
+        *ngFor="let i of appendDivArray(node.level)"
+      >
+        <div
+          class="tree-node-closer-top"
+          [style.left.px]="20 - 20 * i"
+          [attr.last-node]="isLastNode(node, i) ? '' : null"
+          [attr.sub-node]="0 < i ? '' : null"
+        ></div>
         <div
           class="tree-node-closer-bottom"
-          [attr.last-node]="isLastNode(node) ? '' : null"
+          [style.left.px]="20 - 20 * i"
+          [attr.last-node]="isLastNode(node, i) ? '' : null"
+          [attr.sub-node]="0 < i ? '' : null"
         ></div>
       </div>
-      <li
-        (click)="onClickNode(node)"
-        matRipple
-        [attr.sub-node]="isParentLastNode(node) ? '' : null"
-      >
+
+      <li (click)="onClickNode(node)" matRipple>
         <div class="tree-node-body">{{ node.name }}</div>
       </li>
     </mat-tree-node>
@@ -42,19 +49,25 @@
       matTreeNodePaddingIndent="20"
       class="tree-has-child"
     >
-      <div *ngIf="0 !== node.level" class="tree-node-closer-container">
-        <div class="tree-node-closer-top"></div>
+      <div
+        class="tree-node-closer-container"
+        *ngFor="let i of appendDivArray(node.level)"
+      >
+        <div
+          class="tree-node-closer-top"
+          [style.left.px]="20 - 20 * i"
+          [attr.last-node]="isLastNode(node, i) ? '' : null"
+          [attr.sub-node]="0 < i ? '' : null"
+        ></div>
         <div
           class="tree-node-closer-bottom"
+          [style.left.px]="20 - 20 * i"
           [attr.expanded]="treeControl.isExpanded(node) ? '' : null"
-          [attr.last-node]="isLastNode(node) ? '' : null"
+          [attr.last-node]="isLastNode(node, i) ? '' : null"
+          [attr.sub-node]="0 < i ? '' : null"
         ></div>
       </div>
-      <li
-        (click)="onClickNode(node)"
-        matRipple
-        [attr.sub-node]="isParentLastNode(node) ? '' : null"
-      >
+      <li (click)="onClickNode(node)" matRipple>
         <div class="tree-node-body">
           <span class="horizontal-line"></span>
           <button
diff --git a/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.scss b/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.scss
index 20bca757..8293a687 100644
--- a/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.scss
+++ b/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.scss
@@ -13,7 +13,7 @@
       border: 1px dotted grey;
       border-width: 0 0 1px 1px;
       top: -40px;
-      left: 20px;
+      // left: 20px;
     }
     .tree-node-closer-bottom {
       width: 15px;
@@ -22,7 +22,14 @@
       border: 1px dotted grey;
       border-width: 0 0 1px 1px;
       top: 0px;
-      left: 20px;
+      // left: 20px;
+    }
+
+    .tree-node-closer-top[sub-node] {
+      border-width: 0 0 0 1px;
+    }
+    .tree-node-closer-top[sub-node][last-node] {
+      border-width: 0 0 0 0;
     }
 
     .tree-node-closer-bottom[expanded] {
@@ -31,6 +38,12 @@
     .tree-node-closer-bottom[last-node] {
       border-width: 0 0 1px 0px;
     }
+    .tree-node-closer-bottom[sub-node] {
+      border-width: 0 0 0 1px;
+    }
+    .tree-node-closer-bottom[sub-node][last-node] {
+      border-width: 0 0 0 0;
+    }
   }
 
   li {
@@ -39,11 +52,6 @@
     list-style-type: none;
   }
 
-  // li[sub-node] {
-  //   border: 1px dotted grey;
-  //   border-width: 0 0 0 1px;
-  // }
-
   // li:last-child {
   //   border-left: 1px solid white;
   //   margin-left: -41px;
diff --git a/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.ts b/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.ts
index cbf16694..04c4dafa 100644
--- a/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.ts
+++ b/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.ts
@@ -19,6 +19,8 @@ import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import { VirtualScrollTreeFlatDataSource } from '@ucap-webmessenger/ui';
 import { ucapAnimations } from '@ucap-webmessenger/ui';
 import { trigger, transition, style, animate } from '@angular/animations';
+import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
+import { Subscription } from 'rxjs';
 
 interface OrganizationNode {
   deptInfo: DeptInfo;
@@ -110,10 +112,15 @@ export class TreeComponent implements OnInit, OnDestroy, AfterViewInit {
   @ViewChild('orgranizationTree', { static: false })
   orgranizationTree: MatTree<OrganizationNode>;
 
+  @ViewChild(PerfectScrollbarDirective, { static: false })
+  psDirectiveRef?: PerfectScrollbarDirective;
+
   treeControl: FlatTreeControl<FlatNode>;
   treeFlattener: MatTreeFlattener<OrganizationNode, FlatNode>;
   dataSource: VirtualScrollTreeFlatDataSource<OrganizationNode, FlatNode>;
 
+  treeControlExpansionChangeSubscription: Subscription;
+
   constructor(
     private changeDetectorRef: ChangeDetectorRef,
     private logger: NGXLogger
@@ -141,10 +148,19 @@ export class TreeComponent implements OnInit, OnDestroy, AfterViewInit {
     >(this.treeControl, this.treeFlattener);
   }
 
-  ngOnInit() {}
+  ngOnInit() {
+    this.treeControlExpansionChangeSubscription = this.treeControl.expansionModel.changed.subscribe(
+      () => {
+        this.psDirectiveRef.update();
+      }
+    );
+  }
 
   ngOnDestroy(): void {
     this.logger.debug('-----------------------TreeComponent ngOnDestroy');
+    if (!!this.treeControlExpansionChangeSubscription) {
+      this.treeControlExpansionChangeSubscription.unsubscribe();
+    }
   }
 
   ngAfterViewInit(): void {
@@ -153,51 +169,70 @@ export class TreeComponent implements OnInit, OnDestroy, AfterViewInit {
 
   hasChild = (_: number, node: FlatNode) => node.expandable;
 
-  isLastNode(node: FlatNode): boolean {
-    const i = this.findNodeIndex(node);
+  isLastNode(node: FlatNode, depth: number): boolean {
+    const i = this.findNodeIndex(node, depth);
+
+    if (-1 === i) {
+      return false;
+    }
 
     if (i === this.dataSource.expandedDataSubject.value.length - 1) {
       return true;
     }
 
-    if (node.level !== this.dataSource.expandedDataSubject.value[i + 1].level) {
-      return true;
+    const n = this.dataSource.expandedDataSubject.value[i];
+
+    for (
+      let idx = i + 1;
+      idx < this.dataSource.expandedDataSubject.value.length;
+      idx++
+    ) {
+      const element = this.dataSource.expandedDataSubject.value[idx];
+      if (n.level === element.level) {
+        return false;
+      }
+      if (n.level > element.level) {
+        return true;
+      }
     }
-    return false;
+    return true;
   }
 
-  isParentLastNode(node: FlatNode): boolean {
-    const pi = this.findParentNodeIndex(node);
-    if (-1 === pi) {
-      return false;
+  appendDivArray(level: number): number[] {
+    if (0 === level) {
+      return [];
     }
-    return this.isLastNode(this.dataSource.expandedDataSubject.value[pi]);
+
+    return Array.from({ length: level }, (_, i: number) => i);
   }
 
   onClickNode(node: OrganizationNode) {
     this.selected.emit(node.deptInfo);
   }
 
-  private findNodeIndex(node: FlatNode): number {
-    return this.dataSource.expandedDataSubject.value.findIndex(n => {
-      return node.deptInfo.seq === n.deptInfo.seq;
-    });
-  }
-
-  private findParentNodeIndex(node: FlatNode): number {
-    const i = this.findNodeIndex(node);
-    if (-1 === i) {
+  private findNodeIndex(node: FlatNode, depth: number): number {
+    if (!node) {
       return -1;
     }
+    const i = this.dataSource.expandedDataSubject.value.findIndex(n => {
+      return node.deptInfo.seq === n.deptInfo.seq;
+    });
 
-    for (let idx = i - 1; idx >= 0; idx--) {
-      if (
-        this.dataSource.expandedDataSubject.value[idx].level ===
-        node.level - 1
-      ) {
-        return idx;
+    if (0 === depth) {
+      return i;
+    }
+    return this.findNodeIndex(this.findParentNode(i), depth - 1);
+  }
+
+  private findParentNode(index: number): FlatNode {
+    const node = this.dataSource.expandedDataSubject.value[index];
+
+    for (let idx = index - 1; idx >= 0; idx--) {
+      const n = this.dataSource.expandedDataSubject.value[idx];
+      if (n.level === node.level - 1) {
+        return n;
       }
     }
-    return -1;
+    return undefined;
   }
 }
diff --git a/projects/ucap-webmessenger-ui/src/lib/services/splash-screen.service.ts b/projects/ucap-webmessenger-ui/src/lib/services/splash-screen.service.ts
index 3463c7f5..4b2a571d 100644
--- a/projects/ucap-webmessenger-ui/src/lib/services/splash-screen.service.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/services/splash-screen.service.ts
@@ -71,7 +71,7 @@ export class SplashScreenService {
       .build([
         style({ opacity: '1' }),
         animate(
-          '400ms ease',
+          '700ms ease',
           style({
             opacity: '0',
             display: 'none',

From d053db400f6b4b8e371c16bcc1a40aa3168b5f87 Mon Sep 17 00:00:00 2001
From: Richard Park <richard.park@loafle.com>
Date: Tue, 26 Nov 2019 10:52:50 +0900
Subject: [PATCH 02/10] bug fixed

---
 .../components/left-sidenav/organization.component.html    | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
index 9ca5cd7f..e29c9f11 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
@@ -41,8 +41,11 @@
         </mat-checkbox>
       </dd>
     </dl>
-    <div *ngIf="selectedDepartmentProcessing">
-      <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+    <div style="height: 3px;">
+      <mat-progress-bar
+        *ngIf="selectedDepartmentProcessing"
+        mode="indeterminate"
+      ></mat-progress-bar>
     </div>
     <div *ngIf="!isShowSearch" class="search-list">
       <cdk-virtual-scroll-viewport

From 7da4bfb5ee77624c48507e0898fd4fe208660994 Mon Sep 17 00:00:00 2001
From: khk <kanghk@biztechpartners.co.kr>
Date: Tue, 26 Nov 2019 10:56:58 +0900
Subject: [PATCH 03/10] =?UTF-8?q?=ED=85=8C=EB=A7=88=EC=84=A0=ED=83=9D-=20t?=
 =?UTF-8?q?ab=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../messenger-settings.dialog.component.html  |  2 +-
 .../messenger-settings.dialog.component.scss  | 31 +++++--
 .../src/assets/scss/global/_default.scss      |  2 +-
 .../src/lib/components/general.component.html | 33 ++++----
 .../src/lib/components/general.component.scss | 80 ++++++++++++++-----
 5 files changed, 105 insertions(+), 43 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.html
index 7444dca5..c76235f8 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.html
@@ -4,7 +4,7 @@
   </mat-card-header>
   <mat-card-content>
     <div fxFlex class="setting-tab">
-      <mat-tab-group animationDuration="0ms" vertical>
+      <mat-tab-group animationDuration="0ms">
         <mat-tab>
           <ng-template mat-tab-label>
             <span class="mdi mdi-settings"></span>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.scss
index 11a27ce9..0eb9e3fc 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.scss
@@ -25,11 +25,30 @@
       position: relative;
       width: 100%;
       height: 100%;
-      .mat-tab-body-wrapper {
-        border-left: 1px solid #dddddd;
-        position: relative;
-        height: 100%;
-        padding: 0 0 10px 10px;
+      .mat-tab-group {
+        flex-direction: row;
+        .mat-tab-header {
+          width: 160px;
+          .mat-tab-labels {
+            flex-direction: column;
+            .mat-tab-label {
+              padding: 0 10px;
+              align-content: flex-start;
+              text-align: left;
+              align-items: self-start;
+              justify-content: flex-start;
+            }
+            .mat-ink-bar {
+              display: none;
+            }
+          }
+        }
+        .mat-tab-body-wrapper {
+          border-left: 1px solid #dddddd;
+          position: relative;
+          height: 100%;
+          padding: 0 0 10px 10px;
+        }
       }
     }
   }
@@ -51,6 +70,8 @@
     height: 100%;
     width: 100%;
     .mat-tab-header {
+      width: 160px;
+      flex-flow: column;
       .mat-tab-label-container {
         .mat-tab-list {
           .mat-tab-labels {
diff --git a/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss b/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
index c6f51af9..d6536dbb 100644
--- a/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
+++ b/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
@@ -320,7 +320,7 @@ $daesang-grey: (
 
   mat-tab-group[vertical] {
     display: flex;
-    flex-direction: row !important;
+    flex-direction: row;
 
     .mat-tab-labels {
       display: flex;
diff --git a/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.html b/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.html
index 98f25ae4..ab0aea14 100644
--- a/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.html
+++ b/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.html
@@ -1,40 +1,43 @@
 <div>
   <mat-list>
     <h1 mat-subheader>테마</h1>
-
-    <ul class="theme-list">
+    <!--<ul class="theme-list">
       <li
-        class="theme-box default on"
+        class="theme-box default"
         (click)="onSelectedTabChange('theme-default')"
       ></li>
       <li
         class="theme-box lgRed"
         (click)="onSelectedTabChange('theme-lgRed')"
       ></li>
-    </ul>
-    <mat-list-item>
-      <!-- <mat-tab-group
+    </ul>-->
+    <mat-list-item class="theme-select">
+      <mat-tab-group
         mat-stretch-tabs
         animationDuration="0ms"
         (selectedTabChange)="onSelectedTabChange($event)"
+        fxLayout="row"
+        class="theme-list"
       >
         <mat-tab>
-          <ng-template mat-tab-label>
+          <ng-template mat-tab-label class="theme-item">
             <div class="theme-box default-theme"></div>
-            <div>기본값</div>
+            <div class="theme-name">기본값</div>
           </ng-template>
         </mat-tab>
         <mat-tab>
-          <ng-template mat-tab-label>
+          <ng-template mat-tab-label class="theme-item">
             <div class="theme-box lg-red-theme"></div>
-            <div>LG Red</div>
+            <div class="theme-name">LG Red</div>
           </ng-template>
         </mat-tab>
-      </mat-tab-group> -->
-      <!--
-     <span>기본값</span>
-      <span>어둡게</span>
-      <span>밝게</span> -->
+      </mat-tab-group>
+
+      <div class="brightness">
+        <span>기본값</span>
+        <span>어둡게</span>
+        <span>밝게</span>
+      </div>
     </mat-list-item>
 
     <mat-divider></mat-divider>
diff --git a/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.scss b/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.scss
index 3a190f10..d42e3d64 100644
--- a/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.scss
+++ b/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.scss
@@ -1,34 +1,72 @@
-.theme-list {
+::ng-deep .mat-list-base {
+  .theme-select.mat-list-item {
+    position: relative;
+    height: 200px;
+    .mat-list-item-content {
+      flex-direction: column;
+    }
+  }
+}
+
+::ng-deep .theme-list {
   position: relative;
   display: flex;
   flex-flow: row;
+  width: 100%;
   margin: 10px;
-  height: 120px;
-
-  .theme-box {
-    width: 140px;
-    height: 98px;
-    margin-right: 10px;
-    border: 1px solid #dddddd;
-    background-size: 100% auto;
-    background-repeat: no-repeat;
-    opacity: 0.7;
-    &.default {
-      background-image: url('../../../../ucap-webmessenger-app/src/assets/images/theme/theme-default.png');
+  height: auto !important;
+  .mat-tab-header {
+    position: relative;
+    width: 100% !important;
+    .mat-tab-labels {
+      position: relative;
+      width: 100%;
+      flex-flow: row !important;
+      .mat-tab-label {
+        width: 140px;
+        height: 120px;
+        .mat-tab-label-content {
+          position: relative;
+          flex-flow: column;
+          width: 100%;
+        }
+      }
     }
-    &.lgRed {
-      background-image: url('../../../../ucap-webmessenger-app/src/assets/images/theme/theme-lgRed.png');
-    }
-    &.on {
-      border: 1px solid #333333;
-      opacity: 1;
+    .mat-ink-bar {
+      display: none;
     }
   }
+  .mat-tab-body-wrapper {
+    border-left: none;
+  }
+}
 
-  .default-theme {
+.theme-item {
+  width: 140px;
+  height: 98px;
+  margin-right: 10px;
+  border: 1px solid #dddddd;
+  background-size: 100% auto;
+  background-repeat: no-repeat;
+  opacity: 0.7;
+}
+.theme-box {
+  width: 140px;
+  height: 98px;
+  border: 1px solid #dddddd;
+  background-size: 100% auto;
+  background-repeat: no-repeat;
+  &.default-theme {
     background-image: url('../../../../ucap-webmessenger-app/src/assets/images/theme/theme-default.png');
   }
-  .lg-red-theme {
+  &.lg-red-theme {
     background-image: url('../../../../ucap-webmessenger-app/src/assets/images/theme/theme-lgRed.png');
   }
 }
+
+.brightness {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+}

From bf8e3e9b5f4791f13f7b53a225fede1748df85ba Mon Sep 17 00:00:00 2001
From: Richard Park <richard.park@loafle.com>
Date: Tue, 26 Nov 2019 13:37:07 +0900
Subject: [PATCH 04/10] group is modified

---
 .../components/expansion-panel.component.html |  8 +++-
 .../components/expansion-panel.component.scss | 15 +++++++
 .../components/expansion-panel.component.ts   | 40 +++++++++++++------
 3 files changed, 50 insertions(+), 13 deletions(-)

diff --git a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html b/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html
index 8c8755a8..f08ca10c 100644
--- a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html
+++ b/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html
@@ -14,7 +14,12 @@
     class="group-tree"
   >
     <!-- This is the tree node template for leaf nodes -->
-    <mat-tree-node *matTreeNodeDef="let node" style="height: 80px;" matRipple>
+    <mat-tree-node
+      *matTreeNodeDef="let node"
+      style="height: 80px;"
+      [attr.node-type]="node?.nodeType"
+      matRipple
+    >
       <li>
         <div class="mat-tree-node">
           <ng-container
@@ -33,6 +38,7 @@
       *matTreeNodeDef="let node; when: isHeader"
       class="tree-node-frame ucap-clickable"
       style="height: 80px;"
+      [attr.node-type]="node?.nodeType"
       matRipple
     >
       <li class="tree-node-header" matTreeNodeToggle>
diff --git a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.scss b/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.scss
index ce7b7fd2..4ddf3894 100644
--- a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.scss
+++ b/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.scss
@@ -51,6 +51,21 @@
   }
 }
 
+.mat-tree-node[aria-level='0'][node-type='Profile'] {
+  position: relative;
+  widows: 100px;
+  height: 100%;
+  li {
+    margin-left: 0;
+    width: 100%;
+    height: 100%;
+    .mat-tree-node {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
 .path {
   display: flex;
   padding: 6px 4px;
diff --git a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.ts b/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.ts
index d03dd551..77fe47a6 100644
--- a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.ts
+++ b/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.ts
@@ -27,6 +27,7 @@ import { VirtualScrollTreeFlatDataSource } from '@ucap-webmessenger/ui';
 import { FlatTreeControl } from '@angular/cdk/tree';
 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
+import { Subscription } from 'rxjs';
 
 enum NodeType {
   None = 'None',
@@ -66,14 +67,10 @@ export class ExpansionPanelComponent
     }
     const groupNode: GroupNode = {
       nodeType: NodeType.Profile,
+      userInfo,
       children: []
     };
 
-    groupNode.children.push({
-      nodeType: NodeType.Profile,
-      userInfo
-    });
-
     this.profileNodes = [groupNode];
 
     this.refreshRootNodeList();
@@ -167,8 +164,8 @@ export class ExpansionPanelComponent
   @ViewChild('cvsvGroup', { static: false })
   cvsvGroup: CdkVirtualScrollViewport;
 
-  @ViewChild('cvsvGroup', { read: PerfectScrollbarDirective, static: false })
-  perfectScrollbar: PerfectScrollbarDirective;
+  @ViewChild(PerfectScrollbarDirective, { static: false })
+  psDirectiveRef?: PerfectScrollbarDirective;
 
   NodeType = NodeType;
 
@@ -183,6 +180,8 @@ export class ExpansionPanelComponent
 
   groupList: { group: GroupDetailData; buddyList: UserInfo[] }[];
 
+  treeControlExpansionChangeSubscription: Subscription;
+
   constructor(
     private changeDetectorRef: ChangeDetectorRef,
     private logger: NGXLogger
@@ -217,23 +216,40 @@ export class ExpansionPanelComponent
     );
   }
 
-  ngOnInit() {}
+  ngOnInit() {
+    this.treeControlExpansionChangeSubscription = this.treeControl.expansionModel.changed.subscribe(
+      () => {
+        this.psDirectiveRef.update();
+      }
+    );
+  }
 
-  ngOnDestroy(): void {}
+  ngOnDestroy(): void {
+    if (!!this.treeControlExpansionChangeSubscription) {
+      this.treeControlExpansionChangeSubscription.unsubscribe();
+    }
+  }
 
   ngAfterViewInit(): void {
     this.dataSource.cdkVirtualScrollViewport = this.cvsvGroup;
   }
 
   // hasChild = (_: number, node: FlatNode) => node.expandable;
-  isHeader = (_: number, node: FlatNode) => 0 === node.level;
+  isHeader = (_: number, node: FlatNode) =>
+    NodeType.Profile !== node.nodeType && 0 === node.level;
 
   expandMore() {
     this.groupTree.treeControl.expandAll();
+    if (!!this.psDirectiveRef) {
+      this.psDirectiveRef.scrollToTop();
+    }
   }
 
   expandLess() {
     this.groupTree.treeControl.collapseAll();
+    if (!!this.psDirectiveRef) {
+      this.psDirectiveRef.scrollToTop();
+    }
   }
 
   onClickMore(event: MouseEvent, group: GroupDetailData) {
@@ -287,8 +303,8 @@ export class ExpansionPanelComponent
     ];
     this.dataSource.data = this.rootNodeList;
 
-    if (!!this.perfectScrollbar) {
-      this.perfectScrollbar.scrollToTop();
+    if (!!this.psDirectiveRef) {
+      this.psDirectiveRef.scrollToTop();
     }
   }
 }

From 5cc74eb11efd917deb2af8564f6b3f954b480176 Mon Sep 17 00:00:00 2001
From: Richard Park <richard.park@loafle.com>
Date: Tue, 26 Nov 2019 13:51:19 +0900
Subject: [PATCH 05/10] toolbar of message is modified

---
 .../app/layouts/messenger/components/messages.component.scss  | 4 ++--
 .../src/lib/components/tenant-search.component.html           | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss
index 64e53e8b..95f55e61 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss
@@ -24,8 +24,8 @@
 }
 .chat-toolbar {
   width: 100%;
-  height: 80px;
-  min-height: 80px;
+  height: 70px;
+  min-height: 70px;
   align-items: center;
   background-color: #ffffff !important;
   border-bottom: 1px solid #dddddd;
diff --git a/projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.html b/projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.html
index 675ab425..c73d4782 100644
--- a/projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.html
+++ b/projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.html
@@ -15,7 +15,7 @@
       <input
         matInput
         #searchWordInput
-        placeholder="name"
+        placeholder="검색어"
         (keydown.enter)="onKeyDownEnter(searchWordInput.value)"
       />
       <button

From 4582a2521982ed09f54a725eaa5a8e4ebd8c4743 Mon Sep 17 00:00:00 2001
From: Richard Park <richard.park@loafle.com>
Date: Tue, 26 Nov 2019 13:57:37 +0900
Subject: [PATCH 06/10] progress-bar is modified

---
 .../left-sidenav/organization.component.html           | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
index e29c9f11..6c753ed0 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
@@ -41,11 +41,13 @@
         </mat-checkbox>
       </dd>
     </dl>
-    <div style="height: 3px;">
-      <mat-progress-bar
+    <div style="position: relative;">
+      <div
         *ngIf="selectedDepartmentProcessing"
-        mode="indeterminate"
-      ></mat-progress-bar>
+        style="position: absolute; width: 100%;"
+      >
+        <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+      </div>
     </div>
     <div *ngIf="!isShowSearch" class="search-list">
       <cdk-virtual-scroll-viewport

From 67a6e4ceafa5198e48a5373bef45a9982f43b664 Mon Sep 17 00:00:00 2001
From: Richard Park <richard.park@loafle.com>
Date: Tue, 26 Nov 2019 14:06:50 +0900
Subject: [PATCH 07/10] progress bar is modified

---
 .../left-sidenav/group.component.html         | 39 ++++++--
 .../components/messages.component.html        | 12 ++-
 .../chat/create-chat.dialog.component.html    | 10 +-
 .../file-viewer/binary-viewer.component.html  | 95 +++++++++++++++----
 .../document-viewer.component.html            | 16 +++-
 .../file-viewer/image-viewer.component.html   | 16 +++-
 .../file-viewer/sound-viewer.component.html   | 16 +++-
 .../file-viewer/video-viewer.component.html   | 16 +++-
 8 files changed, 169 insertions(+), 51 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html
index 85578952..e22eec97 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html
@@ -46,9 +46,12 @@
   </ucap-group-expansion-panel>
 </div>
 <div [style.display]="isShowSearch ? 'block' : 'none'" class="search-result">
-  <div *ngIf="searchProcessing">
-    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+  <div style="position: relative;">
+    <div *ngIf="searchProcessing" style="position: absolute; width: 100%;">
+      <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+    </div>
   </div>
+
   <div class="result-num">
     검색결과<span class="text-accent-color"
       >({{ searchUserInfos.length }}명)</span
@@ -93,16 +96,36 @@
   </button>
   <button mat-menu-item (click)="onClickGroupMenu('GROUP_EXPAND_MORE')">
     <!--<mat-icon>expand_more</mat-icon>-->
-    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-      stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
-      <path d="M6 9l6 6 6-6" /></svg>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="butt"
+      stroke-linejoin="round"
+    >
+      <path d="M6 9l6 6 6-6" />
+    </svg>
     <span>그룹 전체 열기</span>
   </button>
   <button mat-menu-item (click)="onClickGroupMenu('GROUP_EXPAND_LESS')">
     <!--<mat-icon>expand_less</mat-icon>-->
-    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-        stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
-        <path d="M18 15l-6-6-6 6" /></svg>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="butt"
+      stroke-linejoin="round"
+    >
+      <path d="M18 15l-6-6-6 6" />
+    </svg>
     <span>그룹 전체 닫기</span>
   </button>
   <!-- <button mat-menu-item (click)="onClickGroupMenu('GROUP_SAVE')">
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
index ec18b44b..d7d90dc1 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
@@ -142,10 +142,14 @@
     </div>
   </mat-toolbar>
   <!-- / CHAT TOOLBAR -->
-  <mat-progress-bar
-    *ngIf="eventListProcessing$ | async"
-    mode="indeterminate"
-  ></mat-progress-bar>
+  <div style="position: relative;">
+    <div
+      *ngIf="eventListProcessing$ | async"
+      style="position: absolute; width: 100%;"
+    >
+      <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+    </div>
+  </div>
   <!-- CHAT CONTENT -->
   <div
     fxFlex="1 1 auto"
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html
index 4d0fa70d..cb93dc2e 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html
@@ -93,9 +93,15 @@
                 [style.display]="isShowSearch ? 'block' : 'none'"
                 class="search-result"
               >
-                <div *ngIf="searchProcessing">
-                  <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+                <div style="position: relative;">
+                  <div
+                    *ngIf="searchProcessing"
+                    style="position: absolute; width: 100%;"
+                  >
+                    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+                  </div>
                 </div>
+
                 <div class="result-num">
                   검색결과
                   <span class="text-accent-color"
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.html b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.html
index 3e8b3161..66f712ed 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.html
@@ -1,35 +1,91 @@
 <div class="ucap-binary-viewer-container">
   <mat-toolbar class="ucap-binary-viewer-header">
     <!--<mat-icon class="ucap-binary-viewer-icon">attachment</mat-icon>-->
-    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-      stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round" class="ucap-binary-viewer-icon">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="butt"
+      stroke-linejoin="round"
+      class="ucap-binary-viewer-icon"
+    >
       <path
-        d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48">
-      </path>
+        d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"
+      ></path>
     </svg>
     <span class="ucap-binary-viewer-title">{{ fileInfo.fileName }}</span>
     <span class="ucap-binary-viewer-spacer"></span>
 
-    <button mat-icon-button class="ucap-binary-viewer-action" matTooltip="다운로드" matTooltipPosition="below" aria-label=""
-      (click)="onClickDownload()">
-      <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none"
-        stroke="currentColor" stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
-        <path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5" />
+    <button
+      mat-icon-button
+      class="ucap-binary-viewer-action"
+      matTooltip="다운로드"
+      matTooltipPosition="below"
+      aria-label=""
+      (click)="onClickDownload()"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="21"
+        height="21"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="butt"
+        stroke-linejoin="round"
+      >
+        <path
+          d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"
+        />
       </svg>
     </button>
     <span class="stroke-bar"></span>
-    <button mat-icon-button color="warn" class="ucap-binary-viewer-action" (click)="onClickClose()">
-      <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none"
-        stroke="currentColor" stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
+    <button
+      mat-icon-button
+      color="warn"
+      class="ucap-binary-viewer-action"
+      (click)="onClickClose()"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="21"
+        height="21"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="butt"
+        stroke-linejoin="round"
+      >
         <line x1="18" y1="6" x2="6" y2="18"></line>
         <line x1="6" y1="6" x2="18" y2="18"></line>
       </svg>
     </button>
   </mat-toolbar>
-
+  <div style="position: relative;">
+    <div
+      *ngIf="fileDownloadItem && fileDownloadItem.downloadingProgress$"
+      style="position: absolute; width: 100%;"
+    >
+      <mat-progress-bar
+        mode="determinate"
+        [value]="fileDownloadItem.downloadingProgress$ | async"
+      ></mat-progress-bar>
+    </div>
+  </div>
   <div class="ucap-binary-viewer-body">
-    <div class="ucap-binary-viewer-content-wrapper" fxLayout="column" fxLayout.xs="row" fxFlexFill
-      fxLayoutAlign="center center">
+    <div
+      class="ucap-binary-viewer-content-wrapper"
+      fxLayout="column"
+      fxLayout.xs="row"
+      fxFlexFill
+      fxLayoutAlign="center center"
+    >
       <div class="circle-box">
         <div [ngClass]="['mime-icon', 'light', 'ico-' + fileInfo.fileExt]">
           <div class="ico"></div>
@@ -39,10 +95,15 @@
         미리보기를 지원하지 않는 파일입니다.
       </div>
       <div>
-        <button colori mat-raised-button aria-label="" (click)="onClickDownload()">
+        <button
+          colori
+          mat-raised-button
+          aria-label=""
+          (click)="onClickDownload()"
+        >
           Download
         </button>
       </div>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/document-viewer.component.html b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/document-viewer.component.html
index b9df4234..1590190a 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/document-viewer.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/document-viewer.component.html
@@ -15,9 +15,15 @@
       >delete</mat-icon
     >
   </mat-toolbar>
-  <mat-progress-bar
-    *ngIf="fileDownloadItem && fileDownloadItem.downloadingProgress$"
-    mode="determinate"
-    [value]="fileDownloadItem.downloadingProgress$ | async"
-  ></mat-progress-bar>
+  <div style="position: relative;">
+    <div
+      *ngIf="fileDownloadItem && fileDownloadItem.downloadingProgress$"
+      style="position: absolute; width: 100%;"
+    >
+      <mat-progress-bar
+        mode="determinate"
+        [value]="fileDownloadItem.downloadingProgress$ | async"
+      ></mat-progress-bar>
+    </div>
+  </div>
 </div>
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.html b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.html
index 343a55d6..c336f3c0 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.html
@@ -143,11 +143,17 @@
       </svg>
     </button>
   </mat-toolbar>
-  <mat-progress-bar
-    *ngIf="fileDownloadItem && fileDownloadItem.downloadingProgress$"
-    mode="determinate"
-    [value]="fileDownloadItem.downloadingProgress$ | async"
-  ></mat-progress-bar>
+  <div style="position: relative;">
+    <div
+      *ngIf="fileDownloadItem && fileDownloadItem.downloadingProgress$"
+      style="position: absolute; width: 100%;"
+    >
+      <mat-progress-bar
+        mode="determinate"
+        [value]="fileDownloadItem.downloadingProgress$ | async"
+      ></mat-progress-bar>
+    </div>
+  </div>
   <div class="ucap-image-viewer-body">
     <div
       class="ucap-image-viewer-image-wrapper"
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.html b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.html
index 1d791071..959d7f31 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.html
@@ -22,11 +22,17 @@
       Close
     </button>
   </mat-toolbar>
-  <mat-progress-bar
-    *ngIf="fileDownloadItem && fileDownloadItem.downloadingProgress$"
-    mode="determinate"
-    [value]="fileDownloadItem.downloadingProgress$ | async"
-  ></mat-progress-bar>
+  <div style="position: relative;">
+    <div
+      *ngIf="fileDownloadItem && fileDownloadItem.downloadingProgress$"
+      style="position: absolute; width: 100%;"
+    >
+      <mat-progress-bar
+        mode="determinate"
+        [value]="fileDownloadItem.downloadingProgress$ | async"
+      ></mat-progress-bar>
+    </div>
+  </div>
   <div class="ucap-sound-viewer-body">
     <div
       class="ucap-sound-viewer-sound-icon"
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.html b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.html
index 9a3f9778..d06f5100 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.html
@@ -73,11 +73,17 @@
       </svg>
     </button>
   </mat-toolbar>
-  <mat-progress-bar
-    *ngIf="fileDownloadItem && fileDownloadItem.downloadingProgress$"
-    mode="determinate"
-    [value]="fileDownloadItem.downloadingProgress$ | async"
-  ></mat-progress-bar>
+  <div style="position: relative;">
+    <div
+      *ngIf="fileDownloadItem && fileDownloadItem.downloadingProgress$"
+      style="position: absolute; width: 100%;"
+    >
+      <mat-progress-bar
+        mode="determinate"
+        [value]="fileDownloadItem.downloadingProgress$ | async"
+      ></mat-progress-bar>
+    </div>
+  </div>
   <div class="ucap-video-viewer-body">
     <div
       class="ucap-video-viewer-video-icon"

From 297baa1771192f833edd95105a0eb6e6e800e985 Mon Sep 17 00:00:00 2001
From: Richard Park <richard.park@loafle.com>
Date: Tue, 26 Nov 2019 14:53:51 +0900
Subject: [PATCH 08/10] count of room member is commented

---
 .../lib/components/list-item.component.html   |  9 ++++++++
 .../lib/components/list-item.component.scss   | 22 +++++++++++++------
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html b/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html
index 615ac7eb..c05d7ce0 100644
--- a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html
+++ b/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html
@@ -11,6 +11,15 @@
       <span *ngIf="roomInfo.isTimeRoom" class="text-warn-color badge-timer">
         <mat-icon>timer</mat-icon>
       </span>
+      <!-- <div style="position: relative;">
+        <div
+          class="num text-accent-darkest thumbnail"
+          *ngIf="roomInfo.roomType === RoomType.Multi"
+          style="position: absolute; width: 40px; height: 40px; top: -40px"
+        >
+          {{ roomInfo.joinUserCount }}
+        </div>
+      </div> -->
     </dt>
     <dd class="info">
       <div class="detail">
diff --git a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss b/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss
index 7c4a947a..3c00793f 100644
--- a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss
+++ b/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss
@@ -25,19 +25,19 @@ $thumbnail-msize: 40px;
 }
 
 .badge-timer {
-  position:absolute;
+  position: absolute;
   background-color: #ffffff;
   width: 18px;
   height: 18px;
   border-radius: 50%;
   bottom: 14px;
   left: 46px;
-  text-align:center;
-  .mat-icon{
-    font-size:14px;
-     width: 18px;
+  text-align: center;
+  .mat-icon {
+    font-size: 14px;
+    width: 18px;
     height: 18px;
-    line-height:18px;
+    line-height: 18px;
   }
 }
 
@@ -131,7 +131,7 @@ $thumbnail-msize: 40px;
           font-size: 16px;
           color: #666666;
           margin-left: 4px;
-          line-height:unset;
+          line-height: unset;
         }
         .num {
           font-size: 12px;
@@ -158,6 +158,14 @@ $thumbnail-msize: 40px;
       @include ellipsis(1);
     }
   }
+
+  .num {
+    font-size: 18px;
+    font: bold;
+    flex: none;
+    text-align: center;
+    background-color: rgba($color: #666666, $alpha: 0.5);
+  }
 }
 
 .list-item {

From 7e91df9a5d1e1fa1a042083b57bf241b8a5eba37 Mon Sep 17 00:00:00 2001
From: Richard Park <richard.park@loafle.com>
Date: Tue, 26 Nov 2019 15:08:00 +0900
Subject: [PATCH 09/10] general settings is modified

---
 .../src/lib/components/general.component.html     |  6 ------
 .../src/lib/components/general.component.scss     |  2 +-
 .../src/lib/components/general.component.ts       | 15 ++++++++++++++-
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.html b/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.html
index ab0aea14..79b4e8de 100644
--- a/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.html
+++ b/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.html
@@ -32,12 +32,6 @@
           </ng-template>
         </mat-tab>
       </mat-tab-group>
-
-      <div class="brightness">
-        <span>기본값</span>
-        <span>어둡게</span>
-        <span>밝게</span>
-      </div>
     </mat-list-item>
 
     <mat-divider></mat-divider>
diff --git a/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.scss b/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.scss
index d42e3d64..6cbcedc7 100644
--- a/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.scss
+++ b/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.scss
@@ -1,7 +1,7 @@
 ::ng-deep .mat-list-base {
   .theme-select.mat-list-item {
     position: relative;
-    height: 200px;
+    height: 160px;
     .mat-list-item-content {
       flex-direction: column;
     }
diff --git a/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.ts b/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.ts
index a64a5f71..7c0cab31 100644
--- a/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.ts
+++ b/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.ts
@@ -6,6 +6,7 @@ import {
   EventEmitter
 } from '@angular/core';
 import { FormGroup, FormBuilder } from '@angular/forms';
+import { MatTabChangeEvent } from '@angular/material';
 
 @Component({
   selector: 'ucap-settings-general',
@@ -25,7 +26,19 @@ export class GeneralComponent implements OnInit {
 
   ngOnInit() {}
 
-  onSelectedTabChange(theme: string) {
+  onSelectedTabChange(e: MatTabChangeEvent) {
+    let theme = 'theme-default';
+    switch (e.index) {
+      case 0:
+        theme = 'theme-default';
+        break;
+      case 1:
+        theme = 'theme-lgRed';
+        break;
+      default:
+        break;
+    }
+
     this.selectTheme.emit(theme);
   }
 

From fb753bef76874a0887dfc66a5a7b4006403b0d08 Mon Sep 17 00:00:00 2001
From: khk <kanghk@biztechpartners.co.kr>
Date: Tue, 26 Nov 2019 15:11:07 +0900
Subject: [PATCH 10/10] sound-viewer

---
 .../file-viewer/binary-viewer.component.scss  |   2 +-
 .../file-viewer/sound-viewer.component.html   | 101 ++++++++++--------
 .../file-viewer/sound-viewer.component.scss   |  88 +++++++++++----
 3 files changed, 125 insertions(+), 66 deletions(-)

diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.scss b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.scss
index 776b1d9f..cc42df30 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.scss
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.scss
@@ -53,7 +53,7 @@
       justify-content: center;
       align-items: center;
       border:2px solid #ffffff;
-      background-color:rgba(256, 256, 256, 0.6);
+      background-color:rgba(256, 256, 256, 0.7);
     }
     .guide-msg{
       font-size:16px;
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.html b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.html
index 959d7f31..b603f572 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.html
@@ -5,21 +5,30 @@
     <span class="ucap-sound-viewer-spacer"></span>
     <button
       mat-icon-button
-      class="ucap-sound-viewer-action"
+      class="ucap-image-viewer-action"
       matTooltip="다운로드"
       matTooltipPosition="below"
       aria-label=""
       (click)="onClickDownload()"
     >
-      <mat-icon>get_app</mat-icon>
+      <!--<mat-icon>get_app</mat-icon>-->
+      <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+        stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
+        <path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5" />
+      </svg>
     </button>
+    <span class="stroke-bar"></span>
     <button
-      mat-raised-button
-      color="primary"
-      class="ucap-sound-viewer-action"
+      mat-icon-button
+      color="warn"
+      class="ucap-image-viewer-action btn-close"
       (click)="onClickClose()"
     >
-      Close
+      <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+        stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
+        <line x1="18" y1="6" x2="6" y2="18"></line>
+        <line x1="6" y1="6" x2="18" y2="18"></line>
+      </svg>
     </button>
   </mat-toolbar>
   <div style="position: relative;">
@@ -50,46 +59,50 @@
         (loadstart)="onLoadStartAudio()"
         (loadeddata)="onLoadedDataAudio()"
       ></audio>
-      <mat-icon class="ucap-sound-viewer-icon">music_note</mat-icon>
-    </div>
-    <div
-      class="ucap-sound-viewer-sound-time"
-      fxLayout="row"
-      fxLayout.xs="column"
-      fxLayoutAlign="center center"
-    >
-      <mat-slider
-        #timeSlider
-        min="0"
-        [max]="duration"
-        [value]="currentTime"
-        (change)="onChangeTimeSlider($event)"
-      >
-      </mat-slider>
-    </div>
-    <div
-      class="ucap-sound-viewer-sound-controls"
-      fxLayout="row"
-      fxLayout.xs="column"
-      fxLayoutAlign="center center"
-    >
-      <div class="ucap-sound-viewer-sound-time-current">
-        {{ currentTime | ucapSecondsToMinutes }}
+      <div class="circle-box">
+        <mat-icon class="ucap-sound-viewer-icon">music_note</mat-icon>
       </div>
-      <span class="ucap-sound-viewer-spacer"></span>
-      <button
-        mat-icon-button
-        class="ucap-sound-viewer-action"
-        [matTooltip]="playing ? '멈춤' : '재생'"
-        aria-label=""
-        (click)="onClickPlayOrPause()"
+    </div>
+    <div class="viewer-bottom">
+      <div
+        class="ucap-sound-viewer-sound-time"
+        fxLayout="row"
+        fxLayout.xs="column"
+        fxLayoutAlign="center center"
       >
-        <mat-icon>{{ playing ? 'pause' : 'play_arrow' }}</mat-icon>
-      </button>
-      <span class="ucap-sound-viewer-spacer"></span>
-      <div class="ucap-sound-viewer-sound-time-total">
-        {{ duration | ucapSecondsToMinutes }}
+        <mat-slider
+          #timeSlider
+          min="0"
+          [max]="duration"
+          [value]="currentTime"
+          (change)="onChangeTimeSlider($event)"
+        >
+        </mat-slider>
+      </div>
+      <div
+        class="ucap-sound-viewer-sound-controls"
+        fxLayout="row"
+        fxLayout.xs="column"
+        fxLayoutAlign="center center"
+      >
+        <div class="ucap-sound-viewer-sound-time-current">
+          {{ currentTime | ucapSecondsToMinutes }}
+        </div>
+        <span class="ucap-sound-viewer-spacer"></span>
+        <button
+          mat-icon-button
+          class="ucap-sound-viewer-action"
+          [matTooltip]="playing ? '멈춤' : '재생'"
+          aria-label=""
+          (click)="onClickPlayOrPause()"
+        >
+          <mat-icon>{{ playing ? 'pause' : 'play_arrow' }}</mat-icon>
+        </button>
+        <span class="ucap-sound-viewer-spacer"></span>
+        <div class="ucap-sound-viewer-sound-time-total">
+          {{ duration | ucapSecondsToMinutes }}
+        </div>
       </div>
     </div>
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.scss b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.scss
index d2d0bfbf..9fb05407 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.scss
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.scss
@@ -4,40 +4,73 @@
 
   .ucap-sound-viewer-header {
     width: 100%;
-    height: 50px;
+    height: 60px;
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
+    background-color: #333333;
 
     .ucap-sound-viewer-icon {
+      margin-right: 10px;
     }
 
     .ucap-sound-viewer-title {
+      font-size:16px;
+    }
+    .stroke-bar {
+      width: 1px;
+      height: 30px;
+      background-color: rgba(256, 256, 256, 0.3);
+      margin: 0 10px;
+    }
+    .ucap-sound-viewer-action {
+      &:hover {
+        opacity: 0.7;
+      }
     }
   }
 
   .ucap-sound-viewer-body {
     position: relative;
-    background-color: white;
     width: 100%;
-    height: 100%;
-    padding-bottom: 70px;
+    height: calc(100% - 60px);
 
-    .ucap-sound-viewer-sound-icon {
-      width: 100%;
-      height: calc(100% - 60px);
-    }
-    .ucap-sound-viewer-sound-time {
-      width: 100%;
-      height: 30px;
-    }
-    .ucap-sound-viewer-sound-controls {
-      width: 100%;
-      height: 30px;
-
-      .ucap-sound-viewer-sound-time-current {
-        padding-left: 30px;
+    .circle-box{
+      display:flex;
+      width:140px;
+      height:140px;
+      border-radius:50%;
+      justify-content: center;
+      align-items: center;
+      border:2px solid #ffffff;
+      background-color:rgba(256, 256, 256, 0.7);
+      .mat-icon{
+        font-size: 100px;
+        height: 100px;
+        width: 100px;
       }
+    }
 
-      .ucap-sound-viewer-sound-time-total {
-        padding-right: 30px;
+    .ucap-sound-viewer-sound-icon{
+      width: 100%;
+       height: calc(100% - 80px);
+    }
+    .viewer-bottom{
+      background-color: #212121;
+      color:#ffffff;
+      .ucap-sound-viewer-sound-time {
+        width: 100%;
+        height: 30px;
+      }
+      .ucap-sound-viewer-sound-controls {
+        width: 100%;
+        height: 50px;
+
+        .ucap-sound-viewer-sound-time-current {
+          padding-left: 30px;
+        }
+
+        .ucap-sound-viewer-sound-time-total {
+          padding-right: 30px;
+        }
       }
     }
   }
@@ -45,9 +78,22 @@
     flex: 1 1 auto;
   }
   .ucap-sound-viewer-action {
+    .mat-icon{
+      font-size: 40px;
+      width: 100%;
+      height: 100%;
+      line-height:40px;
+    }
   }
 }
 
 mat-slider {
-  width: 95%;
+  width: 94%;
 }
+
+::ng-deep .mat-slider-horizontal .mat-slider-track-background{
+  background-color: #999999 !important;
+}
+::ng-deep .mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb{
+  border-color: #999999 !important;
+}
\ No newline at end of file