ng-deep 정리중(5차)

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.html

@@ -83,13 +83,15 @@
         *ngFor="let groupBuddy of groupBuddyList$ | async"
         [value]="groupBuddy.group"
         [disabled]="getDisabled(groupBuddy)"
-        class="group-name"
+        class="group-list"
       >
+      <div class="group-name">
         <span class="title-name ellipsis"> {{ groupBuddy.group.name }} </span>
         <span class="text-accent-color number"
           >({{ groupBuddy.buddyList.length
           }}{{ 'common.units.persons' | translate }})</span
         >
+      </div>
       </mat-list-option>
     </mat-selection-list>
   </mat-card-content>

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

@@ -46,10 +46,10 @@
   border-top: 1px solid #999999;
 }
 
-::ng-deep .group-name {
+.group-list {
   &.mat-list-item {
     border-bottom: 1px solid #dddddd;
-    .mat-list-text {
+    .group-name {
       flex-direction: row !important;
     }
   }

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/organization/selected-user-list.dialog.component.html

@@ -16,19 +16,21 @@
     </button>
   </mat-card-header>
   <mat-card-content>
-    <mat-checkbox
+    <div class="check-all">
-      #checkbox
+      <mat-checkbox
-      labelPosition="before"
+        #checkbox
-      [checked]="
+        labelPosition="before"
-        selectedUserList.length === data.selectedUserList.length &&
+        [checked]="
-        data.selectedUserList.length > 0
+          selectedUserList.length === data.selectedUserList.length &&
-      "
+          data.selectedUserList.length > 0
-      (change)="onCheckAllUser(checkbox.checked)"
+        "
-      (click)="$event.stopPropagation()"
+        (change)="onCheckAllUser(checkbox.checked)"
-      class="check-all"
+        (click)="$event.stopPropagation()"
-    >
+        class="checkbox"
-      {{ 'common.messages.selectAll' | translate }}
+      >
-    </mat-checkbox>
+        {{ 'common.messages.selectAll' | translate }}
+      </mat-checkbox>
+    </div>
     <div class="item-list">
       <cdk-virtual-scroll-viewport
         itemSize="60"
@@ -61,7 +63,7 @@
       </cdk-virtual-scroll-viewport>
     </div>
   </mat-card-content>
-  <mat-card-actions class="button-farm flex-row">
+  <mat-card-actions class="button-frame  flex-row">
     <button
       mat-stroked-button
       (click)="onClickChoice(false)"

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/organization/selected-user-list.dialog.component.scss

@@ -18,7 +18,7 @@
       height: 450px;
     }
   }
-  .button-farm {
+  .button-frame {
     text-align: right;
     .mat-primary {
       margin-left: 4px;
@@ -26,11 +26,12 @@
   }
 }
 
-::ng-deep .selected-user-dialog {
+.selected-user-dialog {
   .check-all {
     display: flex;
     border-bottom: 2px solid #444444;
-    .mat-checkbox-layout {
+    padding: 0 20px;
+    .checkbox {
       margin-left: auto;
       padding-bottom: 6px;
     }

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.scss

@@ -166,6 +166,7 @@ $tablet-s-width: 768px;
   }
 }
 
+//대화창 공통
 ::ng-deep .bubble {
   .bubble-main {
     word-wrap: break-word;
@@ -184,7 +185,7 @@ $tablet-s-width: 768px;
   }
 }
 
-::ng-deep .view-previous {
+/*::ng-deep .view-previous {
   display: flex;
   flex-flow: column;
   color: #ffffff;
@@ -230,3 +231,4 @@ $tablet-s-width: 768px;
     }
   }
 }
+*/

projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss

@@ -105,12 +105,7 @@ $tablet-l-width: 1024px;
   }
 }
 
-.bubble-main {
+.view-previous {
-  word-wrap: break-word;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-::ng-deep .view-previous {
   display: flex;
   flex-flow: column;
   color: #ffffff;