From 3e50ee619390711b06cfe1a5185d814363fd8bbe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 29 Mar 2016 11:01:00 +0200 Subject: [PATCH] ux(): dashboard settings form polish, added on hover tooltip for checkbox directive --- public/app/core/components/info_popover.ts | 2 +- public/app/core/components/switch.ts | 18 +++ .../features/dashboard/partials/settings.html | 146 ++++++++++-------- .../features/plugins/partials/ds_edit.html | 18 +-- public/sass/components/_drop.scss | 12 +- public/sass/components/_old_stuff.scss | 4 +- 6 files changed, 118 insertions(+), 82 deletions(-) diff --git a/public/app/core/components/info_popover.ts b/public/app/core/components/info_popover.ts index 98bbde1e683..cc49ecbc4ab 100644 --- a/public/app/core/components/info_popover.ts +++ b/public/app/core/components/info_popover.ts @@ -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'; } diff --git a/public/app/core/components/switch.ts b/public/app/core/components/switch.ts index c2ac6ca1497..e0971c02f9b 100644 --- a/public/app/core/components/switch.ts +++ b/public/app/core/components/switch.ts @@ -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 = ` @@ -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(); + }); + } + } }; } diff --git a/public/app/features/dashboard/partials/settings.html b/public/app/features/dashboard/partials/settings.html index 3ab3a582e49..33b1a247235 100644 --- a/public/app/features/dashboard/partials/settings.html +++ b/public/app/features/dashboard/partials/settings.html @@ -19,10 +19,11 @@
-
+
+
Details
- +
@@ -38,74 +39,89 @@
-
On/Off Toggles
-
-
- - - -
-
-
+
+
Toggles
+
+ + + + + + +
+
+
-
-
Rows settings
+
+
Rows settings
-
-
-
- Title - -
- +
+
+
+ Title + +
+ -
- - - -
-
-
-
+
+ + + +
+
+
+
-
- -
+
+ +
-
- -
+
+ +
-
-
Dashboard info
-
-
- Last updated at: - {{formatDate(dashboardMeta.updated)}} -
-
- Last updated by: - {{dashboardMeta.updatedBy}}  -
-
- Created at: - {{formatDate(dashboardMeta.created)}}  -
-
- Created by: - {{dashboardMeta.createdBy}}  -
-
- Current version: - {{dashboardMeta.version}}  -
-
-
+
+
Dashboard info
+
+
+ Last updated at: + {{formatDate(dashboardMeta.updated)}} +
+
+ Last updated by: + {{dashboardMeta.updatedBy}}  +
+
+ Created at: + {{formatDate(dashboardMeta.created)}}  +
+
+ Created by: + {{dashboardMeta.createdBy}}  +
+
+ Current version: + {{dashboardMeta.version}}  +
+
+
diff --git a/public/app/features/plugins/partials/ds_edit.html b/public/app/features/plugins/partials/ds_edit.html index 6b8ae631a00..9ff82027abf 100644 --- a/public/app/features/plugins/partials/ds_edit.html +++ b/public/app/features/plugins/partials/ds_edit.html @@ -31,26 +31,26 @@
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/sass/components/_drop.scss b/public/sass/components/_drop.scss index 34c53557d45..0af497f46f2 100644 --- a/public/sass/components/_drop.scss +++ b/public/sass/components/_drop.scss @@ -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); diff --git a/public/sass/components/_old_stuff.scss b/public/sass/components/_old_stuff.scss index eae5eb558ce..bb53b657862 100644 --- a/public/sass/components/_old_stuff.scss +++ b/public/sass/components/_old_stuff.scss @@ -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;