inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-1599] [Destination Picker] Updates to match the designed component (#2642)

Browse Source 
* [ADF-1599] fix design issues

Search Term Highlight text to be orange (primary color)
Main action button text label to be orange (primary color)
Main action button text to be in Uppercase
Main action button to relate to the action i.e. MOVE or COPY
Dialog title: Name of item to move/copy should be in 'quotes'

* [ADF-1599] fix Dropdown	Placeholder text from 'Site List' to 'Select Location'

* [ADF-1599] fix Dropdown	Placeholder text from 'Site List' to 'Select Location'

* fix 'Select Location' width and bottom margin

* [ADF-1599] update document picker to match design

* [ADF-1599] fix failing tests

* [ADF-1599] update the unit tests

* [ADF-1599] use only colors from $theme on component scss file

* [ADF-1599] change needed after resolving conflict on merge
This commit is contained in:
suzanadirla
2017-11-22 15:40:47 +02:00
committed by Eugenio Romano
parent ed6aa1a0c1
commit 68239cd002
21 changed files with 148 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
lib/content-services/content-node-selector/content-node-selector.component-data.interface.ts
View File

@@ -20,6 +20,7 @@ import { MinimalNodeEntryEntity } from 'alfresco-js-api';
export interface ContentNodeSelectorComponentData {
title: string;
actionName?: string;
currentFolderId?: string;
dropdownHideMyFiles?: boolean;
dropdownSiteList?: any[];

3
lib/content-services/content-node-selector/content-node-selector.component.html
View File

@@ -28,6 +28,7 @@
<adf-sites-dropdown
(change)="siteChanged($event)"
[placeholder]="'NODE_SELECTOR.SELECT_LOCATION'"
[hideMyFiles]="dropdownHideMyFiles"
[siteList]="dropdownSiteList"
data-automation-id="content-node-selector-sites-combo"></adf-sites-dropdown>
@@ -96,7 +97,7 @@
[disabled]="!chosenNode"
class="adf-content-node-selector-actions-choose"
(click)="choose()"
data-automation-id="content-node-selector-actions-choose">{{ 'NODE_SELECTOR.CHOOSE' | translate }}
data-automation-id="content-node-selector-actions-choose">{{ buttonActionName | translate }}
</button>
</footer>

35
lib/content-services/content-node-selector/content-node-selector.component.scss
View File

@@ -1,6 +1,7 @@
@mixin adf-content-node-selector-theme($theme) {
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$foreground: map-get($theme, foreground);
$background: map-get($theme, background);
.adf-content-node-selector-dialog {
@@ -27,11 +28,11 @@
width: 100%;
&-icon {
color: rgba(0, 0, 0, 0.38);
color: mat-color($foreground, disabled-button);
cursor: pointer;
&:hover {
color: rgba(0, 0, 0, 1);
color: mat-color($foreground, base);
}
}
}
@@ -41,9 +42,16 @@
transition: none;
}
.adf-site-dropdown-container {
.mat-form-field {
display: block;
margin-bottom: 15px;
}
}
.adf-site-dropdown-list-element {
width: 100%;
margin-bottom: 20px;
margin-bottom: 0;
.mat-select-trigger {
font-size: 14px;
@@ -52,16 +60,17 @@
}
.adf-toolbar .mat-toolbar {
border: none;
border-bottom-width: 0;
font-size: 14px;
}
&-list {
height: 200px;
overflow: auto;
border: 1px solid rgba(0, 0, 0, 0.07);
border: 1px solid mat-color($foreground, base, 0.07);
.adf-highlight {
color: mat-color($accent);;
color: mat-color($primary);
}
.adf-data-table {
@@ -97,10 +106,14 @@
&-actions {
padding: 8px;
background-color: rgb(250, 250, 250);
background-color: mat-color($background, background);
display: flex;
justify-content: flex-end;
color: rgb(121, 121, 121);
color: mat-color($foreground, secondary-text);
button {
text-transform: uppercase;
}
&:last-child {
margin-bottom: 0px;
@@ -116,6 +129,10 @@
&[disabled] {
opacity: 0.6;
}
&:enabled {
color: mat-color($primary);
}
}
}
}

37
lib/content-services/content-node-selector/content-node-selector.component.spec.ts
View File

@@ -107,6 +107,7 @@ describe('ContentNodeSelectorComponent', () => {
beforeEach(async(() => {
data = {
title: 'Move along citizen...',
actionName: 'move',
select: new EventEmitter<MinimalNodeEntryEntity>(),
rowFilter: () => {},
imageResolver: () => 'piccolo',
@@ -131,6 +132,12 @@ describe('ContentNodeSelectorComponent', () => {
expect(titleElement.nativeElement.innerText).toBe('Move along citizen...');
});
it('should have the INJECTED actionName on the name of the choose button', () => {
const actionButton = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-actions-choose"]'));
expect(actionButton).not.toBeNull();
expect(actionButton.nativeElement.innerText).toBe('NODE_SELECTOR.MOVE');
});
it('should pass through the injected currentFolderId to the documentlist', () => {
let documentList = fixture.debugElement.query(By.directive(DocumentListComponent));
expect(documentList).not.toBeNull('Document list should be shown');
@@ -595,7 +602,7 @@ describe('ContentNodeSelectorComponent', () => {
});
});
describe('Choose button', () => {
describe('Action button for the chosen node', () => {
const entry: MinimalNodeEntryEntity = <MinimalNodeEntryEntity> {};
let hasPermission;
@@ -608,8 +615,8 @@ describe('ContentNodeSelectorComponent', () => {
it('should be disabled by default', () => {
fixture.detectChanges();
let chooseButton = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-actions-choose"]'));
expect(chooseButton.nativeElement.disabled).toBe(true);
let actionButton = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-actions-choose"]'));
expect(actionButton.nativeElement.disabled).toBe(true);
});
it('should become enabled after loading node with the necessary permissions', () => {
@@ -618,8 +625,8 @@ describe('ContentNodeSelectorComponent', () => {
component.documentList.ready.emit();
fixture.detectChanges();
let chooseButton = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-actions-choose"]'));
expect(chooseButton.nativeElement.disabled).toBe(false);
let actionButton = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-actions-choose"]'));
expect(actionButton.nativeElement.disabled).toBe(false);
});
it('should remain disabled after loading node without the necessary permissions', () => {
@@ -628,8 +635,8 @@ describe('ContentNodeSelectorComponent', () => {
component.documentList.ready.emit();
fixture.detectChanges();
let chooseButton = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-actions-choose"]'));
expect(chooseButton.nativeElement.disabled).toBe(true);
let actionButton = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-actions-choose"]'));
expect(actionButton.nativeElement.disabled).toBe(true);
});
it('should be enabled when clicking on a node (with the right permissions) in the list (onNodeSelect)', () => {
@@ -638,8 +645,8 @@ describe('ContentNodeSelectorComponent', () => {
component.onNodeSelect({ detail: { node: { entry } } });
fixture.detectChanges();
let chooseButton = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-actions-choose"]'));
expect(chooseButton.nativeElement.disabled).toBe(false);
let actionButton = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-actions-choose"]'));
expect(actionButton.nativeElement.disabled).toBe(false);
});
it('should remain disabled when clicking on a node (with the WRONG permissions) in the list (onNodeSelect)', () => {
@@ -648,8 +655,8 @@ describe('ContentNodeSelectorComponent', () => {
component.onNodeSelect({ detail: { node: { entry } } });
fixture.detectChanges();
let chooseButton = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-actions-choose"]'));
expect(chooseButton.nativeElement.disabled).toBe(true);
let actionButton = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-actions-choose"]'));
expect(actionButton.nativeElement.disabled).toBe(true);
});
it('should become disabled when clicking on a node (with the WRONG permissions) after previously selecting a right node', () => {
@@ -661,8 +668,8 @@ describe('ContentNodeSelectorComponent', () => {
component.onNodeSelect({ detail: { node: { entry } } });
fixture.detectChanges();
let chooseButton = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-actions-choose"]'));
expect(chooseButton.nativeElement.disabled).toBe(true);
let actionButton = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-actions-choose"]'));
expect(actionButton.nativeElement.disabled).toBe(true);
});
it('should be disabled when resetting the chosen node', () => {
@@ -673,8 +680,8 @@ describe('ContentNodeSelectorComponent', () => {
component.resetChosenNode();
fixture.detectChanges();
let chooseButton = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-actions-choose"]'));
expect(chooseButton.nativeElement.disabled).toBe(true);
let actionButton = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-actions-choose"]'));
expect(actionButton.nativeElement.disabled).toBe(true);
});
it('should make the call to get the corresponding node entry to emit when a site node is selected as destination', () => {

6
lib/content-services/content-node-selector/content-node-selector.component.ts
View File

@@ -46,10 +46,14 @@ export class ContentNodeSelectorComponent implements OnInit {
pagination: Pagination;
skipCount: number = 0;
infiniteScroll: boolean = false;
buttonActionName: string;
@Input()
title: string;
@Input()
actionName: string;
@Input()
currentFolderId: string | null = null;
@@ -85,6 +89,7 @@ export class ContentNodeSelectorComponent implements OnInit {
@Optional() private containingDialog?: MatDialogRef<ContentNodeSelectorComponent>) {
if (data) {
this.title = data.title;
this.actionName = data.actionName;
this.select = data.select;
this.currentFolderId = data.currentFolderId;
this.dropdownHideMyFiles = data.dropdownHideMyFiles;
@@ -92,6 +97,7 @@ export class ContentNodeSelectorComponent implements OnInit {
this.rowFilter = data.rowFilter;
this.imageResolver = data.imageResolver;
}
this.buttonActionName = this.actionName ? `NODE_SELECTOR.${this.actionName.toUpperCase()}` : 'NODE_SELECTOR.CHOOSE';
if (this.containingDialog) {
this.inDialog = true;