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

setting-frame수정(미완)

Browse Source
This commit is contained in:
khk 2019-11-21 19:08:31 +09:00
parent 44def4db5f
commit 447577aa1b
2 changed files with 74 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,42 +10,42 @@
<span class="mdi mdi-settings"></span> <span class="mdi mdi-settings"></span>
일반 일반
</ng-template> </ng-template>
<ucap-settings-general></ucap-settings-general> <ucap-settings-general class="setting-category general"></ucap-settings-general>
</mat-tab> </mat-tab>
<mat-tab> <mat-tab>
<ng-template mat-tab-label> <ng-template mat-tab-label>
<span class="mdi mdi-lock"></span> <span class="mdi mdi-lock"></span>
개인정보취급방침 개인정보취급방침
</ng-template> </ng-template>
<ucap-settings-privacy></ucap-settings-privacy> <ucap-settings-privacy class="setting-category"></ucap-settings-privacy>
</mat-tab> </mat-tab>
<mat-tab> <mat-tab>
<ng-template mat-tab-label> <ng-template mat-tab-label>
<span class="mdi mdi-bell"></span> <span class="mdi mdi-bell"></span>
알림 알림
</ng-template> </ng-template>
<ucap-settings-notification></ucap-settings-notification> <ucap-settings-notification class="setting-category"></ucap-settings-notification>
</mat-tab> </mat-tab>
<mat-tab> <mat-tab>
<ng-template mat-tab-label> <ng-template mat-tab-label>
<span class="mdi mdi-headset"></span> <span class="mdi mdi-headset"></span>
장치 장치
</ng-template> </ng-template>
<ucap-settings-device></ucap-settings-device> <ucap-settings-device class="setting-category"></ucap-settings-device>
</mat-tab> </mat-tab>
<mat-tab> <mat-tab>
<ng-template mat-tab-label> <ng-template mat-tab-label>
<span class="mdi mdi-view-grid-plus"></span> <span class="mdi mdi-view-grid-plus"></span>
사용권한 사용권한
</ng-template> </ng-template>
<ucap-settings-permission></ucap-settings-permission> <ucap-settings-permission class="setting-category"></ucap-settings-permission>
</mat-tab> </mat-tab>
<mat-tab> <mat-tab>
<ng-template mat-tab-label> <ng-template mat-tab-label>
<span class="mdi mdi-phone"></span> <span class="mdi mdi-phone"></span>
통화 통화
</ng-template> </ng-template>
<ucap-settings-call></ucap-settings-call> <ucap-settings-call class="setting-category"></ucap-settings-call>
</mat-tab> </mat-tab>
</mat-tab-group> </mat-tab-group>
@ -86,15 +86,11 @@
</div> </div>
</mat-card-content> </mat-card-content>
<mat-card-actions class="button-farm flex-row"> <mat-card-actions class="button-farm flex-row">
<button <button mat-stroked-button (click)="onClickChoice(false)" class="mat-primary">
mat-stroked-button
(click)="onClickChoice(false)"
class="mat-primary"
>
No No
</button> </button>
<button mat-flat-button (click)="onClickChoice(true)" class="mat-primary"> <button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
Yes Yes
</button> </button>
</mat-card-actions> </mat-card-actions>
</mat-card> </mat-card>

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

@ -1,25 +1,24 @@
::ng-deep .cdk-overlay-pane { ::ng-deep .cdk-overlay-pane {
width: 600px; width: 600px;
max-height: 90%; max-height: 90%;
.setting-frame { height:800px;
.mat-dialog-container {
position: relative;
}
}
} }
.confirm-card {
::ng-deep .setting-frame{
padding: 16px; padding: 16px;
height:100%;
min-width: 500px; min-width: 500px;
position: relative; position: relative;
.mat-dialog-container {
position: relative;
}
.mat-card-header { .mat-card-header {
position: relative; position: relative;
width: 100%; width: 100%;
border-bottom:1px solid #dddddd;
margin-bottom: 12px; margin-bottom: 12px;
.mat-card-header-text {
.mat-card-title {
}
}
} }
.mat-card-content { .mat-card-content {
@ -27,21 +26,24 @@
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
height: calc(100% - 100px); height: calc(100% - 100px);
.setting-tab { border-bottom:1px solid #dddddd;
width: 100%; .setting-tab{
height: 100%;
position: relative; position: relative;
.mat-tab-group { width:100%;
width: 100%; height:100%;
height: 100%; .mat-tab-body-wrapper{
border-left:1px solid #dddddd;
position: relative; position: relative;
height:100%;
padding: 0 0 10px 10px;
} }
} }
} }
.button-farm { .button-farm {
text-align: right; text-align: right;
position: relative; position: absolute;
width: 100%; width: 100%;
bottom: 10px; bottom: 10px;
.mat-primary { .mat-primary {
@ -49,3 +51,50 @@
} }
} }
} }
::ng-deep .setting-tab{
.mat-tab-group{
position: relative;
height:100%;
width:100%;
.mat-tab-header{
.mat-tab-label-container{
.mat-tab-list{
.mat-tab-labels{
border-bottom:0;
padding-right:10px;
.mat-tab-label{
padding:0 10px;
}
}
}
}
}
.mat-tab-body-wrapper{
.mat-tab-body{
.mat-tab-body-conten{
position:relative;
width:100%;
height:100%;
.mat-list-base{
position:relative;
}
}
}
}
}
}
::ng-deep .setting-category{
.mat-list-base{
position:relative;
.mat-list-item{
font-size:15px;
}
.mat-divider{
}
}
}