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 14:54:25 +09:00
parent a58423271d
commit f3c0a1d878
2 changed files with 50 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,16 +1,10 @@
<mat-card class="confirm-card mat-elevation-z" fxFlexFill>
<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
fxLayout="column"
fxLayout.xs="column"
fxLayoutAlign="center"
fxLayoutGap="10px"
fxLayoutGap.xs="0"
>
<mat-tab-group flex="1" vertical animationDuration="0ms">
<div fxFlex class="setting-tab">
<mat-tab-group animationDuration="0ms" mat-stretch-tabs>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon>group</mat-icon>
@ -42,51 +36,27 @@
</mat-tab-group>
<div class="left-side-tabs-body">
<div
#tabs
id="tabs-0"
class="left-side-tabs-contents"
style="display: block;"
>
<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;"
>
<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;"
>
<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;"
>
<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"
>
<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>
</mat-card>

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

@ -1,30 +1,63 @@
::ng-deep .cdk-overlay-pane{
width:600px;
max-height:90%;
.setting-frame{
.mat-dialog-container {
position: relative;
}
}
}
.confirm-card {
padding: 0px;
padding: 16px;
min-width: 500px;
position: relative;
.mat-card-header {
margin-bottom: 10px;
position: relative;
width: 100%;
margin-bottom: 12px;
.mat-card-header-text {
.mat-card-title {
margin: 0 -16px;
}
}
}
.mat-card-content {
flex: 1 1 auto;
flex: 0 0 auto;
display: flex;
.content-box {
flex-direction: column;
flex-flow: column;
align-items: flex-start;
height: calc(100% - 100px);
.setting-tab {
width:100%;
height:100%;
position: relative;
.mat-tab-group {
width:100%;
height:100%;
position: relative;
}
}
}
.button-farm {
text-align: right;
position: relative;
width: 100%;
bottom: 10px;
.mat-primary {
margin-left: 4px;
}
}
}
::ng-deep .mat-tab-group {
.mat-tab-header{
margin-bottom:10px;
.mat-tab-labels{
border-bottom:2px solid #dddddd;
.mat-tab-label{
padding:0 10px;
}
}
}
}