lib(): added teather lib and tested it with the panel menu

public/app/features/panel/panel_menu.js

@@ -2,8 +2,9 @@ define([
   'angular',
   'angular',
   'jquery',
   'jquery',
   'lodash',
   'lodash',
+  'tether',
 ],
 ],
-function (angular, $, _) {
+function (angular, $, _, Tether) {
   'use strict';
   'use strict';
 
 
   angular
   angular
@@ -79,6 +80,7 @@ function (angular, $, _) {
           var ctrl = $scope.ctrl;
           var ctrl = $scope.ctrl;
           var timeout = null;
           var timeout = null;
           var $menu = null;
           var $menu = null;
+          var teather;
 
 
           elem.append($link);
           elem.append($link);
 
 
@@ -105,6 +107,7 @@ function (angular, $, _) {
             }
             }
 
 
             if (menuScope) {
             if (menuScope) {
+              teather.destroy();
               $menu.unbind();
               $menu.unbind();
               $menu.remove();
               $menu.remove();
               menuScope.$destroy();
               menuScope.$destroy();
@@ -153,23 +156,19 @@ function (angular, $, _) {
             $scope.$apply(function() {
             $scope.$apply(function() {
               $compile($menu.contents())(menuScope);
               $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);
             dismiss(2200);

public/app/system.conf.js

@@ -2,6 +2,7 @@ System.config({
   defaultJSExtenions: true,
   defaultJSExtenions: true,
   baseURL: 'public',
   baseURL: 'public',
   paths: {
   paths: {
+    'tether': 'vendor/npm/tether/dist/js/tether.js',
     'moment': 'vendor/moment.js',
     'moment': 'vendor/moment.js',
     "jquery": "vendor/jquery/dist/jquery.js",
     "jquery": "vendor/jquery/dist/jquery.js",
     'lodash-src': 'vendor/lodash.js',
     'lodash-src': 'vendor/lodash.js',

public/sass/components/_dashboard.scss

@@ -233,12 +233,12 @@ div.flot-text {
 }
 }
 
 
 .panel-highlight  {
 .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 {
 .on-drag-hover {
   .panel-container {
   .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)
   }
   }
 }
 }
 
 

tasks/options/copy.js

@@ -31,6 +31,8 @@ module.exports = function(config) {
         'reflect-metadata/*.ts',
         'reflect-metadata/*.ts',
         'reflect-metadata/*.d.ts',
         'reflect-metadata/*.d.ts',
         'rxjs/**/*',
         'rxjs/**/*',
+        'tether/**/*',
+        'tether-drop/**/*',
       ],
       ],
       dest: '<%= srcDir %>/vendor/npm'
       dest: '<%= srcDir %>/vendor/npm'
     }
     }