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

[popover] Allow hover-type popovers to contain buttons

Browse Source
This commit is contained in:
Nick O'Leary 2020-05-06 16:12:07 +01:00
parent 9fbfc3d677
commit 010e20989a
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
2 changed files with 31 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -136,6 +136,23 @@ RED.popover = (function() {
closePopup(true); closePopup(true);
}); });
} }
if (trigger === 'hover' && options.interactive) {
div.on('mouseenter', function(e) {
clearTimeout(timer);
active = true;
})
div.on('mouseleave', function(e) {
if (timer) {
clearTimeout(timer);
}
if (active) {
timer = setTimeout(function() {
active = false;
closePopup();
},delay.hide);
}
})
}
if (instant) { if (instant) {
div.show(); div.show();
} else { } else {
@ -163,8 +180,10 @@ RED.popover = (function() {
if (trigger === 'hover') { if (trigger === 'hover') {
target.on('mouseenter',function(e) { target.on('mouseenter',function(e) {
clearTimeout(timer); clearTimeout(timer);
active = true; if (!active) {
timer = setTimeout(openPopup,delay.show); active = true;
timer = setTimeout(openPopup,delay.show);
}
}); });
target.on('mouseleave disabled', function(e) { target.on('mouseleave disabled', function(e) {
if (timer) { if (timer) {

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

@ -150,6 +150,16 @@
.red-ui-popover a.red-ui-button, .red-ui-popover a.red-ui-button,
.red-ui-popover button.red-ui-button { .red-ui-popover button.red-ui-button {
&:not(.primary) {
border-color: $popover-button-border-color;
background: $popover-background;
color: $popover-color !important;
}
&:not(.primary):not(.disabled):not(.ui-button-disabled):hover {
border-color: $popover-button-border-color-hover;
}
&.primary { &.primary {
border-color: $popover-button-border-color; border-color: $popover-button-border-color;
} }