From 85ee1dd9360770223100dc4453365ab54c7a1735 Mon Sep 17 00:00:00 2001 From: robalb <11277482+robalb@users.noreply.github.com> Date: Sat, 26 Oct 2024 15:43:15 +0200 Subject: [PATCH 01/25] working on design system. included melt ui --- emscripten_blink/field_notes/roadmap.md | 12 +- svelte_blinkenweb/package-lock.json | 100 +++++++++++ svelte_blinkenweb/package.json | 1 + .../src/components/Controls.svelte | 156 ++++++++++-------- .../src/components/ControlsDebugger.svelte | 0 .../src/components/ControlsEditor.svelte | 154 +++++++++++++++++ .../src/components/icons/ArrowBack.svelte | 29 ++++ .../src/components/icons/ArrowForward.svelte | 30 ++++ .../src/components/icons/WizardHat.svelte | 30 ++++ svelte_blinkenweb/src/styles/style.css | 72 ++++++++ 10 files changed, 516 insertions(+), 68 deletions(-) create mode 100644 svelte_blinkenweb/src/components/ControlsDebugger.svelte create mode 100644 svelte_blinkenweb/src/components/ControlsEditor.svelte create mode 100644 svelte_blinkenweb/src/components/icons/ArrowBack.svelte create mode 100644 svelte_blinkenweb/src/components/icons/ArrowForward.svelte create mode 100644 svelte_blinkenweb/src/components/icons/WizardHat.svelte diff --git a/emscripten_blink/field_notes/roadmap.md b/emscripten_blink/field_notes/roadmap.md index 9f586d9..1ef71a6 100644 --- a/emscripten_blink/field_notes/roadmap.md +++ b/emscripten_blink/field_notes/roadmap.md @@ -29,7 +29,17 @@ -[x] first release with github pages -[x] CI/CD pipeline. pushes to master should trigger a merge and then a checkout into github_pages. then trigger a build. the contents of /build should be copied into /docs, and pushed. - test CI/CD pipeline that directly publishes to github pages without storing the artifacts in a branch. -> https://github.com/actions/upload-pages-artifact -- mobile layout +-[x] mobile layout + + + +https://www.w3.org/WAI/ARIA/apg/patterns/menubar/ + +TODO: figure out design system. +- what about MELT ui, styling every melt ui element via the data-attributes the library sets? + overrides should be easy via custom styles. + +- what about elements that are not controlled by melt ui? such as basic buttons? diff --git a/svelte_blinkenweb/package-lock.json b/svelte_blinkenweb/package-lock.json index 44775e7..860bf63 100644 --- a/svelte_blinkenweb/package-lock.json +++ b/svelte_blinkenweb/package-lock.json @@ -12,6 +12,7 @@ "prism-code-editor": "^3.4.0" }, "devDependencies": { + "@melt-ui/svelte": "^0.84.0", "@sveltejs/vite-plugin-svelte": "^3.1.1", "svelte": "^4.2.18", "vite": "^5.3.4" @@ -397,6 +398,40 @@ "node": ">=12" } }, + "node_modules/@floating-ui/core": { + "version": "1.6.8", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz", + "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==", + "dev": true, + "dependencies": { + "@floating-ui/utils": "^0.2.8" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.6.11", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.11.tgz", + "integrity": "sha512-qkMCxSR24v2vGkhYDo/UzxfJN3D4syqSjyuTFz6C7XcpU1pASPRieNI0Kj5VP3/503mOfYiGY891ugBX1GlABQ==", + "dev": true, + "dependencies": { + "@floating-ui/core": "^1.6.0", + "@floating-ui/utils": "^0.2.8" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.2.8", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz", + "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==", + "dev": true + }, + "node_modules/@internationalized/date": { + "version": "3.5.6", + "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.5.6.tgz", + "integrity": "sha512-jLxQjefH9VI5P9UQuqB6qNKnvFt1Ky1TPIzHGsIlCi7sZZoMR8SdYbBGRvM0y+Jtb+ez4ieBzmiAUcpmPYpyOw==", + "dev": true, + "dependencies": { + "@swc/helpers": "^0.5.0" + } + }, "node_modules/@jridgewell/gen-mapping": { "version": "0.3.5", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz", @@ -440,6 +475,41 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@melt-ui/svelte": { + "version": "0.84.0", + "resolved": "https://registry.npmjs.org/@melt-ui/svelte/-/svelte-0.84.0.tgz", + "integrity": "sha512-KZHu/I2MRmvRE5fIHSbGTZRlbfcu2uV6cit+1kTYKr4isuDy/T2+e4OngKYxNTvyB+zA5tp7BXUOMkoKrpqkCw==", + "dev": true, + "dependencies": { + "@floating-ui/core": "^1.3.1", + "@floating-ui/dom": "^1.4.5", + "@internationalized/date": "^3.5.0", + "dequal": "^2.0.3", + "focus-trap": "^7.5.2", + "nanoid": "^5.0.4" + }, + "peerDependencies": { + "svelte": "^3.0.0 || ^4.0.0 || ^5.0.0-next.118" + } + }, + "node_modules/@melt-ui/svelte/node_modules/nanoid": { + "version": "5.0.7", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.7.tgz", + "integrity": "sha512-oLxFY2gd2IqnjcYyOXD8XGCftpGtZP2AbHbOkthDkvRywH5ayNtPVy9YlOPcHckXzbLTCHpkb7FB+yuxKV13pQ==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "bin": { + "nanoid": "bin/nanoid.js" + }, + "engines": { + "node": "^18 || >=20" + } + }, "node_modules/@rollup/rollup-android-arm-eabi": { "version": "4.19.1", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.19.1.tgz", @@ -687,6 +757,15 @@ "vite": "^5.0.0" } }, + "node_modules/@swc/helpers": { + "version": "0.5.13", + "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.13.tgz", + "integrity": "sha512-UoKGxQ3r5kYI9dALKJapMmuK+1zWM/H17Z1+iwnNmzcJRnfFuevZs375TA5rW31pu4BS4NoSy1fRsexDXfWn5w==", + "dev": true, + "dependencies": { + "tslib": "^2.4.0" + } + }, "node_modules/@types/estree": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", @@ -823,6 +902,15 @@ "@types/estree": "^1.0.0" } }, + "node_modules/focus-trap": { + "version": "7.6.0", + "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.6.0.tgz", + "integrity": "sha512-1td0l3pMkWJLFipobUcGaf+5DTY4PLDDrcqoSaKP8ediO/CoWCCYk/fT/Y2A4e6TNB+Sh6clRJCjOPPnKoNHnQ==", + "dev": true, + "dependencies": { + "tabbable": "^6.2.0" + } + }, "node_modules/fsevents": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", @@ -1052,6 +1140,18 @@ "svelte": "^3.19.0 || ^4.0.0" } }, + "node_modules/tabbable": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz", + "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==", + "dev": true + }, + "node_modules/tslib": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.0.tgz", + "integrity": "sha512-jWVzBLplnCmoaTr13V9dYbiQ99wvZRd0vNWaDRg+aVYRcjDF3nDksxFDE/+fkXnKhpnUUkmx5pK/v8mCtLVqZA==", + "dev": true + }, "node_modules/vite": { "version": "5.3.5", "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.5.tgz", diff --git a/svelte_blinkenweb/package.json b/svelte_blinkenweb/package.json index 75848e1..3a39392 100644 --- a/svelte_blinkenweb/package.json +++ b/svelte_blinkenweb/package.json @@ -9,6 +9,7 @@ "preview": "vite preview" }, "devDependencies": { + "@melt-ui/svelte": "^0.84.0", "@sveltejs/vite-plugin-svelte": "^3.1.1", "svelte": "^4.2.18", "vite": "^5.3.4" diff --git a/svelte_blinkenweb/src/components/Controls.svelte b/svelte_blinkenweb/src/components/Controls.svelte index 857ace7..1bf3ab4 100644 --- a/svelte_blinkenweb/src/components/Controls.svelte +++ b/svelte_blinkenweb/src/components/Controls.svelte @@ -6,6 +6,9 @@ import { onMount } from 'svelte'; import {blinkStore, state} from '../core/blinkSvelte' import {fetchBinaryFile} from '../core/utils' + import ControlsEditor from './ControlsEditor.svelte'; + import WizardHat from './icons/WizardHat.svelte'; + import ArrowBack from './icons/ArrowBack.svelte'; // import demo1_url from '../assets/example.elf?url' // import demo1_url from '../assets/ld-new.elf?url' // import demo1_url from '../assets/demo_programs/argv.elf?url' @@ -90,6 +93,26 @@ +
{#if (showEditor || !mobile) && !$blinkStore.uploadedElf} @@ -102,10 +125,12 @@ {/each}
+ + {:else} - {/if} @@ -127,23 +151,23 @@ {#if showControls}
-
- -
- - @@ -226,61 +250,59 @@ /* -------------------- */ /* Buttons&c */ /* -------------------- */ - button, select{ - border: 1px solid var(--color-gray-t); - color: white; - padding: .2rem 0.6rem; - border-radius: 4px; - background-color: transparent; - cursor: pointer; - height: 2rem; - display: flex; - align-items: center; - /* transition: scale .1s ease-in-out; */ - } - button:disabled{ - color: gray; - } - button:not(:disabled):active{ - /* transform: scale(1.1); */ - border: 1px solid rgba(255,255,255,0.7); - - } - - button svg{ - stroke: white; - fill: white; - height: 18px; - width: 18px; - margin-right: 3px; - } - button:disabled svg{ - fill: gray; - stroke: gray; - } - - .group{ - display: flex; - border: 1px solid var(--color-gray-t); - background-color: transparent; - border-radius: 4px; - } - .group button{ - display: flex; - border: 1px solid transparent; - } - .group button:nth-child(1){ - border-right: 1px solid var(--color-gray-t); - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - .group button:nth-child(2){ - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - .group button:active:not(:disabled):nth-child(1){/* I hereby challenge you to write a line with more selectors */ - border-right: 1px solid rgba(255,255,255,0.7); - } + /* button, select{ */ + /* border: 1px solid var(--color-gray-t); */ + /* color: white; */ + /* padding: .2rem 0.6rem; */ + /* border-radius: 4px; */ + /* background-color: transparent; */ + /* cursor: pointer; */ + /* height: 2rem; */ + /* display: flex; */ + /* align-items: center; */ + /* } */ + /* button:disabled{ */ + /* color: gray; */ + /* } */ + /* button:not(:disabled):active{ */ + /* border: 1px solid rgba(255,255,255,0.7); */ + + /* } */ + + /* button svg{ */ + /* stroke: white; */ + /* fill: white; */ + /* height: 18px; */ + /* width: 18px; */ + /* margin-right: 3px; */ + /* } */ + /* button:disabled svg{ */ + /* fill: gray; */ + /* stroke: gray; */ + /* } */ + + /* .group{ */ + /* display: flex; */ + /* border: 1px solid var(--color-gray-t); */ + /* background-color: transparent; */ + /* border-radius: 4px; */ + /* } */ + /* .group button{ */ + /* display: flex; */ + /* border: 1px solid transparent; */ + /* } */ + /* .group button:nth-child(1){ */ + /* border-right: 1px solid var(--color-gray-t); */ + /* border-top-right-radius: 0; */ + /* border-bottom-right-radius: 0; */ + /* } */ + /* .group button:nth-child(2){ */ + /* border-top-left-radius: 0; */ + /* border-bottom-left-radius: 0; */ + /* } */ + /* .group button:active:not(:disabled):nth-child(1){/* I hereby challenge you to write a line with more selectors */ + /* border-right: 1px solid rgba(255,255,255,0.7); */ + /* } */ .compilebt{ @@ -311,7 +333,7 @@ border-bottom-right-radius: 0; } - .debugbt{ + .m-left-1{ margin-left: 1rem; } .fill-none { diff --git a/svelte_blinkenweb/src/components/ControlsDebugger.svelte b/svelte_blinkenweb/src/components/ControlsDebugger.svelte new file mode 100644 index 0000000..e69de29 diff --git a/svelte_blinkenweb/src/components/ControlsEditor.svelte b/svelte_blinkenweb/src/components/ControlsEditor.svelte new file mode 100644 index 0000000..ff40672 --- /dev/null +++ b/svelte_blinkenweb/src/components/ControlsEditor.svelte @@ -0,0 +1,154 @@ + + + + +{#if $open} +