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; width: 1px;
} }
astro-overlay-plugin-canvas { astro-dev-overlay-plugin-canvas {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
} }
astro-overlay-plugin-canvas:not([data-active]) { astro-dev-overlay-plugin-canvas:not([data-active]) {
display: none; display: none;
} }
@ -403,7 +403,9 @@ document.addEventListener('DOMContentLoaded', async () => {
} }
getPluginCanvasById(id: string) { 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) { togglePluginStatus(plugin: DevOverlayPlugin, status?: boolean) {
@ -486,11 +488,11 @@ document.addEventListener('DOMContentLoaded', async () => {
} }
customElements.define('astro-dev-overlay', AstroDevOverlay); customElements.define('astro-dev-overlay', AstroDevOverlay);
customElements.define('astro-overlay-window', DevOverlayWindow); customElements.define('astro-dev-overlay-window', DevOverlayWindow);
customElements.define('astro-overlay-plugin-canvas', DevOverlayCanvas); customElements.define('astro-dev-overlay-plugin-canvas', DevOverlayCanvas);
customElements.define('astro-overlay-tooltip', DevOverlayTooltip); customElements.define('astro-dev-overlay-tooltip', DevOverlayTooltip);
customElements.define('astro-overlay-highlight', DevOverlayHighlight); customElements.define('astro-dev-overlay-highlight', DevOverlayHighlight);
customElements.define('astro-overlay-card', DevOverlayCard); customElements.define('astro-dev-overlay-card', DevOverlayCard);
const overlay = document.createElement('astro-dev-overlay'); const overlay = document.createElement('astro-dev-overlay');
overlay.style.zIndex = '999999'; overlay.style.zIndex = '999999';
@ -498,7 +500,7 @@ document.addEventListener('DOMContentLoaded', async () => {
// Create plugin canvases // Create plugin canvases
plugins.forEach((plugin) => { 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; pluginCanvas.dataset.pluginId = plugin.id;
overlay.shadowRoot?.append(pluginCanvas); 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', name: 'Astro',
icon: 'astro:logo', icon: 'astro:logo',
init(canvas) { 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.windowTitle = 'Astro';
astroWindow.windowIcon = 'astro:logo'; astroWindow.windowIcon = 'astro:logo';
@ -19,7 +19,7 @@ export default {
justify-content: center; justify-content: center;
} }
#buttons-container astro-overlay-card { #buttons-container astro-dev-overlay-card {
flex: 1; flex: 1;
} }
@ -53,8 +53,8 @@ export default {
<div> <div>
<p>Welcome to Astro!</p> <p>Welcome to Astro!</p>
<div id="buttons-container"> <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-dev-overlay-card icon="astro:logo" link="https://github.com/withastro/astro/issues/new/choose">Report an issue</astro-dev-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://docs.astro.build/en/getting-started/">View Astro Docs</astro-dev-overlay-card>
</div> </div>
</div> </div>
<footer> <footer>

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

@ -70,7 +70,7 @@ export default {
} }
function buildAuditTooltip(rule: AuditRule) { 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 = [ tooltip.sections = [
{ {
icon: 'warning', 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'; import type { Icon } from '../../ui-library/icons.js';
export function createHighlight(rect: DOMRect, icon?: Icon) { 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; if (icon) highlight.icon = icon;
highlight.tabIndex = 0; 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) { 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 = []; tooltip.sections = [];
const islandProps = island.getAttribute('props') const islandProps = island.getAttribute('props')