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

테마선택- tab으로 변경

Browse Source
This commit is contained in:
khk 2019-11-26 10:56:58 +09:00
parent 664a92781f
commit 7da4bfb5ee
5 changed files with 105 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.html
View File

@ -4,7 +4,7 @@
</mat-card-header> </mat-card-header>
<mat-card-content> <mat-card-content>
<div fxFlex class="setting-tab"> <div fxFlex class="setting-tab">
<mat-tab-group animationDuration="0ms" vertical> <mat-tab-group animationDuration="0ms">
<mat-tab> <mat-tab>
<ng-template mat-tab-label> <ng-template mat-tab-label>
<span class="mdi mdi-settings"></span> <span class="mdi mdi-settings"></span>

31
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.scss
View File

@ -25,11 +25,30 @@
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
.mat-tab-body-wrapper { .mat-tab-group {
border-left: 1px solid #dddddd; flex-direction: row;
position: relative; .mat-tab-header {
height: 100%; width: 160px;
padding: 0 0 10px 10px; .mat-tab-labels {
flex-direction: column;
.mat-tab-label {
padding: 0 10px;
align-content: flex-start;
text-align: left;
align-items: self-start;
justify-content: flex-start;
}
.mat-ink-bar {
display: none;
}
}
}
.mat-tab-body-wrapper {
border-left: 1px solid #dddddd;
position: relative;
height: 100%;
padding: 0 0 10px 10px;
}
} }
} }
} }
@ -51,6 +70,8 @@
height: 100%; height: 100%;
width: 100%; width: 100%;
.mat-tab-header { .mat-tab-header {
width: 160px;
flex-flow: column;
.mat-tab-label-container { .mat-tab-label-container {
.mat-tab-list { .mat-tab-list {
.mat-tab-labels { .mat-tab-labels {

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

@ -320,7 +320,7 @@ $daesang-grey: (
mat-tab-group[vertical] { mat-tab-group[vertical] {
display: flex; display: flex;
flex-direction: row !important; flex-direction: row;
.mat-tab-labels { .mat-tab-labels {
display: flex; display: flex;

33
projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.html
View File

@ -1,40 +1,43 @@
<div> <div>
<mat-list> <mat-list>
<h1 mat-subheader>테마</h1> <h1 mat-subheader>테마</h1>
<!--<ul class="theme-list">
<ul class="theme-list">
<li <li
class="theme-box default on" class="theme-box default"
(click)="onSelectedTabChange('theme-default')" (click)="onSelectedTabChange('theme-default')"
></li> ></li>
<li <li
class="theme-box lgRed" class="theme-box lgRed"
(click)="onSelectedTabChange('theme-lgRed')" (click)="onSelectedTabChange('theme-lgRed')"
></li> ></li>
</ul> </ul>-->
<mat-list-item> <mat-list-item class="theme-select">
<!-- <mat-tab-group <mat-tab-group
mat-stretch-tabs mat-stretch-tabs
animationDuration="0ms" animationDuration="0ms"
(selectedTabChange)="onSelectedTabChange($event)" (selectedTabChange)="onSelectedTabChange($event)"
fxLayout="row"
class="theme-list"
> >
<mat-tab> <mat-tab>
<ng-template mat-tab-label> <ng-template mat-tab-label class="theme-item">
<div class="theme-box default-theme"></div> <div class="theme-box default-theme"></div>
<div>기본값</div> <div class="theme-name">기본값</div>
</ng-template> </ng-template>
</mat-tab> </mat-tab>
<mat-tab> <mat-tab>
<ng-template mat-tab-label> <ng-template mat-tab-label class="theme-item">
<div class="theme-box lg-red-theme"></div> <div class="theme-box lg-red-theme"></div>
<div>LG Red</div> <div class="theme-name">LG Red</div>
</ng-template> </ng-template>
</mat-tab> </mat-tab>
</mat-tab-group> --> </mat-tab-group>
<!--
<span>기본값</span> <div class="brightness">
<span>어둡게</span> <span>기본값</span>
<span>밝게</span> --> <span>어둡게</span>
<span>밝게</span>
</div>
</mat-list-item> </mat-list-item>
<mat-divider></mat-divider> <mat-divider></mat-divider>

80
projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.scss
View File

@ -1,34 +1,72 @@
.theme-list { ::ng-deep .mat-list-base {
.theme-select.mat-list-item {
position: relative;
height: 200px;
.mat-list-item-content {
flex-direction: column;
}
}
}
::ng-deep .theme-list {
position: relative; position: relative;
display: flex; display: flex;
flex-flow: row; flex-flow: row;
width: 100%;
margin: 10px; margin: 10px;
height: 120px; height: auto !important;
.mat-tab-header {
.theme-box { position: relative;
width: 140px; width: 100% !important;
height: 98px; .mat-tab-labels {
margin-right: 10px; position: relative;
border: 1px solid #dddddd; width: 100%;
background-size: 100% auto; flex-flow: row !important;
background-repeat: no-repeat; .mat-tab-label {
opacity: 0.7; width: 140px;
&.default { height: 120px;
background-image: url('../../../../ucap-webmessenger-app/src/assets/images/theme/theme-default.png'); .mat-tab-label-content {
position: relative;
flex-flow: column;
width: 100%;
}
}
} }
&.lgRed { .mat-ink-bar {
background-image: url('../../../../ucap-webmessenger-app/src/assets/images/theme/theme-lgRed.png'); display: none;
}
&.on {
border: 1px solid #333333;
opacity: 1;
} }
} }
.mat-tab-body-wrapper {
border-left: none;
}
}
.default-theme { .theme-item {
width: 140px;
height: 98px;
margin-right: 10px;
border: 1px solid #dddddd;
background-size: 100% auto;
background-repeat: no-repeat;
opacity: 0.7;
}
.theme-box {
width: 140px;
height: 98px;
border: 1px solid #dddddd;
background-size: 100% auto;
background-repeat: no-repeat;
&.default-theme {
background-image: url('../../../../ucap-webmessenger-app/src/assets/images/theme/theme-default.png'); background-image: url('../../../../ucap-webmessenger-app/src/assets/images/theme/theme-default.png');
} }
.lg-red-theme { &.lg-red-theme {
background-image: url('../../../../ucap-webmessenger-app/src/assets/images/theme/theme-lgRed.png'); background-image: url('../../../../ucap-webmessenger-app/src/assets/images/theme/theme-lgRed.png');
} }
} }
.brightness {
position: relative;
width: 100%;
display: flex;
flex-direction: row;
}