inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2026-09-09 18:03:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

design changes as per the new design of Share dialog

Browse Source
This commit is contained in:
Jatin_Chugh
2023-06-07 10:45:58 +05:30
parent 4989753d1f
commit f671507997
6 changed files with 176 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cspell.json
+1
View File
@@ -105,6 +105,7 @@
"requirednumbervisibility",
"rowspan",
"selectitem",
"seperation",
"sharedlinks",
"sidenav",
"snackbar",
lib/content-services/src/lib/content-node-share/content-node-share.dialog.html
+101 -89
View File
@@ -1,107 +1,119 @@
<div class="adf-share-link__dialog-content">
<div data-automation-id="adf-share-dialog-title" class="adf-share-link__title" role="heading" aria-level="1">
{{ 'SHARE.DIALOG-TITLE' | translate }} {{ fileName }}
</div>
<div class="adf-share-link__dialog-container">
<div class="adf-share-link--row">
<div data-automation-id="adf-share-dialog-title" class="adf-share-link__title adf-share-link__label" role="heading" aria-level="1">
{{ 'SHARE.DIALOG-TITLE' | translate }} {{ fileName }}
</div>
<mat-icon mat-dialog-close class="adf-share-link__close">close</mat-icon>
</div>
<mat-dialog-content>
<p class="adf-share-link__info">{{ 'SHARE.DESCRIPTION' | translate }}</p>
<mat-dialog-content>
<!-- <p class="adf-share-link__info">{{ 'SHARE.DESCRIPTION' | translate }}</p> -->
<hr class="adf-share-link__seperation-line" />
<form [formGroup]="form">
<form [formGroup]="form">
<div class="adf-share-link--row">
<mat-icon>timer</mat-icon>
<div class="adf-share-link--row">
<mat-icon>timer</mat-icon>
<div class="adf-share-link__label adf-sharable-link">{{ 'SHARE.LINK-EXPIRY-DATE' | translate }}</div>
<div class="adf-share-link__label adf-sharable-link">{{ 'SHARE.LINK-EXPIRY-DATE' | translate }}</div>
<mat-slide-toggle
#slideToggleExpirationDate
[disabled]="!canUpdate"
<mat-slide-toggle
#slideToggleExpirationDate
[disabled]="!canUpdate"
color="primary"
data-automation-id="adf-expire-toggle"
aria-label="{{ 'SHARE.EXPIRES' | translate }}"
[checked]="time.value"
(change)="onToggleExpirationDate($event)">
</mat-slide-toggle>
</div>
<div *ngIf="isSlideToggleChecked" data-automation-id="adf-slide-toggle-checked">
<mat-form-field class="adf-full-width adf-float-label" floatLabel='always'>
<mat-label>{{ 'SHARE.EXPIRATION-LABEL' | translate }}</mat-label>
<mat-datetimepicker-toggle
#matDatetimepickerToggle="matDatetimepickerToggle"
[disabled]="time.disabled"
[for]="datetimePicker"
matSuffix>
</mat-datetimepicker-toggle>
<mat-datetimepicker
#datetimePicker
(closed)="onDatetimepickerClosed()"
[type]="type"
[timeInterval]="1">
</mat-datetimepicker>
<input class="adf-share-link__input"
#dateTimePickerInput
matInput
placeholder="{{ 'SHARE.EXPIRATION-LABEL' | translate }}"
[attr.aria-label]="'SHARE.EXPIRATION-LABEL' | translate"
[min]="minDate"
formControlName="time"
[matDatetimepicker]="datetimePicker" />
</mat-form-field>
</div>
<p class="adf-share-link__info">{{ 'SHARE.SHARE-LINK' | translate }}</p>
<div class="adf-share-link--row">
<mat-slide-toggle
color="primary"
data-automation-id="adf-expire-toggle"
aria-label="{{ 'SHARE.EXPIRES' | translate }}"
[checked]="time.value"
(change)="onToggleExpirationDate($event)">
</mat-slide-toggle>
</div>
data-automation-id="adf-share-toggle"
aria-label="{{ 'SHARE.TITLE' | translate }}"
[checked]="isFileShared"
[disabled]="!canUpdate || isDisabled"
(change)="onSlideShareChange($event)">
</mat-slide-toggle>
<mat-form-field class="adf-full-width adf-float-label" floatLabel='always'>
<mat-datetimepicker-toggle
#matDatetimepickerToggle="matDatetimepickerToggle"
[disabled]="time.disabled"
[for]="datetimePicker"
matSuffix>
</mat-datetimepicker-toggle>
<mat-datetimepicker
#datetimePicker
(closed)="onDatetimepickerClosed()"
[type]="type"
[timeInterval]="1">
</mat-datetimepicker>
<input class="adf-share-link__input"
#dateTimePickerInput
matInput
placeholder="{{ 'SHARE.EXPIRATION-LABEL' | translate }}"
[attr.aria-label]="'SHARE.EXPIRATION-LABEL' | translate"
[min]="minDate"
formControlName="time"
[matDatetimepicker]="datetimePicker" />
</mat-form-field>
<div class="adf-share-link__label adf-sharable-link">{{ 'SHARE.SHARABLE-LINK-CREATED' | translate }}</div>
<p class="adf-share-link__info">{{ 'SHARE.SHARE-LINK' | translate }}</p>
</div>
<div class="adf-share-link--row">
<mat-slide-toggle
color="primary"
data-automation-id="adf-share-toggle"
aria-label="{{ 'SHARE.TITLE' | translate }}"
[checked]="isFileShared"
[disabled]="!canUpdate || isDisabled"
(change)="onSlideShareChange($event)">
</mat-slide-toggle>
<mat-form-field class="adf-full-width adf-float-label" floatLabel='always'>
<input
#sharedLinkInput
data-automation-id="adf-share-link"
class="adf-share-link__input"
matInput
cdkFocusInitial
placeholder="{{ 'SHARE.PUBLIC-LINK' | translate }}"
[attr.aria-label]="'SHARE.PUBLIC-LINK' | translate"
formControlName="sharedUrl"
readonly="readonly">
<mat-icon
class="adf-input-action"
role="button"
matSuffix
[clipboard-notification]="'SHARE.CLIPBOARD-MESSAGE' | translate" [adf-clipboard]
[attr.aria-label]="'SHARE.COPY_BUTTON_LABEL' | translate"
[target]="sharedLinkInput"
tabindex="0">
content_copy
</mat-icon>
</mat-form-field>
<div class="adf-share-link__label adf-sharable-link">{{ 'SHARE.SHARABLE-LINK-CREATED' | translate }}</div>
<p class="adf-share-link__warn" *ngIf="linkWithExpirySettings">
{{ 'SHARE.LINK-WITH-EXPIRY-SETTINGS' | translate }}
</p>
</div>
<div class="adf-share-link--row">
<mat-icon>public</mat-icon>
<mat-form-field class="adf-full-width adf-float-label" floatLabel='always'>
<input
#sharedLinkInput
data-automation-id="adf-share-link"
class="adf-share-link__input"
matInput
cdkFocusInitial
placeholder="{{ 'SHARE.PUBLIC-LINK' | translate }}"
[attr.aria-label]="'SHARE.PUBLIC-LINK' | translate"
formControlName="sharedUrl"
readonly="readonly">
<mat-icon
class="adf-input-action"
role="button"
matSuffix
[clipboard-notification]="'SHARE.CLIPBOARD-MESSAGE' | translate" [adf-clipboard]
[attr.aria-label]="'SHARE.COPY_BUTTON_LABEL' | translate"
[target]="sharedLinkInput"
tabindex="0">
content_copy
</mat-icon>
</mat-form-field>
<p class="adf-share-link__info adf-sharable-link">{{ 'SHARE.PUBLIC-CONTENT' | translate }}</p>
</div>
<p class="adf-share-link__warn" *ngIf="linkWithExpirySettings">
{{ 'SHARE.LINK-WITH-EXPIRY-SETTINGS' | translate }}
</p>
</form>
<div class="adf-share-link--row">
<mat-icon>public</mat-icon>
<hr class="adf-share-link__seperation-line" />
</mat-dialog-content>
<p class="adf-share-link__info adf-sharable-link">{{ 'SHARE.PUBLIC-CONTENT' | translate }}</p>
</div>
</form>
</mat-dialog-content>
<div mat-dialog-actions>
<button data-automation-id="adf-share-dialog-close" mat-button color="primary" mat-dialog-close>
{{ 'SHARE.CLOSE' | translate }}
</button>
<div mat-dialog-actions>
<button data-automation-id="adf-share-dialog-close" mat-button color="primary" mat-dialog-close>
{{ 'SHARE.CLOSE' | translate }}
</button>
</div>
</div>
</div>
lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss
+36 -1
View File
@@ -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;
lib/content-services/src/lib/content-node-share/content-node-share.dialog.spec.ts
+17 -7
View File
@@ -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');
});
lib/content-services/src/lib/content-node-share/content-node-share.dialog.ts
+20 -8
View File
@@ -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);
}
});
}
lib/content-services/src/lib/i18n/en.json
+1 -1
View File
@@ -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",