diff --git a/.gitpod.yml b/.gitpod.yml index 46b6a8b..073c35b 100644 --- a/.gitpod.yml +++ b/.gitpod.yml @@ -6,6 +6,7 @@ tasks: - init: npm install --force && npm run build - command: npm run dev - +vscode: + extensions: + - svelte.svelte-vscode diff --git a/package.json b/package.json index ac06086..674280a 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,8 @@ "scripts": { "dev": "vite dev", "build": "vite build", - "preview": "vite preview" + "preview": "vite preview", + "bnp": "npm run build && npm run preview" }, "devDependencies": { "@sveltejs/adapter-auto": "^2.0.0", diff --git a/src/lib/MenuModals/ExtensionColors.svelte b/src/lib/MenuModals/ExtensionColors.svelte index 09dab3b..fb65b22 100644 --- a/src/lib/MenuModals/ExtensionColors.svelte +++ b/src/lib/MenuModals/ExtensionColors.svelte @@ -9,6 +9,7 @@ export let color3 = "#0000ff"; let color3Included = false; + export let tbShow = true; const dispatch = createEventDispatcher(); @@ -24,6 +25,7 @@ color1, color2, color3, + tbShow }); } function cancel() { @@ -89,6 +91,14 @@ +
+ +
@@ -97,7 +107,15 @@
+ > + {#if tbShow} + TurboBuilder + {/if} +
Extension
@@ -247,8 +265,8 @@ .extensionMenuPreview { width: 60px; + position: relative; cursor: pointer; - overflow: hidden; color: #575e75; user-select: none; } @@ -259,6 +277,18 @@ .extensionMenuPreview:active { background-color: #e9eef2; } + + .tbBubbleIcon { + width: 16px; + height: 16px; + background: #0006; + backdrop-filter: blur(2px); + border-radius: 8px; + position: absolute; + top: -3px; + right: -3px; + } + :global(body.dark) .extensionMenuPreview { color: #ccc; } @@ -273,6 +303,7 @@ border-radius: 100%; margin: 0 auto 0.125rem; border: 1px rgba(0, 0, 0, 0.2) solid; + position: relative; } .extensionBubbleName { font-size: 0.65rem; diff --git a/src/resources/compiler/index.js b/src/resources/compiler/index.js index 592d9cf..bad3ddf 100644 --- a/src/resources/compiler/index.js +++ b/src/resources/compiler/index.js @@ -186,6 +186,9 @@ class Compiler { if (extensionMetadata.color3) { classRegistry.extensionInfo.color3 = extensionMetadata.color3; } + if (extensionMetadata.tbShow) { + classRegistry.extensionInfo.tbShow = extensionMetadata.tbShow; + } } return [].concat(headerCode, classRegistry.top, [ diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 04b3e6c..876e441 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -153,6 +153,7 @@ color1: "#0088ff", color2: "#0063ba", color3: "", + tbShow: true }; function updateGeneratedCode() { @@ -363,11 +364,13 @@ color1={extensionMetadata.color1} color2={extensionMetadata.color2} color3={extensionMetadata.color3} + tbShow={extensionMetadata.tbShow} on:completed={(colors) => { ModalState.extensionColors = false; extensionMetadata.color1 = colors.detail.color1; extensionMetadata.color2 = colors.detail.color2; extensionMetadata.color3 = colors.detail.color3; + extensionMetadata.tbShow = colors.detail.tbShow; updateGeneratedCode(); }} on:cancel={() => {