Skip to content

N
nexpie-grafana-theme
Commit 6794260e by Torkel Ödegaard
Options

Lots of progress on new panel edit menu, very tricky to get this right but think… 

Lots of progress on new panel edit menu, very tricky to get this right but think I am getting close to something that is good and will work long term
parent 1be840f1
Showing with 141 additions and 199 deletions
' deleted 100644 → 0
.panel {
display: inline-block;
float: left;
vertical-align: top;
}
.panel-container {
padding: 0px 0px 0px 0px;
background: @grafanaPanelBackground;
margin: 5px;
position: relative;
}
.panel-content {
padding: 0px 10px 5px 10px;
}
.panel-title {
border: 0px;
font-weight: bold;
position: relative;
}
.panel-loading {
position:absolute;
top: 0px;
right: 4px;
z-index: 800;
}
.panel-header {
text-align: center;
}
.panel-error {
color: @white;
position: absolute;
left: 0;
padding: 0px 17px 6px 5px;
top: 0;
i {
position: relative;
top: -2px;
}
}
.panel-error-arrow {
width: 0;
height: 0;
position: absolute;
border-left: 31px solid transparent;
border-right: 30px solid transparent;
border-bottom: 27px solid @grafanaPanelBackground;
left: 0;
bottom: 0;
}
.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;
border-bottom: 1px solid black;
background: @grayDark;
}
a:first-child {
border-left: 1px solid black;
}
}
.panel-highlight {
border: 1px solid @blue;
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
}
src/app/directives/grafanaPanel.js
define([ define([
'angular', 'angular',
'jquery', 'jquery',
'lodash', './panelMenu',
], ],
function (angular, $, _) { function (angular, $) {
'use strict'; 'use strict';
angular angular
.module('grafana.directives') .module('grafana.directives')
.directive('panelTitle', function($compile) {
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);
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 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() {
$compile($menu.contents())(menuScope);
});
$(".panel-container").removeClass('panel-highlight');
$panelContainer.toggleClass('panel-highlight');
//timeout = setTimeout(dismiss, 8000);
});
$compile(elem.contents())($scope);
}
};
});
angular
.module('grafana.directives')
.directive('grafanaPanel', function($compile, $parse) { .directive('grafanaPanel', function($compile, $parse) {
var container = '<div class="panel-container"></div>'; var container = '<div class="panel-container"></div>';
...@@ -138,7 +26,7 @@ function (angular, $, _) { ...@@ -138,7 +26,7 @@ function (angular, $, _) {
'<i class="icon-spinner icon-spin icon-large"></i>' + '<i class="icon-spinner icon-spin icon-large"></i>' +
'</span>' + '</span>' +
'<div panel-title ' + '></div>' + '<div panel-menu></div>' +
'</div>'+ '</div>'+
'</div>'; '</div>';
......
src/app/directives/panelMenu.js 0 → 100644
define([
'angular',
'jquery',
'lodash',
],
function (angular, $, _) {
'use strict';
angular
.module('grafana.directives')
.directive('panelMenu', function($compile) {
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" ';
if (item.click) { template += ' ng-click="' + item.click + '"'; }
if (item.editorLink) { template += ' dash-editor-link="' + item.editorLink + '"'; }
template += '>';
template += item.text + '</a>';
});
template += '<a class="panel-menu-link">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 = 246;
var menuScope = null;
var timeout = null;
var $menu = null;
elem.append($link);
function dismiss(time) {
clearTimeout(timeout);
timeout = null;
console.log('dismiss', time);
if (time) {
timeout = setTimeout(dismiss, time);
return;
}
// if hovering or draging pospone close
if ($menu.is(':hover') || $scope.dashboard.$$panelDragging) {
dismiss(2500);
return;
}
if (menuScope) {
$menu.unbind();
$menu.remove();
menuScope.$destroy();
menuScope = null;
$menu = null;
$panelContainer.removeClass('panel-highlight');
}
}
var showMenu = function() {
if ($menu) {
dismiss();
return;
}
var windowWidth = $(window).width();
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;
}
$menu = $(menuTemplate);
$menu.css('left', menuLeftPos);
$menu.mouseleave(function() {
dismiss(1000);
});
menuScope = $scope.$new();
$('.panel-menu').remove();
elem.append($menu);
$scope.$apply(function() {
$compile($menu.contents())(menuScope);
});
$(".panel-container").removeClass('panel-highlight');
$panelContainer.toggleClass('panel-highlight');
dismiss(2000);
};
$link.click(showMenu);
$compile(elem.contents())($scope);
}
};
});
});
src/app/services/panelSrv.js
...@@ -52,10 +52,8 @@ function (angular, _) { ...@@ -52,10 +52,8 @@ function (angular, _) {
// condition: true // condition: true
// }, // },
{ {
text: 'advanced', text: 'json',
submenu: [ click: 'editPanelJson()',
{ text: 'Panel JSON', click: 'editPanelJson()' },
],
condition: true condition: true
}, },
// { // {
......
src/css/less/panel.less
...@@ -59,13 +59,13 @@ ...@@ -59,13 +59,13 @@
.panel-menu { .panel-menu {
z-index: 10000; z-index: 10000;
width: 277px;
position: absolute; position: absolute;
background: @grafanaTargetFuncBackground; background: @grafanaTargetFuncBackground;
border: 1px solid black; border: 1px solid black;
top: -62px; top: -62px;
.panel-menu-row { .panel-menu-row {
white-space: nowrap;
border-bottom: 1px solid black; border-bottom: 1px solid black;
&:last-child { &:last-child {
border-bottom: none; border-bottom: none;
...@@ -77,6 +77,7 @@ ...@@ -77,6 +77,7 @@
} }
.panel-menu-link { .panel-menu-link {
display: inline-block;
border-right: 1px solid black; border-right: 1px solid black;
&:last-child { &:last-child {
border: none; border: none;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment