Skip to content

N
nexpie-grafana-theme
Commit 4f227ae9 by Torkel Ödegaard
Options

poc(new sidenav/topnaav)

parent cd0256d4
Showing with 34 additions and 46 deletions
public/app/features/dashboard/partials/dashboardTopNav.html
......@@ -4,7 +4,7 @@
<div class="top-nav">
<div class="top-nav-btn top-nav-menu-btn">
<a class="pointer" ng-click="openSearch()">
<a class="pointer" ng-click="contextSrv.toggleSideMenu()">
<span class="top-nav-logo-background">
<img class="logo-icon" src="img/fav32.png"></img>
</span>
......
public/app/partials/sidemenu.html
<div ng-controller="SideMenuCtrl" ng-init="init()">
<ul class="sidemenu sidemenu-main">
<li style="margin-bottom: 15px;">
<a class="pointer sidemenu-top-btn" ng-click="contextSrv.toggleSideMenu()">
<img class="logo-icon" src="img/fav32.png"></img>
<i class="pull-right fa fa-angle-left"></i>
</a>
</li>
<li class="sidemenu-org-section dropdown" ng-if="contextSrv.isSignedIn">
<div class="sidemenu-org" data-toggle="dropdown" ng-click="openUserDropdown()">
......@@ -17,7 +11,7 @@
<span class="sidemenu-org-user sidemenu-item-text">{{contextSrv.user.name}}</span>
<span class="sidemenu-org-name sidemenu-item-text">{{contextSrv.user.orgName}}</span>
</div>
<i class="fa fa-caret-down small"></i>
<i class="fa fa-caret-right small"></i>
</div>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="menuItem in orgMenu" ng-class="menuItem.cssClass">
......
public/less/sidemenu.less
......@@ -4,12 +4,11 @@
.sidemenu-wrapper {
position: absolute;
display: none;
top: 0;
top: 51px;
bottom: 0;
left: 0;
width: 200px;
background: @bodyBackground;
background-color: darken(@grafanaTargetFuncBackground, 2%);
min-height: 100%;
z-index: 101;
......@@ -39,7 +38,6 @@
padding: 0;
>li {
margin-bottom: 9px;
}
.fa-caret-down {
......@@ -61,25 +59,6 @@
text-overflow: ellipsis;
}
.sidemenu-top-btn {
display: block;
padding: 8px 0 4px 22px;
background-color: @navbarBackground;
img {
border-radius: 50%;
background: @iconContainerBackground;
border: 1px solid @bodyBackground;
width: 30px;
padding: 4px;
}
i {
padding-right: 5px;
padding-top: 5px;
font-size: 170%;
color: @linkColor;
}
}
.icon-circle {
width: 40px;
height: 40px;
......@@ -100,10 +79,13 @@
.sidemenu-item {
color: @linkColor;
line-height: 40px;
line-height: 45px;
padding: 0px 10px 0px 20px;
display: block;
white-space: nowrap;
&:hover {
background-color: @grafanaTargetFuncBackground;
}
.sidemenu-item-text {
padding-left: 11px;
......@@ -186,19 +168,28 @@
}
}
.sidemenu-org-section {
box-shadow: inset 0 4px 15px -4px #161616;
border-bottom: 2px solid @sideMenuOrgBorder;
padding: 17px 10px 15px 21px;
cursor: pointer;
&:hover {
background-color: @grafanaTargetFuncBackground;
}
}
.sidemenu-org {
display: table;
position: relative;
width: 159px;
padding: 2px 10px 20px 21px;
border-bottom: 1px solid @sideMenuOrgBorder;
cursor: pointer;
}
.sidemenu-org .fa-caret-down {
.sidemenu-org .fa-caret-right {
position: absolute;
top: 33px;
right: 2px;
top: 17px;
right: -12px;
font-size: 80%;
color: @linkColor;
}
.sidemenu-org-avatar,
......@@ -212,22 +203,25 @@
}
.sidemenu-org-avatar > img {
width: 44px;
height: 44px;
width: 40px;
height: 40px;
border-radius: 50%;
position: absolute;
}
.sidemenu-org-details {
padding-left: 12px;
padding-left: 16px;
color: @linkColor;
}
.sidemenu-org-user,
.sidemenu-org-name {
display: block;
font-size: 13px;
color: @linkColorDisabled;
}
.sidemenu-org-user {
font-size: 14px;
display: block;
}
public/less/variables.dark.less
......@@ -58,7 +58,7 @@
// Links
// -------------------------
@linkColor: darken(@white,11%);
@linkColorDisabled: darken(@linkColor,45%);
@linkColorDisabled: darken(@linkColor,30%);
@linkColorHover: @white;
......
public/views/index.html
......@@ -25,10 +25,10 @@
</head>
<body ng-cloak ng-controller="GrafanaCtrl" ng-class="{'sidemenu-open': contextSrv.sidemenu}">
<body ng-cloak ng-controller="GrafanaCtrl" ng-class="{'sidemenu-open': contextSrv.sidemenuPinned}">
<div class="sidemenu-canvas">
<aside class="sidemenu-wrapper" ng-if="contextSrv.sidemenu">
<aside class="sidemenu-wrapper" ng-if="contextSrv.sidemenu" >
<div ng-include="'app/partials/sidemenu.html'"></div>
</aside>
......
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