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

ng-deep 정리중 (1차)

Browse Source
This commit is contained in:
khk 2020-02-10 19:09:57 +09:00
parent ee1ecda9ec
commit 39ed5dc95f
11 changed files with 202 additions and 278 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-nav.component.html
View File

@ -1,4 +1,4 @@
<div class="container">
<div class="left-container">
<mat-tab-group
mat-stretch-tabs
animationDuration="0ms"

150
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-nav.component.scss
View File

@ -1,58 +1,16 @@
::ng-deep .mat-tab-label,
::ng-deep .mat-tab-label-active {
min-width: 0 !important;
}
::ng-deep .mat-tab-body-wrapper,
::ng-deep .mat-tab-body {
height: 100%;
width: 100%;
}
::ng-deep .mat-tab-header {
border-bottom: none !important;
width: 100%;
}
.left-side-tabs-body {
position: relative;
height: 100%;
div[id^='tabs'] {
height: 100%;
width: 100%;
position: relative;
}
}
.container {
.left-container {
display: flex;
width: 100%;
height: 100%;
}
.mat-tab-group {
::ng-deep .global-menu {
display: flex;
flex-direction: row;
}
.myprofile {
position: absolute;
display: flex;
flex-flow: column;
justify-content: center;
height: 80px;
width: 68px;
bottom: 10px;
color: #ffffff;
font-size: 11px;
text-align: center;
z-index: 1;
cursor: pointer;
}
::ng-deep .organization-side {
flex-direction: column;
height: 100%;
}
::ng-deep .global-menu {
.mat-tab-header {
border-bottom: none !important;
width: 100%;
}
.mat-tab-label-container {
.mat-tab-list {
.mat-tab-labels {
@ -60,10 +18,48 @@
height: 360px;
padding-top: 10px;
border-bottom: none;
.mat-tab-label {
width: 100%;
height: 80px;
padding: 0;
min-width: 0 !important;
.mat-tab-label-content {
.icon-item {
display: inline-flex;
width: 36px;
height: 36px;
border-radius: 50%;
justify-content: center;
align-items: center;
transform: scale(0.9);
transition: transform 0.3s cubic-bezier(0.4, 0, 0, 1);
svg {
width: 24px;
height: 24px;
stroke: #ffffff;
stroke-width: 1.5;
stroke-linecap: square;
stroke-linejoin: miter;
fill: none;
}
.mat-badge-content {
right: -4px !important;
}
}
}
&.mat-tab-label-active {
min-width: 0 !important;
}
&[aria-selected='true'] {
opacity: 1;
.mat-tab-label-content {
.icon-item {
transform: scale(1);
}
}
}
}
}
.mat-ink-bar {
@ -72,60 +68,32 @@
}
}
}
}
.left-group-side {
position: relative;
height: 100%;
}
::ng-deep .mat-tab-label {
.mat-tab-label-content {
.icon-item {
background: var(--white);
border-radius: 4px;
display: inline-flex;
width: 36px;
height: 36px;
border-radius: 50%;
justify-content: center;
align-items: center;
transform: scale(0.9);
transition: transform 0.3s cubic-bezier(0.4, 0, 0, 1);
svg {
width: 24px;
height: 24px;
stroke: #ffffff;
stroke-width: 1.5;
stroke-linecap: square;
stroke-linejoin: miter;
fill: none;
}
.mat-badge-content {
right: -4px !important;
}
}
}
&[aria-selected='true'] {
opacity: 1;
.mat-tab-label-content {
.icon-item {
transform: scale(1);
}
.mat-tab-body-wrapper {
.mat-tab-body {
height: 100%;
width: 100%;
}
}
}
::ng-deep .ps {
/*::ng-deep .ps {
.ps-content {
position: relative;
width: 100%;
height: 100%;
}
}
}*/
// perfect-scrollbar right로 2px이동
::ng-deep .ps__rail-y {
& > .ps__thumb-y {
margin-right: -2px;
}
}
::ng-deep .cdk-virtual-scroll-orientation-vertical {
.cdk-virtual-scroll-content-wrapper {
width: 100%;
height: 100%;
contain: unset;
}
}

126
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss
View File

@ -1,126 +1,30 @@
::ng-deep .mat-tab-label,
::ng-deep .mat-tab-label-active {
min-width: 0 !important;
}
::ng-deep .mat-tab-body-wrapper,
::ng-deep .mat-tab-body {
.container {
display: flex;
width: 300px;
height: 100%;
width: 100%;
}
::ng-deep .mat-tab-header {
border-bottom: none !important;
width: 100%;
.mat-tab-group {
display: flex;
flex-direction: row;
}
}
.left-side-tabs-body {
position: relative;
height: 100%;
div.left-side-tabs-contents {
div[id^='tabs'] {
height: 100%;
width: 100%;
position: relative;
}
.left-side-tabs-contents {
height: 100%;
width: 100%;
position: relative;
}
}
.container {
display: flex;
width: 300px;
height: 100%;
}
.mat-tab-group {
display: flex;
flex-direction: row;
}
.myprofile {
position: absolute;
display: flex;
flex-flow: column;
justify-content: center;
height: 80px;
width: 68px;
bottom: 10px;
color: #ffffff;
font-size: 11px;
text-align: center;
z-index: 1;
cursor: pointer;
}
::ng-deep .organization-side {
//다이얼로그 창과 구분
.organization-side {
flex-direction: column;
height: 100%;
}
::ng-deep .global-menu {
.mat-tab-label-container {
.mat-tab-list {
.mat-tab-labels {
flex-flow: column;
height: 360px;
padding-top: 10px;
border-bottom: none;
.mat-tab-label {
width: 100%;
height: 80px;
padding: 0;
}
}
.mat-ink-bar {
background-color: none;
height: 0;
}
}
}
}
.left-group-side {
position: relative;
height: 100%;
}
::ng-deep .mat-tab-label {
.mat-tab-label-content {
.icon-item {
background: var(--white);
border-radius: 4px;
display: inline-flex;
width: 36px;
height: 36px;
border-radius: 50%;
justify-content: center;
align-items: center;
transform: scale(0.9);
transition: transform 0.3s cubic-bezier(0.4, 0, 0, 1);
svg {
width: 24px;
height: 24px;
stroke: #ffffff;
stroke-width: 1.5;
stroke-linecap: square;
stroke-linejoin: miter;
fill: none;
}
.mat-badge-content {
right: -4px !important;
}
}
}
&[aria-selected='true'] {
opacity: 1;
.mat-tab-label-content {
.icon-item {
transform: scale(1);
}
}
}
}
::ng-deep .ps {
.ps-content {
position: relative;
width: 100%;
height: 100%;
}
}

10
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.scss
View File

@ -19,12 +19,12 @@
}
.app-layout-chat-left-sidenav-chat-list {
//height: calc(100% - 120px);
position: relative;
.no-search-result {
padding-top: 10px;
padding-left: 10px;
justify-content: center;
align-items: center;
display: flex;
}
}
@ -32,10 +32,10 @@
width: 100%;
height: 100%;
}
::ng-deep .cdk-virtual-scroll-orientation-vertical {
/*::ng-deep .cdk-virtual-scroll-orientation-vertical {
.cdk-virtual-scroll-content-wrapper {
width: 100%;
height: 100%;
contain: unset;
}
}
}*/

16
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.scss
View File

@ -1,7 +1,3 @@
.message-box {
position: relative;
height: 100%;
}
.current-head {
h3 {
display: inline-flex;
@ -23,12 +19,22 @@
cursor: pointer;
}
::ng-deep .message-box {
position: relative;
height: 100%;
.message-section {
position: relative;
//height: calc(100% - 120px);
.message-tab {
position: relative;
height: 100%;
& > .mat-tab-header {
width: 100%;
.mat-tab-label {
min-width: 33%;
}
}
.mat-tab-body-wrapper {
height: calc(100% - 50px);
}
}
.search-sub {
padding: 0 20px;

16
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.html
View File

@ -14,21 +14,31 @@
</div>
<ng-container *ngIf="selectedRightDrawer" [ngSwitch]="selectedRightDrawer">
<!-- [S] About Chat room -->
<app-layout-chat-right-drawer-file-box *ngSwitchCase="RightDrawer.FileBox">
<app-layout-chat-right-drawer-file-box
*ngSwitchCase="RightDrawer.FileBox"
class="rightDrawer-item"
>
</app-layout-chat-right-drawer-file-box>
<app-layout-chat-right-drawer-album-box *ngSwitchCase="RightDrawer.AlbumBox">
<app-layout-chat-right-drawer-album-box
*ngSwitchCase="RightDrawer.AlbumBox"
class="rightDrawer-item"
>
</app-layout-chat-right-drawer-album-box>
<app-layout-chat-right-drawer-room-user-list
*ngSwitchCase="RightDrawer.RoomUser"
(openProfile)="onClickOpenProfile($event)"
class="rightDrawer-item"
>
</app-layout-chat-right-drawer-room-user-list>
<!-- [E] About Chat room -->
<!-- [S] About Common -->
<app-layout-chat-right-drawer-notice *ngSwitchCase="RightDrawer.Notice">
<app-layout-chat-right-drawer-notice
*ngSwitchCase="RightDrawer.Notice"
class="rightDrawer-item"
>
</app-layout-chat-right-drawer-notice>
<!-- [E] About Common -->
</ng-container>

76
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.scss
View File

@ -1,3 +1,4 @@
$tablet-s-width: 768px;
.rightDrawer-title {
height: 50px;
border-bottom: 1px solid #dddddd;
@ -11,10 +12,75 @@
margin-right: -10px;
}
}
::ng-deep .mat-tab-labels {
display: flex;
//rightDrawer공통
::ng-deep .rightDrawer-item {
width: 100%;
border-bottom: 2px solid #dddddd;
flex: 1 1 auto;
justify-content: space-around;
height: calc(100% - 60px);
.rightDrawer-tab {
.mat-tab-label {
width: 50%;
min-width: 50%;
}
.mat-tab-header-pagination {
display: none;
}
}
}
::ng-deep .footer-fix {
position: absolute;
bottom: 0;
min-height: 40px;
width: 100%;
flex-direction: column;
box-sizing: border-box;
display: flex;
border-top: 1px solid #dddddd;
.btn-box {
height: 50px;
padding-bottom: 10px;
width: 100%;
background-color: #ffffff;
button {
margin: 5px;
font-size: 0.9em;
padding: 0 12px;
}
}
.mat-paginator-page-size {
@media screen and (max-width: #{$tablet-s-width}), (max-height: 800px) {
display: none;
}
}
}
/*right-drawer tab 레이아웃
::ng-deep .rightDrawer-tab {
.mat-tab-labels {
display: flex;
width: 100%;
border-bottom: 2px solid #dddddd;
flex: 1 1 auto;
justify-content: space-around;
width: 100%;
padding: 0;
min-width: 0 !important;
.mat-tab-label {
width: 50%;
}
}
.mat-tab-header-pagination.mat-tab-header-pagination-disabled {
display: none !important;
}
.message-tab {
position: relative;
height: 100%;
& > .mat-tab-header {
width: 100%;
.mat-tab-label {
min-width: 33%;
}
}
}*/

2
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.html
View File

@ -1,5 +1,5 @@
<div fxLayout="column" class="rightDrawer-albumbox">
<div>
<div class="rightDrawer-tab">
<mat-tab-group
mat-stretch-tabs
animationDuration="0ms"

41
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.scss
View File

@ -14,17 +14,11 @@ $tablet-s-width: 768px;
word-wrap: break-word;
}
}
::ng-deep .rightDrawer-albumbox {
.rightDrawer-albumbox {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
.mat-tab-labels {
.mat-tab-label {
width: 50%;
}
}
}
.select-filebox {
display: flex;
flex-flow: column;
@ -92,6 +86,11 @@ $tablet-s-width: 768px;
cursor: pointer;
margin-bottom: 10px;
position: relative;
width: 32%;
margin-right: 2%;
&:nth-child(3n + 0) {
margin-right: 0;
}
dl {
dt {
display: flex;
@ -125,19 +124,21 @@ $tablet-s-width: 768px;
justify-content: stretch;
align-content: space-between;
width: 100%;
.img-item {
cursor: pointer;
margin-bottom: 10px;
position: relative;
width: 32%;
margin-right: 2%;
&:nth-child(3n + 0) {
margin-right: 0;
}
}
}
}
}
.img-item {
cursor: pointer;
margin-bottom: 10px;
position: relative;
width: 32%;
margin-right: 2%;
&:nth-child(3n + 0) {
margin-right: 0;
}
}
.preview-image,
.preview-video {
max-height: 140px;
@ -145,7 +146,7 @@ $tablet-s-width: 768px;
.btn-box {
position: absolute;
bottom: 0;
bottom: 50px;
height: 50px;
margin-bottom: 10px;
width: 100%;

40
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.scss
View File

@ -16,14 +16,9 @@ $tablet-s-width: 768px;
}
}
::ng-deep .rightDrawer-filebox {
.rightDrawer-filebox {
width: 100%;
height: calc(100% - 60px);
.rightDrawer-tab {
.mat-tab-label {
width: 50%;
}
}
}
.select-filebox {
@ -140,7 +135,7 @@ $tablet-s-width: 768px;
}
}
.table-box {
height: calc(100% - 440px);
height: calc(100% - 420px);
overflow-y: auto;
@media screen and (max-width: #{$tablet-s-width}), (max-height: 800px) {
height: calc(100% - 146px);
@ -164,35 +159,8 @@ $tablet-s-width: 768px;
cursor: pointer;
}
::ng-deep .footer-fix {
position: absolute;
bottom: 0;
min-height: 40px;
width: 100%;
flex-direction: column;
box-sizing: border-box;
display: flex;
border-top: 1px solid #dddddd;
.btn-box {
height: 50px;
padding-bottom: 10px;
width: 100%;
background-color: #ffffff;
button {
margin: 5px;
font-size: 0.9em;
padding: 0 12px;
}
}
.mat-paginator-page-size {
@media screen and (max-width: #{$tablet-s-width}), (max-height: 800px) {
display: none;
}
}
}
::ng-deep .mat-form-field-appearance-legacy {
/*::ng-deep .mat-form-field-appearance-legacy {
.mat-form-field-infix {
padding: 6px;
}
}
}*/

1
projects/ucap-webmessenger-ui/src/lib/components/sticker-selector.component.scss
View File

@ -7,6 +7,7 @@ $tablet-s-width: 768px;
.mat-tab-header {
.mat-tab-label {
padding: 0 10px;
min-width: 16%;
}
}
.mat-tab-body-wrapper {