Merge branch 'master' of http://10.81.13.221:6990/Web/next-ucap-messenger

projects/ucap-webmessenger-app/src/app/app.theme.scss

@@ -103,28 +103,51 @@ body.theme-pink-dark {
 // -----------------------------------------------------------------------------------------------------
 
 // Define the primary, accent and warn palettes
-/*$pink-light-theme-primary-palette: mat-palette($mat-grey,800);
+$lgRed-light-theme-primary-palette: mat-palette($mat-grey,800);
-$pink-light-theme-accent-palette: mat-palette($lg-red, 400);
+$lgRed-light-theme-accent-palette: mat-palette($lg-red, 400);
-$pink-light-theme-warn-palette: mat-palette($mat-red);*/
+$lgRed-light-theme-warn-palette: mat-palette($mat-cyan);
 
-$pink-light-theme-primary-palette: mat-palette($daesang-grey, 900);
-$pink-light-theme-accent-palette: mat-palette($daesang);
-$pink-light-theme-warn-palette: mat-palette($mat-orange);
 
 // Create the Material theme object
-$pink-light-theme: mat-light-theme(
+$lgRed-light-theme: mat-light-theme(
-  $pink-light-theme-primary-palette,
+  $lgRed-light-theme-primary-palette,
-  $pink-light-theme-accent-palette,
+  $lgRed-light-theme-accent-palette,
-  $pink-light-theme-warn-palette
+  $lgRed-light-theme-warn-palette
+);
+
+// Add ".theme-pink-dark" class to the body to activate this theme.
+// Class name must start with "theme-" !!!
+body.theme-lgRed{
+  // Generate the Angular Material theme
+  @include angular-material-theme($lgRed-light-theme);
+
+  // Apply the theme to the user components
+  @include components-theme($lgRed-light-theme);
+  @include ucap-material-theme($lgRed-light-theme);
+}
+
+// -----------------------------------------------------------------------------------------------------
+//aqua-blue-daesang
+// -----------------------------------------------------------------------------------------------------
+
+$aquaBlue-light-theme-primary-palette: mat-palette($daesang-grey, 900);
+$aquaBlue-theme-accent-palette: mat-palette($aquaBlue-daesang);
+$aquaBlue-theme-warn-palette: mat-palette($mat-orange);
+
+// Create the Material theme object
+$aquaBlue-light-theme: mat-light-theme(
+  $aquaBlue-light-theme-primary-palette,
+  $aquaBlue-theme-accent-palette,
+  $aquaBlue-theme-warn-palette
 );
 
 // Add ".theme-pink-dark" class to the body to activate this theme.
 // Class name must start with "theme-" !!!
 body.theme-default {
   // Generate the Angular Material theme
-  @include angular-material-theme($pink-light-theme);
+  @include angular-material-theme($aquaBlue-light-theme);
 
   // Apply the theme to the user components
-  @include components-theme($pink-light-theme);
+  @include components-theme($aquaBlue-light-theme);
-  @include ucap-material-theme($pink-light-theme);
+  @include ucap-material-theme($aquaBlue-light-theme);
 }

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

@@ -5,36 +5,75 @@
   <div class="app-layout-native-title-bar-title">UCAP M Messenger</div>
   <div class="app-layout-native-title-bar-spacer"></div>
   <div class="app-layout-native-title-bar-link">
-
+    <button
-    <button mat-icon-button class="button app-layout-native-title-bar-setting">
+      mat-icon-button
-      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+      class="button app-layout-native-title-bar-setting"
-        stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round" alt="환경설정">
+      (click)="onClickSettings()"
+    >
+      <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"
+        alt="환경설정"
+      >
         <circle cx="12" cy="12" r="3"></circle>
         <path
-          d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z">
+          d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
-        </path>
+        ></path>
       </svg>
     </button>
 
-    <button mat-icon-button class="button app-layout-native-title-bar-logout">
+    <button
-      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+      mat-icon-button
-        stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round" alt="로그아웃" class="stroke-warn-color" >
+      class="button app-layout-native-title-bar-logout"
-        <path d="M10 3H6a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h4M16 17l5-5-5-5M19.8 12H9" /></svg>
+      (click)="onClickLogout()"
+    >
+      <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"
+        alt="로그아웃"
+        class="stroke-warn-color"
+      >
+        <path
+          d="M10 3H6a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h4M16 17l5-5-5-5M19.8 12H9"
+        />
+      </svg>
     </button>
 
     <span class="stroke-bar"></span>
-
   </div>
   <div class="app-layout-native-title-bar-actions">
-
     <button
       mat-icon-button
       class="button app-layout-native-title-bar-minimize"
       (click)="onClickMinimize()"
     >
       <!--<mat-icon>minimize</mat-icon>-->
-      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+      <svg
-        stroke-width="2" stroke-linecap="butt" stroke-linejoin="round" alt="창 최소화">
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="butt"
+        stroke-linejoin="round"
+        alt="창 최소화"
+      >
         <line x1="5" y1="18" x2="19" y2="18"></line>
       </svg>
     </button>
@@ -45,19 +84,45 @@
     >
       <ng-container [ngSwitch]="windowStateChanged$ | async">
         <!--<mat-icon *ngSwitchCase="WindowState.Maximized">filter_none</mat-icon>-->
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+        <svg
-          stroke-width="2" stroke-linecap="butt" stroke-linejoin="round" *ngSwitchCase="WindowState.Maximized" alt="창 이전크기">
+          xmlns="http://www.w3.org/2000/svg"
-          <path class="st0"
+          width="20"
-            d="M15,9.5v7c0,0.8-0.7,1.5-1.5,1.5h-7C5.7,18,5,17.3,5,16.5v-7C5,8.7,5.7,8,6.5,8h7C14.3,8,15,8.7,15,9.5z" />
+          height="20"
-          <path class="st0" d="M8.8,6.8V6c0-0.8,0.7-1.5,1.5-1.5H17c0.8,0,1.5,0.7,1.5,1.5v6.8c0,0.8-0.7,1.5-1.5,1.5h-0.8" />
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="butt"
+          stroke-linejoin="round"
+          *ngSwitchCase="WindowState.Maximized"
+          alt="창 이전크기"
+        >
+          <path
+            class="st0"
+            d="M15,9.5v7c0,0.8-0.7,1.5-1.5,1.5h-7C5.7,18,5,17.3,5,16.5v-7C5,8.7,5.7,8,6.5,8h7C14.3,8,15,8.7,15,9.5z"
+          />
+          <path
+            class="st0"
+            d="M8.8,6.8V6c0-0.8,0.7-1.5,1.5-1.5H17c0.8,0,1.5,0.7,1.5,1.5v6.8c0,0.8-0.7,1.5-1.5,1.5h-0.8"
+          />
         </svg>
 
         <!--<mat-icon *ngSwitchDefault>crop_din</mat-icon>-->
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+        <svg
-          stroke-width="2" stroke-linecap="butt" stroke-linejoin="round" *ngSwitchDefault alt="창크기 최대">
+          xmlns="http://www.w3.org/2000/svg"
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="butt"
+          stroke-linejoin="round"
+          *ngSwitchDefault
+          alt="창크기 최대"
+        >
           <rect x="5" y="5" width="12" height="12" rx="2" ry="2"></rect>
         </svg>
-
       </ng-container>
     </button>
     <button
@@ -66,8 +131,18 @@
       (click)="onClickClose()"
     >
       <!--<mat-icon>close</mat-icon>-->
-      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+      <svg
-        stroke-width="2" stroke-linecap="butt" stroke-linejoin="round" alt="창닫기">
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="butt"
+        stroke-linejoin="round"
+        alt="창닫기"
+      >
         <line x1="18" y1="6" x2="6" y2="18"></line>
         <line x1="6" y1="6" x2="18" y2="18"></line>
       </svg>

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

@@ -5,6 +5,10 @@ import {
   WindowState
 } from '@ucap-webmessenger/native';
 import { Observable } from 'rxjs';
+import { Store } from '@ngrx/store';
+
+import * as AuthenticationStore from '@app/store/account/authentication';
+import * as SettingsStore from '@app/store/messenger/settings';
 
 @Component({
   selector: 'app-layout-native-top-bar',
@@ -17,6 +21,7 @@ export class TopBarComponent implements OnInit, OnDestroy {
   WindowState = WindowState;
 
   constructor(
+    private store: Store<any>,
     @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService
   ) {}
 
@@ -37,4 +42,12 @@ export class TopBarComponent implements OnInit, OnDestroy {
   onClickMaxmize() {
     this.nativeService.windowMaximize();
   }
+
+  onClickSettings(): void {
+    this.store.dispatch(SettingsStore.showDialog());
+  }
+
+  onClickLogout(): void {
+    this.store.dispatch(AuthenticationStore.logout());
+  }
 }

projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss

@@ -46,12 +46,12 @@ ol {
   list-style: none;
 }
 $lg-red: (
-  50: #faf3f6,
+  50: #fff9fc,
   100: #f8bbd0,
   200: #f48fb1,
-  300: #f06292,
+  /*300: #f06292,*/ 300: #ef4c73,
-  400: #ef4c73,
+  400: #ec407a,
-  /* 400: #ec407a,*/ 500: #ed097e,
+  500: #ed097e,
   600: #d81b60,
   700: #c2185b,
   800: #ad1457,
@@ -84,7 +84,7 @@ $lg-red: (
   )
 );
 
-$daesang: (
+$aquaBlue-daesang: (
   50: #f9feff,
   //#e0f7fa,
     100: #b2ebf2,
@@ -173,6 +173,10 @@ $daesang-grey: (
   $gradient-light: mat-color($accent, G100);
 
   //basic
+  .bg-primary-darkest {
+    background: mat-color($primary, 900);
+    color: mat-color($primary, default-contrast);
+  }
   .bg-primary-dark {
     background: mat-color($primary, 900);
     color: mat-color($primary, default-contrast);
@@ -186,7 +190,7 @@ $daesang-grey: (
     color: mat-color($primary, default-contrast);
   }
   .bg-accent-darkest {
-    background: mat-color($accent, 900);
+    background: mat-color($accent, 800);
     color: mat-color($primary, default-contrast);
   }
   .bg-accent-dark {
@@ -209,7 +213,7 @@ $daesang-grey: (
     color: mat-color($primary);
   }
   .text-accent-darkest {
-    color: mat-color($accent, 900);
+    color: mat-color($accent, 800);
   }
   .text-accent-color {
     color: mat-color($accent);
@@ -350,7 +354,7 @@ $daesang-grey: (
   }
   .profile-img {
     .responsive-chats-button:last-child {
-      background-color: $gradient-light;
+      background-color: mat-color($accent, B100);
     }
   }
 }

projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html

@@ -56,7 +56,7 @@
     </mat-form-field>
 
     <button
-      class="send-message-button bg-accent-darkest"
+      class="send-message-button bg-primary-darkest"
       mat-icon-button
       type="submit"
       aria-label="Send message"

projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.html

@@ -17,22 +17,37 @@
     <mat-tree-node
       *matTreeNodeDef="let node"
       matTreeNodePadding
-      class="mat-tree-last-node"
+      matTreeNodePaddingIndent="20"
+      class="tree-no-child"
     >
-      <li (click)="onClickNode(node)" matRipple>
+      <div class="tree-node-closer-container">
-        <div>
+        <div class="tree-node-closer-top"></div>
-          {{ node.name }}
+        <div
+          class="tree-node-closer-bottom"
+          [attr.lastNode]="isLastNode(node) ? '' : null"
+        ></div>
       </div>
+      <li (click)="onClickNode(node)" matRipple>
+        <div class="tree-node-body">{{ node.name }}</div>
       </li>
     </mat-tree-node>
     <!-- This is the tree node template for expandable nodes -->
     <mat-tree-node
       *matTreeNodeDef="let node; when: hasChild"
       matTreeNodePadding
-      class="tree-node-frame"
+      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-bottom"
+          [attr.expanded]="treeControl.isExpanded(node) ? '' : null"
+          [attr.lastNode]="isLastNode(node) ? '' : null"
+        ></div>
+      </div>
       <li (click)="onClickNode(node)" matRipple>
-        <div class="path">
+        <div class="tree-node-body">
           <span class="horizontal-line"></span>
           <button
             mat-icon-button
@@ -40,23 +55,16 @@
             matTreeNodeToggle
             [attr.aria-label]="'toggle ' + node.filename"
           >
-            <mat-icon class="mat-icon-rtl-mirror">
+            <mat-icon
-              <!-- {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}-->
+              class="tree-node-expand-btn"
+              [@romvoeAdd]="treeControl.isExpanded(node) ? 'remove' : 'add'"
+            >
               {{ treeControl.isExpanded(node) ? 'remove' : 'add' }}
             </mat-icon>
           </button>
           <span class="dept-name">{{ node.name }}</span>
         </div>
-        <ul
+        <!-- <ul class="tree-node-closer"></ul> -->
-          [class.organization-tree-node-invisible]="
-            !treeControl.isExpanded(node)
-          "
-        >
-          <div *ngIf="treeControl.isExpanded(node)" class="boxnone">
-            <div class="vertical-line"></div>
-            <ng-container matTreeNodeOutlet></ng-container>
-          </div>
-        </ul>
       </li>
     </mat-tree-node>
   </mat-tree>

projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.scss

@@ -1,40 +1,50 @@
-@charset 'utf-8';
 .organization-tree {
-  padding: 10px;
+  padding: 5px;
-  ul,
+
+  .tree-node-closer-container {
+    position: relative;
+    // border: 1px dotted grey;
+    // border-width: 0 0 1px 1px;
+
+    .tree-node-closer-top {
+      width: 15px;
+      height: 40px;
+      position: absolute;
+      border: 1px dotted grey;
+      border-width: 0 0 1px 1px;
+      top: -40px;
+      left: 20px;
+    }
+    .tree-node-closer-bottom {
+      width: 15px;
+      height: 40px;
+      position: absolute;
+      border: 1px dotted grey;
+      border-width: 0 0 1px 1px;
+      top: 0px;
+      left: 20px;
+    }
+
+    .tree-node-closer-bottom[expanded] {
+      border-width: 0 0 1px 0px;
+    }
+    .tree-node-closer-bottom[lastNode] {
+      border-width: 0 0 1px 0px;
+    }
+  }
+
   li {
     margin-top: 0;
     margin-bottom: 0;
     list-style-type: none;
   }
-  .organization-tree-node-invisible {
-    display: none;
-  }
-}
 
-/*.tree-node-frame {
+  // li:last-child {
-  li {
+  //   border-left: 1px solid white;
-    .path {
+  //   margin-left: -41px;
-      .horizontal-line {
+  // }
-        display: none;
+
-      }
+  .tree-has-child {
-    }
-  }
-  .mat-tree-node {
-    min-height: 30px;
-    font-size: 13px;
-    padding-left: 20px;
-    margin-top: 4px;
-    &:hover {
-      background-color: #f4f4f4;
-      border: 1px solid #cccccc;
-      border-radius: 4px;
-      box-shadow: 0 1px 4px rgba(32, 33, 36, 0.1);
-    }
-  }
-}*/
-.organization-tree {
-  .tree-node-frame {
     height: 40px;
     min-height: 40px;
     li {
@@ -42,84 +52,29 @@
       align-items: center;
       cursor: pointer;
       width: 100%;
+
+      .tree-node-body {
+        .tree-node-expand-btn {
+          background-color: white;
         }
       }
-  .mat-tree-last-node {
+    }
+  }
+
+  .tree-no-child {
     height: 40px;
-    min-height: 30px;
+    min-height: 40px;
     font-size: 13px;
     li {
       display: flex;
       align-items: center;
       width: 100%;
       height: 100%;
-      padding-left: 10px;
       cursor: pointer;
-      &:hover {
-        background-color: #f4f4f4;
-        border: 1px solid #cccccc;
-        border-radius: 4px;
-        box-shadow: 0 1px 4px rgba(32, 33, 36, 0.1);
-      }
-    }
-  }
-}
 
-ul .tree-node-frame li .path > .horizontal-line {
+      .tree-node-body {
-  display: inline-block;
+        padding-left: 40px;
-}
+      }
-
-.boxnone {
-  position: relative;
-  .vertical-line {
-    background: rgba(189, 189, 189, 0.4);
-    bottom: 6px;
-    display: block;
-    position: absolute;
-    top: 0px;
-    width: 2px;
     }
-  .mat-tree-node:last-child {
-    padding-bottom: 10px;
-  }
-}
-
-.path {
-  padding: 6px 4px;
-  + ul {
-    li:last-chlid {
-      border-bottom: 1px solid #dddddd;
-    }
-  }
-  .horizontal-line {
-    width: 10px;
-    height: 1px;
-    background-color: #dddddd;
-    display: inline-block;
-    vertical-align: middle;
-    margin-left: -10px;
-  }
-  .mat-icon-button {
-    padding: 0;
-    min-width: 0;
-    width: 20px;
-    height: 20px;
-    flex-shrink: 0;
-    line-height: 20px;
-    .mat-icon-rtl-mirror {
-      border: 1px solid #dddddd;
-      padding: 2px;
-      font-size: 14px;
-      min-width: 14px;
-      min-height: 14px;
-      line-height: 14px;
-      width: 20px;
-      height: 20px;
-      box-shadow: 0 2px 1px rgba(48, 48, 48, 0.2);
-      border-radius: 50%;
-    }
-  }
-  .dept-name {
-    padding-left: 10px;
   }
 }

projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.ts

@@ -17,6 +17,8 @@ import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
 import { FlatTreeControl } from '@angular/cdk/tree';
 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';
 
 interface OrganizationNode {
   deptInfo: DeptInfo;
@@ -35,7 +37,19 @@ interface FlatNode {
 @Component({
   selector: 'ucap-organization-tree',
   templateUrl: './tree.component.html',
-  styleUrls: ['./tree.component.scss']
+  styleUrls: ['./tree.component.scss'],
+  animations: [
+    ucapAnimations,
+    trigger('romvoeAdd', [
+      transition('remove <=> add', [
+        style({
+          transform: `rotate(45deg)`,
+          opacity: 0
+        }),
+        animate('.2s 0s ease-out')
+      ])
+    ])
+  ]
 })
 export class TreeComponent implements OnInit, OnDestroy, AfterViewInit {
   @Output()
@@ -139,6 +153,21 @@ export class TreeComponent implements OnInit, OnDestroy, AfterViewInit {
 
   hasChild = (_: number, node: FlatNode) => node.expandable;
 
+  isLastNode(node: FlatNode): boolean {
+    const i = this.dataSource.expandedDataSubject.value.findIndex(n => {
+      return node.deptInfo.seq === n.deptInfo.seq;
+    });
+
+    if (i === this.dataSource.expandedDataSubject.value.length - 1) {
+      return true;
+    }
+
+    if (node.level !== this.dataSource.expandedDataSubject.value[i + 1].level) {
+      return true;
+    }
+    return false;
+  }
+
   onClickNode(node: OrganizationNode) {
     this.selected.emit(node.deptInfo);
   }

projects/ucap-webmessenger-ui/src/lib/animations/index.ts

@@ -47,15 +47,21 @@ export const ucapAnimations = [
 
     transition(
       'void => 50',
-      query('@*', [stagger('50ms', [animateChild()])], { optional: true })
+      query('@*', [stagger('50ms', [animateChild()])], {
+        optional: true
+      })
     ),
     transition(
       'void => 100',
-      query('@*', [stagger('100ms', [animateChild()])], { optional: true })
+      query('@*', [stagger('100ms', [animateChild()])], {
+        optional: true
+      })
     ),
     transition(
       'void => 200',
-      query('@*', [stagger('200ms', [animateChild()])], { optional: true })
+      query('@*', [stagger('200ms', [animateChild()])], {
+        optional: true
+      })
     )
   ]),
 
@@ -551,6 +557,24 @@ export const ucapAnimations = [
     )
   ]),
 
+  trigger('treeToggler', [
+    state(
+      '0, void',
+      style({
+        opacity: 0
+      })
+    ),
+    state(
+      '1, *',
+      style({
+        opacity: 1
+      })
+    ),
+    transition('1 => 0', animate('300ms ease-out')),
+    transition('0 => 1', animate('300ms ease-in')),
+    transition('void <=> *', animate('300ms ease-in'))
+  ]),
+
   /**
    * Floating ACtion Button Animation.
    */

projects/ucap-webmessenger-ui/src/lib/data-source/virtual-scroll-tree-flat.data-source.ts

@@ -14,7 +14,7 @@ import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 export class VirtualScrollTreeFlatDataSource<T, F> extends DataSource<F> {
   private flattenedDataSubject = new BehaviorSubject<F[]>([]);
 
-  private expandedDataSubject = new BehaviorSubject<F[]>([]);
+  expandedDataSubject = new BehaviorSubject<F[]>([]);
   expandedData$: Observable<F[]>;
 
   private connectSubject: Subject<F[]>;