diff options
| author |  Alex Nguyen <dev@alexnguyen.co.nz>
| 2023-12-29 18:59:01 +1300 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2023-12-29 00:59:01 -0500 |
| commit | ede3f7fef6b43a08c9371f7a2531e2eef858b94d (patch) | |
| tree | 9e5ef0a0538e2201b00e4df77d635bd135f8353c | |
| parent | a2977cbc5af31f4e46a75070adc501abea34da3d (diff) | |
| download | astro-ede3f7fef6b43a08c9371f7a2531e2eef858b94d.tar.gz astro-ede3f7fef6b43a08c9371f7a2531e2eef858b94d.tar.zst astro-ede3f7fef6b43a08c9371f7a2531e2eef858b94d.zip | |
Toggle dev toolbar hitbox height when toolbar is visible (#9446)
* Toggle dev toolbar hitbox height when toolbar is visible
* Add hitbox above height const
---------
Co-authored-by: Florian Lefebvre <contact@florian-lefebvre.dev>
| -rw-r--r-- | .changeset/silent-wasps-learn.md | 5 | ||||
| -rw-r--r-- | packages/astro/src/runtime/client/dev-overlay/overlay.ts | 9 |
2 files changed, 12 insertions, 2 deletions
diff --git a/.changeset/silent-wasps-learn.md b/.changeset/silent-wasps-learn.md new file mode 100644 index 000000000..60f8d4c0e --- /dev/null +++ b/.changeset/silent-wasps-learn.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Toggle dev toolbar hitbox height when toolbar is visible diff --git a/packages/astro/src/runtime/client/dev-overlay/overlay.ts b/packages/astro/src/runtime/client/dev-overlay/overlay.ts index 91ba7e279..f85972418 100644 --- a/packages/astro/src/runtime/client/dev-overlay/overlay.ts +++ b/packages/astro/src/runtime/client/dev-overlay/overlay.ts @@ -18,6 +18,7 @@ export type DevOverlayPlugin = DevOverlayPluginDefinition & { const WS_EVENT_NAME = 'astro-dev-toolbar'; const WS_EVENT_NAME_DEPRECATED = 'astro-dev-overlay'; const HOVER_DELAY = 2 * 1000; +const DEVBAR_HITBOX_ABOVE = 42; export class AstroDevOverlay extends HTMLElement { shadowRoot: ShadowRoot; @@ -80,7 +81,7 @@ export class AstroDevOverlay extends HTMLElement { pointer-events: auto; } #dev-bar-hitbox-above { - height: 42px; + height: ${DEVBAR_HITBOX_ABOVE}px; } #dev-bar-hitbox-below { height: 16px; @@ -149,7 +150,7 @@ export class AstroDevOverlay extends HTMLElement { border-radius: 4px; padding: 4px 8px; position: absolute; - top: 4px; + top: ${4 - DEVBAR_HITBOX_ABOVE}px; font-size: 14px; opacity: 0; transition: opacity 0.2s ease-in-out 0s; @@ -492,16 +493,20 @@ export class AstroDevOverlay extends HTMLElement { setOverlayVisible(newStatus: boolean) { const barContainer = this.shadowRoot.querySelector<HTMLDivElement>('#bar-container'); const devBar = this.shadowRoot.querySelector<HTMLDivElement>('#dev-bar'); + const devBarHitboxAbove = + this.shadowRoot.querySelector<HTMLDivElement>('#dev-bar-hitbox-above'); if (newStatus === true) { this.devOverlay?.removeAttribute('data-hidden'); barContainer?.removeAttribute('inert'); devBar?.removeAttribute('tabindex'); + if (devBarHitboxAbove) devBarHitboxAbove.style.height = '0'; return; } if (newStatus === false) { this.devOverlay?.setAttribute('data-hidden', ''); barContainer?.setAttribute('inert', ''); devBar?.setAttribute('tabindex', '0'); + if (devBarHitboxAbove) devBarHitboxAbove.style.height = `${DEVBAR_HITBOX_ABOVE}px`; return; } } |