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

[MNT-21469] TreeView component has events on icon only (#5637)

Browse Source 
* change mat-icon-button with mat-button

* align icon and label

* fix aria-label undefined value

* fix translation

* simplify html structure

* test
This commit is contained in:
Cilibiu Bogdan
2020-04-24 17:08:19 +03:00
committed by GitHub
parent d0f58600bc
commit 697ce6e365
4 changed files with 23 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
lib/content-services/src/lib/i18n/en.json
View File

@@ -342,7 +342,10 @@
} }
}, },
"ADF-TREE-VIEW": { "ADF-TREE-VIEW": {
"MISSING-ID": "No nodeId provided!" "MISSING-ID": "No nodeId provided!",
"ACCESSIBILITY": {
"ARIA_LABEL": "Toggle {{ name }}"
}
}, },
"LIBRARY": { "LIBRARY": {
"DIALOG": { "DIALOG": {

8
lib/content-services/src/lib/tree-view/components/tree-view.component.html
View File

@@ -8,13 +8,15 @@
<mat-tree-node class="adf-tree-view-node" <mat-tree-node class="adf-tree-view-node"
id="{{treeNode.name + '-tree-child-node'}}" *matTreeNodeDef="let treeNode; when: hasChild" id="{{treeNode.name + '-tree-child-node'}}" *matTreeNodeDef="let treeNode; when: hasChild"
matTreeNodePadding [matTreeNodePaddingIndent]="15"> matTreeNodePadding [matTreeNodePaddingIndent]="15">
<button id="{{'button-'+treeNode.name}}" (click)="onNodeClicked(treeNode.node)" <button matTreeNodeToggle id="{{'button-'+treeNode.name}}" (click)="onNodeClicked(treeNode.node)"
mat-icon-button [attr.aria-label]="'toggle ' + treeNode.filename" matTreeNodeToggle> mat-icon-button [attr.aria-label]="'ADF-TREE-VIEW.ACCESSIBILITY.ARIA_LABEL' | translate: {
name: treeNode.name
}">
<mat-icon class="adf-tree-view-icon"> <mat-icon class="adf-tree-view-icon">
{{treeControl.isExpanded(treeNode) ? 'folder_open' : 'folder'}} {{treeControl.isExpanded(treeNode) ? 'folder_open' : 'folder'}}
</mat-icon> </mat-icon>
</button> </button>
{{treeNode.name}} <span class="adf-tree-view-label" matTreeNodeToggle (click)="onNodeClicked(treeNode.node)">{{treeNode.name}}</span>
</mat-tree-node> </mat-tree-node>
</mat-tree> </mat-tree>
<ng-template #missingNodeId> <ng-template #missingNodeId>

4
lib/content-services/src/lib/tree-view/components/tree-view.component.scss
View File

@@ -13,5 +13,9 @@
font-size: 12px; font-size: 12px;
align-items: baseline; align-items: baseline;
} }
&-tree-view-label {
cursor: pointer;
}
} }
} }

10
lib/content-services/src/lib/tree-view/components/tree-view.component.spec.ts
View File

@@ -188,6 +188,16 @@ describe('TreeViewComponent', () => {
}); });
}); });
})); }));
it('should show the subfolders when the label is clicked', async(() => {
const rootLabel: HTMLButtonElement = <HTMLButtonElement> element.querySelector('.adf-tree-view-label');
rootLabel.click();
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(element.querySelector('#fake-child-name-tree-child-node')).not.toBeNull();
expect(element.querySelector('#fake-second-name-tree-child-node')).not.toBeNull();
});
}));
}); });
describe('When no nodeId is given', () => { describe('When no nodeId is given', () => {