Skip to content

N
nexpie-grafana-theme
Commit 148c24aa by Torkel Ödegaard
Options

ux: tweaks to new panel menu

parent 7395bbda
Showing with 41 additions and 183 deletions
public/app/features/panel/panel_ctrl.ts
...@@ -145,7 +145,7 @@ export class PanelCtrl { ...@@ -145,7 +145,7 @@ export class PanelCtrl {
menu.push({text: 'Share', click: 'ctrl.sharePanel();', icon: "fa fa-fw fa-share", shortcut: "p s"}); menu.push({text: 'Share', click: 'ctrl.sharePanel();', icon: "fa fa-fw fa-share", shortcut: "p s"});
let extendedMenu = this.getExtendedMenu(); 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) { if (!this.fullscreen) {
menu.push({ text: 'Duplicate', click: 'ctrl.duplicate()', role: 'Editor', icon: "fa fa-fw fa-copy" }); menu.push({ text: 'Duplicate', click: 'ctrl.duplicate()', role: 'Editor', icon: "fa fa-fw fa-copy" });
......
public/app/features/panel/panel_header.ts
...@@ -103,11 +103,6 @@ function panelHeader($compile) { ...@@ -103,11 +103,6 @@ function panelHeader($compile) {
evt.stopPropagation(); evt.stopPropagation();
elem.find('[data-toggle=dropdown]').dropdown('toggle'); elem.find('[data-toggle=dropdown]').dropdown('toggle');
} }
// var toggleAttribute = evt.getAttribute('data-toggle');
// if (!toggleAttribute) {
// elem.find('[data-toggle=dropdown]').click();
// }
}); });
} }
}; };
......
public/app/features/panel/panel_menu.js deleted 100644 → 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);
}
};
});
});
public/sass/pages/_dashboard.scss
...@@ -41,7 +41,6 @@ div.flot-text { ...@@ -41,7 +41,6 @@ div.flot-text {
.panel-container { .panel-container {
background-color: $panel-bg; background-color: $panel-bg;
position: relative; position: relative;
border: $panel-border;
&.panel-transparent { &.panel-transparent {
background-color: transparent; background-color: transparent;
...@@ -55,7 +54,6 @@ div.flot-text { ...@@ -55,7 +54,6 @@ div.flot-text {
.panel-title-container { .panel-title-container {
min-height: 9px; min-height: 9px;
padding: 2px 0;
cursor: move; cursor: move;
word-wrap: break-word; word-wrap: break-word;
display: block; display: block;
...@@ -67,6 +65,15 @@ div.flot-text { ...@@ -67,6 +65,15 @@ div.flot-text {
position: relative; position: relative;
width: 100%; width: 100%;
display: block; display: block;
padding-bottom: 2px;
}
.panel-title-text {
cursor: pointer;
&:hover {
color: $link-hover-color;
}
} }
.panel-menu-container { .panel-menu-container {
...@@ -77,6 +84,17 @@ div.flot-text { ...@@ -77,6 +84,17 @@ div.flot-text {
color: $text-color-weak; color: $text-color-weak;
cursor: pointer; cursor: pointer;
padding: 3px 5px; padding: 3px 5px;
visibility: hidden;
opacity: 0;
position: absolute;
width: 16px;
height: 16px;
left: 0;
top: 0;
&:hover {
color: $link-hover-color;
}
} }
.panel-loading { .panel-loading {
...@@ -84,19 +102,16 @@ div.flot-text { ...@@ -84,19 +102,16 @@ div.flot-text {
top: -3px; top: -3px;
right: 0px; right: 0px;
z-index: 800; z-index: 800;
font-size: $font-size-sm;
color: $text-color-weak;
} }
.panel-header { .panel-header {
text-align: center; text-align: center;
&:hover { &:hover {
background: $panel-header-hover-bg; transition: background-color 0.1s ease-in-out;
background-color: $panel-header-hover-bg;
.panel-menu-toggle {
color: $text-color;
background: $panel-header-menu-hover-bg;
}
} }
} }
...@@ -178,9 +193,19 @@ div.flot-text { ...@@ -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) box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(82,168,236,10.8)
} }
// .panel-hover-highlight { .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-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 { .on-drag-hover {
.panel-container { .panel-container {
...@@ -190,6 +215,7 @@ div.flot-text { ...@@ -190,6 +215,7 @@ div.flot-text {
.panel-drop-zone { .panel-drop-zone {
display: none; display: none;
.panel-container { .panel-container {
border: $panel-border; border: $panel-border;
display: flex; display: flex;
...@@ -227,7 +253,8 @@ div.flot-text { ...@@ -227,7 +253,8 @@ div.flot-text {
right: 0; right: 0;
width: 15px; width: 15px;
height: 15px; height: 15px;
display: block; visibility: hidden;
opacity: 0;
color: $text-color-faint; color: $text-color-faint;
&:before { &:before {
......
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