This commit is contained in:
leejinho 2020-02-11 17:18:58 +09:00
commit 986ff4e928
6 changed files with 73 additions and 38 deletions

View File

@ -77,14 +77,14 @@
width: 100%; width: 100%;
.mat-tab-header { .mat-tab-header {
width: 160px; width: 170px;
flex-flow: column; flex-flow: column;
border-right: 1px solid #dddddd; border-right: 1px solid #dddddd;
.mat-tab-label-container { .mat-tab-label-container {
.mat-tab-list { .mat-tab-list {
.mat-tab-labels { .mat-tab-labels {
border-bottom: 0; border-bottom: 0;
padding-right: 10px; //padding-right: 10px;
.mat-tab-label { .mat-tab-label {
padding: 0 10px; padding: 0 10px;
} }

View File

@ -13,7 +13,7 @@
<mat-card-content> <mat-card-content>
<div fxFlex class="setting-tab"> <div fxFlex class="setting-tab">
<mat-tab-group animationDuration="0ms"> <mat-tab-group animationDuration="0ms">
<mat-tab> <mat-tab class="setting">
<ng-template mat-tab-label> <ng-template mat-tab-label>
<span class="mdi mdi-settings"></span> <span class="mdi mdi-settings"></span>
{{ 'settings.typeGenernal' | translate }} {{ 'settings.typeGenernal' | translate }}
@ -36,7 +36,7 @@
class="setting-category" class="setting-category"
></ucap-settings-privacy> ></ucap-settings-privacy>
</mat-tab> --> </mat-tab> -->
<mat-tab> <mat-tab class="setting">
<ng-template mat-tab-label> <ng-template mat-tab-label>
<span class="mdi mdi-bell"></span> <span class="mdi mdi-bell"></span>
{{ 'settings.typeNotification' | translate }} {{ 'settings.typeNotification' | translate }}
@ -72,7 +72,7 @@
</ng-template> </ng-template>
<ucap-settings-call class="setting-category"></ucap-settings-call> <ucap-settings-call class="setting-category"></ucap-settings-call>
</mat-tab> --> </mat-tab> -->
<mat-tab> <mat-tab class="setting">
<ng-template mat-tab-label> <ng-template mat-tab-label>
<span class="mdi mdi-chat"></span> <span class="mdi mdi-chat"></span>
{{ 'settings.typeChat' | translate }} {{ 'settings.typeChat' | translate }}

View File

@ -1,4 +1,4 @@
::ng-deep .setting-frame { .setting-frame {
padding: 16px; padding: 16px;
height: 100%; height: 100%;
min-width: 500px; min-width: 500px;
@ -33,23 +33,11 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
.mat-tab-group { .mat-tab-group {
display: flex;
flex-direction: row; flex-direction: row;
.mat-tab-header { position: relative;
width: 160px; height: 100%;
.mat-tab-labels { width: 100%;
flex-direction: column;
.mat-tab-label {
padding: 0 10px;
align-content: flex-start;
text-align: left;
align-items: center;
justify-content: flex-start;
}
}
.mat-ink-bar {
display: none;
}
}
} }
} }
} }
@ -65,21 +53,46 @@
} }
} }
::ng-deep .setting-tab { .setting-category {
.mat-tab-group { }
position: relative;
height: 100%;
width: 100%;
::ng-deep .setting-tab {
.mat-tab-header {
border: none !important;
.mat-tab-labels {
flex-direction: column;
border: none;
.mat-tab-label {
padding: 0 10px;
align-content: flex-start;
text-align: left;
align-items: center;
justify-content: flex-start;
}
}
.mat-ink-bar {
display: none;
}
}
.mat-tab-body-wrapper {
flex: 1 1 auto;
border-left: 1px solid #dddddd;
}
}
/*::ng-deep .setting-tab {
.mat-tab-group {
.mat-tab-header { .mat-tab-header {
width: 160px; width: 160px;
flex-flow: column; flex-flow: column;
flex: 0 0 auto;
border-right: 1px solid #dddddd; border-right: 1px solid #dddddd;
.mat-tab-label-container { .mat-tab-label-container {
.mat-tab-list { .mat-tab-list {
.mat-tab-labels { .mat-tab-labels {
border-bottom: 0; border-bottom: 0;
padding-right: 10px; //padding-right: 10px;
.mat-tab-label { .mat-tab-label {
padding: 0 10px; padding: 0 10px;
} }
@ -120,3 +133,4 @@
} }
} }
} }
*/

View File

@ -62,7 +62,7 @@
::ng-deep .mat-tab-labels { ::ng-deep .mat-tab-labels {
display: flex; display: flex;
width: 100%; width: 100%;
border-bottom: 2px solid #dddddd; //border-bottom: 2px solid #dddddd;
flex: 1 1 auto; flex: 1 1 auto;
justify-content: space-around; justify-content: space-around;
} }

View File

@ -1,4 +1,4 @@
<div> <div class="set-general">
<mat-list> <mat-list>
<h1 mat-subheader>{{ 'settings.genernal.theme' | translate }}</h1> <h1 mat-subheader>{{ 'settings.genernal.theme' | translate }}</h1>
<!--<ul class="theme-list"> <!--<ul class="theme-list">

View File

@ -41,6 +41,18 @@
} }
} }
/*
.mat-list-item {
margin-bottom: 10px;
}
.set-general {
.theme-select {
position: relative;
width: 100%;
height: 160px;
.theme-list {
position: relative;
height: 160px;
.theme-item { .theme-item {
width: 140px; width: 140px;
height: 98px; height: 98px;
@ -50,6 +62,10 @@
background-repeat: no-repeat; background-repeat: no-repeat;
opacity: 0.7; opacity: 0.7;
} }
}
}
}
*/
.theme-box { .theme-box {
width: 140px; width: 140px;
height: 98px; height: 98px;
@ -70,3 +86,8 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
.mat-divider {
position: relative;
padding-top: 10px;
}