From e307ada3744beddfac253f163110bb6a4c71db9b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 15 Apr 2016 19:56:39 -0400 Subject: [PATCH] ux(): tooltip improvement --- .../app/core/components/dashboard_selector.ts | 3 + public/app/core/components/info_popover.ts | 23 +++++--- public/app/core/components/switch.ts | 23 ++------ .../features/dashboard/partials/settings.html | 11 ++-- public/app/features/org/prefs_control.ts | 7 +-- .../features/plugins/partials/ds_edit.html | 12 ++-- .../plugins/partials/ds_http_settings.html | 55 ++++++++++--------- .../cloudwatch/partials/config.html | 29 ++++++---- public/sass/components/_gf-form.scss | 28 ++++++++++ 9 files changed, 116 insertions(+), 75 deletions(-) diff --git a/public/app/core/components/dashboard_selector.ts b/public/app/core/components/dashboard_selector.ts index 913a43911fa..4209ff3f8dc 100644 --- a/public/app/core/components/dashboard_selector.ts +++ b/public/app/core/components/dashboard_selector.ts @@ -7,6 +7,9 @@ import coreModule from 'app/core/core_module'; var template = ` + + Not finding dashboard you want? Star it first, then it should appear in this select box. + `; export class DashboardSelectorCtrl { diff --git a/public/app/core/components/info_popover.ts b/public/app/core/components/info_popover.ts index cc49ecbc4ab..8bc28b8a57d 100644 --- a/public/app/core/components/info_popover.ts +++ b/public/app/core/components/info_popover.ts @@ -8,21 +8,30 @@ import Drop from 'tether-drop'; export function infoPopover() { return { restrict: 'E', + template: '', 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 } diff --git a/public/app/core/components/switch.ts b/public/app/core/components/switch.ts index e2ba60d92e8..2a64ec487f7 100644 --- a/public/app/core/components/switch.ts +++ b/public/app/core/components/switch.ts @@ -7,7 +7,12 @@ import coreModule from 'app/core/core_module'; import Drop from 'tether-drop'; var template = ` - +
@@ -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(); - }); - } - } }; } diff --git a/public/app/features/dashboard/partials/settings.html b/public/app/features/dashboard/partials/settings.html index 2a2287613ae..8d071d90495 100644 --- a/public/app/features/dashboard/partials/settings.html +++ b/public/app/features/dashboard/partials/settings.html @@ -26,7 +26,10 @@
- +
@@ -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"> + label-class="width-11"> + label-class="width-11"> diff --git a/public/app/features/org/prefs_control.ts b/public/app/features/org/prefs_control.ts index 53704d5e390..fab51ad02b8 100644 --- a/public/app/features/org/prefs_control.ts +++ b/public/app/features/org/prefs_control.ts @@ -49,7 +49,7 @@ export class PrefsControlCtrl { } var template = ` -
+

Preferences

@@ -61,9 +61,8 @@ var template = `
Home Dashboard - +
diff --git a/public/app/features/plugins/partials/ds_edit.html b/public/app/features/plugins/partials/ds_edit.html index a43a9db4345..6ad0c40fa68 100644 --- a/public/app/features/plugins/partials/ds_edit.html +++ b/public/app/features/plugins/partials/ds_edit.html @@ -31,18 +31,18 @@
Name + + The name is used when you select the data source in panels. + The Default data source is preselected in new + panels. +
- - The name is used when you select the data source in panels. - The Default data source is preselected in new - panels. -
Type -
+
diff --git a/public/app/features/plugins/partials/ds_http_settings.html b/public/app/features/plugins/partials/ds_http_settings.html index 404918f90d4..08d2af5744a 100644 --- a/public/app/features/plugins/partials/ds_http_settings.html +++ b/public/app/features/plugins/partials/ds_http_settings.html @@ -3,29 +3,34 @@

Http settings

-
- Url - - - -

Specify a complete HTTP url (for example http://your_server:8080)

- - Your access method is Direct, this means the url - needs to be accessable from the browser. - - - Your access method is currently Proxy, this means the url - needs to be accessable from the grafana backend. - - +
+
+ Url + + +

Specify a complete HTTP url (for example http://your_server:8080)

+ + Your access method is Direct, this means the url + needs to be accessable from the browser. + + + Your access method is currently Proxy, this means the url + needs to be accessable from the grafana backend. + + +
-
- - Access Direct = url is used directly from browser, Proxy = Grafana backend will proxy the request - -
- +
+
+ Access +
+ + + Direct = url is used directly from browser
+ Proxy = Grafana backend will proxy the request + +
@@ -34,12 +39,12 @@
+ label="Basic Auth" + checked="current.basicAuth" switch-class="max-width-6"> + label="With Credentials" + checked="current.withCredentials" switch-class="max-width-6">
diff --git a/public/app/plugins/datasource/cloudwatch/partials/config.html b/public/app/plugins/datasource/cloudwatch/partials/config.html index 5f999c58a42..ede6baaa525 100644 --- a/public/app/plugins/datasource/cloudwatch/partials/config.html +++ b/public/app/plugins/datasource/cloudwatch/partials/config.html @@ -1,22 +1,27 @@

CloudWatch details

-
+
- - + + + + Credentials profile name, as specified in ~/.aws/credentials, leave blank for default +
- -
- + +
+ + + Specify the region, such as for US West (Oregon) use ` us-west-2 ` as the region. +
- - + + + + Namespaces of Custom Metrics +
diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index 12e1fd2f32f..66dab450ee1 100644 --- a/public/sass/components/_gf-form.scss +++ b/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; +} +