This commit is contained in:
leejinho 2019-11-25 10:47:50 +09:00
commit 87646ba902
8 changed files with 85 additions and 9 deletions

View File

@ -44,7 +44,7 @@
<div *ngIf="selectedDepartmentProcessing">
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
</div>
<div class="search-list">
<div *ngIf="!isShowSearch" class="search-list">
<cdk-virtual-scroll-viewport
itemSize="80"
#cvsvDeptUser

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.2 KiB

View File

@ -24,10 +24,14 @@
<div class="tree-node-closer-top"></div>
<div
class="tree-node-closer-bottom"
[attr.lastNode]="isLastNode(node) ? '' : null"
[attr.last-node]="isLastNode(node) ? '' : null"
></div>
</div>
<li (click)="onClickNode(node)" matRipple>
<li
(click)="onClickNode(node)"
matRipple
[attr.sub-node]="isParentLastNode(node) ? '' : null"
>
<div class="tree-node-body">{{ node.name }}</div>
</li>
</mat-tree-node>
@ -43,10 +47,14 @@
<div
class="tree-node-closer-bottom"
[attr.expanded]="treeControl.isExpanded(node) ? '' : null"
[attr.lastNode]="isLastNode(node) ? '' : null"
[attr.last-node]="isLastNode(node) ? '' : null"
></div>
</div>
<li (click)="onClickNode(node)" matRipple>
<li
(click)="onClickNode(node)"
matRipple
[attr.sub-node]="isParentLastNode(node) ? '' : null"
>
<div class="tree-node-body">
<span class="horizontal-line"></span>
<button

View File

@ -28,7 +28,7 @@
.tree-node-closer-bottom[expanded] {
border-width: 0 0 1px 0px;
}
.tree-node-closer-bottom[lastNode] {
.tree-node-closer-bottom[last-node] {
border-width: 0 0 1px 0px;
}
}
@ -39,6 +39,11 @@
list-style-type: none;
}
// li[sub-node] {
// border: 1px dotted grey;
// border-width: 0 0 0 1px;
// }
// li:last-child {
// border-left: 1px solid white;
// margin-left: -41px;

View File

@ -154,9 +154,7 @@ export class TreeComponent implements OnInit, OnDestroy, AfterViewInit {
hasChild = (_: number, node: FlatNode) => node.expandable;
isLastNode(node: FlatNode): boolean {
const i = this.dataSource.expandedDataSubject.value.findIndex(n => {
return node.deptInfo.seq === n.deptInfo.seq;
});
const i = this.findNodeIndex(node);
if (i === this.dataSource.expandedDataSubject.value.length - 1) {
return true;
@ -168,7 +166,38 @@ export class TreeComponent implements OnInit, OnDestroy, AfterViewInit {
return false;
}
isParentLastNode(node: FlatNode): boolean {
const pi = this.findParentNodeIndex(node);
if (-1 === pi) {
return false;
}
return this.isLastNode(this.dataSource.expandedDataSubject.value[pi]);
}
onClickNode(node: OrganizationNode) {
this.selected.emit(node.deptInfo);
}
private findNodeIndex(node: FlatNode): number {
return this.dataSource.expandedDataSubject.value.findIndex(n => {
return node.deptInfo.seq === n.deptInfo.seq;
});
}
private findParentNodeIndex(node: FlatNode): number {
const i = this.findNodeIndex(node);
if (-1 === i) {
return -1;
}
for (let idx = i - 1; idx >= 0; idx--) {
if (
this.dataSource.expandedDataSubject.value[idx].level ===
node.level - 1
) {
return idx;
}
}
return -1;
}
}

View File

@ -1,6 +1,12 @@
<div>
<mat-list>
<h1 mat-subheader>테마</h1>
<ul class="theme-list">
<li class="theme-box default on"></li>
<li class="theme-box lgRed"></li>
</ul>
<mat-list-item>
<span>기본값</span>
<span>어둡게</span>

View File

@ -0,0 +1,28 @@
.theme-list {
position: relative;
display: flex;
flex-flow: row;
margin: 10px;
height: 120px;
.theme-box{
width: 140px;
height:98px;
margin-right:10px;
border: 1px solid #dddddd;
background-size:100% auto;
background-repeat: no-repeat;
opacity: 0.7;
&.default{
background-image: url("../../../../ucap-webmessenger-app/src/assets/images/theme/theme-default.png");
}
&.lgRed{
background-image: url("../../../../ucap-webmessenger-app/src/assets/images/theme/theme-lgRed.png");
}
&.on{
border:1px solid #333333;
opacity: 1;
}
}
}