From 7e467d6f6ea26cbd7d255e8a0c6d070d56fdd1c7 Mon Sep 17 00:00:00 2001
From: jacekpluta <73617938+jacekpluta@users.noreply.github.com>
Date: Mon, 15 Apr 2024 12:19:23 +0200
Subject: [PATCH] [ACS-7535][ACS-7537][ACS-7536][ACA] Move/Copy dialogs, Share
 dialog, Aspects dialog (#9553)

---
 .../aspect-list-dialog.component.scss         |  8 ++--
 .../aspect-list/aspect-list.component.scss    |  6 ++-
 ...content-node-selector-panel.component.html |  7 ++-
 ...content-node-selector-panel.component.scss | 35 +++++++++++++--
 .../content-node-selector.component.scss      | 45 ++++++++++++++++++-
 .../content-node-share.dialog.html            |  4 +-
 .../content-node-share.dialog.scss            | 15 ++++++-
 .../content-node-share.dialog.spec.ts         |  2 +-
 .../sites-dropdown.component.html             |  2 +-
 lib/core/src/lib/styles/_mat-selectors.scss   |  7 +++
 10 files changed, 116 insertions(+), 15 deletions(-)

diff --git a/lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.scss b/lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.scss
index 80fe1d91cb..d5c4fe65c2 100644
--- a/lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.scss
+++ b/lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.scss
@@ -2,7 +2,10 @@
 
 adf-aspect-list-dialog {
     display: block;
-    padding: 24px 24px 8px;
+
+    #{$mat-expansion-panel-body} {
+        margin-top: -2px;
+    }
 }
 
 .adf {
@@ -20,7 +23,7 @@ adf-aspect-list-dialog {
     &-aspect-list-dialog-information {
         display: flex;
         justify-content: space-between;
-        padding-top: 10px;
+        padding-bottom: 4px;
         padding-left: 4px;
         padding-right: 4px;
         font-size: small;
@@ -42,7 +45,6 @@ adf-aspect-list-dialog {
     }
 
     &-aspect-dialog-content {
-        padding-top: 3px;
         margin-bottom: 8px;
 
         .adf-aspect-property-table {
diff --git a/lib/content-services/src/lib/aspect-list/aspect-list.component.scss b/lib/content-services/src/lib/aspect-list/aspect-list.component.scss
index 5e003a892a..6779ef85e9 100644
--- a/lib/content-services/src/lib/aspect-list/aspect-list.component.scss
+++ b/lib/content-services/src/lib/aspect-list/aspect-list.component.scss
@@ -46,7 +46,7 @@ $dialog-list-height: calc(65vh - ($dialog-title-height + $dialog-information-hei
 
             &-header {
                 font-size: smaller;
-                padding-left: 16px;
+                padding-left: 12px;
             }
 
             &-header-title {
@@ -77,14 +77,18 @@ $dialog-list-height: calc(65vh - ($dialog-title-height + $dialog-information-hei
         .adf-aspect-property-table-column {
             &-name {
                 width: 15%;
+                padding-left: 24px;
+                padding-right: 0;
             }
 
             &-title {
                 width: 65%;
+                padding: 0;
             }
 
             &-data-type {
                 width: 20%;
+                padding-right: 24px;
                 padding-left: 10px;
             }
         }
diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.html b/lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.html
index a6e56b5177..575cde7b35 100644
--- a/lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.html
+++ b/lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.html
@@ -1,10 +1,13 @@
 <div class="adf-content-node-selector-content">
-    <mat-form-field floatPlaceholder="never" class="adf-content-node-selector-content-input" *ngIf="showSearch">
+    <mat-form-field floatPlaceholder="never"
+                    class="adf-content-node-selector-content-input"
+                    subscriptSizing="dynamic"
+                    *ngIf="showSearch">
+        <mat-label>{{'NODE_SELECTOR.SEARCH' | translate}}</mat-label>
         <input matInput
             id="searchInput"
             [formControl]="searchInput"
             type="text"
-            placeholder="{{'NODE_SELECTOR.SEARCH' | translate}}"
             [value]="searchTerm"
             adf-auto-focus
             data-automation-id="content-node-selector-search-input">
diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.scss b/lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.scss
index ecd7b49c6c..79c2961b00 100644
--- a/lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.scss
+++ b/lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.scss
@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 /* stylelint-disable no-descending-specificity */
 $content-node-selector-thumbnail-width: 35px !default;
 $content-node-selector-thumbnail-max-width: 40px !default;
@@ -13,6 +15,13 @@ h2.adf-search-results-label {
     color: var(--adf-theme-foreground-text-color-087);
 }
 
+#{$mdc-dialog} {
+    #{$mat-dialog-surface}:is(div) {
+        padding-bottom: 0;
+    }
+}
+
+
 .adf-content-node-selector-panel {
     .adf-toolbar .adf-toolbar-container.adf-toolbar-container-row {
         max-height: 48px;
@@ -28,6 +37,7 @@ h2.adf-search-results-label {
     }
 
     &-document-list-container {
+        margin-top: 16px;
         width: 100%;
     }
 
@@ -50,9 +60,22 @@ h2.adf-search-results-label {
         .adf-site-dropdown-container {
             display: block;
             margin-bottom: 15px;
+
+            #{$mat-form-field-label} {
+                padding-top: 16px;
+            }
+
+            #{$mat-floating-label-above} {
+                padding-top: 0;
+            }
         }
     }
 
+    .adf-sites-dropdown-form-field {
+        margin-top: 4px;
+        margin-bottom: 16px;
+    }
+
     .adf-site-dropdown-list-element {
         width: 100%;
         margin-bottom: 0;
@@ -84,6 +107,7 @@ h2.adf-search-results-label {
         }
     }
 
+    &-content-list,
     &-list {
         height: 40vh;
         overflow: auto;
@@ -147,8 +171,7 @@ h2.adf-search-results-label {
             .adf-datatable-body .adf-datatable-row {
                 min-height: 40px;
 
-                @media screen and (-ms-high-contrast: active),
-                    screen and (-ms-high-contrast: none) {
+                @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
                     padding-top: 15px;
                 }
 
@@ -166,11 +189,17 @@ h2.adf-search-results-label {
             }
         }
 
+        .adf-datatable-list {
+            .adf-name-location-cell-location {
+                display: none;
+            }
+        }
+
         &-searchLayout {
             .adf-datatable-list .adf-datatable-body .adf-datatable-row {
                 min-height: 65px;
 
-                .adf-datatable-cell {
+                .adf-datatable-cell-container {
                     .adf-name-location-cell-location {
                         padding: 0 10px;
                         display: block;
diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss b/lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss
index 3f469c4ac2..44c1e755f2 100644
--- a/lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss
+++ b/lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss
@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 adf-content-node-selector {
     .adf-upload-dialog {
         box-shadow: none;
@@ -40,7 +42,48 @@ adf-content-node-selector {
 }
 
 .adf-content-node-selector-dialog {
+    #{$mat-form-field} {
+        width: 100%;
+
+        #{$mat-select-arrow-wrapper} {
+            transform: translateY(2px);
+            padding-right: 4px;
+        }
+
+        #{$mat-form-field-infix} {
+            border-top: 0.85em solid transparent;
+            padding-bottom: 6px;
+            padding-top: 20px;
+        }
+
+        #{$mat-floating-label} {
+            padding-top: 8px;
+        }
+    }
+
+    .adf-content-node-selector-content-input-icon {
+        font-size: 21px;
+        padding: 18px 0 0 0;
+        margin-right: -4px;
+    }
+
+    .adf-dropdown-breadcrumb-icon {
+        color: var(--adf-theme-foreground-base-color-045);
+    }
+
+    #{$mat-dialog-title} {
+        margin-bottom: 0;
+        padding: 0;
+
+        &::before {
+            display: none
+        }
+    }
+
     .adf-content-node-selector-dialog-title {
+        padding-bottom: 4px;
+        padding-left: 0;
+        padding-right: 0;
         font-size: var(--theme-title-font-size);
         font-weight: 600;
         font-style: normal;
@@ -57,7 +100,7 @@ adf-content-node-selector {
 
     .adf-content-node-selector-dialog-actions {
         padding: 8px;
-        height: 61px;
+        height: 77px;
         background-color: var(--theme-background-color);
         display: flex;
         flex-direction: row;
diff --git a/lib/content-services/src/lib/content-node-share/content-node-share.dialog.html b/lib/content-services/src/lib/content-node-share/content-node-share.dialog.html
index 7b7850882f..35775a2787 100644
--- a/lib/content-services/src/lib/content-node-share/content-node-share.dialog.html
+++ b/lib/content-services/src/lib/content-node-share/content-node-share.dialog.html
@@ -31,7 +31,7 @@
                     [style.display]="isExpiryDateToggleChecked ? 'block' : 'none'"
                     data-automation-id="adf-slide-toggle-checked"
                     class="adf-share-link__date-time-container">
-                    <mat-form-field class="adf-full-width" subscriptSizing="dynamic" data-automation-id="adf-content-share-expiration-field" floatLabel="always">
+                    <mat-form-field class="adf-full-width" subscriptSizing="dynamic" data-automation-id="adf-content-share-expiration-field">
                         <mat-label>{{ 'SHARE.EXPIRATION-PLACEHOLDER' | translate }}</mat-label>
                         <mat-datepicker-toggle
                             [disabled]="time.disabled"
@@ -89,7 +89,7 @@
                         formControlName="sharedUrl"
                         readonly="readonly">
                     <mat-icon
-                        class="adf-input-action adf-share-link__icon"
+                        class="adf-input-action adf-share-link__icon adf-share-link__copy-icon"
                         role="button"
                         matSuffix
                         [clipboard-notification]="'SHARE.CLIPBOARD-MESSAGE' | translate"
diff --git a/lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss b/lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss
index c43665884d..edc091d642 100644
--- a/lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss
+++ b/lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss
@@ -73,7 +73,7 @@
         }
 
         &--header {
-            padding: 16px 24px 0;
+            padding: 16px 24px 0 24px;
         }
 
         &--dialog-content {
@@ -98,6 +98,7 @@
         &__icon {
             color: var(--adf-theme-foreground-icon-color-054);
             padding-bottom: 0;
+            padding-right: 0;
         }
 
         &__para {
@@ -110,9 +111,20 @@
             font-size: var(--theme-subheading-2-font-size);
         }
 
+        &__copy-icon {
+            padding-top: 18px;
+            font-size: 22px;
+        }
+
         &__calender-icon {
             top: 12px;
             position: relative;
+            right: -6px;
+
+            svg {
+                height: 18px;
+                width: 18px;
+            }
         }
 
         &__date-time-container {
@@ -131,6 +143,7 @@
     .adf-full-width {
         width: 100%;
         border-radius: 6px;
+        margin-top: -6px;
     }
 
     .adf-sharable-link {
diff --git a/lib/content-services/src/lib/content-node-share/content-node-share.dialog.spec.ts b/lib/content-services/src/lib/content-node-share/content-node-share.dialog.spec.ts
index 8cd911f211..e534164b33 100644
--- a/lib/content-services/src/lib/content-node-share/content-node-share.dialog.spec.ts
+++ b/lib/content-services/src/lib/content-node-share/content-node-share.dialog.spec.ts
@@ -297,7 +297,7 @@ describe('ShareDialogComponent', () => {
 
         fixture.detectChanges();
         expect(fixture.debugElement.query(By.css('[data-automation-id="adf-content-share-expiration-field"]')).componentInstance.floatLabel).toBe(
-            'always'
+            'auto'
         );
     });
 
diff --git a/lib/content-services/src/lib/site-dropdown/sites-dropdown.component.html b/lib/content-services/src/lib/site-dropdown/sites-dropdown.component.html
index bb5647dbe6..de5a9f1b71 100644
--- a/lib/content-services/src/lib/site-dropdown/sites-dropdown.component.html
+++ b/lib/content-services/src/lib/site-dropdown/sites-dropdown.component.html
@@ -1,5 +1,5 @@
 <div id="site-dropdown-container" class="adf-site-dropdown-container">
-    <mat-form-field class="adf-sites-dropdown-form-field">
+    <mat-form-field class="adf-sites-dropdown-form-field" subscriptSizing="dynamic">
         <mat-label>{{ 'NODE_SELECTOR.LOCATION' | translate }}</mat-label>
         <mat-select
             adf-infinite-select-scroll
diff --git a/lib/core/src/lib/styles/_mat-selectors.scss b/lib/core/src/lib/styles/_mat-selectors.scss
index be0ca8db47..a65f02777f 100644
--- a/lib/core/src/lib/styles/_mat-selectors.scss
+++ b/lib/core/src/lib/styles/_mat-selectors.scss
@@ -93,4 +93,11 @@ $mat-toolbar: '.mat-toolbar';
 $mat-slide-toggle: '.mat-mdc-slide-toggle';
 $mat-checkbox-background: '.mdc-checkbox__background';
 $mat-dialog-content: '.mdc-dialog__content';
+$mat-floating-label: '.mdc-floating-label';
+$mat-floating-label-above: '.mdc-floating-label--float-above';
 $mat-form-field-infix: '.mat-mdc-form-field-infix';
+$mat-select-arrow-wrapper: '.mat-mdc-select-arrow-wrapper';
+$mat-dialog-title: '.mdc-dialog__title';
+$mat-expansion-panel-body: '.mat-expansion-panel-body';
+$mat-dialog-surface: '.mat-mdc-dialog-surface';
+$mdc-dialog: '.mdc-dialog'