Skip to content

N
nexpie-grafana-theme
Commit 08113383 by Torkel Ödegaard
Options

ux(): updated dashboard settings view

parent ecc22757
Showing with 105 additions and 120 deletions
public/app/features/dashboard/partials/settings.html
...@@ -16,60 +16,40 @@ ...@@ -16,60 +16,40 @@
</button> </button>
</div> </div>
<div class="tabbed-view-body" style="padding-bottom: 50px;"> <div class="tabbed-view-body">
<div ng-if="editor.index == 0"> <div ng-if="editor.index == 0">
<div class="editor-row">
<div class="tight-form-section"> <h5 class="section-heading">Dashboard Detail</h5>
<h5>Dashboard info</h5> <div class="gf-form-group">
<div class="tight-form"> <div class="gf-form">
<ul class="tight-form-list"> <label class="gf-form-label width-7">Title</label>
<li class="tight-form-item" style="width: 90px"> <input type="text" class="gf-form-input max-width-25" ng-model='dashboard.title'></input>
Title </div>
</li> <div class="gf-form">
<li> <label class="gf-form-label width-7">Tags<tip>Press enter to a add tag</tip></label>
<input type="text" class="input-large tight-form-input" ng-model='dashboard.title'></input> <bootstrap-tagsinput ng-model="dashboard.tags" tagclass="label label-tag" placeholder="add tags">
</li> </bootstrap-tagsinput>
<li class="tight-form-item"> </div>
Tags
<tip>Press enter to a add tag</tip> <div class="gf-form">
</li> <label class="gf-form-label width-7">Timezone</label>
<li> <div class="gf-form-select-wrapper">
<bootstrap-tagsinput ng-model="dashboard.tags" tagclass="label label-tag" placeholder="add tags"> <select ng-model="dashboard.timezone" class='gf-form-input' ng-options="f for f in ['browser','utc']"></select>
</bootstrap-tagsinput>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 90px">
Timezone
</li>
<li>
<select ng-model="dashboard.timezone" class='input-small tight-form-input' ng-options="f for f in ['browser','utc']"></select>
</li>
</ul>
<div class="clearfix"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="editor-row"> <h5 class="section-heading">On/Off Toggles</h5>
<div class="tight-form-section"> <div class="gf-form-group">
<h5>Toggles</h5> <div class="gf-form-inline">
<div class="tight-form last"> <div class="gf-form">
<ul class="tight-form-list"> <editor-checkbox text="Editable" model="dashboard.editable"></editor-checkbox>
<li class="tight-form-item"> </div>
<editor-checkbox text="Editable" model="dashboard.editable"></editor-checkbox> <div class="gf-form">
</li> <editor-checkbox text="Hide Controls (CTRL+H)" model="dashboard.hideControls"></editor-checkbox>
<li class="tight-form-item"> </div>
<editor-checkbox text="Hide Controls (CTRL+H)" model="dashboard.hideControls"></editor-checkbox> <div class="gf-form">
</li> <editor-checkbox text="Shared Crosshair (CTRL+O)" model="dashboard.sharedCrosshair"></editor-checkbox>
<li class="tight-form-item last">
<editor-checkbox text="Shared Crosshair (CTRL+O)" model="dashboard.sharedCrosshair"></editor-checkbox>
</li>
</ul>
<div class="clearfix"></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -116,68 +96,68 @@ ...@@ -116,68 +96,68 @@
<gf-time-picker-settings dashboard="dashboard"></gf-time-picker-settings> <gf-time-picker-settings dashboard="dashboard"></gf-time-picker-settings>
</div> </div>
<div ng-if="editor.index == 4"> <div ng-if="editor.index == 4">
<div class="row"> <div class="row">
<h5>Dashboard info</h5> <h5>Dashboard info</h5>
<div class="pull-left tight-form"> <div class="pull-left tight-form">
<div class="tight-form"> <div class="tight-form">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item" style="width: 120px"> <li class="tight-form-item" style="width: 120px">
Last updated at: Last updated at:
</li> </li>
<li class="tight-form-item" style="width: 180px"> <li class="tight-form-item" style="width: 180px">
{{formatDate(dashboardMeta.updated)}} {{formatDate(dashboardMeta.updated)}}
</li> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div class="tight-form"> <div class="tight-form">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item" style="width: 120px"> <li class="tight-form-item" style="width: 120px">
Last updated by: Last updated by:
</li> </li>
<li class="tight-form-item" style="width: 180px"> <li class="tight-form-item" style="width: 180px">
{{dashboardMeta.updatedBy}} {{dashboardMeta.updatedBy}}
</li> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div class="tight-form"> <div class="tight-form">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item" style="width: 120px"> <li class="tight-form-item" style="width: 120px">
Created at: Created at:
</li> </li>
<li class="tight-form-item" style="width: 180px"> <li class="tight-form-item" style="width: 180px">
{{formatDate(dashboardMeta.created)}} {{formatDate(dashboardMeta.created)}}
</li> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div class="tight-form"> <div class="tight-form">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item" style="width: 120px"> <li class="tight-form-item" style="width: 120px">
Created by: Created by:
</li> </li>
<li class="tight-form-item" style="width: 180px"> <li class="tight-form-item" style="width: 180px">
{{dashboardMeta.createdBy}} {{dashboardMeta.createdBy}}
</li> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div class="tight-form"> <div class="tight-form">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item" style="width: 120px"> <li class="tight-form-item" style="width: 120px">
Current version: Current version:
</li> </li>
<li class="tight-form-item" style="width: 180px"> <li class="tight-form-item" style="width: 180px">
{{dashboardMeta.version}} {{dashboardMeta.version}}
</li> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
......
public/sass/components/_tabbed_view.scss
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
background-image: linear-gradient(60deg, transparent 70%, darken($page-bg, 4%) 98%); background-image: linear-gradient(60deg, transparent 70%, darken($page-bg, 4%) 98%);
margin: -$dashboard-padding; margin: -$dashboard-padding;
margin-bottom: $spacer*2; margin-bottom: $spacer*2;
padding: $spacer*2; padding: $spacer*3;
} }
.tabbed-view-header { .tabbed-view-header {
...@@ -39,7 +39,11 @@ ...@@ -39,7 +39,11 @@
} }
.tabbed-view-body { .tabbed-view-body {
padding: 20px; padding: $spacer*2;
min-height: 150px; min-height: 250px;
} }
.section-heading {
font-size: 1.1rem;
margin-bottom: 0.6rem;
}
public/sass/components/_tabs.scss
...@@ -44,15 +44,18 @@ ...@@ -44,15 +44,18 @@
} }
.gf-tabs-link { .gf-tabs-link {
padding: ($spacer * 0.75) $spacer; padding: 0.80rem 1rem 0.60rem 1rem;
margin-right: $spacer/2; margin-right: $spacer/2;
line-height: $line-height-base; line-height: $line-height-base;
border: 1px solid transparent; border: 1px solid transparent;
@include border-radius(4px 4px 0 0); position: relative;
top: 3px;
@include border-radius(2px 2px 0 0);
&:hover, &:hover,
&:focus { &:focus {
border-color: $divider-border-color; border-color: #F9952B;
color: $link-color; color: $link-color;
} }
...@@ -60,11 +63,9 @@ ...@@ -60,11 +63,9 @@
&.active:hover, &.active:hover,
&.active:focus { &.active:focus {
@include border-radius(3px); @include border-radius(3px);
border: 1px solid $divider-border-color; border: 1px solid #F9952B;
background-color: transparent; background-color: transparent;
border-bottom: 1px solid $panel-bg; border-bottom: 1px solid $panel-bg;
color: $link-color; color: $link-color;
position: relative;
top: 1px;
} }
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment