From 255c33342bd93cd19026766bbda104b53f19dfef Mon Sep 17 00:00:00 2001 From: JeremyGamer13 <69337718+JeremyGamer13@users.noreply.github.com> Date: Thu, 24 Aug 2023 23:30:10 -0600 Subject: [PATCH] early dark mode --- package-lock.json | 18 +++++ package.json | 1 + src/app.html | 54 ++++++++++++- src/lib/MenuModals/CreateBlock.svelte | 64 +++++++++++++-- src/lib/MenuModals/ExtensionColors.svelte | 26 ++++++ src/lib/NavigationBar/Button.svelte | 11 +-- src/lib/NavigationBar/Divider.svelte | 4 +- src/lib/NavigationBar/NavigationBar.svelte | 53 +++++++++++-- src/lib/StyledComponents/ToolboxButton.svelte | 10 +++ src/resources/blocks/core.js | 2 +- src/resources/events/index.js | 21 +++++ src/routes/+page.svelte | 75 ++++++++++++++++-- static/favicon_any.png | Bin 0 -> 8302 bytes static/favicon_dark.png | Bin 0 -> 25626 bytes static/images/theme_switcher.svg | 2 + 15 files changed, 312 insertions(+), 29 deletions(-) create mode 100644 src/resources/events/index.js create mode 100644 static/favicon_any.png create mode 100644 static/favicon_dark.png create mode 100644 static/images/theme_switcher.svg diff --git a/package-lock.json b/package-lock.json index bdf7d45..f1c33d4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.1", "dependencies": { "@blockly/continuous-toolbox": "^5.0.2", + "@blockly/theme-dark": "^6.0.1", "@sveltejs/adapter-vercel": "^3.0.2", "file-saver": "^2.0.5", "js-beautify": "^1.14.9", @@ -46,6 +47,17 @@ "blockly": "^10.0.0" } }, + "node_modules/@blockly/theme-dark": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/@blockly/theme-dark/-/theme-dark-6.0.1.tgz", + "integrity": "sha512-fZa834SKstG31PNkoZ26DLIpevNVBWLDwDT/g99a6EtwqnkZg2VjCjbJDLA0xzrCmxN8AH6zmZU/lAdMoBH8sw==", + "engines": { + "node": ">=8.17.0" + }, + "peerDependencies": { + "blockly": "^10.0.0" + } + }, "node_modules/@esbuild/android-arm": { "version": "0.18.17", "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.17.tgz", @@ -2372,6 +2384,12 @@ "integrity": "sha512-7ayim3y4X4vwTLC+SYPijurlx/GoJI0ZemqnoYBcSuqkgnkFCYj8NSYejal1NLdzExjdVm3gsTwRVl9zJJ1cAA==", "requires": {} }, + "@blockly/theme-dark": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/@blockly/theme-dark/-/theme-dark-6.0.1.tgz", + "integrity": "sha512-fZa834SKstG31PNkoZ26DLIpevNVBWLDwDT/g99a6EtwqnkZg2VjCjbJDLA0xzrCmxN8AH6zmZU/lAdMoBH8sw==", + "requires": {} + }, "@esbuild/android-arm": { "version": "0.18.17", "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.17.tgz", diff --git a/package.json b/package.json index debade2..a16543a 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "type": "module", "dependencies": { "@blockly/continuous-toolbox": "^5.0.2", + "@blockly/theme-dark": "^6.0.1", "@sveltejs/adapter-vercel": "^3.0.2", "file-saver": "^2.0.5", "js-beautify": "^1.14.9", diff --git a/src/app.html b/src/app.html index 2874a6e..a14fb4c 100644 --- a/src/app.html +++ b/src/app.html @@ -10,11 +10,17 @@ - + diff --git a/src/lib/MenuModals/ExtensionColors.svelte b/src/lib/MenuModals/ExtensionColors.svelte index 006751c..e438100 100644 --- a/src/lib/MenuModals/ExtensionColors.svelte +++ b/src/lib/MenuModals/ExtensionColors.svelte @@ -32,6 +32,9 @@ function getExampleData(color1, color2, color3, color3Included) { const tokens = ["[{{COLOR1}}]", "[{{COLOR2}}]", "[{{COLOR3}}]"]; + if (color3Included && !color3) { + color3 = "#000000"; + } if (!color3 || !color3Included) { const rgb = ColorUtil.hexToRGB(color1); const r = Math.max(0, rgb.r - 51); @@ -176,6 +179,13 @@ border: 1px solid rgba(0, 0, 0, 0.25); } + :global(body.dark) input[type="color"]::-webkit-color-swatch { + border-color: rgba(255, 255, 255, 0.5); + } + :global(body.dark) input[type="color"]::-moz-color-swatch { + border-color: rgba(255, 255, 255, 0.5); + } + .bg { position: fixed; left: 0px; @@ -200,6 +210,12 @@ align-items: center; overflow: hidden; } + :global(body.dark) .bg { + background-color: #333333b0; + } + :global(body.dark) .modal { + background-color: #111; + } .modal-title { width: 100%; @@ -211,6 +227,9 @@ align-items: center; justify-content: center; } + :global(body.dark) .modal-title { + background-color: #333; + } .modal-content { width: 100%; height: 75%; @@ -239,6 +258,13 @@ .extensionMenuPreview:active { background-color: #e9eef2; } + :global(body.dark) .extensionMenuPreview { + color: #ccc; + } + :global(body.dark) .extensionMenuPreview:focus, + :global(body.dark) .extensionMenuPreview:active { + background-color: #1e1e1e; + } .extensionBubbleIcon { width: 20px; height: 20px; diff --git a/src/lib/NavigationBar/Button.svelte b/src/lib/NavigationBar/Button.svelte index 90b55db..ccb776b 100644 --- a/src/lib/NavigationBar/Button.svelte +++ b/src/lib/NavigationBar/Button.svelte @@ -28,13 +28,14 @@ font-weight: bold; font-size: 0.75rem; color: white; - background: #ff4b4b; + background: transparent; cursor: pointer; border: 0; } - button:focus, - button:hover, - button:active { - background: rgb(211, 62, 62); + button:hover { + background: rgba(0, 0, 0, 0.2); + } + :global(body.dark) button:hover { + background: rgba(255, 255, 255, 0.2); } diff --git a/src/lib/NavigationBar/Divider.svelte b/src/lib/NavigationBar/Divider.svelte index eda524a..c299a36 100644 --- a/src/lib/NavigationBar/Divider.svelte +++ b/src/lib/NavigationBar/Divider.svelte @@ -3,7 +3,7 @@ diff --git a/src/lib/NavigationBar/NavigationBar.svelte b/src/lib/NavigationBar/NavigationBar.svelte index e1dbc67..91d4376 100644 --- a/src/lib/NavigationBar/NavigationBar.svelte +++ b/src/lib/NavigationBar/NavigationBar.svelte @@ -1,15 +1,33 @@
@@ -23,10 +41,8 @@ position: fixed; left: 0px; top: 0px; - width: calc(100% - 8px); - height: calc(var(--nav-height) - 8px); - - padding: 4px; + width: 100%; + height: var(--nav-height); display: flex; flex-direction: row; @@ -35,6 +51,29 @@ background: #ff4b4b; } .logo-margin { - margin-right: 8px; + margin: 0 6px; + margin-left: 10px; + } + .theme-switcher { + background: transparent; + height: 100%; + border: 0; + margin: 0; + cursor: pointer; + } + .theme-switcher:hover { + background: rgba(0, 0, 0, 0.2); + } + .theme-switcher > img { + width: 28px; + height: 28px; + } + + :global(body.dark) .theme-switcher:hover { + background: rgba(255, 255, 255, 0.2); + } + + :global(body.dark) .nav { + background: #333; } diff --git a/src/lib/StyledComponents/ToolboxButton.svelte b/src/lib/StyledComponents/ToolboxButton.svelte index 05b746e..52850b5 100644 --- a/src/lib/StyledComponents/ToolboxButton.svelte +++ b/src/lib/StyledComponents/ToolboxButton.svelte @@ -28,4 +28,14 @@ button:active { background: white; } + + :global(body.dark) button { + color: #ccc; + border-color: #c6c6c6; + } + :global(body.dark) button:focus, + :global(body.dark) button:hover, + :global(body.dark) button:active { + background: #111; + } diff --git a/src/resources/blocks/core.js b/src/resources/blocks/core.js index 78757d7..4a97b16 100644 --- a/src/resources/blocks/core.js +++ b/src/resources/blocks/core.js @@ -7,7 +7,7 @@ const categoryColor = '#ff4b4b'; function register() { // used in block creation menu registerBlock(`${categoryPrefix}builderblock`, { - message0: '...', + message0: '⠀', // empty character breaks block shape args0: [], previousStatement: null, nextStatement: null, diff --git a/src/resources/events/index.js b/src/resources/events/index.js new file mode 100644 index 0000000..38c332e --- /dev/null +++ b/src/resources/events/index.js @@ -0,0 +1,21 @@ +let canAccessWindow = false; +class EventManager { + static allowAttachment () { + canAccessWindow = true; + } + + static on (type, callback) { + if (!canAccessWindow) { + throw new Error('EventManager must be used after onMount allows attachment.'); + } + + window.tbevents_.push({ type, callback }); + } + + // enums + static get EVENT_THEME_CHANGED () { + return 'THEME'; + } +} + +export default EventManager; \ No newline at end of file diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 91cacc8..aaf7de2 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -22,6 +22,7 @@ import Prism from "prismjs"; import * as FileSaver from "file-saver"; import fileDialog from "../resources/fileDialog"; + import EventManager from "../resources/events"; import Blockly from "blockly/core"; import * as ContinuousToolboxPlugin from "@blockly/continuous-toolbox"; @@ -67,9 +68,15 @@ disable: false, theme: Theme, renderer: "zelos", + grid: { + spacing: 25, + length: 3, + colour: "#00000022", + snap: false, + }, zoom: { controls: true, - wheel: true, + wheel: false, startScale: 0.8, maxScale: 4, minScale: 0.25, @@ -80,6 +87,14 @@ flyoutsVerticalToolbox: ContinuousToolboxPlugin.ContinuousFlyout, metricsManager: ContinuousToolboxPlugin.ContinuousMetrics, }, + move: { + scrollbars: { + horizontal: true, + vertical: true, + }, + drag: true, + wheel: true, + }, }; let workspace; @@ -134,6 +149,11 @@ compiler = new Compiler(workspace); // workspace was changed workspace.addChangeListener(updateGeneratedCode); + + EventManager.allowAttachment(); + EventManager.on(EventManager.EVENT_THEME_CHANGED, () => { + workspace.refreshTheme(); + }); }); let fileMenu; @@ -325,10 +345,8 @@ class="project-name" type="text" placeholder="Extension ID (ex: extensionID)" - style={"margin-left:4px;margin-right:4px" + - (isExtensionIDInvalid(projectID) - ? ";background-color:#ffabab;text-decoration:red underline;" - : "")} + style="margin-left:4px;margin-right:4px" + data-invalid={isExtensionIDInvalid(projectID)} bind:value={projectID} on:change={updateGeneratedCode} /> @@ -515,6 +533,28 @@ background: white; } + :global(body.dark) input[type="file"]::file-selector-button { + color: #ccc; + border-color: #c6c6c6; + } + :global(body.dark) input[type="file"]::file-selector-button:focus, + :global(body.dark) input[type="file"]::file-selector-button:hover, + :global(body.dark) input[type="file"]::file-selector-button:active { + background: #111; + } + + :global(body.dark) input[type="text"], + :global(body.dark) input[type="number"] { + background: transparent; + border: 1px solid rgba(255, 255, 255, 0.7); + color: white; + } + :global(body.dark) input[type="text"]:hover, + :global(body.dark) input[type="number"]:hover { + background: transparent; + border: 1px solid dodgerblue; + } + .main { position: absolute; left: 0px; @@ -561,6 +601,15 @@ transition: 0.25s; } + .project-name[data-invalid="true"] { + background-color: #ffabab; + text-decoration: red underline; + } + :global(body.dark) .project-name[data-invalid="true"] { + background-color: #9b0000 !important; + text-decoration: red underline; + } + .extensionIcon { width: 96px; height: 96px; @@ -607,6 +656,13 @@ .extensionMenuPreview:active { background-color: #e9eef2; } + :global(body.dark) .extensionMenuPreview { + color: #ccc; + } + :global(body.dark) .extensionMenuPreview:focus, + :global(body.dark) .extensionMenuPreview:active { + background-color: #1e1e1e; + } .extensionBubbleIcon { width: 20px; height: 20px; @@ -631,6 +687,9 @@ background: #f9f9f9; } + :global(body.dark) .blockMenuButtons { + background-color: #111; + } .blocklyWrapper { position: relative; @@ -656,6 +715,9 @@ background: #f9f9f9; } + :global(body.dark) .codeActionsWrapper { + background-color: #111; + } .codeWrapper { position: relative; width: 100%; @@ -674,6 +736,9 @@ white-space: pre-wrap; font-family: monospace !important; } + :global(body.dark) .codeDisplay { + background-color: #111; + } .warning { background-color: yellow; diff --git a/static/favicon_any.png b/static/favicon_any.png new file mode 100644 index 0000000000000000000000000000000000000000..1f34a099a01c8a47251c4d11aac9f01c6f66fe10 GIT binary patch literal 8302 zcmeHt=T}qPw{|EB>H!WI5mexqP!a(Nh#=A|kkB=)7|_$iQrWs;axEcpS7cC~q_;>#a!15kO>
zyI!Nok-KY#qV@%zL8FBxrlxfb+!#R`D-S&t5@J;+ H{^
zFaY56V=0iuMn#%})g_i6U>~ f(NylDA!4%l)h^F2nqNyw-e_r#8t^*=_A1y%!&
z+zEkuj~jm9f-%mAa<~gD1~-<3_EHJTKbmCB 1p`IpXKDbTXQb
zCkM9cq1^AHwQT_s>wO1Kxg6v5E+xbeW-LsVS?7Wm3Apy;9!Cx-gm2AJSX@ C4CbGR)|Gq2w_`
zhtreM-qd88v5Y~CXeKlG7Z1n_+L^?^8=30?mS;~7i$*~2Y|HqDl=?>OHNxt6rk84X
z6^Sa-d@;Nj%l%xJ)04%xECa!zvGXUMJ8)%2tN4iOR+m@*?tlvO)qEn5v329NXpQjv
zZ(GjJK8boV#tJj6N#VsrGS%#as=}JxCi(F{DN7dywEij_gbWmyTOF&4-;Y#g=$|zn
zwlqhpdk0aIdx#JI8D|JD_PHD1PBwImA_v8m&L?W<{AR%1+d5!TzB>A6sm8Pr{67zf
Nq25j1I&Ejn{{eG34FmuH
literal 0
HcmV?d00001
diff --git a/static/images/theme_switcher.svg b/static/images/theme_switcher.svg
new file mode 100644
index 0000000..391ba91
--- /dev/null
+++ b/static/images/theme_switcher.svg
@@ -0,0 +1,2 @@
+
+
\ No newline at end of file
zGmLC6+1h5K^&2-eoo)o0mJlGbpsRtJ!rFZ%oYirvxYr1MZ&Q_qk8grv_vz+tpx!yF~S?ubF)ye;&B7
zsuV5TGasf38yA|j3k$GYe(PYAM&$obd*}Yo^!vyE5s5;M6;Xt2NXjX4CJbSib0o((l$>%H
zS`Ilyjya1t&g6WUWA8{g$L5qnC-0C$2du2k_nP