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,13 +6,21 @@
     margin-top: 0;
     margin-bottom: 0;
     list-style-type: none;
-    padding-left: 6px;
+    margin-left: 10px;
   }
-
   .organization-tree-node-invisible {
     display: none;
   }
 }
+
+.tree-node-frame{
+  li{
+    .path{
+      .horizontal-line{
+        display:none;
+      }
+    }
+  }
   .mat-tree-node {
     min-height: 30px;
     font-size: 13px;
@@ -25,18 +33,41 @@
     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;
     }
   }
+  .horizontal-line{
+    width:10px;
+    height:1px;
+    background-color: #dddddd;
+    display:inline-block;
+    vertical-align: middle;
+    margin-left:-10px;
   }
   .mat-icon-button{
     padding: 0;
@@ -45,7 +76,6 @@
     height: 20px;
     flex-shrink: 0;
     line-height: 20px;
-  margin-right:10px;
     .mat-icon-rtl-mirror{
       border: 1px solid #dddddd;
       padding: 2px;
@@ -59,3 +89,7 @@
       border-radius: 50%;
     }
   }
+  .dept-name{
+    padding-left:10px;
+  }
+}