diff --git a/public/app/core/components/row_ctrl.ts b/public/app/core/components/row_ctrl.ts
index 535ccd9d413..2da4fa370ce 100644
--- a/public/app/core/components/row_ctrl.ts
+++ b/public/app/core/components/row_ctrl.ts
@@ -6,16 +6,21 @@ export class DashboardRowCtrl {
static template = `
-
-
+
+
+
+
+ {{ctrl.panel.title | interpolateTemplateVars:this}}
- {{ctrl.panel.title | interpolateTemplateVars:this}}
+
+ ({{ctrl.panel.hiddenPanels.length}} hidden panels)
+
+
+
`;
dashboard: any;
@@ -69,6 +74,21 @@ export class DashboardRowCtrl {
}
}
+ moveUp() {
+ // let panelIndex = _.indexOf(this.dashboard.panels, this.panel);
+ // let rowAbove = null;
+ // for (let index = panelIndex-1; index > 0; index--) {
+ // panel = this.dashboard.panels[index];
+ // if (panel.type === 'row') {
+ // rowAbove = panel;
+ // }
+ // }
+ //
+ // if (rowAbove) {
+ // this.panel.y = rowAbove.y;
+ // }
+ }
+
link(scope, elem) {
elem.addClass('dashboard-row');
diff --git a/public/app/features/dashboard/dashgrid/dashgrid.ts b/public/app/features/dashboard/dashgrid/dashgrid.ts
index 417a17145eb..45bc310d2c2 100644
--- a/public/app/features/dashboard/dashgrid/dashgrid.ts
+++ b/public/app/features/dashboard/dashgrid/dashgrid.ts
@@ -1,6 +1,7 @@
///
import $ from 'jquery';
+import _ from 'lodash';
import coreModule from 'app/core/core_module';
import {DashboardModel, CELL_HEIGHT, CELL_VMARGIN} from '../model';
@@ -169,6 +170,15 @@ export function dashGridItem($timeout, $rootScope) {
'data-gs-no-resize': panel.type === 'row',
});
+ // listen for row moments
+ scope.$watch("panel.y", function(newModelY) {
+ let elementY = parseInt(element.attr('data-gs-y'));
+ console.log('new panel y', newModelY, elementY);
+ if (_.isNumber(newModelY) && elementY !== newModelY) {
+ gridCtrl.gridstack.move(element, panel.x, panel.y);
+ }
+ });
+
$rootScope.onAppEvent('panel-fullscreen-exit', (evt, payload) => {
if (panel.id !== payload.panelId) {
return;
diff --git a/public/sass/components/_row.scss b/public/sass/components/_row.scss
index 85c3dca4acc..fe702506ee7 100644
--- a/public/sass/components/_row.scss
+++ b/public/sass/components/_row.scss
@@ -1,24 +1,35 @@
+$dashboard-row-height: 30px;
.dashboard-row {
display: flex;
- height: 30px;
+ height: $dashboard-row-height;
+ line-height: $dashboard-row-height;
align-items: center;
padding: 0 0.5rem;
&--collapse {
background: $panel-bg;
- border: $panel-border;
- margin-bottom: $panel-margin*2;
+
+ .dashboard-row__panel_count {
+ display: block;
+ }
+
+ .dashboard-row__drag,
+ .dashboard-row__actions {
+ visibility: visible;
+ opacity: 1;
+ }
}
&:hover {
.dashboard-row__chevron {
color: $link-color;
}
+
.dashboard-row__actions {
visibility: visible;
opacity: 1;
- transition: opacity 300ms ease-in-out 200ms;
+ transition: opacity 200ms ease-in-out 100ms;
}
}
}
@@ -38,16 +49,17 @@
font-size: $font-size-xs;
color: $text-muted;
position: relative;
- top: 5px;
+ top: 1px;
}
.dashboard-row__actions {
+ padding-right: 1rem;
font-size: $font-size-sm;
visibility: hidden;
opacity: 0;
a {
color: $text-color-weak;
- padding-left: 5px;
+ padding-left: $spacer;
&:hover {
color: $link-hover-color;
}
@@ -59,6 +71,23 @@
color: $text-color;
}
+.dashboard-row__panel_count {
+ color: $text-color-weak;
+ font-style: italic;
+ font-size: $font-size-sm;
+ font-weight: normal;
+ display: none;
+}
+
+.dashboard-row__drag {
+ cursor: move;
+ width: 1rem;
+ height: $dashboard-row-height;
+ background: url("../img/grab_dark.svg") no-repeat 50% 50%;
+ background-size: 8px;
+ visibility: hidden;
+}
+
.panels-wrapper {
flex-grow: 1;
position: relative;