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

ng-deep 삭제 후 이슈: 환경설정 수정중

Browse Source
This commit is contained in:
khk 2020-02-11 17:13:46 +09:00
parent a2229f73ae
commit 6ed31ffd62
6 changed files with 73 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/clipboard.dialog.component.scss
View File

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

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

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

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

@ -1,4 +1,4 @@
::ng-deep .setting-frame {
.setting-frame {
padding: 16px;
height: 100%;
min-width: 500px;
@ -33,23 +33,11 @@
width: 100%;
height: 100%;
.mat-tab-group {
display: flex;
flex-direction: row;
.mat-tab-header {
width: 160px;
.mat-tab-labels {
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;
}
}
position: relative;
height: 100%;
width: 100%;
}
}
}
@ -65,21 +53,46 @@
}
}
::ng-deep .setting-tab {
.mat-tab-group {
position: relative;
height: 100%;
width: 100%;
.setting-category {
}
::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 {
width: 160px;
flex-flow: column;
flex: 0 0 auto;
border-right: 1px solid #dddddd;
.mat-tab-label-container {
.mat-tab-list {
.mat-tab-labels {
border-bottom: 0;
padding-right: 10px;
//padding-right: 10px;
.mat-tab-label {
padding: 0 10px;
}
@ -120,3 +133,4 @@
}
}
}
*/

2
projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss
View File

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

2
projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.html
View File

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

37
projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.scss
View File

@ -41,15 +41,31 @@
}
}
.theme-item {
width: 140px;
height: 98px;
margin-right: 10px;
border: 1px solid #dddddd;
background-size: 100% auto;
background-repeat: no-repeat;
opacity: 0.7;
/*
.mat-list-item {
margin-bottom: 10px;
}
.set-general {
.theme-select {
position: relative;
width: 100%;
height: 160px;
.theme-list {
position: relative;
height: 160px;
.theme-item {
width: 140px;
height: 98px;
margin-right: 10px;
border: 1px solid #dddddd;
background-size: 100% auto;
background-repeat: no-repeat;
opacity: 0.7;
}
}
}
}
*/
.theme-box {
width: 140px;
height: 98px;
@ -70,3 +86,8 @@
display: flex;
flex-direction: row;
}
.mat-divider {
position: relative;
padding-top: 10px;
}