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

profile menu is modified

Browse Source
This commit is contained in:
khk 2020-01-03 16:32:25 +09:00
parent 4bb3a7dece
commit 3a58a47e1f
2 changed files with 61 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
View File

@ -321,18 +321,23 @@
</div> </div>
</mat-toolbar> </mat-toolbar>
<mat-menu #profileMenu="matMenu"> <mat-menu #profileMenu="matMenu" class="myset">
<button mat-menu-item [matMenuTriggerFor]="presenseMenu">대화 가능</button> <div class="setting"><button mat-menu-item [matMenuTriggerFor]="presenseMenu">대화 가능</button></div>
<button mat-menu-item>상태 메시지 설정</button> <div class="setting"><button mat-menu-item>상태 메시지 설정</button></div>
<button mat-menu-item (click)="onClickSettings()">설정</button> <div class="setting"><button mat-menu-item>축소</button><span>100%</span><button mat-menu-item>확대</button></div>
<div class="setting"><button mat-menu-item (click)="onClickSettings()">설정</button></div>
<mat-divider></mat-divider> <mat-divider></mat-divider>
<button mat-menu-item (click)="onClickLogout()">로그아웃</button> <div class="setting"><button mat-menu-item (click)="onClickLogout()">로그아웃</button></div>
</mat-menu> </mat-menu>
<mat-menu #presenseMenu="matMenu"> <mat-menu #presenseMenu="matMenu" class="status-pc-set">
<button mat-menu-item>온라인</button> <div class="setting"><button mat-menu-item><span class="presence pcOn"> </span>온라인</button></div>
<button mat-menu-item>부재중</button> <div class="setting"><button mat-menu-item><span class="presence pcOut"> </span>부재중</button><button mat-menu-item
<button mat-menu-item>다른용무중</button> class="clock"></button></div>
<button mat-menu-item>회의중</button> <div class="setting"><button mat-menu-item><span class="presence pcOther"> </span>다른용무중</button><button mat-menu-item
<button mat-menu-item>집중근무중</button> class="edit"></button></div>
</mat-menu> <div class="setting"><button mat-menu-item><span class="presence pcOther"> </span>회의중</button><button mat-menu-item
class="edit"></button></div>
<div class="setting"><button mat-menu-item><span class="presence pcOther"> </span>집중근무중</button><button mat-menu-item
class="edit"></button></div>
</mat-menu>

45
projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss
View File

@ -85,6 +85,7 @@
background-position: 50% 50%; background-position: 50% 50%;
text-indent: -1000000px; text-indent: -1000000px;
justify-content: center; justify-content: center;
color: #2d3a4a;
&.dsp { &.dsp {
text-indent: 0; text-indent: 0;
} }
@ -209,4 +210,46 @@
} }
} }
@include weblink(#425888); @include weblink(#2d3a4a);
::ng-deep .myset {
.mat-menu-content {
.setting {
display: flex;
flex-flow: row;
align-items: center;
}
}
}
::ng-deep .status-pc-set {
.mat-menu-content {
.setting {
display: flex;
flex-flow: row;
align-items: center;
button {
.presence {
margin-right: 10px;
cursor: pointer;
}
&:nth-child(2) {
margin-right: 20px;
margin-left: auto;
background-color: transparent;
background-repeat: no-repeat;
background-position: 50%;
border: none;
width: 24px;
height: 24px;
&.clock {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-clock'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
}
&.edit {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-edit-2'%3E%3Cpath d='M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z'%3E%3C/path%3E%3C/svg%3E");
}
}
}
}
}
}