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 2020-01-03 17:31:22 +09:00
parent 3a58a47e1f
commit 04cbdb6d71
4 changed files with 81 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -322,22 +322,44 @@
</mat-toolbar>
<mat-menu #profileMenu="matMenu" class="myset">
<div class="setting"><button mat-menu-item [matMenuTriggerFor]="presenseMenu">대화 가능</button></div>
<div class="setting">
<button mat-menu-item [matMenuTriggerFor]="presenseMenu">대화 가능</button>
</div>
<div class="setting"><button mat-menu-item>상태 메시지 설정</button></div>
<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>
<div class="setting">
<button mat-menu-item class="zoom minus-square">축소</button
><span class="set-size">100%</span
><button mat-menu-item class="zoom plus-square">확대</button>
</div>
<div class="setting">
<button mat-menu-item (click)="onClickSettings()">설정</button>
</div>
<mat-divider></mat-divider>
<div class="setting"><button mat-menu-item (click)="onClickLogout()">로그아웃</button></div>
<div class="setting">
<button mat-menu-item (click)="onClickLogout()">로그아웃</button>
</div>
</mat-menu>
<mat-menu #presenseMenu="matMenu" class="status-pc-set">
<div class="setting"><button mat-menu-item><span class="presence pcOn"> </span>온라인</button></div>
<div class="setting"><button mat-menu-item><span class="presence pcOut"> </span>부재중</button><button mat-menu-item
class="clock"></button></div>
<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>
<div class="setting"><button mat-menu-item><span class="presence pcOther"> </span>집중근무중</button><button mat-menu-item
class="edit"></button></div>
</mat-menu>
<div class="setting">
<button mat-menu-item><span class="presence pcOn"> </span>온라인</button>
</div>
<div class="setting">
<button mat-menu-item><span class="presence pcOut"> </span>부재중</button
><button mat-menu-item class="clock"></button>
</div>
<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>
<div class="setting">
<button mat-menu-item>
<span class="presence pcOther"> </span>집중근무중</button
><button mat-menu-item class="edit"></button>
</div>
</mat-menu>

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

@ -218,6 +218,31 @@
display: flex;
flex-flow: row;
align-items: center;
height: 48px;
.zoom {
height: 16px;
background-repeat: no-repeat;
&.plus-square {
margin-left: 10px;
padding-left: 26px;
background-position: left 50%;
line-height: normal;
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='1' stroke-linecap='round' stroke-linejoin='round' %3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='12' y1='8' x2='12' y2='16'%3E%3C/line%3E%3Cline x1='8' y1='12' x2='16' y2='12'%3E%3C/line%3E%3C/svg%3E");
}
&.minus-square {
margin-right: 10px;
padding-right: 26px;
background-position: right 50%;
line-height: normal;
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='1' stroke-linecap='round' stroke-linejoin='round' %3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='8' y1='12' x2='16' y2='12'%3E%3C/line%3E%3C/svg%3E");
}
&:hover {
background-repeat: no-repeat;
}
}
.set-size {
margin: 0 10px;
}
}
}
}

3
projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.html
View File

@ -25,9 +25,10 @@
<span class="mdi mdi-upload mdi-18px"></span>
</button>
<!--morning-off:오전 afternoon-off:오후 day-off:휴가 long-time:장기 leave-of-absence:휴직-->
<span
*ngIf="getWorkstatus(userInfo).length > 0"
class="work-status text-accent-darkest"
class="work-status afternoon-off"
>
{{ getWorkstatus(userInfo) }}
</span>

20
projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.scss
View File

@ -61,12 +61,28 @@
.work-status {
display: inline-flex;
height: 24px;
background-color: #ffffff;
border: 1px solid #ffffff;
padding: 4px 14px;
border-radius: 100px;
font-size: 13px;
justify-content: center;
align-items: center;
color: #ffffff;
&.morning-off {
background-color: #11845d;
}
&.afternoon-off {
background-color: #875acb;
}
&.day-off {
background-color: #2b98eb;
}
&.long-time {
background-color: #c72f20;
}
&.leave-of-absence {
background-color: #e7853e;
}
}
}
@ -218,7 +234,7 @@
display: flex;
width: 40px;
height: 40px;
line-height: 40px;
//line-height: 40px;
.mat-button-wrapper {
padding: 0;
fill: #ffffff;