Skip to content

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

ux(): tooltip improvement

parent 49b2743a
Showing with 97 additions and 56 deletions
public/app/core/components/dashboard_selector.ts
......@@ -7,6 +7,9 @@ import coreModule from 'app/core/core_module';
var template = `
<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 {
......
public/app/core/components/info_popover.ts
......@@ -8,21 +8,30 @@ import Drop from 'tether-drop';
export function infoPopover() {
return {
restrict: 'E',
template: '<i class="fa fa-info-circle"></i>',
transclude: true,
link: function(scope, elem, attrs, ctrl, transclude) {
var inputElem = elem.prev();
if (inputElem.length === 0) {
console.log('Failed to find input element for popover');
return;
}
// var inputElem = elem.prev();
// if (inputElem.length === 0) {
// console.log('Failed to find input element for popover');
// return;
// }
var offset = attrs.offset || '0 -10px';
var position = attrs.position || 'right middle';
var classes = 'drop-help drop-hide-out-of-bounds';
var openOn = 'hover';
elem.addClass('gf-form-help-icon');
if (attrs.wide) {
classes += ' drop-wide';
}
if (attrs.mode) {
elem.addClass('gf-form-help-icon--' + attrs.mode);
}
transclude(function(clone, newScope) {
var content = document.createElement("div");
_.each(clone, (node) => {
......@@ -30,11 +39,11 @@ export function infoPopover() {
});
var drop = new Drop({
target: inputElem[0],
target: elem[0],
content: content,
position: position,
classes: classes,
openOn: 'click',
openOn: openOn,
tetherOptions: {
offset: offset
}
......
public/app/core/components/switch.ts
......@@ -7,7 +7,12 @@ import coreModule from 'app/core/core_module';
import Drop from 'tether-drop';
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">
<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>
......@@ -49,22 +54,6 @@ export function switchDirective() {
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();
});
}
}
};
}
......
public/app/features/dashboard/partials/settings.html
......@@ -26,7 +26,10 @@
<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>
<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>
</div>
......@@ -46,19 +49,19 @@
label="Editable"
tooltip="Uncheck, then save and reload to disable all dashboard editing"
checked="dashboard.editable"
label-class="width-10">
label-class="width-11">
</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">
label-class="width-11">
</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">
label-class="width-11">
</gf-form-switch>
</div>
</div>
......
public/app/features/org/prefs_control.ts
......@@ -49,7 +49,7 @@ export class PrefsControlCtrl {
}
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>
<div class="gf-form">
......@@ -61,8 +61,7 @@ var template = `
<div class="gf-form">
<span class="gf-form-label width-9">Home Dashboard</span>
<dashboard-selector
class="gf-form-select-wrapper max-width-20"
<dashboard-selector class="gf-form-select-wrapper max-width-20 gf-form-select-wrapper--has-help-icon"
model="ctrl.prefs.homeDashboardId">
</dashboard-selector>
</div>
......
public/app/features/plugins/partials/ds_edit.html
......@@ -31,18 +31,18 @@
<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>
</div>
<info-popover offset="0px -130px">
<info-popover offset="0px -135px" mode="right-absolute">
The name is used when you select the data source in panels.
The <em>Default</em> data source is preselected in new
panels.
</info-popover>
</div>
<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 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>
</div>
</div>
......
public/app/features/plugins/partials/ds_http_settings.html
......@@ -3,11 +3,11 @@
<div class="gf-form-group">
<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>
<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>
<info-popover>
<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">
<p>Specify a complete HTTP url (for example http://your_server:8080)</p>
<span ng-show="current.access === 'direct'">
Your access method is <em>Direct</em>, this means the url
......@@ -19,13 +19,18 @@
</span>
</info-popover>
</div>
</div>
<div class="gf-form">
<span class="gf-form-label width-7">
Access <tip>Direct = url is used directly from browser, Proxy = Grafana backend will proxy the request</tip>
</span>
<div class="gf-form-select-wrapper">
<select class="gf-form-input gf-size-auto" ng-model="current.access" ng-options="f for f in ['direct', 'proxy']"></select>
<div class="gf-form-inline">
<div class="gf-form max-width-30">
<span class="gf-form-label width-7">Access</span>
<div class="gf-form-select-wrapper gf-form-select-wrapper--has-help-icon max-width-24">
<select class="gf-form-input" 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>
......
public/app/plugins/datasource/cloudwatch/partials/config.html
<h3 class="page-heading">CloudWatch details</h3>
<div class="gf-form-group">
<div class="gf-form-group max-width-30">
<div class="gf-form">
<label class="gf-form-label width-14">
Credentials profile name<tip>Credentials profile name, as specified in ~/.aws/credentials, leave blank for default</tip>
</label>
<input type="text" class="gf-form-input max-width-15" ng-model='ctrl.current.database' placeholder="default"></input>
<label class="gf-form-label width-13">Credentials profile name</label>
<input type="text" class="gf-form-input max-width-18" ng-model='ctrl.current.database' placeholder="default"></input>
<info-popover mode="right-absolute">
Credentials profile name, as specified in ~/.aws/credentials, leave blank for default
</info-popover>
</div>
<div class="gf-form">
<label class="gf-form-label width-14">
Default Region<tip>Specify the region, such as for US West (Oregon) use ` us-west-2 ` as the region.</tip>
</label>
<div class="gf-form-select-wrapper">
<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>
<label class="gf-form-label width-13">Default Region</label>
<div class="gf-form-select-wrapper max-width-18 gf-form-select-wrapper--has-help-icon">
<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>
<info-popover mode="right-absolute">
Specify the region, such as for US West (Oregon) use ` us-west-2 ` as the region.
</info-popover>
</div>
</div>
<div class="gf-form">
<label class="gf-form-label width-14">Custom Metrics namespace<tip>Namespaces of Custom Metrics</tip></label>
<input type="text" class="gf-form-input max-width-15" ng-model='ctrl.current.jsonData.customMetricsNamespaces' placeholder="Namespace1,Namespace2"></input>
<label class="gf-form-label width-13">Custom Metrics namespace</label>
<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>
public/sass/components/_gf-form.scss
......@@ -6,6 +6,7 @@ $gf-form-margin: 0.25rem;
flex-direction: row;
align-items: center;
text-align: left;
position: relative;
.cr1 {
margin-left: 8px;
......@@ -138,6 +139,12 @@ $gf-form-margin: 0.25rem;
content: '\f0d7';
pointer-events: none;
}
&--has-help-icon {
&:after {
right: $input-padding-x*3;
}
}
}
.gf-form--v-stretch {
......@@ -182,3 +189,24 @@ $gf-form-margin: 0.25rem;
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