Skip to content

N
nexpie-grafana-theme
Commit 92c2f8d5 by Torkel Ödegaard
Options

feat(pinned sidemenu): completed side menu pinned stuff

parent 03aea09c
Showing with 55 additions and 115 deletions
public/app/core/components/sidemenu/sidemenu.html
...@@ -64,7 +64,7 @@ ...@@ -64,7 +64,7 @@
<li> <li>
<a class="sidemenu-item" target="_self" ng-hide="ctrl.contextSrv.pinned" ng-click="ctrl.contextSrv.setPinnedState(true)"> <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> <span class="sidemenu-item-text">Pin</span>
</a> </a>
</li> </li>
......
public/app/core/components/sidemenu/sidemenu.ts
...@@ -24,6 +24,7 @@ export class SideMenuCtrl { ...@@ -24,6 +24,7 @@ export class SideMenuCtrl {
this.updateMenu(); this.updateMenu();
this.$scope.$on('$routeChangeSuccess', () => { this.$scope.$on('$routeChangeSuccess', () => {
this.updateMenu();
if (!this.contextSrv.pinned) { if (!this.contextSrv.pinned) {
this.contextSrv.sidemenu = false; this.contextSrv.sidemenu = false;
} }
...@@ -86,11 +87,11 @@ export class SideMenuCtrl { ...@@ -86,11 +87,11 @@ export class SideMenuCtrl {
this.switchOrg(org.orgId); 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 { ...@@ -111,19 +112,19 @@ export class SideMenuCtrl {
}); });
this.mainLinks.push({ this.mainLinks.push({
text: "Grafana stats", text: "Stats",
icon: "fa fa-fw fa-bar-chart", icon: "fa fa-fw fa-bar-chart",
url: this.getUrl("/admin/stats"), url: this.getUrl("/admin/stats"),
}); });
this.mainLinks.push({ this.mainLinks.push({
text: "Global Users", text: "Users",
icon: "fa fa-fw fa-user", icon: "fa fa-fw fa-user",
url: this.getUrl("/admin/users"), url: this.getUrl("/admin/users"),
}); });
this.mainLinks.push({ this.mainLinks.push({
text: "Global Orgs", text: "Organizations",
icon: "fa fa-fw fa-users", icon: "fa fa-fw fa-users",
url: this.getUrl("/admin/orgs"), url: this.getUrl("/admin/orgs"),
}); });
......
public/app/core/core.ts
...@@ -15,7 +15,6 @@ import "./directives/ng_model_on_blur"; ...@@ -15,7 +15,6 @@ import "./directives/ng_model_on_blur";
import "./directives/password_strenght"; import "./directives/password_strenght";
import "./directives/spectrum_picker"; import "./directives/spectrum_picker";
import "./directives/tags"; import "./directives/tags";
import "./directives/topnav";
import "./directives/value_select_dropdown"; import "./directives/value_select_dropdown";
import "./directives/give_focus"; import "./directives/give_focus";
import './jquery_extended'; import './jquery_extended';
......
public/app/core/directives/topnav.js deleted 100644 → 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;
}
};
});
});
public/app/features/admin/partials/edit_org.html
<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"> <ul class="nav">
<li><a href="admin/orgs">List</a></li> <li class="active"><a href="admin/orgs/edit/{{org.id}}">{{org.name}}</a></li>
<li class="active"><a href="admin/orgs/edit/{{org.id}}">Edit Org</a></li>
</ul> </ul>
</topnav> </navbar>
<div class="page-container"> <div class="page-container">
<div class="page"> <div class="page">
......
public/app/features/admin/partials/new_user.html
<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"> <ul class="nav">
<li><a href="admin/users">Users</a></li> <li class="active"><a href="admin/users/create">Add user</a></li>
<li class="active"><a href="admin/users/create">Create user</a></li>
</ul> </ul>
</topnav> </navbar>
<div class="page-container"> <div class="page-container">
<div class="page"> <div class="page">
<h2> <h2>
Create a new user Add new user
</h2> </h2>
<form name="userForm"> <form name="userForm">
......
public/app/features/admin/partials/orgs.html
<topnav icon="fa fa-fw fa-users" title="Global Orgs" subnav="true"> <navbar icon="fa fa-fw fa-users" title="Organizations">
<ul class="nav"> </navbar>
<li class="active"><a href="admin/orgs">List</a></li>
</ul>
</topnav>
<div class="page-container"> <div class="page-container">
<div class="page-wide"> <div class="page-wide">
......
public/app/features/admin/partials/settings.html
<topnav icon="fa fa-fw fa-info" title="System info"> <navbar icon="fa fa-fw fa-info" title="System info">
</topnav> </navbar>
<div class="page-container"> <div class="page-container">
<div class="page"> <div class="page">
......
public/app/features/admin/partials/stats.html
<topnav icon="fa fa-fw fa-bar-chart" title="Grafana stats" subnav="true"> <navbar icon="fa fa-fw fa-bar-chart" title="Stats">
<ul class="nav"> </navbar>
<li class="active"><a href="admin/stats">Overview</a></li>
</ul>
</topnav>
<div class="page-container"> <div class="page-container">
<div class="page-wide" ng-init="ctrl.init()"> <div class="page-wide" ng-init="ctrl.init()">
......
public/app/features/admin/partials/users.html
<topnav icon="fa fa-fw fa-user" title="Global Users" subnav="true"> <navbar icon="fa fa-fw fa-user" title="Users" title-url="admin/users">
<ul class="nav"> </navbar>
<li class="active"><a href="admin/users">List</a></li>
<li><a href="admin/users/create">Create user</a></li>
</ul>
</topnav>
<div class="page-container"> <div class="page-container">
<div class="page-wide"> <div class="page-wide">
<h1> <a class="btn btn-inverse pull-right" href="admin/users/create">
Users <i class="fa fa-plus"></i>
</h1> Add new user
</a>
<h1>Users</h1>
<table class="filter-table form-inline"> <table class="filter-table form-inline">
<thead> <thead>
......
public/app/features/apps/partials/list.html
<topnav title="Apps" icon="fa fa-fw fa-cubes" subnav="true"> <navbar title="Apps" icon="fa fa-fw fa-cubes">
<ul class="nav"> </navbar>
<li class="active" ><a href="org/apps">Overview</a></li>
</ul>
</topnav>
<div class="page-container"> <div class="page-container">
<div class="page-wide" ng-init="ctrl.init()"> <div class="page-wide" ng-init="ctrl.init()">
......
public/app/features/dashboard/partials/import.html
<topnav icon="fa fa-th-large" title="Dashboards" subnav="true"> <navbar icon="fa fa-th-large" title="Dashboards" subnav="true">
<ul class="nav"> <ul class="nav">
<li class="active"><a href="import/dashboard">Import</a></li> <li class="active"><a href="import/dashboard">Import</a></li>
</ul> </ul>
</topnav> </navbar>
<div class="page-container"> <div class="page-container">
<div class="page"> <div class="page">
......
public/app/features/datasources/partials/edit.html
<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"> <ul class="nav">
<li ng-class="{active: isNew}" ng-show="isNew"><a href="datasources/new">Add new</a></li> <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> <li class="active" ng-show="!isNew"><a href="datasources/edit/{{current.name}}">{{current.name}}</a></li>
</ul> </ul>
</topnav> </navbar>
<div class="page-container"> <div class="page-container">
<div class="page"> <div class="page">
......
public/app/features/datasources/partials/list.html
<navbar title="Data sources" icon="fa fa-fw fa-database" subnav="false"> <navbar title="Data sources" icon="fa fa-fw fa-database">
</navbar> </navbar>
<div class="page-container"> <div class="page-container">
<div class="page-wide"> <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> <i class="fa fa-plus"></i>
Add data source Add data source
</a> </a>
......
public/app/features/org/partials/newOrg.html
<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"> <ul class="nav">
<li class="active"><a href="org/new">New organization</a></li> <li class="active"><a href="org/new">New organization</a></li>
</ul> </ul>
</topnav> </navbar>
<div class="page-container"> <div class="page-container">
<div class="page"> <div class="page">
......
public/app/features/org/partials/orgApiKeys.html
<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"> <ul class="nav">
<li class="active"><a href="org/apikeys">API Keys</a></li> <li class="active"><a href="org/apikeys">API Keys</a></li>
</ul> </ul>
</topnav> </navbar>
<div class="page-container"> <div class="page-container">
<div class="page-wide"> <div class="page-wide">
......
public/app/features/org/partials/orgDetails.html
<topnav icon="fa fa-fw fa-users" title="Organization" subnav="true"> <navbar icon="fa fa-fw fa-users" title="Organization">
<ul class="nav"> <ul class="nav">
<li class="active"><a href="org">Preferences</a></li> <li class="active"><a href="org">Preferences</a></li>
</ul> </ul>
</topnav> </navbar>
<div class="page-container"> <div class="page-container">
<div class="page"> <div class="page">
......
public/app/features/org/partials/orgUsers.html
<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"> <ul class="nav">
<li class="active"><a href="org/users">Users</a></li> <li class="active"><a href="org/users">Users</a></li>
</ul> </ul>
</topnav> </navbar>
<div class="page-container"> <div class="page-container">
<div class="page-wide"> <div class="page-wide">
......
public/dashboards/home.json
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
"id": 1, "id": 1,
"span": 12, "span": 12,
"editable": true, "editable": true,
"transparent": true,
"type": "text", "type": "text",
"mode": "html", "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>", "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 @@ ...@@ -25,7 +26,7 @@
] ]
}, },
{ {
"height": "610px", "height": "510px",
"panels": [ "panels": [
{ {
"id": 2, "id": 2,
......
public/less/navbar.less
.navbar { .navbar {
position: relative; position: relative;
z-index: 1000; z-index: 110;
margin-bottom: 0;
} }
.navbar .navbar-inner { .navbar .navbar-inner {
...@@ -66,6 +67,7 @@ ...@@ -66,6 +67,7 @@
height: 30px; height: 30px;
} }
.icon-gf-grafana_wordmark { .icon-gf-grafana_wordmark {
font-size: 21px;
position: relative; position: relative;
top: 3px; top: 3px;
padding-left: 5px; padding-left: 5px;
...@@ -75,7 +77,7 @@ ...@@ -75,7 +77,7 @@
.top-nav-dashboards-btn { .top-nav-dashboards-btn {
a { a {
padding: 15px 17px 14px 13px; padding: 16px 17px 14px 13px;
} }
.fa-th-large { .fa-th-large {
......
public/less/sidemenu.less
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
.sidemenu-wrapper { .sidemenu-wrapper {
position: absolute; position: absolute;
top: 53px; top: 52px;
left: 0; left: 0;
width: 200px; width: 200px;
background-color: @sideMenuBackground; background-color: @sideMenuBackground;
...@@ -29,10 +29,9 @@ ...@@ -29,10 +29,9 @@
.sidemenu-pinned { .sidemenu-pinned {
.sidemenu-wrapper { .sidemenu-wrapper {
min-height: 100%; min-height: 100%;
top: 50px;
} }
.main-view-container { .main-view-container {
margin-left: 210px; padding-left: 210px;
} }
.page-container { .page-container {
margin-left: 210px; margin-left: 210px;
...@@ -40,7 +39,7 @@ ...@@ -40,7 +39,7 @@
} }
.top-nav-menu-btn { .top-nav-menu-btn {
a { a {
padding-right: 52px; padding-right: 47px;
padding-left: 24px; padding-left: 24px;
} }
.icon-gf-grafana_wordmark { .icon-gf-grafana_wordmark {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment