Skip to content

N
nexpie-grafana-theme
Commit f341a21b by Torkel Ödegaard
Options

ux: side nav experiments

parent ff239470
Showing with 80 additions and 71 deletions
public/app/core/components/navbar/navbar.html
......@@ -5,9 +5,9 @@
</span>
</a>
<a class="navbar-page-btn navbar-page-btn--search" ng-click="ctrl.showSearch()">
<i class="fa fa-search"></i>
</a>
<!-- <a class="navbar&#45;page&#45;btn navbar&#45;page&#45;btn&#45;&#45;search" ng&#45;click="ctrl.showSearch()"> -->
<!-- <i class="fa fa&#45;search"></i> -->
<!-- </a> -->
<div ng-if="::!ctrl.hasMenu">
<a href="{{::ctrl.section.url}}" class="navbar-page-btn">
......@@ -25,7 +25,7 @@
<i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-menu--navbar">
<li ng-repeat="navItem in ::ctrl.model.menu" ng-class="{active: navItem.active}">
<li ng-repeat="navItem in ::ctrl.model.menu">
<a class="pointer" ng-href="{{::navItem.url}}" ng-click="ctrl.navItemClicked(navItem, $event)">
<i class="{{::navItem.icon}}" ng-show="::navItem.icon"></i>
{{::navItem.title}}
......
public/app/core/components/sidemenu/sidemenu.html
<ul class="sidemenu">
<li>
<a class="sidemenu-item" ng-click="ctrl.search()">
<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-search"></i></span>
</a>
</li>
<li ng-repeat="item in ::ctrl.mainLinks" class="dropdown">
<a href="{{::item.url}}" class="sidemenu-item sidemenu-main-link" target="{{::item.target}}">
<a href="{{::item.url}}" class="sidemenu-item" target="{{::item.target}}">
<span class="icon-circle sidemenu-icon">
<i class="{{::item.icon}}" ng-show="::item.icon"></i>
<img ng-src="{{::item.img}}" ng-show="::item.img">
</span>
</a>
<ul class="dropdown-menu" role="menu" ng-if="::item.children">
<ul class="dropdown-menu dropdown-menu--sidemenu" role="menu" ng-if="::item.children">
<li class="side-menu-header">
<span class="sidemenu-item-text">{{::item.text}}</span>
</li>
......@@ -29,7 +34,7 @@
</li>
<li class="sidemenu-org-section" ng-if="::ctrl.isSignedIn" class="dropdown">
<a class="sidemenu-item sidemenu-main-link" href="profile">
<a class="sidemenu-item" href="profile">
<span class="icon-circle sidemenu-icon sidemenu-org-avatar">
<img ng-src="{{::ctrl.user.gravatarUrl}}">
<span class="sidemenu-org-avatar--missing">
......@@ -37,7 +42,7 @@
</span>
</div>
</a>
<ul class="dropdown-menu" role="menu">
<ul class="dropdown-menu dropdown-menu--sidemenu" role="menu">
<li class="side-menu-header">
<span class="sidemenu-org-user sidemenu-item-text">{{::ctrl.user.name}}</span>
<span class="sidemenu-org-name sidemenu-item-text">{{::ctrl.user.orgName}}</span>
......@@ -62,12 +67,12 @@
</ul>
</li>
<li>
<a class="sidemenu-item" target="_self" ng-hide="ctrl.contextSrv.pinned" ng-click="ctrl.contextSrv.setPinnedState(true)">
<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-thumb-tack"></i></span>
<span class="sidemenu-item-text">Pin</span>
</a>
</li>
</ul>
public/sass/_variables.dark.scss
......@@ -213,7 +213,7 @@ $wellBackground: #131517;
$navbarHeight: 52px;
$navbarBackgroundHighlight: $dark-3;
$navbarBackground: $dark-3;
$navbarBackground: $panel-bg;
$navbarBorder: 1px solid $body-bg;
$navbarText: $gray-4;
......@@ -225,7 +225,7 @@ $navbarLinkBackgroundActive: $navbarBackground;
$navbarBrandColor: $link-color;
$navbarDropdownShadow: inset 0px 4px 10px -4px $body-bg;
$navbarButtonBackground: lighten($navbarBackground, 3%);
$navbarButtonBackground: $navbarBackground;
$navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);
// Sidemenu
......@@ -233,6 +233,13 @@ $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);
$side-menu-bg: $dark-3;
$side-menu-item-hover-bg: $dark-2;
// Menu dropdowns
// -------------------------
$menu-dropdown-bg: $body-bg;
$menu-dropdown-hover-bg: $dark-2;
$menu-dropdown-border-color: $dark-4;
// Pagination
// -------------------------
$paginationBackground: $body-bg;
......
public/sass/_variables.light.scss
......@@ -187,6 +187,12 @@ $input-invalid-border-color: lighten($red, 5%);
$side-menu-bg: $body-bg;
$side-menu-item-hover-bg: $gray-6;
// Menu dropdowns
// -------------------------
$menu-dropdown-bg: $white;
$menu-dropdown-hover-bg: $gray-6;
$menu-dropdown-border-color: $tight-form-border;
// search
$search-shadow: 0 5px 30px 0 lighten($gray-2, 30%);
......@@ -206,7 +212,6 @@ $dropdownLinkColorActive: $link-color;
$dropdownLinkBackgroundActive: $gray-6;
$dropdownLinkBackgroundHover: $gray-6;
// COMPONENT VARIABLES
// --------------------------------------------------
......
public/sass/components/_dropdown.scss
......@@ -90,8 +90,36 @@
}
}
}
&--navbar {
top: 100%;
min-width: 100%;
}
&--navbar,
&--sidemenu {
background: $menu-dropdown-bg;
margin-top: 0px;
> li > a {
padding: $spacer/2 $spacer;
border-left: 2px solid transparent;
i {
display: inline-block;
padding-right: 21px;
}
&:hover {
@include left-brand-border-gradient();
color: $link-hover-color;
background: $input-label-bg !important;
}
}
}
}
// Hover/Focus state
// -----------
.dropdown-menu > li > a:hover,
......
public/sass/components/_navbar.scss
......@@ -60,9 +60,8 @@
position: relative;
float: left;
margin: 0;
border-right: 1px solid $tight-form-border;
background-color: $navbarButtonBackground;
padding: 0.4rem 1.0rem 0.4rem 1rem;
padding: 0.4rem 2.0rem 0.4rem 1rem;
min-height:: $navbarHeight;
.fa-caret-down {
......@@ -110,7 +109,6 @@
display: block;
margin: 0;
font-size: 1.4rem;
border-right: 1px solid $tight-form-border;
color: darken($link-color, 5%);
background-color: $navbarButtonBackground;
font-size: $font-size-lg;
......@@ -148,29 +146,6 @@
position: relative;
}
.dropdown-menu.dropdown-menu--navbar {
top: 100%;
min-width: 100%;
margin-top: 0px;
li a {
padding: $spacer/2 $spacer;
border-left: 2px solid $side-menu-bg;
background: $side-menu-bg;
i {
display: inline-block;
padding-right: 21px;
}
&:hover {
@include left-brand-border-gradient();
color: $link-hover-color;
background: $input-label-bg;
}
}
}
.navbar-section-wrapper {
position: relative;
float: left;
......
public/sass/components/_sidemenu.scss
......@@ -56,14 +56,21 @@
background-color: $side-menu-item-hover-bg;
@include left-brand-border-gradient();
.sidemenu-item {
border-top: 1px solid $menu-dropdown-border-color;
border-bottom: 1px solid $menu-dropdown-border-color;
}
.dropdown-menu {
margin: 0;
display: block;
opacity: 0;
top: 0px;
border: 1px solid $dark-4;
border-left: none;
// important to overlap it otherwise it can be hidden
// again by the mouse getting outside the hover space
left: $side-menu-width - 5px;
background-color: $side-menu-bg;
left: $side-menu-width - 2px;
@include animation('dropdown-anim 0ms ease-in-out 0ms forwards');
z-index: -9999;
}
......@@ -82,19 +89,6 @@
}
}
.sidemenu-main-link {
font-size: 16px;
}
.sidemenu-item-text {
width: 110px;
display: inline-block;
vertical-align: middle;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.icon-circle {
width: 40px;
height: 40px;
......@@ -104,9 +98,17 @@
opacity: .7;
position: relative;
left: 7px;
top: 5px;
font-size: 150%;
}
.fa {
top: 2px;
}
.icon-gf {
top: 5px;
}
img {
left: 7px;
position: relative;
......@@ -118,23 +120,9 @@
line-height: 47px;
padding: 0px 10px 0px 10px;
display: block;
border-left: 1px solid transparent;
position: relative;
.sidemenu-item-text {
padding-left: 11px;
position: absolute;
display: none;
opacity: 0;
}
&:hover {
.sidemenu-item-text {
display: block;
opacity: 1;
transition: opacity 150ms ease-in-out;
}
}
font-size: 16px;
border: 1px solid transparent;
img {
border-radius: 50%;
......@@ -145,9 +133,10 @@
}
.side-menu-header {
padding: 8px 10px 8px 10px;
padding: 10px;
background-color: $side-menu-item-hover-bg;
font-size: 18px;
border-bottom: 1px solid $menu-dropdown-border-color;
}
.sidemenu-org-section .dropdown-menu-title {
......
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