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

[ADF-696] Entire accordion group header should be clickable (#1918)

Browse Source 
* #ADF-696 Added new input to show/hide expand icon, click event is activated for the complete heading

* #ADF-696 tslint fix

* #ADF-696 Added documentation for new input and removed unwanted div
This commit is contained in:
Deepak Paul
2017-06-01 22:16:43 +05:30
committed by Eugenio Romano
parent 8afe6e2125
commit 2f79163451
4 changed files with 21 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.html
View File

@@ -1,12 +1,10 @@
<div class="adf-panel adf-panel-default" [ngClass]="{'adf-panel-open': isOpen}">
<div class="adf-panel-heading" [ngClass]="{'adf-panel-heading-selected': isSelected}">
<div (click)="onHeadingClick()">
<div id="heading-icon" *ngIf="hasHeadingIcon()" class="adf-panel-heading-icon">
<i class="material-icons">{{headingIcon}}</i>
</div>
<div id="heading-text" class="adf-panel-heading-text">{{heading}}</div>
<div class="adf-panel-heading" [ngClass]="{'adf-panel-heading-selected': isSelected}" (click)="onHeadingClick()">
<div id="heading-icon" *ngIf="hasHeadingIcon()" class="adf-panel-heading-icon">
<i class="material-icons">{{headingIcon}}</i>
</div>
<div id="accordion-button" *ngIf="!isGroupContentEmpty()" class="adf-panel-heading-toggle" (click)="toggleOpen($event)">
<div id="heading-text" class="adf-panel-heading-text">{{heading}}</div>
<div id="accordion-button" *ngIf="hasAccordionIcon" class="adf-panel-heading-toggle" (click)="toggleOpen($event)">
<i class="material-icons">{{getAccordionIcon()}}</i>
</div>
</div>

23
ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.spec.ts
View File

@@ -75,17 +75,6 @@ describe('AccordionGroupComponent', () => {
});
});
it('should hide expand icon by default', () => {
component.heading = 'Fake Header';
component.headingIcon = 'fake-icon';
component.contentWrapper.nativeElement.innerHTML = '';
fixture.whenStable().then(() => {
fixture.detectChanges();
let headerIcon = element.querySelector('#accordion-button');
expect(headerIcon).toBeNull();
});
});
it('should show expand icon by default', () => {
component.heading = 'Fake Header';
component.headingIcon = 'fake-icon';
@@ -97,6 +86,18 @@ describe('AccordionGroupComponent', () => {
});
});
it('should hide expand icon', () => {
component.heading = 'Fake Header';
component.headingIcon = 'fake-icon';
component.hasAccordionIcon = false;
component.contentWrapper.nativeElement.innerHTML = '<a>Test</a>';
fixture.whenStable().then(() => {
fixture.detectChanges();
let headerIcon = element.querySelector('#accordion-button');
expect(headerIcon).toBeNull();
});
});
it('should emit an event when a heading clicked', (done) => {
component.heading = 'Fake Header';
fixture.detectChanges();

7
ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.ts
View File

@@ -37,6 +37,9 @@ export class AccordionGroupComponent implements OnDestroy {
@Input()
headingIcon: string;
@Input()
hasAccordionIcon: boolean = true;
@Output()
headingClick: EventEmitter<any> = new EventEmitter<any>();
@@ -85,8 +88,4 @@ export class AccordionGroupComponent implements OnDestroy {
onHeadingClick() {
this.headingClick.emit(this.heading);
}
isGroupContentEmpty() {
return this.contentWrapper.nativeElement.innerHTML.trim().length === 0;
}
}