mirror of
https://github.com/withastro/astro.git
synced 2025-03-31 23:31:30 -05:00
Overlay look-and-feel polish (#9230)
* dev overlay polish * increase size a bit
This commit is contained in:
Fred K. Schott
GitHub
parent
c495f1ac17
commit
60cfa49e44
10 changed files with 319 additions and 443 deletions
5
.changeset/mighty-rats-flow.md
Normal file
5
.changeset/mighty-rats-flow.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
'astro': patch
|
||||
---
|
||||
|
||||
Update the look and feel of the dev overlay
|
||||
|
|
@ -88,7 +88,7 @@ document.addEventListener('DOMContentLoaded', async () => {
|
|||
newState = evt.detail.state ?? true;
|
||||
}
|
||||
|
||||
await overlay.togglePluginStatus(plugin, newState);
|
||||
await overlay.setPluginStatus(plugin, newState);
|
||||
});
|
||||
|
||||
return plugin;
|
||||
|
|
@ -113,9 +113,13 @@ document.addEventListener('DOMContentLoaded', async () => {
|
|||
border: 1px solid rgba(52, 56, 65, 1);
|
||||
border-radius: 12px;
|
||||
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);
|
||||
width: 180px;
|
||||
width: 192px;
|
||||
padding: 8px;
|
||||
z-index: 9999999999;
|
||||
transform: translate(-50%, 0%);
|
||||
position: fixed;
|
||||
bottom: 72px;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.notification {
|
||||
|
|
@ -139,20 +143,19 @@ document.addEventListener('DOMContentLoaded', async () => {
|
|||
background: transparent;
|
||||
color: white;
|
||||
font-family: system-ui, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.2;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
#dropdown button:hover, #dropdown button:focus-visible {
|
||||
background: rgba(27, 30, 36, 1);
|
||||
background: #FFFFFF20;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -162,8 +165,9 @@ document.addEventListener('DOMContentLoaded', async () => {
|
|||
|
||||
#dropdown .icon {
|
||||
position: relative;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
padding: 1px;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
|
|
@ -202,9 +206,6 @@ document.addEventListener('DOMContentLoaded', async () => {
|
|||
|
||||
dropdown.append(buttonContainer);
|
||||
|
||||
eventTarget.addEventListener('plugin-toggled', positionDropdown);
|
||||
window.addEventListener('resize', positionDropdown);
|
||||
|
||||
plugin.eventTarget.addEventListener('toggle-notification', (evt) => {
|
||||
if (!(evt instanceof CustomEvent)) return;
|
||||
|
||||
|
|
@ -231,21 +232,6 @@ document.addEventListener('DOMContentLoaded', async () => {
|
|||
|
||||
return icon;
|
||||
}
|
||||
|
||||
function positionDropdown() {
|
||||
const moreButtonRect = overlay.shadowRoot
|
||||
.querySelector('[data-plugin-id="astro:more"]')
|
||||
?.getBoundingClientRect();
|
||||
const dropdownRect = dropdown.getBoundingClientRect();
|
||||
|
||||
if (moreButtonRect && dropdownRect) {
|
||||
dropdown.style.position = 'absolute';
|
||||
dropdown.style.top = `${moreButtonRect.top - dropdownRect.height - 12}px`;
|
||||
dropdown.style.left = `${
|
||||
moreButtonRect.left + moreButtonRect.width - dropdownRect.width
|
||||
}px`;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
} satisfies DevOverlayPluginDefinition;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
/* eslint-disable no-console */
|
||||
import type {
|
||||
DevOverlayMetadata,
|
||||
DevOverlayPlugin as DevOverlayPluginDefinition,
|
||||
} from '../../../@types/astro.js';
|
||||
import { settings } from './settings.js';
|
||||
|
|
@ -15,16 +14,14 @@ export type DevOverlayPlugin = DevOverlayPluginDefinition & {
|
|||
};
|
||||
eventTarget: EventTarget;
|
||||
};
|
||||
|
||||
const WS_EVENT_NAME = 'astro-dev-overlay';
|
||||
const HOVER_DELAY = 2 * 1000;
|
||||
|
||||
export class AstroDevOverlay extends HTMLElement {
|
||||
shadowRoot: ShadowRoot;
|
||||
hoverTimeout: number | undefined;
|
||||
isHidden: () => boolean = () => this.devOverlay?.hasAttribute('data-hidden') ?? true;
|
||||
delayedHideTimeout: number | undefined;
|
||||
devOverlay: HTMLDivElement | undefined;
|
||||
plugins: DevOverlayPlugin[] = [];
|
||||
HOVER_DELAY = 750;
|
||||
hasBeenInitialized = false;
|
||||
// TODO: This should be dynamic based on the screen size or at least configurable, erika - 2023-11-29
|
||||
customPluginsToShow = 3;
|
||||
|
|
@ -34,12 +31,13 @@ export class AstroDevOverlay extends HTMLElement {
|
|||
this.shadowRoot = this.attachShadow({ mode: 'open' });
|
||||
}
|
||||
|
||||
// Happens whenever the component is connected to the DOM
|
||||
// When view transitions are enabled, this happens every time the view changes
|
||||
async connectedCallback() {
|
||||
if (!this.hasBeenInitialized) {
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
/**
|
||||
* All one-time DOM setup runs through here. Only ever call this once,
|
||||
* in connectedCallback(), and protect it from being called again.
|
||||
*/
|
||||
init() {
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
:host {
|
||||
/* Important! Reset all inherited styles to initial */
|
||||
all: initial;
|
||||
|
|
@ -47,40 +45,46 @@ export class AstroDevOverlay extends HTMLElement {
|
|||
view-transition-name: astro-dev-overlay;
|
||||
display: contents;
|
||||
}
|
||||
|
||||
|
||||
::view-transition-old(astro-dev-overlay),
|
||||
::view-transition-new(astro-dev-overlay) {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
|
||||
#dev-overlay {
|
||||
position: fixed;
|
||||
bottom: 7.5%;
|
||||
left: calc(50% + 32px);
|
||||
bottom: 0px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0%);
|
||||
z-index: 9999999999;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
transition: bottom 0.35s cubic-bezier(0.485, -0.050, 0.285, 1.505);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
#dev-overlay[data-hidden] {
|
||||
bottom: -40px;
|
||||
}
|
||||
|
||||
#dev-overlay[data-hidden]:hover, #dev-overlay[data-hidden]:focus-within {
|
||||
bottom: -35px;
|
||||
cursor: pointer;
|
||||
|
||||
#dev-overlay[data-hidden] #dev-bar .item {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#dev-overlay[data-hidden] #minimize-button {
|
||||
visibility: hidden;
|
||||
|
||||
#dev-bar-hitbox-above,
|
||||
#dev-bar-hitbox-below {
|
||||
width: 100%;
|
||||
pointer-events: auto;
|
||||
}
|
||||
#dev-bar-hitbox-above {
|
||||
height: 42px;
|
||||
}
|
||||
#dev-bar-hitbox-below {
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
#dev-bar {
|
||||
height: 56px;
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
pointer-events: auto;
|
||||
background: linear-gradient(180deg, #13151A 0%, rgba(19, 21, 26, 0.88) 100%);
|
||||
|
|
@ -99,7 +103,7 @@ export class AstroDevOverlay extends HTMLElement {
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 64px;
|
||||
width: 44px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: white;
|
||||
|
|
@ -111,40 +115,45 @@ export class AstroDevOverlay extends HTMLElement {
|
|||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
transition: opacity 0.2s ease-out 0s;
|
||||
}
|
||||
|
||||
|
||||
#dev-bar #bar-container .item:hover, #dev-bar #bar-container .item:focus-visible {
|
||||
background: rgba(27, 30, 36, 1);
|
||||
background: #FFFFFF20;
|
||||
cursor: pointer;
|
||||
outline-offset: -3px;
|
||||
}
|
||||
|
||||
|
||||
#dev-bar .item:first-of-type {
|
||||
border-top-left-radius: 9999px;
|
||||
border-bottom-left-radius: 9999px;
|
||||
width: 42px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
|
||||
#dev-bar .item:last-of-type {
|
||||
border-top-right-radius: 9999px;
|
||||
border-bottom-right-radius: 9999px;
|
||||
width: 42px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
#dev-bar #bar-container .item.active {
|
||||
background: rgba(71, 78, 94, 1);
|
||||
}
|
||||
|
||||
|
||||
#dev-bar .item-tooltip {
|
||||
background: linear-gradient(0deg, #13151A, #13151A), linear-gradient(0deg, #343841, #343841);
|
||||
border: 1px solid rgba(52, 56, 65, 1);
|
||||
border-radius: 4px;
|
||||
padding: 4px 8px;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
top: 4px;
|
||||
font-size: 14px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-in-out 0s;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#dev-bar .item-tooltip::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
|
|
@ -154,14 +163,15 @@ export class AstroDevOverlay extends HTMLElement {
|
|||
border-right: 5px solid transparent;
|
||||
border-top: 5px solid #343841;
|
||||
}
|
||||
|
||||
|
||||
#dev-bar .item:hover .item-tooltip, #dev-bar .item:not(.active):focus-visible .item-tooltip {
|
||||
transition: opacity 0.2s ease-in-out 200ms;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
#dev-bar .item:hover .item-tooltip, #dev-bar .item:not(.active):focus-visible .item-tooltip {
|
||||
#dev-bar .item:hover .item-tooltip,
|
||||
#dev-bar .item:not(.active):focus-visible .item-tooltip {
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
|
|
@ -169,17 +179,17 @@ export class AstroDevOverlay extends HTMLElement {
|
|||
#dev-bar #bar-container .item.active .notification {
|
||||
border-color: rgba(71, 78, 94, 1);
|
||||
}
|
||||
|
||||
|
||||
#dev-bar .item .icon {
|
||||
position: relative;
|
||||
max-width: 24px;
|
||||
max-height: 24px;
|
||||
max-width: 20px;
|
||||
max-height: 20px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
||||
#dev-bar .item svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
|
|
@ -201,72 +211,23 @@ export class AstroDevOverlay extends HTMLElement {
|
|||
border: 1px solid rgba(19, 21, 26, 1);
|
||||
background: #B33E66;
|
||||
}
|
||||
|
||||
|
||||
#dev-bar .item .notification[data-active] {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
#dev-bar #bar-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
#dev-bar .separator {
|
||||
background: rgba(52, 56, 65, 1);
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
#minimize-button {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: rgba(255, 255, 255, 0.75);
|
||||
border-radius: 9999px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
pointer-events: auto;
|
||||
border: 0;
|
||||
color: #13151A;
|
||||
font-family: system-ui, sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#minimize-button:hover, #minimize-button:focus {
|
||||
cursor: pointer;
|
||||
background: rgba(255, 255, 255, 0.90);
|
||||
}
|
||||
|
||||
#minimize-button svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="dev-overlay"${
|
||||
((window as DevOverlayMetadata)?.__astro_dev_overlay__?.defaultState ?? 'minimized') ===
|
||||
'minimized'
|
||||
? ' data-hidden '
|
||||
: ''
|
||||
}>
|
||||
<div id="dev-overlay" data-hidden>
|
||||
<div id="dev-bar-hitbox-above"></div>
|
||||
<div id="dev-bar">
|
||||
<div id="bar-container">
|
||||
${this.plugins
|
||||
|
|
@ -297,38 +258,45 @@ export class AstroDevOverlay extends HTMLElement {
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
<button id="minimize-button">${getIconElement('arrow-down')?.outerHTML}</button>
|
||||
<div id="dev-bar-hitbox-below"></div>
|
||||
</div>`;
|
||||
this.devOverlay = this.shadowRoot.querySelector<HTMLDivElement>('#dev-overlay')!;
|
||||
this.attachEvents();
|
||||
}
|
||||
|
||||
this.devOverlay = this.shadowRoot.querySelector<HTMLDivElement>('#dev-overlay')!;
|
||||
this.attachEvents();
|
||||
|
||||
// Create plugin canvases
|
||||
this.plugins.forEach(async (plugin) => {
|
||||
if (!this.hasBeenInitialized) {
|
||||
if (settings.config.verbose) 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);
|
||||
}
|
||||
|
||||
await this.togglePluginStatus(plugin, plugin.active);
|
||||
if (settings.config.verbose) 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);
|
||||
});
|
||||
|
||||
// Init plugin lazily - This is safe to do here because only plugins that are not initialized yet will be affected
|
||||
// Init plugin lazily, so that the page can load faster.
|
||||
// Fallback to setTimeout for Safari (sad!)
|
||||
if ('requestIdleCallback' in window) {
|
||||
window.requestIdleCallback(async () => {
|
||||
await this.initAllPlugins();
|
||||
this.plugins.map((plugin) => this.initPlugin(plugin));
|
||||
});
|
||||
} else {
|
||||
// Fallback to setTimeout for.. Safari...
|
||||
setTimeout(async () => {
|
||||
await this.initAllPlugins();
|
||||
}, 200);
|
||||
this.plugins.map((plugin) => this.initPlugin(plugin));
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
|
||||
this.hasBeenInitialized = true;
|
||||
// This is called whenever the component is connected to the DOM.
|
||||
// This happens on first page load, and on each page change when
|
||||
// view transitions are used.
|
||||
connectedCallback() {
|
||||
if (!this.hasBeenInitialized) {
|
||||
this.init();
|
||||
this.hasBeenInitialized = true;
|
||||
}
|
||||
// Run this every time to make sure the correct plugin is open.
|
||||
this.plugins.forEach(async (plugin) => {
|
||||
await this.setPluginStatus(plugin, plugin.active);
|
||||
});
|
||||
}
|
||||
|
||||
attachEvents() {
|
||||
|
|
@ -337,95 +305,70 @@ export class AstroDevOverlay extends HTMLElement {
|
|||
item.addEventListener('click', async (e) => {
|
||||
const target = e.currentTarget;
|
||||
if (!target || !(target instanceof HTMLElement)) return;
|
||||
|
||||
const id = target.dataset.pluginId;
|
||||
if (!id) return;
|
||||
|
||||
const plugin = this.getPluginById(id);
|
||||
if (!plugin) return;
|
||||
|
||||
if (plugin.status === 'loading') {
|
||||
await this.initPlugin(plugin);
|
||||
}
|
||||
|
||||
await this.togglePluginStatus(plugin);
|
||||
});
|
||||
});
|
||||
|
||||
const minimizeButton = this.shadowRoot.querySelector<HTMLDivElement>('#minimize-button');
|
||||
if (minimizeButton && this.devOverlay) {
|
||||
minimizeButton.addEventListener('click', () => {
|
||||
this.toggleOverlay(false);
|
||||
this.toggleMinimizeButton(false);
|
||||
});
|
||||
}
|
||||
|
||||
const devBar = this.shadowRoot.querySelector<HTMLDivElement>('#dev-bar');
|
||||
if (devBar) {
|
||||
// On hover:
|
||||
// - If the overlay is hidden, show it after the hover delay
|
||||
// - If the overlay is visible, show the minimize button after the hover delay
|
||||
(['mouseenter', 'focusin'] as const).forEach((event) => {
|
||||
devBar.addEventListener(event, () => {
|
||||
if (this.hoverTimeout) {
|
||||
window.clearTimeout(this.hoverTimeout);
|
||||
}
|
||||
|
||||
if (this.isHidden()) {
|
||||
this.hoverTimeout = window.setTimeout(() => {
|
||||
this.toggleOverlay(true);
|
||||
}, this.HOVER_DELAY + 200); // Slightly higher delay here to prevent users opening the overlay by accident
|
||||
} else {
|
||||
this.hoverTimeout = window.setTimeout(() => {
|
||||
this.toggleMinimizeButton(true);
|
||||
}, this.HOVER_DELAY);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// On unhover:
|
||||
// - Reset every timeout, as to avoid showing the overlay/minimize button when the user didn't really want to hover
|
||||
// - If the overlay is visible, hide the minimize button after the hover delay
|
||||
devBar.addEventListener('mouseleave', () => {
|
||||
if (this.hoverTimeout) {
|
||||
window.clearTimeout(this.hoverTimeout);
|
||||
}
|
||||
|
||||
if (!this.isHidden()) {
|
||||
this.hoverTimeout = window.setTimeout(() => {
|
||||
this.toggleMinimizeButton(false);
|
||||
}, this.HOVER_DELAY);
|
||||
(['mouseenter', 'focusin'] as const).forEach((event) => {
|
||||
this.devOverlay!.addEventListener(event, () => {
|
||||
this.clearDelayedHide();
|
||||
if (this.isHidden()) {
|
||||
this.setOverlayVisible(true);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// On click, show the overlay if it's hidden, it's likely the user wants to interact with it
|
||||
devBar.addEventListener('click', () => {
|
||||
(['mouseleave', 'focusout'] as const).forEach((event) => {
|
||||
this.devOverlay!.addEventListener(event, () => {
|
||||
this.clearDelayedHide();
|
||||
if (this.getActivePlugin() || this.isHidden()) {
|
||||
return;
|
||||
}
|
||||
this.triggerDelayedHide();
|
||||
});
|
||||
});
|
||||
|
||||
// On click, show the overlay if it's hidden, it's likely the user wants to interact with it
|
||||
this.shadowRoot.addEventListener('click', () => {
|
||||
if (!this.isHidden()) return;
|
||||
this.setOverlayVisible(true);
|
||||
});
|
||||
|
||||
this.devOverlay!.addEventListener('keyup', (event) => {
|
||||
if (event.code === 'Space' || event.code === 'Enter') {
|
||||
if (!this.isHidden()) return;
|
||||
this.toggleOverlay(true);
|
||||
});
|
||||
this.setOverlayVisible(true);
|
||||
}
|
||||
if (event.key === 'Escape') {
|
||||
if (this.isHidden()) return;
|
||||
if (this.getActivePlugin()) return;
|
||||
this.setOverlayVisible(false);
|
||||
}
|
||||
});
|
||||
|
||||
devBar.addEventListener('keyup', (event) => {
|
||||
if (event.code === 'Space' || event.code === 'Enter') {
|
||||
if (!this.isHidden()) return;
|
||||
this.toggleOverlay(true);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async initAllPlugins() {
|
||||
await Promise.all(
|
||||
this.plugins
|
||||
.filter((plugin) => plugin.status === 'loading')
|
||||
.map((plugin) => this.initPlugin(plugin))
|
||||
);
|
||||
document.addEventListener('keyup', (event) => {
|
||||
if (event.key !== 'Escape') {
|
||||
return;
|
||||
}
|
||||
if (this.isHidden()) {
|
||||
return;
|
||||
}
|
||||
const activePlugin = this.getActivePlugin();
|
||||
if (activePlugin) {
|
||||
this.setPluginStatus(activePlugin, false);
|
||||
return;
|
||||
}
|
||||
this.setOverlayVisible(false);
|
||||
});
|
||||
}
|
||||
|
||||
async initPlugin(plugin: DevOverlayPlugin) {
|
||||
if (plugin.status === 'ready') return;
|
||||
|
||||
const shadowRoot = this.getPluginCanvasById(plugin.id)!.shadowRoot!;
|
||||
|
||||
plugin.status = 'loading';
|
||||
try {
|
||||
if (settings.config.verbose) console.info(`Initializing plugin ${plugin.id}`);
|
||||
|
||||
|
|
@ -466,11 +409,23 @@ export class AstroDevOverlay extends HTMLElement {
|
|||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* @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) {
|
||||
async togglePluginStatus(plugin: DevOverlayPlugin) {
|
||||
const activePlugin = this.getActivePlugin();
|
||||
if (activePlugin) {
|
||||
await this.setPluginStatus(activePlugin, false);
|
||||
}
|
||||
// TODO(fks): Handle a plugin that hasn't loaded yet.
|
||||
// Currently, this will just do nothing.
|
||||
if (plugin.status !== 'ready') return;
|
||||
// Open the selected plugin. If the selected plugin was
|
||||
// already the active plugin then the desired outcome
|
||||
// was to close that plugin, so no action needed.
|
||||
if (plugin !== activePlugin) {
|
||||
await this.setPluginStatus(plugin, true);
|
||||
}
|
||||
}
|
||||
|
||||
async setPluginStatus(plugin: DevOverlayPlugin, newStatus: boolean) {
|
||||
const pluginCanvas = this.getPluginCanvasById(plugin.id);
|
||||
if (!pluginCanvas) return;
|
||||
|
||||
|
|
@ -495,68 +450,58 @@ export class AstroDevOverlay extends HTMLElement {
|
|||
moreBarButton.classList.toggle('active', plugin.active);
|
||||
}
|
||||
|
||||
pluginCanvas.style.display = plugin.active ? 'block' : 'none';
|
||||
if (plugin.active) {
|
||||
pluginCanvas.style.display = 'block';
|
||||
pluginCanvas.setAttribute('data-active', '');
|
||||
} else {
|
||||
pluginCanvas.style.display = 'none';
|
||||
pluginCanvas.removeAttribute('data-active');
|
||||
}
|
||||
|
||||
window.requestAnimationFrame(() => {
|
||||
pluginCanvas.toggleAttribute('data-active', plugin.active);
|
||||
plugin.eventTarget.dispatchEvent(
|
||||
new CustomEvent('plugin-toggled', {
|
||||
detail: {
|
||||
state: plugin.active,
|
||||
plugin,
|
||||
},
|
||||
})
|
||||
);
|
||||
});
|
||||
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;
|
||||
|
||||
if (newStatus !== undefined) {
|
||||
if (newStatus === true) {
|
||||
minimizeButton.removeAttribute('inert');
|
||||
minimizeButton.style.opacity = '1';
|
||||
} else {
|
||||
minimizeButton.setAttribute('inert', '');
|
||||
minimizeButton.style.opacity = '0';
|
||||
}
|
||||
} else {
|
||||
minimizeButton.toggleAttribute('inert');
|
||||
minimizeButton.style.opacity = minimizeButton.hasAttribute('inert') ? '0' : '1';
|
||||
}
|
||||
isHidden(): boolean {
|
||||
return this.devOverlay?.hasAttribute('data-hidden') ?? true;
|
||||
}
|
||||
|
||||
toggleOverlay(newStatus?: boolean) {
|
||||
getActivePlugin(): DevOverlayPlugin | undefined {
|
||||
return this.plugins.find((plugin) => plugin.active);
|
||||
}
|
||||
clearDelayedHide() {
|
||||
window.clearTimeout(this.delayedHideTimeout);
|
||||
this.delayedHideTimeout = undefined;
|
||||
}
|
||||
triggerDelayedHide() {
|
||||
this.clearDelayedHide();
|
||||
this.delayedHideTimeout = window.setTimeout(() => {
|
||||
this.setOverlayVisible(false);
|
||||
this.delayedHideTimeout = undefined;
|
||||
}, HOVER_DELAY);
|
||||
}
|
||||
setOverlayVisible(newStatus: boolean) {
|
||||
const barContainer = this.shadowRoot.querySelector<HTMLDivElement>('#bar-container');
|
||||
const devBar = this.shadowRoot.querySelector<HTMLDivElement>('#dev-bar');
|
||||
|
||||
if (newStatus !== undefined) {
|
||||
if (newStatus === true) {
|
||||
this.devOverlay?.removeAttribute('data-hidden');
|
||||
barContainer?.removeAttribute('inert');
|
||||
devBar?.removeAttribute('tabindex');
|
||||
} else {
|
||||
this.devOverlay?.setAttribute('data-hidden', '');
|
||||
barContainer?.setAttribute('inert', '');
|
||||
devBar?.setAttribute('tabindex', '0');
|
||||
}
|
||||
} else {
|
||||
this.devOverlay?.toggleAttribute('data-hidden');
|
||||
barContainer?.toggleAttribute('inert');
|
||||
if (this.isHidden()) {
|
||||
devBar?.setAttribute('tabindex', '0');
|
||||
} else {
|
||||
devBar?.removeAttribute('tabindex');
|
||||
}
|
||||
if (newStatus === true) {
|
||||
this.devOverlay?.removeAttribute('data-hidden');
|
||||
barContainer?.removeAttribute('inert');
|
||||
devBar?.removeAttribute('tabindex');
|
||||
return;
|
||||
}
|
||||
if (newStatus === false) {
|
||||
this.devOverlay?.setAttribute('data-hidden', '');
|
||||
barContainer?.setAttribute('inert', '');
|
||||
devBar?.setAttribute('tabindex', '0');
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import type { DevOverlayMetadata, DevOverlayPlugin } from '../../../../@types/astro.js';
|
||||
import { isDefinedIcon, type Icon } from '../ui-library/icons.js';
|
||||
import { colorForIntegration, iconForIntegration } from './utils/icons.js';
|
||||
import { createWindowWithTransition, waitForTransition } from './utils/window.js';
|
||||
import { createWindowElement } from './utils/window.js';
|
||||
|
||||
const astroLogo =
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 99 26" width="100"><path fill="#fff" d="M6.70402 22.1453c-1.17459-1.0737-1.51748-3.3297-1.02811-4.9641.84853 1.0304 2.02424 1.3569 3.24204 1.5411 1.88005.2844 3.72635.178 5.47285-.6813.1998-.0984.3844-.2292.6027-.3617.1639.4755.2065.9554.1493 1.4439-.1392 1.1898-.7313 2.1088-1.673 2.8054-.3765.2787-.775.5278-1.1639.7905-1.1948.8075-1.518 1.7544-1.0691 3.1318.0107.0336.0202.0671.0444.149-.6101-.273-1.0557-.6705-1.39518-1.1931-.3586-.5517-.52921-1.1619-.53819-1.8221-.00449-.3213-.00449-.6455-.0477-.9623-.10551-.7722-.46804-1.118-1.15102-1.1379-.70094-.0205-1.2554.4129-1.40244 1.0953-.01122.0523-.02749.1041-.04377.1649l.00112.0006Z"/><path fill="url(#paint0_linear_386_2739)" d="M6.70402 22.1453c-1.17459-1.0737-1.51748-3.3297-1.02811-4.9641.84853 1.0304 2.02424 1.3569 3.24204 1.5411 1.88005.2844 3.72635.178 5.47285-.6813.1998-.0984.3844-.2292.6027-.3617.1639.4755.2065.9554.1493 1.4439-.1392 1.1898-.7313 2.1088-1.673 2.8054-.3765.2787-.775.5278-1.1639.7905-1.1948.8075-1.518 1.7544-1.0691 3.1318.0107.0336.0202.0671.0444.149-.6101-.273-1.0557-.6705-1.39518-1.1931-.3586-.5517-.52921-1.1619-.53819-1.8221-.00449-.3213-.00449-.6455-.0477-.9623-.10551-.7722-.46804-1.118-1.15102-1.1379-.70094-.0205-1.2554.4129-1.40244 1.0953-.01122.0523-.02749.1041-.04377.1649l.00112.0006Z"/><path fill="#fff" d="M0 16.909s3.47815-1.6944 6.96603-1.6944l2.62973-8.13858c.09846-.39359.38592-.66106.71044-.66106.3246 0 .612.26747.7105.66106l2.6297 8.13858c4.1309 0 6.966 1.6944 6.966 1.6944S14.7045.814589 14.693.782298C14.5234.306461 14.2371 0 13.8512 0H6.76183c-.38593 0-.66063.306461-.84174.782298C5.90733.81398 0 16.909 0 16.909ZM36.671 11.7318c0 1.4262-1.7739 2.2779-4.2302 2.2779-1.5985 0-2.1638-.3962-2.1638-1.2281 0-.8715.7018-1.2875 2.3003-1.2875 1.4426 0 2.6707.0198 4.0937.1981v.0396Zm.0195-1.7629c-.8772-.19808-2.2028-.31693-3.7818-.31693-4.6006 0-6.7644 1.08943-6.7644 3.62483 0 2.6344 1.4815 3.6446 4.9125 3.6446 2.9046 0 4.8735-.7328 5.5947-2.5354h.117c-.0195.4358-.039.8716-.039 1.2083 0 .931.156 1.0102.9162 1.0102h3.5869c-.1949-.5546-.3119-2.1194-.3119-3.4663 0-1.446.0585-2.5355.0585-4.00123 0-2.99098-1.7934-4.89253-7.4077-4.89253-2.4173 0-5.1074.41596-7.1543 1.03.1949.81213.4679 2.45617.6043 3.5258 1.774-.83193 4.2887-1.18847 6.2381-1.18847 2.6902 0 3.4309.61404 3.4309 1.86193v.4952ZM46.5325 12.5637c-.4874.0594-1.1502.0594-1.8325.0594-.7213 0-1.3841-.0198-1.8324-.0792 0 .1585-.0195.3367-.0195.4952 0 2.476 1.618 3.922 7.3102 3.922 5.3609 0 7.0958-1.4262 7.0958-3.9418 0-2.3769-1.1501-3.5456-6.238-3.8031-3.9573-.17827-4.3082-.61404-4.3082-1.10924 0-.57442.5068-.87154 3.158-.87154 2.7487 0 3.4894.37635 3.4894 1.16866v.17827c.3899-.01981 1.0917-.03961 1.813-.03961.6823 0 1.423.0198 1.8519.05942 0-.17827.0195-.33674.0195-.47539 0-2.91175-2.4172-3.86252-7.0958-3.86252-5.2634 0-7.0373 1.2875-7.0373 3.8031 0 2.25805 1.423 3.66445 6.472 3.88235 3.7233.1188 4.1327.5348 4.1327 1.1092 0 .6141-.6043.8914-3.2165.8914-3.0021 0-3.7623-.416-3.7623-1.2677v-.1189ZM63.6883 2.125c-1.423 1.32712-3.9768 2.65425-5.3998 3.01079.0195.73289.0195 2.07982.0195 2.81271l1.3061.01981c-.0195 1.40635-.039 3.10979-.039 4.23889 0 2.6344 1.3841 4.6152 5.6922 4.6152 1.813 0 3.0216-.1981 4.5226-.515-.1559-.9706-.3314-2.4562-.3898-3.5852-.8968.2971-2.0274.4556-3.275.4556-1.735 0-2.4368-.4754-2.4368-1.8422 0-1.1884 0-2.29767.0195-3.32768 2.2223.01981 4.4446.05943 5.7507.09904-.0195-1.03.0195-2.51559.078-3.50598-1.8909.03961-4.0157.05942-5.7702.05942.0195-.87154.039-1.70347.0585-2.5354h-.1365ZM75.3313 7.35427c.0195-1.03001.039-1.90156.0585-2.75329h-3.9183c.0585 1.70347.0585 3.44656.0585 6.00172 0 2.5553-.0195 4.3182-.0585 6.0018h4.4836c-.078-1.1885-.0975-3.189-.0975-4.8925 0-2.69388 1.0917-3.46638 3.5674-3.46638 1.1502 0 1.9689.13865 2.6902.39615.0195-1.01019.2144-2.97117.3314-3.84271-.7408-.21789-1.5595-.35655-2.5537-.35655-2.1249-.0198-3.6844.85174-4.4056 2.93156l-.156-.0198ZM94.8501 10.5235c0 2.1591-1.5595 3.1693-4.0157 3.1693-2.4368 0-3.9963-.9508-3.9963-3.1693 0-2.21846 1.579-3.05039 3.9963-3.05039 2.4367 0 4.0157.89135 4.0157 3.05039Zm4.0743-.099c0-4.29832-3.353-6.21968-8.09-6.21968-4.7566 0-7.9926 1.92136-7.9926 6.21968 0 4.2785 3.0216 6.5762 7.9731 6.5762 4.9904 0 8.1095-2.2977 8.1095-6.5762Z"/><defs><linearGradient id="paint0_linear_386_2739" x1="5.46011" x2="16.8017" y1="25.9999" y2="20.6412" gradientUnits="userSpaceOnUse"><stop stop-color="#D83333"/><stop offset="1" stop-color="#F041FF"/></linearGradient></defs></svg>';
|
||||
|
|
@ -28,12 +28,12 @@ let integrationData: IntegrationData;
|
|||
|
||||
export default {
|
||||
id: 'astro',
|
||||
name: 'Astro',
|
||||
name: 'Menu',
|
||||
icon: 'astro:logo',
|
||||
async init(canvas, eventTarget) {
|
||||
createWindow();
|
||||
createCanvas();
|
||||
|
||||
document.addEventListener('astro:after-swap', createWindow);
|
||||
document.addEventListener('astro:after-swap', createCanvas);
|
||||
|
||||
eventTarget.addEventListener('plugin-toggled', async (event) => {
|
||||
resetDebugButton();
|
||||
|
|
@ -55,36 +55,31 @@ export default {
|
|||
}
|
||||
});
|
||||
|
||||
function createWindow() {
|
||||
function createCanvas() {
|
||||
const links: { icon: Icon; name: string; link: string }[] = [
|
||||
{
|
||||
icon: 'bug',
|
||||
name: 'Report a bug',
|
||||
name: 'Report a Bug',
|
||||
link: 'https://github.com/withastro/astro/issues/new/choose',
|
||||
},
|
||||
{
|
||||
icon: 'lightbulb',
|
||||
name: 'Suggestions',
|
||||
name: 'Feedback',
|
||||
link: 'https://github.com/withastro/roadmap/discussions/new/choose',
|
||||
},
|
||||
{
|
||||
icon: 'file-search',
|
||||
name: 'Docs',
|
||||
name: 'Documentation',
|
||||
link: 'https://docs.astro.build',
|
||||
},
|
||||
{
|
||||
icon: 'star',
|
||||
name: 'Star on GitHub',
|
||||
link: 'https://github.com/withastro/astro',
|
||||
},
|
||||
{
|
||||
icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 14"><path fill="currentColor" d="M14.3451 1.9072c-1.0375-.47613-2.1323-.81595-3.257-1.010998-.0102-.001716-.0207-.000234-.03.004243s-.017.011728-.022.020757c-.141.249998-.297.576998-.406.832998-1.2124-.18399-2.44561-.18399-3.658 0-.12159-.28518-.25914-.56328-.412-.832998-.00513-.00893-.01285-.016098-.02213-.02056-.00928-.004462-.0197-.00601-.02987-.00444-1.125.193998-2.22.533998-3.257 1.010998-.00888.00339-.0163.00975-.021.018-2.074 3.099-2.643004 6.122-2.364004 9.107.001.014.01.028.021.037 1.207724.8946 2.558594 1.5777 3.995004 2.02.01014.0032.02103.0031.03111-.0003.01007-.0034.01878-.01.02489-.0187.308-.42.582-.863.818-1.329.00491-.0096.0066-.0205.0048-.0312-.00181-.0106-.007-.0204-.0148-.0278-.00517-.0049-.0113-.0086-.018-.011-.43084-.1656-.84811-.3645-1.248-.595-.01117-.0063-.01948-.0167-.0232-.029-.00373-.0123-.00258-.0255.0032-.037.0034-.0074.00854-.014.015-.019.084-.063.168-.129.248-.195.00706-.0057.01554-.0093.02453-.0106.00898-.0012.01813 0 .02647.0036 2.619 1.196 5.454 1.196 8.041 0 .0086-.0037.0181-.0051.0275-.0038.0093.0012.0181.0049.0255.0108.08.066.164.132.248.195.0068.005.0123.0116.0159.0192.0036.0076.0053.016.0049.0244-.0003.0084-.0028.0166-.0072.0238-.0043.0072-.0104.0133-.0176.0176-.399.2326-.8168.4313-1.249.594-.0069.0025-.0132.0065-.0183.0117-.0052.0051-.0092.0114-.0117.0183-.0023.0067-.0032.0138-.0027.0208.0005.0071.0024.0139.0057.0202.24.465.515.909.817 1.329.0061.0087.0148.0153.0249.0187.0101.0034.021.0035.0311.0003 1.4388-.441 2.7919-1.1241 4.001-2.02.0061-.0042.0111-.0097.0147-.0161.0037-.0064.0058-.0135.0063-.0209.334-3.451-.559-6.449-2.366-9.106-.0018-.00439-.0045-.00834-.008-.01162-.0034-.00327-.0075-.00578-.012-.00738Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z"/></svg>',
|
||||
name: 'Our Discord',
|
||||
name: 'Community',
|
||||
link: 'https://astro.build/chat',
|
||||
},
|
||||
];
|
||||
|
||||
const windowComponent = createWindowWithTransition(
|
||||
const windowComponent = createWindowElement(
|
||||
`<style>
|
||||
#buttons-container {
|
||||
display: flex;
|
||||
|
|
@ -155,7 +150,6 @@ export default {
|
|||
margin-right: calc(var(--offset) * -1);
|
||||
padding-left: var(--offset);
|
||||
padding-right: var(--offset);
|
||||
padding-bottom: 1em;
|
||||
height: 210px;
|
||||
}
|
||||
|
||||
|
|
@ -326,7 +320,7 @@ export default {
|
|||
<header>
|
||||
<section>
|
||||
${astroLogo}
|
||||
<astro-dev-overlay-badge badge-style="gray" size="large">Version ${
|
||||
<astro-dev-overlay-badge badge-style="gray" size="large">${
|
||||
(window as DevOverlayMetadata).__astro_dev_overlay__.version
|
||||
}</astro-dev-overlay-badge>
|
||||
</section>
|
||||
|
|
@ -336,7 +330,7 @@ export default {
|
|||
|
||||
<div id="main-container">
|
||||
<div>
|
||||
<header><h2>Top integrations</h2><a href="https://astro.build/integrations/" target="_blank">View all</a></header>
|
||||
<header><h2>Featured integrations</h2><a href="https://astro.build/integrations/" target="_blank">View all</a></header>
|
||||
<div id="integration-list-wrapper">
|
||||
<section id="integration-list">
|
||||
<div class="integration-skeleton" style="--i:0;"></div>
|
||||
|
|
@ -442,7 +436,4 @@ export default {
|
|||
integrationList.append(fragment);
|
||||
}
|
||||
},
|
||||
async beforeTogglingOff(canvas) {
|
||||
return await waitForTransition(canvas);
|
||||
},
|
||||
} satisfies DevOverlayPlugin;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import type { DevOverlayMetadata, DevOverlayPlugin } from '../../../../@types/astro.js';
|
||||
import type { DevOverlayHighlight } from '../ui-library/highlight.js';
|
||||
import { getIconElement } from '../ui-library/icons.js';
|
||||
import { attachTooltipToHighlight, createHighlight, positionHighlight } from './utils/highlight.js';
|
||||
import { createWindowElement } from './utils/window.js';
|
||||
|
||||
const icon =
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 16"><path fill="#fff" d="M.6 2A1.1 1.1 0 0 1 1.7.9h16.6a1.1 1.1 0 1 1 0 2.2H1.6A1.1 1.1 0 0 1 .8 2Zm1.1 7.1h6a1.1 1.1 0 0 0 0-2.2h-6a1.1 1.1 0 0 0 0 2.2ZM9.3 13H1.8a1.1 1.1 0 1 0 0 2.2h7.5a1.1 1.1 0 1 0 0-2.2Zm11.3 1.9a1.1 1.1 0 0 1-1.5 0l-1.7-1.7a4.1 4.1 0 1 1 1.6-1.6l1.6 1.7a1.1 1.1 0 0 1 0 1.6Zm-5.3-3.4a1.9 1.9 0 1 0 0-3.8 1.9 1.9 0 0 0 0 3.8Z"/></svg>';
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 1 20 16"><path fill="#fff" d="M.6 2A1.1 1.1 0 0 1 1.7.9h16.6a1.1 1.1 0 1 1 0 2.2H1.6A1.1 1.1 0 0 1 .8 2Zm1.1 7.1h6a1.1 1.1 0 0 0 0-2.2h-6a1.1 1.1 0 0 0 0 2.2ZM9.3 13H1.8a1.1 1.1 0 1 0 0 2.2h7.5a1.1 1.1 0 1 0 0-2.2Zm11.3 1.9a1.1 1.1 0 0 1-1.5 0l-1.7-1.7a4.1 4.1 0 1 1 1.6-1.6l1.6 1.7a1.1 1.1 0 0 1 0 1.6Zm-5.3-3.4a1.9 1.9 0 1 0 0-3.8 1.9 1.9 0 0 0 0 3.8Z"/></svg>';
|
||||
|
||||
interface AuditRule {
|
||||
title: string;
|
||||
|
|
@ -32,8 +32,6 @@ export default {
|
|||
document.addEventListener('astro:page-load', async () => refreshLintPositions);
|
||||
|
||||
async function lint() {
|
||||
initStyle();
|
||||
|
||||
audits.forEach(({ highlightElement }) => {
|
||||
highlightElement.remove();
|
||||
});
|
||||
|
|
@ -65,20 +63,38 @@ export default {
|
|||
})
|
||||
);
|
||||
|
||||
const noAuditBlock = document.createElement('div');
|
||||
noAuditBlock.id = 'no-audit';
|
||||
const window = createWindowElement(
|
||||
`<style>
|
||||
header {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
h1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
astro-dev-overlay-icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
padding: 8px;
|
||||
display: block;
|
||||
background: green;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<h1><astro-dev-overlay-icon icon="check-circle"></astro-dev-overlay-icon>No issues detected.</h1>
|
||||
</header>
|
||||
`
|
||||
);
|
||||
|
||||
const noAuditIcon = getIconElement('check-circle');
|
||||
const text = document.createElement('div');
|
||||
text.textContent = 'No issues found!';
|
||||
|
||||
if (noAuditIcon) {
|
||||
noAuditIcon.style.width = '24px';
|
||||
noAuditBlock.append(noAuditIcon);
|
||||
}
|
||||
noAuditBlock.append(text);
|
||||
|
||||
canvas.append(noAuditBlock);
|
||||
canvas.append(window);
|
||||
}
|
||||
|
||||
(['scroll', 'resize'] as const).forEach((event) => {
|
||||
|
|
@ -163,51 +179,5 @@ export default {
|
|||
|
||||
return tooltip;
|
||||
}
|
||||
|
||||
function initStyle() {
|
||||
const devOverlayRect = document
|
||||
.querySelector('astro-dev-overlay')
|
||||
?.shadowRoot.querySelector('#dev-overlay')
|
||||
?.getBoundingClientRect();
|
||||
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
:host {
|
||||
opacity: 0;
|
||||
transition: opacity 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
:host([data-active]) {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#no-audit {
|
||||
border: 1px solid rgba(113, 24, 226, 1);
|
||||
background-color: #310A65;
|
||||
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.30), 0px 1px 2px 0px rgba(0, 0, 0, 0.29), 0px 4px 4px 0px rgba(0, 0, 0, 0.26), 0px 10px 6px 0px rgba(0, 0, 0, 0.15), 0px 17px 7px 0px rgba(0, 0, 0, 0.04), 0px 26px 7px 0px rgba(0, 0, 0, 0.01);
|
||||
color: white;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
padding: 8px;
|
||||
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
position: fixed;
|
||||
transform: translate(-50%, 0);
|
||||
top: ${(devOverlayRect?.top ?? 0) - (devOverlayRect?.height ?? 0) - 16}px;
|
||||
left: calc(50% + 12px);
|
||||
width: 200px;
|
||||
}
|
||||
`;
|
||||
|
||||
canvas.append(style);
|
||||
}
|
||||
},
|
||||
async beforeTogglingOff(canvas) {
|
||||
canvas.host?.removeAttribute('data-active');
|
||||
|
||||
await new Promise((resolve) => {
|
||||
canvas.host.addEventListener('transitionend', resolve);
|
||||
});
|
||||
|
||||
return true;
|
||||
},
|
||||
} satisfies DevOverlayPlugin;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import type { DevOverlayPlugin } from '../../../../@types/astro.js';
|
||||
import { settings, type Settings } from '../settings.js';
|
||||
import { createWindowWithTransition, waitForTransition } from './utils/window.js';
|
||||
import { createWindowElement } from './utils/window.js';
|
||||
|
||||
interface SettingRow {
|
||||
name: string;
|
||||
|
|
@ -13,7 +13,7 @@ interface SettingRow {
|
|||
const settingsRows = [
|
||||
{
|
||||
name: 'Disable notifications',
|
||||
description: 'Notification bubbles will not be shown when this is enabled.',
|
||||
description: 'Hide notification badges in the toolbar.',
|
||||
input: 'checkbox',
|
||||
settingKey: 'disablePluginNotification',
|
||||
changeEvent: (evt: Event) => {
|
||||
|
|
@ -37,7 +37,7 @@ const settingsRows = [
|
|||
|
||||
export default {
|
||||
id: 'astro:settings',
|
||||
name: 'Overlay settings',
|
||||
name: 'Settings',
|
||||
icon: 'gear',
|
||||
init(canvas) {
|
||||
createSettingsWindow();
|
||||
|
|
@ -45,8 +45,11 @@ export default {
|
|||
document.addEventListener('astro:after-swap', createSettingsWindow);
|
||||
|
||||
function createSettingsWindow() {
|
||||
const window = createWindowWithTransition(
|
||||
const windowElement = createWindowElement(
|
||||
`<style>
|
||||
:host astro-dev-overlay-window {
|
||||
height: 480px;
|
||||
}
|
||||
header {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -69,7 +72,7 @@ export default {
|
|||
}
|
||||
|
||||
label {
|
||||
font-size: 15px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
|
|
@ -96,13 +99,13 @@ export default {
|
|||
<hr />
|
||||
|
||||
<h2>General</h2>
|
||||
`,
|
||||
settingsRows.flatMap((setting) => [
|
||||
getElementForSettingAsString(setting),
|
||||
document.createElement('hr'),
|
||||
])
|
||||
`
|
||||
);
|
||||
canvas.append(window);
|
||||
for (const settingsRow of settingsRows) {
|
||||
windowElement.append(getElementForSettingAsString(settingsRow));
|
||||
windowElement.append(document.createElement('hr'));
|
||||
}
|
||||
canvas.append(windowElement);
|
||||
|
||||
function getElementForSettingAsString(setting: SettingRow) {
|
||||
const label = document.createElement('label');
|
||||
|
|
@ -124,7 +127,4 @@ export default {
|
|||
}
|
||||
}
|
||||
},
|
||||
async beforeTogglingOff(canvas) {
|
||||
return await waitForTransition(canvas);
|
||||
},
|
||||
} satisfies DevOverlayPlugin;
|
||||
|
|
|
|||
|
|
@ -1,42 +1,5 @@
|
|||
export function createWindowWithTransition(windowContent: string, addedNodes: Node[] = []) {
|
||||
export function createWindowElement(content: string) {
|
||||
const windowElement = document.createElement('astro-dev-overlay-window');
|
||||
windowElement.innerHTML = `
|
||||
<style>
|
||||
: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%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
${windowContent}
|
||||
`;
|
||||
|
||||
windowElement.append(...addedNodes);
|
||||
|
||||
windowElement.innerHTML = content;
|
||||
return windowElement;
|
||||
}
|
||||
|
||||
export async function waitForTransition(canvas: ShadowRoot): Promise<boolean> {
|
||||
canvas.host?.removeAttribute('data-active');
|
||||
|
||||
await new Promise((resolve) => {
|
||||
canvas.host.addEventListener('transitionend', resolve);
|
||||
});
|
||||
|
||||
return true;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,13 +6,14 @@ import {
|
|||
getHighlightZIndex,
|
||||
positionHighlight,
|
||||
} from './utils/highlight.js';
|
||||
import { createWindowElement } from './utils/window.js';
|
||||
|
||||
const icon =
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#fff" d="M7.9 1.5v-.4a1.1 1.1 0 0 1 2.2 0v.4a1.1 1.1 0 1 1-2.2 0Zm-6.4 8.6a1.1 1.1 0 1 0 0-2.2h-.4a1.1 1.1 0 0 0 0 2.2h.4ZM12 3.7a1.1 1.1 0 0 0 1.4-.7l.4-1.1a1.1 1.1 0 0 0-2.1-.8l-.4 1.2a1.1 1.1 0 0 0 .7 1.4Zm-9.7 7.6-1.2.4a1.1 1.1 0 1 0 .8 2.1l1-.4a1.1 1.1 0 1 0-.6-2ZM20.8 17a1.9 1.9 0 0 1 0 2.6l-1.2 1.2a1.9 1.9 0 0 1-2.6 0l-4.3-4.2-1.6 3.6a1.9 1.9 0 0 1-1.7 1.2A1.9 1.9 0 0 1 7.5 20L2.7 5a1.9 1.9 0 0 1 2.4-2.4l15 5a1.9 1.9 0 0 1 .2 3.4l-3.7 1.6 4.2 4.3ZM19 18.3 14.6 14a1.9 1.9 0 0 1 .6-3l3.2-1.5L5.1 5.1l4.3 13.3 1.5-3.2a1.9 1.9 0 0 1 3-.6l4.4 4.4.7-.7Z"/></svg>';
|
||||
|
||||
export default {
|
||||
id: 'astro:xray',
|
||||
name: 'Xray',
|
||||
name: 'Inspect',
|
||||
icon: icon,
|
||||
init(canvas) {
|
||||
let islandsOverlays: { highlightElement: DevOverlayHighlight; island: HTMLElement }[] = [];
|
||||
|
|
@ -23,7 +24,6 @@ export default {
|
|||
document.addEventListener('astro:page-load', refreshIslandsOverlayPositions);
|
||||
|
||||
function addIslandsOverlay() {
|
||||
initStyle();
|
||||
islandsOverlays.forEach(({ highlightElement }) => {
|
||||
highlightElement.remove();
|
||||
});
|
||||
|
|
@ -31,6 +31,42 @@ export default {
|
|||
|
||||
const islands = document.querySelectorAll<HTMLElement>('astro-island');
|
||||
|
||||
if (islands.length === 0) {
|
||||
const window = createWindowElement(
|
||||
`<style>
|
||||
header {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
h1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
astro-dev-overlay-icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
padding: 8px;
|
||||
display: block;
|
||||
background: #5f9ea0;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<h1><astro-dev-overlay-icon icon="lightbulb"></astro-dev-overlay-icon>No islands detected.</h1>
|
||||
</header>
|
||||
`
|
||||
);
|
||||
|
||||
canvas.append(window);
|
||||
return;
|
||||
}
|
||||
|
||||
islands.forEach((island) => {
|
||||
const computedStyle = window.getComputedStyle(island);
|
||||
const islandElement = (island.children[0] as HTMLElement) || island;
|
||||
|
|
@ -120,30 +156,5 @@ export default {
|
|||
const [_, value] = prop;
|
||||
return JSON.stringify(value, null, 2);
|
||||
}
|
||||
|
||||
function initStyle() {
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
:host {
|
||||
opacity: 0;
|
||||
transition: opacity 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
:host([data-active]) {
|
||||
opacity: 1;
|
||||
}
|
||||
`;
|
||||
|
||||
canvas.append(style);
|
||||
}
|
||||
},
|
||||
async beforeTogglingOff(canvas) {
|
||||
canvas.host?.removeAttribute('data-active');
|
||||
|
||||
await new Promise((resolve) => {
|
||||
canvas.host.addEventListener('transitionend', resolve);
|
||||
});
|
||||
|
||||
return true;
|
||||
},
|
||||
} satisfies DevOverlayPlugin;
|
||||
|
|
|
|||
|
|
@ -38,8 +38,8 @@ export class DevOverlayBadge extends HTMLElement {
|
|||
}
|
||||
|
||||
.badge--gray {
|
||||
color: rgba(233, 234, 238, 1);
|
||||
border-color: rgba(145, 152, 173, 1);
|
||||
color: rgba(191, 193, 201, 1);
|
||||
border-color: rgba(191, 193, 201, 1);
|
||||
}
|
||||
|
||||
.badge--purple {
|
||||
|
|
|
|||
|
|
@ -16,17 +16,16 @@ export class DevOverlayWindow extends HTMLElement {
|
|||
background: linear-gradient(0deg, #13151A, #13151A), linear-gradient(0deg, #343841, #343841);
|
||||
border: 1px solid rgba(52, 56, 65, 1);
|
||||
width: min(640px, 100%);
|
||||
height: 480px;
|
||||
max-height: 480px;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
color: rgba(204, 206, 216, 1);
|
||||
color: rgba(191, 193, 201, 1);
|
||||
position: fixed;
|
||||
z-index: 999999999;
|
||||
/* -7.5em is a magic number that seems to keep it anchored with the dev bar */
|
||||
bottom: calc(7.5% + -150px);
|
||||
bottom: 72px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transform: translateX(-50%);
|
||||
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);
|
||||
}
|
||||
|
||||
|
|
@ -35,6 +34,12 @@ export class DevOverlayWindow extends HTMLElement {
|
|||
background: white;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
:host {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
::slotted(h1), ::slotted(h2), ::slotted(h3), ::slotted(h4), ::slotted(h5) {
|
||||
font-weight: 600;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue