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

group tree is modified

Browse Source
This commit is contained in:
병준 박 2019-11-18 15:46:18 +09:00
parent cce626829d
commit 0d2a4a7db6
3 changed files with 58 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,7 +9,7 @@
class="group-tree" class="group-tree"
> >
<!-- This is the tree node template for leaf nodes --> <!-- This is the tree node template for leaf nodes -->
<mat-tree-node *matTreeNodeDef="let node"> <mat-tree-node *matTreeNodeDef="let node" style="height: 80px;">
<li> <li>
<div class="mat-tree-node"> <div class="mat-tree-node">
<ng-container <ng-container
@ -25,9 +25,10 @@
<mat-tree-node <mat-tree-node
*matTreeNodeDef="let node; when: hasChild" *matTreeNodeDef="let node; when: hasChild"
class="tree-node-frame" class="tree-node-frame"
style="height: 80px;"
> >
<li> <li class="tree-node-header">
<div class="path"> <div class="path">
<button <button
mat-icon-button mat-icon-button
matTreeNodeToggle matTreeNodeToggle
@ -39,11 +40,30 @@
</mat-icon> </mat-icon>
</button> </button>
<ng-container [ngSwitch]="node.nodeType"> <ng-container [ngSwitch]="node.nodeType">
<span *ngSwitchCase="NodeType.Profile">Profile</span> <span *ngSwitchCase="NodeType.Profile">내 프로필</span>
<span *ngSwitchCase="NodeType.Favorit">Favorit</span> <span *ngSwitchCase="NodeType.Favorit"
<span *ngSwitchCase="NodeType.Buddy">Buddy</span> >즐겨찾기
<span class="text-accent-color number"
>({{ node.countOfChildren }}명)</span
></span
>
<span *ngSwitchCase="NodeType.Buddy">
<span class="title-name ellipsis">{{
node.groupDetail.name
}}</span>
<span class="text-accent-color number"
>({{ node.countOfChildren }}명)</span
>
</span>
</ng-container> </ng-container>
<button mat-icon-button aria-label="group menu" *ngIf="!checkable" (click)="onClickMore($event, groupBuddy.group)" class="group-menu">
<button
mat-icon-button
aria-label="group menu"
*ngIf="!checkable"
(click)="onClickMore($event, node.groupDetail)"
class="group-menu"
>
<mat-icon>more_vert</mat-icon> <mat-icon>more_vert</mat-icon>
</button> </button>
</div> </div>

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

@ -13,10 +13,19 @@
} }
.tree-node-frame { .tree-node-frame {
border-bottom:1px solid #dddddd; border-bottom: 1px solid #dddddd;
height:40px; height: 40px;
.tree-node-header {
width: 100%;
.title-name {
display: inline-flex;
flex: 1 1 auto;
}
}
.mat-tree-node { .mat-tree-node {
width:100%; width: 100%;
&:hover { &:hover {
background-color: #f4f4f4; background-color: #f4f4f4;
border: 1px solid #cccccc; border: 1px solid #cccccc;
@ -26,36 +35,35 @@
} }
} }
.mat-tree-node { .mat-tree-node {
&[aria-level="1"]{ &[aria-level='1'] {
position: relative; position: relative;
widows: 100px; widows: 100px;
height:100%; height: 100%;
li{ li {
margin-left:0; margin-left: 0;
width:100%; width: 100%;
height:100%; height: 100%;
.mat-tree-node{ .mat-tree-node {
width:100%; width: 100%;
height:100%; height: 100%;
} }
} }
} }
} }
.path { .path {
padding: 6px 4px; padding: 6px 4px;
.btn-toggle{ .btn-toggle {
padding: 0; padding: 0;
min-width: 0; min-width: 0;
width: 20px; width: 20px;
height: 20px; height: 20px;
flex-shrink: 0; flex-shrink: 0;
line-height: 20px; line-height: 20px;
margin-right:10px; margin-right: 10px;
} }
.group-menu{ .group-menu {
margin-left:auto; margin-left: auto;
} }
+ ul { + ul {
li:last-chlid { li:last-chlid {

7
projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.ts
View File

@ -44,6 +44,7 @@ interface FlatNode {
expandable: boolean; expandable: boolean;
level: number; level: number;
nodeType: NodeType; nodeType: NodeType;
countOfChildren?: number;
userInfo?: UserInfo; userInfo?: UserInfo;
groupDetail?: GroupDetailData; groupDetail?: GroupDetailData;
} }
@ -77,7 +78,7 @@ export class ExpansionPanelComponent implements OnInit, AfterViewInit {
@Input() @Input()
set favoritBuddyList(userInfoList: UserInfo[]) { set favoritBuddyList(userInfoList: UserInfo[]) {
if (!userInfoList) { if (!userInfoList || 0 === userInfoList.length) {
return; return;
} }
const groupNode: GroupNode = { const groupNode: GroupNode = {
@ -181,6 +182,10 @@ export class ExpansionPanelComponent implements OnInit, AfterViewInit {
expandable: !!node.children && node.children.length > 0, expandable: !!node.children && node.children.length > 0,
level, level,
nodeType: node.nodeType, nodeType: node.nodeType,
countOfChildren:
!!node.children && node.children.length > 0
? node.children.length
: undefined,
userInfo: node.userInfo, userInfo: node.userInfo,
groupDetail: node.groupDetail groupDetail: node.groupDetail
}; };