Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-01-27 22:19:04 -05:00
Code Issues Activity

Toggle dev toolbar hitbox height when toolbar is visible (#9446)

Browse source 
* Toggle dev toolbar hitbox height when toolbar is visible

* Add hitbox above height const

---------

Co-authored-by: Florian Lefebvre <contact@florian-lefebvre.dev>
This commit is contained in:
Alex Nguyen 2023-12-29 18:59:01 +13:00 • committed by GitHub
parent a2977cbc5a
commit ede3f7fef6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/silent-wasps-learn.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Toggle dev toolbar hitbox height when toolbar is visible

9
packages/astro/src/runtime/client/dev-overlay/overlay.ts
View file

@ -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;
}
}