From 8f9c3c838181a9661f4ba284e191d6c09fdc2c89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Sun, 21 Feb 2016 16:44:11 +0100
Subject: [PATCH] lib(): added teather lib and tested it with the panel menu

---
 public/app/features/panel/panel_menu.js | 35 ++++++++++++-------------
 public/app/system.conf.js               |  1 +
 public/sass/components/_dashboard.scss  |  4 +--
 tasks/options/copy.js                   |  2 ++
 4 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/public/app/features/panel/panel_menu.js b/public/app/features/panel/panel_menu.js
index 1e55e567f35..bdd4a9ce754 100644
--- a/public/app/features/panel/panel_menu.js
+++ b/public/app/features/panel/panel_menu.js
@@ -2,8 +2,9 @@ define([
   'angular',
   'jquery',
   'lodash',
+  'tether',
 ],
-function (angular, $, _) {
+function (angular, $, _, Tether) {
   'use strict';
 
   angular
@@ -79,6 +80,7 @@ function (angular, $, _) {
           var ctrl = $scope.ctrl;
           var timeout = null;
           var $menu = null;
+          var teather;
 
           elem.append($link);
 
@@ -105,6 +107,7 @@ function (angular, $, _) {
             }
 
             if (menuScope) {
+              teather.destroy();
               $menu.unbind();
               $menu.remove();
               menuScope.$destroy();
@@ -153,23 +156,19 @@ function (angular, $, _) {
             $scope.$apply(function() {
               $compile($menu.contents())(menuScope);
 
-              var menuWidth =  $menu[0].offsetWidth;
-              var menuHeight =  $menu[0].offsetHeight;
-
-              var windowWidth = $(window).width();
-              var panelLeftPos = $(elem).offset().left;
-              var panelWidth = $(elem).width();
-
-              var menuLeftPos = (panelWidth / 2) - (menuWidth/2);
-              var stickingOut = panelLeftPos + menuLeftPos + menuWidth - windowWidth;
-              if (stickingOut > 0) {
-                menuLeftPos -= stickingOut + 10;
-              }
-              if (panelLeftPos + menuLeftPos < 0) {
-                menuLeftPos = 0;
-              }
-
-              $menu.css({'left': menuLeftPos, top: -menuHeight});
+              teather = new Tether({
+                element: $menu,
+                target: $panelContainer,
+                attachment: 'bottom center',
+                targetAttachment: 'top center',
+                constraints: [
+                  {
+                    to: 'window',
+                    attachment: 'together',
+                    pin: true
+                  }
+                ]
+              });
             });
 
             dismiss(2200);
diff --git a/public/app/system.conf.js b/public/app/system.conf.js
index 63bbb789f66..640ae843820 100644
--- a/public/app/system.conf.js
+++ b/public/app/system.conf.js
@@ -2,6 +2,7 @@ System.config({
   defaultJSExtenions: true,
   baseURL: 'public',
   paths: {
+    'tether': 'vendor/npm/tether/dist/js/tether.js',
     'moment': 'vendor/moment.js',
     "jquery": "vendor/jquery/dist/jquery.js",
     'lodash-src': 'vendor/lodash.js',
diff --git a/public/sass/components/_dashboard.scss b/public/sass/components/_dashboard.scss
index d5c668a39ee..1ca0c3b9719 100644
--- a/public/sass/components/_dashboard.scss
+++ b/public/sass/components/_dashboard.scss
@@ -233,12 +233,12 @@ div.flot-text {
 }
 
 .panel-highlight  {
-  @include box-shadow("inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(82,168,236, 0.8)");
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 5px rgba(82,168,236,10.8)
 }
 
 .on-drag-hover {
   .panel-container {
-    @include box-shadow("inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(82,168,236, 0.8)");
+    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 5px rgba(82,168,236,10.8)
   }
 }
 
diff --git a/tasks/options/copy.js b/tasks/options/copy.js
index aa5c8afac31..d7d9439efed 100644
--- a/tasks/options/copy.js
+++ b/tasks/options/copy.js
@@ -31,6 +31,8 @@ module.exports = function(config) {
         'reflect-metadata/*.ts',
         'reflect-metadata/*.d.ts',
         'rxjs/**/*',
+        'tether/**/*',
+        'tether-drop/**/*',
       ],
       dest: '<%= srcDir %>/vendor/npm'
     }