#469 collapsible headers

This commit is contained in:
Denys Vuika 2016-07-26 12:09:35 +01:00
parent ef0c77a162
commit 026c509df4
4 changed files with 57 additions and 2 deletions

View File

@ -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;
}

View File

@ -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">

View File

@ -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) {

View File

@ -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();
}
}
}