ucap/next-ucap-messenger
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

tree 디자인 변경

Browse Source
This commit is contained in:
khk 2019-11-13 14:48:27 +09:00
parent 1d282b59cb
commit c7dca90e10
2 changed files with 70 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,11 +11,13 @@
</div> </div>
</li> </li>
</mat-nested-tree-node> </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> <li>
<div class="mat-tree-node" (click)="onClickNode(node)" class="path"> <div class="mat-tree-node" (click)="onClickNode(node)" class="path">
<span class="horizontal-line"></span>
<button <button
mat-icon-button mat-icon-button
color="accent"
matTreeNodeToggle matTreeNodeToggle
[attr.aria-label]="'toggle ' + node.filename" [attr.aria-label]="'toggle ' + node.filename"
> >
@ -24,12 +26,13 @@
{{ treeControl.isExpanded(node) ? 'remove' : 'add' }} {{ treeControl.isExpanded(node) ? 'remove' : 'add' }}
</mat-icon> </mat-icon>
</button> </button>
{{ node.title }} <span class="dept-name">{{ node.title }}</span>
</div> </div>
<ul <ul
[class.organization-tree-node-invisible]="!treeControl.isExpanded(node)" [class.organization-tree-node-invisible]="!treeControl.isExpanded(node)"
> >
<div *ngIf="treeControl.isExpanded(node)" class="boxnone"> <div *ngIf="treeControl.isExpanded(node)" class="boxnone">
<div class="vertical-line"></div>
<ng-container matTreeNodeOutlet></ng-container> <ng-container matTreeNodeOutlet></ng-container>
</div> </div>
</ul> </ul>

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

@ -6,56 +6,90 @@
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
list-style-type: none; list-style-type: none;
padding-left: 6px; margin-left: 10px;
} }
.organization-tree-node-invisible { .organization-tree-node-invisible {
display: none; display: none;
} }
} }
.mat-tree-node {
min-height: 30px; .tree-node-frame{
font-size: 13px; li{
padding-left:20px; .path{
margin-top:4px; .horizontal-line{
display:none;
}
}
}
.mat-tree-node {
min-height: 30px;
font-size: 13px;
padding-left:20px;
margin-top:4px;
&:hover { &:hover {
background-color: #f4f4f4; background-color: #f4f4f4;
border:1px solid #cccccc; border:1px solid #cccccc;
border-radius:4px; border-radius:4px;
box-shadow: 0 1px 4px rgba(32, 33, 36, 0.1); 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 { .path {
//border: 1px solid #dddddd; padding: 6px 4px;
padding: 4px;
margin-top: 10px;
//box-shadow: 0 1px 4px rgba(32, 33, 36, 0.1);
+ ul{ + ul{
li:last-chlid{ li:last-chlid{
border-bottom:1px solid #dddddd; border-bottom:1px solid #dddddd;
} }
} }
} .horizontal-line{
.mat-icon-button{ width:10px;
padding: 0; height:1px;
min-width: 0; background-color: #dddddd;
width: 20px; display:inline-block;
height: 20px; vertical-align: middle;
flex-shrink: 0; margin-left:-10px;
line-height: 20px; }
margin-right:10px; .mat-icon-button{
.mat-icon-rtl-mirror{ padding: 0;
border: 1px solid #dddddd; min-width: 0;
padding: 2px; width: 20px;
font-size: 14px; height: 20px;
min-width: 14px; flex-shrink: 0;
min-height: 14px; line-height: 20px;
line-height: 14px; .mat-icon-rtl-mirror{
width:20px; border: 1px solid #dddddd;
height:20px; padding: 2px;
box-shadow: 0 2px 1px rgba(48, 48, 48, 0.2); font-size: 14px;
border-radius: 50%; 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;
} }
} }