Disable draggable regions when context menu is open

This commit is contained in:
trevor-signal 2023-11-27 18:13:28 -05:00 committed by GitHub
parent 135529d350
commit bb6e011488
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 25 additions and 56 deletions

View file

@ -876,3 +876,10 @@ $rtl-icon-map: (
} }
} }
} }
@mixin draggable-region {
-webkit-app-region: drag;
body.context-menu-open & {
-webkit-app-region: no-drag;
}
}

View file

@ -10,10 +10,8 @@ body {
// It'd be great if we could use the `:fullscreen` selector here, but that does not seem // It'd be great if we could use the `:fullscreen` selector here, but that does not seem
// to work with Electron, at least on macOS. // to work with Electron, at least on macOS.
--title-bar-drag-area-height: 0px; // Needs to have a unit to work with `calc()`. --title-bar-drag-area-height: 0px; // Needs to have a unit to work with `calc()`.
--draggable-app-region: initial;
&.os-macos:not(.full-screen) { &.os-macos:not(.full-screen) {
--title-bar-drag-area-height: calc(28px / var(--zoom-factor)); --title-bar-drag-area-height: calc(28px / var(--zoom-factor));
--draggable-app-region: drag;
} }
--window-height: 100vh; --window-height: 100vh;

View file

@ -7,7 +7,7 @@
justify-content: space-between; justify-content: space-between;
padding-block: 4px; padding-block: 4px;
padding-inline: 16px; padding-inline: 16px;
-webkit-app-region: drag; @include draggable-region;
&__text { &__text {
@include font-body-2; @include font-body-2;

View file

@ -32,8 +32,7 @@
--button-spacing: 4px; --button-spacing: 4px;
} }
-webkit-app-region: var(--draggable-app-region); @include draggable-region;
// In Electron v23+, clicking on a `drag` region in an unfocused window may not // In Electron v23+, clicking on a `drag` region in an unfocused window may not
// propagate clicks to no-drag elements that have a higher CSS order; this avoids that // propagate clicks to no-drag elements that have a higher CSS order; this avoids that
// scenario for interactive elements (e.g. IncomingCallBar) which overlap the // scenario for interactive elements (e.g. IncomingCallBar) which overlap the
@ -57,56 +56,6 @@
background-color: $color-gray-95; background-color: $color-gray-95;
} }
&__back-icon {
$transition: 250ms ease-out;
display: inline-block;
width: 20px;
height: 20px;
min-width: 20px;
margin-inline-start: -20px;
vertical-align: text-bottom;
border: none;
opacity: 0;
// while it is invisible, allow it to be draggable
-webkit-app-region: drag;
transition: margin-inline-start $transition, opacity $transition;
&:disabled {
cursor: default;
}
&--show {
opacity: 1;
margin-inline: 24px 6px;
-webkit-app-region: no-drag;
}
@include light-theme {
@include color-svg(
'../images/icons/v3/chevron/chevron-left.svg',
$color-gray-90
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/chevron/chevron-left.svg',
$color-gray-02
);
}
@include keyboard-mode {
&:focus {
background-color: $color-ultramarine;
}
}
@include dark-keyboard-mode {
&:focus {
background-color: $color-ultramarine-light;
}
}
}
&__header { &__header {
$padding: 4px 12px; $padding: 4px 12px;

View file

@ -25,7 +25,7 @@
align-items: start; align-items: start;
flex-shrink: 0; flex-shrink: 0;
padding-bottom: 6px; padding-bottom: 6px;
-webkit-app-region: drag; @include draggable-region;
.NavTabs__Toggle { .NavTabs__Toggle {
width: $NavTabs__width; width: $NavTabs__width;

View file

@ -97,6 +97,21 @@ export function ContextMenu<T>({
} }
); );
// In Electron v23+, new elements added to the DOM may not trigger a recalculation of
// draggable regions, so if a ContextMenu is shown on top of a draggable region, its
// buttons may be unclickable. We add a class so that we can disable those draggable
// regions while the context menu is shown. It has the added benefit of ensuring that
// click events outside of the context menu onto an otherwise draggable region are
// propagated and trigger the menu to close.
useEffect(() => {
document.body.classList.toggle('context-menu-open', isMenuShowing);
}, [isMenuShowing]);
useEffect(() => {
// Remove it on unmount in case the component is unmounted when the menu is open
return () => document.body.classList.remove('context-menu-open');
}, []);
useEffect(() => { useEffect(() => {
if (onMenuShowingChanged) { if (onMenuShowingChanged) {
onMenuShowingChanged(isMenuShowing); onMenuShowingChanged(isMenuShowing);