tree 디자인 변경

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

@@ -11,11 +11,13 @@
       </div>
     </li>
   </mat-nested-tree-node>
-  <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChildren">
+  <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChildren" class="tree-node-frame">
     <li>
       <div class="mat-tree-node" (click)="onClickNode(node)" class="path">
+        <span class="horizontal-line"></span>
         <button
           mat-icon-button
+          color="accent"
           matTreeNodeToggle
           [attr.aria-label]="'toggle ' + node.filename"
         >
@@ -24,12 +26,13 @@
               {{ treeControl.isExpanded(node) ? 'remove' : 'add' }}
           </mat-icon>
         </button>
-        {{ node.title }}
+        <span class="dept-name">{{ node.title }}</span>
       </div>
       <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>

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

@@ -6,56 +6,90 @@
     margin-top: 0;
     margin-bottom: 0;
     list-style-type: none;
-    padding-left: 6px;
+    margin-left: 10px;
   }
-
   .organization-tree-node-invisible {
     display: none;
   }
 }
-.mat-tree-node {
-  min-height: 30px;
-  font-size: 13px;
-  padding-left:20px;
-  margin-top:4px;
+
+.tree-node-frame{
+  li{
+    .path{
+      .horizontal-line{
+        display:none;
+      }
+    }
+  }
+  .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);
+    }
   }
 }
 
+ul .tree-node-frame li .path > .horizontal-line{
+      display:inline-block;
+}
+
+.boxnone{
+  position:relative;
+  .vertical-line{
+    background: rgba(189,189,189,.4);
+    bottom: 6px;
+    display: block;
+    position: absolute;
+    top: 0px;
+    width: 2px;
+  }
+  .mat-nested-tree-node:last-child{
+    padding-bottom:10px;
+  }
+}
 
 .path {
-  //border: 1px solid #dddddd;
-  padding: 4px;
-  margin-top: 10px;
-  //box-shadow: 0 1px 4px rgba(32, 33, 36, 0.1);
+  padding: 6px 4px;
   + ul{
     li:last-chlid{
       border-bottom:1px solid #dddddd;
     }
   }
-}
-.mat-icon-button{
-  padding: 0;
-  min-width: 0;
-  width: 20px;
-  height: 20px;
-  flex-shrink: 0;
-  line-height: 20px;
-  margin-right:10px;
-  .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%;
+  .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;
   }
 }