ux(): minor work on info popover

public/app/core/components/colorpicker/colorpicker.ts → public/app/core/components/colorpicker.ts

-///<reference path="../../../headers/common.d.ts" />
+///<reference path="../../headers/common.d.ts" />
 
 import config from 'app/core/config';
 import _ from 'lodash';

public/app/core/components/popover/popover.ts → public/app/core/components/info_popover.ts

-///<reference path="../../../headers/common.d.ts" />
+///<reference path="../../headers/common.d.ts" />
 
 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);

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
 };

public/app/features/datasources/partials/edit.html

@@ -15,11 +15,11 @@
 			<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="current.name" placeholder="My data source name" required>
-				<gf-popover offset="0px -95px">
+				<info-popover offset="0px -95px">
 					The name is used when you select the data source in panels.
 					The <code>Default</code> data source is preselected in new
 					panels.
-				</gf-popover>
+				</info-popover>
 
 				<editor-checkbox text="Default" model="current.isDefault"></editor-checkbox>
 			</div>

public/app/features/datasources/partials/http_settings.html

@@ -7,7 +7,7 @@
 		<span class="gf-form-label width-7">Url</span>
 		<input class="gf-form-input max-width-21" type="text" ng-model='current.url' placeholder="http://my.server.com:8080" ng-pattern="/^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/" required></input>
 
-		<gf-popover>
+		<info-popover>
 			<p>Specify a complete HTTP url (http://your_server:8080)</p>
 			<span ng-show="current.access === 'direct'">
 				Your access method is <code>Direct</code>, this means the url
@@ -17,7 +17,7 @@
 				Your access method is currently <code>Proxy</code>, this means the url
 				needs to be accessable from the grafana backend.
 			</span>
-		</gf-popover>
+		</info-popover>
 	</div>
 
 	<div class="gf-form">

public/app/features/templating/partials/editor.html

@@ -144,6 +144,23 @@
 				<div class="gf-form">
 					<span class="gf-form-label width-7">Query</span>
 					<input type="text" class="gf-form-input" ng-model='current.query' placeholder="metric name or tags query" ng-model-onblur ng-change="runQuery()"></input>
+					<!-- <info&#45;popover position="bottom center" wide="true"> -->
+					<!-- 	Example queries: -->
+					<!-- 	<ul> -->
+					<!-- 		<li> -->
+					<!-- 			<code>SHOW TAG VALUES WITH KEY = "hostname"</code> -->
+					<!-- 		</li> -->
+					<!-- 		<li> -->
+					<!-- 			<code>SHOW TAG VALUES WITH KEY = "hostname"</code> -->
+					<!-- 		</li> -->
+					<!-- 		<li> -->
+					<!-- 			<code>SHOW TAG VALUES WITH KEY = "hostname"</code> -->
+					<!-- 		</li> -->
+					<!-- 		<li> -->
+					<!-- 			<a href="http://docs.grafana.org" target="_blank">Templating docs</a> -->
+					<!-- 		</li> -->
+					<!-- 	</ul> -->
+					<!-- </info&#45;popover> -->
 				</div>
 				<div class="gf-form">
 					<span class="gf-form-label width-7">

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);
 

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 {