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-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">
<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 }}
</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>
<mat-dialog-content>
<hr class="adf-share-link__seperation-line" />
<form [formGroup]="form">
<form [formGroup]="form" class="adf-share-link__form">
<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>
@@ -28,14 +29,16 @@
</mat-slide-toggle>
</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-label>{{ 'SHARE.EXPIRATION-PLACEHOLDER' | translate }}</mat-label>
<mat-datetimepicker-toggle
#matDatetimepickerToggle="matDatetimepickerToggle"
[disabled]="time.disabled"
[for]="datetimePicker"
matSuffix>
matSuffix
class="adf-share-link__icon adf-share-link__calender-icon">
</mat-datetimepicker-toggle>
<mat-datetimepicker
#datetimePicker
@@ -55,7 +58,7 @@
</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">
<mat-slide-toggle
@@ -83,7 +86,7 @@
formControlName="sharedUrl"
readonly="readonly">
<mat-icon
class="adf-input-action"
class="adf-input-action adf-share-link__icon"
role="button"
matSuffix
[clipboard-notification]="'SHARE.CLIPBOARD-MESSAGE' | translate" [adf-clipboard]
@@ -94,14 +97,15 @@
</mat-icon>
</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 }}
</p>
<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>
</form>
lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss
+44 -14
View File
@@ -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) {
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();
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 () => {
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';
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);