mirror of
https://github.com/grafana/grafana.git
synced 2025-01-08 15:13:30 -06:00
ux(): dashboard settings form polish, added on hover tooltip for checkbox directive
This commit is contained in:
parent
b12ca1da88
commit
3e50ee6193
@ -18,7 +18,7 @@ export function infoPopover() {
|
||||
|
||||
var offset = attrs.offset || '0 -10px';
|
||||
var position = attrs.position || 'right middle';
|
||||
var classes = 'drop-help';
|
||||
var classes = 'drop-help drop-hide-out-of-bounds';
|
||||
if (attrs.wide) {
|
||||
classes += ' drop-wide';
|
||||
}
|
||||
|
@ -4,6 +4,7 @@ import config from 'app/core/config';
|
||||
import _ from 'lodash';
|
||||
import $ from 'jquery';
|
||||
import coreModule from 'app/core/core_module';
|
||||
import Drop from 'tether-drop';
|
||||
|
||||
var template = `
|
||||
<label for="check-{{$id}}" class="gf-form-label {{ctrl.labelClass}} pointer">{{ctrl.label}}</label>
|
||||
@ -44,10 +45,27 @@ export function switchDirective() {
|
||||
checked: "=",
|
||||
label: "@",
|
||||
labelClass: "@",
|
||||
tooltip: "@",
|
||||
switchClass: "@",
|
||||
onChange: "&",
|
||||
},
|
||||
template: template,
|
||||
link: (scope, elem) => {
|
||||
if (scope.ctrl.tooltip) {
|
||||
var drop = new Drop({
|
||||
target: elem[0],
|
||||
content: scope.ctrl.tooltip,
|
||||
position: "right middle",
|
||||
classes: 'drop-help',
|
||||
openOn: 'hover',
|
||||
hoverOpenDelay: 400,
|
||||
});
|
||||
|
||||
scope.$on('$destroy', function() {
|
||||
drop.destroy();
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -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}} </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)}} </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}} </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}} </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}} </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)}} </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}} </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}} </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -31,26 +31,26 @@
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label width-7">Name</span>
|
||||
<input class="gf-form-input max-width-21" type="text" ng-model="ctrl.current.name" placeholder="My data source name" required>
|
||||
<info-popover offset="0px -130px">
|
||||
The name is used when you select the data source in panels.
|
||||
The <code>Default</code> data source is preselected in new
|
||||
panels.
|
||||
</info-popover>
|
||||
</div>
|
||||
<info-popover offset="0px -130px">
|
||||
The name is used when you select the data source in panels.
|
||||
The <code>Default</code> data source is preselected in new
|
||||
panels.
|
||||
</info-popover>
|
||||
<gf-form-switch class="gf-form" label="Default" checked="ctrl.current.isDefault" switch-class="max-width-6"></gf-form-switch>
|
||||
</div>
|
||||
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label width-7">Type</span>
|
||||
<div class="gf-form-select-wrapper">
|
||||
<select class="gf-form-input gf-size-auto" ng-model="ctrl.current.type" ng-options="v.id as v.name for v in ctrl.types" ng-change="ctrl.typeChanged()"></select>
|
||||
<div class="gf-form-select-wrapper max-width-21">
|
||||
<select class="gf-form-input" ng-model="ctrl.current.type" ng-options="v.id as v.name for v in ctrl.types" ng-change="ctrl.typeChanged()"></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<rebuild-on-change property="ctrl.datasourceMeta.id">
|
||||
<plugin-component type="datasource-config-ctrl">
|
||||
</plugin-component>
|
||||
<plugin-component type="datasource-config-ctrl">
|
||||
</plugin-component>
|
||||
</rebuild-on-change>
|
||||
|
||||
<div ng-if="ctrl.testing" style="margin-top: 25px">
|
||||
|
@ -15,11 +15,7 @@ $easing: cubic-bezier(0, 0, 0.265, 1.00);
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.drop-open.drop-help.drop-out-of-bounds,
|
||||
&.drop-open-transitionend.drop-help.drop-out-of-bounds {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.drop-element, .drop-element * {
|
||||
box-sizing: border-box;
|
||||
@ -38,6 +34,12 @@ $easing: cubic-bezier(0, 0, 0.265, 1.00);
|
||||
}
|
||||
}
|
||||
|
||||
.drop-hide-out-of-bounds {
|
||||
&.drop-open.drop-help.drop-out-of-bounds,
|
||||
&.drop-open-transitionend.drop-help.drop-out-of-bounds {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@include drop-theme("help", $popover-help-bg, $popover-help-color);
|
||||
@include drop-theme("popover", $popover-bg, $popover-color);
|
||||
|
||||
|
@ -1,9 +1,9 @@
|
||||
|
||||
div.editor-row {
|
||||
.editor-row {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
div.editor-row div.section {
|
||||
.section {
|
||||
margin-right: 20px;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
|
Loading…
Reference in New Issue
Block a user