IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-16 11:42:35 -06:00
Code Issues Packages Projects Releases Wiki Activity

Updated to sidemenu style

Browse Source
This commit is contained in:
Torkel Ödegaard 2015-02-03 10:46:33 +01:00
parent 3e5223b98d
commit dfef4727b6
4 changed files with 55 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -47,13 +47,6 @@ function (angular, _, $, config) {
});
}
if ($scope.grafana.user.isSignedIn) {
$scope.menu.push({
text: "Profile", href: $scope.getUrl("/profile"),
icon: "fa fa-user",
});
}
if ($scope.grafana.user.isGrafanaAdmin) {
$scope.menu.push({
text: "Admin", href: $scope.getUrl("/admin/users"),
@ -67,40 +60,21 @@ 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();
});
$scope.onAppEvent('$routeChangeSuccess', function() {
$scope.updateState();
});
$scope.updateState = function() {
var currentPath = config.appSubUrl + $location.path();
var search = $location.search();
var activeIndex;
_.each($scope.menu, function(item, index) {
_.each($scope.menu, function(item) {
item.active = false;
if (item.href === currentPath) {
item.active = true;
activeIndex = index;
}
if (item.startsWith) {
if (currentPath.indexOf(item.startsWith) === 0) {
item.active = true;
item.href = currentPath;
activeIndex = index;
}
}
@ -124,7 +98,6 @@ function (angular, _, $, config) {
});
});
//$scope.menu.splice(0, 0, $scope.menu.splice(activeIndex, 1)[0]);
};
$scope.init = function() {

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

@ -1,37 +1,39 @@
<div ng-controller="SideMenuCtrl" ng-init="init()">
<ul class="sidemenu">
<li style="margin-bottom: 15px;">
<li style="margin-bottom: 2px;">
<a class="pointer sidemenu-top-btn" ng-click="toggleSideMenu()">
<img class="logo-icon" src="img/fav32.png"></img>
<i class="pull-right fa fa-angle-left"></i>
</a>
</li>
<li ng-repeat="item in menu" ng-class="{'active': item.active}">
<li ng-repeat="item in menu">
<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>
</li>
<!-- <li ng&#45;repeat&#45;end ng&#45;if="item.active"> -->
<!-- <ul class="sidemenu&#45;links"> -->
<!-- <li ng&#45;repeat="link in item.links"> -->
<!-- <a href="{{link.href}}" class="sidemenu&#45;link" ng&#45;class="{active: link.active}"><i class="fa fa&#45;angle&#45;right"></i>{{link.text}}</a> -->
<!-- </li> -->
<!-- </ul> -->
<!-- </li> -->
<li ng-if="grafana.user.isSignedIn" style="margin-top:50px">
<a href="profile" class="sidemenu-item sidemenu-user">
<img ng-src="{{grafana.user.gravatarUrl}}">
<span class="sidemenu-item-text">{{grafana.user.name}}</a>
</a>
</li>
<li ng-if="grafana.user.isSignedIn">
<a href="logout" class="sidemenu-item" target="_self">
<span class="sidemenu-item-text no-icon">Sign out</span>
</a>
</li>
<li ng-if="!grafana.user.isSignedIn" style="margin-top:50px">
<a href="/login" class="sidemenu-item" target="_self">
<span class="sidemenu-icon"><i class="fa fa-sign-in"></i></span>
<span class="sidemenu-item-text">Sign in</span>
</a>
</li>
<!-- <li class="dropdown" ng&#45;if="grafana.user.isSignedIn"> -->
<!-- <a class="sidemenu&#45;user pointer" data&#45;toggle="dropdown" title="{{grafana.user.email}}"> -->
<!-- <span class="gravatar&#45;missing">f</span> -->
<!-- <img ng&#45;src="{{grafana.user.gravatarUrl}}" width="35"> -->
<!-- <span class="gravatar&#45;email small">{{grafana.user.login}}</span> -->
<!-- </a> -->
<!-- <ul class="dropdown&#45;menu"> -->
<!-- <li><a href="{{appSubUrl}}/?logout">Logout</a></li> -->
<!-- </ul> -->
<!-- </li> -->
</ul>
</div>

2
src/css/less/panel.less
View File

@ -6,7 +6,7 @@
}
.panel-margin {
margin: 4px;
margin: 5px;
display: block;
}

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

@ -31,31 +31,31 @@
list-style: none;
margin: 0;
padding: 0;
li {
height: 50px;
}
}
.sidemenu-user {
padding: 8px 10px 7px 15px;
display: block;
width: 170px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.gravatar-missing {
display: none;
}
.gravatar-email {
padding-left: 4px;
.sidemenu-item-text {
width: 110px;
display: inline-block;
vertical-align: middle;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
img {
width: 35px;
padding-right: 10px;
border-radius: 50%;
width: 40px;
height: 40px;
box-shadow: 0 0 14px 2px rgba(255,255,255, 0.05);
}
border-bottom: 1px solid black;
}
.sidemenu-top-btn {
display: block;
padding: 14px 0px 10px 20px;
padding: 14px 0px 10px 27px;
background: @grafanaTargetBackground;
border: 1px solid rgb(55, 54, 54);
i {
@ -67,30 +67,36 @@
.sidemenu-icon {
border-radius: 50%;
background: black;
box-shadow: 0 0 10px 6px #2E2E2E;
width: 35px;
height: 35px;
background: #000;
box-shadow: 0 0 14px 2px rgba(255,255,255, 0.05);
width: 40px;
height: 40px;
display: inline-block;
i {
color: @textColor;
opacity: .7;
position: relative;
left: 9px;
top: 2px;
font-size: 120%;
left: 11px;
top: 5px;
font-size: 135%;
}
}
.sidemenu-item {
color: @orange;
color: #f80;
line-height: 34px;
padding: 14px 10px 14px 20px;
font-weight: bold;
padding: 14px 10px 14px 20px;
display: block;
display: block;
.sidemenu-item-text {
padding-left: 15px;
text-shadow: 1px 0px 10px @orange;
&.no-icon {
padding-left: 59px;
}
//text-shadow: 1px 0 10px #A25803;
//text-shadow: 1px 0 10px #f80;
}
}