From f00e5936c99d12a6ddc4b44ec671219f9b458082 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 31 Jan 2015 18:00:26 +0100 Subject: [PATCH] New design work --- src/app/controllers/sidemenuCtrl.js | 36 ++-- src/app/directives/topnav.js | 9 +- .../features/annotations/partials/editor.html | 23 +-- .../features/profile/partials/profile.html | 1 - src/app/partials/dashboard_topnav.html | 27 ++- src/app/partials/sidemenu.html | 53 +++--- src/app/partials/templating_editor.html | 175 +++++++++--------- src/css/less/grafana.less | 16 +- src/css/less/sidemenu.less | 65 ++++--- 9 files changed, 213 insertions(+), 192 deletions(-) diff --git a/src/app/controllers/sidemenuCtrl.js b/src/app/controllers/sidemenuCtrl.js index 28e826646e8..708564d8a8a 100644 --- a/src/app/controllers/sidemenuCtrl.js +++ b/src/app/controllers/sidemenuCtrl.js @@ -17,17 +17,16 @@ function (angular, _, $, config) { $scope.menu = []; $scope.menu.push({ - text: "Dashbord", + text: "Dashbords", + icon: "fa fa-th-large", href: $scope.getUrl("/"), startsWith: config.appSubUrl + '/dashboard/', - icon: "fa fa-th-large", - links: [ - { text: 'Settings', editview: 'settings'}, - { text: 'Templating', editview: 'templating'}, - { text: 'Annotations', editview: 'annotations'}, - { text: 'Export', href:""}, - { text: 'JSON', href:""}, - ] + }); + + $scope.menu.push({ + text: "Data Sources", + icon: "fa fa-database", + href: $scope.getUrl("/account/datasources"), }); if ($scope.grafana.user.accountRole === 'Admin') { @@ -48,11 +47,13 @@ function (angular, _, $, config) { $scope.menu.push({ text: "Profile", href: $scope.getUrl("/profile"), icon: "fa fa-user", - requireSignedIn: true, - links: [ - { text: 'Info', href: $scope.getUrl("/profile"), icon: "fa fa-sitemap" }, - { text: 'Password', href:"", icon: "fa fa-lock" }, - ] + }); + } + + if ($scope.grafana.user.isSignedIn) { + $scope.menu.push({ + text: "Sign out", href: $scope.getUrl("/logout"), + icon: "fa fa-sign-out", }); } @@ -80,18 +81,21 @@ function (angular, _, $, config) { $scope.updateState = function() { var currentPath = config.appSubUrl + $location.path(); var search = $location.search(); + var activeIndex; - _.each($scope.menu, function(item) { + _.each($scope.menu, function(item, index) { item.active = false; if (item.href === currentPath) { item.active = true; + activeIndex = index; } if (item.startsWith) { if (currentPath.indexOf(item.startsWith) === 0) { item.active = true; item.href = currentPath; + activeIndex = index; } } @@ -114,6 +118,8 @@ function (angular, _, $, config) { } }); }); + + //$scope.menu.splice(0, 0, $scope.menu.splice(activeIndex, 1)[0]); }; $scope.init = function() { diff --git a/src/app/directives/topnav.js b/src/app/directives/topnav.js index 5ff418c7c77..d987b652535 100644 --- a/src/app/directives/topnav.js +++ b/src/app/directives/topnav.js @@ -24,13 +24,12 @@ function (angular) { '' + '' + '' + - 'menu' + + '' + '' + '' + '' + '' + - '' + '' + '' + @@ -69,13 +68,12 @@ function (angular) { '' + '' + '' + - 'menu' + + '' + '' + '' + '' + '' + - '' + '' + '' + @@ -85,9 +83,6 @@ function (angular) { '' + '{{title}}' + - '' + - '' + - '' + '' + '', link: function(scope, elem, attrs) { diff --git a/src/app/features/annotations/partials/editor.html b/src/app/features/annotations/partials/editor.html index ae2d624edd9..47511ff755b 100644 --- a/src/app/features/annotations/partials/editor.html +++ b/src/app/features/annotations/partials/editor.html @@ -1,19 +1,16 @@
-
-
- - Annotations -
- +
- +
-
+
@@ -71,12 +68,10 @@
+
+ + +
- -
- - - -
diff --git a/src/app/features/profile/partials/profile.html b/src/app/features/profile/partials/profile.html index 57ba7a249a0..87d49af0bcf 100644 --- a/src/app/features/profile/partials/profile.html +++ b/src/app/features/profile/partials/profile.html @@ -6,7 +6,6 @@ -
diff --git a/src/app/partials/dashboard_topnav.html b/src/app/partials/dashboard_topnav.html index bd3b9945a2c..90485f0fa55 100644 --- a/src/app/partials/dashboard_topnav.html +++ b/src/app/partials/dashboard_topnav.html @@ -18,6 +18,21 @@ show-menu-btn="!grafana.sidemenu"> +
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
  • @@ -30,12 +45,12 @@
    • -
  • - - - -
    • - + + + + + +
  • Stop playlist diff --git a/src/app/partials/sidemenu.html b/src/app/partials/sidemenu.html index 2857e6bcba7..c199a829fa2 100644 --- a/src/app/partials/sidemenu.html +++ b/src/app/partials/sidemenu.html @@ -1,34 +1,41 @@ + diff --git a/src/app/partials/templating_editor.html b/src/app/partials/templating_editor.html index 1fd600a5701..062ff1fc288 100644 --- a/src/app/partials/templating_editor.html +++ b/src/app/partials/templating_editor.html @@ -1,17 +1,17 @@ -
    -
    - - Templating -
    - +
    +
    + +
    -
    +
    @@ -50,104 +50,97 @@
    -
    -
    +
    +
    +
    + + +
    +
    + + +
    +
    + + +
    + + +
    + +
    - - -
    -
    - - -
    -
    - - -
    - - -
    - -
    -
    -
    - - -
    -
    -
    - -
    - - -
    + +
    - -
    -
    -
    - - -
    -
    -
    - -
    -
    -
    - - - -
    -
    - -
    -
    - - - -
    -
    - -
    - -
    - - -
    -
    - - -
    +
    + +
    + +
    -
    + +
    -
    - -
      -
    • - {{option.text}} -
      • -
    +
    + + +
    +
    +
    + +
    +
    +
    + + + +
    +
    + +
    +
    + + + +
    +
    + +
    + +
    + + +
    +
    + +
    - +
    +
    +
    + +
      +
    • + {{option.text}} +
      • +
    +
    +
    +
    -
    - -
    - - - + +
    diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index a591a38bea4..0f753c2991c 100644 --- a/src/css/less/grafana.less +++ b/src/css/less/grafana.less @@ -55,6 +55,10 @@ padding-left: 0px; } +.navbar .nav>li>a { + padding: 19px 15px 8px; +} + .top-nav { float: left; } @@ -62,15 +66,17 @@ .top-nav-menu-btn { display: block; float: left; - padding: 15px 13px 13px 14px;; + padding: 11px 6px 12px 14px; position: relative; - border-right: 2px solid black; + border-right: 1px solid @black; font-weight: bold; font-size: 90%; - span { - padding-left: 4px; + i { + font-size: 170%; + color: @gray; + padding: 0px 0px 0px 6px; position: relative; - top: 2px; + top: 4px; } } diff --git a/src/css/less/sidemenu.less b/src/css/less/sidemenu.less index 7e11c4e01db..42b02987037 100644 --- a/src/css/less/sidemenu.less +++ b/src/css/less/sidemenu.less @@ -34,35 +34,10 @@ .sidemenu { list-style: none; - background: @grafanaPanelBackground; margin: 0; padding: 0; } -.sidemenu-links { - margin: 0; - padding: 5px 0; - list-style: none; - background: @grafanaTargetFuncBackground; - li { - display: block; - } -} - -.sidemenu-link { - display: block; - padding: 6px 0 6px 30px; - font-size: 15px; - color: @gray; - i { - padding-right: 15px; - } - &.active { - color: white; - font-weight: bold; - } -} - .sidemenu-user { padding: 8px 10px 7px 15px; display: block; @@ -83,14 +58,44 @@ border-bottom: 1px solid black; } -.sidemenu-item { - font-size: 17px; - padding: 14px 10px 14px 20px; +.sidemenu-top-btn { + padding: 14px 0px 12px 20px; + background: @grafanaPanelBackground; display: block; i { - padding-right: 15px; + padding-right: 5px; + font-size: 170%; + color: @gray; + } + border-bottom: 10px solid @bodyBackground; +} + +.sidemenu-icon { + border-radius: 50%; + background: black; + box-shadow: 0 0 10px 6px #2E2E2E; + width: 35px; + height: 35px; + display: inline-block; + i { + color: @textColor; + position: relative; + left: 9px; + top: 2px; + font-size: 120%; + } +} + +.sidemenu-item { + color: @orange; + line-height: 34px; + font-weight: bold; + padding: 14px 10px 14px 20px; + display: block; + + .sidemenu-item-text { + padding-left: 15px; } - border-bottom: 1px solid black; } .sidemenu-logo-container {