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-content>
<div fxFlex class="setting-tab">
<mat-tab-group animationDuration="0ms" vertical>
<mat-tab-group animationDuration="0ms">
<mat-tab>
<ng-template mat-tab-label>
<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;
width: 100%;
height: 100%;
.mat-tab-body-wrapper {
border-left: 1px solid #dddddd;
position: relative;
height: 100%;
padding: 0 0 10px 10px;
.mat-tab-group {
flex-direction: row;
.mat-tab-header {
width: 160px;
.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%;
width: 100%;
.mat-tab-header {
width: 160px;
flex-flow: column;
.mat-tab-label-container {
.mat-tab-list {
.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] {
display: flex;
flex-direction: row !important;
flex-direction: row;
.mat-tab-labels {
display: flex;

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

@ -1,40 +1,43 @@
<div>
<mat-list>
<h1 mat-subheader>테마</h1>
<ul class="theme-list">
<!--<ul class="theme-list">
<li
class="theme-box default on"
class="theme-box default"
(click)="onSelectedTabChange('theme-default')"
></li>
<li
class="theme-box lgRed"
(click)="onSelectedTabChange('theme-lgRed')"
></li>
</ul>
<mat-list-item>
<!-- <mat-tab-group
</ul>-->
<mat-list-item class="theme-select">
<mat-tab-group
mat-stretch-tabs
animationDuration="0ms"
(selectedTabChange)="onSelectedTabChange($event)"
fxLayout="row"
class="theme-list"
>
<mat-tab>
<ng-template mat-tab-label>
<ng-template mat-tab-label class="theme-item">
<div class="theme-box default-theme"></div>
<div>기본값</div>
<div class="theme-name">기본값</div>
</ng-template>
</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>LG Red</div>
<div class="theme-name">LG Red</div>
</ng-template>
</mat-tab>
</mat-tab-group> -->
<!--
<span>기본값</span>
<span>어둡게</span>
<span>밝게</span> -->
</mat-tab-group>
<div class="brightness">
<span>기본값</span>
<span>어둡게</span>
<span>밝게</span>
</div>
</mat-list-item>
<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;
display: flex;
flex-flow: row;
width: 100%;
margin: 10px;
height: 120px;
.theme-box {
width: 140px;
height: 98px;
margin-right: 10px;
border: 1px solid #dddddd;
background-size: 100% auto;
background-repeat: no-repeat;
opacity: 0.7;
&.default {
background-image: url('../../../../ucap-webmessenger-app/src/assets/images/theme/theme-default.png');
height: auto !important;
.mat-tab-header {
position: relative;
width: 100% !important;
.mat-tab-labels {
position: relative;
width: 100%;
flex-flow: row !important;
.mat-tab-label {
width: 140px;
height: 120px;
.mat-tab-label-content {
position: relative;
flex-flow: column;
width: 100%;
}
}
}
&.lgRed {
background-image: url('../../../../ucap-webmessenger-app/src/assets/images/theme/theme-lgRed.png');
}
&.on {
border: 1px solid #333333;
opacity: 1;
.mat-ink-bar {
display: none;
}
}
.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');
}
.lg-red-theme {
&.lg-red-theme {
background-image: url('../../../../ucap-webmessenger-app/src/assets/images/theme/theme-lgRed.png');
}
}
.brightness {
position: relative;
width: 100%;
display: flex;
flex-direction: row;
}