mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
nicer collapsed row behaviour (#12186)
* nicer collapsed row behavior * don't block events * use a div to toggle * use singular name
This commit is contained in:
parent
415ad8fbf3
commit
17a2ce13f0
@ -84,15 +84,18 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
|
||||
'fa-chevron-right': this.state.collapsed,
|
||||
});
|
||||
|
||||
let title = templateSrv.replaceWithText(this.props.panel.title, this.props.panel.scopedVars);
|
||||
const hiddenPanels = this.props.panel.panels ? this.props.panel.panels.length : 0;
|
||||
const title = templateSrv.replaceWithText(this.props.panel.title, this.props.panel.scopedVars);
|
||||
const count = this.props.panel.panels ? this.props.panel.panels.length : 0;
|
||||
const panels = count === 1 ? 'panel' : 'panels';
|
||||
|
||||
return (
|
||||
<div className={classes}>
|
||||
<a className="dashboard-row__title pointer" onClick={this.toggle}>
|
||||
<i className={chevronClass} />
|
||||
{title}
|
||||
<span className="dashboard-row__panel_count">({hiddenPanels} hidden panels)</span>
|
||||
<span className="dashboard-row__panel_count">
|
||||
({count} {panels})
|
||||
</span>
|
||||
</a>
|
||||
{this.dashboard.meta.canEdit === true && (
|
||||
<div className="dashboard-row__actions">
|
||||
@ -104,6 +107,11 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
{this.state.collapsed === true && (
|
||||
<div className="dashboard-row__toggle-target" onClick={this.toggle}>
|
||||
|
||||
</div>
|
||||
)}
|
||||
<div className="dashboard-row__drag grid-drag-handle" />
|
||||
</div>
|
||||
);
|
||||
|
@ -11,11 +11,20 @@
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dashboard-row__drag,
|
||||
.dashboard-row__actions {
|
||||
.dashboard-row__drag {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.dashboard-row__actions {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.dashboard-row__toggle-target {
|
||||
flex: 1;
|
||||
cursor: pointer;
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@ -43,7 +52,6 @@
|
||||
color: $text-muted;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
flex-grow: 1;
|
||||
transition: 200ms opacity ease-in 200ms;
|
||||
|
||||
a {
|
||||
@ -69,7 +77,7 @@
|
||||
cursor: move;
|
||||
width: 1rem;
|
||||
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;
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
|
Loading…
Reference in New Issue
Block a user