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-2709] Replace the ADF accordion with material accordion (#3187)

Browse Source 
* [DW-569] Replace the ADF accordion with material accordion

* * Added  testcases for the recent changes.

* * Used angular materail mat-accordion
* Refactored accordion/group component

* * Refactored accordion group component.

* * Refactored accordion scss
This commit is contained in:
siva kumar
2018-04-21 04:37:07 +05:30
committed by Eugenio Romano
parent 5a255d27fd
commit 9fbfcfa96e
7 changed files with 114 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
lib/core/collapsable/accordion-group.component.html
View File

@@ -1,20 +1,26 @@
<div class="adf-panel adf-panel-default" [ngClass]="{'adf-panel-open': isOpen}">
<div class="adf-panel-heading" [ngClass]="{'adf-panel-heading-selected': isSelected}" (click)="toggleOpen($event)">
<div id="heading-icon" *ngIf="hasHeadingIcon()" class="adf-panel-heading-icon">
<mat-icon class="material-icons"
[matTooltip]="headingIconTooltip"
[matTooltipDisabled]="!headingIconTooltip">
{{headingIcon}}
</mat-icon>
</div>
<div id="heading-text" class="adf-panel-heading-text">{{heading}}</div>
<div id="accordion-button" *ngIf="hasAccordionIcon" class="adf-panel-heading-toggle">
<i class="material-icons">{{getAccordionIcon()}}</i>
</div>
</div>
<div class="adf-panel-collapse" [hidden]="!isOpen">
<div class="adf-panel-body" #contentWrapper>
<ng-content></ng-content>
</div>
</div>
</div>
<mat-accordion class="adf-panel">
<mat-expansion-panel #expansionPanel
id="adf-expansion-panel-id"
(click)="isExpandable($event)"
[expanded]="toggleExpansion()"
(opened)="onHeaderClick()"
[hideToggle]="!hasAccordionIcon">
<mat-expansion-panel-header>
<mat-panel-title>
<div class="adf-panel-heading" [ngClass]="{'adf-panel-heading-selected': isSelected}">
<div id="heading-icon" *ngIf="hasHeadingIcon()" class="adf-panel-heading-icon">
<mat-icon class="material-icons"
[matTooltip]="headingIconTooltip"
[matTooltipDisabled]="!headingIconTooltip">
{{headingIcon}}
</mat-icon>
</div>
<div id="heading-text" class="adf-panel-heading-text">{{heading}}</div>
</div>
</mat-panel-title>
</mat-expansion-panel-header>
<div id="adf-expansion-panel-content-id" #contentWrapper>
<ng-content></ng-content>
</div>
</mat-expansion-panel>
</mat-accordion>