diff --git a/public/app/core/directives/plugin_component.ts b/public/app/core/directives/plugin_component.ts index 60685fae74e..83c030cb317 100644 --- a/public/app/core/directives/plugin_component.ts +++ b/public/app/core/directives/plugin_component.ts @@ -58,7 +58,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $ var componentInfo: any = { name: 'panel-plugin-' + scope.panel.type, bindings: {dashboard: "=", panel: "=", row: "="}, - attrs: {dashboard: "dashboard", panel: "panel", row: "row"}, + attrs: {dashboard: "ctrl.dashboard", panel: "panel", row: "ctrl.row"}, }; var panelElemName = 'panel-' + scope.panel.type; diff --git a/public/app/core/filters/filters.ts b/public/app/core/filters/filters.ts index 6122a010182..63f2bf28bc3 100644 --- a/public/app/core/filters/filters.ts +++ b/public/app/core/filters/filters.ts @@ -60,8 +60,8 @@ coreModule.filter('noXml', function() { coreModule.filter('interpolateTemplateVars', function (templateSrv) { var filterFunc: any = function(text, scope) { var scopedVars; - if (scope.ctrl && scope.ctrl.panel) { - scopedVars = scope.ctrl.panel.scopedVars; + if (scope.ctrl) { + scopedVars = (scope.ctrl.panel || scope.ctrl.row).scopedVars; } else { scopedVars = scope.row.scopedVars; } diff --git a/public/app/core/routes/dashboard_loaders.js b/public/app/core/routes/dashboard_loaders.js index 49e81c23a7e..3c16b15c9c3 100644 --- a/public/app/core/routes/dashboard_loaders.js +++ b/public/app/core/routes/dashboard_loaders.js @@ -31,7 +31,7 @@ function (coreModule) { meta: { canStar: false, canShare: false }, dashboard: { title: "New dashboard", - rows: [{ height: '250px', panels:[] }] + rows: [{title: 'Dashboard Row', height: '250px', panels:[] }] }, }, $scope); }); diff --git a/public/app/features/dashboard/all.js b/public/app/features/dashboard/all.js index 3aa298001a5..8d66c2eb1b2 100644 --- a/public/app/features/dashboard/all.js +++ b/public/app/features/dashboard/all.js @@ -22,4 +22,5 @@ define([ './export/export_modal', './dash_list_ctrl', './ad_hoc_filters', + './row/row', ], function () {}); diff --git a/public/app/features/dashboard/dashboard_ctrl.ts b/public/app/features/dashboard/dashboard_ctrl.ts index 649a04474cc..925b3eb63e0 100644 --- a/public/app/features/dashboard/dashboard_ctrl.ts +++ b/public/app/features/dashboard/dashboard_ctrl.ts @@ -41,6 +41,7 @@ export class DashboardCtrl { $scope.setupDashboardInternal = function(data) { var dashboard = dashboardSrv.create(data.dashboard, data.meta); dashboardSrv.setCurrent(dashboard); + dashboard.editMode = true; // init services timeSrv.init(dashboard); diff --git a/public/app/features/dashboard/dashnav/dashnav.html b/public/app/features/dashboard/dashnav/dashnav.html index 562451df561..7bd9295de25 100644 --- a/public/app/features/dashboard/dashnav/dashnav.html +++ b/public/app/features/dashboard/dashnav/dashnav.html @@ -62,8 +62,8 @@
  • - - Leave Build Mode + + Leave Build Mode
    • diff --git a/public/app/features/dashboard/row/row.html b/public/app/features/dashboard/row/row.html new file mode 100644 index 00000000000..a8280fa2a71 --- /dev/null +++ b/public/app/features/dashboard/row/row.html @@ -0,0 +1,87 @@ +
    +
    +
    + +
    +
    +
    + +
    + +
    +
    +
    + + + + +
    +
    + + + + +
    +
    + +
    +
    + + +
    + +
    +
    +
    + Drop here +
    +
    +
    + +
    +
    +
    + diff --git a/public/app/features/dashboard/row/row.ts b/public/app/features/dashboard/row/row.ts new file mode 100644 index 00000000000..fe9ade5892a --- /dev/null +++ b/public/app/features/dashboard/row/row.ts @@ -0,0 +1,73 @@ +/// + +import _ from 'lodash'; +import coreModule from 'app/core/core_module'; + +export class DashRowCtrl { + showTitle: boolean; + + /** @ngInject */ + constructor(private $scope, private $rootScope) { + this.showTitle = true; + this.- + } + +} + + +export function rowDirective() { + return { + restrict: 'E', + templateUrl: 'public/app/features/dashboard/row/row.html', + controller: DashRowCtrl, + bindToController: true, + controllerAs: 'ctrl', + scope: { + dashboard: "=", + row: "=", + } + }; +} + +coreModule.directive('dashRow', rowDirective); + + +coreModule.directive('panelWidth', function($rootScope) { + + return function(scope, element) { + var fullscreen = false; + + function updateWidth() { + if (!fullscreen) { + element[0].style.width = ((scope.panel.span / 1.2) * 10) + '%'; + } + } + + $rootScope.onAppEvent('panel-fullscreen-enter', function(evt, info) { + fullscreen = true; + + if (scope.panel.id !== info.panelId) { + element.hide(); + } else { + element[0].style.width = '100%'; + } + }, scope); + + $rootScope.onAppEvent('panel-fullscreen-exit', function(evt, info) { + fullscreen = false; + + if (scope.panel.id !== info.panelId) { + element.show(); + } + + updateWidth(); + }, scope); + + scope.$watch('ctrl.panel.span', updateWidth); + + if (fullscreen) { + element.hide(); + } + }; +}); + diff --git a/public/app/features/dashboard/rowCtrl.js b/public/app/features/dashboard/rowCtrl.js index 69747e03460..e96e7e568bd 100644 --- a/public/app/features/dashboard/rowCtrl.js +++ b/public/app/features/dashboard/rowCtrl.js @@ -146,45 +146,6 @@ function (angular, _, config) { }; }); - module.directive('panelWidth', function() { - - return function(scope, element) { - var fullscreen = false; - - function updateWidth() { - if (!fullscreen) { - element[0].style.width = ((scope.panel.span / 1.2) * 10) + '%'; - } - } - - scope.onAppEvent('panel-fullscreen-enter', function(evt, info) { - fullscreen = true; - - if (scope.panel.id !== info.panelId) { - element.hide(); - } else { - element[0].style.width = '100%'; - } - }); - - scope.onAppEvent('panel-fullscreen-exit', function(evt, info) { - fullscreen = false; - - if (scope.panel.id !== info.panelId) { - element.show(); - } - - updateWidth(); - }); - - scope.$watch('panel.span', updateWidth); - - if (fullscreen) { - element.hide(); - } - }; - }); - module.directive('panelDropZone', function() { return function(scope, element) { scope.$on("ANGULAR_DRAG_START", function() { diff --git a/public/app/partials/dashboard.html b/public/app/partials/dashboard.html index 1c92f85cf63..cbdcf343f23 100644 --- a/public/app/partials/dashboard.html +++ b/public/app/partials/dashboard.html @@ -11,83 +11,9 @@
    -
    -
    -
    -
    - - - - -
    -
    - - - - -
    -
    + + -
    -
    - - -
    - -
    -
    -
    - Drop here -
    -
    -
    - -
    -
    -
    diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index 6e3344829e3..b7a6cd8153e 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -205,17 +205,43 @@ div.flot-text { // Dashboard row header // +.dash-row { + display: flex; +} + +.dash-row-handle-column { + width: 2rem; + background: $page-bg; + display: flex; + flex-direction: column; +} + +.dash-row-move-handle { + background: url($btn-drag-image) no-repeat 50% 50%; + background-size: 8px; + flex-grow: 1; + cursor: move; +} + +.dash-row-resize-handle { +} + +.dash-row-content { + flex-grow: 1; +} + .dash-row-header { display: flex; flex-direction: row; text-align: left; align-items: center; + background: $page-bg; + margin-right: $panel-margin; } .dash-row-header-title { - font-size: $font-size-h3; font-family: $headings-font-family; - padding: $spacer $spacer $spacer $spacer/2; + padding: 0.7rem; } .dash-row-header-settings { @@ -226,34 +252,24 @@ div.flot-text { flex-grow: 100; text-align: right; margin-right: 0.6rem; + font-size: $font-size-sm; + line-height: 2.5rem; + a { + color: $text-muted; + } + &:hover a { + color: $link-color; + } } -.dash-row-header-collapse-toggle { - flex-grow: 100; - text-align: right; - display: none; - margin-right: $spacer/2; -} .dash-edit-mode { -// .dash-row { -// background: $dash-row-background; -// box-shadow: $dash-row-shadow; -// padding: 0 ($spacer/4) ($spacer/2) ($spacer/4); -// margin-bottom: $spacer; -// } + .dash-row { + margin-bottom: $spacer; + } -.dash-row { - background: lighten($body-bg, 1%); - box-shadow: inset 15px 0px 0px 0px #262626; - padding: 0 ($spacer/4) ($spacer/2) ($spacer*2); - margin-left: 5px; - margin-bottom: $spacer; -} - - .dash-row-header-collapse-toggle, - .dash-row-header-settings { - display: block; + .panels-wrapper { + padding: $panel-margin*2 0 0 $panel-margin; } }