frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues 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
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
15 changed files with 139 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/node_modules/@node-red/editor-api/lib/editor/locales/en-US/editor.json vendored
View File

@ -78,6 +78,12 @@
"projects-settings": "Project Settings"
}
},
"actions": {
"toggle-navigator": "Toggle navigator",
"zoom-out": "Zoom out",
"zoom-reset": "Reset zoom",
"zoom-in": "Zoom in"
},
"user": {
"loggedInAs": "Logged in as __name__",
"username": "Username",
@ -335,6 +341,10 @@
"analysis": "analysis",
"advanced": "advanced"
},
"actions": {
"collapse-all": "Collapse all categories",
"expand-all": "Expand all categories"
},
"event": {
"nodeAdded": "Node added to palette:",
"nodeAdded_plural": "Nodes added to palette",
@ -488,7 +498,9 @@
"editDescription": "Edit project description",
"editDependencies": "Edit project dependencies",
"editReadme": "Edit README.md",
"showProjectSettings": "Show project settings",
"projectSettings": {
"title": "Project Settings",
"edit": "edit",
"none": "None",
"install": "install",

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();

3
packages/node_modules/@node-red/editor-client/src/sass/colors.scss vendored
View File

@ -67,3 +67,6 @@ $editor-button-color: #999;
$editor-button-background: #fff;
$shade-color: rgba(160,160,160,0.5);
$popover-background: #333;
$popover-color: #eee;

83
packages/node_modules/@node-red/editor-client/src/sass/popover.scss vendored
View File

@ -21,12 +21,14 @@
width: auto;
padding: 10px;
height: auto;
background: #fff;
background: $popover-background;
color: $popover-color;
border-radius: 4px;
z-index: 1000;
font-size: 14px;
line-height: 1.4em;
@include component-shadow;
border-color: $popover-background;
}
.red-ui-popover:after, .red-ui-popover:before {
@ -51,28 +53,33 @@
left: 50%;
}
.red-ui-popover.red-ui-popover-top:after, .red-ui-popover.red-ui-popover-top:before {
top: 100%;
left: 50%;
}
.red-ui-popover.red-ui-popover-right:after {
border-color: rgba(136, 183, 213, 0);
border-right-color: #fff;
border-right-color: $popover-background;
border-width: 10px;
margin-top: -10px;
}
.red-ui-popover.red-ui-popover-right:before {
border-color: rgba(194, 225, 245, 0);
border-right-color: $primary-border-color;
border-right-color: $popover-background;
border-width: 11px;
margin-top: -11px;
}
.red-ui-popover.red-ui-popover-left:after {
border-color: rgba(136, 183, 213, 0);
border-left-color: #fff;
border-left-color: $popover-background;
border-width: 10px;
margin-top: -10px;
}
.red-ui-popover.red-ui-popover-left:before {
border-color: rgba(194, 225, 245, 0);
border-left-color: $primary-border-color;
border-left-color: $popover-background;
border-width: 11px;
margin-top: -11px;
}
@ -80,45 +87,61 @@
.red-ui-popover.red-ui-popover-bottom:after {
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #fff;
border-bottom-color: $popover-background;
border-width: 10px;
margin-left: -10px;
}
.red-ui-popover.red-ui-popover-bottom:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: $primary-border-color;
border-bottom-color: $popover-background;
border-width: 11px;
margin-left: -11px;
}
.red-ui-popover.red-ui-popover-top:after {
border-color: rgba(136, 183, 213, 0);
border-top-color: $popover-background;
border-width: 10px;
margin-left: -10px;
}
.red-ui-popover.red-ui-popover-top:before {
border-color: rgba(194, 225, 245, 0);
border-top-color: $popover-background;
border-width: 11px;
margin-left: -11px;
}
.red-ui-popover-size-small {
font-size: 11px;
padding: 5px;
font-size: 12px;
padding: 5px 7px;
line-height: 1.8em;
&.red-ui-popover-right:after {
border-width: 5px;
margin-top: -5px;
&.red-ui-popover-right:after, &.red-ui-popover-left:after {
border-width: 7px;
margin-top: -7px;
}
&.red-ui-popover-right:before {
border-width: 6px;
margin-top: -6px;
&.red-ui-popover-right:before, &.red-ui-popover-left:before {
border-width: 8px;
margin-top: -8px;
}
&.red-ui-popover-left:after {
border-width: 5px;
margin-top: -5px;
&.red-ui-popover-bottom:after, &.red-ui-popover-top:after {
border-width: 7px;
margin-left: -7px;
}
&.red-ui-popover-left:before {
border-width: 6px;
margin-top: -6px;
}
&.red-ui-popover-bottom:after {
border-width: 5px;
margin-left: -5px;
}
&.red-ui-popover-bottom:before {
border-width: 6px;
margin-left: -6px;
&.red-ui-popover-bottom:before, &.red-ui-popover-top:before {
border-width: 8px;
margin-left: -8px;
}
}
.red-ui-popover-key {
font-family: monospace;
margin-left: 5px;
border: 1px solid #999;
border-radius:3px;
padding: 2px 3px;
}

3
packages/node_modules/@node-red/nodes/core/core/58-debug.html vendored
View File

@ -157,7 +157,8 @@
toolbar: uiComponents.footer,
enableOnEdit: true,
pinned: true,
iconClass: "fa fa-bug"
iconClass: "fa fa-bug",
action: "core:show-debug-tab"
});
RED.actions.add("core:show-debug-tab",function() { RED.sidebar.show('debug'); });