IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

ux breadcrumb work

Browse Source
This commit is contained in:
Torkel Ödegaard 2017-11-23 21:48:25 +01:00
parent b3ddcc8077
commit 02e2d5da2b
6 changed files with 75 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
public/app/core/components/navbar/navbar.html
View File

@ -1,19 +1,12 @@
<div class="page-nav">
<div class="container">
<div class="page-breadcrumb">
<div class="page-breadcrumb__item dropdown" ng-repeat="item in ctrl.model.breadcrumbs">
<a class="pointer" ng-href="{{::item.url}}">
<div class="page-breadcrumbs">
<a class="breadcrumb-item active" href="/">
<i class="fa fa-home"></i>
</a>
<a class="breadcrumb-item" ng-href="{{::item.url}}" ng-repeat="item in ctrl.model.breadcrumbs">
{{::item.text}}
</a>
<ul class="dropdown-menu dropdown-menu--navbar">
<li ng-repeat="subItem in ::item.children">
<a class="pointer" ng-href="{{::subItem.url}}" ng-click="ctrl.navItemClicked(subItem, $event)">
{{::subItem.text}}
</a>
</li>
</ul>
</div>
</div>
</div>
</div>

2
public/app/core/components/navbar/navbar.ts
View File

@ -1,5 +1,3 @@
///<reference path="../../../headers/common.d.ts" />
import coreModule from '../../core_module';
import {NavModel} from '../../nav_model_srv';

1
public/app/core/components/scroll/scroll.ts
View File

@ -7,7 +7,6 @@ export function geminiScrollbar() {
link: function(scope, elem, attrs) {
let scrollbar = new PerfectScrollbar(elem[0]);
console.log('scrllbar!');
scope.$on('$destroy', () => {
scrollbar.destroy();

1
public/app/features/plugins/partials/ds_list.html
View File

@ -46,4 +46,3 @@
</div>
</div>
</div>

2
public/sass/components/_scrollbar.scss
View File

@ -92,8 +92,6 @@
.ps {
overflow: auto !important;
}
}.ps:hover > .ps__rail-x,
.ps:hover > .ps__rail-y {
}
.ps__rail-x:hover,

125
public/sass/layout/_page.scss
View File

@ -121,81 +121,88 @@
margin-bottom: $spacer*2;
}
.page-breadcrumb {
.page-breadcrumbs {
display: flex;
padding: 0 $spacer;
padding: 3px 1.5rem 1.5rem 1.5rem;
line-height: 0.5;
}
$page-breadcrumb__angle-1: 39px;
$page-breadcrumb__angle-ul: 31px;
$page-breadcrumb__angle-a: 30px;
.breadcrumb {
display: inline-block;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35);
overflow: hidden;
border-radius: 5px;
counter-reset: flag;
}
.page-breadcrumb__item {
background: $page-nav-bg;
box-shadow: $page-nav-shadow;
> a {
color: $page-nav-breadcrumb-color;
font-size: $font-size-sm;
.breadcrumb-item {
text-decoration: none;
outline: none;
display: block;
padding: 0.6rem 1rem 0.6rem 3rem;;
float: left;
font-size: 12px;
line-height: 36px;
padding: 0 7px 0 37px;
@include gradientBar($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color);
position: relative;
&::after {
content: '';
position: absolute;
top: -53px;
left: 100%;
content: '';
height: 0;
width: 0;
border: $page-breadcrumb__angle-1 solid transparent;
border-right-width: 0;
border-left-width: $page-breadcrumb__angle-a;
z-index: 2;
border-left-color: $page-nav-bg;
}
}
box-shadow: $card-shadow;
&:first-child {
a {
padding-left: 1rem;
}
padding-left: 13px;
border-radius: 5px 0 0 5px; /*to match with the parent's radius*/
font-size: 20px;
}
&::after {
&:first-child:before {
left: 14px;
}
&:last-child {
border-radius: 0 5px 5px 0; /*this was to prevent glitches on hover*/
padding-right: 20px;
}
&.active,
&:hover {
background: #333;
background: linear-gradient(#333, #000);
}
&.active:after,
&:hover:after {
background: #333;
background: linear-gradient(135deg, #333, #000);
}
&:after {
content: '';
position: absolute;
top: -53px;
left: 100%;
content: '';
height: 0;
width: 0;
border: $page-breadcrumb__angle-1 solid transparent;
border-right-width: 0;
border-left-width: $page-breadcrumb__angle-ul;
top: 0;
right: -18px; // half of square's length
// same dimension as the line-height of .breadcrumb-item
width: 36px;
height: 36px;
transform: scale(0.707) rotate(45deg);
// we need to prevent the arrows from getting buried under the next link
z-index: 1;
transform: translateX(4px);
border-left-color: #282020;
margin: 0;
// background same as links but the gradient will be rotated to compensate with the transform applied
background: linear-gradient(135deg, $btn-inverse-bg, $btn-inverse-bg-hl);
// stylish arrow design using box shadow
box-shadow: 2px -2px 0 2px rgb(35, 31, 31), 3px -3px 0 2px rgba(255, 255, 255, 0.1);
// 5px - for rounded arrows and
// 50px - to prevent hover glitches on the border created using shadows*/
border-radius: 0 5px 0 50px;
}
&:hover {
background: $breadcrumb-hover-hl;
.page-breadcrumb__caret {
opacity: 1;
}
> a {
color: $text-color;
&::after {
border-left-color: $breadcrumb-hover-hl;
color: $text-color;
}
}
// we dont need an arrow after the last link
&:last-child:after {
content: none;
}
}