mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-26 17:24:56 +00:00
#469 collapsible headers
This commit is contained in:
parent
ef0c77a162
commit
026c509df4
@ -6,4 +6,15 @@
|
||||
border-bottom: 1px solid rgba(0,0,0,.87);
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
cursor: default;
|
||||
|
||||
user-select: none;
|
||||
-webkit-user-select: none; /* Chrome/Safari/Opera */
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-ms-user-select: none; /* IE/Edge */
|
||||
-webkit-touch-callout: none; /* iOS Safari */
|
||||
}
|
||||
|
||||
.container-widget__header-text.collapsible {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
@ -1,8 +1,17 @@
|
||||
<div class="container-widget">
|
||||
<div *ngIf="content?.isGroup()" class="container-widget__header">
|
||||
<h3 class="container-widget__header-text">{{content.name}}</h3>
|
||||
<h3 class="container-widget__header-text"
|
||||
[class.collapsible]="content?.isCollapsible()">
|
||||
<button *ngIf="content?.isCollapsible()"
|
||||
alfresco-mdl-button
|
||||
class="mdl-button--icon"
|
||||
(click)="onExpanderClicked()">
|
||||
<i class="material-icons">{{ content?.isExpanded ? 'expand_less' : 'expand_more' }}</i>
|
||||
</button>
|
||||
<span (click)="onExpanderClicked()">{{content.name}}</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="mdl-grid">
|
||||
<div class="mdl-grid" *ngIf="content?.isExpanded">
|
||||
<div *ngFor="let col of content.columns" class="mdl-cell mdl-cell--{{col.size}}-col">
|
||||
<div class="mdl-grid" *ngIf="col.hasFields()">
|
||||
<div *ngFor="let field of col.fields" class="mdl-cell mdl-cell--12-col">
|
||||
|
@ -18,6 +18,7 @@
|
||||
import { Component, Input, AfterViewInit } from '@angular/core';
|
||||
import { ContainerModel } from './../widget.model';
|
||||
|
||||
import { MATERIAL_DESIGN_DIRECTIVES } from 'ng2-alfresco-core';
|
||||
import { TextWidget } from './../text/text.widget';
|
||||
import { NumberWidget } from './../number/number.widget';
|
||||
import { CheckboxWidget } from './../checkbox/checkbox.widget';
|
||||
@ -33,6 +34,7 @@ declare var componentHandler;
|
||||
templateUrl: './container.widget.html',
|
||||
styleUrls: ['./container.widget.css'],
|
||||
directives: [
|
||||
MATERIAL_DESIGN_DIRECTIVES,
|
||||
TextWidget,
|
||||
NumberWidget,
|
||||
CheckboxWidget,
|
||||
@ -45,6 +47,12 @@ export class ContainerWidget implements AfterViewInit {
|
||||
@Input()
|
||||
content: ContainerModel;
|
||||
|
||||
onExpanderClicked() {
|
||||
if (this.content && this.content.isCollapsible()) {
|
||||
this.content.isExpanded = !this.content.isExpanded;
|
||||
}
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
// workaround for MDL issues with dynamic components
|
||||
if (componentHandler) {
|
||||
|
@ -159,6 +159,7 @@ export class ContainerColumnModel {
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: inherit FormFieldModel
|
||||
export class ContainerModel extends FormWidgetModel {
|
||||
|
||||
fieldType: string;
|
||||
@ -167,6 +168,7 @@ export class ContainerModel extends FormWidgetModel {
|
||||
type: string;
|
||||
tab: string;
|
||||
numberOfColumns: number = 1;
|
||||
params: FormFieldMetadata = {};
|
||||
|
||||
columns: ContainerColumnModel[] = [];
|
||||
|
||||
@ -174,6 +176,28 @@ export class ContainerModel extends FormWidgetModel {
|
||||
return this.type == FormFieldTypes.GROUP;
|
||||
}
|
||||
|
||||
isExpanded: boolean = true;
|
||||
|
||||
isCollapsible(): boolean {
|
||||
let allowCollapse = false;
|
||||
|
||||
if (this.isGroup() && this.params['allowCollapse']) {
|
||||
allowCollapse = <boolean> this.params['allowCollapse'];
|
||||
}
|
||||
|
||||
return allowCollapse;
|
||||
}
|
||||
|
||||
isCollapsedByDefault(): boolean {
|
||||
let collapseByDefault = false;
|
||||
|
||||
if (this.isCollapsible() && this.params['collapseByDefault']) {
|
||||
collapseByDefault = <boolean> this.params['collapseByDefault'];
|
||||
}
|
||||
|
||||
return collapseByDefault;
|
||||
}
|
||||
|
||||
constructor(form: FormModel, json?: any) {
|
||||
super(form, json);
|
||||
|
||||
@ -184,6 +208,7 @@ export class ContainerModel extends FormWidgetModel {
|
||||
this.type = json.type;
|
||||
this.tab = json.tab;
|
||||
this.numberOfColumns = <number> json.numberOfColumns;
|
||||
this.params = <FormFieldMetadata> json.params || {};
|
||||
|
||||
let columnSize: number = 12;
|
||||
if (this.numberOfColumns > 1) {
|
||||
@ -201,6 +226,8 @@ export class ContainerModel extends FormWidgetModel {
|
||||
let col = this.columns[parseInt(key, 10) - 1];
|
||||
col.fields = fields;
|
||||
});
|
||||
|
||||
this.isExpanded = !this.isCollapsedByDefault();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user