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