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

grid: minor progress on new row concept

Browse Source
This commit is contained in:
Torkel Ödegaard 2017-10-16 10:58:08 +02:00
parent 2ff4b86781
commit a979767439
3 changed files with 23 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,20 +19,15 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
render() {
return (
<div>
<div className="dashboard-row__center">
<div className="dashboard-row__actions-left">
<i className="fa fa-chevron-down" />
<i className="fa fa-chevron-right" />
</div>
<a className="dashboard-row__title pointer" onClick={this.toggle}>
<span className="dashboard-row__title-text">{this.props.panel.title}</span>
<div className="dashboard-row">
<a className="dashboard-row__title pointer" onClick={this.toggle}>
<i className="fa fa-chevron-down" />
{this.props.panel.title}
</a>
<div className="dashboard-row__actions">
<a className="pointer" onClick={this.openSettings}>
<i className="fa fa-cog" />
</a>
<div className="dashboard-row__actions-right">
<a className="pointer" onClick={this.openSettings}>
<i className="fa fa-cog" />
</a>
</div>
</div>
<div className="dashboard-row__panel_count">(0 hidden panels)</div>
<div className="dashboard-row__drag grid-drag-handle" />

5
public/app/features/dashboard/dashnav/dashnav.ts
View File

@ -146,6 +146,11 @@ export class DashNavCtrl {
}
addPanel() {
if (this.dashboard.panels[0].type === 'add-panel') {
this.dashboard.removePanel(this.dashboard.panels[0]);
return;
}
this.dashboard.addPanel({
type: 'add-panel',
gridPos: {x: 0, y: 0, w: 12, h: 9, static: true},

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

@ -2,11 +2,7 @@ $dashboard-row-height: 30px;
.dashboard-row {
display: flex;
height: $dashboard-row-height;
line-height: $dashboard-row-height;
align-items: center;
align-content: center;
justify-content: center;
height: 100%;
&--collapse {
background: $panel-bg;
@ -23,8 +19,7 @@ $dashboard-row-height: 30px;
}
&:hover {
.dashboard-row__actions-left,
.dashboard-row__actions-right {
.dashboard-row__actions {
visibility: visible;
opacity: 1;
transition: opacity 200ms ease-in-out 100ms;
@ -32,38 +27,24 @@ $dashboard-row-height: 30px;
}
}
.dashboard-row__center {
position: relative;
}
.dashboard-row__title {
@include brand-bottom-border();
position: relative;
flex-grow: 0;
font-size: 1.15rem;
font-weight: $font-weight-semi-bold;
padding: 0rem 1rem 0.3rem 1rem;
color: $text-color;
.fa {
color: $text-muted;
font-size: $font-size-sm;
padding-right: 0.5rem;
}
}
.dashboard-row__actions-left {
position: absolute;
left: -23px;
font-size: $font-size-xs;
.dashboard-row__actions {
color: $text-muted;
top: 1px;
visibility: hidden;
opacity: 0;
}
.dashboard-row__actions-right {
position: absolute;
right: -40px;
padding-right: 1rem;
font-size: $font-size-sm;
visibility: hidden;
opacity: 0;
top: 0px;
a {
color: $text-color-weak;
@ -74,10 +55,6 @@ $dashboard-row-height: 30px;
}
}
.dashboard-row__title-text {
color: $text-color;
}
.dashboard-row__panel_count {
color: $text-color-weak;
font-style: italic;