mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
poc(new sidenav/topnaav)
This commit is contained in:
Torkel Ödegaard
parent
cd0256d40d
commit
4f227ae92e
@ -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>
|
||||
|
||||
@ -1,12 +1,6 @@
|
||||
<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">
|
||||
|
||||
@ -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 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sidemenu-org-user {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
@ -58,7 +58,7 @@
|
||||
// Links
|
||||
// -------------------------
|
||||
@linkColor: darken(@white,11%);
|
||||
@linkColorDisabled: darken(@linkColor,45%);
|
||||
@linkColorDisabled: darken(@linkColor,30%);
|
||||
@linkColorHover: @white;
|
||||
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user