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) { ...@@ -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{
...@@ -122,12 +122,17 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { ...@@ -122,12 +122,17 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
Text: "Data Sources", Text: "Data Sources",
Icon: "icon-gf icon-gf-datasources", Icon: "icon-gf icon-gf-datasources",
Url: setting.AppSubUrl + "/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{ data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{
Text: "Plugins", Text: "Plugins",
Icon: "icon-gf icon-gf-apps", Icon: "icon-gf icon-gf-apps",
Url: setting.AppSubUrl + "/plugins", 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) { ...@@ -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
...@@ -3,13 +3,6 @@ ...@@ -3,13 +3,6 @@
<span class="navbar-brand-btn-background"> <span class="navbar-brand-btn-background">
<img src="public/img/grafana_icon.svg"></img> <img src="public/img/grafana_icon.svg"></img>
</span> </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> </a>
<div ng-if="::!ctrl.hasMenu"> <div ng-if="::!ctrl.hasMenu">
...@@ -20,7 +13,7 @@ ...@@ -20,7 +13,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>
...@@ -28,7 +21,7 @@ ...@@ -28,7 +21,7 @@
<i class="fa fa-caret-down"></i> <i class="fa fa-caret-down"></i>
</a> </a>
<ul class="dropdown-menu dropdown-menu--navbar"> <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)"> <a class="pointer" ng-href="{{::navItem.url}}" ng-click="ctrl.navItemClicked(navItem, $event)">
<i class="{{::navItem.icon}}" ng-show="::navItem.icon"></i> <i class="{{::navItem.icon}}" ng-show="::navItem.icon"></i>
{{::navItem.title}} {{::navItem.title}}
......
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)"
...@@ -87,26 +87,5 @@ ...@@ -87,26 +87,5 @@
</a> </a>
</div> </div>
</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> </div>
public/app/core/components/sidemenu/sidemenu.html
<ul class="sidemenu"> <ul class="sidemenu">
<li class="sidemenu-org-section" ng-if="::ctrl.isSignedIn" class="dropdown"> <li>
<a class="sidemenu-org" href="profile"> <a class="sidemenu-item" ng-click="ctrl.search()">
<div class="sidemenu-org-avatar"> <span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-search"></i></span>
<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>
</a> </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>
<li ng-repeat="item in ::ctrl.mainLinks" class="dropdown"> <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"> <span class="icon-circle sidemenu-icon">
<i class="{{::item.icon}}" ng-show="::item.icon"></i> <i class="{{::item.icon}}" ng-show="::item.icon"></i>
<img ng-src="{{::item.img}}" ng-show="::item.img"> <img ng-src="{{::item.img}}" ng-show="::item.img">
</span> </span>
<span class="sidemenu-item-text">{{::item.text}}</span>
<span class="fa fa-caret-right" ng-if="::item.children"></span>
</a> </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}"> <li ng-repeat="child in ::item.children" ng-class="{divider: child.divider}">
<a href="{{::child.url}}"> <a href="{{::child.url}}">
<i class="{{::child.icon}}" ng-show="::child.icon"></i> <i class="{{::child.icon}}" ng-show="::child.icon"></i>
...@@ -55,17 +27,45 @@ ...@@ -55,17 +27,45 @@
</li> </li>
<li ng-show="::!ctrl.isSignedIn"> <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="icon-circle sidemenu-icon"><i class="fa fa-fw fa-sign-in"></i></span>
<span class="sidemenu-item-text">Sign in</span> <span class="sidemenu-item-text">Sign in</span>
</a> </a>
</li> </li>
<li> <li class="sidemenu-org-section" ng-if="::ctrl.isSignedIn" class="dropdown">
<a class="sidemenu-item" target="_self" ng-hide="ctrl.contextSrv.pinned" ng-click="ctrl.contextSrv.setPinnedState(true)"> <a class="sidemenu-item" href="profile">
<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-thumb-tack"></i></span> <span class="icon-circle sidemenu-icon sidemenu-org-avatar">
<span class="sidemenu-item-text">Pin</span> <img ng-src="{{::ctrl.user.gravatarUrl}}">
<span class="sidemenu-org-avatar--missing">
<i class="fa fa-fw fa-user"></i>
</span>
</div>
</a> </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> </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/app/features/alerting/partials/alert_list.html
...@@ -7,11 +7,6 @@ ...@@ -7,11 +7,6 @@
<i class="fa fa-info-circle"></i> <i class="fa fa-info-circle"></i>
How to add an alert How to add an alert
</a> </a>
<a class="btn btn-inverse" href="alerting/notifications" >
<i class="fa fa-cog"></i>
Configure notifications
</a>
</div> </div>
<div class="gf-form-group"> <div class="gf-form-group">
......
public/sass/_variables.dark.scss
...@@ -93,6 +93,10 @@ $panel-border: solid 1px $dark-3; ...@@ -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-drop-zone-bg: repeating-linear-gradient(-128deg, #111, #111 10px, #191919 10px, #222 20px);
$panel-menu-border: solid 1px black; $panel-menu-border: solid 1px black;
// Row
// -------------------------
$row-menu-bg: $body-bg;
$divider-border-color: #555; $divider-border-color: #555;
// Graphite Target Editor // Graphite Target Editor
...@@ -209,7 +213,7 @@ $wellBackground: #131517; ...@@ -209,7 +213,7 @@ $wellBackground: #131517;
$navbarHeight: 52px; $navbarHeight: 52px;
$navbarBackgroundHighlight: $dark-3; $navbarBackgroundHighlight: $dark-3;
$navbarBackground: $dark-3; $navbarBackground: $panel-bg;
$navbarBorder: 1px solid $body-bg; $navbarBorder: 1px solid $body-bg;
$navbarText: $gray-4; $navbarText: $gray-4;
...@@ -221,14 +225,21 @@ $navbarLinkBackgroundActive: $navbarBackground; ...@@ -221,14 +225,21 @@ $navbarLinkBackgroundActive: $navbarBackground;
$navbarBrandColor: $link-color; $navbarBrandColor: $link-color;
$navbarDropdownShadow: inset 0px 4px 10px -4px $body-bg; $navbarDropdownShadow: inset 0px 4px 10px -4px $body-bg;
$navbarButtonBackground: lighten($navbarBackground, 3%); $navbarButtonBackground: $navbarBackground;
$navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%); $navbarButtonBackgroundHighlight: $body-bg;
// Sidemenu // Sidemenu
// ------------------------- // -------------------------
$side-menu-bg: $body-bg; $side-menu-bg: $dark-3;
$side-menu-item-hover-bg: $dark-3; $side-menu-item-hover-bg: $dark-2;
$side-menu-opacity: 0.97;
// 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 // Pagination
// ------------------------- // -------------------------
......
public/sass/_variables.light.scss
...@@ -100,6 +100,10 @@ $panel-border: solid 1px $gray-6; ...@@ -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-drop-zone-bg: repeating-linear-gradient(-128deg, $body-bg, $body-bg 10px, $gray-6 10px, $gray-6 20px);
$panel-menu-border: solid 1px white; $panel-menu-border: solid 1px white;
// Row
// -------------------------
$row-menu-bg: $body-bg;
$divider-border-color: $gray-2; $divider-border-color: $gray-2;
// Graphite Target Editor // Graphite Target Editor
...@@ -182,10 +186,16 @@ $input-invalid-border-color: lighten($red, 5%); ...@@ -182,10 +186,16 @@ $input-invalid-border-color: lighten($red, 5%);
// ------------------------- // -------------------------
$side-menu-bg: $body-bg; $side-menu-bg: $body-bg;
$side-menu-item-hover-bg: $gray-6; $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
$search-shadow: 0 5px 30px 0 lighten($gray-2, 30%); $search-shadow: 0 5px 30px 0 $gray-4;
// Dropdowns // Dropdowns
// ------------------------- // -------------------------
...@@ -203,7 +213,6 @@ $dropdownLinkColorActive: $link-color; ...@@ -203,7 +213,6 @@ $dropdownLinkColorActive: $link-color;
$dropdownLinkBackgroundActive: $gray-6; $dropdownLinkBackgroundActive: $gray-6;
$dropdownLinkBackgroundHover: $gray-6; $dropdownLinkBackgroundHover: $gray-6;
// COMPONENT VARIABLES // COMPONENT VARIABLES
// -------------------------------------------------- // --------------------------------------------------
......
public/sass/_variables.scss
...@@ -219,7 +219,7 @@ $btn-padding-y-lg: .75rem !default; ...@@ -219,7 +219,7 @@ $btn-padding-y-lg: .75rem !default;
$btn-border-radius: 2px; $btn-border-radius: 2px;
// sidemenu // sidemenu
$side-menu-width: 14rem; $side-menu-width: 68px;
// dashboard // dashboard
$panel-margin: 0.4rem; $panel-margin: 0.4rem;
......
public/sass/components/_dropdown.scss
...@@ -90,8 +90,38 @@ ...@@ -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 // Hover/Focus state
// ----------- // -----------
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:hover,
......
public/sass/components/_navbar.scss
...@@ -60,10 +60,9 @@ ...@@ -60,10 +60,9 @@
position: relative; position: relative;
float: left; float: left;
margin: 0; margin: 0;
border-right: 1px solid $tight-form-border; background-color: $side-menu-bg;
background-color: $navbarButtonBackground;
padding: 0.4rem 1.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%;
...@@ -102,25 +101,24 @@ ...@@ -102,25 +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;
border-right: 1px solid $tight-form-border;
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;
...@@ -131,6 +129,7 @@ ...@@ -131,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 {
...@@ -148,49 +147,6 @@ ...@@ -148,49 +147,6 @@
position: relative; 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 { .navbar-section-wrapper {
position: relative; position: relative;
float: left; float: left;
......
public/sass/components/_row.scss
...@@ -142,7 +142,7 @@ $dash-row-menu-animation-speed: 0.20s; ...@@ -142,7 +142,7 @@ $dash-row-menu-animation-speed: 0.20s;
list-style: none; list-style: none;
flex-grow: 1; flex-grow: 1;
box-shadow: $search-shadow; box-shadow: $search-shadow;
background: $side-menu-bg; background: $row-menu-bg;
li a { li a {
display: block; display: block;
...@@ -150,7 +150,7 @@ $dash-row-menu-animation-speed: 0.20s; ...@@ -150,7 +150,7 @@ $dash-row-menu-animation-speed: 0.20s;
color: $text-muted; color: $text-muted;
font-size: $font-size-sm; font-size: $font-size-sm;
padding: $spacer/2 $spacer; padding: $spacer/2 $spacer;
border-left: 2px solid $side-menu-bg; border-left: 2px solid $row-menu-bg;
i { i {
display: inline-block; display: inline-block;
padding-right: $spacer/2; padding-right: $spacer/2;
......
public/sass/components/_sidemenu.scss
...@@ -6,8 +6,9 @@ ...@@ -6,8 +6,9 @@
position: absolute; position: absolute;
top: 52px; top: 52px;
left: 0; left: 0;
//border-top: 1px solid $tight-form-border;
width: $side-menu-width; width: $side-menu-width;
background-color: rgba($side-menu-bg,$side-menu-opacity); background-color: $side-menu-bg;
z-index: 1000; z-index: 1000;
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
...@@ -31,7 +32,7 @@ ...@@ -31,7 +32,7 @@
min-height: calc(100% - 54px); min-height: calc(100% - 54px);
} }
.dashboard-container { .dashboard-container {
padding-left: $side-menu-width + 0.5rem; padding-left: $side-menu-width + 8px;
} }
.page-container { .page-container {
margin-left: $side-menu-width; margin-left: $side-menu-width;
...@@ -56,14 +57,14 @@ ...@@ -56,14 +57,14 @@
@include left-brand-border-gradient(); @include left-brand-border-gradient();
.dropdown-menu { .dropdown-menu {
margin: 0;
display: block; display: block;
opacity: 0; opacity: 0;
top: 0px; top: 0px;
// 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 - 0.2rem; left: $side-menu-width - 2px;
background-color: rgba($side-menu-bg,$side-menu-opacity); @include animation('dropdown-anim 0ms ease-in-out 0ms forwards');
@include animation('dropdown-anim 150ms ease-in-out 100ms forwards');
z-index: -9999; z-index: -9999;
} }
} }
...@@ -81,19 +82,6 @@ ...@@ -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 { .icon-circle {
width: 40px; width: 40px;
height: 40px; height: 40px;
...@@ -103,9 +91,17 @@ ...@@ -103,9 +91,17 @@
opacity: .7; opacity: .7;
position: relative; position: relative;
left: 7px; left: 7px;
top: 5px;
font-size: 150%; font-size: 150%;
} }
.fa {
top: 2px;
}
.icon-gf {
top: 5px;
}
img { img {
left: 7px; left: 7px;
position: relative; position: relative;
...@@ -117,12 +113,9 @@ ...@@ -117,12 +113,9 @@
line-height: 47px; line-height: 47px;
padding: 0px 10px 0px 10px; padding: 0px 10px 0px 10px;
display: block; display: block;
border-left: 1px solid transparent; position: relative;
font-size: 16px;
border: 1px solid transparent;
.sidemenu-item-text {
padding-left: 11px;
}
img { img {
border-radius: 50%; border-radius: 50%;
...@@ -132,13 +125,11 @@ ...@@ -132,13 +125,11 @@
} }
} }
.sidemenu-section-tagline { .side-menu-header {
font-style: italic; padding: 10px 10px 10px 20px;
line-height: 10px; white-space: nowrap;
} background-color: $side-menu-item-hover-bg;
font-size: 18px;
.sidemenu-section-text-wrapper {
padding-top: 4px;
} }
.sidemenu-org-section .dropdown-menu-title { .sidemenu-org-section .dropdown-menu-title {
...@@ -190,31 +181,28 @@ ...@@ -190,31 +181,28 @@
} }
.sidemenu-org-avatar { .sidemenu-org-avatar {
width: 40px;
height: 40px;
background-color: $gray-2;
border-radius: 50%;
text-align: center;
>img { >img {
position: absolute; position: absolute;
width: 40px; width: 35px;
height: 40px; height: 35px;
border-radius: 50%; border-radius: 50%;
left: 14px; left: 14px;
top: 12px;
z-index: 10;
} }
} }
.sidemenu-org-avatar--missing { .sidemenu-org-avatar--missing {
color: $gray-4; color: $gray-4;
text-shadow: 0 1px 0 $dark-1; text-shadow: 0 1px 0 $dark-1;
line-height: 40px; line-height: 28px;
font-size: $font-size-lg; font-size: $font-size-lg;
} }
.sidemenu-org-details { .sidemenu-org-details {
padding-left: 10px; padding-left: 10px;
color: $link-color; color: $link-color;
display: none;
} }
.sidemenu-org-name { .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