Skip to content

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

merging new-sidenav

parents aa634402 3e8937e5
Showing with 161 additions and 201 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{
......@@ -122,12 +122,17 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
Text: "Data Sources",
Icon: "icon-gf icon-gf-datasources",
Url: setting.AppSubUrl + "/datasources",
Children: []*dtos.NavLink{
{Text: "List", Url: setting.AppSubUrl + "/datasources", Icon: "icon-gf icon-gf-datasources"},
},
})
data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{
Text: "Plugins",
Icon: "icon-gf icon-gf-apps",
Url: setting.AppSubUrl + "/plugins",
Children: []*dtos.NavLink{
{Text: "List", Url: setting.AppSubUrl + "/datasources", Icon: "icon-gf icon-gf-apps"},
},
})
}
......
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
......@@ -3,13 +3,6 @@
<span class="navbar-brand-btn-background">
<img src="public/img/grafana_icon.svg"></img>
</span>
<i class="icon-gf icon-gf-grafana_wordmark"></i>
<i class="fa fa-caret-down"></i>
<i class="fa fa-chevron-left"></i>
</a>
<a class="navbar-page-btn navbar-page-btn--search" ng-click="ctrl.showSearch()">
<i class="fa fa-search"></i>
</a>
<div ng-if="::!ctrl.hasMenu">
......@@ -20,7 +13,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>
......@@ -28,7 +21,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/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)"
......@@ -87,26 +87,5 @@
</a>
</div>
</div>
<div class="search-button-row">
<a class="btn btn-secondary" href="dashboard/new" ng-show="ctrl.contextSrv.isEditor" ng-click="ctrl.isOpen = false;">
<i class="fa fa-plus"></i>&nbsp; New Dashboard
</a>
<a class="btn btn-inverse" ng-click="ctrl.showNewFolderModal()" ng-show="ctrl.contextSrv.isEditor" ng-click="ctrl.isOpen = false;">
<i class="fa fa-plus"></i>
New Folder
</a>
<a class="btn btn-inverse" href="dashboard/new/?editview=import" ng-show="ctrl.contextSrv.isEditor" ng-click="ctrl.isOpen = false;">
<i class="fa fa-upload"></i>
&nbsp; Import Dashboard
</a>
<a class="search-button-row-explore-link" target="_blank" href="https://grafana.com/dashboards?utm_source=grafana_search">
Find <img src="public/img/icn-dashboard-tiny.svg" width="14" /> dashboards on Grafana.com
</a>
</div>
</div>
</div>
public/app/core/components/sidemenu/sidemenu.html
<ul class="sidemenu">
<li class="sidemenu-org-section" ng-if="::ctrl.isSignedIn" class="dropdown">
<a class="sidemenu-org" href="profile">
<div class="sidemenu-org-avatar">
<img ng-src="{{::ctrl.user.gravatarUrl}}">
<span class="sidemenu-org-avatar--missing">
<i class="fa fa-fw fa-user"></i>
</span>
</div>
<div class="sidemenu-org-details">
<span class="sidemenu-org-user sidemenu-item-text">{{::ctrl.user.name}}</span>
<span class="sidemenu-org-name sidemenu-item-text">{{::ctrl.user.orgName}}</span>
</div>
<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>
<i class="fa fa-caret-right"></i>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="menuItem in ctrl.orgMenu" ng-class="::menuItem.cssClass">
<span ng-show="::menuItem.section">{{::menuItem.section}}</span>
<a href="{{::menuItem.url}}" ng-show="::menuItem.url" target="{{::menuItem.target}}">
<i class="{{::menuItem.icon}}" ng-show="::menuItem.icon"></i>
{{::menuItem.text}}
</a>
</li>
<li ng-show="ctrl.orgs.length > ctrl.maxShownOrgs" style="margin-left: 10px;width: 90%">
<span class="sidemenu-item-text">Max shown : {{::ctrl.maxShownOrgs}}</span>
<input ng-model="::ctrl.orgFilter" style="padding-left: 5px" type="text" ng-change="::ctrl.loadOrgsItems();" class="gf-input-small width-12" placeholder="Filter">
</li>
<li ng-repeat="orgItem in ctrl.orgItems" ng-class="::orgItem.cssClass">
<a href="{{::orgItem.url}}" ng-show="::orgItem.url" target="{{::orgItem.target}}">
<i class="{{::orgItem.icon}}" ng-show="::orgItem.icon"></i>
{{::orgItem.text}}
</a>
</li>
</ul>
</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>
<span class="sidemenu-item-text">{{::item.text}}</span>
<span class="fa fa-caret-right" ng-if="::item.children"></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>
<li ng-repeat="child in ::item.children" ng-class="{divider: child.divider}">
<a href="{{::child.url}}">
<i class="{{::child.icon}}" ng-show="::child.icon"></i>
......@@ -55,17 +27,45 @@
</li>
<li ng-show="::!ctrl.isSignedIn">
<a href="{{ctrl.loginUrl}}" class="sidemenu-item" target="_self">
<a href="{{ctrl.loginUrl}}" class="sidemenu-item" target="_self">
<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-sign-in"></i></span>
<span class="sidemenu-item-text">Sign in</span>
</a>
</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>
<li class="sidemenu-org-section" ng-if="::ctrl.isSignedIn" class="dropdown">
<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">
<i class="fa fa-fw fa-user"></i>
</span>
</div>
</a>
<ul class="dropdown-menu dropdown-menu--sidemenu dropup" 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>
</li>
<li ng-repeat="menuItem in ctrl.orgMenu" ng-class="::menuItem.cssClass">
<span ng-show="::menuItem.section">{{::menuItem.section}}</span>
<a href="{{::menuItem.url}}" ng-show="::menuItem.url" target="{{::menuItem.target}}">
<i class="{{::menuItem.icon}}" ng-show="::menuItem.icon"></i>
{{::menuItem.text}}
</a>
</li>
<li ng-show="ctrl.orgs.length > ctrl.maxShownOrgs" style="margin-left: 10px;width: 90%">
<span class="sidemenu-item-text">Max shown : {{::ctrl.maxShownOrgs}}</span>
<input ng-model="::ctrl.orgFilter" style="padding-left: 5px" type="text" ng-change="::ctrl.loadOrgsItems();" class="gf-input-small width-12" placeholder="Filter">
</li>
<li ng-repeat="orgItem in ctrl.orgItems" ng-class="::orgItem.cssClass">
<a href="{{::orgItem.url}}" ng-show="::orgItem.url" target="{{::orgItem.target}}">
<i class="{{::orgItem.icon}}" ng-show="::orgItem.icon"></i>
{{::orgItem.text}}
</a>
</li>
</ul>
</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/app/features/alerting/partials/alert_list.html
......@@ -7,11 +7,6 @@
<i class="fa fa-info-circle"></i>
How to add an alert
</a>
<a class="btn btn-inverse" href="alerting/notifications" >
<i class="fa fa-cog"></i>
Configure notifications
</a>
</div>
<div class="gf-form-group">
......
public/sass/_variables.dark.scss
......@@ -93,6 +93,10 @@ $panel-border: solid 1px $dark-3;
$panel-drop-zone-bg: repeating-linear-gradient(-128deg, #111, #111 10px, #191919 10px, #222 20px);
$panel-menu-border: solid 1px black;
// Row
// -------------------------
$row-menu-bg: $body-bg;
$divider-border-color: #555;
// Graphite Target Editor
......@@ -209,7 +213,7 @@ $wellBackground: #131517;
$navbarHeight: 52px;
$navbarBackgroundHighlight: $dark-3;
$navbarBackground: $dark-3;
$navbarBackground: $panel-bg;
$navbarBorder: 1px solid $body-bg;
$navbarText: $gray-4;
......@@ -221,14 +225,21 @@ $navbarLinkBackgroundActive: $navbarBackground;
$navbarBrandColor: $link-color;
$navbarDropdownShadow: inset 0px 4px 10px -4px $body-bg;
$navbarButtonBackground: lighten($navbarBackground, 3%);
$navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);
$navbarButtonBackground: $navbarBackground;
$navbarButtonBackgroundHighlight: $body-bg;
// Sidemenu
// -------------------------
$side-menu-bg: $body-bg;
$side-menu-item-hover-bg: $dark-3;
$side-menu-opacity: 0.97;
$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-3;
$menu-dropdown-shadow: 5px 5px 20px -5px $black;
// Pagination
// -------------------------
......
public/sass/_variables.light.scss
......@@ -100,6 +100,10 @@ $panel-border: solid 1px $gray-6;
$panel-drop-zone-bg: repeating-linear-gradient(-128deg, $body-bg, $body-bg 10px, $gray-6 10px, $gray-6 20px);
$panel-menu-border: solid 1px white;
// Row
// -------------------------
$row-menu-bg: $body-bg;
$divider-border-color: $gray-2;
// Graphite Target Editor
......@@ -182,10 +186,16 @@ $input-invalid-border-color: lighten($red, 5%);
// -------------------------
$side-menu-bg: $body-bg;
$side-menu-item-hover-bg: $gray-6;
$side-menu-opacity: 0.97;
// Menu dropdowns
// -------------------------
$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
// -------------------------
......@@ -203,7 +213,6 @@ $dropdownLinkColorActive: $link-color;
$dropdownLinkBackgroundActive: $gray-6;
$dropdownLinkBackgroundHover: $gray-6;
// COMPONENT VARIABLES
// --------------------------------------------------
......
public/sass/_variables.scss
......@@ -219,7 +219,7 @@ $btn-padding-y-lg: .75rem !default;
$btn-border-radius: 2px;
// sidemenu
$side-menu-width: 14rem;
$side-menu-width: 68px;
// dashboard
$panel-margin: 0.4rem;
......
public/sass/components/_dropdown.scss
......@@ -90,8 +90,38 @@
}
}
}
&--navbar {
top: 100%;
min-width: 100%;
}
&--navbar,
&--sidemenu {
background: $menu-dropdown-bg;
box-shadow: $menu-dropdown-shadow;
margin-top: 0px;
border: none;
> li > a {
padding: $spacer/2 1.2rem;
border-left: 2px solid transparent;
i {
display: inline-block;
margin-right: 10px;
}
&:hover {
@include left-brand-border-gradient();
color: $link-hover-color;
background: $menu-dropdown-hover-bg !important;
}
}
}
}
// Hover/Focus state
// -----------
.dropdown-menu > li > a:hover,
......
public/sass/components/_navbar.scss
......@@ -60,10 +60,9 @@
position: relative;
float: left;
margin: 0;
border-right: 1px solid $tight-form-border;
background-color: $navbarButtonBackground;
background-color: $side-menu-bg;
padding: 0.4rem 1.0rem 0.4rem 1rem;
min-height:: $navbarHeight;
min-height: $navbarHeight;
.fa-caret-down {
font-size: 70%;
......@@ -102,25 +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;
border-right: 1px solid $tight-form-border;
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;
......@@ -131,6 +129,7 @@
top: 2px;
font-size: 20px;
line-height: 8px;
margin-right: 0.5rem;
}
> img {
......@@ -148,49 +147,6 @@
position: relative;
}
.dropdown-menu.dropdown-menu--navbar {
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;
}
}
}
.sidemenu-pinned {
.navbar-brand-btn {
width: $side-menu-width;
.icon-gf-grafana_wordmark {
display: inline-block;
}
.fa-caret-down {
display: none;
}
&:hover .fa-chevron-left {
display: inline-block;
color: $text-color-weak;
position: relative;
left: 1.3rem;
}
}
}
.navbar-section-wrapper {
position: relative;
float: left;
......
public/sass/components/_row.scss
......@@ -142,7 +142,7 @@ $dash-row-menu-animation-speed: 0.20s;
list-style: none;
flex-grow: 1;
box-shadow: $search-shadow;
background: $side-menu-bg;
background: $row-menu-bg;
li a {
display: block;
......@@ -150,7 +150,7 @@ $dash-row-menu-animation-speed: 0.20s;
color: $text-muted;
font-size: $font-size-sm;
padding: $spacer/2 $spacer;
border-left: 2px solid $side-menu-bg;
border-left: 2px solid $row-menu-bg;
i {
display: inline-block;
padding-right: $spacer/2;
......
public/sass/components/_sidemenu.scss
......@@ -6,8 +6,9 @@
position: absolute;
top: 52px;
left: 0;
//border-top: 1px solid $tight-form-border;
width: $side-menu-width;
background-color: rgba($side-menu-bg,$side-menu-opacity);
background-color: $side-menu-bg;
z-index: 1000;
opacity: 0;
visibility: hidden;
......@@ -31,7 +32,7 @@
min-height: calc(100% - 54px);
}
.dashboard-container {
padding-left: $side-menu-width + 0.5rem;
padding-left: $side-menu-width + 8px;
}
.page-container {
margin-left: $side-menu-width;
......@@ -56,14 +57,14 @@
@include left-brand-border-gradient();
.dropdown-menu {
margin: 0;
display: block;
opacity: 0;
top: 0px;
// important to overlap it otherwise it can be hidden
// again by the mouse getting outside the hover space
left: $side-menu-width - 0.2rem;
background-color: rgba($side-menu-bg,$side-menu-opacity);
@include animation('dropdown-anim 150ms ease-in-out 100ms forwards');
left: $side-menu-width - 2px;
@include animation('dropdown-anim 0ms ease-in-out 0ms forwards');
z-index: -9999;
}
}
......@@ -81,19 +82,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;
......@@ -103,9 +91,17 @@
opacity: .7;
position: relative;
left: 7px;
top: 5px;
font-size: 150%;
}
.fa {
top: 2px;
}
.icon-gf {
top: 5px;
}
img {
left: 7px;
position: relative;
......@@ -117,12 +113,9 @@
line-height: 47px;
padding: 0px 10px 0px 10px;
display: block;
border-left: 1px solid transparent;
.sidemenu-item-text {
padding-left: 11px;
}
position: relative;
font-size: 16px;
border: 1px solid transparent;
img {
border-radius: 50%;
......@@ -132,13 +125,11 @@
}
}
.sidemenu-section-tagline {
font-style: italic;
line-height: 10px;
}
.sidemenu-section-text-wrapper {
padding-top: 4px;
.side-menu-header {
padding: 10px 10px 10px 20px;
white-space: nowrap;
background-color: $side-menu-item-hover-bg;
font-size: 18px;
}
.sidemenu-org-section .dropdown-menu-title {
......@@ -190,31 +181,28 @@
}
.sidemenu-org-avatar {
width: 40px;
height: 40px;
background-color: $gray-2;
border-radius: 50%;
text-align: center;
>img {
position: absolute;
width: 40px;
height: 40px;
width: 35px;
height: 35px;
border-radius: 50%;
left: 14px;
top: 12px;
z-index: 10;
}
}
.sidemenu-org-avatar--missing {
color: $gray-4;
text-shadow: 0 1px 0 $dark-1;
line-height: 40px;
line-height: 28px;
font-size: $font-size-lg;
}
.sidemenu-org-details {
padding-left: 10px;
color: $link-color;
display: none;
}
.sidemenu-org-name {
......
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