From b369b7e49577ad3b8f29d89a2666f4cafc3e7c15 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 12 Feb 2016 18:55:45 +0100 Subject: [PATCH] ux(): added page-dashboard body class --- public/app/core/components/grafana_app.ts | 11 +++++++++- public/app/core/core.ts | 2 +- .../{body_class.js => dash_class.js} | 2 +- public/app/core/routes/routes.ts | 5 +++++ public/app/partials/dashboard.html | 20 +++++++++---------- public/less/gfbox.less | 4 ++-- public/less/grafana.less | 17 ++++++++++++++++ public/less/overrides.less | 11 ---------- public/less/sidemenu.less | 2 +- 9 files changed, 47 insertions(+), 27 deletions(-) rename public/app/core/directives/{body_class.js => dash_class.js} (94%) diff --git a/public/app/core/components/grafana_app.ts b/public/app/core/components/grafana_app.ts index 1c98bee266e..96c609018c0 100644 --- a/public/app/core/components/grafana_app.ts +++ b/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(); }); diff --git a/public/app/core/core.ts b/public/app/core/core.ts index 361dea334ef..f973340a336 100644 --- a/public/app/core/core.ts +++ b/public/app/core/core.ts @@ -2,7 +2,7 @@ /// 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"; diff --git a/public/app/core/directives/body_class.js b/public/app/core/directives/dash_class.js similarity index 94% rename from public/app/core/directives/body_class.js rename to public/app/core/directives/dash_class.js index dcf04a0bfd6..013c267fc0f 100644 --- a/public/app/core/directives/body_class.js +++ b/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) { diff --git a/public/app/core/routes/routes.ts b/public/app/core/routes/routes.ts index 82da84fbc56..c3ae868d12c 100644 --- a/public/app/core/routes/routes.ts +++ b/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', diff --git a/public/app/partials/dashboard.html b/public/app/partials/dashboard.html index edba0d85bb9..3d1f44042fe 100644 --- a/public/app/partials/dashboard.html +++ b/public/app/partials/dashboard.html @@ -1,15 +1,15 @@ -
+
-
+
-
- -
+
+ +
- + -
+
@@ -60,8 +60,8 @@
  • @@ -105,5 +105,5 @@
    • -
    +
    diff --git a/public/less/gfbox.less b/public/less/gfbox.less index 4cdace27acf..a02451c09a0 100644 --- a/public/less/gfbox.less +++ b/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) */ diff --git a/public/less/grafana.less b/public/less/grafana.less index 561027ca75c..94bf0507ac0 100644 --- a/public/less/grafana.less +++ b/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 diff --git a/public/less/overrides.less b/public/less/overrides.less index 2b574f829e3..d33707bcf50 100644 --- a/public/less/overrides.less +++ b/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; diff --git a/public/less/sidemenu.less b/public/less/sidemenu.less index a755d83110a..6f560dfaca7 100644 --- a/public/less/sidemenu.less +++ b/public/less/sidemenu.less @@ -31,7 +31,7 @@ .sidemenu-wrapper { min-height: 100%; } - .main-view-container { + .dashboard-container { padding-left: @sideMenuWidth; } .page-container {