수정사항반영

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

@@ -63,6 +63,7 @@
       <mat-list-option
         *ngFor="let groupBuddy of groupBuddyList$ | async"
         [value]="groupBuddy.group"
+        class="group-name"
       >
         <span class="title-name ellipsis"> {{ groupBuddy.group.name }} </span>
         <span class="text-accent-color number"
@@ -71,15 +72,8 @@
         >
       </mat-list-option>
     </mat-selection-list>
-    <!-- <div>
-      <ucap-group-expansion-panel
-        #groupExpansionPanel
-        [groupBuddyList]="groupBuddyList$ | async"
-        [checkable]="true"
-      >
-      </ucap-group-expansion-panel>
-    </div> -->
   </mat-card-content>
+
   <mat-card-actions class="button-farm flex-row">
     <button
       mat-stroked-button

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

@@ -8,7 +8,6 @@
 .confirm-card {
   min-width: 500px;
   .mat-card-content {
-
   }
   .button-farm {
     text-align: right;
@@ -31,14 +30,19 @@
       margin-left: 10px;
     }
   }
-
 }
 
 .mat-selection-list {
   border-top: 1px solid #999999;
 }
- .mat-list-item {
+
+::ng-deep .group-name {
+  &.mat-list-item {
     border-bottom: 1px solid #dddddd;
+    .mat-list-text {
+      flex-direction: row !important;
+    }
+  }
 }
 
 .input-groupname-box {
@@ -46,8 +50,6 @@
   flex-flow: column;
   margin-bottom: 10px;
   border-radius: 4px;
-  /*border:1px solid #dddddd;
-  box-shadow: 0 1px 1px 0 rgba(60,64,67,.08), 0 1px 3px 1px rgba(60,64,67,.16);*/
 
   .btn-box {
     margin-top: 10px;

projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html

@@ -52,40 +52,64 @@
               {{ treeControl.isExpanded(node) ? 'expand_less' : 'expand_more' }}
             </mat-icon>
           </button>
-
+          <div class="group-info">
             <ng-container [ngSwitch]="node.nodeType">
-            <span *ngSwitchCase="NodeType.Profile">
+              <span *ngSwitchCase="NodeType.Profile" class="group-name">
                 <span class="title-name ellipsis">{{
                   'profile.my' | translate
                 }}</span>
-            </span>
-            <span *ngSwitchCase="NodeType.Favorit">
-              <span class="title-name ellipsis">{{
-                'group.nameFavorit' | translate
-              }}</span>
-            </span>
-            <span *ngSwitchCase="NodeType.Default">
-              <span class="title-name ellipsis">{{
-                'group.nameDefault' | translate
-              }}</span>
-            </span>
-            <span *ngSwitchCase="NodeType.MyDept">
-              <span class="title-name ellipsis">{{
-                'group.nameMyDept' | translate
-              }}</span>
-            </span>
-
-            <span *ngSwitchCase="NodeType.Buddy">
-              <span class="title-name ellipsis">{{
-                node.groupDetail.name
-              }}</span>
-            </span>
-          </ng-container>
-
                 <span class="text-accent-color number">
                   ({{ node.countOfChildren
                   }}{{ 'common.units.persons' | translate }})</span
                 >
+              </span>
+
+              <span *ngSwitchCase="NodeType.Favorit" class="group-name">
+                <span class="title-name ellipsis">{{
+                  'group.nameFavorit' | translate
+                }}</span>
+                <span class="text-accent-color number">
+                  ({{ node.countOfChildren
+                  }}{{ 'common.units.persons' | translate }})</span
+                >
+              </span>
+
+              <span *ngSwitchCase="NodeType.Default" class="group-name">
+                <span class="title-name ellipsis">{{
+                  'group.nameDefault' | translate
+                }}</span>
+                <span class="text-accent-color number">
+                  ({{ node.countOfChildren
+                  }}{{ 'common.units.persons' | translate }})</span
+                >
+              </span>
+
+              <span *ngSwitchCase="NodeType.MyDept" class="group-name">
+                <span class="title-name ellipsis">{{
+                  'group.nameMyDept' | translate
+                }}</span>
+                <span class="text-accent-color number">
+                  ({{ node.countOfChildren
+                  }}{{ 'common.units.persons' | translate }})</span
+                >
+              </span>
+
+              <span *ngSwitchCase="NodeType.Buddy" class="group-name">
+                <span class="title-name ellipsis">{{
+                  node.groupDetail.name
+                }}</span>
+                <span class="text-accent-color number">
+                  ({{ node.countOfChildren
+                  }}{{ 'common.units.persons' | translate }})</span
+                >
+              </span>
+            </ng-container>
+          </div>
+          <!-- switch안으로 이동
+          <span class="text-accent-color number">
+            ({{ node.countOfChildren
+            }}{{ 'common.units.persons' | translate }})</span
+          >-->
 
           <mat-checkbox
             *ngIf="checkable"

projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.scss

@@ -5,7 +5,6 @@
     margin-top: 0;
     margin-bottom: 0;
     list-style-type: none;
-    margin-left: 10px;
   }
   .group-tree-node-invisible {
     display: none;
@@ -17,13 +16,37 @@
   height: 40px;
 
   .tree-node-header {
+    position: relative;
     width: 100%;
-
+    .path {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      .btn-toggle {
+        margin-left: 10px;
+      }
+      .group-info {
+        display: flex;
+        flex-flow: row;
+        width: calc(100% - 80px);
+        .group-name {
+          overflow: hidden;
+          min-width: 0;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          flex: 1;
+          display: flex;
           .title-name {
-      display: inline-flex;
+            overflow: hidden;
-      flex: 1 1 auto;
+            min-width: 0;
+            text-overflow: ellipsis;
+            white-space: nowrap;
           }
         }
+      }
+    }
+  }
+
   .mat-tree-node {
     width: 100%;
     &:hover {
@@ -83,6 +106,9 @@
     margin-left: auto;
     margin-right: 16px;
   }
+  .group-name {
+    flex: 1;
+  }
 
   .group-menu {
     margin-left: auto;