Attach keyboard shortcut on window

unisonweb · Nov 30, 2023 · 72ce957 · 72ce957
1 parent 62e1c5d
commit 72ce957
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 8 deletions.
diff --git a/src/Lib/OnClickOutside.js b/src/Lib/OnClickOutside.js
@@ -9,13 +9,13 @@ class OnClickOutside extends HTMLElement {
 
  connectedCallback() {
  this.onMouseDown = (e) => {
- const style = window.getComputedStyle(this);
-
  // If the element isn't visible, there's no point in triggering the
  // clickoutside event. This is useful when multiple variants of a
  // clickoutside is active for the same UI (one for desktop and one for
  // mobile for instance).
- if (style.display === 'none' || this.offsetParent === null) {
+ const style = window.getComputedStyle(this);
+
+ if (style.display === "none" || this.offsetParent === null) {
  return;
  }
 

diff --git a/src/UI/ModalOverlay.js b/src/UI/ModalOverlay.js
@@ -14,22 +14,28 @@ class ModalOverlay extends HTMLElement {
  }
 
  onKeydown(ev) {
+ // If the element isn't visible, there's no point in triggering the escape event.
+ const style = window.getComputedStyle(this);
+ if (style.display === "none" || this.offsetParent === null) {
+ return;
+ }
+
  if (ev.key === "Escape") {
  ev.preventDefault();
  ev.stopPropagation();
 
- this.dispatchEvent(new CustomEvent('escape'));
+ this.dispatchEvent(new CustomEvent("escape"));
  }
  }
 
  connectedCallback() {
  this.firstChild.focus();
 
- this.addEventListener("keydown", this.onKeydown);
+ window.addEventListener("keydown", this.onKeydown);
  }
 
  disconnectedCallback() {
- this.removeEventListener("keydown", this.onKeydown);
+ window.removeEventListener("keydown", this.onKeydown);
  }
 }
 

diff --git a/src/css/ui/components/page-header.css b/src/css/ui/components/page-header.css
@@ -31,13 +31,17 @@
 
 .page-header.view-mode_regular .project-name {
  --c-color_project-name_handle: var(--c-color_page-header_text_subdued);
- --c-color_project-name_separator: var(--c-color_page-header_text_very-subdued);
+ --c-color_project-name_separator: var(
+ --c-color_page-header_text_very-subdued
+ );
  --c-color_project-name_slug: var(--c-color_page-header_text);
 }
 
 .page-header.view-mode_regular .project-name-listing {
  --c-color_project-name-listing_private-icon: var(--color-blue-3);
- --c-color_project-name-listing_private-icon_background: var(--color-blue-3-25pct);
+ --c-color_project-name-listing_private-icon_background: var(
+ --color-blue-3-25pct
+ );
 }
 
 .page-header.view-mode_regular .navigation {