frodovdr
/
node-red
mirror of https://github.com/node-red/node-red.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Make color/icon/label-pos pickers keyboard navigable

This commit is contained in:
Nick O'Leary 2020-06-18 22:23:50 +01:00
parent 68d3cc7507
commit c9069d472f
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
3 changed files with 20 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -73,7 +73,7 @@ RED.colorPicker = (function() {
type:"text", type:"text",
value:colorHiddenInput.val() value:colorHiddenInput.val()
}).appendTo(row); }).appendTo(row);
var focusTarget = colorInput;
colorInput.on("change", function (e) { colorInput.on("change", function (e) {
var color = colorInput.val(); var color = colorInput.val();
colorHiddenInput.val(color).trigger('change'); colorHiddenInput.val(color).trigger('change');
@ -188,8 +188,14 @@ RED.colorPicker = (function() {
refreshDisplay(colorHiddenInput.val()) refreshDisplay(colorHiddenInput.val())
},50); },50);
colorPanel.show({ colorPanel.show({
target: colorButton target: colorButton,
onclose: function() {
colorButton.focus();
}
}) })
if (focusTarget) {
focusTarget.focus();
}
}); });
setTimeout(function() { setTimeout(function() {
refreshDisplay(colorHiddenInput.val()) refreshDisplay(colorHiddenInput.val())

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

@ -366,6 +366,7 @@ RED.popover = (function() {
function hide(dispose) { function hide(dispose) {
$(document).off("mousedown.red-ui-popover-panel-close"); $(document).off("mousedown.red-ui-popover-panel-close");
$(document).off("keydown.red-ui-popover-panel-close");
panel.hide(); panel.hide();
panel.css({ panel.css({
height: "auto" height: "auto"
@ -407,6 +408,16 @@ RED.popover = (function() {
} }
panel.slideDown(100); panel.slideDown(100);
$(document).on("keydown.red-ui-popover-panel-close", function(event) {
if (event.keyCode === 27) {
// ESCAPE
if (closeCallback) {
closeCallback();
}
hide(options.dispose);
}
});
$(document).on("mousedown.red-ui-popover-panel-close", function(event) { $(document).on("mousedown.red-ui-popover-panel-close", function(event) {
if(!$(event.target).closest(panel).length && !$(event.target).closest(".red-ui-editor-dialog").length) { if(!$(event.target).closest(panel).length && !$(event.target).closest(".red-ui-editor-dialog").length) {
if (closeCallback) { if (closeCallback) {

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

@ -410,7 +410,7 @@ button.red-ui-button.red-ui-editor-node-appearance-button {
.red-ui-group-layout-picker { .red-ui-group-layout-picker {
padding: 5px; padding: 5px;
background: $primary-background; background: $secondary-background;
} }
.red-ui-group-layout-picker-cell-text { .red-ui-group-layout-picker-cell-text {
position: absolute; position: absolute;