opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-08-01 00:51:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

grid: row work

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/core/constants.ts
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_CELL_VMARGIN = 10;
export const GRID_COLUMN_COUNT = 24; export const GRID_COLUMN_COUNT = 24;
export const REPEAT_DIR_VERTICAL = 'v'; export const REPEAT_DIR_VERTICAL = 'v';

3
public/app/features/dashboard/dashgrid/DashboardRow.tsx
View File

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

1
public/app/features/dashboard/panel_model.ts
View File

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

9
public/sass/components/_row.scss
View File

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