From 705a52a567fec088bb3333a434349e78820ba341 Mon Sep 17 00:00:00 2001 From: Jatin_Chugh Date: Fri, 5 May 2023 16:41:26 +0530 Subject: [PATCH] look and feel changes for share dialog as per Shane comments --- .../content-node-share.dialog.html | 26 +++++---- .../content-node-share.dialog.scss | 58 ++++++++++++++----- .../content-node-share.dialog.spec.ts | 1 - .../content-node-share.dialog.ts | 10 ++-- 4 files changed, 64 insertions(+), 31 deletions(-) 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 ee8dc7bcaa..c98dde8259 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 @@ -1,19 +1,20 @@
-
+
{{ 'SHARE.DIALOG-TITLE' | translate }} {{ fileName }}
- close + close
-
+
- timer + timer
{{ 'SHARE.LINK-EXPIRY-DATE' | translate }}
@@ -28,14 +29,16 @@
-
+
{{ 'SHARE.EXPIRATION-PLACEHOLDER' | translate }} + matSuffix + class="adf-share-link__icon adf-share-link__calender-icon"> -

{{ 'SHARE.SHARE-LINK' | translate }}

+

{{ 'SHARE.SHARE-LINK' | translate }}

-

+

{{ 'SHARE.LINK-WITH-EXPIRY-SETTINGS' | translate }}

- public + public -

{{ 'SHARE.PUBLIC-CONTENT' | translate }}

+

+ {{ 'SHARE.PUBLIC-CONTENT' | 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 0d0a20292f..05ec406de2 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 @@ -8,13 +8,13 @@ display: flex; flex-direction: column; padding: 24px; - background-color: var(--theme-grey-background-color); + background-color: var(--theme-grey-text-background-color); } &__dialog-container { background-color: var(--theme-card-background-color); border-radius: 16px; - padding: 24px; + padding: 16px 24px; } &__label, @@ -25,7 +25,7 @@ font-weight: normal; font-style: normal; font-stretch: normal; - font-size: var(--theme-subheading-2-font-size); + font-size: var(--theme-body-1-font-size); color: var(--adf-theme-foreground-text-color-087); } @@ -33,7 +33,11 @@ flex: 1 1 auto; } - &__info { + &__form { + padding-top: 8px; + } + + &__public-content { color: var(--adf-theme-foreground-text-color-054); font-size: var(--theme-caption-font-size); } @@ -49,7 +53,7 @@ /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */ flex-wrap: wrap; align-items: center; - padding-bottom: 22px; + margin: 8px 0; } &__input { @@ -58,11 +62,34 @@ &__seperation-line { border: 1px solid var(--theme-grey-background-color); - margin: 0px -24px 12px; + margin: 8px -24px 8px; } &__close { cursor: pointer; + margin-left: 12px; + } + + &__icon { + color: var(--adf-theme-foreground-icon-color-054); + } + + &__para { + margin-top: 8px; + margin-bottom: 8px + } + + &__heading { + font-weight: 700; + font-size: var(--theme-subheading-2-font-size); + } + + &__calender-icon { + font-size: 18px; + } + + &__date-time-container { + padding-bottom: 8px; } } @@ -72,15 +99,13 @@ .adf-full-width { width: 100%; - background-color: var(--theme-grey-background-color); - border-radius: 8px; - padding-right: 6px; - padding-left: 6px; - padding-top: 6px; + background-color: var(--theme-grey-text-background-color); + border-radius: 6px; + padding-top: 8px; } .adf-sharable-link { - padding-left: 10px; + margin-left: 8px; } .mat-form-field-infix { @@ -89,10 +114,13 @@ .mat-dialog-actions { justify-content: flex-end; + padding: 0; + margin: 8px 0 0 0; & > button { color: var(--adf-theme-foreground-base-color); - background-color: var(--theme-grey-background-color); + background-color: var(--theme-grey-text-background-color); + margin-right: 12px; } } @@ -109,7 +137,9 @@ } .mat-form-field-appearance-legacy .mat-form-field-wrapper { - padding-bottom: 6px; + padding-bottom: 8px; + margin-right: 8px; + margin-left: 8px; } @media screen and (max-width: 380px) { 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 8ff6a8aab5..42e8c53eda 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 @@ -236,7 +236,6 @@ describe('ShareDialogComponent', () => { fixture.detectChanges(); expect(fixture.nativeElement.querySelector('[data-automation-id="adf-share-toggle"]').classList).toContain('mat-disabled'); - expect(fixture.nativeElement.querySelector('[data-automation-id="adf-slide-toggle-checked"]')).toBe(null); }); it('should delete the current link generated with expiry date and generate a new link without expiry date when toggle is unchecked', async () => { diff --git a/lib/content-services/src/lib/content-node-share/content-node-share.dialog.ts b/lib/content-services/src/lib/content-node-share/content-node-share.dialog.ts index c9eb04522f..7688855150 100644 --- a/lib/content-services/src/lib/content-node-share/content-node-share.dialog.ts +++ b/lib/content-services/src/lib/content-node-share/content-node-share.dialog.ts @@ -70,7 +70,7 @@ export class ShareDialogComponent implements OnInit, OnDestroy { type: DatePickerType = 'datetime'; maxDebounceTime = 500; expiryDate: string; - isSlideToggleChecked: boolean; + isExpiryDateToggleChecked: boolean; @ViewChild('slideToggleExpirationDate', {static: true}) slideToggleExpirationDate; @@ -110,10 +110,10 @@ export class ShareDialogComponent implements OnInit, OnDestroy { if (expiryDate !== null && expiryDate !== undefined) { this.time.enable(); this.linkWithExpirySettings = true; - this.isSlideToggleChecked = true; + this.isExpiryDateToggleChecked = true; } else { this.time.disable(); - this.isSlideToggleChecked = false; + this.isExpiryDateToggleChecked = false; this.linkWithExpirySettings = false; } } @@ -162,7 +162,7 @@ export class ShareDialogComponent implements OnInit, OnDestroy { onToggleExpirationDate(slideToggle: MatSlideToggleChange) { if (slideToggle.checked) { this.time.enable(); - this.isSlideToggleChecked = true; + this.isExpiryDateToggleChecked = true; } else { this.time.disable(); this.time.setValue(null); @@ -249,7 +249,7 @@ export class ShareDialogComponent implements OnInit, OnDestroy { } if (dialogOpenFlag) { this.createSharedLinks(this.data.node.entry.id); - this.isSlideToggleChecked = false; + this.isExpiryDateToggleChecked = false; this.linkWithExpirySettings = false; } else { this.dialogRef.close(false);