inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-10-01 14:41:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-5551]property panel updated

Browse Source
This commit is contained in:
Anukriti Singh
2023-09-01 19:17:08 +05:30
parent 1f98b37951
commit b4b30cede1
23 changed files with 387 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
demo-shell/src/app/components/files/files.component.html
View File

@@ -289,7 +289,7 @@
<adf-info-drawer-layout *ngIf="showVersions" class="app-manage-versions-sidebar">
<div info-drawer-content>
<adf-info-drawer [title]="'Details'" *ngIf="documentList.selection[0]">
<adf-info-drawer [drawerIcon]="documentList.selection[0].entry" [title]="'Details'" *ngIf="documentList.selection[0]">
<adf-info-drawer-tab label="Properties">
<adf-content-metadata-card
[node]="documentList.selection[0].entry"

65
e2e/content-services/metadata/metadata-smoke-tests.e2e.ts
View File

@@ -132,7 +132,7 @@ describe('Metadata component', () => {
await expect(await metadataViewPage.getEditIconTooltip()).toEqual(METADATA.EDIT_BUTTON_TOOLTIP);
});
it('[C245654] Should be possible edit the basic Metadata Info of a Document', async () => {
it('[C245654] Should be possible to edit the basic Metadata Info of a Document', async () => {
await viewerPage.clickInfoButton();
await viewerPage.checkInfoSideBarIsDisplayed();
await metadataViewPage.clickOnPropertiesTab();
@@ -141,13 +141,6 @@ describe('Metadata component', () => {
await expect(await viewerPage.getActiveTab()).toEqual(METADATA.PROPERTY_TAB);
await metadataViewPage.editIconGeneralClick();
await metadataViewPage.editPropertyIconIsDisplayed('properties.cm:name');
await metadataViewPage.editPropertyIconIsDisplayed('properties.cm:title');
await metadataViewPage.editPropertyIconIsDisplayed('properties.cm:description');
await expect(await metadataViewPage.getPropertyIconTooltip('properties.cm:name')).toEqual('Edit');
await expect(await metadataViewPage.getPropertyIconTooltip('properties.cm:title')).toEqual('Edit');
await expect(await metadataViewPage.getPropertyIconTooltip('properties.cm:description')).toEqual('Edit');
await metadataViewPage.enterPropertyText('properties.cm:name', 'exampleText');
await metadataViewPage.clickResetMetadata();
@@ -180,6 +173,35 @@ describe('Metadata component', () => {
await metadataViewPage.clickSaveGeneralMetadata();
});
it('[C261157] Should be possible to use the metadata component When the node is a Folder', async () => {
await contentServicesPage.metadataContent(folderName);
await expect(await metadataViewPage.getPropertyText('properties.cm:name')).toEqual(folderName);
await expect(await metadataViewPage.getPropertyText('createdByUser.displayName')).toEqual(`${acsUser.firstName} ${acsUser.lastName}`);
await BrowserActions.closeMenuAndDialogs();
});
it('[C261158] Should be possible to edit the metadata When the node is a Folder', async () => {
await contentServicesPage.metadataContent(folderName);
await metadataViewPage.editIconGeneralClick();
await metadataViewPage.enterPropertyText('properties.cm:name', 'newnameFolder');
await metadataViewPage.clickResetButton();
await expect(await metadataViewPage.getPropertyText('properties.cm:name')).toEqual(folderName);
await metadataViewPage.editIconGeneralClick();
await metadataViewPage.enterPropertyText('properties.cm:name', 'newnameFolder');
await metadataViewPage.clickSaveGeneralMetadata();
await expect(await metadataViewPage.getPropertyText('properties.cm:name')).toEqual('newnameFolder');
await metadataViewPage.editIconGeneralClick();
await metadataViewPage.enterPropertyText('properties.cm:name', folderName);
await metadataViewPage.clickSaveGeneralMetadata();
await expect(await metadataViewPage.getPropertyText('properties.cm:name')).toEqual(folderName);
});
it('[C260181] Should be possible edit all the metadata aspect', async () => {
await viewerPage.clickInfoButton();
await viewerPage.checkInfoSideBarIsDisplayed();
@@ -218,33 +240,6 @@ describe('Metadata component', () => {
await navigationBarPage.clickLogoutButton();
});
it('[C261157] Should be possible use the metadata component When the node is a Folder', async () => {
await contentServicesPage.metadataContent(folderName);
await expect(await metadataViewPage.getPropertyText('properties.cm:name')).toEqual(folderName);
await expect(await metadataViewPage.getPropertyText('createdByUser.displayName')).toEqual(`${acsUser.firstName} ${acsUser.lastName}`);
await BrowserActions.closeMenuAndDialogs();
});
it('[C261158] Should be possible edit the metadata When the node is a Folder', async () => {
await contentServicesPage.metadataContent(folderName);
await metadataViewPage.editIconGeneralClick();
await metadataViewPage.enterPropertyText('properties.cm:name', 'newnameFolder');
await metadataViewPage.clickResetButton();
await expect(await metadataViewPage.getPropertyText('properties.cm:name')).toEqual(folderName);
await metadataViewPage.editIconGeneralClick();
await metadataViewPage.enterPropertyText('properties.cm:name', 'newnameFolder');
await metadataViewPage.clickSaveGeneralMetadata();
await expect(await metadataViewPage.getPropertyText('properties.cm:name')).toEqual('newnameFolder');
await metadataViewPage.editIconGeneralClick();
await metadataViewPage.enterPropertyText('properties.cm:name', folderName);
await metadataViewPage.clickSaveGeneralMetadata();
await expect(await metadataViewPage.getPropertyText('properties.cm:name')).toEqual(folderName);
});
});
it('[C279960] Should show the last username modifier when modify a File', async () => {

2
lib/content-services/src/lib/category/categories-management/categories-management.component.scss
View File

@@ -30,7 +30,7 @@
.mat-form-field-flex {
background: none;
}
.mat-form-field-infix {
padding: 0;
}

100
lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html
View File

@@ -1,48 +1,48 @@
<div class="adf-metadata-properties">
<mat-accordion displayMode="flat"
[multi]="multi">
<mat-expansion-panel *ngIf="displayDefaultProperties"
[expanded]="canExpandProperties()"
[attr.data-automation-id]="'adf-metadata-group-properties'"
hideToggle
(opened)="handleGeneralInfoPanelState()"
(closed)="handleGeneralInfoPanelState()">
<mat-expansion-panel-header>
<mat-expansion-panel *ngIf="displayDefaultProperties"
[expanded]="canExpandProperties()"
[attr.data-automation-id]="'adf-metadata-group-properties'"
hideToggle
(opened)="handleGeneralInfoPanelState()"
(closed)="handleGeneralInfoPanelState()">
<mat-expansion-panel-header>
<div class="adf-metadata-properties-panel-content">
<mat-icon>
{{ generalInfoPanelState ? 'expand_more' : 'chevron_right'}}
</mat-icon>
<mat-panel-title class="adf-metadata-properties-title">
{{ 'CORE.METADATA.BASIC.HEADER' | translate }}
</mat-panel-title>
<mat-icon>
{{ generalInfoPanelState ? 'expand_more' : 'chevron_right'}}
</mat-icon>
<mat-panel-title class="adf-metadata-properties-title">
{{ 'CORE.METADATA.BASIC.HEADER' | translate }}
</mat-panel-title>
</div>
<button *ngIf="!editable && !readOnly && hasAllowableOperations"
mat-icon-button
(click)="toggleGeneralEdit($event)"
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
[attr.aria-label]="'CORE.METADATA.ACCESSIBILITY.EDIT' | translate"
data-automation-id="meta-data-general-info-edit"
class="adf-edit-icon-buttons">
<mat-icon>mode_edit</mat-icon>
mat-icon-button
(click)="toggleGeneralEdit($event)"
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
[attr.aria-label]="'CORE.METADATA.ACCESSIBILITY.EDIT' | translate"
data-automation-id="meta-data-general-info-edit"
class="adf-edit-icon-buttons">
<mat-icon>mode_edit</mat-icon>
</button>
<div *ngIf="editable"
class="adf-metadata-action-buttons">
<button mat-icon-button
(click)="cancelChanges(buttonType.GeneralInfo, $event)"
data-automation-id="reset-metadata">
<mat-icon>clear</mat-icon>
</button>
<button mat-icon-button
(click)="saveChanges(buttonType.GeneralInfo, $event, group)"
color="primary"
data-automation-id="save-general-info-metadata"
[disabled]="!hasMetadataChanged">
<mat-icon>check</mat-icon>
</button>
class="adf-metadata-action-buttons">
<button mat-icon-button
(click)="cancelChanges(buttonType.GeneralInfo, $event)"
data-automation-id="reset-metadata">
<mat-icon>clear</mat-icon>
</button>
<button mat-icon-button
(click)="saveChanges(buttonType.GeneralInfo, $event, group)"
color="primary"
data-automation-id="save-general-info-metadata"
[disabled]="!hasMetadataChanged">
<mat-icon>check</mat-icon>
</button>
</div>
</mat-expansion-panel-header>
<mat-divider class="adf-mat-divider"></mat-divider>
<adf-card-view
</mat-expansion-panel-header>
<mat-divider class="adf-mat-divider"></mat-divider>
<adf-card-view
(keydown)="keyDown($event)"
[properties]="basicProperties$ | async"
[editable]="editable"
@@ -50,10 +50,10 @@
[copyToClipboardAction]="copyToClipboardAction"
[useChipsForMultiValueProperty]="useChipsForMultiValueProperty"
[multiValueSeparator]="multiValueSeparator">
</adf-card-view>
</mat-expansion-panel>
<ng-container *ngIf="displayTags">
<mat-expansion-panel
</adf-card-view>
</mat-expansion-panel>
<ng-container *ngIf="displayTags">
<mat-expansion-panel
(opened)="handleTagsPanelState(true)"
(closed)="handleTagsPanelState(false)"
hideToggle
@@ -111,10 +111,10 @@
[disabledTagsRemoving]="saving">
</adf-tags-creator>
</div>
</mat-expansion-panel>
</ng-container>
<ng-container *ngIf="displayCategories">
<mat-expansion-panel
</mat-expansion-panel>
</ng-container>
<ng-container *ngIf="displayCategories">
<mat-expansion-panel
(opened)="handleCategoriesPanelState(true)"
(closed)="handleCategoriesPanelState(false)"
hideToggle
@@ -170,11 +170,11 @@
(categoriesChange)="storeCategoriesToAssign($event)">
</adf-categories-management>
</div>
</mat-expansion-panel>
</ng-container>
<ng-container *ngIf="groupedProperties$ | async; else loading; let groupedProperties">
</mat-expansion-panel>
</ng-container>
<ng-container *ngIf="groupedProperties$ | async; else loading; let groupedProperties">
<div *ngFor="let group of groupedProperties; let first = first;"
class="adf-metadata-grouped-properties-container">
class="adf-metadata-grouped-properties-container">
<mat-expansion-panel
[attr.data-automation-id]="'adf-metadata-group-' + group.title"
[expanded]="canExpandTheCard(group) || !displayDefaultProperties && first || group.expanded"
@@ -230,8 +230,8 @@
</adf-card-view>
</mat-expansion-panel>
</div>
</ng-container>
<ng-template #loading>
</ng-container>
<ng-template #loading>
<mat-progress-bar mode="indeterminate" [attr.aria-label]="'DATA_LOADING' | translate">
</mat-progress-bar>
</ng-template>

19
lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss
View File

@@ -1,17 +1,24 @@
.adf {
&-metadata-properties {
mat-expansion-panel-header {
.mat-expansion-panel-header {
height: 56px;
padding: 0 12px;
.adf-metadata-properties-title {
font-weight: normal;
font-size: 15px;
font-weight: 700;
font-size: 14px;
padding-left: 12px;
}
}
.mat-expansion-panel:not([class*='mat-elevation-z']) {
box-shadow: none;
border: 1px solid var(--adf-metadata-property-panel-border-color);
border-radius: 12px;
}
.mat-expansion-panel-body {
padding: 0 24px 12px;
}
.adf-mat-divider {
@@ -47,7 +54,7 @@
align-items: center;
justify-content: center;
font-size: 15px;
padding: 24px;
padding: 18px 0 5px;
}
&-tags {
@@ -91,7 +98,7 @@
justify-content: space-between;
align-items: center;
font-size: 15px;
height: 64px;
height: 56px;
button {
margin-right: -14px;
@@ -116,8 +123,8 @@
.mat-expansion-panel {
width: 755px;
border: 1px solid var(--adf-metadata-property-panel-border-color);
margin: 24px;
border-radius: 12px;
margin: 24px;
}
}
}

4
lib/core/src/lib/card-view/card-view.module.ts
View File

@@ -45,6 +45,7 @@ import { CardViewKeyValuePairsItemComponent } from './components/card-view-keyva
import { CardViewSelectItemComponent } from './components/card-view-selectitem/card-view-selectitem.component';
import { CardViewArrayItemComponent } from './components/card-view-arrayitem/card-view-arrayitem.component';
import { SelectFilterInputComponent } from './components/card-view-selectitem/select-filter-input/select-filter-input.component';
import { MatDividerModule } from '@angular/material/divider';
@NgModule({
imports: [
@@ -66,7 +67,8 @@ import { SelectFilterInputComponent } from './components/card-view-selectitem/se
MatDatetimepickerModule,
MatNativeDatetimeModule,
MatSlideToggleModule,
MatTooltipModule
MatTooltipModule,
MatDividerModule
],
declarations: [
CardViewComponent,

5
lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.html
View File

@@ -1,10 +1,12 @@
<label class="adf-property-label"
[ngClass]="{'adf-property-label-not-editable' : !isEditable() && editable}"
[attr.data-automation-id]="'card-dateitem-label-' + property.key"
*ngIf="showProperty() || isEditable()"
[attr.for]="'card-view-dateitem-' + property.key">
{{ property.label | translate }}
</label>
<div class="adf-property-value adf-property-value-padding-top">
<div class="adf-property-value adf-property-value-padding-top"
[ngClass]="{'adf-property-dateitem-edit-mode' : editable, 'adf-property-label-not-editable' : !isEditable() && editable}">
<span *ngIf="!isEditable() && !property.multivalued"
[attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
<span *ngIf="showProperty()"
@@ -98,3 +100,4 @@
</mat-form-field>
</div>
</div>
<mat-divider *ngIf="showProperty() && !editable"></mat-divider>

17
lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss
View File

@@ -11,6 +11,23 @@
float: right;
}
&-property-label{
color: var(--adf-metadata-property-panel-text-color);
display: flex;
padding: 6px 0;
line-height: 20px;
}
&-property-dateitem-edit-mode{
background-color: var(--adf-metadata-buttons-background-color);
border-radius: 6px;
padding-left: 12px;
.mat-select-value{
color: var(--adf-metadata-property-panel-text-color);
}
}
&-dateitem-chip-list-container.adf-property-field {
margin-bottom: -7px !important;
border-bottom: 0;

2
lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.html
View File

@@ -2,6 +2,7 @@
<div
[attr.data-automation-id]="'card-select-label-' + property.key"
class="adf-property-label"
[ngClass]="{'adf-property-label-not-editable' : !isEditable() && editable}"
>{{ property.label | translate }}</div>
<div class="adf-property-field">
<div
@@ -15,6 +16,7 @@
<mat-select
[(value)]="value"
panelClass="adf-select-filter"
[ngClass]="{'adf-property-select-edit-mode' : isEditable(),'adf-property-normal-mode':!isEditable(),'adf-property-label-not-editable' : !isEditable() && editable}"
(selectionChange)="onChange($event)"
data-automation-class="select-box"
[aria-label]="property.label | translate"

9
lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss
View File

@@ -3,13 +3,8 @@
}
.adf-select-item-padding {
padding-top: 6px;
padding-bottom: 20px;
}
.adf-select-item-padding-editable {
padding-top: 6px;
padding-bottom: 6px;
display: flex;
padding: 6px 0;
}
.adf-select-filter-input {

35
lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html
View File

@@ -2,14 +2,16 @@
<div *ngSwitchDefault>
<mat-form-field class="adf-property-field adf-card-textitem-field"
[ngClass]="{ 'adf-property-read-only': !isEditable, 'adf-property-field-has-error mat-form-field-invalid': isEditable && hasErrors }"
[floatLabel]="'never'"
[floatLabel]="'always'"
appearance="standard">
<mat-label *ngIf="showProperty || isEditable" [attr.data-automation-id]="'card-textitem-label-' + property.key" class="adf-property-label">
<mat-label *ngIf="showProperty || isEditable" [attr.data-automation-id]="'card-textitem-label-' + property.key" class="adf-property-label"
[ngClass]="{'adf-property-label-not-editable' : !isEditable && editable}">
{{ property.label | translate }}
</mat-label>
<input matInput
*ngIf="!property.multiline"
class="adf-property-value"
[ngClass]="{'adf-property-edit-mode' : editable,'adf-property-normal-mode':!editable, 'adf-property-label-not-editable' : !isEditable && editable}"
title="{{property.label | translate }}"
[placeholder]="property.default"
[attr.aria-label]="property.label | translate"
@@ -27,34 +29,21 @@
[cdkAutosizeMaxRows]="1"
[cdkAutosizeMaxRows]="5"
class="adf-property-value"
[ngClass]="{'adf-property-edit-mode' : editable,'adf-property-normal-mode':!editable, 'adf-property-label-not-editable' : !isEditable && editable}"
[placeholder]="property.default"
[attr.aria-label]="property.label | translate"
[formControl]="textInput"
[attr.data-automation-id]="'card-textitem-value-' + property.key">
</textarea>
<button
*ngIf="isEditable"
matSuffix
class="adf-textitem-clear-icon"
[attr.aria-label]="'CORE.METADATA.ACTIONS.CLEAR' | translate"
(click)="clearValue()">
<mat-icon>cancel</mat-icon>
</button>
<button
*ngIf="isEditable"
matSuffix
class="adf-textitem-edit-icon"
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate">
<mat-icon>mode_edit</mat-icon>
</button>
</mat-form-field>
<mat-divider *ngIf="showProperty && !editable"></mat-divider>
</div>
<div *ngSwitchCase="'chipsTemplate'"
class="adf-property-field adf-textitem-chip-list-container">
<mat-label *ngIf="showLabelForChips" [attr.data-automation-id]="'card-textitem-label-' + property.key" class="adf-property-label">
<mat-label *ngIf="showLabelForChips" [attr.data-automation-id]="'card-textitem-label-' + property.key" class="adf-property-label"
[ngClass]="{'adf-property-label-not-editable' : !isEditable && editable}">
{{ property.label | translate }}
</mat-label>
<mat-chip-list #chipList
@@ -74,6 +63,7 @@
[floatLabel]="'never'">
<input matInput
class="adf-property-value"
[ngClass]="{'adf-property-edit-mode' : editable,'adf-property-normal-mode':!editable, 'adf-property-label-not-editable' : !isEditable && editable}"
title="{{property.label | translate }}"
[placeholder]="editedValue ? '' : property.default | translate"
[attr.aria-label]="property.label | translate"
@@ -81,8 +71,6 @@
[matChipInputAddOnBlur]="true"
(matChipInputTokenEnd)="addValueToList($event)"
[attr.data-automation-id]="'card-textitem-editchipinput-' + property.key">
<mat-icon matSuffix
class="adf-textitem-edit-icon">mode_edit</mat-icon>
</mat-form-field>
</div>
@@ -94,14 +82,15 @@
(click)="clicked()">
<mat-form-field class="adf-property-field adf-card-textitem-field" appearance="standard"
[floatLabel]="'never'">
<mat-label *ngIf="showProperty || isEditable" [attr.data-automation-id]="'card-textitem-label-' + property.key" class="adf-property-label">
<mat-label *ngIf="showProperty || isEditable" [attr.data-automation-id]="'card-textitem-label-' + property.key" class="adf-property-label"
[ngClass]="{'adf-property-label-not-editable' : !isEditable && editable}">
{{ property.label | translate }}
</mat-label>
<input matInput
[type]=property.inputType
class="adf-property-value"
title="{{property.label | translate }}"
[ngClass]="{ 'adf-textitem-clickable-value': !isEditable }"
[ngClass]="{ 'adf-textitem-clickable-value': !isEditable,'adf-property-edit-mode' : editable,'adf-property-normal-mode':!editable, 'adf-property-label-not-editable' : !isEditable && editable }"
[placeholder]="property.default"
[attr.aria-label]="property.label | translate"
[(ngModel)]="editedValue"

5
lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss
View File

@@ -1,4 +1,9 @@
.adf {
&-property-field .mat-form-field-underline {
display: none;
}
&-textitem-edit-icon.mat-icon {
font-size: var(--theme-subheading-2-font-size);
width: 16px;

38
lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts
View File

@@ -185,24 +185,6 @@ describe('CardViewTextItemComponent', () => {
});
it('should render the edit icon in case of editable:true', () => {
component.editable = true;
component.property.editable = true;
fixture.detectChanges();
const editIcon = fixture.debugElement.query(By.css('.adf-textitem-edit-icon'));
expect(editIcon).not.toBeNull('Edit icon should be shown');
});
it('should NOT render the edit icon in case of editable:false', async () => {
component.editable = false;
fixture.detectChanges();
await fixture.whenStable();
const editIcon = fixture.debugElement.query(By.css('.adf-textitem-edit-icon'));
expect(editIcon).toBeNull('Edit icon should NOT be shown');
});
it('should NOT render the picker and toggle in case of editable:true but (general) editable:false', async () => {
component.editable = false;
component.property.editable = true;
@@ -493,26 +475,6 @@ describe('CardViewTextItemComponent', () => {
expect(clipboardService.copyContentToClipboard).toHaveBeenCalledWith('myValueToCopy', 'CORE.METADATA.ACCESSIBILITY.COPY_TO_CLIPBOARD_MESSAGE');
});
it('should clear value when clear value icon is clicked', async () => {
spyOn(component, 'update');
component.property.value = 'testValue';
component.property.icon = 'FAKE_ICON';
component.property.clickable = true;
component.property.editable = true;
component.editable = true;
component.property.isValid = () => true;
fixture.detectChanges();
await fixture.whenStable();
fixture.detectChanges();
const clickEl = fixture.debugElement.query(By.css(`.adf-textitem-clear-icon`));
clickEl.triggerEventHandler('click', new MouseEvent('click'));
fixture.detectChanges();
const elementValue = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-value-${component.property.key}"]`));
expect(elementValue.nativeElement.textContent).toEqual('');
expect(component.update).toHaveBeenCalled();
});
});
describe('Update', () => {

64
lib/core/src/lib/card-view/components/card-view/card-view.component.scss
View File

@@ -6,23 +6,79 @@
border-radius: var(--adf-card-view-border-radius);
.adf-property {
margin-bottom: 20px;
.adf-property-value-padding-top {
margin-top: 6px;
display: flex;
flex-direction:column;
padding-bottom: 6px;
line-height: 20px;
}
.adf-property-label-not-editable {
color: var(--adf-metadata-property-panel-label-color);
}
.adf-property-field {
width: 100%;
margin-bottom: -25px;
.mat-form-field-infix {
display: flex;
border-top-width: 0;
padding: 0;
}
.mat-form-field-label {
margin-top: 6px;
padding: 6px 0;
justify-content: center;
display: flex;
flex-direction: column;
height: 20px;
transform: translateY(-1.34373em) scale(1);
}
.mat-form-field-label-wrapper {
padding-top: 0;
top: -1px;
}
.mat-input-element.adf-property-normal-mode {
color: var(--adf-metadata-property-panel-title-color);
margin-top: 32px;
padding: 6px 0;
line-height: 20px;
}
.mat-input-element.adf-property-edit-mode {
padding: 6px 0 6px 12px;
margin-top: 32px;
line-height: 20px;
background-color: var(--adf-metadata-buttons-background-color);
color: var(--adf-metadata-property-panel-text-color);
border-radius: 6px;
}
.mat-select.adf-property-select-edit-mode {
padding: 6px 0 6px 12px;
margin-top: 0;
line-height: 20px;
background-color: var(--adf-metadata-buttons-background-color);
border-radius: 6px;
.mat-select-min-line{
color: var(--adf-metadata-property-panel-text-color);
} }
}
}
}
.mat-form-field-wrapper {
padding-bottom: 0;
}
.mat-form-field-appearance-standard .mat-form-field-flex {
padding-top: 0 !important;
}
.mat-form-field-appearance-legacy .mat-form-field-wrapper {
padding-bottom: 0 !important;
}

3
lib/core/src/lib/info-drawer/info-drawer-layout.component.html
View File

@@ -1,4 +1,7 @@
<div *ngIf="showHeader" class="adf-info-drawer-layout-header">
<div class="adf-info-drawer-layout-header-icon">
<ng-content select="[info-drawer-icon]"></ng-content>
</div>
<div class="adf-info-drawer-layout-header-title">
<ng-content select="[info-drawer-title]"></ng-content>
</div>

6
lib/core/src/lib/info-drawer/info-drawer-layout.component.scss
View File

@@ -14,8 +14,9 @@ $adf-info-drawer-icon-size-half: 24px !default;
overflow: auto;
width: 100%;
background-color: var(--theme-background-color);
background-color: var(--theme-card-background-color);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27);
border-top: 1px solid var(--adf-metadata-property-panel-border-color);
& .mat-tab-label {
font-weight: bold;
@@ -32,7 +33,6 @@ $adf-info-drawer-icon-size-half: 24px !default;
&-header {
padding: 13px 0 0 23px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 40px;
@@ -55,8 +55,8 @@ $adf-info-drawer-icon-size-half: 24px !default;
& > div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--adf-metadata-property-panel-title-color);
}
}
}

1
lib/core/src/lib/info-drawer/info-drawer-layout.component.ts
View File

@@ -33,6 +33,7 @@ export class InfoDrawerLayoutComponent {
/**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({ selector: '[adf-info-drawer-icon], [info-drawer-icon]' }) export class InfoDrawerIconDirective {}
@Directive({ selector: '[adf-info-drawer-title], [info-drawer-title]' }) export class InfoDrawerTitleDirective {}
@Directive({ selector: '[adf-info-drawer-buttons], [info-drawer-buttons]' }) export class InfoDrawerButtonsDirective {}
@Directive({ selector: '[adf-info-drawer-content], [info-drawer-content]' }) export class InfoDrawerContentDirective {}

1
lib/core/src/lib/info-drawer/info-drawer.component.html
View File

@@ -1,4 +1,5 @@
<adf-info-drawer-layout [showHeader]="showHeader">
<img class="adf-info-drawer-icon" alt="Info Drawer Icon" *ngIf="drawerIcon" src="{{ getInfoDrawerIcon(drawerIcon) }}" info-drawer-icon>
<div role="heading" aria-level="1" *ngIf="title" info-drawer-title>{{ title | translate }}</div>
<ng-content *ngIf="!title" info-drawer-title select="[info-drawer-title]"></ng-content>

15
lib/core/src/lib/info-drawer/info-drawer.component.scss
View File

@@ -1,12 +1,22 @@
.adf {
&-info-drawer {
display: block;
.adf-metadata-properties-panel{
display:block;
margin:0;
}
.mat-tab-label {
min-width: 0;
}
& &-layout {
.adf-info-drawer-icon{
display: inline-block;
vertical-align: middle;
margin-right:10px;
}
&-content {
padding: 0;
@@ -42,7 +52,7 @@
}
.mat-tab-body {
padding: 10px;
padding: 24px;
}
.mat-tab-body-content {
@@ -55,3 +65,4 @@
}
}
}

121
lib/core/src/lib/info-drawer/info-drawer.component.spec.ts
View File

@@ -24,6 +24,40 @@ import { of } from 'rxjs';
import { TranslateService, TranslateModule } from '@ngx-translate/core';
import { CoreTestingModule } from '../testing/core.testing.module';
import { ESCAPE } from '@angular/cdk/keycodes';
import { Node } from '@alfresco/js-api';
import { ThumbnailService } from '../common/services/thumbnail.service';
const mockNode: Node = {
isFile: true,
createdByUser: { id: 'admin', displayName: 'Administrator' },
modifiedAt: new Date('2017-05-24T15:08:55.640Z'),
nodeType: 'cm:content',
content: {
mimeType: 'application/rtf',
mimeTypeName: 'Rich Text Format',
sizeInBytes: 14530,
encoding: 'UTF-8'
},
parentId: 'd124de26-6ba0-4f40-8d98-4907da2d337a',
createdAt: new Date('2017-05-24T15:08:55.640Z'),
path: {
name: '/Company Home/Guest Home',
isComplete: true,
elements: [
{
id: '94acfc73-7014-4475-9bd9-93a2162f0f8c',
name: 'Company Home'
},
{ id: 'd124de26-6ba0-4f40-8d98-4907da2d337a', name: 'Guest Home' }
]
},
isFolder: false,
modifiedByUser: { id: 'admin', displayName: 'Administrator' },
name: 'b_txt_file.rtf',
id: '70e1cc6a-6918-468a-b84a-1048093b06fd',
properties: { 'cm:versionLabel': '1.0', 'cm:versionType': 'MAJOR' },
allowableOperations: ['delete', 'update']
};
describe('InfoDrawerComponent', () => {
let element: HTMLElement;
@@ -34,7 +68,7 @@ describe('InfoDrawerComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
TranslateModule.forRoot(),
TranslateModule.forRoot(),
CoreTestingModule
]
});
@@ -44,6 +78,7 @@ describe('InfoDrawerComponent', () => {
fixture = TestBed.createComponent(InfoDrawerComponent);
element = fixture.nativeElement;
component = fixture.componentInstance;
component.drawerIcon = mockNode;
});
it('should define InfoDrawerTabLayout', () => {
@@ -83,19 +118,64 @@ describe('InfoDrawerComponent', () => {
expect(stopPropagationSpy).toHaveBeenCalled();
});
describe('Info Drawer header Icon', () => {
let thumbnailService: ThumbnailService;
beforeEach(() => {
thumbnailService = TestBed.inject(ThumbnailService);
component.drawerIcon = mockNode;
});
function testInfoDrawerIcon(iconPath: string, isFolder: boolean, isFile: boolean) {
spyOn(thumbnailService, 'getMimeTypeIcon').and.returnValue(iconPath);
mockNode.isFolder = isFolder;
mockNode.isFile = isFile;
const value = component.getInfoDrawerIcon(mockNode);
expect(value).toContain(iconPath);
}
it('should resolve folder icon', () => {
testInfoDrawerIcon('assets/images/ft_ic_folder.svg', true, false);
});
it('should resolve smart folder icon', () => {
testInfoDrawerIcon('assets/images/ft_ic_smart_folder.svg', true, false);
});
it('should resolve link folder icon', () => {
testInfoDrawerIcon('assets/images/ft_ic_folder_shortcut_link.svg', true, false);
});
it('should resolve rule folder icon', () => {
testInfoDrawerIcon('assets/images/ft_ic_folder_rule.svg', true, false);
});
it('should resolve file icon for content type', () => {
testInfoDrawerIcon('assets/images/ft_ic_raster_image.svg', false, true);
});
it('should resolve fallback file icon for unknown node', () => {
spyOn(thumbnailService, 'getDefaultMimeTypeIcon').and.returnValue(`assets/images/ft_ic_miscellaneous.svg`);
mockNode.isFile = false;
mockNode.isFolder = false;
const value = component.getInfoDrawerIcon(mockNode);
expect(value).toContain(`assets/images/ft_ic_miscellaneous`);
});
});
});
@Component({
template: `
<adf-info-drawer [selectedIndex]="tabIndex" title="Fake Title Custom">
<adf-info-drawer-tab label="Tab1">
</adf-info-drawer-tab>
<adf-info-drawer-tab label="Tab2">
</adf-info-drawer-tab>
<adf-info-drawer-tab label="Tab3" icon="tab-icon">
</adf-info-drawer-tab>
</adf-info-drawer>
`
<adf-info-drawer [selectedIndex]="tabIndex" drawerIcon="mockNode" title="Fake Title Custom">
<adf-info-drawer-tab label="Tab1">
</adf-info-drawer-tab>
<adf-info-drawer-tab label="Tab2">
</adf-info-drawer-tab>
<adf-info-drawer-tab label="Tab3" icon="tab-icon">
</adf-info-drawer-tab>
</adf-info-drawer>
`
})
class CustomInfoDrawerComponent extends InfoDrawerComponent {
tabIndex: number;
@@ -157,13 +237,21 @@ describe('Custom InfoDrawer', () => {
expect(tab[0].nativeElement.innerText).not.toBe('TAB3');
expect(tab[0].nativeElement.innerText).toContain('tab-icon');
});
it('should render a icon with title', () => {
fixture.detectChanges();
const icon: any = fixture.debugElement.queryAll(By.css('[info-drawer-icon]'));
const srcAttribute = icon[0].nativeElement.getAttribute('src');
expect(icon.length).toBe(1);
expect(srcAttribute).toContain('/assets/images/ft_ic_miscellaneous.svg');
});
});
@Component({
template: `
<adf-info-drawer [showHeader]="showHeader" title="Fake Visibility Info Drawer Title">
<adf-info-drawer [showHeader]="showHeader" drawerIcon="mockNode" title="Fake Visibility Info Drawer Title">
</adf-info-drawer>
`
`
})
class VisibilityInfoDrawerComponent extends InfoDrawerComponent {
showHeader: boolean;
@@ -186,21 +274,28 @@ describe('Header visibility InfoDrawer', () => {
fixture = TestBed.createComponent(VisibilityInfoDrawerComponent);
fixture.detectChanges();
component = fixture.componentInstance;
component.drawerIcon = mockNode;
});
it('should show info drawer header by default', () => {
fixture.detectChanges();
const title: any = fixture.debugElement.queryAll(By.css('[info-drawer-title]'));
const icon: any = fixture.debugElement.queryAll(By.css('[info-drawer-icon]'));
const srcAttribute = icon[0].nativeElement.getAttribute('src');
expect(title.length).toBe(1);
expect(icon.length).toBe(1);
expect(srcAttribute).toContain('/assets/images/ft_ic_miscellaneous.svg');
expect(title[0].nativeElement.innerText).toBe('Fake Visibility Info Drawer Title');
expect(component.showHeader).toEqual(true);
});
it('should not show info drawer header when showHeader is false', () => {
it('should not show info drawer header with icon when showHeader is false', () => {
fixture.detectChanges();
component.showHeader = false;
fixture.detectChanges();
const title: any = fixture.debugElement.queryAll(By.css('[info-drawer-title]'));
const icon: any = fixture.debugElement.queryAll(By.css('[info-drawer-icon]'));
expect(title.length).toBe(0);
expect(icon.length).toBe(0);
});
});

50
lib/core/src/lib/info-drawer/info-drawer.component.ts
View File

@@ -17,6 +17,9 @@
import { Component, ContentChildren, EventEmitter, HostListener, Input, Output, QueryList, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
import { MatTabChangeEvent } from '@angular/material/tabs';
import { ThumbnailService } from '../common/services/thumbnail.service';
import { Node } from '@alfresco/js-api';
@Component({
selector: 'adf-info-drawer-tab',
template: '<ng-template><ng-content></ng-content></ng-template>',
@@ -43,10 +46,16 @@ export class InfoDrawerTabComponent {
host: { class: 'adf-info-drawer' }
})
export class InfoDrawerComponent {
constructor(private thumbnailService: ThumbnailService) {}
/** The title of the info drawer (string or translation key). */
@Input()
title: string|null = null;
@Input()
drawerIcon: Node | null = null;
/** The selected index tab. */
@Input()
selectedIndex: number = 0;
@@ -79,4 +88,45 @@ export class InfoDrawerComponent {
onTabChange(event: MatTabChangeEvent) {
this.currentTab.emit(event.index);
}
getInfoDrawerIcon(node: Node): string {
if (node.isFolder) {
return this.getFolderIcon(node);
}
if (node.isFile) {
return this.thumbnailService.getMimeTypeIcon(node.content.mimeType);
}
return this.thumbnailService.getDefaultMimeTypeIcon();
}
private getFolderIcon(node: Node): string {
if (this.isSmartFolder(node)) {
return this.thumbnailService.getMimeTypeIcon('smartFolder');
} else if (this.isRuleFolder(node)) {
return this.thumbnailService.getMimeTypeIcon('ruleFolder');
} else if (this.isLinkFolder(node)) {
return this.thumbnailService.getMimeTypeIcon('linkFolder');
} else {
return this.thumbnailService.getMimeTypeIcon('folder');
}
}
isSmartFolder(node: Node): boolean {
const nodeAspects = this.getNodeAspectNames(node);
return nodeAspects.includes('smf:customConfigSmartFolder') || nodeAspects.includes('smf:systemConfigSmartFolder');
}
isRuleFolder(node: Node): boolean {
const nodeAspects = this.getNodeAspectNames(node);
return nodeAspects.includes('rule:rules');
}
isLinkFolder(node: Node): boolean {
const nodeType = node.nodeType;
return nodeType === 'app:folderlink';
}
private getNodeAspectNames(node: Node): string[] {
return node.aspectNames ? node.aspectNames : [];
}
}

5
lib/core/src/lib/styles/_components-variables.scss
View File

@@ -46,7 +46,10 @@
--adf-identity-user-info-font-size: var(--theme-adf-picture-1-font-size),
--adf-user-info-container-margin-right: $adf-ref-margin-right,
--adf-metadata-property-panel-border-color: $adf-metadata-property-panel-border-color,
--adf-metadata-buttons-background-color: $adf-metadata-buttons-background-color
--adf-metadata-buttons-background-color: $adf-metadata-buttons-background-color,
--adf-metadata-property-panel-title-color: $adf-metadata-property-panel-title-color,
--adf-metadata-property-panel-text-color: $adf-metadata-property-panel-text-color,
--adf-metadata-property-panel-label-color: $adf-metadata-property-panel-label-color
);
// propagates SCSS variables into the CSS variables scope

4
lib/core/src/lib/styles/_reference-variables.scss
View File

@@ -29,3 +29,7 @@ $adf-ref-line-height: 40px;
$adf-ref-margin-right: 8px;
$adf-metadata-property-panel-border-color: rgba(0, 0, 0, 0.12);
$adf-metadata-buttons-background-color: rgba(33, 33, 33, 0.05);
$adf-metadata-property-panel-title-color: #212121;
$adf-metadata-property-panel-text-color: rgba(33, 35, 40, 0.70);
$adf-metadata-property-panel-label-color: rgba(33, 33, 33, 0.24);