ux(): help popover

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

@@ -16,6 +16,7 @@ export function popoverDirective() {
         return;
       }
 
+      var offset = attrs.offset || '0 -10px';
 
       transclude(function(clone, newScope) {
         var content = document.createElement("div");
@@ -27,10 +28,10 @@ export function popoverDirective() {
           target: inputElem[0],
           content: content,
           position: 'right middle',
-          classes: 'drop-popover',
+          classes: 'drop-help',
           openOn: 'click',
           tetherOptions: {
-            offset: "0 -10px"
+            offset: offset
           }
         });
 

public/app/core/components/sidemenu/sidemenu.html

 <ul class="sidemenu">
 
 	<li class="sidemenu-org-section" ng-if="ctrl.isSignedIn" class="dropdown">
-		<div class="sidemenu-org">
+		<a class="sidemenu-org" href="profile">
 			<div class="sidemenu-org-avatar">
 				<img ng-if="ctrl.user.gravatarUrl" ng-src="{{ctrl.user.gravatarUrl}}">
 				<span class="sidemenu-org-avatar--missing">
@@ -12,7 +12,7 @@
 				<span class="sidemenu-org-user sidemenu-item-text">{{ctrl.user.name}}</span>
 				<span class="sidemenu-org-name sidemenu-item-text">{{ctrl.user.orgName}}</span>
 			</div>
-		</div>
+		</a>
 		<i class="fa fa-caret-right"></i>
 		<ul class="dropdown-menu" role="menu">
 			<li ng-repeat="menuItem in ctrl.orgMenu" ng-class="menuItem.cssClass">

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

@@ -15,6 +15,13 @@
 			<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 -85px">
+					The name is used when you select the data source in panels.
+					The <code>Default</code> data source is preselected in new
+					new panels.
+				</gf-popover>
+
 				<editor-checkbox text="Default" model="current.isDefault"></editor-checkbox>
 			</div>
 
@@ -24,6 +31,7 @@
 					<select class="gf-form-input gf-size-auto" ng-model="current.type" ng-options="k as v.name for (k, v) in types" ng-change="typeChanged()"></select>
 				</div>
 			</div>
+
 		</div>
 
 		<rebuild-on-change property="datasourceMeta.id">

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

@@ -9,14 +9,14 @@
 
 		<gf-popover>
 			<p>Specify a complete HTTP url (http://your_server:8080)</p>
-			<p ng-show="current.access === 'direct'">
-				When access method is <code>Direct</code> then this url needs to be
-				accessable from your browser.
-			</p>
-			<p ng-show="current.access === 'proxy'">
-				Your access method is currently <code>Proxy</code> then the url needs to
-				be accessable from the grafana backend.
-			</p>
+			<span ng-show="current.access === 'direct'">
+				Your access method is <code>Direct</code>, this means the url
+				needs to be accessable from the browser.
+			</span>
+			<span ng-show="current.access === 'proxy'">
+				Your access method is currently <code>Proxy</code>, this means the url
+				needs to be accessable from the grafana backend.
+			</span>
 		</gf-popover>
 	</div>
 

public/sass/_grafana.scss

@@ -7,7 +7,7 @@
 @import "mixins/grid-framework";
 @import "mixins/hover";
 @import "mixins/forms";
-
+@import "mixins/drop_element";
 
 // BASE
 @import "base/normalize";
@@ -64,7 +64,7 @@
 @import "components/footer";
 @import "components/infobox";
 @import "components/shortcuts";
-@import "components/tether_drop";
+@import "components/drop";
 @import "components/query_editor";
 
 // PAGES
@@ -76,5 +76,5 @@
 @import "pages/signup";
 @import "pages/styleguide";
 
-@import "old_responsive";
 
+@import "old_responsive";

public/sass/_variables.dark.scss

@@ -246,5 +246,9 @@ $popoverTitleBackground:  $popoverBackground;
 $popoverArrowOuterWidth:  $popoverArrowWidth + 1;
 $popoverArrowOuterColor:  rgba(0,0,0,.25);
 
+// popover
+$popover-help-bg:         $btn-secondary-bg;
+$popover-help-color:      $text-color;
+
 // images
 $checkboxImageUrl: '../img/checkbox.png';

public/sass/_variables.light.scss

@@ -174,7 +174,7 @@ $dropdownBorder:                $tight-form-border;
 $dropdownDividerTop:            $gray-6;
 $dropdownDividerBottom:         $white;
 $dropdownDivider:               $dropdownDividerTop;
-$dropdownTitle:                 $dark-5;
+$dropdownTitle:                 $gray-3;
 
 $dropdownLinkColor:             $dark-3;
 $dropdownLinkColorHover:        $link-color;
@@ -273,5 +273,9 @@ $popoverTitleBackground:  $white;
 $popoverArrowOuterWidth:  $popoverArrowWidth + 1;
 $popoverArrowOuterColor:  rgba(0,0,0,.25);
 
+// popover
+$popover-help-bg:         $blue-dark;
+$popover-help-color:      $gray-6;
+
 // images
 $checkboxImageUrl: '../img/checkbox_white.png';

public/sass/components/_drop.scss

+$popover-arrow-size: 1rem;
+$color: inherit;
+$backgroundColor: $btn-secondary-bg;
+$color: $text-color;
+$useDropShadow: false;
+$attachmentOffset: $popover-arrow-size;
+$easing: cubic-bezier(0, 0, 0.265, 1.55);
+
+.drop-element {
+  position: absolute;
+  display: none;
+
+  &.drop-open {
+    display: block;
+  }
+
+  &.drop-open.drop-popover.drop-out-of-bounds,
+  &.drop-open-transitionend.drop-popover.drop-out-of-bounds {
+    display: none;
+  }
+}
+
+.drop-element, .drop-element * {
+  box-sizing: border-box;
+}
+
+@include drop-theme("help", $popover-help-bg, $popover-help-color);
+@include drop-animation-scale("drop", "help", $attachmentOffset: $attachmentOffset, $easing: $easing);