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-1906] Accordion Menu - Provide a way to show the tooltip (#2641)

Browse Source 
* Added tooltip for accordion header icon
This commit is contained in:
Deepak Paul
2017-11-13 23:20:57 +05:30
committed by Eugenio Romano
parent 9608beba9f
commit 961e89ea73
6 changed files with 24 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
docs/accordion-group.component.md
View File

@@ -21,7 +21,7 @@ Adds a collapsible panel to an [accordion menu](accordion.component.md).
```html ```html
<adf-accordion> <adf-accordion>
<adf-accordion-group [heading]="titleHeading" [isSelected]="true" [headingIcon]="'assignment'"> <adf-accordion-group [heading]="titleHeading" [isSelected]="true" [headingIcon]="'assignment'" [headingIconTooltip]="'Group Tooltip'">
<my-list></my-list> <my-list></my-list>
</adf-accordion-group> </adf-accordion-group>
</adf-accordion> </adf-accordion>
@@ -50,6 +50,7 @@ export class MyComponent implements OnInit {
| isSelected | boolean | Is this group currently selected? | | isSelected | boolean | Is this group currently selected? |
| headingIcon | string | The material design icon. | | headingIcon | string | The material design icon. |
| hasAccordionIcon | boolean | Should the (expanded) accordion icon be shown? Defaults to true | | hasAccordionIcon | boolean | Should the (expanded) accordion icon be shown? Defaults to true |
| headingIconTooltip | string | Tooltip message to be shown for headingIcon |
## Details ## Details

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

@@ -1,7 +1,11 @@
<div class="adf-panel adf-panel-default" [ngClass]="{'adf-panel-open': isOpen}"> <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 class="adf-panel-heading" [ngClass]="{'adf-panel-heading-selected': isSelected}" (click)="toggleOpen($event)">
<div id="heading-icon" *ngIf="hasHeadingIcon()" class="adf-panel-heading-icon"> <div id="heading-icon" *ngIf="hasHeadingIcon()" class="adf-panel-heading-icon">
<i class="material-icons">{{headingIcon}}</i> <i class="material-icons"
[matTooltip]="headingIconTooltip"
[matTooltipDisabled]="!headingIconTooltip">
{{headingIcon}}
</i>
</div> </div>
<div id="heading-text" class="adf-panel-heading-text">{{heading}}</div> <div id="heading-text" class="adf-panel-heading-text">{{heading}}</div>
<div id="accordion-button" *ngIf="hasAccordionIcon" class="adf-panel-heading-toggle"> <div id="accordion-button" *ngIf="hasAccordionIcon" class="adf-panel-heading-toggle">

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

@@ -19,6 +19,8 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { AccordionGroupComponent } from './accordion-group.component'; import { AccordionGroupComponent } from './accordion-group.component';
import { AccordionComponent } from './accordion.component'; import { AccordionComponent } from './accordion.component';
import { MaterialModule } from '../../material.module';
describe('AccordionGroupComponent', () => { describe('AccordionGroupComponent', () => {
let fixture: ComponentFixture<AccordionGroupComponent>; let fixture: ComponentFixture<AccordionGroupComponent>;
@@ -27,6 +29,9 @@ describe('AccordionGroupComponent', () => {
beforeEach(async(() => { beforeEach(async(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
imports: [
MaterialModule
],
declarations: [ declarations: [
AccordionGroupComponent AccordionGroupComponent
], ],

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

@@ -37,6 +37,9 @@ export class AccordionGroupComponent implements OnDestroy {
@Input() @Input()
headingIcon: string; headingIcon: string;
@Input()
headingIconTooltip: string;
@Input() @Input()
hasAccordionIcon: boolean = true; hasAccordionIcon: boolean = true;

7
ng2-components/ng2-alfresco-core/src/components/collapsable/collapsable.module.ts
View File

@@ -17,13 +17,15 @@
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { MatTooltipModule } from '@angular/material';
import { AccordionGroupComponent } from './accordion-group.component'; import { AccordionGroupComponent } from './accordion-group.component';
import { AccordionComponent } from './accordion.component'; import { AccordionComponent } from './accordion.component';
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule CommonModule,
MatTooltipModule
], ],
declarations: [ declarations: [
AccordionComponent, AccordionComponent,
@@ -31,7 +33,8 @@ import { AccordionComponent } from './accordion.component';
], ],
exports: [ exports: [
AccordionComponent, AccordionComponent,
AccordionGroupComponent AccordionGroupComponent,
MatTooltipModule
] ]
}) })
export class CollapsableModule {} export class CollapsableModule {}

6
ng2-components/ng2-alfresco-core/src/material.module.ts
View File

@@ -27,7 +27,8 @@ import {
MatProgressSpinnerModule, MatProgressSpinnerModule,
MatSnackBarModule, MatSnackBarModule,
MatTabsModule, MatTabsModule,
MatToolbarModule MatToolbarModule,
MatTooltipModule
} from '@angular/material'; } from '@angular/material';
export function modules() { export function modules() {
@@ -42,7 +43,8 @@ export function modules() {
MatTabsModule, MatTabsModule,
MatMenuModule, MatMenuModule,
MatIconModule, MatIconModule,
MatCardModule MatCardModule,
MatTooltipModule
]; ];
} }