Skip to content

N
nexpie-grafana-theme
Commit 496e5bda by Torkel Ödegaard
Options

More progress on new design

parent f00e5936
Showing with 92 additions and 121 deletions
src/app/controllers/sidemenuCtrl.js
...@@ -34,26 +34,23 @@ function (angular, _, $, config) { ...@@ -34,26 +34,23 @@ function (angular, _, $, config) {
text: "Account", href: $scope.getUrl("/account"), text: "Account", href: $scope.getUrl("/account"),
requireRole: "Admin", requireRole: "Admin",
icon: "fa fa-shield", 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")},
]
}); });
}
if ($scope.grafana.user.isSignedIn) {
$scope.menu.push({ $scope.menu.push({
text: "Profile", href: $scope.getUrl("/profile"), text: "Users", href: $scope.getUrl("/account/users"),
icon: "fa fa-user", requireRole: "Admin",
icon: "fa fa-users",
});
$scope.menu.push({
text: "API Keys", href: $scope.getUrl("/account/apikeys"),
requireRole: "Admin",
icon: "fa fa-key",
}); });
} }
if ($scope.grafana.user.isSignedIn) { if ($scope.grafana.user.isSignedIn) {
$scope.menu.push({ $scope.menu.push({
text: "Sign out", href: $scope.getUrl("/logout"), text: "Profile", href: $scope.getUrl("/profile"),
icon: "fa fa-sign-out", icon: "fa fa-user",
}); });
} }
...@@ -70,6 +67,14 @@ function (angular, _, $, config) { ...@@ -70,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.onAppEvent('$routeUpdate', function() {
$scope.updateState(); $scope.updateState();
}); });
......
src/app/partials/sidemenu.html
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
</li> </li>
<li ng-repeat="item in menu" ng-class="{'active': item.active}"> <li ng-repeat="item in menu" ng-class="{'active': item.active}">
<a href="{{item.href}}" class="sidemenu-item"> <a href="{{item.href}}" class="sidemenu-item" target="{{item.target}}">
<span class="sidemenu-icon"><i class="{{item.icon}}"></i></span> <span class="sidemenu-icon"><i class="{{item.icon}}"></i></span>
<span class="sidemenu-item-text">{{item.text}}</span> <span class="sidemenu-item-text">{{item.text}}</span>
</a> </a>
......
src/css/less/grafana.less
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
@import "tightform.less"; @import "tightform.less";
@import "sidemenu.less"; @import "sidemenu.less";
@import "gfbox.less"; @import "gfbox.less";
@import "navbar.less";
.row-control-inner { .row-control-inner {
padding:0px; padding:0px;
...@@ -51,70 +52,6 @@ ...@@ -51,70 +52,6 @@
width: 24px; width: 24px;
} }
.navbar-inner {
padding-left: 0px;
}
.navbar .nav>li>a {
padding: 19px 15px 8px;
}
.top-nav {
float: left;
}
.top-nav-menu-btn {
display: block;
float: left;
padding: 11px 6px 12px 14px;
position: relative;
border-right: 1px solid @black;
font-weight: bold;
font-size: 90%;
i {
font-size: 170%;
color: @gray;
padding: 0px 0px 0px 6px;
position: relative;
top: 4px;
}
}
.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;
}
}
.row-button { .row-button {
width: 24px; width: 24px;
} }
...@@ -128,24 +65,6 @@ ...@@ -128,24 +65,6 @@
top: 30%; 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 { .dashboard-fullscreen {
.main-view-container { .main-view-container {
overflow: hidden; overflow: hidden;
......
src/css/less/navbar.less 0 → 100644
.navbar-inner {
padding-left: 0px;
}
.navbar .nav>li>a {
padding: 19px 15px 8px;
}
.top-nav {
float: left;
}
.top-nav-menu-btn {
display: block;
float: left;
padding: 11px 6px 12px 14px;
position: relative;
border-right: 1px solid @black;
font-weight: bold;
font-size: 90%;
i {
font-size: 170%;
color: @gray;
padding: 0px 0px 0px 6px;
position: relative;
top: 4px;
}
}
.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;
}
}
src/css/less/sidemenu.less
.sidemenu-container { .sidemenu-wrapper {
display: none; display: none;
a:focus { a:focus {
text-decoration: none; text-decoration: none;
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
} }
.sidemenu-open { .sidemenu-open {
.sidemenu-container { .sidemenu-wrapper {
display: block; display: block;
position: absolute; position: absolute;
top: 0; top: 0;
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
width: auto; width: auto;
} }
.pro-main-view { .main-view {
padding-left: 200px; padding-left: 200px;
} }
...@@ -95,25 +95,7 @@ ...@@ -95,25 +95,7 @@
.sidemenu-item-text { .sidemenu-item-text {
padding-left: 15px; padding-left: 15px;
text-shadow: 1px 0px 10px @orange;
} }
} }
.sidemenu-logo-container {
background: @grafanaPanelBackground;
text-align: center;
border-bottom: 1px solid black;
img {
display: inline-block;
width: 102px;
padding: 6px 0px 6px 11px;
}
}
.sidemenu-toggle {
float: right;
display: block;
font-size: 200%;
padding: 11px 8px 11px 8px;
background: @grafanaTargetFuncBackground;
}
src/views/index.html
...@@ -27,9 +27,9 @@ ...@@ -27,9 +27,9 @@
<body ng-cloak ng-controller="GrafanaCtrl"> <body ng-cloak ng-controller="GrafanaCtrl">
<link rel="stylesheet" href="[[.AppSubUrl]]/css/grafana.light.min.css" ng-if="grafana.style === 'light'"> <link rel="stylesheet" href="[[.AppSubUrl]]/css/grafana.light.min.css" ng-if="grafana.style === 'light'">
<div class="pro-container" ng-class="{'sidemenu-open': grafana.sidemenu}"> <div class="main-view-wrapper" ng-class="{'sidemenu-open': grafana.sidemenu}">
<aside class="sidemenu-container" ng-if="grafana.sidemenu"> <aside class="sidemenu-wrapper" ng-if="grafana.sidemenu">
<div ng-include="'app/partials/sidemenu.html'"></div> <div ng-include="'app/partials/sidemenu.html'"></div>
</aside> </aside>
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
</div> </div>
</div> </div>
<div ng-view class="pro-main-view"></div> <div ng-view class="main-view"></div>
</div> </div>
......
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