From df67d57bcaaf7a417d53bc141420c29756890876 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 1 Mar 2016 21:01:41 +0100 Subject: [PATCH] ux(): minor work on info popover --- .../components/{colorpicker => }/colorpicker.ts | 2 +- .../{popover/popover.ts => info_popover.ts} | 17 +++++++++++------ public/app/core/core.ts | 6 +++--- .../app/features/datasources/partials/edit.html | 4 ++-- .../datasources/partials/http_settings.html | 4 ++-- .../features/templating/partials/editor.html | 17 +++++++++++++++++ public/sass/components/_drop.scss | 6 ++++++ public/sass/mixins/_drop_element.scss | 6 ++++++ 8 files changed, 48 insertions(+), 14 deletions(-) rename public/app/core/components/{colorpicker => }/colorpicker.ts (97%) rename public/app/core/components/{popover/popover.ts => info_popover.ts} (73%) diff --git a/public/app/core/components/colorpicker/colorpicker.ts b/public/app/core/components/colorpicker.ts similarity index 97% rename from public/app/core/components/colorpicker/colorpicker.ts rename to public/app/core/components/colorpicker.ts index 9c879b867ff..7c35ac7e4ac 100644 --- a/public/app/core/components/colorpicker/colorpicker.ts +++ b/public/app/core/components/colorpicker.ts @@ -1,4 +1,4 @@ -/// +/// import config from 'app/core/config'; import _ from 'lodash'; diff --git a/public/app/core/components/popover/popover.ts b/public/app/core/components/info_popover.ts similarity index 73% rename from public/app/core/components/popover/popover.ts rename to public/app/core/components/info_popover.ts index f2a413aca02..9b5b2877d54 100644 --- a/public/app/core/components/popover/popover.ts +++ b/public/app/core/components/info_popover.ts @@ -1,11 +1,11 @@ -/// +/// import _ from 'lodash'; import $ from 'jquery'; -import coreModule from '../../core_module'; +import coreModule from 'app/core/core_module'; import Drop from 'tether-drop'; -export function popoverDirective() { +export function infoPopover() { return { restrict: 'E', transclude: true, @@ -17,6 +17,11 @@ export function popoverDirective() { } var offset = attrs.offset || '0 -10px'; + var position = attrs.position || 'right middle'; + var classes = 'drop-help'; + if (attrs.wide) { + classes += ' drop-wide'; + } transclude(function(clone, newScope) { var content = document.createElement("div"); @@ -27,8 +32,8 @@ export function popoverDirective() { var drop = new Drop({ target: inputElem[0], content: content, - position: 'right middle', - classes: 'drop-help', + position: position, + classes: classes, openOn: 'click', tetherOptions: { offset: offset @@ -52,4 +57,4 @@ export function popoverDirective() { }; } -coreModule.directive('gfPopover', popoverDirective); +coreModule.directive('infoPopover', infoPopover); diff --git a/public/app/core/core.ts b/public/app/core/core.ts index c7c917378c7..32ddee02dc7 100644 --- a/public/app/core/core.ts +++ b/public/app/core/core.ts @@ -24,8 +24,8 @@ import './partials'; import {grafanaAppDirective} from './components/grafana_app'; import {sideMenuDirective} from './components/sidemenu/sidemenu'; import {searchDirective} from './components/search/search'; -import {popoverDirective} from './components/popover/popover'; -import {colorPicker} from './components/colorpicker/colorpicker'; +import {infoPopover} from './components/info_popover'; +import {colorPicker} from './components/colorpicker'; import {navbarDirective} from './components/navbar/navbar'; import {arrayJoin} from './directives/array_join'; import 'app/core/controllers/all'; @@ -42,5 +42,5 @@ export { navbarDirective, searchDirective, colorPicker, - popoverDirective + infoPopover }; diff --git a/public/app/features/datasources/partials/edit.html b/public/app/features/datasources/partials/edit.html index 3200c219796..695043569fd 100644 --- a/public/app/features/datasources/partials/edit.html +++ b/public/app/features/datasources/partials/edit.html @@ -15,11 +15,11 @@
Name - + The name is used when you select the data source in panels. The Default data source is preselected in new panels. - +
diff --git a/public/app/features/datasources/partials/http_settings.html b/public/app/features/datasources/partials/http_settings.html index 44c28eb82dd..65c205714bc 100644 --- a/public/app/features/datasources/partials/http_settings.html +++ b/public/app/features/datasources/partials/http_settings.html @@ -7,7 +7,7 @@ Url - +

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

Your access method is Direct, this means the url @@ -17,7 +17,7 @@ Your access method is currently Proxy, this means the url needs to be accessable from the grafana backend. - +
diff --git a/public/app/features/templating/partials/editor.html b/public/app/features/templating/partials/editor.html index 442ee0c9f2a..f826fbd0a53 100644 --- a/public/app/features/templating/partials/editor.html +++ b/public/app/features/templating/partials/editor.html @@ -144,6 +144,23 @@
Query + + + + + + + + + + + + + + + + +
diff --git a/public/sass/components/_drop.scss b/public/sass/components/_drop.scss index 44e8f8ebcfb..34c53557d45 100644 --- a/public/sass/components/_drop.scss +++ b/public/sass/components/_drop.scss @@ -32,6 +32,12 @@ $easing: cubic-bezier(0, 0, 0.265, 1.00); font-size: $font-size-lg; } +.drop-help { + ul { + padding-left: $spacer; + } +} + @include drop-theme("help", $popover-help-bg, $popover-help-color); @include drop-theme("popover", $popover-bg, $popover-color); diff --git a/public/sass/mixins/_drop_element.scss b/public/sass/mixins/_drop_element.scss index 8f7a26594b8..d08e50e63b8 100644 --- a/public/sass/mixins/_drop_element.scss +++ b/public/sass/mixins/_drop_element.scss @@ -27,6 +27,12 @@ } } + &.drop-wide { + .drop-content { + max-width: 40rem; + } + } + // Centers and middles &.drop-element-attached-bottom.drop-element-attached-center .drop-content {