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(): dashboard settings form polish, added on hover tooltip for checkbox directive

Browse Source
This commit is contained in:
Torkel Ödegaard
2016-03-29 11:01:00 +02:00
parent b12ca1da88
commit 3e50ee6193
6 changed files with 118 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
public/app/features/dashboard/partials/settings.html
View File

@@ -19,10 +19,11 @@
<div class="tabbed-view-body">
<div ng-if="editor.index == 0">
<div class="gf-form-group">
<div class="gf-form-group section">
<h5 class="section-heading">Details</h5>
<div class="gf-form">
<label class="gf-form-label width-7">Title</label>
<input type="text" class="gf-form-input max-width-25" ng-model='dashboard.title'></input>
<input type="text" class="gf-form-input width-25" ng-model='dashboard.title'></input>
</div>
<div class="gf-form">
<label class="gf-form-label width-7">Tags<tip>Press enter to a add tag</tip></label>
@@ -38,74 +39,89 @@
</div>
</div>
<h5 class="section-heading">On/Off Toggles</h5>
<div class="gf-form-group">
<div class="gf-form-inline">
<gf-form-switch class="gf-form" label="Editable" checked="dashboard.editable" switch-class="max-width-6"></gf-form-switch>
<gf-form-switch class="gf-form" label="Hide Controls (CTRL+H)" checked="dashboard.hideControls" switch-class="max-width-6"></gf-form-switch>
<gf-form-switch class="gf-form" label="Shared Crosshair (CTRL+O)" checked="dashboard.sharedCrosshair" switch-class="max-width-6"></gf-form-switch>
</div>
</div>
</div>
<div class="section">
<h5 class="section-heading">Toggles</h5>
<div class="gf-form-group">
<gf-form-switch class="gf-form"
label="Editable"
tooltip="Uncheck, then save and reload to disable all dashboard editing"
checked="dashboard.editable"
label-class="width-10">
</gf-form-switch>
<gf-form-switch class="gf-form"
label="Hide Controls"
tooltip="Hide row controls. Shortcut: CTRL+H"
checked="dashboard.hideControls"
label-class="width-10">
</gf-form-switch>
<gf-form-switch class="gf-form"
label="Shared Crosshair"
tooltip="Shared Crosshair line on all graphs. Shortcut: CTRL+O"
checked="dashboard.sharedCrosshair"
label-class="width-10">
</gf-form-switch>
</div>
</div>
</div>
<div ng-if="editor.index == 1">
<h5 class="section-heading">Rows settings</h5>
<div ng-if="editor.index == 1">
<h5 class="section-heading">Rows settings</h5>
<div class="gf-form-group">
<div class="gf-form-inline" ng-repeat="row in dashboard.rows">
<div class="gf-form">
<span class="gf-form-label">Title</span>
<input type="text" class="gf-form-input max-width-14" ng-model='row.title'></input>
</div>
<gf-form-switch class="gf-form" label="Show title" checked="row.showTitle" switch-class="max-width-6"></gf-form-switch>
<div class="gf-form-group">
<div class="gf-form-inline" ng-repeat="row in dashboard.rows">
<div class="gf-form">
<span class="gf-form-label">Title</span>
<input type="text" class="gf-form-input max-width-14" ng-model='row.title'></input>
</div>
<gf-form-switch class="gf-form" label="Show title" checked="row.showTitle" switch-class="max-width-6"></gf-form-switch>
<div class="gf-form">
<button class="btn btn-inverse gf-form-btn" ng-click="_.move(dashboard.rows,$index,$index-1)">
<i ng-class="{'invisible': $first}" class="fa fa-arrow-up"></i>
</button>
<button class="btn btn-inverse gf-from-btn" ng-click="_.move(dashboard.rows,$index,$index+1)">
<i ng-class="{'invisible': $last}" class="fa fa-arrow-down"></i>
</button>
<button class="btn btn-inverse gf-form-btn" click="dashboard.rows = _.without(dashboard.rows,row)">
<i class="fa fa-trash"></i>
</button>
</div>
</div>
</div>
</div>
<div class="gf-form">
<button class="btn btn-inverse gf-form-btn" ng-click="_.move(dashboard.rows,$index,$index-1)">
<i ng-class="{'invisible': $first}" class="fa fa-arrow-up"></i>
</button>
<button class="btn btn-inverse gf-from-btn" ng-click="_.move(dashboard.rows,$index,$index+1)">
<i ng-class="{'invisible': $last}" class="fa fa-arrow-down"></i>
</button>
<button class="btn btn-inverse gf-form-btn" click="dashboard.rows = _.without(dashboard.rows,row)">
<i class="fa fa-trash"></i>
</button>
</div>
</div>
</div>
</div>
<div ng-if="editor.index == 2">
<dash-links-editor></dash-links-editor>
</div>
<div ng-if="editor.index == 2">
<dash-links-editor></dash-links-editor>
</div>
<div ng-if="editor.index == 3">
<gf-time-picker-settings dashboard="dashboard"></gf-time-picker-settings>
</div>
<div ng-if="editor.index == 3">
<gf-time-picker-settings dashboard="dashboard"></gf-time-picker-settings>
</div>
<div ng-if="editor.index == 4">
<h5 class="section-heading">Dashboard info</h5>
<div class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label width-10">Last updated at:</span>
<span class="gf-form-label width-18">{{formatDate(dashboardMeta.updated)}}</span>
</div>
<div class="gf-form">
<span class="gf-form-label width-10">Last updated by:</span>
<span class="gf-form-label width-18">{{dashboardMeta.updatedBy}}&nbsp;</span>
</div>
<div class="gf-form">
<span class="gf-form-label width-10">Created at:</span>
<span class="gf-form-label width-18">{{formatDate(dashboardMeta.created)}}&nbsp;</span>
</div>
<div class="gf-form">
<span class="gf-form-label width-10">Created by:</span>
<span class="gf-form-label width-18">{{dashboardMeta.createdBy}}&nbsp;</span>
</div>
<div class="gf-form">
<span class="gf-form-label width-10">Current version:</span>
<span class="gf-form-label width-18">{{dashboardMeta.version}}&nbsp;</span>
</div>
</div>
</div>
<div ng-if="editor.index == 4">
<h5 class="section-heading">Dashboard info</h5>
<div class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label width-10">Last updated at:</span>
<span class="gf-form-label width-18">{{formatDate(dashboardMeta.updated)}}</span>
</div>
<div class="gf-form">
<span class="gf-form-label width-10">Last updated by:</span>
<span class="gf-form-label width-18">{{dashboardMeta.updatedBy}}&nbsp;</span>
</div>
<div class="gf-form">
<span class="gf-form-label width-10">Created at:</span>
<span class="gf-form-label width-18">{{formatDate(dashboardMeta.created)}}&nbsp;</span>
</div>
<div class="gf-form">
<span class="gf-form-label width-10">Created by:</span>
<span class="gf-form-label width-18">{{dashboardMeta.createdBy}}&nbsp;</span>
</div>
<div class="gf-form">
<span class="gf-form-label width-10">Current version:</span>
<span class="gf-form-label width-18">{{dashboardMeta.version}}&nbsp;</span>
</div>
</div>
</div>
</div>