Commit e307ada3 by Torkel Ödegaard

ux(): tooltip improvement

parent 49b2743a
...@@ -7,6 +7,9 @@ import coreModule from 'app/core/core_module'; ...@@ -7,6 +7,9 @@ import coreModule from 'app/core/core_module';
var template = ` var template = `
<select class="gf-form-input" ng-model="ctrl.model" ng-options="f.value as f.text for f in ctrl.options"></select> <select class="gf-form-input" ng-model="ctrl.model" ng-options="f.value as f.text for f in ctrl.options"></select>
<info-popover mode="right-absolute">
Not finding dashboard you want? Star it first, then it should appear in this select box.
</info-popover>
`; `;
export class DashboardSelectorCtrl { export class DashboardSelectorCtrl {
......
...@@ -8,21 +8,30 @@ import Drop from 'tether-drop'; ...@@ -8,21 +8,30 @@ import Drop from 'tether-drop';
export function infoPopover() { export function infoPopover() {
return { return {
restrict: 'E', restrict: 'E',
template: '<i class="fa fa-info-circle"></i>',
transclude: true, transclude: true,
link: function(scope, elem, attrs, ctrl, transclude) { link: function(scope, elem, attrs, ctrl, transclude) {
var inputElem = elem.prev(); // var inputElem = elem.prev();
if (inputElem.length === 0) { // if (inputElem.length === 0) {
console.log('Failed to find input element for popover'); // console.log('Failed to find input element for popover');
return; // return;
} // }
var offset = attrs.offset || '0 -10px'; var offset = attrs.offset || '0 -10px';
var position = attrs.position || 'right middle'; var position = attrs.position || 'right middle';
var classes = 'drop-help drop-hide-out-of-bounds'; var classes = 'drop-help drop-hide-out-of-bounds';
var openOn = 'hover';
elem.addClass('gf-form-help-icon');
if (attrs.wide) { if (attrs.wide) {
classes += ' drop-wide'; classes += ' drop-wide';
} }
if (attrs.mode) {
elem.addClass('gf-form-help-icon--' + attrs.mode);
}
transclude(function(clone, newScope) { transclude(function(clone, newScope) {
var content = document.createElement("div"); var content = document.createElement("div");
_.each(clone, (node) => { _.each(clone, (node) => {
...@@ -30,11 +39,11 @@ export function infoPopover() { ...@@ -30,11 +39,11 @@ export function infoPopover() {
}); });
var drop = new Drop({ var drop = new Drop({
target: inputElem[0], target: elem[0],
content: content, content: content,
position: position, position: position,
classes: classes, classes: classes,
openOn: 'click', openOn: openOn,
tetherOptions: { tetherOptions: {
offset: offset offset: offset
} }
......
...@@ -7,7 +7,12 @@ import coreModule from 'app/core/core_module'; ...@@ -7,7 +7,12 @@ import coreModule from 'app/core/core_module';
import Drop from 'tether-drop'; import Drop from 'tether-drop';
var template = ` var template = `
<label for="check-{{ctrl.id}}" class="gf-form-label {{ctrl.labelClass}} pointer">{{ctrl.label}}</label> <label for="check-{{ctrl.id}}" class="gf-form-label {{ctrl.labelClass}} pointer">
{{ctrl.label}}
<info-popover mode="right-normal" ng-if="ctrl.tooltip">
{{ctrl.tooltip}}
</info-popover>
</label>
<div class="gf-form-switch {{ctrl.switchClass}}" ng-if="ctrl.show"> <div class="gf-form-switch {{ctrl.switchClass}}" ng-if="ctrl.show">
<input id="check-{{ctrl.id}}" type="checkbox" ng-model="ctrl.checked" ng-change="ctrl.internalOnChange()"> <input id="check-{{ctrl.id}}" type="checkbox" ng-model="ctrl.checked" ng-change="ctrl.internalOnChange()">
<label for="check-{{ctrl.id}}" data-on="Yes" data-off="No"></label> <label for="check-{{ctrl.id}}" data-on="Yes" data-off="No"></label>
...@@ -49,22 +54,6 @@ export function switchDirective() { ...@@ -49,22 +54,6 @@ export function switchDirective() {
onChange: "&", onChange: "&",
}, },
template: template, 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();
});
}
}
}; };
} }
......
...@@ -26,7 +26,10 @@ ...@@ -26,7 +26,10 @@
<input type="text" class="gf-form-input width-25" ng-model='dashboard.title'></input> <input type="text" class="gf-form-input width-25" ng-model='dashboard.title'></input>
</div> </div>
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-7">Tags<tip>Press enter to a add tag</tip></label> <label class="gf-form-label width-7">
Tags
<info-popover mode="right-normal">Press enter to a add tag</info-popover>
</label>
<bootstrap-tagsinput ng-model="dashboard.tags" tagclass="label label-tag" placeholder="add tags"> <bootstrap-tagsinput ng-model="dashboard.tags" tagclass="label label-tag" placeholder="add tags">
</bootstrap-tagsinput> </bootstrap-tagsinput>
</div> </div>
...@@ -46,19 +49,19 @@ ...@@ -46,19 +49,19 @@
label="Editable" label="Editable"
tooltip="Uncheck, then save and reload to disable all dashboard editing" tooltip="Uncheck, then save and reload to disable all dashboard editing"
checked="dashboard.editable" checked="dashboard.editable"
label-class="width-10"> label-class="width-11">
</gf-form-switch> </gf-form-switch>
<gf-form-switch class="gf-form" <gf-form-switch class="gf-form"
label="Hide Controls" label="Hide Controls"
tooltip="Hide row controls. Shortcut: CTRL+H" tooltip="Hide row controls. Shortcut: CTRL+H"
checked="dashboard.hideControls" checked="dashboard.hideControls"
label-class="width-10"> label-class="width-11">
</gf-form-switch> </gf-form-switch>
<gf-form-switch class="gf-form" <gf-form-switch class="gf-form"
label="Shared Crosshair" label="Shared Crosshair"
tooltip="Shared Crosshair line on all graphs. Shortcut: CTRL+O" tooltip="Shared Crosshair line on all graphs. Shortcut: CTRL+O"
checked="dashboard.sharedCrosshair" checked="dashboard.sharedCrosshair"
label-class="width-10"> label-class="width-11">
</gf-form-switch> </gf-form-switch>
</div> </div>
</div> </div>
......
...@@ -49,7 +49,7 @@ export class PrefsControlCtrl { ...@@ -49,7 +49,7 @@ export class PrefsControlCtrl {
} }
var template = ` var template = `
<form name="ctrl.prefsForm" class="gf-form-group"> <form name="ctrl.prefsForm" class="section gf-form-group">
<h3 class="page-heading">Preferences</h3> <h3 class="page-heading">Preferences</h3>
<div class="gf-form"> <div class="gf-form">
...@@ -61,8 +61,7 @@ var template = ` ...@@ -61,8 +61,7 @@ var template = `
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-9">Home Dashboard</span> <span class="gf-form-label width-9">Home Dashboard</span>
<dashboard-selector <dashboard-selector class="gf-form-select-wrapper max-width-20 gf-form-select-wrapper--has-help-icon"
class="gf-form-select-wrapper max-width-20"
model="ctrl.prefs.homeDashboardId"> model="ctrl.prefs.homeDashboardId">
</dashboard-selector> </dashboard-selector>
</div> </div>
......
...@@ -31,18 +31,18 @@ ...@@ -31,18 +31,18 @@
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-7">Name</span> <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> <input class="gf-form-input max-width-21" type="text" ng-model="ctrl.current.name" placeholder="My data source name" required>
</div> <info-popover offset="0px -135px" mode="right-absolute">
<info-popover offset="0px -130px">
The name is used when you select the data source in panels. The name is used when you select the data source in panels.
The <em>Default</em> data source is preselected in new The <em>Default</em> data source is preselected in new
panels. panels.
</info-popover> </info-popover>
</div>
<gf-form-switch class="gf-form" label="Default" checked="ctrl.current.isDefault" switch-class="max-width-6"></gf-form-switch> <gf-form-switch class="gf-form" label="Default" checked="ctrl.current.isDefault" switch-class="max-width-6"></gf-form-switch>
</div> </div>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-7">Type</span> <span class="gf-form-label width-7">Type</span>
<div class="gf-form-select-wrapper max-width-21"> <div class="gf-form-select-wrapper max-width-23">
<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> <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> </div>
......
...@@ -3,11 +3,11 @@ ...@@ -3,11 +3,11 @@
<div class="gf-form-group"> <div class="gf-form-group">
<h3 class="page-heading">Http settings</h3> <h3 class="page-heading">Http settings</h3>
<div class="gf-form"> <div class="gf-form-inline">
<div class="gf-form max-width-30">
<span class="gf-form-label width-7">Url</span> <span class="gf-form-label width-7">Url</span>
<input class="gf-form-input max-width-21" type="text" ng-model='current.url' placeholder="for example: http://localhost:8081" ng-pattern="/^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/" required></input> <input class="gf-form-input" type="text" ng-model='current.url' placeholder="for example: http://localhost:8081" ng-pattern="/^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/" required></input>
<info-popover mode="right-absolute">
<info-popover>
<p>Specify a complete HTTP url (for example http://your_server:8080)</p> <p>Specify a complete HTTP url (for example http://your_server:8080)</p>
<span ng-show="current.access === 'direct'"> <span ng-show="current.access === 'direct'">
Your access method is <em>Direct</em>, this means the url Your access method is <em>Direct</em>, this means the url
...@@ -19,13 +19,18 @@ ...@@ -19,13 +19,18 @@
</span> </span>
</info-popover> </info-popover>
</div> </div>
</div>
<div class="gf-form"> <div class="gf-form-inline">
<span class="gf-form-label width-7"> <div class="gf-form max-width-30">
Access <tip>Direct = url is used directly from browser, Proxy = Grafana backend will proxy the request</tip> <span class="gf-form-label width-7">Access</span>
</span> <div class="gf-form-select-wrapper gf-form-select-wrapper--has-help-icon max-width-24">
<div class="gf-form-select-wrapper"> <select class="gf-form-input" ng-model="current.access" ng-options="f for f in ['direct', 'proxy']"></select>
<select class="gf-form-input gf-size-auto" ng-model="current.access" ng-options="f for f in ['direct', 'proxy']"></select> <info-popover mode="right-absolute">
Direct = url is used directly from browser<br>
Proxy = Grafana backend will proxy the request
</info-popover>
</div>
</div> </div>
</div> </div>
......
<h3 class="page-heading">CloudWatch details</h3> <h3 class="page-heading">CloudWatch details</h3>
<div class="gf-form-group"> <div class="gf-form-group max-width-30">
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-14"> <label class="gf-form-label width-13">Credentials profile name</label>
Credentials profile name<tip>Credentials profile name, as specified in ~/.aws/credentials, leave blank for default</tip> <input type="text" class="gf-form-input max-width-18" ng-model='ctrl.current.database' placeholder="default"></input>
</label> <info-popover mode="right-absolute">
<input type="text" class="gf-form-input max-width-15" ng-model='ctrl.current.database' placeholder="default"></input> Credentials profile name, as specified in ~/.aws/credentials, leave blank for default
</info-popover>
</div> </div>
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-14"> <label class="gf-form-label width-13">Default Region</label>
Default Region<tip>Specify the region, such as for US West (Oregon) use ` us-west-2 ` as the region.</tip> <div class="gf-form-select-wrapper max-width-18 gf-form-select-wrapper--has-help-icon">
</label> <select class="gf-form-input" ng-model="ctrl.current.jsonData.defaultRegion" ng-options="region for region in ['ap-northeast-1', 'ap-northeast-2', 'ap-southeast-1', 'ap-southeast-2', 'cn-north-1', 'eu-central-1', 'eu-west-1', 'sa-east-1', 'us-east-1', 'us-west-1', 'us-west-2']"></select>
<div class="gf-form-select-wrapper"> <info-popover mode="right-absolute">
<select class="gf-form-input max-width-15" ng-model="ctrl.current.jsonData.defaultRegion" ng-options="region for region in ['ap-northeast-1', 'ap-northeast-2', 'ap-southeast-1', 'ap-southeast-2', 'cn-north-1', 'eu-central-1', 'eu-west-1', 'sa-east-1', 'us-east-1', 'us-west-1', 'us-west-2']"></select> Specify the region, such as for US West (Oregon) use ` us-west-2 ` as the region.
</info-popover>
</div> </div>
</div> </div>
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-14">Custom Metrics namespace<tip>Namespaces of Custom Metrics</tip></label> <label class="gf-form-label width-13">Custom Metrics namespace</label>
<input type="text" class="gf-form-input max-width-15" ng-model='ctrl.current.jsonData.customMetricsNamespaces' placeholder="Namespace1,Namespace2"></input> <input type="text" class="gf-form-input max-width-18" ng-model='ctrl.current.jsonData.customMetricsNamespaces' placeholder="Namespace1,Namespace2"></input>
<info-popover mode="right-absolute">
Namespaces of Custom Metrics
</info-popover>
</div> </div>
</div> </div>
...@@ -6,6 +6,7 @@ $gf-form-margin: 0.25rem; ...@@ -6,6 +6,7 @@ $gf-form-margin: 0.25rem;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
text-align: left; text-align: left;
position: relative;
.cr1 { .cr1 {
margin-left: 8px; margin-left: 8px;
...@@ -138,6 +139,12 @@ $gf-form-margin: 0.25rem; ...@@ -138,6 +139,12 @@ $gf-form-margin: 0.25rem;
content: '\f0d7'; content: '\f0d7';
pointer-events: none; pointer-events: none;
} }
&--has-help-icon {
&:after {
right: $input-padding-x*3;
}
}
} }
.gf-form--v-stretch { .gf-form--v-stretch {
...@@ -182,3 +189,24 @@ $gf-form-margin: 0.25rem; ...@@ -182,3 +189,24 @@ $gf-form-margin: 0.25rem;
pointer-events: none; pointer-events: none;
} }
} }
.gf-form-help-icon {
flex-grow: 0;
padding-left: $spacer;
color: $text-color-weak;
&--right-absolute {
position: absolute;
right: $spacer;
top: 8px;
}
&--right-normal {
float: right;
}
}
select.gf-form-input ~ .gf-form-help-icon {
right: 10px;
}
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