This commit is contained in:
leejinho 2019-11-22 14:18:03 +09:00
commit a0f0cd28a7
8 changed files with 260 additions and 60 deletions

View File

@ -59,6 +59,7 @@
[sessionVerinfo]="sessionVerinfo"
(click)="onClickContextMenu('SELECT_ROOM', room)"
(contextmenu)="onContextMenuChat($event, room)"
class="ucap-clickable"
>
</ucap-room-list-item>
</perfect-scrollbar>

View File

@ -40,7 +40,7 @@
(click)="onSelectBuddy(userInfo)"
(openProfile)="onClickOpenProfile($event)"
(contextmenu)="onContextMenuProfile($event, userInfo, group)"
class="list-item-frame"
class="list-item-frame ucap-clickable"
>
</ucap-profile-user-list-item>
</ucap-group-expansion-panel>

View File

@ -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>

View File

@ -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{
}
}
}

View File

@ -1,12 +1,6 @@
::ng-deep .cdk-overlay-pane {
width: 600px;
max-height: 90%;
height:800px;
}
::ng-deep .setting-frame{
::ng-deep .setting-frame {
padding: 16px;
height:100%;
height: 100%;
min-width: 500px;
position: relative;
@ -17,7 +11,7 @@
.mat-card-header {
position: relative;
width: 100%;
border-bottom:1px solid #dddddd;
border-bottom: 1px solid #dddddd;
margin-bottom: 12px;
}
@ -26,17 +20,16 @@
display: flex;
align-items: flex-start;
height: calc(100% - 100px);
border-bottom:1px solid #dddddd;
.setting-tab{
border-bottom: 1px solid #dddddd;
.setting-tab {
position: relative;
width:100%;
height:100%;
.mat-tab-body-wrapper{
border-left:1px solid #dddddd;
width: 100%;
height: 100%;
.mat-tab-body-wrapper {
border-left: 1px solid #dddddd;
position: relative;
height:100%;
height: 100%;
padding: 0 0 10px 10px;
}
}
}
@ -52,49 +45,47 @@
}
}
::ng-deep .setting-tab{
.mat-tab-group{
::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;
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-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;
::ng-deep .setting-category {
.mat-list-base {
position: relative;
.mat-list-item {
font-size: 15px;
}
.mat-divider{
.mat-divider {
}
}
}
}

View File

@ -235,6 +235,17 @@ $daesang-grey: (
background-color: mat-color($accent, B100);
}
.ucap-clickable {
cursor: pointer;
}
.policy{
background-color: mat-color($accent, B100);
}
.mat-badge-accent .mat-badge-content {
background-color: mat-color($warn, 400);
}
.mat-tab-group.mat-primary .mat-ink-bar,
body.theme-default .mat-tab-nav-bar.mat-primary .mat-ink-bar {
background-color: mat-color($accent, 400);

View File

@ -1,13 +1,12 @@
.login-form {
position: relative;
width: 384px;
max-width: 384px;
padding: 50px;
text-align: center;
background-color: rgba( 255, 255, 255, 0.8 );
background-color: rgba(255, 255, 255, 0.8);
border-radius: 0px;
box-shadow: 4px 4px 0px rgba(0,0,0,0.1);
box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1);
.mat-title {
margin: 16px 0 32px 0;
@ -89,14 +88,12 @@
}
}
}
.policy{
.policy {
position: absolute;
bottom:0;
width:100%;
padding:10px;
left:0;
//background-color: #4f586b;
background-color: #555555;
bottom: 0;
width: 100%;
padding: 10px;
left: 0;
color: #ffffff;
}

View File

@ -31,7 +31,7 @@
<!-- This is the tree node template for expandable nodes -->
<mat-tree-node
*matTreeNodeDef="let node; when: isHeader"
class="tree-node-frame"
class="tree-node-frame ucap-clickable"
style="height: 80px;"
matRipple
>