diff --git a/src/app/directives/grafanaPanel.js b/src/app/directives/grafanaPanel.js index 22c5f539664..b4365bf4174 100644 --- a/src/app/directives/grafanaPanel.js +++ b/src/app/directives/grafanaPanel.js @@ -3,55 +3,113 @@ define([ 'jquery', 'lodash', ], -function (angular, $) { +function (angular, $, _) { 'use strict'; angular .module('grafana.directives') .directive('panelTitle', function($compile) { - var linkTemplate = '{{panel.title || interpolateTemplateVars}}'; - var menuTemplate = ''; + var linkTemplate = '{{panel.title || interpolateTemplateVars}}'; + var moveAttributes = ' data-drag=true data-jqyoui-options="kbnJqUiDraggableOptions"'+ + ' jqyoui-draggable="'+ + '{'+ + 'animate:false,'+ + 'mutate:false,'+ + 'index:{{$index}},'+ + 'onStart:\'panelMoveStart\','+ + 'onStop:\'panelMoveStop\''+ + '}" ng-model="panel" '; + + function createMenuTemplate($scope) { + var template = '
'; + return template; + } return { restrict: 'A', link: function($scope, elem) { var $link = $(linkTemplate); + var $panelContainer = elem.parents(".panel-container"); + var menuTemplate = createMenuTemplate($scope); + var menuWidth = 277; + var menuScope = null; + var timeout = null; + elem.append($link); - $link.click(function(e) { - var menuWidth = 452; + var dismiss = function() { + $('.panel-menu').remove(); + + if (menuScope) { + menuScope.$destroy(); + menuScope = null; + $panelContainer.removeClass('panel-highlight'); + } + if (timeout) { + clearTimeout(timeout); + timeout = null; + } + return; + }; + + $link.click(function() { + if (menuScope) { + dismiss(); + return; + } + + dismiss(); + var windowWidth = $(window).width(); - var maxPos = windowWidth - menuWidth - 20; - var leftPos = e.screenX - (menuWidth / 2); - leftPos = Math.min(leftPos, maxPos); + 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; + } + var $menu = $(menuTemplate); + $menu.css('left', menuLeftPos); + + menuScope = $scope.$new(); + + elem.append($menu); $scope.$apply(function() { - $scope.togglePanelMenu(leftPos); + $compile($menu.contents())(menuScope); }); - elem.parents(".panel-container").toggleClass('panel-highlight'); - console.log(e); -// var $menu = $(menuTemplate); -// var menuScope = $scope.$new(); -// -// elem.append($menu); -// $compile($menu.contents())(menuScope); - // setTimeout(function() { - // $menu.remove(); - // menuScope.$destroy(); - // $link.show(); - // }, 8000); - //$link.hide(); + $(".panel-container").removeClass('panel-highlight'); + $panelContainer.toggleClass('panel-highlight'); + + //timeout = setTimeout(dismiss, 8000); }); $compile(elem.contents())($scope); @@ -80,7 +138,7 @@ function (angular, $) { '' + '' + - '' + + '' + ''+ ''; diff --git a/src/app/partials/dashboard.html b/src/app/partials/dashboard.html index 2c2ed566c66..e05fd2ae8e9 100644 --- a/src/app/partials/dashboard.html +++ b/src/app/partials/dashboard.html @@ -74,18 +74,17 @@ - - -