diff --git a/src/app/directives/grafanaPanel.js b/src/app/directives/grafanaPanel.js index 5f56fd67b35..ec6048609ea 100644 --- a/src/app/directives/grafanaPanel.js +++ b/src/app/directives/grafanaPanel.js @@ -6,6 +6,49 @@ define([ function (angular, $) { 'use strict'; + angular + .module('grafana.directives') + .directive('panelTitle', function($compile) { + var linkTemplate = '{{panel.title || interpolateTemplateVars}}'; + var menuTemplate = '
' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + ' ' + + '' + + ' ' + + '
'; + + return { + restrict: 'A', + link: function($scope, elem) { + var $link = $(linkTemplate); + elem.append($link); + + $link.click(function() { + 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(); + }); + + $compile(elem.contents())($scope); + } + }; + + }); + angular .module('grafana.directives') .directive('grafanaPanel', function($compile, $parse) { @@ -15,37 +58,19 @@ function (angular, $) { var panelHeader = '
'+ - '
' + - '
' + - '' + - '' + - '' + - '' + + '' + + '' + + '' + '' + + '' + - '' + - '' + - '' + + '' + + '' + + '' + - '' + - '' + - '{{panel.title | interpolateTemplateVars}}' + - '' + - ''+ - - '
'+ - '
\n'+ + '
' + + '
'+ ''; return { diff --git a/src/css/less/panel.less b/src/css/less/panel.less index 19e5a077872..85f65cd5f16 100644 --- a/src/css/less/panel.less +++ b/src/css/less/panel.less @@ -28,23 +28,10 @@ z-index: 800; } -.panel div.panel-extra div.panel-extra-container { - margin-right: -10px; - margin-top: 3px; +.panel-header { text-align: center; - ul { - text-align: left; - } } -.panel div.panel-extra { - font-size: 0.9em; - margin-bottom: 0px; -} - -.panel div.panel-extra .extra { - float:right !important; -} .panel-error { color: @white; @@ -69,3 +56,19 @@ bottom: 0; } +.panel-menu { + display: inline-block; + vertical-align: top; + a { + font-size: 1.2em; + float: left; + padding: 2px 10px; + border-top: 1px solid black; + border-right: 1px solid black; + border-bottom: 1px solid black; + background: @grayDark; + } + a:first-child { + border-left: 1px solid black; + } +}