스크롤 조정

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html

@@ -119,7 +119,7 @@
   </mat-tab-group>
 
   <div class="left-side-tabs-body">
-    <div #tabs id="tabs-0" style="display: block;">
+    <div #tabs id="tabs-0">
       <app-layout-chat-left-sidenav-group
         class="left-group-side"
         (newGroupAndMember)="onClickNewGroupAndMember()"

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss

@@ -5,16 +5,22 @@
 
 ::ng-deep .mat-tab-body-wrapper,
 ::ng-deep .mat-tab-body {
-  height: 0%;
+  height: 100%;
-  width: 0%;
+  width: 100%;
 }
 ::ng-deep .mat-tab-header {
   border-bottom: none !important;
 }
 
 .left-side-tabs-body {
+  position: relative;
+  height: 100%;
+  width: calc(100% - 70px);
+  div[id^=tabs] {
     height:100%;
     width:100%;
+    position: relative;
+  }
 }
 
 .container {
@@ -41,6 +47,7 @@
         height: 280px;
         padding-top: 10px;
         .mat-tab-label {
+          width:100%;
           height: 80px;
           padding: 0 16px;
         }

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html

@@ -17,6 +17,7 @@
         [oraganizationList]="departmentInfoList$ | async"
         [loginRes]="loginRes"
         (selected)="onSelectedOrganization($event)"
+        class="tab-tree-frame"
       ></ucap-organization-tree>
     </perfect-scrollbar>
   </div>

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.scss

@@ -154,3 +154,13 @@
     }
   }
 }
+::ng-deep .oraganization-tab{
+ .oraganization-tab-tree,
+ .select-list{
+  .ps{
+    .ps-content{
+      height:100%;
+    }
+  }
+}
+}

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.scss

@@ -15,6 +15,10 @@
       height:100% !important;
       border-right: 1px solid #dddddd;
       overflow: auto;
+      .tab-tree-frame{
+        width:100%;
+        height:100%;
+      }
     }
     .select-list {
       display: inline-flex;
@@ -66,6 +70,7 @@
 }
 ::ng-deep .mat-dialog-container .mat-tab-body-wrapper {
   height: 380px;
+  width:100%;
 }
 .list-panel{
   overflow: auto;

projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html

@@ -12,6 +12,7 @@
       [size]="leftSideComponentWidth"
       minSize="300"
       maxSize="500"
+      class="split-area"
     >
       <div class="left-side">
         <app-layout-messenger-left-side
@@ -41,6 +42,7 @@
           mode="side"
           position="end"
           (openedChange)="onOpenedChange($event)"
+          class="rightDrawer"
         >
           <app-layout-messenger-right-drawer
             [selectedRightDrawer]="selectedRightDrawer$ | async"

projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss

@@ -6,24 +6,37 @@
   border: 3px solid #4f4f4f;
   border-top: none;
 
+  .split-area{
+    overflow: hidden;
     .left-side {
     width: 100%;
     height: 100%;
     flex: 0 0 auto;
     position: relative;
     }
+  }
+
   .contents {
     flex: 1 1 auto;
     min-width: 400px;
     height: 100%;
-
     .messages {
       width: 100%;
       height: 100%;
     }
+    .rightDrawer{
+      width:420px;
+      height: 100%;
+      flex: 0 0 auto;
+      overflow: hidden;
+    }
   }
   .right-side {
     height: 100%;
     flex: 0 0 auto;
   }
 }
+
+::ng-deep .mat-drawer-inner-container{
+  overflow: unset !important;
+}

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

@@ -46,7 +46,7 @@ ol {
   list-style: none;
 }
 $lg-red: (
-  50: #ffffff,
+  50: #faf3f6,
   100: #f8bbd0,
   200: #f48fb1,
   300: #f06292,
@@ -78,6 +78,39 @@ $lg-red: (
   )
 );
 
+$daesang: (
+  50: #e0f7fa,
+  100: #b2ebf2,
+  200: #80deea,
+  300: #4dd0e1,
+  400: #26c6da,
+  500: #00bcd4,
+  /*600: #00acc1,*/ 600: #00b6d5,
+  700: #0097a7,
+  800: #00838f,
+  900: #006064,
+  A100: #84ffff,
+  A200: #18ffff,
+  A400: #00e5ff,
+  A700: #00b8d4,
+  contrast: (
+    50: $dark-primary-text,
+    100: $dark-primary-text,
+    200: $dark-primary-text,
+    300: $dark-primary-text,
+    400: $dark-primary-text,
+    500: $light-primary-text,
+    600: $light-primary-text,
+    700: $light-primary-text,
+    800: $light-primary-text,
+    900: $light-primary-text,
+    A100: $dark-primary-text,
+    A200: $dark-primary-text,
+    A400: $dark-primary-text,
+    A700: $dark-primary-text,
+  )
+);
+
 @mixin ucap-material-theme($theme) {
   @include ucap-core-theme($theme);
 }
@@ -101,10 +134,18 @@ $lg-red: (
     background: mat-color($primary);
     color: mat-color($primary, default-contrast);
   }
+  .bg-accent-darkest {
+    background: mat-color($accent, 900);
+    color: mat-color($primary, default-contrast);
+  }
   .bg-accent-dark {
     background: mat-color($accent, 600);
     color: mat-color($primary, default-contrast);
   }
+  .bg-accent-brightest {
+    background: mat-color($accent, 50);
+    color: mat-color($primary, $dark-primary-text);
+  }
   .bg-accent-light {
     background: mat-color($accent, 300) !important;
     color: mat-color($primary, default-contrast);

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/image.component.scss

@@ -1,3 +1,7 @@
 .bubble-main{
   padding:10px;
+  img{
+    height:140px;
+    width:auto;
+  }
 }

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

@@ -1,4 +1,4 @@
-<cdk-virtual-scroll-viewport #cvsvOrganization itemSize="48" fxFlexFill>
+<cdk-virtual-scroll-viewport #cvsvOrganization itemSize="40" fxFlexFill>
   <ng-container
     *cdkVirtualFor="let node of dataSource.expandedData$"
   ></ng-container>
@@ -9,9 +9,9 @@
     class="organization-tree"
   >
     <!-- This is the tree node template for leaf nodes -->
-    <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
+    <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding  class="mat-tree-last-node">
       <li>
-        <div class="mat-tree-node" (click)="onClickNode(node)">
+        <div (click)="onClickNode(node)">
           {{ node.name }}
         </div>
       </li>
@@ -23,7 +23,7 @@
       class="tree-node-frame"
     >
       <li>
-        <div class="mat-tree-node" (click)="onClickNode(node)" class="path">
+        <div  (click)="onClickNode(node)" class="path">
           <span class="horizontal-line"></span>
           <button
             mat-icon-button

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

@@ -6,14 +6,13 @@
     margin-top: 0;
     margin-bottom: 0;
     list-style-type: none;
-    margin-left: 10px;
   }
   .organization-tree-node-invisible {
     display: none;
   }
 }
 
-.tree-node-frame {
+/*.tree-node-frame {
   li {
     .path {
       .horizontal-line {
@@ -33,6 +32,37 @@
       box-shadow: 0 1px 4px rgba(32, 33, 36, 0.1);
     }
   }
+}*/
+.organization-tree{
+  .tree-node-frame {
+    height:40px;
+    min-height:40px;
+    li{
+      display:flex;
+      align-items: center;
+      cursor:pointer;
+      width:100%;
+    }
+  }
+  .mat-tree-last-node{
+    height:30px;
+    min-height:30px;
+    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 {

projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss

@@ -107,7 +107,7 @@ $thumbnail-msize: 40px;
     display: flex;
     margin: 0;
     padding: 0;
-    width: calc(100% - 60px);
+
     .detail {
       flex-direction: column;
       width: calc(100% - 80px);