Skip to content

Commit

Permalink
feat(overlay): Match the design's animations, shadows and general sty…
Browse files Browse the repository at this point in the history 
…ling (#9014)
  • Loading branch information
@Princesseuh
Princesseuh authored Nov 8, 2023
1 parent 6e30bdc commit d979b8f
Show file tree
Hide file tree
Showing 11 changed files with 251 additions and 56 deletions.
5 changes: 5 additions & 0 deletions .changeset/rude-eggs-hunt.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"astro": patch
---

Add animations, shadows and general styling tweaks to the Dev Overlay to better match the intended design.
1 change: 1 addition & 0 deletions packages/astro/src/@types/astro.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2318,6 +2318,7 @@ export interface DevOverlayPlugin {
name: string;
icon: Icon;
init?(canvas: ShadowRoot, eventTarget: EventTarget): void | Promise<void>;
beforeTogglingOff?(canvas: ShadowRoot): boolean | Promise<boolean>;
}

export type DevOverlayMetadata = Window &
Expand Down
4 changes: 2 additions & 2 deletions packages/astro/src/runtime/client/dev-overlay/entrypoint.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,13 +63,13 @@ document.addEventListener('DOMContentLoaded', async () => {
target.querySelector('.notification')?.toggleAttribute('data-active', newState);
});

eventTarget.addEventListener('toggle-plugin', (evt) => {
eventTarget.addEventListener('toggle-plugin', async (evt) => {
let newState = undefined;
if (evt instanceof CustomEvent) {
newState = evt.detail.state ?? true;
}

overlay.togglePluginStatus(plugin, newState);
await overlay.togglePluginStatus(plugin, newState);
});

return plugin;
Expand Down
80 changes: 51 additions & 29 deletions packages/astro/src/runtime/client/dev-overlay/overlay.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export class AstroDevOverlay extends HTMLElement {
display: flex;
gap: 8px;
align-items: center;
transition: bottom 0.2s ease-in-out;
transition: bottom 0.35s cubic-bezier(0.485, -0.050, 0.285, 1.505);
pointer-events: none;
}
Expand All @@ -72,11 +72,10 @@ export class AstroDevOverlay extends HTMLElement {
height: 56px;
overflow: hidden;
pointer-events: auto;
background: linear-gradient(180deg, #13151A 0%, rgba(19, 21, 26, 0.88) 100%);
box-shadow: 0px 0px 0px 0px #13151A4D;
border: 1px solid #343841;
border-radius: 9999px;
box-shadow: 0px 0px 0px 0px rgba(19, 21, 26, 0.30), 0px 1px 2px 0px rgba(19, 21, 26, 0.29), 0px 4px 4px 0px rgba(19, 21, 26, 0.26), 0px 10px 6px 0px rgba(19, 21, 26, 0.15), 0px 17px 7px 0px rgba(19, 21, 26, 0.04), 0px 26px 7px 0px rgba(19, 21, 26, 0.01);
}
#dev-bar .item {
Expand Down Expand Up @@ -187,16 +186,6 @@ export class AstroDevOverlay extends HTMLElement {
width: 1px;
}
astro-dev-overlay-plugin-canvas {
position: absolute;
top: 0;
left: 0;
}
astro-dev-overlay-plugin-canvas:not([data-active]) {
display: none;
}
#minimize-button {
width: 32px;
height: 32px;
Expand Down Expand Up @@ -263,15 +252,15 @@ export class AstroDevOverlay extends HTMLElement {
}

// Create plugin canvases
this.plugins.forEach((plugin) => {
this.plugins.forEach(async (plugin) => {
if (!this.hasBeenInitialized) {
console.log(`Creating plugin canvas for ${plugin.id}`);
const pluginCanvas = document.createElement('astro-dev-overlay-plugin-canvas');
pluginCanvas.dataset.pluginId = plugin.id;
this.shadowRoot?.append(pluginCanvas);
}

this.togglePluginStatus(plugin, plugin.active);
await this.togglePluginStatus(plugin, plugin.active);
});

// Init plugin lazily - This is safe to do here because only plugins that are not initialized yet will be affected
Expand Down Expand Up @@ -306,7 +295,7 @@ export class AstroDevOverlay extends HTMLElement {
await this.initPlugin(plugin);
}

this.togglePluginStatus(plugin);
await this.togglePluginStatus(plugin);
});
});

Expand Down Expand Up @@ -418,30 +407,52 @@ export class AstroDevOverlay extends HTMLElement {
}

getPluginCanvasById(id: string) {
return this.shadowRoot.querySelector(`astro-dev-overlay-plugin-canvas[data-plugin-id="${id}"]`);
return this.shadowRoot.querySelector<HTMLElement>(
`astro-dev-overlay-plugin-canvas[data-plugin-id="${id}"]`
);
}

togglePluginStatus(plugin: DevOverlayPlugin, status?: boolean) {
plugin.active = status ?? !plugin.active;
/**
* @param plugin The plugin to toggle the status of
* @param newStatus Optionally, force the plugin into a specific state
*/
async togglePluginStatus(plugin: DevOverlayPlugin, newStatus?: boolean) {
const pluginCanvas = this.getPluginCanvasById(plugin.id);
if (!pluginCanvas) return;

if (plugin.active && !newStatus && plugin.beforeTogglingOff) {
const shouldToggleOff = await plugin.beforeTogglingOff(pluginCanvas.shadowRoot!);

// If the plugin returned false, don't toggle it off, maybe the plugin showed a confirmation dialog or similar
if (!shouldToggleOff) return;
}

plugin.active = newStatus ?? !plugin.active;
const target = this.shadowRoot.querySelector(`[data-plugin-id="${plugin.id}"]`);
if (!target) return;
target.classList.toggle('active', plugin.active);
this.getPluginCanvasById(plugin.id)?.toggleAttribute('data-active', plugin.active);

plugin.eventTarget.dispatchEvent(
new CustomEvent('plugin-toggled', {
detail: {
state: plugin.active,
plugin,
},
})
);
pluginCanvas.style.display = plugin.active ? 'block' : 'none';

window.requestAnimationFrame(() => {
pluginCanvas.toggleAttribute('data-active', plugin.active);
plugin.eventTarget.dispatchEvent(
new CustomEvent('plugin-toggled', {
detail: {
state: plugin.active,
plugin,
},
})
);
});

if (import.meta.hot) {
import.meta.hot.send(`${WS_EVENT_NAME}:${plugin.id}:toggled`, { state: plugin.active });
}
}

/**
* @param newStatus Optionally, force the minimize button into a specific state
*/
toggleMinimizeButton(newStatus?: boolean) {
const minimizeButton = this.shadowRoot.querySelector<HTMLDivElement>('#minimize-button');
if (!minimizeButton) return;
Expand Down Expand Up @@ -493,4 +504,15 @@ export class DevOverlayCanvas extends HTMLElement {
super();
this.shadowRoot = this.attachShadow({ mode: 'open' });
}

connectedCallback() {
this.shadowRoot.innerHTML = `
<style>
:host {
position: absolute;
top: 0;
left: 0;
}
</style>`;
}
}
58 changes: 49 additions & 9 deletions packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,42 @@ export default {
name: 'Astro',
icon: 'astro:logo',
init(canvas) {
const astroWindow = document.createElement('astro-dev-overlay-window');
createWindow();

astroWindow.windowTitle = 'Astro';
astroWindow.windowIcon = 'astro:logo';
document.addEventListener('astro:after-swap', createWindow);

astroWindow.innerHTML = `
function createWindow() {
const style = document.createElement('style');
style.textContent = `
:host {
opacity: 0;
transition: opacity 0.15s ease-in-out;
}
:host([data-active]) {
opacity: 1;
}
@media screen and (prefers-reduced-motion: no-preference) {
:host astro-dev-overlay-window {
transform: translateY(55px) translate(-50%, -50%);
transition: transform 0.15s ease-in-out;
transform-origin: center bottom;
}
:host([data-active]) astro-dev-overlay-window {
transform: translateY(0) translate(-50%, -50%);
}
}
`;
canvas.append(style);

const astroWindow = document.createElement('astro-dev-overlay-window');

astroWindow.windowTitle = 'Astro';
astroWindow.windowIcon = 'astro:logo';

astroWindow.innerHTML = `
<style>
#buttons-container {
display: flex;
Expand Down Expand Up @@ -52,17 +82,27 @@ export default {
<div>
<p>Welcome to Astro!</p>
<div id="buttons-container">
<astro-dev-overlay-card icon="astro:logo" link="https://github.com/withastro/astro/issues/new/choose">Report an issue</astro-dev-overlay-card>
<astro-dev-overlay-card icon="astro:logo" link="https://docs.astro.build/en/getting-started/">View Astro Docs</astro-dev-overlay-card>
<astro-dev-overlay-card icon="bug" link="https://github.com/withastro/astro/issues/new/choose">Report an issue</astro-dev-overlay-card>
<astro-dev-overlay-card icon="file-search" link="https://docs.astro.build/en/getting-started/">View Astro Docs</astro-dev-overlay-card>
</div>
</div>
<footer>
<a href="https://discord.gg/astro" target="_blank">Join the Astro Discord</a>
<a href="https://astro.build" target="_blank">Visit Astro.build</a>
<a href="https://astro.build/chat" target="_blank">Join us on Discord</a>
<a href="https://astro.build" target="_blank">Visit the Astro website</a>
</footer>
</div>
`;

canvas.append(astroWindow);
canvas.append(astroWindow);
}
},
async beforeTogglingOff(canvas) {
canvas.host?.removeAttribute('data-active');

await new Promise((resolve) => {
canvas.host.addEventListener('transitionend', resolve);
});

return true;
},
} satisfies DevOverlayPlugin;
Loading

0 comments on commit d979b8f

Please sign in to comment.