앨범,파일함- 퍼펙트 스크롤 적용

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

@@ -33,6 +33,7 @@
   width: 70px;
   flex-direction: row;
 }
+
 ::ng-deep .organization-side {
   flex-direction: column;
   height: 100%;
@@ -44,6 +45,7 @@
         flex-flow: column;
         height: 280px;
         padding-top: 10px;
+        border-bottom: none;
         .mat-tab-label {
           width: 100%;
           height: 80px;
@@ -92,11 +94,15 @@
     .mat-tab-label-content {
       .icon-item {
         transform: scale(1);
-        /*svg {
-          stroke: #ef4c73;
-          fill: #ef4c73;
-        }*/
       }
     }
   }
 }
+
+::ng-deep .ps {
+  .ps-content {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+}

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

@@ -14,6 +14,7 @@
 }
 
 .list-search {
+  position: relative;
   display: flex;
   flex-direction: row;
   height: 60px;

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.scss

@@ -16,13 +16,6 @@
     }
   }
 }
-::ng-deep .ps {
-  .ps-content {
-    position: relative;
-    width: 100%;
-    height: 100%;
-  }
-}
 
 .search-result {
   height: calc(100% - 130px);
@@ -52,7 +45,7 @@
   }
 }
 
-.list-item-frame{
+.list-item-frame {
-  width:100%;
+  width: 100%;
-  height:100%;
+  height: 100%;
 }

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

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

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

@@ -1,4 +1,4 @@
-<div fxLayout="column" class="album-box">
+<div fxLayout="column" class="rightDrawer-albumbox">
   <div>
     <mat-tab-group (selectedIndexChange)="onSelectedIndexChange($event)">
       <mat-tab label="Image"></mat-tab>
@@ -81,7 +81,7 @@
     </ng-container>
   </div>
   <div class="search-list">
-    <perfect-scrollbar>
+    <perfect-scrollbar class="album-scrollbar">
       <div
         *ngFor="let fileInfo of filteredList"
         class="img-item"

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

@@ -13,17 +13,14 @@
   }
 }
 
-.album-box {
+::ng-deep .rightDrawer-albumbox {
   height: 100%;
   overflow: hidden;
-
+  .mat-tab-labels {
-  .search-list {
+    .mat-tab-label {
-    overflow: auto;
+      width: 50%;
+    }
   }
-}
-
-::ng-deep .mat-tab-label{
-  width:50%;
 }
 
 .select-filebox{
@@ -32,6 +29,7 @@
   margin:10px;
   padding:10px;
   border:1px solid #cccccc;
+  border-radius: 4px;
   .select-file{
     color: #212121;
     border-bottom: 1px dotted #dddddd;
@@ -66,6 +64,7 @@
   height: calc(100% - 450px);
   overflow-y: auto;
   flex-wrap: wrap;
+
   .img-item {
     cursor: pointer;
     margin-bottom:10px;
@@ -99,6 +98,14 @@
   }
 }
 
+::ng-deep .album-scrollbar{
+  .ps{
+    .ps-content{
+      display:flex;
+      flex-flow: wrap;
+    }
+  }
+}
 .preview-image,
 .preview-video{
   max-height: 140px;

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.html

@@ -123,6 +123,7 @@
     </ng-container>
   </div>
   <div fxFlex="0 0 auto" class="table-box">
+    <perfect-scrollbar class="album-scrollbar">
       <table mat-table [dataSource]="dataSource" matSort>
         <ng-container matColumnDef="check">
           <th mat-header-cell *matHeaderCellDef>
@@ -173,6 +174,7 @@
           (click)="onClickRow(row)"
         ></tr>
       </table>
+      </perfect-scrollbar>
   </div>
   <div class="footer-fix">
     <mat-paginator

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

@@ -13,7 +13,7 @@
   }
 }
 
-.rightDrawer-filebox {
+::ng-deep .rightDrawer-filebox {
   width: 100%;
   height: calc(100% - 60px);
   .rightDrawer-tab {
@@ -23,16 +23,13 @@
   }
 }
 
-::ng-deep .mat-tab-label {
-  width: 50%;
-}
-
 .select-filebox {
   position: relative;
   display: flex;
   flex-flow: column;
   margin: 10px;
   border: 1px solid #cccccc;
+  border-radius: 4px;
   .select-flie {
     display: flex;
     flex-flow: row;
@@ -114,7 +111,7 @@
   }
 }
 .table-box {
-  height: calc(100% - 450px);
+  height: calc(100% - 440px);
   overflow-y: auto;
 }
 .mat-paginator-container {

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/message-box.component.scss

@@ -1,3 +1,48 @@
-div.message-box {
+.list-search {
-  width: 600px;
+  display: flex;
+  flex-direction: row;
+  height: 60px;
+  align-items: center;
+  padding: 0;
+  font-size: 14px;
+  background-color: #f9f9f9;
+  border-bottom: 1px solid #dddddd;
+  .searchbox {
+    width: 100%;
+    height: 100%;
+  }
+}
+::ng-deep .searchbox {
+  .mat-form-field {
+    display: block;
+    .mat-form-field-wrapper {
+      padding: 0;
+      padding-bottom: 0 !important;
+      height: 100%;
+      .mat-form-field-flex {
+        height: 59px;
+        padding: 0 10px 0 20px;
+        align-items: center;
+        .mat-form-field-infix {
+          width: 90%;
+          font-size: 14px;
+          border: none;
+        }
+        .mat-form-field-suffix {
+          .mat-icon {
+            line-height: 24px;
+          }
+        }
+      }
+    }
+  }
+  .mat-form-field-appearance-legacy {
+    .mat-form-field-wrapper {
+      padding: 0;
+    }
+    .mat-form-field-underline {
+      bottom: 0;
+      background-color: unset !important;
+    }
+  }
 }