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-22 14:48:02 +09:00
parent a0f0cd28a7
commit a0a9d9868d
5 changed files with 97 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
projects/ucap-webmessenger-app/src/app/app.theme.scss
View File

@ -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(
@ -121,7 +120,7 @@ $pink-light-theme: mat-light-theme(
// Add ".theme-pink-dark" class to the body to activate this theme.
// Class name must start with "theme-" !!!
body.theme-default {
body.theme-default {
// Generate the Angular Material theme
@include angular-material-theme($pink-light-theme);

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

@ -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>

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

@ -9,8 +9,8 @@
display: flex;
padding: 0 10px;
cursor: pointer;
height: 30px;
color:#ffffff;
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 {
@ -47,14 +89,14 @@
text-align: center;
font-size: 10px;
vertical-align: middle;
margin-left:6px;
margin-left: 6px;
transform: translateY(-2px);
.mat-icon {
//transform: translateY(-2px);
width: 16px;
height: 16px;
min-height:16px;
min-width:16px;
min-height: 16px;
min-width: 16px;
font-size: 16px;
}
@ -70,6 +112,7 @@
// }
&:hover {
border-radius: 4px;
&.app-layout-native-title-bar-close {
background: darken(#000000, 10%);
color: darken(white, 0);
@ -77,7 +120,7 @@
&.app-layout-native-title-bar-minimize {
background: darken(#000000, 10%);
color: darken(white,0);
color: darken(white, 0);
}
&.app-layout-native-title-bar-maximize {

26
projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss
View File

@ -1,16 +1,16 @@
.main-container {
height:100%;
height: 100%;
display: flex;
flex-flow: row;
padding-top: 27px;
padding-top: 47px;
border-top: none;
.split-area{
.split-area {
overflow: hidden;
.left-side {
width: 100%;
height: 100%;
flex: 0 0 auto;
position: relative;
width: 100%;
height: 100%;
flex: 0 0 auto;
position: relative;
}
}
@ -22,14 +22,14 @@
width: 100%;
height: 100%;
}
.rightDrawer{
width:400px;
.rightDrawer {
width: 400px;
height: 100%;
flex: 0 0 auto;
overflow: hidden;
-webkit-box-shadow: -1px 0px 3px 0px rgba(0,0,0,0.3);
-moz-box-shadow: -1px 0px 3px 0px rgba(0,0,0,0.3);
box-shadow: -1px 0px 3px 0px rgba(0,0,0,0.3);
-webkit-box-shadow: -1px 0px 3px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: -1px 0px 3px 0px rgba(0, 0, 0, 0.3);
box-shadow: -1px 0px 3px 0px rgba(0, 0, 0, 0.3);
}
}
.right-side {
@ -38,6 +38,6 @@
}
}
::ng-deep .mat-drawer-inner-container{
::ng-deep .mat-drawer-inner-container {
overflow: unset !important;
}

9
projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
View File

@ -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);
@ -239,7 +244,7 @@ $daesang-grey: (
cursor: pointer;
}
.policy{
.policy {
background-color: mat-color($accent, B100);
}
.mat-badge-accent .mat-badge-content {