그룹멤버로 추가 - 레이아웃 수정
This commit is contained in:
khk
parent
ae6bbd1ac5
commit
34ae7023ff
|
|
@ -1,4 +1,4 @@
|
|||
<mat-card class="confirm-card mat-elevation-z">
|
||||
<!--<mat-card class="confirm-card mat-elevation-z">
|
||||
<mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
|
||||
<mat-card-title>{{ data.title }}</mat-card-title>
|
||||
</mat-card-header>
|
||||
|
|
@ -29,3 +29,100 @@
|
|||
</button>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
-->
|
||||
<mat-card class="confirm-card mat-elevation-z setting-frame">
|
||||
<mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
|
||||
<mat-card-title>설정</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<div fxFlex class="setting-tab">
|
||||
<mat-tab-group animationDuration="0ms" vertical>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<span class="mdi mdi-settings"></span>
|
||||
일반
|
||||
</ng-template>
|
||||
<ucap-settings-general class="setting-category general"></ucap-settings-general>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<span class="mdi mdi-lock"></span>
|
||||
개인정보취급방침
|
||||
</ng-template>
|
||||
<ucap-settings-privacy class="setting-category"></ucap-settings-privacy>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<span class="mdi mdi-bell"></span>
|
||||
알림
|
||||
</ng-template>
|
||||
<ucap-settings-notification class="setting-category"></ucap-settings-notification>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<span class="mdi mdi-headset"></span>
|
||||
장치
|
||||
</ng-template>
|
||||
<ucap-settings-device class="setting-category"></ucap-settings-device>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<span class="mdi mdi-view-grid-plus"></span>
|
||||
사용권한
|
||||
</ng-template>
|
||||
<ucap-settings-permission class="setting-category"></ucap-settings-permission>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<span class="mdi mdi-phone"></span>
|
||||
통화
|
||||
</ng-template>
|
||||
<ucap-settings-call class="setting-category"></ucap-settings-call>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
|
||||
<!-- <div class="left-side-tabs-body">
|
||||
<div
|
||||
#tabs
|
||||
id="tabs-0"
|
||||
class="left-side-tabs-contents"
|
||||
style="display: block;"
|
||||
>
|
||||
ddddd
|
||||
</div>
|
||||
<div
|
||||
#tabs
|
||||
id="tabs-1"
|
||||
class="left-side-tabs-contents"
|
||||
style="display: none;"
|
||||
>
|
||||
dddagadsfgadsf
|
||||
</div>
|
||||
<div
|
||||
#tabs
|
||||
id="tabs-2"
|
||||
class="left-side-tabs-contents"
|
||||
style="display: none;"
|
||||
>
|
||||
fbkasfldsafkskdf
|
||||
</div>
|
||||
<div
|
||||
#tabs
|
||||
id="tabs-3"
|
||||
class="left-side-tabs-contents"
|
||||
style="display: none;"
|
||||
>
|
||||
rgkdsfgkdfglkdsflgs
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</mat-card-content>
|
||||
<mat-card-actions class="button-farm flex-row">
|
||||
<button mat-stroked-button (click)="onClickChoice(false)" class="mat-primary">
|
||||
No
|
||||
</button>
|
||||
<button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
|
||||
Yes
|
||||
</button>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
::ng-deep .mat-card-header-tex{
|
||||
/*::ng-deep .mat-card-header-tex{
|
||||
margin:0;
|
||||
}
|
||||
.confirm-card{
|
||||
|
|
@ -23,5 +23,108 @@ form{
|
|||
.mat-form-field{
|
||||
width:100%;
|
||||
}
|
||||
}*/
|
||||
|
||||
|
||||
::ng-deep .cdk-overlay-pane {
|
||||
width: 600px;
|
||||
max-height: 90%;
|
||||
height:800px;
|
||||
}
|
||||
|
||||
::ng-deep .setting-frame{
|
||||
padding: 16px;
|
||||
height:100%;
|
||||
min-width: 500px;
|
||||
position: relative;
|
||||
|
||||
.mat-dialog-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mat-card-header {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
border-bottom:1px solid #dddddd;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.mat-card-content {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
height: calc(100% - 100px);
|
||||
border-bottom:1px solid #dddddd;
|
||||
.setting-tab{
|
||||
position: relative;
|
||||
width:100%;
|
||||
height:100%;
|
||||
.mat-tab-body-wrapper{
|
||||
border-left:1px solid #dddddd;
|
||||
position: relative;
|
||||
height:100%;
|
||||
padding: 0 0 10px 10px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-farm {
|
||||
text-align: right;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 10px;
|
||||
.mat-primary {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::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;
|
||||
.mat-list-option{
|
||||
height:40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .setting-category{
|
||||
.mat-list-base{
|
||||
position:relative;
|
||||
.mat-list-item{
|
||||
font-size:15px;
|
||||
|
||||
}
|
||||
.mat-divider{
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user