grid: row work

This commit is contained in:
Torkel Ödegaard 2017-10-17 12:04:18 +02:00
parent d8230f8fa7
commit e375159eec
4 changed files with 10 additions and 5 deletions

View File

@ -1,5 +1,5 @@
export const GRID_CELL_HEIGHT = 20;
export const GRID_CELL_HEIGHT = 30;
export const GRID_CELL_VMARGIN = 10;
export const GRID_COLUMN_COUNT = 24;
export const REPEAT_DIR_VERTICAL = 'v';

View File

@ -36,19 +36,20 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
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 hiddenPanels = this.props.panel.panels ? this.props.panel.panels.length : 0;
return (
<div className={classes}>
<a className="dashboard-row__title pointer" onClick={this.toggle}>
<i className={chevronClass} />
{this.props.panel.title}
<span className="dashboard-row__panel_count">({hiddenPanels} hidden panels)</span>
</a>
<div className="dashboard-row__actions">
<a className="pointer" onClick={this.openSettings}>
<i className="fa fa-cog" />
</a>
</div>
<div className="dashboard-row__panel_count">(0 hidden panels)</div>
<div className="dashboard-row__drag grid-drag-handle" />
</div>
);

View File

@ -28,6 +28,7 @@ export class PanelModel {
repeatDirection?: string;
minSpan?: number;
collapse?: boolean;
panels?: any;
// non persisted
fullscreen: boolean;

View File

@ -1,12 +1,14 @@
.dashboard-row {
display: flex;
align-items: center;
height: 100%;
&--collapse {
background: $panel-bg;
.dashboard-row__panel_count {
display: block;
display: inline-block;
}
.dashboard-row__drag,
@ -33,8 +35,8 @@
.fa {
color: $text-muted;
font-size: $font-size-sm;
padding-right: 0.5rem;
font-size: $font-size-xs;
padding: 0 0.5rem;
}
}
@ -55,6 +57,7 @@
}
.dashboard-row__panel_count {
padding-left: $spacer;
color: $text-color-weak;
font-style: italic;
font-size: $font-size-sm;