ux(): added page-dashboard body class

public/app/core/components/grafana_app.ts

@@ -171,7 +171,16 @@ export function grafanaAppDirective(playlistSrv, contextSrv) {
       });
 
       // tooltip removal fix
-      scope.$on("$routeChangeSuccess", function() {
+      // manage page classes
+      var pageClass;
+      scope.$on("$routeChangeSuccess", function(evt, data) {
+        if (pageClass) {
+          body.removeClass(pageClass);
+        }
+        pageClass = data.$$route.pageClass;
+        if (pageClass) {
+          body.addClass(pageClass);
+        }
         $("#tooltip, .tooltip").remove();
       });
 

public/app/core/core.ts

@@ -2,7 +2,7 @@
 ///<reference path="./mod_defs.d.ts" />
 
 import "./directives/annotation_tooltip";
-import "./directives/body_class";
+import "./directives/dash_class";
 import "./directives/confirm_click";
 import "./directives/dash_edit_link";
 import "./directives/dash_upload";

public/app/core/directives/body_class.js → public/app/core/directives/dash_class.js

@@ -6,7 +6,7 @@ define([
 function (_, $, coreModule) {
   'use strict';
 
-  coreModule.default.directive('bodyClass', function() {
+  coreModule.default.directive('dashClass', function() {
     return {
       link: function($scope, elem) {
 

public/app/core/routes/routes.ts

@@ -18,25 +18,30 @@ function setupAngularRoutes($routeProvider, $locationProvider) {
     templateUrl: 'public/app/partials/dashboard.html',
     controller : 'LoadDashboardCtrl',
     reloadOnSearch: false,
+    pageClass: 'page-dashboard',
   })
   .when('/dashboard/:type/:slug', {
     templateUrl: 'public/app/partials/dashboard.html',
     controller : 'LoadDashboardCtrl',
     reloadOnSearch: false,
+    pageClass: 'page-dashboard',
   })
   .when('/dashboard-solo/:type/:slug', {
     templateUrl: 'public/app/features/panel/partials/soloPanel.html',
     controller : 'SoloPanelCtrl',
+    pageClass: 'page-dashboard',
   })
   .when('/dashboard-import/:file', {
     templateUrl: 'public/app/partials/dashboard.html',
     controller : 'DashFromImportCtrl',
     reloadOnSearch: false,
+    pageClass: 'page-dashboard',
   })
   .when('/dashboard/new', {
     templateUrl: 'public/app/partials/dashboard.html',
     controller : 'NewDashboardCtrl',
     reloadOnSearch: false,
+    pageClass: 'page-dashboard',
   })
   .when('/import/dashboard', {
     templateUrl: 'public/app/features/dashboard/partials/import.html',

public/app/partials/dashboard.html

-<div body-class class="dashboard" ng-if="dashboard">
+<div dash-class ng-if="dashboard">
 	<dashnav></dashnav>
 
-	<div class="main-view-container">
+	<div class="dashboard-container">
 
-	<div dash-editor-view></div>
-	<dashboard-search></dashboard-search>
-	<div class="clearfix"></div>
+		<div dash-editor-view></div>
+		<dashboard-search></dashboard-search>
+		<div class="clearfix"></div>
 
-	<dashboard-submenu ng-if="submenuEnabled" dashboard="dashboard"></dashboard-submenu>
+		<dashboard-submenu ng-if="submenuEnabled" dashboard="dashboard"></dashboard-submenu>
 
-	<div class="clearfix"></div>
+		<div class="clearfix"></div>
 
 		<div class="grafana-row" ng-controller="RowCtrl" ng-repeat="(row_name, row) in dashboard.rows" row-height>
 			<div class="row-control">
@@ -60,8 +60,8 @@
 									<ul class="dropdown-menu">
 										<li><a ng-click="moveRow('up')">Up</a></li>
 										<li><a ng-click="moveRow('down')">Down</a></li>
-                    <li><a ng-click="moveRow('top')">To top</a></li>
-                    <li><a ng-click="moveRow('bottom')">To Bottom</a></li>
+										<li><a ng-click="moveRow('top')">To top</a></li>
+										<li><a ng-click="moveRow('bottom')">To Bottom</a></li>
 									</ul>
 								</li>
 								<li>
@@ -105,5 +105,5 @@
 				</span>
 			</div>
 		</div>
-
 	</div>
+</div>

public/less/gfbox.less

@@ -84,8 +84,8 @@
 }
 
 .page-header-align {
-  display: flex; 
-  justify-content: space-between; 
+  display: flex;
+  justify-content: space-between;
   align-items: center;
   display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
   display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */

public/less/grafana.less

@@ -88,6 +88,23 @@
   overflow: auto;
 }
 
+.dashboard-container {
+  padding: 5px 5px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.main-view {
+  background-image: url(/img/grafana_pattern.png);
+  background-position: 100% -550px;
+  background-repeat: no-repeat;
+}
+
+.page-dashboard {
+  .main-view {
+    background-image: none;
+  }
+}
 
 //
 // Srollbars

public/less/overrides.less

@@ -14,19 +14,8 @@
   padding-right: 0px;
 }
 
-.main-view-container {
-  padding: 5px 10px;
-  width: 100%;
-  box-sizing: border-box;
-}
-
 // Backgrounds
 // ---------------------
-.main-view {
-  // background: url(/img/grafana_pattern.png);
-  background-position: 100% -550px;
-  background-repeat: no-repeat;
-}
 
 .bgNav {
   background: @navbarBackground;

public/less/sidemenu.less

@@ -31,7 +31,7 @@
   .sidemenu-wrapper {
     min-height: 100%;
   }
-  .main-view-container {
+  .dashboard-container {
     padding-left: @sideMenuWidth;
   }
   .page-container {