diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-nav.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-nav.component.html
index c9804d4e..1be8d256 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-nav.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-nav.component.html
@@ -1,4 +1,4 @@
-
+
.ps__thumb-y {
margin-right: -2px;
}
}
+
+::ng-deep .cdk-virtual-scroll-orientation-vertical {
+ .cdk-virtual-scroll-content-wrapper {
+ width: 100%;
+ height: 100%;
+ contain: unset;
+ }
+}
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss
index 7162da1c..cd25e3ee 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss
@@ -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%;
- }
-}
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.scss
index ce342bfa..a1a17129 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.scss
@@ -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;
}
-}
+}*/
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.scss
index 7d8f2e2f..91bf62da 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.scss
@@ -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;
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.html
index 78b53b31..7107651d 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.html
@@ -14,21 +14,31 @@
-
+
-
+
-
+
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.scss
index 8508f68b..c92d8b0b 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.scss
@@ -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%;
+ }
+ }
+}*/
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.html
index 36f93b0f..e9189136 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.html
@@ -1,5 +1,5 @@