root
/
grafana
mirror of https://github.com/grafana/grafana.git
1
0
Fork 0
Code Issues Actions 31 Packages Projects Releases Wiki Activity

Dashboard: Minor settings UI Update (#16669) 

* removed settings header in aside, added header next to search button, tweaked paddings

* Minor tweak
This commit is contained in:
Patrick O'Carroll 2019-04-22 16:04:35 +02:00 committed by Torkel Ödegaard
parent 532abe2fc2
commit f175046bc1
6 changed files with 23 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
View File

@ -196,7 +196,7 @@ $input-color-select-arrow: $gray-1;
$placeholderText: $gray-2; $placeholderText: $gray-2;
// search // search
$search-shadow: 0 5px 30px 0 $gray-4; $search-shadow: 0 1px 5px 0 $gray-5;
$search-filter-box-bg: $gray-7; $search-filter-box-bg: $gray-7;
// Typeahead // Typeahead

5
public/app/features/dashboard/components/DashNav/DashNav.tsx
View File

@ -146,6 +146,7 @@ export class DashNav extends PureComponent<Props> {
<i className="fa fa-caret-down" /> <i className="fa fa-caret-down" />
</a> </a>
</div> </div>
{this.isSettings && <span className="navbar-settings-title">&nbsp;/ Settings</span>}
<div className="navbar__spacer" /> <div className="navbar__spacer" />
</> </>
); );
@ -155,6 +156,10 @@ export class DashNav extends PureComponent<Props> {
return this.props.editview || this.props.isFullscreen; return this.props.editview || this.props.isFullscreen;
} }
get isSettings() {
return this.props.editview;
}
renderBackButton() { renderBackButton() {
return ( return (
<div className="navbar-edit"> <div className="navbar-edit">

5
public/app/features/dashboard/components/DashboardSettings/template.html
View File

@ -1,9 +1,4 @@
<aside class="dashboard-settings__aside"> <aside class="dashboard-settings__aside">
<h2 class="dashboard-settings__aside-header">
<i class="gicon gicon-cog"></i>
Settings
</h2>
<a href="{{::section.url}}" class="dashboard-settings__nav-item" ng-class="{active: ctrl.viewId === section.id}" ng-repeat="section in ctrl.sections"> <a href="{{::section.url}}" class="dashboard-settings__nav-item" ng-class="{active: ctrl.viewId === section.id}" ng-repeat="section in ctrl.sections">
<i class="{{::section.icon}}"></i> <i class="{{::section.icon}}"></i>
{{::section.title}} {{::section.title}}

2
public/sass/_variables.light.generated.scss
View File

@ -199,7 +199,7 @@ $input-color-select-arrow: $gray-1;
$placeholderText: $gray-2; $placeholderText: $gray-2;
// search // search
$search-shadow: 0 5px 30px 0 $gray-4; $search-shadow: 0 1px 5px 0 $gray-5;
$search-filter-box-bg: $gray-7; $search-filter-box-bg: $gray-7;
// Typeahead // Typeahead

10
public/sass/components/_dashboard_settings.scss
View File

@ -25,12 +25,12 @@
flex-grow: 1; flex-grow: 1;
min-width: 0; min-width: 0;
height: 100%; height: 100%;
padding: 30px; padding: 32px;
max-width: 1100px; max-width: 1100px;
} }
.dashboard-settings__aside { .dashboard-settings__aside {
padding: 27px 0 0 30px; padding: 32px 0 0 32px;
background: $panel-bg; background: $panel-bg;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -54,6 +54,7 @@
.dashboard-settings__header { .dashboard-settings__header {
font-size: $font-size-h3; font-size: $font-size-h3;
margin-bottom: $space-xl; margin-bottom: $space-xl;
line-height: 36px;
} }
.dashboard-settings__subheader { .dashboard-settings__subheader {
@ -64,9 +65,10 @@
} }
.dashboard-settings__nav-item { .dashboard-settings__nav-item {
padding: 7px 12px; padding: 8px 40px 8px 8px;
color: $text-color; color: $text-color;
font-size: $font-size-md; font-size: $font-size-md;
line-height: 20px;
@include left-brand-border; @include left-brand-border;
&.active { &.active {
@ -76,11 +78,13 @@
.gicon { .gicon {
margin-bottom: 2px; margin-bottom: 2px;
margin-right: 4px;
} }
.fa { .fa {
font-size: 17px; font-size: 17px;
width: 16px; width: 16px;
margin-right: 4px;
} }
} }

9
public/sass/components/_navbar.scss
View File

@ -212,3 +212,12 @@
border-color: $text-color-strong; border-color: $text-color-strong;
} }
} }
.navbar-settings-title {
display: block;
margin: 0;
color: $headings-color;
font-size: $font-size-lg;
min-height: $navbarHeight;
line-height: $navbarHeight;
}