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

@@ -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;

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();
 

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);
     };
   });

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');

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});
             });

public/app/partials/dashboard.html

@@ -1,4 +1,4 @@
-<div body-class class="dashboard" ng-class="{'dashboard-fullscreen': dashboardViewState.fullscreen}">
+<div body-class class="dashboard">
 
 	<div ng-include src="topNavPartial">
 	</div>
@@ -25,7 +25,7 @@
 						<div class="row-text pointer" ng-click="toggle_row(row)" ng-bind="row.title | interpolateTemplateVars:this"></div>
 					</div>
 					<div class="row-open" ng-show="!row.collapse">
-						<div class='row-tab bgSuccess dropdown' ng-show="dashboardMeta.canEdit">
+						<div class='row-tab bgSuccess dropdown' ng-show="dashboardMeta.canEdit" ng-hide="dashboardViewState.fullscreen">
 							<span class="row-tab-button dropdown-toggle" data-toggle="dropdown">
 								<i class="fa fa-bars"></i>
 							</span>
@@ -79,11 +79,8 @@
 					<div class="row-text pointer" ng-click="toggle_row(row)" ng-if="row.showTitle" ng-bind="row.title | interpolateTemplateVars:this">
 					</div>
 
-					<!-- Panels, draggable needs to be disabled in fullscreen because Firefox bug -->
+					<div ng-repeat="(name, panel) in row.panels track by panel.id" class="panel" ui-draggable="true" drag="panel.id"
-					<div ng-repeat="(name, panel) in row.panels track by panel.id" class="panel"
+						ui-on-Drop="onDrop($data, row, panel)" drag-handle-class="drag-handle" panel-width>
-						ui-draggable="{{!dashboardViewState.fullscreen}}" drag="panel.id"
-						ui-on-Drop="onDrop($data, row, panel)"
-						drag-handle-class="drag-handle" panel-width>
 						<panel-loader type="panel.type" class="panel-margin"></panel-loader>
 					</div>
 
@@ -100,7 +97,7 @@
 			</div>
 		</div>
 
-		<div ng-show='dashboardMeta.canEdit' class="row-fluid add-row-panel-hint">
+		<div ng-show='dashboardMeta.canEdit' class="row-fluid add-row-panel-hint" ng-hide="dashboardViewState.fullscreen">
 			<div class="span12" style="text-align:right;">
 				<span style="margin-right: 10px;" ng-click="add_row_default()" class="pointer btn btn-info btn-small">
 					<span><i class="fa fa-plus"></i> ADD ROW</span>

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;
 }

public/less/panel.less

@@ -91,37 +91,15 @@
 }
 
 .panel-fullscreen {
-  z-index: 100;
+  margin: 5px 20px;
-  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;
-  }
-
   .panel-title-container {
     padding: 8px;
   }
 }
 
 .panel-full-edit {
-  margin-top: 30px;
+  margin-top: 20px;
-  padding-bottom: 130px;
+  margin-bottom: 20px;
 }
 
 .panel-menu {

public/less/sidemenu.less

@@ -30,10 +30,6 @@
   .main-view {
     padding-left: 200px;
   }
-
-  .panel-fullscreen {
-    left: 200px;
-  }
 }
 
 .sidemenu {

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;