ソースを参照

feat(pinned sidemenu): completed side menu pinned stuff

Torkel Ödegaard 10 年 前
コミット
92c2f8d556

+ 1 - 1
public/app/core/components/sidemenu/sidemenu.html

@@ -64,7 +64,7 @@
 
 	<li>
 		<a class="sidemenu-item" target="_self" ng-hide="ctrl.contextSrv.pinned" ng-click="ctrl.contextSrv.setPinnedState(true)">
-			<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-flag-o"></i></span>
+			<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-thumb-tack"></i></span>
 			<span class="sidemenu-item-text">Pin</span>
 		</a>
 	</li>

+ 8 - 7
public/app/core/components/sidemenu/sidemenu.ts

@@ -24,6 +24,7 @@ export class SideMenuCtrl {
     this.updateMenu();
 
     this.$scope.$on('$routeChangeSuccess', () => {
+      this.updateMenu();
       if (!this.contextSrv.pinned) {
         this.contextSrv.sidemenu = false;
       }
@@ -86,11 +87,11 @@ export class SideMenuCtrl {
            this.switchOrg(org.orgId);
          }
        });
-
-       if (config.allowOrgCreate) {
-         this.orgMenu.push({text: "New organization", icon: "fa fa-fw fa-plus", url: this.getUrl('/org/new')});
-       }
      });
+
+     if (config.allowOrgCreate) {
+       this.orgMenu.push({text: "New organization", icon: "fa fa-fw fa-plus", url: this.getUrl('/org/new')});
+     }
    });
  }
 
@@ -111,19 +112,19 @@ export class SideMenuCtrl {
    });
 
    this.mainLinks.push({
-     text: "Grafana stats",
+     text: "Stats",
      icon: "fa fa-fw fa-bar-chart",
      url: this.getUrl("/admin/stats"),
    });
 
    this.mainLinks.push({
-     text: "Global Users",
+     text: "Users",
      icon: "fa fa-fw fa-user",
      url: this.getUrl("/admin/users"),
    });
 
    this.mainLinks.push({
-     text: "Global Orgs",
+     text: "Organizations",
      icon: "fa fa-fw fa-users",
      url: this.getUrl("/admin/orgs"),
    });

+ 0 - 1
public/app/core/core.ts

@@ -15,7 +15,6 @@ import "./directives/ng_model_on_blur";
 import "./directives/password_strenght";
 import "./directives/spectrum_picker";
 import "./directives/tags";
-import "./directives/topnav";
 import "./directives/value_select_dropdown";
 import "./directives/give_focus";
 import './jquery_extended';

+ 0 - 50
public/app/core/directives/topnav.js

@@ -1,50 +0,0 @@
-define([
-  '../core_module',
-],
-function (coreModule) {
-  'use strict';
-
-  coreModule.default.directive('topnav', function($rootScope, contextSrv) {
-    return {
-      restrict: 'E',
-      transclude: true,
-      scope: {
-        title: "@",
-        section: "@",
-        titleUrl: "@",
-        subnav: "=",
-      },
-      template:
-        '<div class="navbar navbar-static-top"><div class="navbar-inner"><div class="container-fluid">' +
-        '<div class="top-nav">' +
-				'<div class="top-nav-btn top-nav-menu-btn">' +
-					'<a class="pointer" ng-click="contextSrv.toggleSideMenu()">' +
-						'<span class="top-nav-logo-background">' +
-							'<img class="logo-icon" src="img/fav32.png"></img>' +
-						'</span>' +
-						'<i class="fa fa-caret-down"></i>' +
-					'</a>' +
-				'</div>' +
-
-        '<span class="icon-circle top-nav-icon">' +
-        '<i ng-class="icon"></i>' +
-        '</span>' +
-
-        '<span ng-show="section">' +
-        '<span class="top-nav-title">{{section}}</span>' +
-        '<i class="top-nav-breadcrumb-icon fa fa-angle-right"></i>' +
-        '</span>' +
-
-        '<a ng-href="{{titleUrl}}" class="top-nav-title">' +
-        '{{title}}' +
-        '</a>' +
-        '<i ng-show="subnav" class="top-nav-breadcrumb-icon fa fa-angle-right"></i>' +
-        '</div><div ng-transclude></div></div></div></div>',
-      link: function(scope, elem, attrs) {
-        scope.icon = attrs.icon;
-        scope.contextSrv = contextSrv;
-      }
-    };
-  });
-
-});

+ 3 - 4
public/app/features/admin/partials/edit_org.html

@@ -1,9 +1,8 @@
-<topnav icon="fa fa-fw fa-user" title="Global Users" subnav="true">
+<navbar icon="fa fa-fw fa-user" title="Organizations" title-url="admin/orgs" subnav="true">
 	<ul class="nav">
-		<li><a href="admin/orgs">List</a></li>
-		<li class="active"><a href="admin/orgs/edit/{{org.id}}">Edit Org</a></li>
+		<li class="active"><a href="admin/orgs/edit/{{org.id}}">{{org.name}}</a></li>
 	</ul>
-</topnav>
+</navbar>
 
 <div class="page-container">
 	<div class="page">

+ 4 - 5
public/app/features/admin/partials/new_user.html

@@ -1,14 +1,13 @@
-<topnav icon="fa fa-fw fa-cogs" title="Global Users" subnav="true">
+<navbar icon="fa fa-fw fa-user" title="Users" title-url="admin/users" subnav="true">
 	<ul class="nav">
-		<li><a href="admin/users">Users</a></li>
-		<li class="active"><a href="admin/users/create">Create user</a></li>
+		<li class="active"><a href="admin/users/create">Add user</a></li>
 	</ul>
-</topnav>
+</navbar>
 
 <div class="page-container">
 	<div class="page">
 		<h2>
-			Create a new user
+			Add new user
 		</h2>
 
 		<form name="userForm">

+ 2 - 5
public/app/features/admin/partials/orgs.html

@@ -1,8 +1,5 @@
-<topnav icon="fa fa-fw fa-users" title="Global Orgs" subnav="true">
-	<ul class="nav">
-		<li class="active"><a href="admin/orgs">List</a></li>
-	</ul>
-</topnav>
+<navbar icon="fa fa-fw fa-users" title="Organizations">
+</navbar>
 
 <div class="page-container">
 	<div class="page-wide">

+ 2 - 2
public/app/features/admin/partials/settings.html

@@ -1,5 +1,5 @@
-<topnav icon="fa fa-fw fa-info" title="System info">
-</topnav>
+<navbar icon="fa fa-fw fa-info" title="System info">
+</navbar>
 
 <div class="page-container">
 	<div class="page">

+ 2 - 5
public/app/features/admin/partials/stats.html

@@ -1,8 +1,5 @@
-<topnav icon="fa fa-fw fa-bar-chart" title="Grafana stats"  subnav="true">
-  <ul class="nav">
-    <li class="active"><a href="admin/stats">Overview</a></li>
-  </ul>
-</topnav>
+<navbar icon="fa fa-fw fa-bar-chart" title="Stats">
+</navbar>
 
 <div class="page-container">
 	<div class="page-wide" ng-init="ctrl.init()">

+ 8 - 9
public/app/features/admin/partials/users.html

@@ -1,15 +1,14 @@
-<topnav icon="fa fa-fw fa-user" title="Global Users" subnav="true">
-	<ul class="nav">
-		<li class="active"><a href="admin/users">List</a></li>
-		<li><a href="admin/users/create">Create user</a></li>
-	</ul>
-</topnav>
+<navbar icon="fa fa-fw fa-user" title="Users" title-url="admin/users">
+</navbar>
 
 <div class="page-container">
 	<div class="page-wide">
-		<h1>
-			Users
-		</h1>
+		<a class="btn btn-inverse pull-right" href="admin/users/create">
+			<i class="fa fa-plus"></i>
+			Add new user
+		</a>
+
+		<h1>Users</h1>
 
     <table class="filter-table form-inline">
 			<thead>

+ 2 - 5
public/app/features/apps/partials/list.html

@@ -1,8 +1,5 @@
-<topnav title="Apps" icon="fa fa-fw fa-cubes" subnav="true">
-	<ul class="nav">
-		<li class="active" ><a href="org/apps">Overview</a></li>
-	</ul>
-</topnav>
+<navbar title="Apps" icon="fa fa-fw fa-cubes">
+</navbar>
 
 <div class="page-container">
   <div class="page-wide" ng-init="ctrl.init()">

+ 2 - 2
public/app/features/dashboard/partials/import.html

@@ -1,8 +1,8 @@
-<topnav icon="fa fa-th-large" title="Dashboards" subnav="true">
+<navbar icon="fa fa-th-large" title="Dashboards" subnav="true">
 	<ul class="nav">
 		<li class="active"><a href="import/dashboard">Import</a></li>
 	</ul>
-</topnav>
+</navbar>
 
 <div class="page-container">
 	<div class="page">

+ 2 - 2
public/app/features/datasources/partials/edit.html

@@ -1,9 +1,9 @@
-<topnav title="Data sources" title-url="datasources" icon="fa fa-fw fa-database" subnav="true">
+<navbar title="Data sources" title-url="datasources" icon="fa fa-fw fa-database" subnav="true">
 	<ul class="nav">
 		<li ng-class="{active: isNew}" ng-show="isNew"><a href="datasources/new">Add new</a></li>
 		<li class="active" ng-show="!isNew"><a href="datasources/edit/{{current.name}}">{{current.name}}</a></li>
 	</ul>
-</topnav>
+</navbar>
 
 <div class="page-container">
 	<div class="page">

+ 2 - 2
public/app/features/datasources/partials/list.html

@@ -1,10 +1,10 @@
-<navbar title="Data sources" icon="fa fa-fw fa-database" subnav="false">
+<navbar title="Data sources" icon="fa fa-fw fa-database">
 </navbar>
 
 <div class="page-container">
 	<div class="page-wide">
 
-		<a type="submit" class="btn btn-inverse pull-right" href="datasources/new">
+		<a class="btn btn-inverse pull-right" href="datasources/new">
 			<i class="fa fa-plus"></i>
 			Add data source
 		</a>

+ 2 - 2
public/app/features/org/partials/newOrg.html

@@ -1,8 +1,8 @@
-<topnav title="Organization" icon="fa fa-fw fa-users" subnav="true">
+<navbar title="Organization" icon="fa fa-fw fa-users" subnav="true">
 	<ul class="nav">
 		<li class="active"><a href="org/new">New organization</a></li>
 	</ul>
-</topnav>
+</navbar>
 
 <div class="page-container">
 	<div class="page">

+ 2 - 2
public/app/features/org/partials/orgApiKeys.html

@@ -1,8 +1,8 @@
-<topnav icon="fa fa-fw fa-users" title="Organization" subnav="true">
+<navbar icon="fa fa-fw fa-users" title="Organization" subnav="true">
 	<ul class="nav">
 		<li class="active"><a href="org/apikeys">API Keys</a></li>
 	</ul>
-</topnav>
+</navbar>
 
 <div class="page-container">
 	<div class="page-wide">

+ 2 - 2
public/app/features/org/partials/orgDetails.html

@@ -1,8 +1,8 @@
-<topnav icon="fa fa-fw fa-users" title="Organization" subnav="true">
+<navbar icon="fa fa-fw fa-users" title="Organization">
 	<ul class="nav">
 		<li class="active"><a href="org">Preferences</a></li>
 	</ul>
-</topnav>
+</navbar>
 
 <div class="page-container">
 	<div class="page">

+ 2 - 2
public/app/features/org/partials/orgUsers.html

@@ -1,8 +1,8 @@
-<topnav title="Organization" icon="fa fa-fw fa-users" subnav="true">
+<navbar title="Organization" icon="fa fa-fw fa-users" subnav="true">
 	<ul class="nav">
 		<li class="active"><a href="org/users">Users</a></li>
 	</ul>
-</topnav>
+</navbar>
 
 <div class="page-container">
 	<div class="page-wide">

+ 2 - 1
public/dashboards/home.json

@@ -16,6 +16,7 @@
           "id": 1,
           "span": 12,
           "editable": true,
+          "transparent": true,
           "type": "text",
           "mode": "html",
           "content": "<div class=\"text-center\" style=\"padding: 10px 0 20px 0\">\n<img src=\"img/logo_transparent_200x.png\" width=\"170px\"> \n</div>",
@@ -25,7 +26,7 @@
       ]
     },
     {
-      "height": "610px",
+      "height": "510px",
       "panels": [
         {
           "id": 2,

+ 4 - 2
public/less/navbar.less

@@ -1,6 +1,7 @@
 .navbar {
   position: relative;
-  z-index: 1000;
+  z-index: 110;
+  margin-bottom: 0;
 }
 
 .navbar .navbar-inner {
@@ -66,6 +67,7 @@
     height: 30px;
   }
   .icon-gf-grafana_wordmark {
+    font-size: 21px;
     position: relative;
     top: 3px;
     padding-left: 5px;
@@ -75,7 +77,7 @@
 
 .top-nav-dashboards-btn {
   a {
-    padding: 15px 17px 14px 13px;
+    padding: 16px 17px 14px 13px;
   }
 
   .fa-th-large {

+ 3 - 4
public/less/sidemenu.less

@@ -4,7 +4,7 @@
 
 .sidemenu-wrapper {
   position: absolute;
-  top: 53px;
+  top: 52px;
   left: 0;
   width: 200px;
   background-color: @sideMenuBackground;
@@ -29,10 +29,9 @@
 .sidemenu-pinned {
   .sidemenu-wrapper {
     min-height: 100%;
-    top: 50px;
   }
   .main-view-container {
-    margin-left: 210px;
+    padding-left: 210px;
   }
   .page-container {
     margin-left: 210px;
@@ -40,7 +39,7 @@
   }
   .top-nav-menu-btn {
     a {
-      padding-right: 52px;
+      padding-right: 47px;
       padding-left: 24px;
     }
     .icon-gf-grafana_wordmark  {