Merge branch 'master' of https://git.loafle.net/ucap-web/next-ucap-messenger

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

@@ -15,13 +15,15 @@
       <mat-tab-group animationDuration="0ms" vertical>
         <mat-tab *ngIf="data.content.text">
           <ng-template mat-tab-label>
-            <mat-checkbox #chkText> </mat-checkbox>
+            <mat-checkbox #chkText checked="true"> </mat-checkbox>
             <span class="title-text">{{
               'common.file.clipboardType.text' | translate
             }}</span>
           </ng-template>
           <perfect-scrollbar>
-            <div style="white-space: pre-wrap;">{{ data.content.text }}</div>
+            <div class="clipboard-text" style="white-space: pre-wrap;">
+              {{ data.content.text }}
+            </div>
           </perfect-scrollbar>
         </mat-tab>
         <!-- <mat-tab *ngIf="data.content.rtf">
@@ -59,7 +61,7 @@
           </ng-template>
 
           <perfect-scrollbar>
-            <div>
+            <div class="clipboard-img">
               <img [src]="data.content.imageDataUrl" />
             </div>
           </perfect-scrollbar>

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

@@ -1,4 +1,5 @@
-.clipboard-frame {
+.clipboard {
+  &-frame {
     padding: 16px;
     height: 100%;
     min-width: 500px;
@@ -53,3 +54,11 @@
       }
     }
   }
+  &-text {
+    padding: 0 10px;
+    white-space: pre-wrap;
+  }
+  &-img {
+    padding: 0 10px;
+  }
+}

projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss

@@ -407,6 +407,8 @@ $daesang-grey: (
   mat-tab-group[vertical] {
     display: flex;
     flex-direction: row;
+    .mat-tab-header {
+      border-bottom: none;
       .mat-tab-labels {
         display: flex;
         flex-direction: column;
@@ -414,18 +416,22 @@ $daesang-grey: (
         .mat-tab-label {
           justify-content: flex-start;
           padding: 0;
+          &[aria-selected='true'] {
+            opacity: 1;
+          }
           .mat-checkbox {
             margin-right: 8px;
           }
         }
       }
+    }
     .mat-ink-bar {
       opacity: 0;
     }
     .mat-tab-body-wrapper {
       flex: 1 1 auto;
       border-left: 1px solid #dddddd;
-      padding: 0 10px;
+      padding: 0;
     }
   }