IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-02-21 16:44:11 +01:00
parent 363f36dfae
commit 8f9c3c8381
4 changed files with 22 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
public/app/features/panel/panel_menu.js
View File

@ -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; teather = new Tether({
var menuHeight = $menu[0].offsetHeight; element: $menu,
target: $panelContainer,
var windowWidth = $(window).width(); attachment: 'bottom center',
var panelLeftPos = $(elem).offset().left; targetAttachment: 'top center',
var panelWidth = $(elem).width(); constraints: [
{
var menuLeftPos = (panelWidth / 2) - (menuWidth/2); to: 'window',
var stickingOut = panelLeftPos + menuLeftPos + menuWidth - windowWidth; attachment: 'together',
if (stickingOut > 0) { pin: true
menuLeftPos -= stickingOut + 10; }
} ]
if (panelLeftPos + menuLeftPos < 0) { });
menuLeftPos = 0;
}
$menu.css({'left': menuLeftPos, top: -menuHeight});
}); });
dismiss(2200); dismiss(2200);

1
public/app/system.conf.js
View File

@ -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',

4
public/sass/components/_dashboard.scss
View File

@ -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)
} }
} }

2
tasks/options/copy.js
View File

@ -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'
} }