Skip to content

N
nexpie-grafana-theme
Commit 9ed45ba7 by Torkel Ödegaard
Options

ux(): clean / simplify markup and css for navbar button

parent 52241b8e
Showing with 58 additions and 125 deletions
public/app/core/components/navbar/navbar.html
<div class="navbar-inner"> <div class="navbar-inner">
<div class="top-nav-btn top-nav-menu-btn"> <a class="navbar-brand-btn pointer" ng-click="ctrl.contextSrv.toggleSideMenu()">
<a class="pointer" ng-click="ctrl.contextSrv.toggleSideMenu()"> <span class="navbar-brand-btn-background">
<span class="top-nav-logo-background"> <img src="public/img/grafana_icon.svg"></img>
<img class="logo-icon" src="public/img/grafana_icon.svg"></img> </span>
</span> <i class="icon-gf icon-gf-grafana_wordmark"></i>
<i class="icon-gf icon-gf-grafana_wordmark"></i> <i class="fa fa-caret-down"></i>
<i class="fa fa-caret-down"></i> </a>
</a>
</div>
<a href="{{::ctrl.titleUrl}}" class="navbar-page-btn" ng-show="ctrl.title">
<div ng-if="ctrl.title"> <i class="{{::ctrl.icon}}"></i>
<nav-button title="{{ctrl.title}}" title-url="{{ctrl.titleUrl}}" icon="{{ctrl.icon}}"> {{::ctrl.title}}
</nav-button> </a>
</div>
<div ng-transclude></div> <div ng-transclude></div>
</div> </div>
public/app/core/components/navbar/navbar.ts
...@@ -30,28 +30,5 @@ export function navbarDirective() { ...@@ -30,28 +30,5 @@ export function navbarDirective() {
}; };
} }
var navButtonTemplate = `
<div class="top-nav-btn dashnav-dashboards-btn">
<a href="{{::titleUrl}}">
<i class="{{::icon}}"></i>
<span class="dashboard-title">{{::title}}</span>
</a>
</div>
`;
function navButton() {
return {
restrict: 'E',
template: navButtonTemplate,
scope: {
title: "@",
titleUrl: "@",
},
link: function(scope, elem, attrs, ctrl) {
scope.icon = attrs.icon;
}
};
}
coreModule.directive('navbar', navbarDirective); coreModule.directive('navbar', navbarDirective);
coreModule.directive('navButton', navButton); coreModule.directive('navButton', navButton);
public/app/features/dashboard/dashnav/dashnav.html
<navbar> <navbar>
<div class="top-nav-btn dashnav-dashboards-btn" ng-if="!dashboardMeta.isSnapshot"> <a class="pointer navbar-page-btn" ng-show="!dashboardMeta.isSnapshot" ng-click="openSearch()">
<a class="pointer" ng-click="openSearch()"> <i class="icon-gf icon-gf-dashboard"></i>
<i class="icon-gf icon-gf-dashboard"></i> <span>{{dashboard.title}}</span>
<span class="dashboard-title">{{dashboard.title}}</span> <i class="fa fa-caret-down"></i>
<i class="fa fa-caret-down"></i> </a>
</a>
</div>
<div class="top-nav-btn dashnav-dashboards-btn" ng-if="dashboardMeta.isSnapshot"> <div class="top-nav-btn dashnav-dashboards-btn" ng-if="dashboardMeta.isSnapshot">
<a class="pointer" bs-tooltip="titleTooltip" data-placement="bottom" ng-click="openSearch()"> <a class="pointer" bs-tooltip="titleTooltip" data-placement="bottom" ng-click="openSearch()">
......
public/sass/_old_responsive.scss
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
body { body {
padding: 0; padding: 0;
} }
.dashnav-dashboards-btn a { .page-dashboard .navbar-page-btn {
max-width: 200px; max-width: 200px;
} }
.gf-timepicker-nav-btn { .gf-timepicker-nav-btn {
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
// form styles // form styles
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
.dashnav-dashboards-btn a { .page-dashboard .navbar-page-btn {
max-width: 180px; max-width: 180px;
} }
.gf-timepicker-nav-btn { .gf-timepicker-nav-btn {
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
} }
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
.dashnav-dashboards-btn a { .page-dashboard .navbar-page-btn {
max-width: 290px; max-width: 290px;
} }
.gf-timepicker-nav-btn { .gf-timepicker-nav-btn {
......
public/sass/_variables.scss
...@@ -211,4 +211,4 @@ $btn-padding-y-lg: .75rem !default; ...@@ -211,4 +211,4 @@ $btn-padding-y-lg: .75rem !default;
$btn-border-radius: 3px; $btn-border-radius: 3px;
// sidemenu // sidemenu
$side-menu-width: 15rem; $side-menu-width: 14rem;
public/sass/components/_dashboard.scss
...@@ -58,7 +58,7 @@ ...@@ -58,7 +58,7 @@
.row-open { .row-open {
margin-top: 5px; margin-top: 5px;
left: -28px; left: -30px;
position: absolute; position: absolute;
z-index: 100; z-index: 100;
transition: .10s left; transition: .10s left;
......
public/sass/components/_navbar.scss
...@@ -56,52 +56,30 @@ ...@@ -56,52 +56,30 @@
background-color: $navbarLinkBackgroundActive; background-color: $navbarLinkBackgroundActive;
} }
.navbar-brand-btn {
.fa.top-nav-breadcrumb-icon {
margin: 18px 0 6px 5px;
float: left;
font-size: 120%;
color: $text-color;
}
.top-nav-btn {
display: block; display: block;
position: relative; position: relative;
float: left; float: left;
margin: 0; margin: 0;
font-size: 1.4em;
border-right: 1px solid $tight-form-border; border-right: 1px solid $tight-form-border;
background-color: $navbarButtonBackground;
padding: 0.6rem 1.0rem 0.5rem 1rem;
.fa-caret-down { .fa-caret-down {
font-size: 55%; font-size: 70%;
position: absolute;
right: 8px;
top: 23px;
margin-right: 2px;
} }
a { &:hover {
color: darken($link-color, 5%); background: $navbarButtonBackgroundHighlight;
background-color: $navbarButtonBackground;
display: inline-block;
&:hover {
background: $navbarButtonBackgroundHighlight;
color: $link-color;
// border-bottom: 1px solid $blue;
}
} }
}
.top-nav-menu-btn {
a {
padding: 7px 20px 6px 13px;
}
img { img {
width: 30px; width: 30px;
position: relative; position: relative;
top: -2px; top: -2px;
} }
.top-nav-logo-background {
.navbar-brand-btn-background {
display: inline-block; display: inline-block;
border: 1px solid $body-bg; border: 1px solid $body-bg;
padding: 4px; padding: 4px;
...@@ -110,6 +88,7 @@ ...@@ -110,6 +88,7 @@
width: 40px; width: 40px;
height: 40px; height: 40px;
} }
.icon-gf-grafana_wordmark { .icon-gf-grafana_wordmark {
font-size: 21px; font-size: 21px;
position: relative; position: relative;
...@@ -119,13 +98,28 @@ ...@@ -119,13 +98,28 @@
} }
} }
.dashnav-dashboards-btn { .navbar-page-btn {
a { text-overflow: ellipsis;
text-overflow: ellipsis; overflow: hidden;
overflow: hidden; white-space: nowrap;
white-space: nowrap; float: left;
display: block; display: block;
padding: 11px 17px 12px 13px; margin: 0;
font-size: 1.4em;
border-right: 1px solid $tight-form-border;
color: darken($link-color, 5%);
background-color: $navbarButtonBackground;
font-size: $font-size-lg;
padding: 1rem 0.8rem;
&:hover {
background: $navbarButtonBackgroundHighlight;
color: $link-color;
}
.fa-caret-down {
font-size: 60%;
padding-left: 0.2rem;
} }
.fa-th-large { .fa-th-large {
...@@ -141,32 +135,3 @@ ...@@ -141,32 +135,3 @@
} }
} }
.dashboard-title {
padding: 0 0.4rem 0 0.5rem;
font-size: $font-size-lg;
}
.top-nav-icon {
margin: 5px 0px 0 11px;
line-height: 41px;
float: left;
}
.top-nav-section {
display: block;
float: left;
padding: 19px 9px 8px 0;
font-weight: bold;
i {
padding-left: 8px;
}
}
.top-nav-title {
display: block;
float: left;
font-size: 17px;
padding: 18px 10px 10px 13px;
color: $link-color;
}
public/sass/components/_sidemenu.scss
...@@ -30,16 +30,15 @@ ...@@ -30,16 +30,15 @@
min-height: calc(100% - 54px); min-height: calc(100% - 54px);
} }
.dashboard-container { .dashboard-container {
padding-left: $side-menu-width; padding-left: $side-menu-width + 0.2rem;
} }
.page-container { .page-container {
margin-left: $side-menu-width; margin-left: $side-menu-width;
} }
.top-nav-menu-btn { .navbar-brand-btn {
a { background-color: $page-bg;
background-color: $page-bg; width: $side-menu-width;
width: $side-menu-width;
}
.icon-gf-grafana_wordmark { .icon-gf-grafana_wordmark {
display: inline-block; display: inline-block;
} }
...@@ -47,9 +46,6 @@ ...@@ -47,9 +46,6 @@
display: none; display: none;
} }
} }
.sidemenu-org {
box-shadow: none;
}
.search-container { .search-container {
left: auto; left: auto;
} }
...@@ -176,7 +172,7 @@ ...@@ -176,7 +172,7 @@
.sidemenu .fa-caret-right { .sidemenu .fa-caret-right {
position: absolute; position: absolute;
top: 38%; top: 38%;
right: 25px; right: 6px;
font-size: 14px; font-size: 14px;
color: $link-color; color: $link-color;
} }
......
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