mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
ux(): clean / simplify markup and css for navbar button
This commit is contained in:
parent
52241b8e0b
commit
9ed45ba761
@ -1,19 +1,16 @@
|
||||
<div class="navbar-inner">
|
||||
<div class="top-nav-btn top-nav-menu-btn">
|
||||
<a class="pointer" ng-click="ctrl.contextSrv.toggleSideMenu()">
|
||||
<span class="top-nav-logo-background">
|
||||
<img class="logo-icon" src="public/img/grafana_icon.svg"></img>
|
||||
</span>
|
||||
<i class="icon-gf icon-gf-grafana_wordmark"></i>
|
||||
<i class="fa fa-caret-down"></i>
|
||||
</a>
|
||||
</div>
|
||||
<a class="navbar-brand-btn pointer" ng-click="ctrl.contextSrv.toggleSideMenu()">
|
||||
<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>
|
||||
</a>
|
||||
|
||||
|
||||
<div ng-if="ctrl.title">
|
||||
<nav-button title="{{ctrl.title}}" title-url="{{ctrl.titleUrl}}" icon="{{ctrl.icon}}">
|
||||
</nav-button>
|
||||
</div>
|
||||
<a href="{{::ctrl.titleUrl}}" class="navbar-page-btn" ng-show="ctrl.title">
|
||||
<i class="{{::ctrl.icon}}"></i>
|
||||
{{::ctrl.title}}
|
||||
</a>
|
||||
|
||||
<div ng-transclude></div>
|
||||
</div>
|
||||
|
@ -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('navButton', navButton);
|
||||
|
@ -1,12 +1,10 @@
|
||||
<navbar>
|
||||
|
||||
<div class="top-nav-btn dashnav-dashboards-btn" ng-if="!dashboardMeta.isSnapshot">
|
||||
<a class="pointer" ng-click="openSearch()">
|
||||
<i class="icon-gf icon-gf-dashboard"></i>
|
||||
<span class="dashboard-title">{{dashboard.title}}</span>
|
||||
<i class="fa fa-caret-down"></i>
|
||||
</a>
|
||||
</div>
|
||||
<a class="pointer navbar-page-btn" ng-show="!dashboardMeta.isSnapshot" ng-click="openSearch()">
|
||||
<i class="icon-gf icon-gf-dashboard"></i>
|
||||
<span>{{dashboard.title}}</span>
|
||||
<i class="fa fa-caret-down"></i>
|
||||
</a>
|
||||
|
||||
<div class="top-nav-btn dashnav-dashboards-btn" ng-if="dashboardMeta.isSnapshot">
|
||||
<a class="pointer" bs-tooltip="titleTooltip" data-placement="bottom" ng-click="openSearch()">
|
||||
|
@ -17,7 +17,7 @@
|
||||
body {
|
||||
padding: 0;
|
||||
}
|
||||
.dashnav-dashboards-btn a {
|
||||
.page-dashboard .navbar-page-btn {
|
||||
max-width: 200px;
|
||||
}
|
||||
.gf-timepicker-nav-btn {
|
||||
@ -34,7 +34,7 @@
|
||||
|
||||
// form styles
|
||||
@include media-breakpoint-up(md) {
|
||||
.dashnav-dashboards-btn a {
|
||||
.page-dashboard .navbar-page-btn {
|
||||
max-width: 180px;
|
||||
}
|
||||
.gf-timepicker-nav-btn {
|
||||
@ -51,7 +51,7 @@
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.dashnav-dashboards-btn a {
|
||||
.page-dashboard .navbar-page-btn {
|
||||
max-width: 290px;
|
||||
}
|
||||
.gf-timepicker-nav-btn {
|
||||
|
@ -211,4 +211,4 @@ $btn-padding-y-lg: .75rem !default;
|
||||
$btn-border-radius: 3px;
|
||||
|
||||
// sidemenu
|
||||
$side-menu-width: 15rem;
|
||||
$side-menu-width: 14rem;
|
||||
|
@ -58,7 +58,7 @@
|
||||
|
||||
.row-open {
|
||||
margin-top: 5px;
|
||||
left: -28px;
|
||||
left: -30px;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
transition: .10s left;
|
||||
|
@ -56,52 +56,30 @@
|
||||
background-color: $navbarLinkBackgroundActive;
|
||||
}
|
||||
|
||||
|
||||
.fa.top-nav-breadcrumb-icon {
|
||||
margin: 18px 0 6px 5px;
|
||||
float: left;
|
||||
font-size: 120%;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
.top-nav-btn {
|
||||
.navbar-brand-btn {
|
||||
display: block;
|
||||
position: relative;
|
||||
float: left;
|
||||
margin: 0;
|
||||
font-size: 1.4em;
|
||||
border-right: 1px solid $tight-form-border;
|
||||
background-color: $navbarButtonBackground;
|
||||
padding: 0.6rem 1.0rem 0.5rem 1rem;
|
||||
|
||||
.fa-caret-down {
|
||||
font-size: 55%;
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 23px;
|
||||
margin-right: 2px;
|
||||
font-size: 70%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: darken($link-color, 5%);
|
||||
background-color: $navbarButtonBackground;
|
||||
display: inline-block;
|
||||
&:hover {
|
||||
background: $navbarButtonBackgroundHighlight;
|
||||
color: $link-color;
|
||||
// border-bottom: 1px solid $blue;
|
||||
}
|
||||
&:hover {
|
||||
background: $navbarButtonBackgroundHighlight;
|
||||
}
|
||||
}
|
||||
|
||||
.top-nav-menu-btn {
|
||||
a {
|
||||
padding: 7px 20px 6px 13px;
|
||||
}
|
||||
img {
|
||||
width: 30px;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
.top-nav-logo-background {
|
||||
|
||||
.navbar-brand-btn-background {
|
||||
display: inline-block;
|
||||
border: 1px solid $body-bg;
|
||||
padding: 4px;
|
||||
@ -110,6 +88,7 @@
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.icon-gf-grafana_wordmark {
|
||||
font-size: 21px;
|
||||
position: relative;
|
||||
@ -119,13 +98,28 @@
|
||||
}
|
||||
}
|
||||
|
||||
.dashnav-dashboards-btn {
|
||||
a {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
padding: 11px 17px 12px 13px;
|
||||
.navbar-page-btn {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
float: left;
|
||||
display: block;
|
||||
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 {
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
@ -30,16 +30,15 @@
|
||||
min-height: calc(100% - 54px);
|
||||
}
|
||||
.dashboard-container {
|
||||
padding-left: $side-menu-width;
|
||||
padding-left: $side-menu-width + 0.2rem;
|
||||
}
|
||||
.page-container {
|
||||
margin-left: $side-menu-width;
|
||||
}
|
||||
.top-nav-menu-btn {
|
||||
a {
|
||||
background-color: $page-bg;
|
||||
width: $side-menu-width;
|
||||
}
|
||||
.navbar-brand-btn {
|
||||
background-color: $page-bg;
|
||||
width: $side-menu-width;
|
||||
|
||||
.icon-gf-grafana_wordmark {
|
||||
display: inline-block;
|
||||
}
|
||||
@ -47,9 +46,6 @@
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.sidemenu-org {
|
||||
box-shadow: none;
|
||||
}
|
||||
.search-container {
|
||||
left: auto;
|
||||
}
|
||||
@ -176,7 +172,7 @@
|
||||
.sidemenu .fa-caret-right {
|
||||
position: absolute;
|
||||
top: 38%;
|
||||
right: 25px;
|
||||
right: 6px;
|
||||
font-size: 14px;
|
||||
color: $link-color;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user