frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2025-03-01 10:36:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update tooltip style and add to some editor buttons

Browse Source
This commit is contained in:
Nick O'Leary
2018-10-03 14:02:07 +01:00
parent b2f50da322
commit cdcf39fe82
15 changed files with 139 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
packages/node_modules/@node-red/editor-client/src/js/ui/common/popover.js vendored
View File

@@ -18,15 +18,19 @@ RED.popover = (function() {
var deltaSizes = {
"default": {
top: 10,
topTop: 30,
leftRight: 17,
leftLeft: 25,
leftBottom: 8,
leftTop: 11
},
"small": {
top: 5,
leftRight: 17,
leftLeft: 16,
leftBottom: 3,
top: 6,
topTop: 20,
leftRight: 8,
leftLeft: 26,
leftBottom: 8,
leftTop: 9
}
}
function createPopover(options) {
@@ -48,7 +52,7 @@ RED.popover = (function() {
var openPopup = function(instant) {
if (active) {
div = $('<div class="red-ui-popover red-ui-popover-'+direction+'"></div>');
div = $('<div class="red-ui-popover"></div>');
if (size !== "default") {
div.addClass("red-ui-popover-size-"+size);
}
@@ -75,13 +79,36 @@ RED.popover = (function() {
var targetHeight = target.outerHeight();
var divHeight = div.height();
var divWidth = div.width();
var viewportTop = $(window).scrollTop();
var viewportBottom = viewportTop + $(window).height();
var top = 0;
var left = 0;
if (direction === 'right') {
div.css({top: targetPos.top+targetHeight/2-divHeight/2-deltaSizes[size].top,left:targetPos.left+targetWidth+deltaSizes[size].leftRight});
top = targetPos.top+targetHeight/2-divHeight/2-deltaSizes[size].top;
left = targetPos.left+targetWidth+deltaSizes[size].leftRight;
} else if (direction === 'left') {
div.css({top: targetPos.top+targetHeight/2-divHeight/2-deltaSizes[size].top,left:targetPos.left-deltaSizes[size].leftLeft-divWidth});
top = targetPos.top+targetHeight/2-divHeight/2-deltaSizes[size].top;
left = targetPos.left-deltaSizes[size].leftLeft-divWidth;
} else if (direction === 'bottom') {
div.css({top: targetPos.top+targetHeight+deltaSizes[size].top,left:targetPos.left+targetWidth/2-divWidth/2 - deltaSizes[size].leftBottom});
top = targetPos.top+targetHeight+deltaSizes[size].top;
left = targetPos.left+targetWidth/2-divWidth/2 - deltaSizes[size].leftBottom;
if (top+divHeight > viewportBottom) {
direction = 'top'
top = targetPos.top-deltaSizes[size].topTop-divHeight;
left = targetPos.left+targetWidth/2-divWidth/2 - deltaSizes[size].leftTop;
}
} else if (direction === 'top') {
top = targetPos.top-deltaSizes[size].topTop-divHeight;
left = targetPos.left+targetWidth/2-divWidth/2 - deltaSizes[size].leftTop;
if (top < 0) {
direction = 'bottom';
top = targetPos.top+targetHeight+deltaSizes[size].top;
left = targetPos.left+targetWidth/2-divWidth/2 - deltaSizes[size].leftBottom;
}
}
div.addClass('red-ui-popover-'+direction).css({top: top, left: left});
if (instant) {
div.show();
} else {
@@ -156,14 +183,25 @@ RED.popover = (function() {
return {
create: createPopover,
tooltip: function(target,content) {
tooltip: function(target,content, action) {
var label = content;
if (action) {
label = function() {
var label = content;
var shortcut = RED.keyboard.getShortcut(action);
if (shortcut && shortcut.key) {
label = $('<span>'+content+' <span class="red-ui-popover-key">'+RED.keyboard.formatKey(shortcut.key, true)+'</span></span>');
}
return label;
}
}
RED.popover.create({
target:target,
trigger: "hover",
size: "small",
direction: "bottom",
content: content,
delay: { show: 550, hide: 10 }
content: label,
delay: { show: 350, hide: 10 }
});
}
}

2
packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js vendored
View File

@@ -353,7 +353,7 @@ RED.tabs = (function() {
pinnedLink.addClass("red-ui-tab-link-button-pinned");
pinnedTabsCount++;
}
RED.popover.tooltip($(pinnedLink), tab.name);
RED.popover.tooltip($(pinnedLink), tab.name, tab.action);
}
link.on("click",onTabClick);

5
packages/node_modules/@node-red/editor-client/src/js/ui/keyboard.js vendored
View File

@@ -319,7 +319,7 @@ RED.keyboard = (function() {
var cmdCtrlKey = '<span class="help-key">'+(isMac?'&#8984;':'Ctrl')+'</span>';
function formatKey(key) {
function formatKey(key,plain) {
var formattedKey = isMac?key.replace(/ctrl-?/,"&#8984;"):key;
formattedKey = isMac?formattedKey.replace(/alt-?/,"&#8997;"):key;
formattedKey = formattedKey.replace(/shift-?/,"&#8679;")
@@ -327,6 +327,9 @@ RED.keyboard = (function() {
formattedKey = formattedKey.replace(/up/,"&#x2191;")
formattedKey = formattedKey.replace(/right/,"&#x2192;")
formattedKey = formattedKey.replace(/down/,"&#x2193;")
if (plain) {
return formattedKey;
}
return '<span class="help-key-block"><span class="help-key">'+formattedKey.split(" ").join('</span> <span class="help-key">')+'</span></span>';
}

3
packages/node_modules/@node-red/editor-client/src/js/ui/palette.js vendored
View File

@@ -509,6 +509,8 @@ RED.palette = (function() {
}
}
});
RED.popover.tooltip($("#palette-collapse-all"),RED._('palette.actions.collapse-all'));
$("#palette-expand-all").on("click", function(e) {
e.preventDefault();
for (var cat in categoryContainers) {
@@ -517,6 +519,7 @@ RED.palette = (function() {
}
}
});
RED.popover.tooltip($("#palette-expand-all"),RED._('palette.actions.expand-all'));
}
function getCategories() {
var categories = [];

2
packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectSettings.js vendored
View File

@@ -49,7 +49,7 @@ RED.projects.settings = (function() {
var tabContainer;
var trayOptions = {
title: RED._("menu.label.userSettings"),
title: RED._("sidebar.project.projectSettings.title"),
buttons: [
{
id: "node-dialog-ok",

1
packages/node_modules/@node-red/editor-client/src/js/ui/projects/tab-versionControl.js vendored
View File

@@ -1009,6 +1009,7 @@ RED.sidebar.versionControl = (function() {
enableOnEdit: false,
pinned: true,
iconClass: "fa fa-code-fork",
action: "core:show-version-control-tab",
onchange: function() {
setTimeout(function() {
sections.resize();

1
packages/node_modules/@node-red/editor-client/src/js/ui/tab-config.js vendored
View File

@@ -222,6 +222,7 @@ RED.sidebar.config = (function() {
content: content,
toolbar: toolbar,
iconClass: "fa fa-cog",
action: "core:show-config-tab",
onchange: function() { refreshConfigNodeList(); }
});
RED.actions.add("core:show-config-tab",function() {RED.sidebar.show('config')});

3
packages/node_modules/@node-red/editor-client/src/js/ui/tab-context.js vendored
View File

@@ -132,7 +132,8 @@ RED.sidebar.context = (function() {
content: content,
toolbar: footerToolbar,
// pinned: true,
enableOnEdit: false
enableOnEdit: false,
action: "core:show-context-tab"
});
// var toggleLiveButton = $("#sidebar-context-toggle-live");

4
packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js vendored
View File

@@ -92,6 +92,7 @@ RED.sidebar.info = (function() {
label: RED._("sidebar.info.label"),
name: RED._("sidebar.info.name"),
iconClass: "fa fa-info",
action:"core:show-info-tab",
content: content,
pinned: true,
enableOnEdit: true
@@ -140,12 +141,13 @@ RED.sidebar.info = (function() {
propRow = $('<tr class="node-info-node-row"><td>Project</td><td></td></tr>').appendTo(tableBody);
$(propRow.children()[1]).text(activeProject.name||"");
$('<tr class="node-info-property-expand blank"><td colspan="2"></td></tr>').appendTo(tableBody);
$('<button class="editor-button editor-button-small" style="position:absolute;right:2px;"><i class="fa fa-ellipsis-h"></i></button>')
var editProjectButton = $('<button class="editor-button editor-button-small" style="position:absolute;right:2px;"><i class="fa fa-ellipsis-h"></i></button>')
.appendTo(propRow.children()[1])
.click(function(evt) {
evt.preventDefault();
RED.projects.editProject();
});
RED.popover.tooltip(editProjectButton,RED._('sidebar.project.showProjectSettings'));
}
propertiesSection.container.show();
infoSection.container.show();

1
packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js vendored
View File

@@ -158,6 +158,7 @@
evt.preventDefault();
toggle();
})
RED.popover.tooltip($("#btn-navigate"),RED._('actions.toggle-navigator'),'core:toggle-navigator');
},
refresh: refreshNodes,
resize: resizeNavBorder,

3
packages/node_modules/@node-red/editor-client/src/js/ui/view.js vendored
View File

@@ -337,8 +337,11 @@ RED.view = (function() {
RED.view.navigator.init();
$("#btn-zoom-out").click(function() {zoomOut();});
RED.popover.tooltip($("#btn-zoom-out"),RED._('actions.zoom-out'),'core:zoom-out');
$("#btn-zoom-zero").click(function() {zoomZero();});
RED.popover.tooltip($("#btn-zoom-zero"),RED._('actions.zoom-reset'),'core:zoom-reset');
$("#btn-zoom-in").click(function() {zoomIn();});
RED.popover.tooltip($("#btn-zoom-in"),RED._('actions.zoom-in'),'core:zoom-in');
$("#chart").on("DOMMouseScroll mousewheel", function (evt) {
if ( evt.altKey ) {
evt.preventDefault();