Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-02-24 22:46:02 -05:00
Code Issues Activity

Fix dev overlay UI Toolkit component names (#8928)

Browse source 
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>
Co-authored-by: Erika <3019731+Princesseuh@users.noreply.github.com>
This commit is contained in:
HiDeoo 2023-10-27 12:09:05 +02:00 • committed by GitHub
parent e21fef7da2
commit ca90b47cfc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 23 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/violet-ants-bow.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Renames dev overlay UI Toolkit component names for consistency.

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

@ -192,13 +192,13 @@ document.addEventListener('DOMContentLoaded', async () => {
width: 1px;
}
astro-overlay-plugin-canvas {
astro-dev-overlay-plugin-canvas {
position: absolute;
top: 0;
left: 0;
}
astro-overlay-plugin-canvas:not([data-active]) {
astro-dev-overlay-plugin-canvas:not([data-active]) {
display: none;
}
@ -403,7 +403,9 @@ document.addEventListener('DOMContentLoaded', async () => {
}
getPluginCanvasById(id: string) {
return this.shadowRoot.querySelector(`astro-overlay-plugin-canvas[data-plugin-id="${id}"]`);
return this.shadowRoot.querySelector(
`astro-dev-overlay-plugin-canvas[data-plugin-id="${id}"]`
);
}
togglePluginStatus(plugin: DevOverlayPlugin, status?: boolean) {
@ -486,11 +488,11 @@ document.addEventListener('DOMContentLoaded', async () => {
}
customElements.define('astro-dev-overlay', AstroDevOverlay);
customElements.define('astro-overlay-window', DevOverlayWindow);
customElements.define('astro-overlay-plugin-canvas', DevOverlayCanvas);
customElements.define('astro-overlay-tooltip', DevOverlayTooltip);
customElements.define('astro-overlay-highlight', DevOverlayHighlight);
customElements.define('astro-overlay-card', DevOverlayCard);
customElements.define('astro-dev-overlay-window', DevOverlayWindow);
customElements.define('astro-dev-overlay-plugin-canvas', DevOverlayCanvas);
customElements.define('astro-dev-overlay-tooltip', DevOverlayTooltip);
customElements.define('astro-dev-overlay-highlight', DevOverlayHighlight);
customElements.define('astro-dev-overlay-card', DevOverlayCard);
const overlay = document.createElement('astro-dev-overlay');
overlay.style.zIndex = '999999';
@ -498,7 +500,7 @@ document.addEventListener('DOMContentLoaded', async () => {
// Create plugin canvases
plugins.forEach((plugin) => {
const pluginCanvas = document.createElement('astro-overlay-plugin-canvas');
const pluginCanvas = document.createElement('astro-dev-overlay-plugin-canvas');
pluginCanvas.dataset.pluginId = plugin.id;
overlay.shadowRoot?.append(pluginCanvas);
});

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

@ -6,7 +6,7 @@ export default {
name: 'Astro',
icon: 'astro:logo',
init(canvas) {
const astroWindow = document.createElement('astro-overlay-window') as DevOverlayWindow;
const astroWindow = document.createElement('astro-dev-overlay-window') as DevOverlayWindow;
astroWindow.windowTitle = 'Astro';
astroWindow.windowIcon = 'astro:logo';
@ -19,7 +19,7 @@ export default {
justify-content: center;
}
#buttons-container astro-overlay-card {
#buttons-container astro-dev-overlay-card {
flex: 1;
}
@ -53,8 +53,8 @@ export default {
<div>
<p>Welcome to Astro!</p>
<div id="buttons-container">
<astro-overlay-card icon="astro:logo" link="https://github.com/withastro/astro/issues/new/choose">Report an issue</astro-overlay-card>
<astro-overlay-card icon="astro:logo" link="https://docs.astro.build/en/getting-started/">View Astro Docs</astro-overlay-card>
<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>
</div>
</div>
<footer>

2
packages/astro/src/runtime/client/dev-overlay/plugins/audit.ts
View file

@ -70,7 +70,7 @@ export default {
}
function buildAuditTooltip(rule: AuditRule) {
const tooltip = document.createElement('astro-overlay-tooltip') as DevOverlayTooltip;
const tooltip = document.createElement('astro-dev-overlay-tooltip') as DevOverlayTooltip;
tooltip.sections = [
{
icon: 'warning',

2
packages/astro/src/runtime/client/dev-overlay/plugins/utils/highlight.ts
View file

@ -2,7 +2,7 @@ import type { DevOverlayHighlight } from '../../ui-library/highlight.js';
import type { Icon } from '../../ui-library/icons.js';
export function createHighlight(rect: DOMRect, icon?: Icon) {
const highlight = document.createElement('astro-overlay-highlight') as DevOverlayHighlight;
const highlight = document.createElement('astro-dev-overlay-highlight') as DevOverlayHighlight;
if (icon) highlight.icon = icon;
highlight.tabIndex = 0;

2
packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts
View file

@ -46,7 +46,7 @@ export default {
}
function buildIslandTooltip(island: HTMLElement) {
const tooltip = document.createElement('astro-overlay-tooltip') as DevOverlayTooltip;
const tooltip = document.createElement('astro-dev-overlay-tooltip') as DevOverlayTooltip;
tooltip.sections = [];
const islandProps = island.getAttribute('props')