ux: work on rows

This commit is contained in:
Torkel Ödegaard
2017-10-17 14:53:52 +02:00
parent e375159eec
commit bc8c2409c0
7 changed files with 94 additions and 42 deletions

View File

@@ -70,7 +70,8 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
this.dashboard.on('panel-removed', this.triggerForceUpdate.bind(this));
this.dashboard.on('repeats-processed', this.triggerForceUpdate.bind(this));
this.dashboard.on('view-mode-changed', this.triggerForceUpdate.bind(this));
this.dashboard.on('row-collapse-changed', this.triggerForceUpdate.bind(this));
this.dashboard.on('row-collapsed', this.triggerForceUpdate.bind(this));
this.dashboard.on('row-expanded', this.triggerForceUpdate.bind(this));
}
buildLayout() {
@@ -98,7 +99,7 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
panelPos.w = GRID_COLUMN_COUNT;
panelPos.h = 1;
panelPos.isResizable = false;
panelPos.isDraggable = panel.collapse;
panelPos.isDraggable = panel.collapsed;
}
layout.push(panelPos);

View File

@@ -13,7 +13,7 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
super(props);
this.state = {
collapse: this.props.panel.collapse,
collapsed: this.props.panel.collapsed,
};
this.toggle = this.toggle.bind(this);
@@ -27,15 +27,15 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
dashboard.toggleRow(this.props.panel);
this.setState(prevState => {
return {collapse: !prevState.collapse};
return {collapsed: !prevState.collapsed};
});
}
openSettings() {}
render() {
const classes = classNames({'dashboard-row': true, 'dashboard-row--collapse': this.state.collapse});
const chevronClass = classNames({'fa': true, 'fa-chevron-down': !this.state.collapse, 'fa-chevron-right': this.state.collapse});
const classes = classNames({'dashboard-row': true, 'dashboard-row--collapsed': this.state.collapsed});
const chevronClass = classNames({'fa': true, 'fa-chevron-down': !this.state.collapsed, 'fa-chevron-right': this.state.collapsed});
const hiddenPanels = this.props.panel.panels ? this.props.panel.panels.length : 0;
return (