Skip to content

N
nexpie-grafana-theme
Commit a9797674 by Torkel Ödegaard
Options

grid: minor progress on new row concept

parent 2ff4b867
Showing with 18 additions and 41 deletions
public/app/features/dashboard/dashgrid/DashboardRow.tsx
...@@ -19,21 +19,16 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> { ...@@ -19,21 +19,16 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
render() { render() {
return ( return (
<div> <div className="dashboard-row">
<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}> <a className="dashboard-row__title pointer" onClick={this.toggle}>
<span className="dashboard-row__title-text">{this.props.panel.title}</span> <i className="fa fa-chevron-down" />
{this.props.panel.title}
</a> </a>
<div className="dashboard-row__actions-right"> <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>
<div className="dashboard-row__panel_count">(0 hidden panels)</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>
......
public/app/features/dashboard/dashnav/dashnav.ts
...@@ -146,6 +146,11 @@ export class DashNavCtrl { ...@@ -146,6 +146,11 @@ export class DashNavCtrl {
} }
addPanel() { addPanel() {
if (this.dashboard.panels[0].type === 'add-panel') {
this.dashboard.removePanel(this.dashboard.panels[0]);
return;
}
this.dashboard.addPanel({ this.dashboard.addPanel({
type: 'add-panel', type: 'add-panel',
gridPos: {x: 0, y: 0, w: 12, h: 9, static: true}, gridPos: {x: 0, y: 0, w: 12, h: 9, static: true},
......
public/sass/components/_row.scss
...@@ -2,11 +2,7 @@ $dashboard-row-height: 30px; ...@@ -2,11 +2,7 @@ $dashboard-row-height: 30px;
.dashboard-row { .dashboard-row {
display: flex; display: flex;
height: $dashboard-row-height; height: 100%;
line-height: $dashboard-row-height;
align-items: center;
align-content: center;
justify-content: center;
&--collapse { &--collapse {
background: $panel-bg; background: $panel-bg;
...@@ -23,8 +19,7 @@ $dashboard-row-height: 30px; ...@@ -23,8 +19,7 @@ $dashboard-row-height: 30px;
} }
&:hover { &:hover {
.dashboard-row__actions-left, .dashboard-row__actions {
.dashboard-row__actions-right {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
transition: opacity 200ms ease-in-out 100ms; transition: opacity 200ms ease-in-out 100ms;
...@@ -32,38 +27,24 @@ $dashboard-row-height: 30px; ...@@ -32,38 +27,24 @@ $dashboard-row-height: 30px;
} }
} }
.dashboard-row__center {
position: relative;
}
.dashboard-row__title { .dashboard-row__title {
@include brand-bottom-border();
position: relative;
flex-grow: 0; flex-grow: 0;
font-size: 1.15rem; font-size: 1.15rem;
font-weight: $font-weight-semi-bold; font-weight: $font-weight-semi-bold;
padding: 0rem 1rem 0.3rem 1rem; padding: 0rem 1rem 0.3rem 1rem;
} color: $text-color;
.dashboard-row__actions-left { .fa {
position: absolute;
left: -23px;
font-size: $font-size-xs;
color: $text-muted; color: $text-muted;
top: 1px; font-size: $font-size-sm;
visibility: hidden; padding-right: 0.5rem;
opacity: 0; }
} }
.dashboard-row__actions-right { .dashboard-row__actions {
position: absolute; color: $text-muted;
right: -40px;
padding-right: 1rem;
font-size: $font-size-sm;
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
top: 0px;
a { a {
color: $text-color-weak; color: $text-color-weak;
...@@ -74,10 +55,6 @@ $dashboard-row-height: 30px; ...@@ -74,10 +55,6 @@ $dashboard-row-height: 30px;
} }
} }
.dashboard-row__title-text {
color: $text-color;
}
.dashboard-row__panel_count { .dashboard-row__panel_count {
color: $text-color-weak; color: $text-color-weak;
font-style: italic; font-style: italic;
......
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