From f1137e4d20c4f9fe5372cbce5fb3a80ac7eb2e45 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 3 Nov 2016 11:30:25 +0100 Subject: [PATCH] ux(dashboard): removed green row icon gain, replaced with collapse icon, #6442 --- public/app/features/dashboard/model.ts | 1 - public/app/features/dashboard/row/row.html | 25 +++--------- public/app/features/dashboard/row/row_ctrl.ts | 39 +++++++------------ public/app/features/panel/panel_directive.ts | 2 +- public/sass/components/_row.scss | 34 ++++++++-------- public/sass/pages/_dashboard.scss | 13 +++++++ 6 files changed, 51 insertions(+), 63 deletions(-) diff --git a/public/app/features/dashboard/model.ts b/public/app/features/dashboard/model.ts index a6091cbf49e..ae6b0aa009f 100644 --- a/public/app/features/dashboard/model.ts +++ b/public/app/features/dashboard/model.ts @@ -196,7 +196,6 @@ export class DashboardModel { } setPanelFocus(id) { - console.log('setting focus panel id', id); this.meta.focusPanelId = id; } diff --git a/public/app/features/dashboard/row/row.html b/public/app/features/dashboard/row/row.html index 85ce4fe73ed..69085e340f6 100644 --- a/public/app/features/dashboard/row/row.html +++ b/public/app/features/dashboard/row/row.html @@ -1,4 +1,4 @@ -
+
@@ -40,27 +40,12 @@
-
-
-
- - - - -
+
+
+
-
+
diff --git a/public/app/features/dashboard/row/row_ctrl.ts b/public/app/features/dashboard/row/row_ctrl.ts index 8411f43549e..bb883872e67 100644 --- a/public/app/features/dashboard/row/row_ctrl.ts +++ b/public/app/features/dashboard/row/row_ctrl.ts @@ -12,7 +12,6 @@ export class DashRowCtrl { dashboard: any; row: any; dropView: number; - editMode: boolean; /** @ngInject */ constructor(private $scope, private $rootScope, private $timeout, private uiSegmentSrv, private $q) { @@ -22,12 +21,6 @@ export class DashRowCtrl { this.dropView = 1; delete this.row.isNew; } - - this.dashboard.events.on('edit-mode-changed', this.editModeChanged.bind(this), $scope); - } - - editModeChanged() { - this.editMode = this.dashboard.editMode; } onDrop(panelId, dropTarget) { @@ -58,7 +51,7 @@ export class DashRowCtrl { dropTarget.row.panels.splice(dropTarget.index+1, 0, dragObject.panel); } else if (this.row === dragObject.row) { // just move element - this.row.movePanel(dropTarget.index, dragObject.index); + this.row.movePanel(dragObject.index, dropTarget.index); } else { // split drop target space dragObject.panel.span = dropTarget.panel.span = dropTarget.panel.span/2; @@ -100,32 +93,29 @@ export class DashRowCtrl { } toggleCollapse() { - this.dropView = 0; + this.closeDropView(); this.row.collapse = !this.row.collapse; } showAddPanel() { this.row.collapse = false; - this.dropView = this.dropView === 1 ? 0 : 1; + if (this.dropView === 1) { + this.closeDropView(); + } else { + this.dropView = 1; + } } showRowOptions() { - this.dropView = this.dropView === 2 ? 0 : 2; - } - - onMenuAddPanel() { - this.editMode = true; - this.dropView = 1; - } - - onMenuRowOptions() { - this.editMode = true; - this.dropView = 2; + if (this.dropView === 2) { + this.closeDropView(); + } else { + this.dropView = 2; + } } closeDropView() { this.dropView = 0; - this.editMode = this.dashboard.editMode; } onMenuDeleteRow() { @@ -205,6 +195,7 @@ coreModule.directive('panelWidth', function($rootScope) { coreModule.directive('panelDropZone', function($timeout) { return function(scope, element) { var row = scope.ctrl.row; + var dashboard = scope.ctrl.dashboard; var indrag = false; var textEl = element.find('.panel-drop-zone-text'); @@ -220,7 +211,7 @@ coreModule.directive('panelDropZone', function($timeout) { } function updateState() { - if (scope.ctrl.editMode) { + if (scope.ctrl.dashboard.editMode) { if (row.panels.length === 0 && indrag === false) { return showPanel(12, 'Empty Space'); } @@ -246,7 +237,7 @@ coreModule.directive('panelDropZone', function($timeout) { } row.events.on('span-changed', updateState, scope); - scope.$watchGroup(['ctrl.editMode'], updateState); + dashboard.events.emit('edit-mode-changed', updateState, scope); scope.$on("ANGULAR_DRAG_START", function() { indrag = true; diff --git a/public/app/features/panel/panel_directive.ts b/public/app/features/panel/panel_directive.ts index 70f3d1b3243..ee6229c59b0 100644 --- a/public/app/features/panel/panel_directive.ts +++ b/public/app/features/panel/panel_directive.ts @@ -146,7 +146,7 @@ module.directive('grafanaPanel', function($rootScope) { module.directive('panelResizer', function($rootScope) { return { restrict: 'E', - template: '', + template: '', link: function(scope, elem) { var resizing = false; var lastPanel; diff --git a/public/sass/components/_row.scss b/public/sass/components/_row.scss index 8646f9412d9..6af4007946c 100644 --- a/public/sass/components/_row.scss +++ b/public/sass/components/_row.scss @@ -169,15 +169,6 @@ a.dash-row-header-actions--tight { display: flex; } -.dash-edit-mode { - .dash-row-options { - margin-bottom: 0; - } - .dash-row-add-panel { - margin-bottom: 0; - } -} - .add-panel-panels-scroll { width: 100%; overflow: hidden; @@ -215,6 +206,23 @@ a.dash-row-header-actions--tight { width: 2rem; } +.dash-row-expand-toggle { + margin-top: -3px; + left: 1px; + position: absolute; + z-index: 100; + transition: .10s left; + transition-delay: .05s; + width: 15px; + font-size: 60%; + color: $text-muted; + cursor: pointer; + height: 100%; + + &:hover { + color: $link-color; + } +} // Legacy mode .row-tab { @@ -237,14 +245,6 @@ a.dash-row-header-actions--tight { color: rgba(255,255,255,.90); } -.row-button { - width: 24px; - float: left; - cursor: pointer; - line-height: 31px; - background-color: $blue-dark; -} - .row-open { margin-top: 1px; left: -24px; diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index 29bda0d34c0..1768c516615 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -198,6 +198,7 @@ div.flot-text { width: 15px; height: 15px; display: block; + color: $panel-bg; } .dashboard-header { @@ -211,3 +212,15 @@ div.flot-text { } } +.dash-edit-mode { + .resize-panel-handle { + color: $text-color-faint; + overflow: hidden; + &:before { + left: initial; + right: -5px; + bottom: 0px; + position: absolute; + } + } +}