From 86f4907cc44b722ea3254d97923ab16555d7f58f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 19 Sep 2015 11:40:51 +0200 Subject: [PATCH] feat(panel fullscreen): completly changed how the fullscreen view/edit works, no longer uses css fixed position, yay, closes #2779 --- public/app/core/directives/body_class.js | 8 ------ public/app/core/directives/dash_edit_link.js | 2 -- public/app/features/dashboard/rowCtrl.js | 27 ++++++++++++++++++ public/app/features/dashboard/viewStateSrv.js | 5 ++-- public/app/features/panel/panelMenu.js | 3 -- public/app/partials/dashboard.html | 13 ++++----- public/less/grafana.less | 11 -------- public/less/panel.less | 28 ++----------------- public/less/sidemenu.less | 4 --- public/less/submenu.less | 6 ---- 10 files changed, 38 insertions(+), 69 deletions(-) diff --git a/public/app/core/directives/body_class.js b/public/app/core/directives/body_class.js index f9e748ea6c2..3a0699c297e 100644 --- a/public/app/core/directives/body_class.js +++ b/public/app/core/directives/body_class.js @@ -17,14 +17,6 @@ function (_, $, coreModule) { $("#tooltip, .tooltip").remove(); }); - $scope.$watch('submenuEnabled', function() { - if (!$scope.dashboard) { - return; - } - - elem.toggleClass('submenu-controls-visible', $scope.submenuEnabled); - }); - $scope.$watch('dashboard.hideControls', function() { if (!$scope.dashboard) { return; diff --git a/public/app/core/directives/dash_edit_link.js b/public/app/core/directives/dash_edit_link.js index 1663c2603bb..9ab74fe6d74 100644 --- a/public/app/core/directives/dash_edit_link.js +++ b/public/app/core/directives/dash_edit_link.js @@ -54,8 +54,6 @@ function ($, coreModule) { hideEditorPane(); - scope.exitFullscreen(); - lastEditor = payload.src; editorScope = payload.scope ? payload.scope.$new() : scope.$new(); diff --git a/public/app/features/dashboard/rowCtrl.js b/public/app/features/dashboard/rowCtrl.js index 4270d7f97f6..27365f7bd1c 100644 --- a/public/app/features/dashboard/rowCtrl.js +++ b/public/app/features/dashboard/rowCtrl.js @@ -122,6 +122,17 @@ function (angular, _, config) { scope.$watchGroup(['row.collapse', 'row.height'], function() { element.css({ minHeight: scope.row.collapse ? '5px' : scope.row.height }); }); + + scope.onAppEvent('panel-fullscreen-enter', function(evt, info) { + var hasPanel = _.findWhere(scope.row.panels, {id: info.panelId}); + if (!hasPanel) { + element.hide(); + } + }); + + scope.onAppEvent('panel-fullscreen-exit', function() { + element.show(); + }); }; }); @@ -131,6 +142,22 @@ function (angular, _, config) { element[0].style.width = ((scope.panel.span / 1.2) * 10) + '%'; } + scope.onAppEvent('panel-fullscreen-enter', function(evt, info) { + if (scope.panel.id !== info.panelId) { + element.hide(); + } else { + element[0].style.width = '100%'; + } + }); + + scope.onAppEvent('panel-fullscreen-exit', function(evt, info) { + if (scope.panel.id !== info.panelId) { + element.show(); + } else { + updateWidth(); + } + }); + scope.$watch('panel.span', updateWidth); }; }); diff --git a/public/app/features/dashboard/viewStateSrv.js b/public/app/features/dashboard/viewStateSrv.js index e87a942a6de..749aced2bf2 100644 --- a/public/app/features/dashboard/viewStateSrv.js +++ b/public/app/features/dashboard/viewStateSrv.js @@ -111,6 +111,8 @@ function (angular, _, $) { self.fullscreenPanel.fullscreen = false; delete self.fullscreenPanel.height; + this.$scope.appEvent('panel-fullscreen-exit', {panelId: this.fullscreenPanel.panel.id}); + if (!render) { return false;} $timeout(function() { @@ -125,8 +127,6 @@ function (angular, _, $) { }; DashboardViewState.prototype.enterFullscreen = function(panelScope) { - this.$scope.appEvent('hide-dash-editor'); - var docHeight = $(window).height(); var editHeight = Math.floor(docHeight * 0.3); var fullscreenHeight = Math.floor(docHeight * 0.7); @@ -140,6 +140,7 @@ function (angular, _, $) { $(window).scrollTop(0); panelScope.fullscreen = true; + this.$scope.appEvent('panel-fullscreen-enter', {panelId: panelScope.panel.id}); $timeout(function() { panelScope.$broadcast('render'); diff --git a/public/app/features/panel/panelMenu.js b/public/app/features/panel/panelMenu.js index 1e65214da37..95af6eddd20 100644 --- a/public/app/features/panel/panelMenu.js +++ b/public/app/features/panel/panelMenu.js @@ -155,9 +155,6 @@ function (angular, $, _) { if (panelLeftPos + menuLeftPos < 0) { menuLeftPos = 0; } - if ($scope.fullscreen) { - menuHeight = -(menuHeight/2); - } $menu.css({'left': menuLeftPos, top: -menuHeight}); }); diff --git a/public/app/partials/dashboard.html b/public/app/partials/dashboard.html index 732d05cd318..bd6016a4ba6 100644 --- a/public/app/partials/dashboard.html +++ b/public/app/partials/dashboard.html @@ -1,4 +1,4 @@ -
+
@@ -25,7 +25,7 @@
-
+
@@ -79,11 +79,8 @@
- -
+
@@ -100,7 +97,7 @@
-
+
ADD ROW diff --git a/public/less/grafana.less b/public/less/grafana.less index fd10f2b862e..6e23faa214d 100644 --- a/public/less/grafana.less +++ b/public/less/grafana.less @@ -61,17 +61,6 @@ top: 20%; } -.dashboard-fullscreen { - .main-view-container { - overflow: hidden; - height: 0; - padding: 0; - .row-control-inner { - display: none; - } - } -} - .histogram-chart { position:relative; } diff --git a/public/less/panel.less b/public/less/panel.less index 6b58474f200..01c0df452d8 100644 --- a/public/less/panel.less +++ b/public/less/panel.less @@ -91,37 +91,15 @@ } .panel-fullscreen { - z-index: 100; - display: block; - position: fixed; - left: 0px; - right: 0px; - top: 60px; - height: 100%; - padding: 0; - overflow-y: auto; - height: 100%; - - .dropdown-menu { - margin-bottom: 70px; - } - - .panel-container { - margin: 15px; - } - - .panel-menu { - top: 0px; - } - + margin: 5px 20px; .panel-title-container { padding: 8px; } } .panel-full-edit { - margin-top: 30px; - padding-bottom: 130px; + margin-top: 20px; + margin-bottom: 20px; } .panel-menu { diff --git a/public/less/sidemenu.less b/public/less/sidemenu.less index 1b8ee3f1fdd..1d0fff1baaf 100644 --- a/public/less/sidemenu.less +++ b/public/less/sidemenu.less @@ -30,10 +30,6 @@ .main-view { padding-left: 200px; } - - .panel-fullscreen { - left: 200px; - } } .sidemenu { diff --git a/public/less/submenu.less b/public/less/submenu.less index ce8f268bd6a..2cabde0dbc5 100644 --- a/public/less/submenu.less +++ b/public/less/submenu.less @@ -1,9 +1,3 @@ -.submenu-controls-visible { - .panel-fullscreen { - top: 105px; - } -} - .submenu-controls { margin: 15px 10px 8px 14px; font-size: 16px;