Skip to content

N
nexpie-grafana-theme
Commit 5061b3c6 by Torkel Ödegaard
Options

ux: nav experiments

parent f341a21b
Showing with 36 additions and 61 deletions
pkg/api/index.go
...@@ -105,8 +105,8 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { ...@@ -105,8 +105,8 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
if setting.AlertingEnabled && (c.OrgRole == m.ROLE_ADMIN || c.OrgRole == m.ROLE_EDITOR) { if setting.AlertingEnabled && (c.OrgRole == m.ROLE_ADMIN || c.OrgRole == m.ROLE_EDITOR) {
alertChildNavs := []*dtos.NavLink{ alertChildNavs := []*dtos.NavLink{
{Text: "Alert List", Url: setting.AppSubUrl + "/alerting/list"}, {Text: "Alert List", Url: setting.AppSubUrl + "/alerting/list", Icon: "fa fa-fw fa-list-ul"},
{Text: "Notification channels", Url: setting.AppSubUrl + "/alerting/notifications"}, {Text: "Notification channels", Url: setting.AppSubUrl + "/alerting/notifications", Icon: "fa fa-fw fa-bell-o"},
} }
data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{ data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{
......
public/app/core/components/grafana_app.ts
...@@ -199,14 +199,6 @@ export function grafanaAppDirective(playlistSrv, contextSrv) { ...@@ -199,14 +199,6 @@ export function grafanaAppDirective(playlistSrv, contextSrv) {
} }
} }
// hide menus
var openMenus = body.find('.navbar-page-btn--open');
if (openMenus.length > 0) {
if (target.parents('.navbar-page-btn--open').length === 0) {
openMenus.removeClass('navbar-page-btn--open');
}
}
// hide sidemenu // hide sidemenu
if (!ignoreSideMenuHide && !contextSrv.pinned && body.find('.sidemenu').length > 0) { if (!ignoreSideMenuHide && !contextSrv.pinned && body.find('.sidemenu').length > 0) {
if (target.parents('.sidemenu').length === 0) { if (target.parents('.sidemenu').length === 0) {
......
public/app/core/components/navbar/navbar.html
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
</a> </a>
</div> </div>
<div class="dropdown navbar-section-wrapper" ng-if="::ctrl.hasMenu"> <div class="dropdown navbar-page-btn-wrapper" ng-if="::ctrl.hasMenu">
<a href="{{::ctrl.section.url}}" class="navbar-page-btn" data-toggle="dropdown"> <a href="{{::ctrl.section.url}}" class="navbar-page-btn" data-toggle="dropdown">
<i class="{{::ctrl.section.icon}}" ng-show="::ctrl.section.icon"></i> <i class="{{::ctrl.section.icon}}" ng-show="::ctrl.section.icon"></i>
<img ng-src="{{::ctrl.section.iconUrl}}" ng-show="::ctrl.section.iconUrl"></i> <img ng-src="{{::ctrl.section.iconUrl}}" ng-show="::ctrl.section.iconUrl"></i>
......
public/app/core/components/search/search.html
...@@ -4,9 +4,9 @@ ...@@ -4,9 +4,9 @@
<div class="search-container" ng-if="ctrl.isOpen"> <div class="search-container" ng-if="ctrl.isOpen">
<div class="search-field-wrapper"> <div class="search-field-wrapper">
<div class="search-field-icon pointer" ng-click="ctrl.closeSearch()"> <!-- <div class="search&#45;field&#45;icon pointer" ng&#45;click="ctrl.closeSearch()"> -->
<i class="fa fa-search"></i> <!-- <i class="fa fa&#45;search"></i> -->
</div> <!-- </div> -->
<input type="text" placeholder="Find dashboards by name" give-focus="ctrl.giveSearchFocus" tabindex="1" <input type="text" placeholder="Find dashboards by name" give-focus="ctrl.giveSearchFocus" tabindex="1"
ng-keydown="ctrl.keyDown($event)" ng-keydown="ctrl.keyDown($event)"
......
public/app/core/components/sidemenu/sidemenu.html
...@@ -67,12 +67,5 @@ ...@@ -67,12 +67,5 @@
</ul> </ul>
</li> </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> </ul>
public/app/core/components/sidemenu/sidemenu.ts
...@@ -19,7 +19,7 @@ export class SideMenuCtrl { ...@@ -19,7 +19,7 @@ export class SideMenuCtrl {
maxShownOrgs: number; maxShownOrgs: number;
/** @ngInject */ /** @ngInject */
constructor(private $scope, private $location, private contextSrv, private backendSrv, private $element) { constructor(private $scope, private $rootScope, private $location, private contextSrv, private backendSrv, private $element) {
this.isSignedIn = contextSrv.isSignedIn; this.isSignedIn = contextSrv.isSignedIn;
this.user = contextSrv.user; this.user = contextSrv.user;
this.appSubUrl = config.appSubUrl; this.appSubUrl = config.appSubUrl;
...@@ -44,6 +44,10 @@ export class SideMenuCtrl { ...@@ -44,6 +44,10 @@ export class SideMenuCtrl {
return config.appSubUrl + url; return config.appSubUrl + url;
} }
search() {
this.$rootScope.appEvent('show-dash-search');
}
openUserDropdown() { openUserDropdown() {
this.orgMenu = [ this.orgMenu = [
{section: 'You', cssClass: 'dropdown-menu-title'}, {section: 'You', cssClass: 'dropdown-menu-title'},
......
public/app/core/services/context_srv.ts
...@@ -64,9 +64,7 @@ export class ContextSrv { ...@@ -64,9 +64,7 @@ export class ContextSrv {
toggleSideMenu() { toggleSideMenu() {
this.sidemenu = !this.sidemenu; this.sidemenu = !this.sidemenu;
if (!this.sidemenu) { this.setPinnedState(this.sidemenu);
this.setPinnedState(false);
}
} }
} }
......
public/sass/_variables.dark.scss
...@@ -226,7 +226,7 @@ $navbarBrandColor: $link-color; ...@@ -226,7 +226,7 @@ $navbarBrandColor: $link-color;
$navbarDropdownShadow: inset 0px 4px 10px -4px $body-bg; $navbarDropdownShadow: inset 0px 4px 10px -4px $body-bg;
$navbarButtonBackground: $navbarBackground; $navbarButtonBackground: $navbarBackground;
$navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%); $navbarButtonBackgroundHighlight: $body-bg;
// Sidemenu // Sidemenu
// ------------------------- // -------------------------
...@@ -237,7 +237,8 @@ $side-menu-item-hover-bg: $dark-2; ...@@ -237,7 +237,8 @@ $side-menu-item-hover-bg: $dark-2;
// ------------------------- // -------------------------
$menu-dropdown-bg: $body-bg; $menu-dropdown-bg: $body-bg;
$menu-dropdown-hover-bg: $dark-2; $menu-dropdown-hover-bg: $dark-2;
$menu-dropdown-border-color: $dark-4; $menu-dropdown-border-color: $dark-3;
$menu-dropdown-shadow: 5px 5px 20px -5px $black;
// Pagination // Pagination
......
public/sass/_variables.light.scss
...@@ -192,9 +192,10 @@ $side-menu-item-hover-bg: $gray-6; ...@@ -192,9 +192,10 @@ $side-menu-item-hover-bg: $gray-6;
$menu-dropdown-bg: $white; $menu-dropdown-bg: $white;
$menu-dropdown-hover-bg: $gray-6; $menu-dropdown-hover-bg: $gray-6;
$menu-dropdown-border-color: $tight-form-border; $menu-dropdown-border-color: $tight-form-border;
$menu-dropdown-shadow: 5px 5px 20px -5px $gray-4;
// search // search
$search-shadow: 0 5px 30px 0 lighten($gray-2, 30%); $search-shadow: 0 5px 30px 0 $gray-4;
// Dropdowns // Dropdowns
// ------------------------- // -------------------------
......
public/sass/components/_dropdown.scss
...@@ -99,21 +99,23 @@ ...@@ -99,21 +99,23 @@
&--navbar, &--navbar,
&--sidemenu { &--sidemenu {
background: $menu-dropdown-bg; background: $menu-dropdown-bg;
box-shadow: $menu-dropdown-shadow;
margin-top: 0px; margin-top: 0px;
border: none;
> li > a { > li > a {
padding: $spacer/2 $spacer; padding: $spacer/2 1.2rem;
border-left: 2px solid transparent; border-left: 2px solid transparent;
i { i {
display: inline-block; display: inline-block;
padding-right: 21px; margin-right: 10px;
} }
&:hover { &:hover {
@include left-brand-border-gradient(); @include left-brand-border-gradient();
color: $link-hover-color; color: $link-hover-color;
background: $input-label-bg !important; background: $menu-dropdown-hover-bg !important;
} }
} }
} }
......
public/sass/components/_navbar.scss
...@@ -60,9 +60,9 @@ ...@@ -60,9 +60,9 @@
position: relative; position: relative;
float: left; float: left;
margin: 0; margin: 0;
background-color: $navbarButtonBackground; background-color: $side-menu-bg;
padding: 0.4rem 2.0rem 0.4rem 1rem; padding: 0.4rem 1.0rem 0.4rem 1rem;
min-height:: $navbarHeight; min-height: $navbarHeight;
.fa-caret-down { .fa-caret-down {
font-size: 70%; font-size: 70%;
...@@ -101,24 +101,24 @@ ...@@ -101,24 +101,24 @@
} }
} }
.navbar-page-btn-wrapper {
float: left;
&:hover {
background: $navbarButtonBackgroundHighlight;
}
}
.navbar-page-btn { .navbar-page-btn {
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
float: left;
display: block; display: block;
margin: 0; margin: 0;
font-size: 1.4rem;
color: darken($link-color, 5%); color: darken($link-color, 5%);
background-color: $navbarButtonBackground;
font-size: $font-size-lg; font-size: $font-size-lg;
padding: 1rem 1rem 0.75rem 1rem; padding: 1rem 1rem 0.75rem 1rem;
min-height:: $navbarHeight; min-height:: $navbarHeight;
&:hover, &.active {
background: $navbarButtonBackgroundHighlight;
}
.fa-caret-down { .fa-caret-down {
font-size: 60%; font-size: 60%;
padding-left: 0.2rem; padding-left: 0.2rem;
...@@ -129,6 +129,7 @@ ...@@ -129,6 +129,7 @@
top: 2px; top: 2px;
font-size: 20px; font-size: 20px;
line-height: 8px; line-height: 8px;
margin-right: 0.5rem;
} }
> img { > img {
...@@ -141,12 +142,3 @@ ...@@ -141,12 +142,3 @@
} }
} }
.navbar-page-btn-wrapper {
display: inline-block;
position: relative;
}
.navbar-section-wrapper {
position: relative;
float: left;
}
public/sass/components/_sidemenu.scss
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
position: absolute; position: absolute;
top: 52px; top: 52px;
left: 0; left: 0;
border-top: 1px solid $tight-form-border; //border-top: 1px solid $tight-form-border;
width: $side-menu-width; width: $side-menu-width;
background-color: $side-menu-bg; background-color: $side-menu-bg;
z-index: 1000; z-index: 1000;
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
min-height: calc(100% - 54px); min-height: calc(100% - 54px);
} }
.dashboard-container { .dashboard-container {
padding-left: $side-menu-width + 20px; padding-left: $side-menu-width + 8px;
} }
.page-container { .page-container {
margin-left: $side-menu-width; margin-left: $side-menu-width;
...@@ -56,18 +56,11 @@ ...@@ -56,18 +56,11 @@
background-color: $side-menu-item-hover-bg; background-color: $side-menu-item-hover-bg;
@include left-brand-border-gradient(); @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 { .dropdown-menu {
margin: 0; margin: 0;
display: block; display: block;
opacity: 0; opacity: 0;
top: 0px; top: 0px;
border: 1px solid $dark-4;
border-left: none;
// important to overlap it otherwise it can be hidden // important to overlap it otherwise it can be hidden
// again by the mouse getting outside the hover space // again by the mouse getting outside the hover space
left: $side-menu-width - 2px; left: $side-menu-width - 2px;
...@@ -133,10 +126,9 @@ ...@@ -133,10 +126,9 @@
} }
.side-menu-header { .side-menu-header {
padding: 10px; padding: 10px 10px 10px 20px;
background-color: $side-menu-item-hover-bg; background-color: $side-menu-item-hover-bg;
font-size: 18px; font-size: 18px;
border-bottom: 1px solid $menu-dropdown-border-color;
} }
.sidemenu-org-section .dropdown-menu-title { .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