IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

More progress on new design

Browse Source
This commit is contained in:
Torkel Ödegaard 2015-02-01 11:56:01 +01:00
parent f00e5936c9
commit 496e5bdad9
6 changed files with 92 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/app/controllers/sidemenuCtrl.js
View File

@ -34,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",
});
}
@ -50,13 +54,6 @@ function (angular, _, $, config) {
});
}
if ($scope.grafana.user.isSignedIn) {
$scope.menu.push({
text: "Sign out", href: $scope.getUrl("/logout"),
icon: "fa fa-sign-out",
});
}
if ($scope.grafana.user.isGrafanaAdmin) {
$scope.menu.push({
text: "Admin", href: $scope.getUrl("/admin/users"),
@ -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.updateState();
});

2
src/app/partials/sidemenu.html
View File

@ -13,7 +13,7 @@
</li>
<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-item-text">{{item.text}}</span>
</a>

83
src/css/less/grafana.less
View File

@ -11,6 +11,7 @@
@import "tightform.less";
@import "sidemenu.less";
@import "gfbox.less";
@import "navbar.less";
.row-control-inner {
padding:0px;
@ -51,70 +52,6 @@
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 {
width: 24px;
}
@ -128,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;

65
src/css/less/navbar.less Normal file
View File

@ -0,0 +1,65 @@
.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;
}
}

26
src/css/less/sidemenu.less
View File

@ -1,4 +1,4 @@
.sidemenu-container {
.sidemenu-wrapper {
display: none;
a:focus {
text-decoration: none;
@ -6,7 +6,7 @@
}
.sidemenu-open {
.sidemenu-container {
.sidemenu-wrapper {
display: block;
position: absolute;
top: 0;
@ -23,7 +23,7 @@
width: auto;
}
.pro-main-view {
.main-view {
padding-left: 200px;
}
@ -95,25 +95,7 @@
.sidemenu-item-text {
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;
}

6
src/views/index.html
View File

@ -27,9 +27,9 @@
<body ng-cloak ng-controller="GrafanaCtrl">
<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>
</aside>
@ -43,7 +43,7 @@
</div>
</div>
<div ng-view class="pro-main-view"></div>
<div ng-view class="main-view"></div>
</div>