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 fixes

Browse Source
This commit is contained in:
Torkel Ödegaard
2017-10-18 09:48:37 +02:00
parent 148a4c6c2d
commit 6f71af449b
4 changed files with 44 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
pkg/api/index.go
View File

@@ -84,6 +84,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
themeUrlParam := c.Query("theme") themeUrlParam := c.Query("theme")
if themeUrlParam == "light" { if themeUrlParam == "light" {
data.User.LightTheme = true data.User.LightTheme = true
data.Theme = "light"
} }
if c.OrgRole == m.ROLE_ADMIN || c.OrgRole == m.ROLE_EDITOR { if c.OrgRole == m.ROLE_ADMIN || c.OrgRole == m.ROLE_EDITOR {

2
public/app/features/dashboard/partials/shareModal.html
View File

@@ -62,7 +62,7 @@
</gf-form-switch> </gf-form-switch>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-12">Theme</span> <span class="gf-form-label width-12">Theme</span>
<div class="gf-form-select-wrapper width-6"> <div class="gf-form-select-wrapper width-10">
<select class="gf-form-input" ng-model="options.theme" ng-options="f as f for f in ['current', 'dark', 'light']" ng-change="buildUrl()"></select> <select class="gf-form-input" ng-model="options.theme" ng-options="f as f for f in ['current', 'dark', 'light']" ng-change="buildUrl()"></select>
</div> </div>
</div> </div>

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

@@ -22,7 +22,7 @@
} }
.react-grid-item { .react-grid-item {
// overflow: auto; overflow: hidden;
} }
.theme-dark { .theme-dark {

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

@@ -125,31 +125,61 @@
display: flex; display: flex;
padding: 0 $spacer; padding: 0 $spacer;
line-height: 0.5; line-height: 0.5;
margin-left: 2em;
} }
$page-breadcrumb__angle-1: 39px;
$page-breadcrumb__angle-ul: 31px;
$page-breadcrumb__angle-a: 30px;
.page-breadcrumb__item { .page-breadcrumb__item {
background: $page-nav-bg; background: $page-nav-bg;
margin-right: .2rem; box-shadow: $page-nav-shadow;
transform: skewX(-35deg);
> a { > a {
color: $page-nav-breadcrumb-color; color: $page-nav-breadcrumb-color;
font-size: $font-size-sm; font-size: $font-size-sm;
display: block; display: block;
padding: 0.6rem 1rem 0.6rem 1rem;; padding: 0.6rem 1rem 0.6rem 3rem;;
position: relative; position: relative;
transform: skewX(35deg);
&::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;
}
} }
&:last-child { &:first-child {
background: $breadcrumb-hover-hl;; a {
padding-left: 1rem;
}
} }
&::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;
z-index: 1;
transform: translateX(4px);
border-left-color: #282020;
margin: 0;
}
&:hover { &:hover {
background: $breadcrumb-hover-hl; background: $breadcrumb-hover-hl;
@@ -169,14 +199,3 @@
} }
} }
.page-breadcrumb__caret {
opacity: 0;
position: absolute;
display: block;
width: 16px;
height: 16px;
right: -9px;
top: 5px;
z-index: 3;
}