Merge pull request #2197 from node-red/commandPrompt

Add Command prompt dialog
This commit is contained in:
Nick O'Leary 2019-06-11 22:47:30 +01:00 committed by GitHub
commit 4d37c28bc7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 239 additions and 5 deletions

View File

@ -169,6 +169,7 @@ module.exports = function(grunt) {
"packages/node_modules/@node-red/editor-client/src/js/ui/library.js",
"packages/node_modules/@node-red/editor-client/src/js/ui/notifications.js",
"packages/node_modules/@node-red/editor-client/src/js/ui/search.js",
"packages/node_modules/@node-red/editor-client/src/js/ui/actionList.js",
"packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js",
"packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js",
"packages/node_modules/@node-red/editor-client/src/js/ui/userSettings.js",

View File

@ -351,7 +351,8 @@
"pasteNode": "Paste nodes",
"undoChange": "Undo the last change performed",
"searchBox": "Open search box",
"managePalette": "Manage palette"
"managePalette": "Manage palette",
"actionList":"Action list"
},
"library": {
"library": "Library",

View File

@ -1,6 +1,6 @@
{
"*": {
"ctrl-shift-p":"core:manage-palette",
"alt-shift-p":"core:manage-palette",
"ctrl-f": "core:search",
"ctrl-shift-f": "core:list-flows",
"ctrl-=": "core:zoom-in",
@ -22,7 +22,8 @@
"ctrl-alt-n": "core:new-project",
"ctrl-alt-o": "core:open-project",
"ctrl-g v": "core:show-version-control-tab",
"ctrl-shift-l": "core:show-event-log"
"ctrl-shift-l": "core:show-event-log",
"ctrl-shift-p":"core:show-action-list"
},
"red-ui-sidebar-node-config": {
"backspace": "core:delete-config-selection",

View File

@ -451,6 +451,7 @@ var RED = (function() {
{id:"menu-item-palette",label:RED._("menu.label.palette.show"),toggle:true,onselect:"core:toggle-palette", selected: true},
{id:"menu-item-sidebar",label:RED._("menu.label.sidebar.show"),toggle:true,onselect:"core:toggle-sidebar", selected: true},
{id:"menu-item-event-log",label:RED._("eventLog.title"),onselect:"core:show-event-log"},
{id:"menu-item-action-list",label:RED._("keyboard.actionList"),onselect:"core:show-action-list"},
null
]});
menuOptions.push(null);
@ -521,6 +522,7 @@ var RED = (function() {
RED.subflow.init();
RED.clipboard.init();
RED.search.init();
RED.actionList.init();
RED.editor.init();
RED.diff.init();

View File

@ -0,0 +1,205 @@
/**
* Copyright JS Foundation and other contributors, http://js.foundation
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
**/
RED.actionList = (function() {
var disabled = false;
var dialog = null;
var searchInput;
var searchResults;
var selected = -1;
var visible = false;
var filterTerm = "";
function ensureSelectedIsVisible() {
var selectedEntry = searchResults.find("li.selected");
if (selectedEntry.length === 1) {
var scrollWindow = searchResults.parent();
var scrollHeight = scrollWindow.height();
var scrollOffset = scrollWindow.scrollTop();
var y = selectedEntry.position().top;
var h = selectedEntry.height();
if (y+h > scrollHeight) {
scrollWindow.animate({scrollTop: '-='+(scrollHeight-(y+h)-10)},50);
} else if (y<0) {
scrollWindow.animate({scrollTop: '+='+(y-10)},50);
}
}
}
function createDialog() {
dialog = $("<div>",{id:"red-ui-actionList",class:"red-ui-search"}).appendTo("#red-ui-main-container");
var searchDiv = $("<div>",{class:"red-ui-search-container"}).appendTo(dialog);
searchInput = $('<input type="text" data-i18n="[placeholder]keyboard.filterActions">').appendTo(searchDiv).searchBox({
change: function() {
filterTerm = $(this).val();
searchResults.editableList('filter');
searchResults.find("li.selected").removeClass("selected");
}
});
searchInput.on('keydown',function(evt) {
var selectedChild;
if (evt.keyCode === 40) {
// Down
selectedChild = searchResults.find("li.selected");
if (!selectedChild.length) {
var children = searchResults.children(":visible");
if (children.length) {
$(children[0]).addClass('selected');
RED.a = children[0];
}
} else {
var nextChild = selectedChild.nextAll(":visible").first();
if (nextChild.length) {
selectedChild.removeClass('selected');
nextChild.addClass('selected');
}
}
ensureSelectedIsVisible();
evt.preventDefault();
} else if (evt.keyCode === 38) {
// Up
selectedChild = searchResults.find("li.selected");
var nextChild = selectedChild.prevAll(":visible").first();
if (nextChild.length) {
selectedChild.removeClass('selected');
nextChild.addClass('selected');
}
ensureSelectedIsVisible();
evt.preventDefault();
} else if (evt.keyCode === 13) {
// Enter
selectedChild = searchResults.find("li.selected");
selectCommand(searchResults.editableList('getItem',selectedChild));
}
});
searchInput.i18n();
var searchResultsDiv = $("<div>",{class:"red-ui-search-results-container"}).appendTo(dialog);
searchResults = $('<ol>',{style:"position: absolute;top: 5px;bottom: 5px;left: 5px;right: 5px;"}).appendTo(searchResultsDiv).editableList({
addButton: false,
addItem: function(container,i,action) {
if (action.id === undefined) {
$('<div>',{class:"red-ui-search-empty"}).text(RED._('search.empty')).appendTo(container);
} else {
var div = $('<a>',{href:'#',class:"red-ui-search-result"}).appendTo(container);
var contentDiv = $('<div>',{class:"red-ui-search-result-action"}).appendTo(div);
$('<div>').text(action.label).appendTo(contentDiv);
// $('<div>',{class:"red-ui-search-result-node-type"}).text(node.type).appendTo(contentDiv);
// $('<div>',{class:"red-ui-search-result-node-id"}).text(node.id).appendTo(contentDiv);
if (action.key) {
$('<div>',{class:"red-ui-search-result-action-key"}).html(RED.keyboard.formatKey(action.key)).appendTo(contentDiv);
}
div.on("click", function(evt) {
evt.preventDefault();
selectCommand(action);
});
}
},
scrollOnAdd: false,
filter: function(item) {
if (filterTerm !== "" && item.label.toLowerCase().indexOf(filterTerm) === -1) {
return false;
}
return true;
}
});
}
function selectCommand(command) {
hide();
if (command) {
RED.actions.invoke(command.id);
}
}
function show(v) {
if (disabled) {
return;
}
if (!visible) {
RED.keyboard.add("*","escape",function(){hide()});
$("#red-ui-header-shade").show();
$("#red-ui-editor-shade").show();
$("#red-ui-palette-shade").show();
$("#red-ui-sidebar-shade").show();
$("#red-ui-sidebar-separator").hide();
if (dialog === null) {
createDialog();
}
dialog.slideDown(300);
searchInput.searchBox('value',v)
searchResults.editableList('empty');
results = [];
var actions = RED.actions.list();
actions.sort(function(A,B) {
return A.id.localeCompare(B.id);
});
actions.forEach(function(action) {
action.label = action.id.replace(/:/,": ").replace(/-/g," ").replace(/(^| )./g,function() { return arguments[0].toUpperCase()});
searchResults.editableList('addItem',action)
})
RED.events.emit("actionList:open");
visible = true;
}
searchInput.trigger("focus");
}
function hide() {
if (visible) {
RED.keyboard.remove("escape");
visible = false;
$("#red-ui-header-shade").hide();
$("#red-ui-editor-shade").hide();
$("#red-ui-palette-shade").hide();
$("#red-ui-sidebar-shade").hide();
$("#red-ui-sidebar-separator").show();
if (dialog !== null) {
dialog.slideUp(200,function() {
searchInput.searchBox('value','');
});
}
RED.events.emit("actionList:close");
}
}
function init() {
RED.actions.add("core:show-action-list",show);
RED.events.on("editor:open",function() { disabled = true; });
RED.events.on("editor:close",function() { disabled = false; });
RED.events.on("search:open",function() { disabled = true; });
RED.events.on("search:close",function() { disabled = false; });
RED.events.on("type-search:open",function() { disabled = true; });
RED.events.on("type-search:close",function() { disabled = false; });
$("#red-ui-header-shade").on('mousedown',hide);
$("#red-ui-editor-shade").on('mousedown',hide);
$("#red-ui-palette-shade").on('mousedown',hide);
$("#red-ui-sidebar-shade").on('mousedown',hide);
}
return {
init: init,
show: show,
hide: hide
};
})();

View File

@ -742,6 +742,8 @@ RED.clipboard = (function() {
RED.events.on("editor:close",function() { disabled = false; });
RED.events.on("search:open",function() { disabled = true; });
RED.events.on("search:close",function() { disabled = false; });
RED.events.on("actionList:open",function() { disabled = true; });
RED.events.on("actionList:close",function() { disabled = false; });
RED.events.on("type-search:open",function() { disabled = true; });
RED.events.on("type-search:close",function() { disabled = false; });

View File

@ -323,6 +323,7 @@
},
empty: function() {
this.element.empty();
this.uiContainer.scrollTop(0);
},
filter: function(filter) {
if (filter !== undefined) {
@ -346,6 +347,14 @@
if (items.length > 0) {
this.uiContainer.scrollTop(this.uiContainer.scrollTop()+items.position().top)
}
},
getItem: function(li) {
var el = li.find(".red-ui-editableList-item-content");
if (el.length) {
return el.data('data');
} else {
return null;
}
}
});
})(jQuery);

View File

@ -216,7 +216,7 @@ RED.search = (function() {
var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv);
RED.utils.createIconElement(icon_url, iconContainer, true);
var contentDiv = $('<div>',{class:"red-ui-search-result-description"}).appendTo(div);
var contentDiv = $('<div>',{class:"red-ui-search-result-node-description"}).appendTo(div);
if (node.z) {
var workspace = RED.nodes.workspace(node.z);
if (!workspace) {
@ -296,6 +296,8 @@ RED.search = (function() {
RED.events.on("editor:close",function() { disabled = false; });
RED.events.on("type-search:open",function() { disabled = true; });
RED.events.on("type-search:close",function() { disabled = false; });
RED.events.on("actionList:open",function() { disabled = true; });
RED.events.on("actionList:close",function() { disabled = false; });

View File

@ -165,7 +165,7 @@
}
}
.red-ui-search-result-description {
.red-ui-search-result-node-description {
margin-left: 40px;
margin-right: 5px;
}
@ -193,3 +193,14 @@
font-style: italic;
color: $form-placeholder-color;
}
.red-ui-search-result-action {
color: $primary-text-color;
}
.red-ui-search-result-action-key {
position: absolute;
top: 9px;
right: 0;
margin-right: 10px;
color: $tertiary-text-color;
}