Commit 92c2f8d5 by Torkel Ödegaard

feat(pinned sidemenu): completed side menu pinned stuff

parent 03aea09c
......@@ -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>
......
......@@ -24,6 +24,7 @@ export class SideMenuCtrl {
this.updateMenu();
this.$scope.$on('$routeChangeSuccess', () => {
this.updateMenu();
if (!this.contextSrv.pinned) {
this.contextSrv.sidemenu = false;
}
......@@ -86,12 +87,12 @@ 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')});
}
});
});
}
switchOrg(orgId) {
......@@ -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"),
});
......
......@@ -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';
......
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;
}
};
});
});
<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">
......
<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">
......
<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">
......
<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">
......
<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()">
......
<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>
......
<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()">
......
<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">
......
<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">
......
<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>
......
<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">
......
<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">
......
<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">
......
<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">
......
......@@ -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,
......
.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 {
......
......@@ -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 {
......
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