diff --git a/public/app/core/directives/dash_class.js b/public/app/core/directives/dash_class.js index 013c267fc0f..13911712e37 100644 --- a/public/app/core/directives/dash_class.js +++ b/public/app/core/directives/dash_class.js @@ -20,17 +20,13 @@ function (_, $, coreModule) { elem.toggleClass('panel-in-fullscreen', false); }); - $scope.$watch('dashboard.hideControls', function() { + $scope.$watch('dashboard.editMode', function() { if (!$scope.dashboard) { return; } - var hideControls = $scope.dashboard.hideControls || $scope.playlist_active; - - if (lastHideControlsVal !== hideControls) { - elem.toggleClass('hide-controls', hideControls); - lastHideControlsVal = hideControls; - } + var editMode = $scope.dashboard.editMode; + elem.toggleClass('dash-edit-mode', editMode === true); }); $scope.$watch('playlistSrv', function(newValue) { diff --git a/public/app/features/dashboard/keybindings.js b/public/app/features/dashboard/keybindings.js index b07dd2fd848..332a1e3a996 100644 --- a/public/app/features/dashboard/keybindings.js +++ b/public/app/features/dashboard/keybindings.js @@ -43,9 +43,8 @@ function(angular, $) { scope.broadcastRefresh(); }, { inputDisabled: true }); - keyboardManager.bind('ctrl+h', function() { - var current = scope.dashboard.hideControls; - scope.dashboard.hideControls = !current; + keyboardManager.bind('ctrl+e', function() { + scope.dashboard.editMode = !scope.dashboard.editMode; }, { inputDisabled: true }); keyboardManager.bind('ctrl+s', function(evt) { diff --git a/public/app/features/dashboard/partials/settings.html b/public/app/features/dashboard/partials/settings.html index 2a2287613ae..56fd57a423f 100644 --- a/public/app/features/dashboard/partials/settings.html +++ b/public/app/features/dashboard/partials/settings.html @@ -49,9 +49,9 @@ label-class="width-10"> -
-
-
-
-
- - - -
-
-
-
- - -
-
-
- -
- - -
- -
-
-
- Drop here -
-
-
- -
+
-
-
-
- - ADD ROW - +
+
+ + +
+ +
+
+
+ Drop here +
+
+
+ +
+ +
+
+ + ADD ROW + +
+
diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index 8fb1e6bcdaa..435734b8198 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -13,85 +13,6 @@ color: $variable; } -.row-tab { - .dropdown-menu-right { - top: 0; - left: 33px; - } -} - -.row-tab-button { - padding: 0px; - cursor: pointer; - vertical-align: middle; - width: 30px; - height: 30px; - text-align: center; - display: inline-block; - line-height: 30px; - background: $btn-success-bg; - color: rgba(255,255,255,.90); -} - -.row-button { - width: 24px; - float: left; - cursor: pointer; - line-height: 31px; - background-color: $blue-dark; -} - -.row-text { - white-space: nowrap; - text-transform: uppercase; - font-weight: bold; - font-size: 0.9em; - text-align: center; - line-height: 31px; - height: 31px; -} - -.row-close { - padding: 0px; - margin: 0px; - background: $panel-bg; - text-align: center; -} - -.row-close-buttons { - position: absolute; - left: 0; -} - -.row-open { - margin-top: 5px; - left: -30px; - position: absolute; - z-index: 100; - transition: .10s left; - transition-delay: .10s; - - &:hover { - left: -12px; - } -} - -.row-control-inner { - padding:0px; - margin:0px; - position:relative; -} - -.hide-controls { - padding: 0; - .row-tab { - display: none; - } - .add-row-panel-hint { - display: none; - } -} - .playlist-active { .add-row-panel-hint, .dashnav-refresh-action, @@ -287,3 +208,41 @@ div.flot-text { padding: 0.5rem .5rem .2rem .5rem; } } + +// +// Dashboard row header +// + +.dash-row-header { + display: flex; + flex-direction: row; + text-align: left; +} + +.dash-row-header-title { + font-size: $font-size-h3; + font-family: $headings-font-family; + padding: $spacer $spacer*2; +} + +.dash-row-header-settings { + display: none; +} + +.dash-row-header-collapse-toggle { + flex-grow: 100; + text-align: right; + display: none; +} + +.dash-edit-mode { + .dash-row { + background-color: $dark-5; + padding: 0 $spacer $spacer $spacer; + } + + .dash-row-header-collapse-toggle, + .dash-row-header-settings { + display: block; + } +}