ng-deep 정리중 이슈 - Clipboard 수정

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

@@ -158,9 +158,3 @@ $tablet-s-width: 768px;
   background: rgba(0, 0, 0, 0.04);
   cursor: pointer;
 }
-
-/*::ng-deep .mat-form-field-appearance-legacy {
-  .mat-form-field-infix {
-    padding: 6px;
-  }
-}*/

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/clipboard.dialog.component.html

@@ -1,4 +1,4 @@
-<mat-card class="confirm-card mat-elevation-z setting-frame">
+<mat-card class="confirm-card mat-elevation-z clipboard-frame">
   <mat-card-header>
     <mat-card-title
       cdkDrag
@@ -11,7 +11,7 @@
     </button>
   </mat-card-header>
   <mat-card-content>
-    <div fxFlex class="setting-tab">
+    <div fxFlex class="clipboard-tab">
       <mat-tab-group animationDuration="0ms">
         <mat-tab *ngIf="data.content.text">
           <ng-template mat-tab-label>

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

@@ -1,4 +1,4 @@
-::ng-deep .setting-frame {
+/*.clipboard-frame {
   padding: 16px;
   height: 100%;
   min-width: 500px;
@@ -70,7 +70,7 @@
   }
 }
 
-::ng-deep .setting-tab {
+::ng-deep .clipboard-tab {
   .mat-tab-group {
     position: relative;
     height: 100%;
@@ -125,3 +125,95 @@
     }
   }
 }
+*/
+.clipboard-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;
+
+    .btn-dialog-close {
+      font-size: 20px;
+      display: flex;
+      margin-left: auto;
+      align-self: flex-start;
+      color: #444444;
+    }
+  }
+  .mat-card-content {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: flex-start;
+    height: calc(100% - 100px);
+    border-bottom: 1px solid #dddddd;
+    .clipboard-tab {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      .mat-tab-group {
+        display: flex;
+        flex-direction: row;
+        position: relative;
+        height: 100%;
+        width: 100%;
+      }
+    }
+  }
+
+  .button-farm {
+    text-align: right;
+    position: absolute;
+    width: 100%;
+    bottom: 10px;
+    margin: 0 -16px;
+    .mat-primary {
+      margin-left: 4px;
+    }
+  }
+}
+
+::ng-deep .clipboard-tab {
+  .mat-tab-header {
+    width: 160px;
+    flex: 0 0 160px;
+    .mat-tab-labels {
+      flex-direction: column;
+      justify-content: start;
+      border: none;
+      height: 100%;
+      .mat-tab-label {
+        padding: 0 10px;
+        align-content: flex-start;
+        text-align: left;
+        align-items: center;
+        justify-content: flex-start;
+        .mat-checkbox {
+          label {
+            margin-right: 8px;
+          }
+        }
+      }
+    }
+    .mat-ink-bar {
+      display: none;
+    }
+  }
+
+  .mat-tab-body-wrapper {
+    flex: 1 1 auto;
+    border-left: 1px solid #dddddd;
+    .mat-tab-body {
+      padding: 10px;
+    }
+  }
+}

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

@@ -47,21 +47,21 @@
     position: absolute;
     width: 100%;
     bottom: 10px;
+    margin: 0 -16px;
     .mat-primary {
       margin-left: 4px;
     }
   }
 }
 
-.setting-category {
-}
-
 ::ng-deep .setting-tab {
   .mat-tab-header {
     border: none !important;
     .mat-tab-labels {
       flex-direction: column;
+      justify-content: start;
       border: none;
+      height: 100%;
       .mat-tab-label {
         padding: 0 10px;
         align-content: flex-start;

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

@@ -1,4 +1,4 @@
-::ng-deep .mat-list-base {
+/*::ng-deep .mat-list-base {
   .theme-select.mat-list-item {
     position: relative;
     height: 160px;
@@ -41,7 +41,7 @@
   }
 }
 
-/*
+*/
 .mat-list-item {
   margin-bottom: 10px;
 }
@@ -52,6 +52,7 @@
     height: 160px;
     .theme-list {
       position: relative;
+      width: 100%;
       height: 160px;
       .theme-item {
         width: 140px;
@@ -65,7 +66,30 @@
     }
   }
 }
-*/
+
+::ng-deep .theme-list {
+  .mat-tab-header {
+    width: 100%;
+    .mat-tab-labels {
+      position: relative;
+      width: 100%;
+      flex-direction: row;
+      .mat-tab-label {
+        width: 140px;
+        height: 120px;
+        .mat-tab-label-content {
+          position: relative;
+          flex-flow: column;
+          width: 100%;
+        }
+      }
+    }
+  }
+  .mat-tab-body-wrapper {
+    border: none;
+  }
+}
+
 .theme-box {
   width: 140px;
   height: 98px;

projects/ucap-webmessenger-ui-settings/src/lib/components/notification.component.scss

@@ -19,3 +19,7 @@
 .mat-radio-container {
   margin-right: 20px;
 }
+
+.mat-radio-button {
+  margin-right: 30px;
+}