로그아웃, 환경설정 버튼 추가
This commit is contained in:
khk
parent
a0f0cd28a7
commit
a0a9d9868d
|
|
@ -109,8 +109,7 @@ $pink-light-theme-warn-palette: mat-palette($mat-red);*/
|
|||
|
||||
$pink-light-theme-primary-palette: mat-palette($daesang-grey, 900);
|
||||
$pink-light-theme-accent-palette: mat-palette($daesang);
|
||||
$pink-light-theme-warn-palette: mat-palette($mat-deep-orange);
|
||||
|
||||
$pink-light-theme-warn-palette: mat-palette($mat-orange);
|
||||
|
||||
// Create the Material theme object
|
||||
$pink-light-theme: mat-light-theme(
|
||||
|
|
|
|||
|
|
@ -4,7 +4,29 @@
|
|||
</div>
|
||||
<div class="app-layout-native-title-bar-title">UCAP M Messenger</div>
|
||||
<div class="app-layout-native-title-bar-spacer"></div>
|
||||
<div class="app-layout-native-title-bar-link">
|
||||
|
||||
<button mat-icon-button class="button app-layout-native-title-bar-setting">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round" alt="환경설정">
|
||||
<circle cx="12" cy="12" r="3"></circle>
|
||||
<path
|
||||
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z">
|
||||
</path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button mat-icon-button class="button app-layout-native-title-bar-logout">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round" alt="로그아웃" class="stroke-warn-color" >
|
||||
<path d="M10 3H6a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h4M16 17l5-5-5-5M19.8 12H9" /></svg>
|
||||
</button>
|
||||
|
||||
<span class="stroke-bar"></span>
|
||||
|
||||
</div>
|
||||
<div class="app-layout-native-title-bar-actions">
|
||||
|
||||
<button
|
||||
mat-icon-button
|
||||
class="button app-layout-native-title-bar-minimize"
|
||||
|
|
@ -12,7 +34,7 @@
|
|||
>
|
||||
<!--<mat-icon>minimize</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="2" stroke-linecap="butt" stroke-linejoin="round">
|
||||
stroke-width="2" stroke-linecap="butt" stroke-linejoin="round" alt="창 최소화">
|
||||
<line x1="5" y1="18" x2="19" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
|
|
@ -24,7 +46,7 @@
|
|||
<ng-container [ngSwitch]="windowStateChanged$ | async">
|
||||
<!--<mat-icon *ngSwitchCase="WindowState.Maximized">filter_none</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="2" stroke-linecap="butt" stroke-linejoin="round" *ngSwitchCase="WindowState.Maximized">
|
||||
stroke-width="2" stroke-linecap="butt" stroke-linejoin="round" *ngSwitchCase="WindowState.Maximized" alt="창 이전크기">
|
||||
<path class="st0"
|
||||
d="M15,9.5v7c0,0.8-0.7,1.5-1.5,1.5h-7C5.7,18,5,17.3,5,16.5v-7C5,8.7,5.7,8,6.5,8h7C14.3,8,15,8.7,15,9.5z" />
|
||||
<path class="st0" d="M8.8,6.8V6c0-0.8,0.7-1.5,1.5-1.5H17c0.8,0,1.5,0.7,1.5,1.5v6.8c0,0.8-0.7,1.5-1.5,1.5h-0.8" />
|
||||
|
|
@ -32,7 +54,7 @@
|
|||
|
||||
<!--<mat-icon *ngSwitchDefault>crop_din</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="2" stroke-linecap="butt" stroke-linejoin="round" *ngSwitchDefault>
|
||||
stroke-width="2" stroke-linecap="butt" stroke-linejoin="round" *ngSwitchDefault alt="창크기 최대">
|
||||
<rect x="5" y="5" width="12" height="12" rx="2" ry="2"></rect>
|
||||
</svg>
|
||||
|
||||
|
|
@ -45,7 +67,7 @@
|
|||
>
|
||||
<!--<mat-icon>close</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="2" stroke-linecap="butt" stroke-linejoin="round">
|
||||
stroke-width="2" stroke-linecap="butt" stroke-linejoin="round" alt="창닫기">
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
display: flex;
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
height: 30px;
|
||||
height: 50px;
|
||||
color: #ffffff;
|
||||
//background: rgba(37, 27, 30, 0.9);
|
||||
//border-bottom: 1px solid #d5dadb;
|
||||
|
|
@ -28,7 +28,49 @@
|
|||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.app-layout-native-title-bar-link {
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.stroke-bar {
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background-color: rgba(256, 256, 256, 0.3);
|
||||
margin: 0 10px 0 20px;
|
||||
display: inline-flex;
|
||||
}
|
||||
.button {
|
||||
-webkit-app-region: no-drag;
|
||||
outline: 0;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
height: 28px;
|
||||
min-width: 28px;
|
||||
max-width: 28px;
|
||||
padding: 5px;
|
||||
line-height: 10px;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
transition: background 0.2s linear, color 0.2s linear;
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
vertical-align: middle;
|
||||
margin-left: 10px;
|
||||
transform: translateY(-2px);
|
||||
|
||||
&.app-layout-native-title-bar-logout,
|
||||
&.app-layout-native-title-bar-setting {
|
||||
background-color: #efefef;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-layout-native-title-bar-actions {
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.button {
|
||||
|
|
@ -70,6 +112,7 @@
|
|||
// }
|
||||
|
||||
&:hover {
|
||||
border-radius: 4px;
|
||||
&.app-layout-native-title-bar-close {
|
||||
background: darken(#000000, 10%);
|
||||
color: darken(white, 0);
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
height: 100%;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
padding-top: 27px;
|
||||
padding-top: 47px;
|
||||
border-top: none;
|
||||
.split-area {
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -223,7 +223,12 @@ $daesang-grey: (
|
|||
.border-accent-color {
|
||||
border: 1px solid mat-color($accent);
|
||||
}
|
||||
|
||||
.border-warn-color {
|
||||
border: mat-color($warn);
|
||||
}
|
||||
.stroke-warn-color {
|
||||
stroke: mat-color($warn, 900);
|
||||
}
|
||||
// sass 정의
|
||||
.mat-toolbar {
|
||||
background-color: mat-color($accent, B100);
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user