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-3354] removed the adf-accordion component to use material accordion (#3980)

Browse Source 
* [ADF-3354] removed the adf-accordion component to use material accordion

* [ADF-3354] fixed default opened state for the accordion

* [ADF-3354] fixed locator for new accordion menu
This commit is contained in:
Vito
2018-11-21 12:34:45 +00:00
committed by Eugenio Romano
parent 0a394869f5
commit 539850612e
22 changed files with 60 additions and 650 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,26 +0,0 @@
<mat-accordion class="adf-panel">
<mat-expansion-panel #expansionPanel
id="adf-expansion-panel-id"
(click)="isExpandable()"
[expanded]="toggleExpansion()"
(opened)="onHeaderClick()"
[hideToggle]="!hasAccordionIcon">
<mat-expansion-panel-header>
<mat-panel-title>
<div class="adf-panel-heading" data-automation-id="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>

55
lib/core/collapsable/accordion-group.component.scss
View File

@@ -1,55 +0,0 @@
@mixin adf-accordion-theme($theme) {
$primary: map-get($theme, primary);
.adf-panel {
&-heading {
float: left;
font-size: 14px;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
text-align: left;
width: 100%;
cursor: pointer;
}
&-heading-selected {
color: mat-color($primary);
}
&-heading-icon {
float: left;
}
&-heading-text {
float: left;
padding-left: 20px;
padding-top: 4px;
}
.mat-expansion-panel {
transition: none !important;
box-shadow: none !important;
background: none !important;
}
.mat-expansion-panel-body {
padding: 1px !important;
}
.mat-expansion-panel-header {
padding: 0px !important;
}
.mat-expansion-panel-header-title {
margin-right: 0px !important;
}
.mat-expansion-indicator {
margin-right: 25px !important;
}
}
}

129
lib/core/collapsable/accordion-group.component.spec.ts
View File

@@ -1,129 +0,0 @@
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { AccordionGroupComponent } from './accordion-group.component';
import { setupTestBed } from '../testing/setupTestBed';
import { CoreTestingModule } from '../testing/core.testing.module';
describe('AccordionGroupComponent', () => {
let fixture: ComponentFixture<AccordionGroupComponent>;
let component: AccordionGroupComponent;
let element: any;
setupTestBed({
imports: [CoreTestingModule]
});
beforeEach(() => {
fixture = TestBed.createComponent(AccordionGroupComponent);
element = fixture.nativeElement;
component = fixture.componentInstance;
});
afterEach(() => {
fixture.destroy();
});
it('should define mat-accordion ', async(() => {
component.isSelected = true;
component.heading = 'Fake Header';
component.headingIcon = 'fake-icon';
component.contentWrapper.nativeElement.innerHTML = '<a>Test</a>';
fixture.detectChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
let accordion = element.querySelector('mat-accordion');
let expansionPanel = element.querySelector('mat-expansion-panel');
let accordionHeader = element.querySelector('mat-expansion-panel-header');
let content = element.querySelector('#adf-expansion-panel-content-id').innerHTML;
expect(accordion).toBeDefined();
expect(expansionPanel).toBeDefined();
expect(accordionHeader).toBeDefined();
expect(content).toEqual('<a>Test</a>');
});
}));
it('should be display accordion title and icon', async(() => {
component.heading = 'Fake Header';
component.headingIcon = 'fake-icon';
component.contentWrapper.nativeElement.innerHTML = '<a>Test</a>';
fixture.whenStable().then(() => {
fixture.detectChanges();
let headerText = element.querySelector('#heading-text');
let headerIcon = element.querySelector('#adf-expansion-panel-id .material-icons');
expect(headerText.innerText).toEqual('Fake Header');
expect(headerIcon.innerText).toEqual('fake-icon');
});
}));
it('should be display only accordion title', async(() => {
component.heading = 'Fake Header';
component.headingIcon = '';
component.contentWrapper.nativeElement.innerHTML = '<a>Test</a>';
fixture.whenStable().then(() => {
fixture.detectChanges();
let headerText = element.querySelector('#heading-text');
let headerIcon = element.querySelector('#adf-expansion-panel-id .material-icons');
expect(headerText.innerText).toEqual('Fake Header');
expect(headerIcon).toBeNull();
});
}));
it('should be display accordion title and content', async(() => {
component.isSelected = true;
component.heading = 'Fake Header';
component.headingIcon = 'fake-icon';
component.contentWrapper.nativeElement.innerHTML = '<a>Test</a>';
fixture.detectChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
let headerText = element.querySelector('#heading-text');
let headerIcon = element.querySelector('#heading-icon .material-icons');
let content = element.querySelector('#adf-expansion-panel-content-id').innerHTML;
expect(headerText.innerText).toEqual('Fake Header');
expect(headerIcon.innerText).toEqual('fake-icon');
expect(content).toEqual('<a>Test</a>');
});
}));
it('should emit an event when a heading clicked', async(() => {
component.heading = 'Fake Header';
fixture.detectChanges();
let heading: string = component.heading;
component.headingClick.subscribe((headName: string) => {
expect(headName).toBeDefined();
expect(headName).toEqual(heading);
});
let header = element.querySelector('.adf-panel-heading');
header.click();
}));
it('should display icon if is present', (done) => {
component.headingIcon = 'assignment';
fixture.detectChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(component.hasHeadingIcon()).toBe(true);
let headerText = element.querySelector('.adf-panel-heading-icon');
expect(headerText).toBeDefined();
done();
});
});
});

105
lib/core/collapsable/accordion-group.component.ts
View File

@@ -1,105 +0,0 @@
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { AfterViewInit , Component, ElementRef, EventEmitter, Input, Output, ViewChild, ViewEncapsulation } from '@angular/core';
import { MatExpansionPanel } from '@angular/material';
@Component({
selector: 'adf-accordion-group',
templateUrl: 'accordion-group.component.html',
styleUrls: ['./accordion-group.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class AccordionGroupComponent implements AfterViewInit {
private _isOpen: boolean = false;
private _isSelected: boolean = false;
@ViewChild('contentWrapper')
contentWrapper: ElementRef;
@ViewChild('expansionPanel') expansionPanel: MatExpansionPanel;
/** Title heading for the group. */
@Input()
heading: string;
/** The material design icon. */
@Input()
headingIcon: string;
/** Tooltip message to be shown for headingIcon */
@Input()
headingIconTooltip: string;
/** Should the (expanded) accordion icon be shown? */
@Input()
hasAccordionIcon: boolean = true;
/** Emitted when the heading is clicked. */
@Output()
headingClick: EventEmitter<any> = new EventEmitter<any>();
/** Is this group currently open? */
@Input()
set isOpen(value: boolean) {
this._isOpen = value;
}
get isOpen() {
return this._isOpen;
}
/** Is this group currently selected? */
@Input()
set isSelected(value: boolean) {
this._isSelected = value;
}
get isSelected() {
return this._isSelected;
}
hasContent: boolean;
constructor() { }
ngAfterViewInit() {
this.hasContent = this.contentWrapper.nativeElement && this.contentWrapper.nativeElement.children.length > 0;
}
hasHeadingIcon() {
return !!this.headingIcon;
}
onHeaderClick(): void {
this.headingClick.emit(this.heading);
}
isExpandable() {
if (!this.hasContent || !this.isOpen) {
this.expandPanel();
}
}
expandPanel() {
this.expansionPanel.expanded = !this.expansionPanel.expanded;
}
toggleExpansion(): boolean {
return this.isOpen && this.isSelected;
}
}

40
lib/core/collapsable/accordion.component.spec.ts
View File

@@ -1,40 +0,0 @@
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AccordionComponent } from './accordion.component';
import { setupTestBed } from '../testing/setupTestBed';
import { CoreTestingModule } from '../testing/core.testing.module';
describe('AccordionComponent', () => {
let fixture: ComponentFixture<AccordionComponent>;
let component: AccordionComponent;
setupTestBed({
imports: [CoreTestingModule]
});
beforeEach(() => {
fixture = TestBed.createComponent(AccordionComponent);
component = fixture.componentInstance;
});
it('should create the component', () => {
expect(component).toBeTruthy();
});
});

30
lib/core/collapsable/accordion.component.ts
View File

@@ -1,30 +0,0 @@
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'adf-accordion',
template: `
<ng-content></ng-content>
`,
host: {
'class': 'panel-group'
},
encapsulation: ViewEncapsulation.None
})
export class AccordionComponent {}

41
lib/core/collapsable/collapsable.module.ts
View File

@@ -1,41 +0,0 @@
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MaterialModule } from '../material.module';
import { AccordionGroupComponent } from './accordion-group.component';
import { AccordionComponent } from './accordion.component';
// @deprecated 2.3.0 use the material accordion
@NgModule({
imports: [
MaterialModule,
CommonModule
],
declarations: [
AccordionComponent,
AccordionGroupComponent
],
exports: [
AccordionComponent,
AccordionGroupComponent
]
})
export class CollapsableModule {}

18
lib/core/collapsable/index.ts
View File

@@ -1,18 +0,0 @@
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export * from './public-api';

21
lib/core/collapsable/public-api.ts
View File

@@ -1,21 +0,0 @@
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export * from './accordion-group.component';
export * from './accordion.component';
export * from './collapsable.module';

5
lib/core/core.module.ts
View File

@@ -26,7 +26,6 @@ import { MaterialModule } from './material.module';
import { AboutModule } from './about/about.module';
import { AppConfigModule } from './app-config/app-config.module';
import { CardViewModule } from './card-view/card-view.module';
import { CollapsableModule } from './collapsable/collapsable.module';
import { ContextMenuModule } from './context-menu/context-menu.module';
import { DataColumnModule } from './data-column/data-column.module';
import { DataTableModule } from './datatable/datatable.module';
@@ -79,7 +78,6 @@ export function createTranslateLoader(http: HttpClient) {
ToolbarModule,
ContextMenuModule,
CardViewModule,
CollapsableModule,
FormModule,
CommentsModule,
LoginModule,
@@ -117,7 +115,6 @@ export function createTranslateLoader(http: HttpClient) {
ToolbarModule,
ContextMenuModule,
CardViewModule,
CollapsableModule,
FormModule,
CommentsModule,
LoginModule,
@@ -153,7 +150,6 @@ export class CoreModuleLazy {
ToolbarModule,
ContextMenuModule,
CardViewModule,
CollapsableModule,
FormModule,
CommentsModule,
LoginModule,
@@ -191,7 +187,6 @@ export class CoreModuleLazy {
ToolbarModule,
ContextMenuModule,
CardViewModule,
CollapsableModule,
FormModule,
CommentsModule,
LoginModule,

1
lib/core/index.ts
View File

@@ -27,7 +27,6 @@ export * from './info-drawer/index';
export * from './data-column/index';
export * from './datatable/index';
export * from './context-menu/index';
export * from './collapsable/index';
export * from './card-view/index';
export * from './app-config/index';
export * from './form/index';

2
lib/core/styles/_index.scss
View File

@@ -3,7 +3,6 @@
@import './theming';
@import '../card-view/card-view.module';
@import '../collapsable/accordion-group.component';
@import '../datatable/components/datatable/datatable.component';
@import '../form/components/widgets/container/container.widget';
@import '../form/components/widgets/dynamic-table/dynamic-table.widget';
@@ -37,7 +36,6 @@
@include adf-colors-theme($theme);
@include adf-default-class-theme($theme);
@include adf-card-view-module-theme($theme);
@include adf-accordion-theme($theme);
@include adf-datatable-theme($theme);
@include adf-form-container-widget-theme($theme);
@include adf-dynamic-table-theme($theme);