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;