From f671507997531602d9ad4089d388f44a6f04d9d8 Mon Sep 17 00:00:00 2001 From: Jatin_Chugh Date: Wed, 3 May 2023 21:14:39 +0530 Subject: [PATCH] design changes as per the new design of Share dialog --- cspell.json | 1 + .../content-node-share.dialog.html | 190 ++++++++++-------- .../content-node-share.dialog.scss | 37 +++- .../content-node-share.dialog.spec.ts | 24 ++- .../content-node-share.dialog.ts | 28 ++- lib/content-services/src/lib/i18n/en.json | 2 +- 6 files changed, 176 insertions(+), 106 deletions(-) diff --git a/cspell.json b/cspell.json index f86d5fc0dd..ae003ba4bb 100644 --- a/cspell.json +++ b/cspell.json @@ -105,6 +105,7 @@ "requirednumbervisibility", "rowspan", "selectitem", + "seperation", "sharedlinks", "sidenav", "snackbar", 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 a76143cf46..c247749087 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,107 +1,119 @@
-
- {{ 'SHARE.DIALOG-TITLE' | translate }} {{ fileName }} -
+
+
+
+ {{ 'SHARE.DIALOG-TITLE' | translate }} {{ fileName }} +
+ close +
- -

{{ 'SHARE.DESCRIPTION' | translate }}

+ + +
-
+ -
- timer +
+ timer -
{{ 'SHARE.LINK-EXPIRY-DATE' | translate }}
+
{{ 'SHARE.LINK-EXPIRY-DATE' | translate }}
- + +
+ +
+ + {{ 'SHARE.EXPIRATION-LABEL' | translate }} + + + + + + +
+ + +

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

+ +
+ - -
+ data-automation-id="adf-share-toggle" + aria-label="{{ 'SHARE.TITLE' | translate }}" + [checked]="isFileShared" + [disabled]="!canUpdate || isDisabled" + (change)="onSlideShareChange($event)"> + - - - - - - - +
{{ 'SHARE.SHARABLE-LINK-CREATED' | translate }}
-

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

+
-
- - + + + + content_copy + + -
{{ 'SHARE.SHARABLE-LINK-CREATED' | translate }}
+

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

-
+
+ public - - - - content_copy - - +

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

+
-

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

+
-
- public +
+ -

{{ '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 3a82b935cf..0d0a20292f 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 @@ -7,6 +7,14 @@ &__dialog-content { display: flex; flex-direction: column; + padding: 24px; + background-color: var(--theme-grey-background-color); + } + + &__dialog-container { + background-color: var(--theme-card-background-color); + border-radius: 16px; + padding: 24px; } &__label, @@ -41,12 +49,21 @@ /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */ flex-wrap: wrap; align-items: center; + padding-bottom: 22px; } &__input { color: var(--adf-theme-foreground-text-color-087); } + &__seperation-line { + border: 1px solid var(--theme-grey-background-color); + margin: 0px -24px 12px; + } + + &__close { + cursor: pointer; + } } .adf-input-action { @@ -55,6 +72,11 @@ .adf-full-width { width: 100%; + background-color: var(--theme-grey-background-color); + border-radius: 8px; + padding-right: 6px; + padding-left: 6px; + padding-top: 6px; } .adf-sharable-link { @@ -69,7 +91,8 @@ justify-content: flex-end; & > button { - text-transform: uppercase; + color: var(--adf-theme-foreground-base-color); + background-color: var(--theme-grey-background-color); } } @@ -77,6 +100,18 @@ align-items: center; } + .mat-dialog-container { + padding: 0px; + } + + .mat-form-field-appearance-legacy .mat-form-field-underline { + display: none; + } + + .mat-form-field-appearance-legacy .mat-form-field-wrapper { + padding-bottom: 6px; + } + @media screen and (max-width: 380px) { .mat-dialog-container { padding: 0 15px; 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 ac32b84d02..3b6c49f7ee 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 @@ -234,13 +234,19 @@ describe('ShareDialogComponent', () => { }; fixture.detectChanges(); + const slideToggleChecked: HTMLDivElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-slide-toggle-checked"]'); + expect(slideToggleChecked).toBe(null); expect(fixture.nativeElement.querySelector('[data-automation-id="adf-share-toggle"]').classList).toContain('mat-disabled'); - expect(fixture.nativeElement.querySelector('input[formcontrolname="time"]').disabled).toBe(true); - expect(fixture.nativeElement.querySelector('mat-datetimepicker-toggle button').disabled).toBe(true); + // expect(fixture.nativeElement.querySelector('input[formcontrolname="time"]').disabled).toBe(true); + // expect(fixture.nativeElement.querySelector('mat-datetimepicker-toggle button').disabled).toBe(true); }); - it('should reset expiration date when toggle is unchecked', async () => { + it('should delete the current link generated with expiry date and generate a new link without expiry date when toggle is unchecked', async () => { + spyOn(sharedLinksApiService, 'createSharedLinks').and.returnValue(of()); + spyOn(sharedLinksApiService, 'deleteSharedLink').and.returnValue(of({})); + spyOn(renditionService, 'getNodeRendition'); + node.entry.properties['qshare:sharedId'] = 'sharedId'; node.entry.properties['qshare:sharedId'] = '2017-04-15T18:31:37+00:00'; node.entry.allowableOperations = ['update']; @@ -249,6 +255,7 @@ describe('ShareDialogComponent', () => { baseShareUrl: 'some-url/' }; + fixture.detectChanges(); component.form.controls['time'].setValue(moment()); @@ -263,9 +270,9 @@ describe('ShareDialogComponent', () => { await fixture.whenStable(); - expect( - fixture.nativeElement.querySelector('input[formcontrolname="time"]').value - ).toBe(''); + expect(sharedLinksApiService.deleteSharedLink).toHaveBeenCalled(); + expect(sharedLinksApiService.createSharedLinks).toHaveBeenCalledWith('nodeId'); + }); it('should not allow expiration date action when node has no update permission', async () => { @@ -280,7 +287,10 @@ describe('ShareDialogComponent', () => { fixture.detectChanges(); await fixture.whenStable(); - expect(fixture.nativeElement.querySelector('input[formcontrolname="time"]').disabled).toBe(true); + const slideToggleChecked: HTMLDivElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-slide-toggle-checked"]'); + + expect(slideToggleChecked).toBe(null); + // expect(fixture.nativeElement.querySelector('input[formcontrolname="time"]').disabled).toBe(true); expect(fixture.nativeElement.querySelector('.mat-slide-toggle[data-automation-id="adf-expire-toggle"]') .classList).toContain('mat-disabled'); }); 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 e0e065a7f0..c9eb04522f 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,6 +70,7 @@ export class ShareDialogComponent implements OnInit, OnDestroy { type: DatePickerType = 'datetime'; maxDebounceTime = 500; expiryDate: string; + isSlideToggleChecked: boolean; @ViewChild('slideToggleExpirationDate', {static: true}) slideToggleExpirationDate; @@ -106,11 +107,14 @@ export class ShareDialogComponent implements OnInit, OnDestroy { this.isFileShared = true; const expiryDate = this.updateForm(); - if (expiryDate) { + if (expiryDate !== null && expiryDate !== undefined) { this.time.enable(); this.linkWithExpirySettings = true; + this.isSlideToggleChecked = true; } else { this.time.disable(); + this.isSlideToggleChecked = false; + this.linkWithExpirySettings = false; } } } @@ -157,10 +161,12 @@ export class ShareDialogComponent implements OnInit, OnDestroy { onToggleExpirationDate(slideToggle: MatSlideToggleChange) { if (slideToggle.checked) { - this.time.enable(); + this.time.enable(); + this.isSlideToggleChecked = true; } else { - this.time.disable(); - this.time.setValue(null); + this.time.disable(); + this.time.setValue(null); + this.deleteSharedLink(this.sharedId, true); } } @@ -226,7 +232,7 @@ export class ShareDialogComponent implements OnInit, OnDestroy { ); } - deleteSharedLink(sharedId: string) { + deleteSharedLink(sharedId: string, dialogOpenFlag?: boolean) { this.isDisabled = true; this.sharedLinksApiService @@ -241,7 +247,13 @@ export class ShareDialogComponent implements OnInit, OnDestroy { this.data.node.entry.properties['qshare:sharedId'] = null; this.data.node.entry.properties['qshare:expiryDate'] = null; } - this.dialogRef.close(false); + if (dialogOpenFlag) { + this.createSharedLinks(this.data.node.entry.id); + this.isSlideToggleChecked = false; + this.linkWithExpirySettings = false; + } else { + this.dialogRef.close(false); + } } } ); @@ -289,7 +301,7 @@ export class ShareDialogComponent implements OnInit, OnDestroy { : date.utc().format('YYYY-MM-DDTHH:mm:ss.SSSZ')) : null; - if (expiryDate !== null && this.sharedId) { + if (this.sharedId && expiryDate) { this.isDisabled = true; this.sharedLinksApiService @@ -301,8 +313,8 @@ export class ShareDialogComponent implements OnInit, OnDestroy { this.handleError(response); } else { this.sharedLinkWithExpirySettings(expiryDate); - this.updateEntryExpiryDate(date); this.linkWithExpirySettings = true; + this.updateEntryExpiryDate(date); } }); } diff --git a/lib/content-services/src/lib/i18n/en.json b/lib/content-services/src/lib/i18n/en.json index fb6e1daa81..dbfe80acaa 100644 --- a/lib/content-services/src/lib/i18n/en.json +++ b/lib/content-services/src/lib/i18n/en.json @@ -462,7 +462,7 @@ "LINK-WITH-EXPIRY-SETTINGS": "New link has been generated with expiry settings", "EXPIRES": "Expires on", "LINK-EXPIRY-DATE": "Link Expiry Date", - "EXPIRATION-LABEL" : "Expiration Date", + "EXPIRATION-LABEL" : "MM/DD/YYYY", "CLIPBOARD-MESSAGE": "Link copied to the clipboard", "CLOSE": "Close", "COPY_BUTTON_LABEL": "Copy link",