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 @@ ...@@ -4,7 +4,7 @@
<div class="top-nav"> <div class="top-nav">
<div class="top-nav-btn top-nav-menu-btn"> <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"> <span class="top-nav-logo-background">
<img class="logo-icon" src="img/fav32.png"></img> <img class="logo-icon" src="img/fav32.png"></img>
</span> </span>
......
public/app/partials/sidemenu.html
<div ng-controller="SideMenuCtrl" ng-init="init()"> <div ng-controller="SideMenuCtrl" ng-init="init()">
<ul class="sidemenu sidemenu-main"> <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"> <li class="sidemenu-org-section dropdown" ng-if="contextSrv.isSignedIn">
<div class="sidemenu-org" data-toggle="dropdown" ng-click="openUserDropdown()"> <div class="sidemenu-org" data-toggle="dropdown" ng-click="openUserDropdown()">
...@@ -17,7 +11,7 @@ ...@@ -17,7 +11,7 @@
<span class="sidemenu-org-user sidemenu-item-text">{{contextSrv.user.name}}</span> <span class="sidemenu-org-user sidemenu-item-text">{{contextSrv.user.name}}</span>
<span class="sidemenu-org-name sidemenu-item-text">{{contextSrv.user.orgName}}</span> <span class="sidemenu-org-name sidemenu-item-text">{{contextSrv.user.orgName}}</span>
</div> </div>
<i class="fa fa-caret-down small"></i> <i class="fa fa-caret-right small"></i>
</div> </div>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li ng-repeat="menuItem in orgMenu" ng-class="menuItem.cssClass"> <li ng-repeat="menuItem in orgMenu" ng-class="menuItem.cssClass">
......
public/less/sidemenu.less
...@@ -4,12 +4,11 @@ ...@@ -4,12 +4,11 @@
.sidemenu-wrapper { .sidemenu-wrapper {
position: absolute; position: absolute;
display: none; top: 51px;
top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 200px; width: 200px;
background: @bodyBackground; background-color: darken(@grafanaTargetFuncBackground, 2%);
min-height: 100%; min-height: 100%;
z-index: 101; z-index: 101;
...@@ -39,7 +38,6 @@ ...@@ -39,7 +38,6 @@
padding: 0; padding: 0;
>li { >li {
margin-bottom: 9px;
} }
.fa-caret-down { .fa-caret-down {
...@@ -61,25 +59,6 @@ ...@@ -61,25 +59,6 @@
text-overflow: ellipsis; 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 { .icon-circle {
width: 40px; width: 40px;
height: 40px; height: 40px;
...@@ -100,10 +79,13 @@ ...@@ -100,10 +79,13 @@
.sidemenu-item { .sidemenu-item {
color: @linkColor; color: @linkColor;
line-height: 40px; line-height: 45px;
padding: 0px 10px 0px 20px; padding: 0px 10px 0px 20px;
display: block; display: block;
white-space: nowrap; white-space: nowrap;
&:hover {
background-color: @grafanaTargetFuncBackground;
}
.sidemenu-item-text { .sidemenu-item-text {
padding-left: 11px; padding-left: 11px;
...@@ -186,19 +168,28 @@ ...@@ -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 { .sidemenu-org {
display: table; display: table;
position: relative; position: relative;
width: 159px; 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; position: absolute;
top: 33px; top: 17px;
right: 2px; right: -12px;
font-size: 80%;
color: @linkColor;
} }
.sidemenu-org-avatar, .sidemenu-org-avatar,
...@@ -212,22 +203,25 @@ ...@@ -212,22 +203,25 @@
} }
.sidemenu-org-avatar > img { .sidemenu-org-avatar > img {
width: 44px; width: 40px;
height: 44px; height: 40px;
border-radius: 50%; border-radius: 50%;
position: absolute;
} }
.sidemenu-org-details { .sidemenu-org-details {
padding-left: 12px; padding-left: 16px;
color: @linkColor; color: @linkColor;
} }
.sidemenu-org-user,
.sidemenu-org-name { .sidemenu-org-name {
display: block; display: block;
font-size: 13px;
color: @linkColorDisabled;
} }
.sidemenu-org-user { .sidemenu-org-user {
font-size: 14px; display: block;
} }
public/less/variables.dark.less
...@@ -58,7 +58,7 @@ ...@@ -58,7 +58,7 @@
// Links // Links
// ------------------------- // -------------------------
@linkColor: darken(@white,11%); @linkColor: darken(@white,11%);
@linkColorDisabled: darken(@linkColor,45%); @linkColorDisabled: darken(@linkColor,30%);
@linkColorHover: @white; @linkColorHover: @white;
......
public/views/index.html
...@@ -25,10 +25,10 @@ ...@@ -25,10 +25,10 @@
</head> </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"> <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> <div ng-include="'app/partials/sidemenu.html'"></div>
</aside> </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