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

More wort on panel edit menu

Browse Source
This commit is contained in:
Torkel Ödegaard
2014-09-23 16:11:31 +02:00
parent bd3bae3af0
commit 1be840f19d
4 changed files with 159 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/directives/grafanaPanel.js
+90 -32
View File
@@ -3,55 +3,113 @@ define([
'jquery',
'lodash',
],
function (angular, $) {
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>';
var linkTemplate = '<a class="pointer panel-title">{{panel.title || interpolateTemplateVars}}</a>';
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 = '<div class="panel-menu small">';
template += '<div class="panel-menu-inner">';
template += '<div class="panel-menu-row">';
template += '<a class="panel-menu-icon pull-left" ng-click="updateColumnSpan(-1)"><i class="icon-minus"></i></a>';
template += '<a class="panel-menu-icon pull-left" ng-click="updateColumnSpan(1)"><i class="icon-plus"></i></a>';
template += '<a class="panel-menu-icon pull-right" ng-click="remove_panel_from_row(row, panel)"><i class="icon-remove"></i></a>';
template += '<a class="panel-menu-icon pull-right" ' + moveAttributes + '><i class="icon-move"></i></a>';
template += '<div class="clearfix"></div>';
template += '</div>';
template += '<div class="panel-menu-row">';
_.each($scope.panelMeta.menu, function(item) {
template += '<a class="panel-menu-link pull-left" ';
if (item.click) { template += ' ng-click="' + item.click + '"'; }
template += '>';
template += item.text + '</a>';
});
template += '<a class="panel-menu-link pull-left">share</a>';
template += '</div>';
template += '</div>';
template += '</div>';
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, $) {
'<i class="icon-spinner icon-spin icon-large"></i>' +
'</span>' +
'<div panel-title></div>' +
'<div panel-title ' + '></div>' +
'</div>'+
'</div>';
src/app/partials/dashboard.html
+9 -10
View File
@@ -74,18 +74,17 @@
</div>
</div>
<div class="panel-menu small" ng-show="showPanelMenu" ng-style="{'margin-left': panelMenuPos}">
<a class="pointer"><i class="icon-eye-open"></i> <span>view</span></a>
<a class="pointer"><i class="icon-cog"></i> <span>edit</span></a>
<a class="pointer"><i class="icon-resize-horizontal"></i> <span>span</span></a>
<a class="pointer"><i class="icon-copy"></i> <span>duplicate</span></a>
<a class="pointer"><i class="icon-share"></i> <span>share</span></a>
<a class="pointer"><i class="icon-remove"></i> <span>remove</span></a>
</div>
<div style="padding-top:0px" ng-if="!row.collapse">
<div class="panels-wrapper" ng-if="!row.collapse">
<div class="row-text pointer" ng-click="toggle_row(row)" ng-if="row.showTitle" ng-bind="row.title">
</div>
<div class="panel-menu-container" data-menu-container>
<!-- <a class="pointer"><i class="icon&#45;eye&#45;open"></i> <span>view</span></a> -->
<!-- <a class="pointer"><i class="icon&#45;cog"></i> <span>edit</span></a> -->
<!-- <a class="pointer"><i class="icon&#45;resize&#45;horizontal"></i> <span>span</span></a> -->
<!-- <a class="pointer"><i class="icon&#45;copy"></i> <span>duplicate</span></a> -->
<!-- <a class="pointer"><i class="icon&#45;share"></i> <span>share</span></a> -->
<!-- <a class="pointer"><i class="icon&#45;remove"></i> <span>remove</span></a> -->
</div>
<!-- Panels -->
<div ng-repeat="(name, panel) in row.panels"
src/app/services/panelSrv.js
+37 -37
View File
@@ -14,55 +14,55 @@ function (angular, _) {
var menu = [
{
text: 'Edit',
configModal: "app/partials/paneleditor.html",
condition: !$scope.panelMeta.fullscreenEdit
},
{
text: 'Edit',
click: "toggleFullscreen(true)",
condition: $scope.panelMeta.fullscreenEdit
},
{
text: "Fullscreen",
text: "view",
click: 'toggleFullscreen(false)',
condition: $scope.panelMeta.fullscreenView
},
{
text: 'Duplicate',
text: 'edit',
editorLink: "app/partials/paneleditor.html",
condition: !$scope.panelMeta.fullscreenEdit
},
{
text: 'edit',
click: "toggleFullscreen(true)",
condition: $scope.panelMeta.fullscreenEdit
},
{
text: 'duplicate',
click: 'duplicatePanel(panel)',
condition: true
},
// {
// text: 'span',
// submenu: [
// { text: '1', click: 'updateColumnSpan(1)' },
// { text: '2', click: 'updateColumnSpan(2)' },
// { text: '3', click: 'updateColumnSpan(3)' },
// { text: '4', click: 'updateColumnSpan(4)' },
// { text: '5', click: 'updateColumnSpan(5)' },
// { text: '6', click: 'updateColumnSpan(6)' },
// { text: '7', click: 'updateColumnSpan(7)' },
// { text: '8', click: 'updateColumnSpan(8)' },
// { text: '9', click: 'updateColumnSpan(9)' },
// { text: '10', click: 'updateColumnSpan(10)' },
// { text: '11', click: 'updateColumnSpan(11)' },
// { text: '12', click: 'updateColumnSpan(12)' },
// ],
// condition: true
// },
{
text: 'Span',
submenu: [
{ text: '1', click: 'updateColumnSpan(1)' },
{ text: '2', click: 'updateColumnSpan(2)' },
{ text: '3', click: 'updateColumnSpan(3)' },
{ text: '4', click: 'updateColumnSpan(4)' },
{ text: '5', click: 'updateColumnSpan(5)' },
{ text: '6', click: 'updateColumnSpan(6)' },
{ text: '7', click: 'updateColumnSpan(7)' },
{ text: '8', click: 'updateColumnSpan(8)' },
{ text: '9', click: 'updateColumnSpan(9)' },
{ text: '10', click: 'updateColumnSpan(10)' },
{ text: '11', click: 'updateColumnSpan(11)' },
{ text: '12', click: 'updateColumnSpan(12)' },
],
condition: true
},
{
text: 'Advanced',
text: 'advanced',
submenu: [
{ text: 'Panel JSON', click: 'editPanelJson()' },
],
condition: true
},
{
text: 'Remove',
click: 'remove_panel_from_row(row, panel)',
condition: true
}
// {
// text: 'remove',
// click: 'remove_panel_from_row(row, panel)',
// condition: true
// }
];
$scope.inspector = {};
@@ -73,7 +73,7 @@ function (angular, _) {
};
$scope.updateColumnSpan = function(span) {
$scope.panel.span = span;
$scope.panel.span = Math.min(Math.max($scope.panel.span + span, 1), 12);
$timeout(function() {
$scope.$emit('render');
src/css/less/panel.less
+23 -12
View File
@@ -19,6 +19,7 @@
border: 0px;
font-weight: bold;
position: relative;
font-size: 0.9em;
}
.panel-loading {
@@ -57,22 +58,32 @@
}
.panel-menu {
display: inline-block;
vertical-align: top;
a {
font-size: 1.2em;
float: left;
padding: 7px 10px;
border-top: 1px solid black;
border-right: 1px solid black;
z-index: 10000;
width: 277px;
position: absolute;
background: @grafanaTargetFuncBackground;
border: 1px solid black;
top: -62px;
.panel-menu-row {
border-bottom: 1px solid black;
background: @grayDark;
&:last-child {
border-bottom: none;
}
}
a:first-child {
border-left: 1px solid black;
.panel-menu-link, .panel-menu-icon {
padding: 5px 10px;
}
.panel-menu-link {
border-right: 1px solid black;
&:last-child {
border: none;
}
}
}
.panel-highlight {
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236, 0.9)");
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(82,168,236, 0.8)");
}