Commit e375159e by Torkel Ödegaard

grid: row work

parent d8230f8f
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';
......
......@@ -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>
);
......
......@@ -28,6 +28,7 @@ export class PanelModel {
repeatDirection?: string;
minSpan?: number;
collapse?: boolean;
panels?: any;
// non persisted
fullscreen: boolean;
......
.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;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment