IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

nicer collapsed row behaviour (#12186)

Browse Source 
* nicer collapsed row behavior

* don't block events

* use a div to toggle

* use singular name
This commit is contained in:
Ryan McKinley 2018-06-06 21:58:42 -07:00 committed by Torkel Ödegaard
parent 415ad8fbf3
commit 17a2ce13f0
2 changed files with 23 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -84,15 +84,18 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
'fa-chevron-right': this.state.collapsed, 'fa-chevron-right': this.state.collapsed,
}); });
let title = templateSrv.replaceWithText(this.props.panel.title, this.props.panel.scopedVars); const title = templateSrv.replaceWithText(this.props.panel.title, this.props.panel.scopedVars);
const hiddenPanels = this.props.panel.panels ? this.props.panel.panels.length : 0; const count = this.props.panel.panels ? this.props.panel.panels.length : 0;
const panels = count === 1 ? 'panel' : 'panels';
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} />
{title} {title}
<span className="dashboard-row__panel_count">({hiddenPanels} hidden panels)</span> <span className="dashboard-row__panel_count">
({count} {panels})
</span>
</a> </a>
{this.dashboard.meta.canEdit === true && ( {this.dashboard.meta.canEdit === true && (
<div className="dashboard-row__actions"> <div className="dashboard-row__actions">
@ -104,6 +107,11 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
</a> </a>
</div> </div>
)} )}
{this.state.collapsed === true && (
<div className="dashboard-row__toggle-target" onClick={this.toggle}>
&nbsp;
</div>
)}
<div className="dashboard-row__drag grid-drag-handle" /> <div className="dashboard-row__drag grid-drag-handle" />
</div> </div>
); );

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

@ -11,11 +11,20 @@
display: inline-block; display: inline-block;
} }
.dashboard-row__drag, .dashboard-row__drag {
.dashboard-row__actions {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
} }
.dashboard-row__actions {
visibility: hidden;
}
.dashboard-row__toggle-target {
flex: 1;
cursor: pointer;
margin-right: 15px;
}
} }
&:hover { &:hover {
@ -43,7 +52,6 @@
color: $text-muted; color: $text-muted;
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
flex-grow: 1;
transition: 200ms opacity ease-in 200ms; transition: 200ms opacity ease-in 200ms;
a { a {
@ -69,7 +77,7 @@
cursor: move; cursor: move;
width: 1rem; width: 1rem;
height: 100%; height: 100%;
background: url("../img/grab_dark.svg") no-repeat 50% 50%; background: url('../img/grab_dark.svg') no-repeat 50% 50%;
background-size: 8px; background-size: 8px;
visibility: hidden; visibility: hidden;
position: absolute; position: absolute;