ux(color popover): refactored color popover to use drop lib

pkg/api/index.go

@@ -59,9 +59,6 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
 		},
 	})
 
-	// data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{Text: "Playlists", Icon: "fa fa-fw fa-list", Url: setting.AppSubUrl + "/playlists"})
-	// data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{Text: "Snapshots", Icon: "fa-fw icon-gf icon-gf-snapshot", Url: setting.AppSubUrl + "/dashboard/snapshots"})
-
 	if c.OrgRole == m.ROLE_ADMIN {
 		data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{
 			Text: "Data Sources",

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

@@ -0,0 +1,81 @@
+///<reference path="../../../headers/common.d.ts" />
+
+import config from 'app/core/config';
+import _ from 'lodash';
+import $ from 'jquery';
+import coreModule from 'app/core/core_module';
+
+var template = `
+<div class="graph-legend-popover">
+  <a class="drop-popopver-close" ng-click="ctrl.close();" href="" ng-hide="ctrl.autoClose">
+    <i class="fa fa-times-circle"></i>
+  </a>
+
+  <div ng-show="ctrl.series" class="p-b-1">
+    <label>Y Axis:</label>
+    <button ng-click="ctrl.toggleAxis(yaxis);" class="btn btn-small"
+            ng-class="{'btn-success': ctrl.series.yaxis === 1,
+                       'btn-inverse': ctrl.series.yaxis === 2}">
+      Left
+    </button>
+    <button ng-click="ctrl.toggleAxis(yaxis);"
+      class="btn btn-small"
+      ng-class="{'btn-success': ctrl.series.yaxis === 2,
+                 'btn-inverse': ctrl.series.yaxis === 1}">
+      Right
+    </button>
+  </div>
+
+  <p class="m-b-0">
+   <i ng-repeat="color in ctrl.colors" class="pointer fa fa-circle"
+    ng-style="{color:color}"
+    ng-click="ctrl.colorSelected(color);">&nbsp;</i>
+  </p>
+
+</div>
+`;
+
+export class ColorPickerCtrl {
+  colors: any;
+  autoClose: boolean;
+  series: any;
+  showAxisControls: boolean;
+
+  /** @ngInject */
+  constructor(private $scope, private $rootScope) {
+    this.colors = $rootScope.colors;
+    this.autoClose = $scope.autoClose;
+    this.series = $scope.series;
+  }
+
+  toggleAxis(yaxis) {
+    this.$scope.toggleAxis();
+
+    if (!this.$scope.autoClose) {
+      this.$scope.dismiss();
+    }
+  }
+
+  colorSelected(color) {
+    this.$scope.colorSelected(color);
+    if (!this.$scope.autoClose) {
+      this.$scope.dismiss();
+    }
+  }
+
+  close() {
+    this.$scope.dismiss();
+  }
+}
+
+export function colorPicker() {
+  return {
+    restrict: 'E',
+    controller: ColorPickerCtrl,
+    bindToController: true,
+    controllerAs: 'ctrl',
+    template: template,
+  };
+}
+
+coreModule.directive('gfColorPicker', colorPicker);

public/app/core/core.ts

@@ -25,6 +25,7 @@ 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 {navbarDirective} from './components/navbar/navbar';
 import {arrayJoin} from './directives/array_join';
 import 'app/core/controllers/all';
@@ -40,5 +41,6 @@ export {
   sideMenuDirective,
   navbarDirective,
   searchDirective,
+  colorPicker,
   popoverDirective
 };

public/app/core/services/popover_srv.ts

@@ -7,40 +7,48 @@ import coreModule from 'app/core/core_module';
 import Drop from 'tether-drop';
 
 /** @ngInject **/
-function popoverSrv($templateCache, $timeout, $q, $http, $compile) {
-
-  this.getTemplate = function(url) {
-    return $q.when($templateCache.get(url) || $http.get(url, {cache: true}));
-  };
+function popoverSrv($compile, $rootScope) {
 
   this.show = function(options) {
+    var popoverScope = _.extend($rootScope.$new(true), options.model);
+    var drop;
 
-    options.scope.dismiss = function() {
-      var popover = options.element.data('popover');
-      if (popover) {
-        popover.destroy();
-      }
-      options.scope.$destroy();
+    function destroyDrop() {
+      setTimeout(function() {
+        if (drop.tether) {
+          drop.destroy();
+        }
+      });
+    }
+
+    popoverScope.dismiss = function() {
+      popoverScope.$destroy();
+      destroyDrop();
     };
 
-    this.getTemplate(options.templateUrl).then(function(result) {
-      $timeout(function() {
-        var template = _.isString(result) ? result : result.data;
+    var contentElement = document.createElement('div');
+    contentElement.innerHTML = options.template;
 
-        var drop = new Drop({
-          target: options.element[0],
-          content: template,
-          position: 'bottom top',
-          classes: 'drop-help',
-          openOn: 'click',
-          tetherOptions: {
-          }
-        });
+    $compile(contentElement)(popoverScope);
 
-        drop.open();
-        //$compile(popover.$tip)(popover.scope);
-      }, 1);
+    drop = new Drop({
+      target: options.element,
+      content: contentElement,
+      position: options.position,
+      classes: 'drop-popover',
+      openOn: options.openOn || 'hover',
+      hoverCloseDelay: 200,
+      tetherOptions: {
+        constraints: [{to: 'window', pin: true, attachment: "both"}]
+      }
     });
+
+    drop.on('close', () => {
+      popoverScope.dismiss({fromDropClose: true});
+      destroyDrop();
+    });
+
+    drop.open();
   };
 }
 

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

@@ -15,11 +15,10 @@
 			<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.
+					panels.
 				</gf-popover>
 
 				<editor-checkbox text="Default" model="current.isDefault"></editor-checkbox>

public/app/plugins/panel/graph/legend.js

@@ -10,7 +10,7 @@ function (angular, _, $) {
 
   var module = angular.module('grafana.directives');
 
-  module.directive('graphLegend', function(popoverSrv) {
+  module.directive('graphLegend', function(popoverSrv, $timeout) {
 
     return {
       link: function(scope, elem) {
@@ -41,13 +41,24 @@ function (angular, _, $) {
 
           var el = $(e.currentTarget).find('.fa-minus');
           var index = getSeriesIndexForElement(el);
-          var seriesInfo = seriesList[index];
-          var popoverScope = scope.$new();
-          popoverScope.series = seriesInfo;
-          popoverSrv.show({
-            element: el,
-            templateUrl:  'public/app/plugins/panel/graph/legend.popover.html',
-            scope: popoverScope
+          var series = seriesList[index];
+
+          $timeout(function() {
+            popoverSrv.show({
+              element: el[0],
+              position: 'bottom center',
+              template: '<gf-color-picker></gf-color-picker>',
+              model: {
+                autoClose: true,
+                series: series,
+                toggleAxis: function() {
+                  ctrl.toggleAxis(series);
+                },
+                colorSelected: function(color) {
+                  ctrl.changeSeriesColor(series, color);
+                }
+              },
+            });
           });
         }
 

public/app/plugins/panel/graph/legend.popover.html

@@ -1,6 +1,4 @@
 <div class="graph-legend-popover">
-	<a class="close" ng-click="dismiss();" href="">×</a>
-
 	<div class="editor-row" style="padding-bottom: 0;">
 		<label>Axis:</label>
 		<button ng-click="ctrl.toggleYAxis(series);dismiss();"
@@ -19,7 +17,7 @@
 		<i ng-repeat="color in ctrl.colors" class="pointer"
 			ng-class="{'fa fa-circle-o': color === series.color,'fa fa-circle': color !== series.color}"
 			ng-style="{color:color}"
-			ng-click="ctrl.changeSeriesColor(series, color);dismiss();">&nbsp;</i>
+			ng-click="ctrl.changeSeriesColor(series, color);">&nbsp;</i>
 	</div>
 </div>
 

public/app/plugins/panel/graph/module.ts

@@ -261,13 +261,13 @@ class GraphCtrl extends MetricsPanelCtrl {
     }
   }
 
-  toggleYAxis(info) {
-    var override = _.findWhere(this.panel.seriesOverrides, { alias: info.alias });
+  toggleAxis(info) {
+    var override = _.findWhere(this.panel.seriesOverrides, {alias: info.alias});
     if (!override) {
       override = { alias: info.alias };
       this.panel.seriesOverrides.push(override);
     }
-    override.yaxis = info.yaxis === 2 ? 1 : 2;
+    info.yaxis = override.yaxis = info.yaxis === 2 ? 1 : 2;
     this.render();
   };
 

public/app/plugins/panel/graph/seriesOverridesCtrl.js

@@ -53,22 +53,21 @@ define([
     };
 
     $scope.openColorSelector = function() {
-      var popoverScope = $scope.$new();
-      popoverScope.colorSelected = $scope.colorSelected;
-      popoverScope.colors = $scope.ctrl.colors;
-
       popoverSrv.show({
-        element: $element.find(".dropdown"),
-        placement: 'top',
-        templateUrl:  'public/app/partials/colorpicker.html',
-        scope: popoverScope
+        element: $element.find(".dropdown")[0],
+        position: 'top center',
+        openOn: 'click',
+        template: '<gf-color-picker></gf-color-picker>',
+        model: {
+          colorSelected: $scope.colorSelected,
+        }
       });
     };
 
     $scope.removeOverride = function(option) {
       delete $scope.override[option.propertyName];
       $scope.updateCurrentOverrides();
-      $scope.ctrl.render();
+      $scope.ctrl.refresh();
     };
 
     $scope.getSeriesNames = function() {

public/sass/_variables.dark.scss

@@ -247,6 +247,9 @@ $popoverArrowOuterWidth:  $popoverArrowWidth + 1;
 $popoverArrowOuterColor:  rgba(0,0,0,.25);
 
 // popover
+$popover-bg:         $dark-4;
+$popover-color:      $text-color;
+
 $popover-help-bg:         $btn-secondary-bg;
 $popover-help-color:      $text-color;
 

public/sass/_variables.light.scss

@@ -274,6 +274,9 @@ $popoverArrowOuterWidth:  $popoverArrowWidth + 1;
 $popoverArrowOuterColor:  rgba(0,0,0,.25);
 
 // popover
+$popover-bg:         $dark-4;
+$popover-color:      $text-color;
+
 $popover-help-bg:         $blue-dark;
 $popover-help-color:      $gray-6;
 

public/sass/components/_drop.scss

@@ -25,6 +25,16 @@ $easing: cubic-bezier(0, 0, 0.265, 1.00);
   box-sizing: border-box;
 }
 
-@include drop-theme("help", $popover-help-bg, $popover-help-color);
-@include drop-animation-scale("drop", "help", $attachmentOffset: $attachmentOffset, $easing: $easing);
+.drop-popopver-close {
+  position: absolute;
+  top: -5px;
+  right: 0;
+  font-size: $font-size-lg;
+}
+
+@include drop-theme("help", $popover-help-bg, $popover-help-color);
+@include drop-theme("popover", $popover-bg, $popover-color);
+
+@include drop-animation-scale("drop", "help", $attachmentOffset: $attachmentOffset, $easing: $easing);
+@include drop-animation-scale("drop", "popover", $attachmentOffset: $attachmentOffset, $easing: $easing);
 

public/sass/components/_panel_graph.scss

@@ -22,7 +22,7 @@
 }
 
 .graph-legend {
-  margin: 0 20px;
+  margin: 0 $spacer;
   text-align: center;
 
   .popover-content {
@@ -181,7 +181,6 @@
 
 .graph-legend-popover {
   width: 200px;
-  min-height: 100px;
   label {
     display: inline-block;
   }

public/sass/mixins/_drop_element.scss

@@ -10,7 +10,7 @@
       font-family: inherit;
       background: $theme-bg;
       color: $theme-color;
-      padding: 1em;
+      padding: $spacer;
       font-size: $font-size-sm;
       max-width: 20rem;