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

look and feel changes for share dialog as per Shane comments

Browse Source
This commit is contained in:
Jatin_Chugh
2023-06-07 10:45:59 +05:30
parent a0df090bcc
commit 705a52a567
4 changed files with 64 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/content-services/src/lib/content-node-share/content-node-share.dialog.html
+15 -11
View File
@@ -1,19 +1,20 @@
<div class="adf-share-link__dialog-content"> <div class="adf-share-link__dialog-content">
<div class="adf-share-link__dialog-container"> <div class="adf-share-link__dialog-container">
<div class="adf-share-link--row"> <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"> <div data-automation-id="adf-share-dialog-title" class="adf-share-link__title adf-share-link__label adf-share-link__heading"
role="heading" aria-level="1">
{{ 'SHARE.DIALOG-TITLE' | translate }} {{ fileName }} {{ 'SHARE.DIALOG-TITLE' | translate }} {{ fileName }}
</div> </div>
<mat-icon mat-dialog-close class="adf-share-link__close">close</mat-icon> <mat-icon mat-dialog-close class="adf-share-link__close adf-share-link__icon">close</mat-icon>
</div> </div>
<mat-dialog-content> <mat-dialog-content>
<hr class="adf-share-link__seperation-line" /> <hr class="adf-share-link__seperation-line" />
<form [formGroup]="form"> <form [formGroup]="form" class="adf-share-link__form">
<div class="adf-share-link--row"> <div class="adf-share-link--row">
<mat-icon>timer</mat-icon> <mat-icon class="adf-share-link__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>
@@ -28,14 +29,16 @@
</mat-slide-toggle> </mat-slide-toggle>
</div> </div>
<div *ngIf="isSlideToggleChecked" data-automation-id="adf-slide-toggle-checked"> <div *ngIf="isExpiryDateToggleChecked" data-automation-id="adf-slide-toggle-checked"
class="adf-share-link__date-time-container">
<mat-form-field class="adf-full-width adf-float-label" floatLabel='always'> <mat-form-field class="adf-full-width adf-float-label" floatLabel='always'>
<mat-label>{{ 'SHARE.EXPIRATION-PLACEHOLDER' | translate }}</mat-label> <mat-label>{{ 'SHARE.EXPIRATION-PLACEHOLDER' | translate }}</mat-label>
<mat-datetimepicker-toggle <mat-datetimepicker-toggle
#matDatetimepickerToggle="matDatetimepickerToggle" #matDatetimepickerToggle="matDatetimepickerToggle"
[disabled]="time.disabled" [disabled]="time.disabled"
[for]="datetimePicker" [for]="datetimePicker"
matSuffix> matSuffix
class="adf-share-link__icon adf-share-link__calender-icon">
</mat-datetimepicker-toggle> </mat-datetimepicker-toggle>
<mat-datetimepicker <mat-datetimepicker
#datetimePicker #datetimePicker
@@ -55,7 +58,7 @@
</div> </div>
<p class="adf-share-link__info">{{ 'SHARE.SHARE-LINK' | translate }}</p> <p class="adf-share-link__info adf-share-link__para">{{ 'SHARE.SHARE-LINK' | translate }}</p>
<div class="adf-share-link--row"> <div class="adf-share-link--row">
<mat-slide-toggle <mat-slide-toggle
@@ -83,7 +86,7 @@
formControlName="sharedUrl" formControlName="sharedUrl"
readonly="readonly"> readonly="readonly">
<mat-icon <mat-icon
class="adf-input-action" class="adf-input-action adf-share-link__icon"
role="button" role="button"
matSuffix matSuffix
[clipboard-notification]="'SHARE.CLIPBOARD-MESSAGE' | translate" [adf-clipboard] [clipboard-notification]="'SHARE.CLIPBOARD-MESSAGE' | translate" [adf-clipboard]
@@ -94,14 +97,15 @@
</mat-icon> </mat-icon>
</mat-form-field> </mat-form-field>
<p class="adf-share-link__warn" *ngIf="linkWithExpirySettings"> <p class="adf-share-link__warn adf-share-link__para" *ngIf="linkWithExpirySettings">
{{ 'SHARE.LINK-WITH-EXPIRY-SETTINGS' | translate }} {{ 'SHARE.LINK-WITH-EXPIRY-SETTINGS' | translate }}
</p> </p>
<div class="adf-share-link--row"> <div class="adf-share-link--row">
<mat-icon>public</mat-icon> <mat-icon class="adf-share-link__icon">public</mat-icon>
<p class="adf-share-link__info adf-sharable-link">{{ 'SHARE.PUBLIC-CONTENT' | translate }}</p> <p class="adf-share-link__info adf-sharable-link adf-share-link__public-content adf-share-link__para">
{{ 'SHARE.PUBLIC-CONTENT' | translate }}</p>
</div> </div>
</form> </form>
lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss
+44 -14
View File
@@ -8,13 +8,13 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 24px; padding: 24px;
background-color: var(--theme-grey-background-color); background-color: var(--theme-grey-text-background-color);
} }
&__dialog-container { &__dialog-container {
background-color: var(--theme-card-background-color); background-color: var(--theme-card-background-color);
border-radius: 16px; border-radius: 16px;
padding: 24px; padding: 16px 24px;
} }
&__label, &__label,
@@ -25,7 +25,7 @@
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-stretch: 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); color: var(--adf-theme-foreground-text-color-087);
} }
@@ -33,7 +33,11 @@
flex: 1 1 auto; flex: 1 1 auto;
} }
&__info { &__form {
padding-top: 8px;
}
&__public-content {
color: var(--adf-theme-foreground-text-color-054); color: var(--adf-theme-foreground-text-color-054);
font-size: var(--theme-caption-font-size); font-size: var(--theme-caption-font-size);
} }
@@ -49,7 +53,7 @@
/* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */ /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
padding-bottom: 22px; margin: 8px 0;
} }
&__input { &__input {
@@ -58,11 +62,34 @@
&__seperation-line { &__seperation-line {
border: 1px solid var(--theme-grey-background-color); border: 1px solid var(--theme-grey-background-color);
margin: 0px -24px 12px; margin: 8px -24px 8px;
} }
&__close { &__close {
cursor: pointer; 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 { .adf-full-width {
width: 100%; width: 100%;
background-color: var(--theme-grey-background-color); background-color: var(--theme-grey-text-background-color);
border-radius: 8px; border-radius: 6px;
padding-right: 6px; padding-top: 8px;
padding-left: 6px;
padding-top: 6px;
} }
.adf-sharable-link { .adf-sharable-link {
padding-left: 10px; margin-left: 8px;
} }
.mat-form-field-infix { .mat-form-field-infix {
@@ -89,10 +114,13 @@
.mat-dialog-actions { .mat-dialog-actions {
justify-content: flex-end; justify-content: flex-end;
padding: 0;
margin: 8px 0 0 0;
& > button { & > button {
color: var(--adf-theme-foreground-base-color); 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 { .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) { @media screen and (max-width: 380px) {
lib/content-services/src/lib/content-node-share/content-node-share.dialog.spec.ts
-1
View File
@@ -236,7 +236,6 @@ describe('ShareDialogComponent', () => {
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.nativeElement.querySelector('[data-automation-id="adf-share-toggle"]').classList).toContain('mat-disabled'); 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 () => { it('should delete the current link generated with expiry date and generate a new link without expiry date when toggle is unchecked', async () => {
lib/content-services/src/lib/content-node-share/content-node-share.dialog.ts
+5 -5
View File
@@ -70,7 +70,7 @@ export class ShareDialogComponent implements OnInit, OnDestroy {
type: DatePickerType = 'datetime'; type: DatePickerType = 'datetime';
maxDebounceTime = 500; maxDebounceTime = 500;
expiryDate: string; expiryDate: string;
isSlideToggleChecked: boolean; isExpiryDateToggleChecked: boolean;
@ViewChild('slideToggleExpirationDate', {static: true}) @ViewChild('slideToggleExpirationDate', {static: true})
slideToggleExpirationDate; slideToggleExpirationDate;
@@ -110,10 +110,10 @@ export class ShareDialogComponent implements OnInit, OnDestroy {
if (expiryDate !== null && expiryDate !== undefined) { if (expiryDate !== null && expiryDate !== undefined) {
this.time.enable(); this.time.enable();
this.linkWithExpirySettings = true; this.linkWithExpirySettings = true;
this.isSlideToggleChecked = true; this.isExpiryDateToggleChecked = true;
} else { } else {
this.time.disable(); this.time.disable();
this.isSlideToggleChecked = false; this.isExpiryDateToggleChecked = false;
this.linkWithExpirySettings = false; this.linkWithExpirySettings = false;
} }
} }
@@ -162,7 +162,7 @@ export class ShareDialogComponent implements OnInit, OnDestroy {
onToggleExpirationDate(slideToggle: MatSlideToggleChange) { onToggleExpirationDate(slideToggle: MatSlideToggleChange) {
if (slideToggle.checked) { if (slideToggle.checked) {
this.time.enable(); this.time.enable();
this.isSlideToggleChecked = true; this.isExpiryDateToggleChecked = true;
} else { } else {
this.time.disable(); this.time.disable();
this.time.setValue(null); this.time.setValue(null);
@@ -249,7 +249,7 @@ export class ShareDialogComponent implements OnInit, OnDestroy {
} }
if (dialogOpenFlag) { if (dialogOpenFlag) {
this.createSharedLinks(this.data.node.entry.id); this.createSharedLinks(this.data.node.entry.id);
this.isSlideToggleChecked = false; this.isExpiryDateToggleChecked = false;
this.linkWithExpirySettings = false; this.linkWithExpirySettings = false;
} else { } else {
this.dialogRef.close(false); this.dialogRef.close(false);