public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

POC of panel edit menu

Browse Source
This commit is contained in:
Torkel Ödegaard
2014-09-06 14:05:07 +02:00
parent 6c71754e51
commit a6fa01f89b
2 changed files with 70 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/directives/grafanaPanel.js
+53 -28
View File
@@ -6,6 +6,49 @@ define([
function (angular, $) {
'use strict';
angular
.module('grafana.directives')
.directive('panelTitle', function($compile) {
var linkTemplate = '<a class="pointer panel-title">{{panel.title || interpolateTemplateVars}}</div>';
var menuTemplate = '<div class="panel-menu">' +
'<a class="pointer"><i class="icon-th-list"></i></a> ' +
'<a class="pointer"><i class="icon-eye-open"></i></a> ' +
'<a class="pointer"><i class="icon-cog"></i></a> ' +
'<a class="pointer"><i class="icon-resize-horizontal"></i></a> ' +
'<a class="pointer"><i class="icon-move"></i></a> ' +
'<a class="pointer"><i class="icon-copy"></i></a> ' +
'<a class="pointer"><i class="icon-share"></i></a>' +
'<a class="pointer"><i class="icon-remove"></i></a> ' +
'</div>';
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 =
'<div class="panel-header">'+
'<div class="row-fluid panel-extra">' +
'<div class="panel-extra-container">' +
'<span class="alert-error panel-error small pointer"' +
'config-modal="app/partials/inspector.html" ng-if="panelMeta.error">' +
'<span data-placement="right" bs-tooltip="panelMeta.error">' +
'<i class="icon-exclamation-sign"></i><span class="panel-error-arrow"></span>' +
'</span>' +
'<span class="alert-error panel-error small pointer"' +
'config-modal="app/partials/inspector.html" ng-if="panelMeta.error">' +
'<span data-placement="right" bs-tooltip="panelMeta.error">' +
'<i class="icon-exclamation-sign"></i><span class="panel-error-arrow"></span>' +
'</span>' +
'</span>' +
'<span class="panel-loading" ng-show="panelMeta.loading">' +
'<i class="icon-spinner icon-spin icon-large"></i>' +
'</span>' +
'<span class="panel-loading" ng-show="panelMeta.loading">' +
'<i class="icon-spinner icon-spin icon-large"></i>' +
'</span>' +
'<span class="dropdown">' +
'<span class="panel-text panel-title pointer" gf-dropdown="panelMeta.menu" tabindex="1" ' +
'data-drag=true data-jqyoui-options="kbnJqUiDraggableOptions"'+
' jqyoui-draggable="'+
'{'+
'animate:false,'+
'mutate:false,'+
'index:{{$index}},'+
'onStart:\'panelMoveStart\','+
'onStop:\'panelMoveStop\''+
'}" ng-model="panel" ' +
'>' +
'{{panel.title | interpolateTemplateVars}}' +
'</span>' +
'</span>'+
'</div>'+
'</div>\n'+
'<div panel-title></div>' +
'</div>'+
'</div>';
return {
src/css/less/panel.less
+17 -14
View File
@@ -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;
}
}