diff --git a/src/app/controllers/grafanaCtrl.js b/src/app/controllers/grafanaCtrl.js index 8df9b4155d6..33c7f028567 100644 --- a/src/app/controllers/grafanaCtrl.js +++ b/src/app/controllers/grafanaCtrl.js @@ -10,7 +10,7 @@ function (angular, config, _, $, store) { var module = angular.module('grafana.controllers'); - module.controller('GrafanaCtrl', function($scope, alertSrv, utilSrv, grafanaVersion, $rootScope, $controller, userSrv) { + module.controller('GrafanaCtrl', function($scope, alertSrv, utilSrv, grafanaVersion, $rootScope, $controller, userSrv, $timeout) { $scope.init = function() { $scope.grafana = {}; @@ -30,6 +30,7 @@ function (angular, config, _, $, store) { $scope.grafana.style = 'dark'; $scope.grafana.user = userSrv.getSignedInUser(); $scope.grafana.sidemenu = store.getBool('grafana.sidemenu'); + $scope.topnav = { title: 'Grafana' }; $scope.onAppEvent('logged-out', function() { $scope.grafana.sidemenu = false; @@ -44,6 +45,10 @@ function (angular, config, _, $, store) { $scope.toggleSideMenu = function() { $scope.grafana.sidemenu = !$scope.grafana.sidemenu; store.set('grafana.sidemenu', $scope.grafana.sidemenu); + + $timeout(function() { + $scope.$broadcast("render"); + }, 50); }; $rootScope.onAppEvent = function(name, callback) { diff --git a/src/app/controllers/sidemenuCtrl.js b/src/app/controllers/sidemenuCtrl.js index 28e826646e8..93954006309 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') { @@ -35,12 +34,16 @@ function (angular, _, $, config) { text: "Account", href: $scope.getUrl("/account"), requireRole: "Admin", icon: "fa fa-shield", - links: [ - { text: 'Info', href: $scope.getUrl("/account")}, - { text: 'Data sources', href: $scope.getUrl("/account/datasources")}, - { text: 'Users', href: $scope.getUrl("/account/users")}, - { text: 'API Keys', href: $scope.getUrl("/account/apikeys")}, - ] + }); + $scope.menu.push({ + text: "Users", href: $scope.getUrl("/account/users"), + requireRole: "Admin", + icon: "fa fa-users", + }); + $scope.menu.push({ + text: "API Keys", href: $scope.getUrl("/account/apikeys"), + requireRole: "Admin", + icon: "fa fa-key", }); } @@ -48,11 +51,6 @@ 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" }, - ] }); } @@ -69,6 +67,14 @@ function (angular, _, $, config) { }); } + if ($scope.grafana.user.isSignedIn) { + $scope.menu.push({ + text: "Sign out", href: $scope.getUrl("/logout"), + target: "_self", + icon: "fa fa-sign-out", + }); + } + $scope.onAppEvent('$routeUpdate', function() { $scope.updateState(); }); @@ -80,18 +86,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 +123,8 @@ function (angular, _, $, config) { } }); }); + + //$scope.menu.splice(0, 0, $scope.menu.splice(activeIndex, 1)[0]); }; $scope.init = function() { diff --git a/src/app/directives/all.js b/src/app/directives/all.js index 879b61e2512..4126ec81b9a 100644 --- a/src/app/directives/all.js +++ b/src/app/directives/all.js @@ -16,4 +16,5 @@ define([ './graphiteSegment', './grafanaVersionCheck', './dropdown.typeahead', + './topnav', ], function () {}); diff --git a/src/app/directives/dashEditLink.js b/src/app/directives/dashEditLink.js index b44b048f9d4..b17c73bc14d 100644 --- a/src/app/directives/dashEditLink.js +++ b/src/app/directives/dashEditLink.js @@ -6,9 +6,9 @@ function (angular, $) { 'use strict'; var editViewMap = { - 'settings': 'app/partials/dasheditor.html', - 'annotations': 'app/features/annotations/partials/editor.html', - 'templating': 'app/partials/templating_editor.html', + 'settings': { src: 'app/partials/dasheditor.html', title: "Settings" }, + 'annotations': { src: 'app/features/annotations/partials/editor.html', title: "Annotations" }, + 'templating': { src: 'app/partials/templating_editor.html', title: "Templating" } }; angular @@ -55,7 +55,10 @@ function (angular, $) { } function showEditorPane(evt, payload, editview) { - if (editview) { payload.src = editViewMap[editview]; } + if (editview) { + scope.grafana.editview = editViewMap[editview]; + payload.src = scope.grafana.editview.src; + } if (lastEditor === payload.src) { hideEditorPane(); @@ -89,7 +92,7 @@ function (angular, $) { hideScrollbars(true); var src = "'" + payload.src + "'"; - var view = $('
'); + var view = $('
'); elem.append(view); $compile(elem.contents())(editorScope); } @@ -98,10 +101,12 @@ function (angular, $) { if (newValue) { showEditorPane(null, {}, newValue); } else if (oldValue) { + scope.grafana.editview = null; hideEditorPane(); } }); + scope.grafana.editview = null; scope.$on("$destroy", hideEditorPane); scope.onAppEvent('hide-dash-editor', hideEditorPane); scope.onAppEvent('show-dash-editor', showEditorPane); diff --git a/src/app/directives/topnav.js b/src/app/directives/topnav.js new file mode 100644 index 00000000000..9228ce9fcb0 --- /dev/null +++ b/src/app/directives/topnav.js @@ -0,0 +1,51 @@ +define([ + 'angular', + 'kbn' +], +function (angular) { + 'use strict'; + + angular + .module('grafana.directives') + .directive('topnav', function() { + return { + restrict: 'E', + transclude: true, + scope: { + title: "@", + section: "@", + titleAction: "&", + toggle: "&", + showMenuBtn: "=", + }, + template: + '
' + + '
' + + '' + + ' ' + + '' + + '' + + + '' + + '' + + '' + + + '' + + '{{section}}' + + '' + + '' + + + '' + + '{{title}}' + + '' + + '' + + '' + + '' + + '
', + link: function(scope, elem, attrs) { + scope.icon = attrs.icon; + } + }; + }); + +}); diff --git a/src/app/features/account/partials/account.html b/src/app/features/account/partials/account.html index 5465d0c7094..56e65c8de35 100644 --- a/src/app/features/account/partials/account.html +++ b/src/app/features/account/partials/account.html @@ -1,15 +1,8 @@ -
+ -
+
-
-
- - Account information -
-
- -
+
diff --git a/src/app/features/account/partials/apikeys.html b/src/app/features/account/partials/apikeys.html index 612a29b9a79..cc78bf89d33 100644 --- a/src/app/features/account/partials/apikeys.html +++ b/src/app/features/account/partials/apikeys.html @@ -1,15 +1,13 @@ -
+ + -
+
-
-
- - API Tokens -
-
- -
+
diff --git a/src/app/features/account/partials/datasources.html b/src/app/features/account/partials/datasources.html index b715619262e..25de55c4d4c 100644 --- a/src/app/features/account/partials/datasources.html +++ b/src/app/features/account/partials/datasources.html @@ -1,127 +1,120 @@ -
+ + -
-
-
- -
-
- - Data sources -
- -
-
-
-
- -
- - -
- -
-
-
- No datasources defined -
- - - - - - - - - - - - - - - -
NameUrl
-   - {{ds.name}} - - {{ds.url}} - - - default - - - - - Edit - - - - - -
-
-
- -
-
-
- - -
-
- - -
- -
- -
-
- - -
-
- - -
-
- -
-
-
InfluxDB Details
-
- - -
-
- - -
-
- - -
-
-
-
-
-
Elastic search details
-
- - -
-
-
-
- -
- - - -
- - +
+
+
+
+ +
+
+
+
+
+ No datasources defined +
+ + + + + + + + + + + + + + + +
NameUrl
+   + {{ds.name}} + + {{ds.url}} + + + default + + + + + Edit + + + + + +
+
+
+ +
+
+
+ + +
+
+ + +
+ +
+ +
+
+ + +
+
+ + +
+
+ +
+
+
InfluxDB Details
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+
Elastic search details
+
+ + +
+
+
+
+ +
+ + + +
+ + +
diff --git a/src/app/features/account/partials/users.html b/src/app/features/account/partials/users.html index 819e5ef76ba..3d964aaa1e6 100644 --- a/src/app/features/account/partials/users.html +++ b/src/app/features/account/partials/users.html @@ -1,15 +1,8 @@ -
+ -
+
-
-
- - Users -
-
- -
+
diff --git a/src/app/features/admin/partials/admin.html b/src/app/features/admin/partials/admin.html index 637dd49f396..968d7ba23b6 100644 --- a/src/app/features/admin/partials/admin.html +++ b/src/app/features/admin/partials/admin.html @@ -1,23 +1,9 @@ -
+ + -
-
-
- -
-
- - System administration -
- -
-
-
-
- -
- -
-
-
+
diff --git a/src/app/features/admin/partials/users.html b/src/app/features/admin/partials/users.html index 0a2b48aa435..57a4eca5159 100644 --- a/src/app/features/admin/partials/users.html +++ b/src/app/features/admin/partials/users.html @@ -1,9 +1,13 @@ -
+ + -
- -
+
+
diff --git a/src/app/features/annotations/partials/editor.html b/src/app/features/annotations/partials/editor.html index ae2d624edd9..1aee712962a 100644 --- a/src/app/features/annotations/partials/editor.html +++ b/src/app/features/annotations/partials/editor.html @@ -1,7 +1,7 @@
-
-
+
+
Annotations
@@ -10,10 +10,12 @@
- +
-
+
@@ -71,12 +73,10 @@
+
+ + +
- -
- - - -
diff --git a/src/app/features/dashboard/dashboardCtrl.js b/src/app/features/dashboard/dashboardCtrl.js index c88d6dfa725..d19dcd30d81 100644 --- a/src/app/features/dashboard/dashboardCtrl.js +++ b/src/app/features/dashboard/dashboardCtrl.js @@ -61,6 +61,9 @@ function (angular, $, config, _) { $scope.setWindowTitleAndTheme = function() { window.document.title = config.window_title_prefix + $scope.dashboard.title; $scope.grafana.style = $scope.dashboard.style; + $scope.topnav.title = $scope.dashboard.title; + $scope.topnav.icon = "fa fa-th-large"; + $scope.topnav.titleAction = function() { alert("hej"); }; }; $scope.isPanel = function(obj) { diff --git a/src/app/features/dashboard/dashboardNavCtrl.js b/src/app/features/dashboard/dashboardNavCtrl.js index 14a914821b1..a9eac45e1ea 100644 --- a/src/app/features/dashboard/dashboardNavCtrl.js +++ b/src/app/features/dashboard/dashboardNavCtrl.js @@ -22,7 +22,6 @@ function (angular, _, moment, config, store) { $scope.onAppEvent('zoom-out', function() { $scope.zoom(2); }); - }; $scope.set_default = function() { @@ -35,6 +34,11 @@ function (angular, _, moment, config, store) { alertSrv.set('Local Default Clear','Your default dashboard has been reset to the default','success', 5000); }; + $scope.openEditView = function(editview) { + var search = _.extend($location.search(), {editview: editview}); + $location.search(search); + }; + $scope.saveForSharing = function() { var clone = angular.copy($scope.dashboard); clone.temp = true; diff --git a/src/app/features/profile/partials/profile.html b/src/app/features/profile/partials/profile.html index 800062c8453..87d49af0bcf 100644 --- a/src/app/features/profile/partials/profile.html +++ b/src/app/features/profile/partials/profile.html @@ -1,17 +1,23 @@ -
+ + -
-
-
-
-
+
+
+ +
+
+
Personal information
-
+
@@ -56,65 +62,66 @@
+
-
-
-
- +
+ +
+
+
+ Your accounts
-
- -
- - - - - - -
Name: {{ac.name}}Role: {{ac.role}} - - active now - - - - Select - -
+
+ + + + + + + +
Name: {{ac.name}}Role: {{ac.role}} + + active now + + + + Select + +
+
+
-
- -
-
+
+
+
+
Add account
-
- - -
-
    -
  • - Account name -
    • -
  • - -
    • -
  • - -
    • -
-
-
- +
+
+
+
    +
  • + Account name +
    • +
  • + +
    • +
  • + +
    • +
+
+
+
+
-
-
-
diff --git a/src/app/panels/timepicker/editor.html b/src/app/panels/timepicker/editor.html index 8771bcadb20..33a5fbfaf00 100644 --- a/src/app/panels/timepicker/editor.html +++ b/src/app/panels/timepicker/editor.html @@ -1,5 +1,6 @@
+
  • @@ -34,6 +35,7 @@
+


diff --git a/src/app/panels/timepicker/module.html b/src/app/panels/timepicker/module.html index f0cfb2e316c..e73516126ae 100644 --- a/src/app/panels/timepicker/module.html +++ b/src/app/panels/timepicker/module.html @@ -21,6 +21,7 @@

  • + refreshed every {{dashboard.refresh}} diff --git a/src/app/partials/dashboard_topnav.html b/src/app/partials/dashboard_topnav.html index 98261b1a94f..2248ab2a645 100644 --- a/src/app/partials/dashboard_topnav.html +++ b/src/app/partials/dashboard_topnav.html @@ -1,20 +1,44 @@
    - - - + +
    + + + - - - - - {{dashboard.title}} - - - + + + + - + + + {{dashboard.title}} + +
    + +
    • @@ -28,14 +52,12 @@
      • -
    • - - - -
      • - - - + + + + + +
    • Stop playlist diff --git a/src/app/partials/dasheditor.html b/src/app/partials/dasheditor.html index fd94432ba5f..75c966420c8 100644 --- a/src/app/partials/dasheditor.html +++ b/src/app/partials/dasheditor.html @@ -1,7 +1,7 @@ -
      -
      +
      +
      - Dashboard settings + Settings
      @@ -11,9 +11,13 @@
      + +
      -
      +
      @@ -93,7 +97,7 @@
      -
      +
      Grafana version: {{grafana.version}}    @@ -101,6 +105,4 @@
      - -
      diff --git a/src/app/partials/navbar.html b/src/app/partials/navbar.html index 7b349e944f5..0823495755e 100644 --- a/src/app/partials/navbar.html +++ b/src/app/partials/navbar.html @@ -1,15 +1,12 @@
      - - - - - - - - {{pageTitle}} - + +
      diff --git a/src/app/partials/sidemenu.html b/src/app/partials/sidemenu.html index 786f5b1ddb4..33ccd1566f4 100644 --- a/src/app/partials/sidemenu.html +++ b/src/app/partials/sidemenu.html @@ -1,28 +1,37 @@ -
      + diff --git a/src/app/partials/submenu.html b/src/app/partials/submenu.html index 096b78f6e9d..f6e4b90f477 100644 --- a/src/app/partials/submenu.html +++ b/src/app/partials/submenu.html @@ -1,20 +1,6 @@
      - -
      • diff --git a/src/app/partials/templating_editor.html b/src/app/partials/templating_editor.html index 1fd600a5701..c366f7e7f57 100644 --- a/src/app/partials/templating_editor.html +++ b/src/app/partials/templating_editor.html @@ -1,17 +1,23 @@ -
        -
        +
        +
        +
        Templating
        +
        + +
        -
        +
        @@ -50,104 +56,97 @@
        -
        -
        +
        +
        +
        + + +
        +
        + + +
        +
        + + +
        + + +
        + +
        - - -
        -
        - - -
        -
        - - -
        - - -
        - -
        -
        -
        - - -
        -
        -
        - -
        - - -
        + +
        - -
        -
        -
        - - -
        -
        -
        - -
        -
        -
        - - - -
        -
        - -
        -
        - - - -
        -
        - -
        - -
        - - -
        -
        - - -
        +
        + +
        + +
        -
        + +
        -
        - -
          -
        • - {{option.text}} -
          • -
        +
        + + +
        +
        +
        + +
        +
        +
        + + + +
        +
        + +
        +
        + + + +
        +
        + +
        + +
        + + +
        +
        + +
        - +
        +
        +
        + +
          +
        • + {{option.text}} +
          • +
        +
        +
        +
        -
        - -
        - - - + +
        diff --git a/src/css/less/bootswatch.dark.less b/src/css/less/bootswatch.dark.less index a1b06114d38..dd8b24b2176 100644 --- a/src/css/less/bootswatch.dark.less +++ b/src/css/less/bootswatch.dark.less @@ -212,7 +212,7 @@ div.subnav { .nav-tabs { - border-bottom: 1px solid @fullEditBorder; + border-bottom: none; & > li > a { .border-radius(0); diff --git a/src/css/less/gfbox.less b/src/css/less/gfbox.less new file mode 100644 index 00000000000..2e58913a833 --- /dev/null +++ b/src/css/less/gfbox.less @@ -0,0 +1,57 @@ +.gf-box { + margin: 15px; + background-color: @grafanaPanelBackground; + position: relative; + border: 1px solid @grafanaTargetFuncBackground; +} + +.gf-box-header-close-btn { + float: right; + padding: 0; + margin: 0; + background-color: transparent; + border: none; + padding: 8px; + font-size: 120%; + color: @textColor; + &:hover { + color: @white; + } +} + +.gf-box-body { + padding: 20px; + min-height: 150px; +} + +.gf-box-footer { + overflow: hidden; +} + +.gf-box-header { + border-bottom: 1px solid @grafanaTargetFuncBackground; + overflow: hidden; + background-color: @grafanaTargetBackground; + .tabs { + float: left; + } + .nav { + margin: 0; + } +} + +.gf-box-title { + padding-right: 20px; + padding-left: 10px; + float: left; + color: @linkColor; + font-size: 18px; + font-weight: normal; + line-height: 38px; + margin: 0; + .fa { + padding: 0 8px 0 5px; + color: @textColor; + } +} + diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index 14de7e5f47f..abfbf8a23e9 100644 --- a/src/css/less/grafana.less +++ b/src/css/less/grafana.less @@ -9,6 +9,9 @@ @import "forms.less"; @import "singlestat.less"; @import "tightform.less"; +@import "sidemenu.less"; +@import "gfbox.less"; +@import "navbar.less"; .row-control-inner { padding:0px; @@ -47,25 +50,6 @@ .logo-icon { width: 24px; - padding: 13px 11px 0 0; - display: block; - float: left; -} - -.navbar .brand { - margin-left: 0; -} - -.hamburger { - float: left; - padding: 15px 0 14px 0; - font-size: 1.4em; -} - -.page-title { - padding: 15px 0; - display: block; - float: left; } .row-button { @@ -81,24 +65,6 @@ top: 30%; } -.grafana-search-metric-actions { - visibility: hidden; - padding-left: 20px; -} - -.grafana-search-metric-name { - white-space: nowrap; -} - -.grafana-search-metric-result:hover { - .grafana-search-metric-actions { - visibility: visible; - } - .grafana-search-metric-name { - color: @blue; - } -} - .dashboard-fullscreen { .main-view-container { overflow: hidden; @@ -254,46 +220,6 @@ max-width: 400px; } -.dashboard-edit-view { - padding: 20px; - background-color: @grafanaPanelBackground; - position: relative; -} - -.dashboard-editor-body { - padding: 20px 10px; - min-height: 100px; -} - -.dashboard-editor-footer { - overflow: hidden; -} - -.dashboard-editor-header { - overflow: hidden; - .tabs { - float: left; - } - .nav { - margin: 0; - } -} - -.dashboard-editor-title { - border-bottom: 1px solid @fullEditBorder; - padding-right: 20px; - float: left; - color: @linkColor; - font-size: 20px; - font-weight: normal; - line-height: 38px; - margin: 0; - .fa { - padding: 0 8px 0 5px; - color: @textColor; - } -} - .grafana-version-info { position: absolute; bottom: 2px; diff --git a/src/css/less/navbar.less b/src/css/less/navbar.less new file mode 100644 index 00000000000..0e131c76365 --- /dev/null +++ b/src/css/less/navbar.less @@ -0,0 +1,93 @@ +.navbar-inner { + padding-left: 0px; +} + +.navbar .nav>li>a { + padding: 19px 15px 8px; + .fa { font-size: 130%; } +} + +.top-nav { + float: left; +} + +.top-nav-menu-btn { + display: block; + float: left; + padding: 11px 9px 11px 14px; + background: @grafanaTargetBackground; + border: 1px solid rgb(55, 54, 54); + i { + font-size: 160%; + color: darken(@gray, 15%); + padding: 0px 0px 0px 0px; + position: relative; + top: 4px; + } + &:hover { + background: lighten(@grafanaTargetBackground, 3%); + } +} + +.top-nav-dashboards-btn { + display: block; + float: left; + padding: 15px 7px 9px 14px; + font-size: 1.4em; + font-weight: bold; + color: #a2a2a2; + margin: 0 18px 0 0; + border: 1px solid rgb(55, 54, 54); + border-left: none; + background: @grafanaTargetBackground; + .fa-th-large { + font-size: 123%; + } + .fa-angle-down { + position: relative; + top: 4px; + } + &:hover { + background: lighten(@grafanaTargetBackground, 3%); + .fa { + color: @textColor; + } + } +} + +.top-nav-breadcrumb { + display: block; + float: left; + padding: 18px 9px 8px 12px; + font-size: 1.4em; + font-weight: bold; + color: darken(@gray, 10%); + i { + padding-left: 9px; + } +} + +.top-nav-section { + display: block; + float: left; + padding: 19px 9px 8px 0; + font-weight: bold; + i { + padding-left: 8px; + } +} + +.top-nav-title { + display: block; + float: left; + padding: 18px 10px 10px 0px; + font-size: 1.3em; + font-weight: bold; + i { + padding-left: 4px; + position: relative; + top: 2px; + } +} + + diff --git a/src/css/less/p_pro.less b/src/css/less/p_pro.less index 678c2fba064..1611f294e4f 100644 --- a/src/css/less/p_pro.less +++ b/src/css/less/p_pro.less @@ -1,98 +1,3 @@ -.pro-sidemenu { - display: none; - a:focus { - text-decoration: none; - } -} - -.pro-sidemenu-open { - .pro-sidemenu { - display: block; - position: absolute; - top: 0; - left: 0; - width: 200px; - background: @bodyBackground; - border-right: 2px solid black; - min-height: 100%; - z-index: 101; - } - - .dashboard-notice { - margin-left: 200px; - width: auto; - } - - .pro-main-view { - padding-left: 200px; - } - - .panel-fullscreen { - left: 200px; - } -} - -.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; - width: 170px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - .gravatar-missing { - display: none; - } - .gravatar-email { - padding-left: 4px; - } - img { - width: 35px; - padding-right: 10px; - } - border-bottom: 1px solid black; -} - -.sidemenu-item { - font-size: 17px; - padding: 14px 10px 14px 20px; - display: block; - i { - padding-right: 15px; - } - border-bottom: 1px solid black; -} - .login-form { width: 50%; diff --git a/src/css/less/sidemenu.less b/src/css/less/sidemenu.less new file mode 100644 index 00000000000..5feb72df66f --- /dev/null +++ b/src/css/less/sidemenu.less @@ -0,0 +1,100 @@ +.sidemenu-wrapper { + display: none; + a:focus { + text-decoration: none; + } +} + +.sidemenu-open { + .sidemenu-wrapper { + display: block; + position: absolute; + top: 0; + left: 0; + width: 200px; + background: @bodyBackground; + min-height: 100%; + z-index: 101; + } + + .dashboard-notice { + margin-left: 200px; + width: auto; + } + + .main-view { + padding-left: 200px; + } + + .panel-fullscreen { + left: 200px; + } +} + +.sidemenu { + list-style: none; + margin: 0; + padding: 0; +} + +.sidemenu-user { + padding: 8px 10px 7px 15px; + display: block; + width: 170px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + .gravatar-missing { + display: none; + } + .gravatar-email { + padding-left: 4px; + } + img { + width: 35px; + padding-right: 10px; + } + border-bottom: 1px solid black; +} + +.sidemenu-top-btn { + display: block; + padding: 14px 0px 10px 20px; + background: @grafanaTargetBackground; + border: 1px solid rgb(55, 54, 54); + i { + padding-right: 5px; + font-size: 170%; + color: @gray; + } +} + +.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; + text-shadow: 1px 0px 10px @orange; + } +} + diff --git a/src/views/index.html b/src/views/index.html index 34cfe0c7bbb..e0ee9c6757d 100644 --- a/src/views/index.html +++ b/src/views/index.html @@ -27,9 +27,9 @@ -
        +
        -
        -
        +