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: new breadcrumb progress

Browse Source
This commit is contained in:
Torkel Ödegaard
2017-08-14 19:47:40 +02:00
parent 8d6a1cdbb4
commit 8aa73401a9
2 changed files with 52 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
public/app/features/plugins/ds_list_ctrl.ts
View File

@@ -15,8 +15,7 @@ export class DataSourcesCtrl {
private $http, private $http,
private backendSrv, private backendSrv,
private datasourceSrv, private datasourceSrv,
private navModelSrv private navModelSrv) {
) {
this.navModel = this.navModelSrv.getDatasourceNav(0); this.navModel = this.navModelSrv.getDatasourceNav(0);

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

@@ -101,34 +101,71 @@
margin-bottom: $spacer; margin-bottom: $spacer;
} }
$breadcrumb-hover-hl: #111;
.page-breadcrumb__item { .page-breadcrumb__item {
background: black;
> a { > a {
color: $text-color-weak; color: $text-color-weak;
display: block; display: block;
padding: 0.6rem 3rem 0.6rem 1rem;; padding: 0.6rem 1rem 0.6rem 3rem;;
} position: relative;
&:hover a { &::after {
.page-breadcrumb__caret { content: '';
opacity: 1; position: absolute;
top: -53px;
left: 100%;
content: '';
height: 0;
width: 0;
border: 46px solid transparent;
border-right-width: 0;
border-left-width: 41px;
z-index: 2;
border-left-color: black;
} }
} }
background: black; &:first-child {
a {
padding-left: 1rem;
}
}
&::after { &::after {
content: ""; content: '';
position: absolute; position: absolute;
top: 0; top: -53px;
left: 100%; left: 100%;
content: ''; content: '';
height: 0; height: 0;
width: 0; width: 0;
border: 24px solid transparent; border: 46px solid transparent;
border-right-width: 0; border-right-width: 0;
border-left-width: 20px; border-left-width: 41px;
z-index: 1;
transform: translateX(4px); transform: translateX(4px);
border-left-color: #ffffff; border-left-color: #282020;
margin: 0;
}
&:hover {
background: $breadcrumb-hover-hl;
.page-breadcrumb__caret {
opacity: 1;
}
> a {
color: $text-color;
&::after {
border-left-color: $breadcrumb-hover-hl;
color: $text-color;
}
}
} }
} }
@@ -138,7 +175,8 @@
display: block; display: block;
width: 16px; width: 16px;
height: 16px; height: 16px;
right: 20px; right: -9px;
top: 14px; top: 12px;
z-index: 3;
} }