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",
value:colorHiddenInput.val()
}).appendTo(row);
var focusTarget = colorInput;
colorInput.on("change", function (e) {
var color = colorInput.val();
colorHiddenInput.val(color).trigger('change');
@ -188,8 +188,14 @@ RED.colorPicker = (function() {
refreshDisplay(colorHiddenInput.val())
},50);
colorPanel.show({
target: colorButton
target: colorButton,
onclose: function() {
colorButton.focus();
}
})
if (focusTarget) {
focusTarget.focus();
}
});
setTimeout(function() {
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) {
$(document).off("mousedown.red-ui-popover-panel-close");
$(document).off("keydown.red-ui-popover-panel-close");
panel.hide();
panel.css({
height: "auto"
@ -407,6 +408,16 @@ RED.popover = (function() {
}
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) {
if(!$(event.target).closest(panel).length && !$(event.target).closest(".red-ui-editor-dialog").length) {
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 {
padding: 5px;
background: $primary-background;
background: $secondary-background;
}
.red-ui-group-layout-picker-cell-text {
position: absolute;