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

그룹 수정

Browse Source
This commit is contained in:
khk 2019-11-18 15:02:47 +09:00
parent ae413a3843
commit 11013f1f32
5 changed files with 75 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html
View File

@ -40,6 +40,7 @@
(click)="onSelectBuddy(userInfo)"
(openProfile)="onClickOpenProfile($event)"
(contextmenu)="onContextMenuProfile($event, userInfo)"
class="list-item-frame"
>
</ucap-profile-user-list-item>
</ucap-group-expansion-panel>

34
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.scss
View File

@ -8,7 +8,7 @@
background: #f15f79;
background: -webkit-linear-gradient(to right, #352a37, #f15f79);
background: linear-gradient(to right, #352a37, #ef4c73);
color:#ffffff;
color: #ffffff;
h3 {
display: inline-flex;
padding-left: 10px;
@ -19,11 +19,19 @@
margin-left: auto;
display: inline-flex;
align-items: center;
svg{
stroke:#333333;
svg {
stroke: #333333;
}
}
}
::ng-deep .ps {
.ps-content {
position: relative;
width: 100%;
height: 100%;
}
}
.search-result {
height: calc(100% - 130px);
overflow: auto;
@ -32,15 +40,27 @@
display: flex;
height: 40px;
}
.ps {
.ps-content {
position: relative;
width: 100%;
height: 100%;
}
}
}
::ng-deep .mat-tab-body-content {
height: 100%;
overflow: unset;
}
.mat-menu-item{
display:flex;
.mat-menu-item {
display: flex;
align-items: center;
svg{
margin-right:10px;
svg {
margin-right: 10px;
}
}
.list-item-frame{
width:100%;
height:100%;
}

9
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html
View File

@ -34,7 +34,14 @@
>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon>group</mat-icon>
<!--<mat-icon>group</mat-icon>-->
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
</ng-template>
<div>
<div>

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

@ -9,7 +9,7 @@
class="group-tree"
>
<!-- This is the tree node template for leaf nodes -->
<mat-tree-node *matTreeNodeDef="let node" style="height: 80px;">
<mat-tree-node *matTreeNodeDef="let node">
<li>
<div class="mat-tree-node">
<ng-container
@ -17,27 +17,25 @@
[ngTemplateOutletContext]="{ $implicit: node?.userInfo }"
>
</ng-container>
{{ node?.userInfo?.name }}
<!--{{ node?.userInfo?.name }}-->
</div>
</li>
</mat-tree-node>
<!-- This is the tree node template for expandable nodes -->
<mat-tree-node
style="height: 80px;"
*matTreeNodeDef="let node; when: hasChild"
class="tree-node-frame"
>
<li>
<div class="mat-tree-node" class="path">
<span class="horizontal-line"></span>
<div class="path">
<button
mat-icon-button
color="accent"
matTreeNodeToggle
[attr.aria-label]="'toggle '"
class="btn-toggle"
>
<mat-icon class="mat-icon-rtl-mirror">
{{ treeControl.isExpanded(node) ? 'remove' : 'add' }}
{{ treeControl.isExpanded(node) ? 'expand_less' : 'expand_more' }}
</mat-icon>
</button>
<ng-container [ngSwitch]="node.nodeType">
@ -45,6 +43,9 @@
<span *ngSwitchCase="NodeType.Favorit">Favorit</span>
<span *ngSwitchCase="NodeType.Buddy">Buddy</span>
</ng-container>
<button mat-icon-button aria-label="group menu" *ngIf="!checkable" (click)="onClickMore($event, groupBuddy.group)" class="group-menu">
<mat-icon>more_vert</mat-icon>
</button>
</div>
<ul [class.group-tree-node-invisible]="!treeControl.isExpanded(node)">
<div *ngIf="treeControl.isExpanded(node)" class="boxnone">

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

@ -1,6 +1,5 @@
@charset 'utf-8';
.group-tree {
padding: 10px;
ul,
li {
margin-top: 0;
@ -14,18 +13,10 @@
}
.tree-node-frame {
li {
.path {
.horizontal-line {
display: none;
}
}
}
border-bottom:1px solid #dddddd;
height:40px;
.mat-tree-node {
min-height: 30px;
font-size: 13px;
padding-left: 20px;
margin-top: 4px;
width:100%;
&:hover {
background-color: #f4f4f4;
border: 1px solid #cccccc;
@ -34,28 +25,38 @@
}
}
}
ul .tree-node-frame li .path > .horizontal-line {
display: inline-block;
}
.boxnone {
position: relative;
.vertical-line {
background: rgba(189, 189, 189, 0.4);
bottom: 6px;
display: block;
position: absolute;
top: 0px;
width: 2px;
}
.mat-tree-node:last-child {
padding-bottom: 10px;
.mat-tree-node {
&[aria-level="1"]{
position: relative;
widows: 100px;
height:100%;
li{
margin-left:0;
width:100%;
height:100%;
.mat-tree-node{
width:100%;
height:100%;
}
}
}
}
.path {
padding: 6px 4px;
.btn-toggle{
padding: 0;
min-width: 0;
width: 20px;
height: 20px;
flex-shrink: 0;
line-height: 20px;
margin-right:10px;
}
.group-menu{
margin-left:auto;
}
+ ul {
li:last-chlid {
border-bottom: 1px solid #dddddd;
@ -69,26 +70,7 @@ ul .tree-node-frame li .path > .horizontal-line {
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;
}