그룹 수정

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

@@ -40,6 +40,7 @@
         (click)="onSelectBuddy(userInfo)"
         (openProfile)="onClickOpenProfile($event)"
         (contextmenu)="onContextMenuProfile($event, userInfo)"
+        class="list-item-frame"
       >
       </ucap-profile-user-list-item>
     </ucap-group-expansion-panel>

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

@@ -8,7 +8,7 @@
   background: #f15f79;
   background: -webkit-linear-gradient(to right, #352a37, #f15f79);
   background: linear-gradient(to right, #352a37, #ef4c73);
-  color:#ffffff;
+  color: #ffffff;
   h3 {
     display: inline-flex;
     padding-left: 10px;
@@ -19,11 +19,19 @@
     margin-left: auto;
     display: inline-flex;
     align-items: center;
-    svg{
+    svg {
-      stroke:#333333;
+      stroke: #333333;
     }
   }
 }
+::ng-deep .ps {
+  .ps-content {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+}
+
 .search-result {
   height: calc(100% - 130px);
   overflow: auto;
@@ -32,15 +40,27 @@
     display: flex;
     height: 40px;
   }
+  .ps {
+    .ps-content {
+      position: relative;
+      width: 100%;
+      height: 100%;
+    }
+  }
 }
 ::ng-deep .mat-tab-body-content {
   height: 100%;
   overflow: unset;
 }
-.mat-menu-item{
+.mat-menu-item {
-  display:flex;
+  display: flex;
   align-items: center;
-  svg{
+  svg {
-    margin-right:10px;
+    margin-right: 10px;
   }
+}
+
+.list-item-frame{
+  width:100%;
+  height:100%;
 }

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

@@ -34,7 +34,14 @@
         >
           <mat-tab>
             <ng-template mat-tab-label>
-              <mat-icon>group</mat-icon>
+              <!--<mat-icon>group</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">
+                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+                <circle cx="9" cy="7" r="4"></circle>
+                <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
+                <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
+              </svg>
             </ng-template>
             <div>
               <div>

projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html

@@ -9,7 +9,7 @@
     class="group-tree"
   >
     <!-- This is the tree node template for leaf nodes -->
-    <mat-tree-node *matTreeNodeDef="let node" style="height: 80px;">
+    <mat-tree-node *matTreeNodeDef="let node">
       <li>
         <div class="mat-tree-node">
           <ng-container
@@ -17,27 +17,25 @@
             [ngTemplateOutletContext]="{ $implicit: node?.userInfo }"
           >
           </ng-container>
-          {{ node?.userInfo?.name }}
+          <!--{{ node?.userInfo?.name }}-->
         </div>
       </li>
     </mat-tree-node>
     <!-- This is the tree node template for expandable nodes -->
     <mat-tree-node
-      style="height: 80px;"
       *matTreeNodeDef="let node; when: hasChild"
       class="tree-node-frame"
     >
       <li>
-        <div class="mat-tree-node" class="path">
+        <div  class="path">
-          <span class="horizontal-line"></span>
           <button
             mat-icon-button
-            color="accent"
             matTreeNodeToggle
             [attr.aria-label]="'toggle '"
+            class="btn-toggle"
           >
             <mat-icon class="mat-icon-rtl-mirror">
-              {{ treeControl.isExpanded(node) ? 'remove' : 'add' }}
+              {{ treeControl.isExpanded(node) ? 'expand_less' : 'expand_more' }}
             </mat-icon>
           </button>
           <ng-container [ngSwitch]="node.nodeType">
@@ -45,6 +43,9 @@
             <span *ngSwitchCase="NodeType.Favorit">Favorit</span>
             <span *ngSwitchCase="NodeType.Buddy">Buddy</span>
           </ng-container>
+          <button mat-icon-button aria-label="group menu" *ngIf="!checkable" (click)="onClickMore($event, groupBuddy.group)" class="group-menu">
+            <mat-icon>more_vert</mat-icon>
+          </button>
         </div>
         <ul [class.group-tree-node-invisible]="!treeControl.isExpanded(node)">
           <div *ngIf="treeControl.isExpanded(node)" class="boxnone">

projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.scss

@@ -1,6 +1,5 @@
 @charset 'utf-8';
 .group-tree {
-  padding: 10px;
   ul,
   li {
     margin-top: 0;
@@ -14,18 +13,10 @@
 }
 
 .tree-node-frame {
-  li {
+  border-bottom:1px solid #dddddd;
-    .path {
+  height:40px;
-      .horizontal-line {
-        display: none;
-      }
-    }
-  }
   .mat-tree-node {
-    min-height: 30px;
+    width:100%;
-    font-size: 13px;
-    padding-left: 20px;
-    margin-top: 4px;
     &:hover {
       background-color: #f4f4f4;
       border: 1px solid #cccccc;
@@ -34,28 +25,38 @@
     }
   }
 }
-
+.mat-tree-node {
-ul .tree-node-frame li .path > .horizontal-line {
+  &[aria-level="1"]{
-  display: inline-block;
+    position: relative;
-}
+    widows: 100px;
-
+    height:100%;
-.boxnone {
+    li{
-  position: relative;
+      margin-left:0;
-  .vertical-line {
+      width:100%;
-    background: rgba(189, 189, 189, 0.4);
+      height:100%;
-    bottom: 6px;
+      .mat-tree-node{
-    display: block;
+        width:100%;
-    position: absolute;
+        height:100%;
-    top: 0px;
+      }
-    width: 2px;
+    }
-  }
-  .mat-tree-node:last-child {
-    padding-bottom: 10px;
   }
 }
 
+
 .path {
   padding: 6px 4px;
+  .btn-toggle{
+    padding: 0;
+    min-width: 0;
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+    line-height: 20px;
+    margin-right:10px;
+  }
+  .group-menu{
+    margin-left:auto;
+  }
   + ul {
     li:last-chlid {
       border-bottom: 1px solid #dddddd;
@@ -69,26 +70,7 @@ ul .tree-node-frame li .path > .horizontal-line {
     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;
   }