ux: tweaks to new panel menu
This commit is contained in:
Torkel Ödegaard
@@ -145,7 +145,7 @@ export class PanelCtrl {
|
||||
menu.push({text: 'Share', click: 'ctrl.sharePanel();', icon: "fa fa-fw fa-share", shortcut: "p s"});
|
||||
|
||||
let extendedMenu = this.getExtendedMenu();
|
||||
menu.push({text: 'Actions', click: 'ctrl.removePanel();', icon: "fa fa-fw fa-cube", submenu: extendedMenu});
|
||||
menu.push({text: 'More ...', click: 'ctrl.removePanel();', icon: "fa fa-fw fa-cube", submenu: extendedMenu});
|
||||
|
||||
if (!this.fullscreen) {
|
||||
menu.push({ text: 'Duplicate', click: 'ctrl.duplicate()', role: 'Editor', icon: "fa fa-fw fa-copy" });
|
||||
|
||||
@@ -103,11 +103,6 @@ function panelHeader($compile) {
|
||||
evt.stopPropagation();
|
||||
elem.find('[data-toggle=dropdown]').dropdown('toggle');
|
||||
}
|
||||
|
||||
// var toggleAttribute = evt.getAttribute('data-toggle');
|
||||
// if (!toggleAttribute) {
|
||||
// elem.find('[data-toggle=dropdown]').click();
|
||||
// }
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1,164 +0,0 @@
|
||||
define([
|
||||
'angular',
|
||||
'jquery',
|
||||
'lodash',
|
||||
'tether',
|
||||
],
|
||||
function (angular, $, _, Tether) {
|
||||
'use strict';
|
||||
|
||||
angular
|
||||
.module('grafana.directives')
|
||||
.directive('panelMenu', function($compile) {
|
||||
var linkTemplate =
|
||||
'<span class="panel-title drag-handle pointer dropdown">' +
|
||||
'<span class="icon-gf panel-alert-icon"></span>' +
|
||||
'<span class="panel-title-text drag-handle">{{ctrl.panel.title | interpolateTemplateVars:this}}</span>' +
|
||||
'<span class="fa fa-caret-down panel-title-caret" data-toggle="dropdown"></span>' +
|
||||
'<span class="panel-time-info" ng-show="ctrl.timeInfo"><i class="fa fa-clock-o"></i> {{ctrl.timeInfo}}</span>' +
|
||||
'</span>';
|
||||
|
||||
function createMenuTemplate(ctrl) {
|
||||
var template = '<div class="panel-menu small">';
|
||||
|
||||
if (ctrl.dashboard.meta.canEdit) {
|
||||
template += '<div class="panel-menu-inner">';
|
||||
template += '<div class="panel-menu-row">';
|
||||
if (!ctrl.dashboard.meta.fullscreen) {
|
||||
template += '<a class="panel-menu-icon pull-left" ng-click="ctrl.updateColumnSpan(-1)"><i class="fa fa-minus"></i></a>';
|
||||
template += '<a class="panel-menu-icon pull-left" ng-click="ctrl.updateColumnSpan(1)"><i class="fa fa-plus"></i></a>';
|
||||
}
|
||||
template += '<a class="panel-menu-icon pull-right" ng-click="ctrl.removePanel()"><i class="fa fa-trash"></i></a>';
|
||||
template += '<div class="clearfix"></div>';
|
||||
template += '</div>';
|
||||
}
|
||||
|
||||
template += '<div class="panel-menu-row">';
|
||||
template += '<a class="panel-menu-link" gf-dropdown="extendedMenu"><i class="fa fa-bars"></i></a>';
|
||||
|
||||
_.each(ctrl.getMenu(), function(item) {
|
||||
// skip edit actions if not editor
|
||||
if (item.role === 'Editor' && !ctrl.dashboard.meta.canEdit) {
|
||||
return;
|
||||
}
|
||||
|
||||
template += '<a class="panel-menu-link" ';
|
||||
if (item.click) { template += ' ng-click="' + item.click + '"'; }
|
||||
if (item.href) { template += ' href="' + item.href + '"'; }
|
||||
template += '>';
|
||||
template += item.text + '</a>';
|
||||
});
|
||||
|
||||
template += '</div>';
|
||||
template += '</div>';
|
||||
template += '</div>';
|
||||
return template;
|
||||
}
|
||||
|
||||
function getExtendedMenu(ctrl) {
|
||||
return ctrl.getExtendedMenu();
|
||||
}
|
||||
|
||||
return {
|
||||
restrict: 'A',
|
||||
link: function($scope, elem) {
|
||||
var $link = $(linkTemplate);
|
||||
var $panelContainer = elem.parents(".panel-container");
|
||||
var menuScope = null;
|
||||
var ctrl = $scope.ctrl;
|
||||
var timeout = null;
|
||||
var $menu = null;
|
||||
var teather;
|
||||
|
||||
elem.append($link);
|
||||
|
||||
function dismiss(time, force) {
|
||||
clearTimeout(timeout);
|
||||
timeout = null;
|
||||
|
||||
if (time) {
|
||||
timeout = setTimeout(dismiss, time);
|
||||
return;
|
||||
}
|
||||
|
||||
// if hovering or draging pospone close
|
||||
if (force !== true) {
|
||||
if ($menu.is(':hover') || $scope.ctrl.dashboard.$$panelDragging) {
|
||||
dismiss(2200);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (menuScope) {
|
||||
teather.destroy();
|
||||
$menu.unbind();
|
||||
$menu.remove();
|
||||
menuScope.$destroy();
|
||||
menuScope = null;
|
||||
$menu = null;
|
||||
$panelContainer.removeClass('panel-highlight');
|
||||
}
|
||||
}
|
||||
|
||||
var showMenu = function(e) {
|
||||
if (true) {
|
||||
return;
|
||||
}
|
||||
// if menu item is clicked and menu was just removed from dom ignore this event
|
||||
if (!$.contains(document, e.target)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ($menu) {
|
||||
dismiss();
|
||||
return;
|
||||
}
|
||||
|
||||
var menuTemplate;
|
||||
menuTemplate = createMenuTemplate(ctrl);
|
||||
|
||||
$menu = $(menuTemplate);
|
||||
$menu.mouseleave(function() {
|
||||
dismiss(1000);
|
||||
});
|
||||
|
||||
menuScope = $scope.$new();
|
||||
menuScope.extendedMenu = getExtendedMenu(ctrl);
|
||||
menuScope.dismiss = function() {
|
||||
dismiss(null, true);
|
||||
};
|
||||
|
||||
$(".panel-container").removeClass('panel-highlight');
|
||||
$panelContainer.toggleClass('panel-highlight');
|
||||
|
||||
$('.panel-menu').remove();
|
||||
|
||||
elem.append($menu);
|
||||
|
||||
$scope.$apply(function() {
|
||||
$compile($menu.contents())(menuScope);
|
||||
|
||||
teather = new Tether({
|
||||
element: $menu,
|
||||
target: $panelContainer,
|
||||
attachment: 'bottom center',
|
||||
targetAttachment: 'top center',
|
||||
constraints: [
|
||||
{
|
||||
to: 'window',
|
||||
attachment: 'together',
|
||||
pin: true
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
dismiss(2200);
|
||||
};
|
||||
|
||||
elem.click(showMenu);
|
||||
$compile(elem.contents())($scope);
|
||||
}
|
||||
};
|
||||
});
|
||||
});
|
||||
@@ -41,7 +41,6 @@ div.flot-text {
|
||||
.panel-container {
|
||||
background-color: $panel-bg;
|
||||
position: relative;
|
||||
border: $panel-border;
|
||||
|
||||
&.panel-transparent {
|
||||
background-color: transparent;
|
||||
@@ -55,7 +54,6 @@ div.flot-text {
|
||||
|
||||
.panel-title-container {
|
||||
min-height: 9px;
|
||||
padding: 2px 0;
|
||||
cursor: move;
|
||||
word-wrap: break-word;
|
||||
display: block;
|
||||
@@ -67,6 +65,15 @@ div.flot-text {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: block;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.panel-title-text {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: $link-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-menu-container {
|
||||
@@ -77,6 +84,17 @@ div.flot-text {
|
||||
color: $text-color-weak;
|
||||
cursor: pointer;
|
||||
padding: 3px 5px;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
&:hover {
|
||||
color: $link-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-loading {
|
||||
@@ -84,19 +102,16 @@ div.flot-text {
|
||||
top: -3px;
|
||||
right: 0px;
|
||||
z-index: 800;
|
||||
font-size: $font-size-sm;
|
||||
color: $text-color-weak;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
background: $panel-header-hover-bg;
|
||||
|
||||
.panel-menu-toggle {
|
||||
color: $text-color;
|
||||
background: $panel-header-menu-hover-bg;
|
||||
}
|
||||
|
||||
transition: background-color 0.1s ease-in-out;
|
||||
background-color: $panel-header-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -178,9 +193,19 @@ div.flot-text {
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(82,168,236,10.8)
|
||||
}
|
||||
|
||||
// .panel-hover-highlight {
|
||||
// box-shadow: inset 0 1px 1px rgba(0,0,0,0.025), 0 0 1px rgba(82,168,236,0.5)
|
||||
// }
|
||||
.panel-hover-highlight {
|
||||
.panel-menu-toggle {
|
||||
visibility: visible;
|
||||
transition: opacity 0.1s ease-in 0.2s;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.resize-panel-handle {
|
||||
visibility: visible;
|
||||
transition: opacity 0.1s ease-in 0.2s;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.on-drag-hover {
|
||||
.panel-container {
|
||||
@@ -190,6 +215,7 @@ div.flot-text {
|
||||
|
||||
.panel-drop-zone {
|
||||
display: none;
|
||||
|
||||
.panel-container {
|
||||
border: $panel-border;
|
||||
display: flex;
|
||||
@@ -227,7 +253,8 @@ div.flot-text {
|
||||
right: 0;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
color: $text-color-faint;
|
||||
|
||||
&:before {
|
||||
|
||||
Reference in New Issue
Block a user