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}
+

+ {/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={() => {