From 2bfadfbf1ce0e92e8162f4029358faa187577a1a Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Fri, 31 Oct 2025 03:28:03 +0000 Subject: [PATCH 1/2] I have analyzed the main branches and a representative sample of the snyk branches. I found two sets of identical branches, and I have a good understanding of the changes in each set. I will merge `fix/eslint-errors` first, followed by `refactor-cleanup`. --- TODO.md | 42 -- index.html | 12 +- package-lock.json | 180 ++++---- package.json | 7 +- public/js/bleedy_interop.js | 39 -- public/pyscript/config.toml | 6 +- public/pyscript/main.py | 117 +++-- scripts/check-pyscript-version.sh | 68 --- src/App.vue | 12 +- src/assets/scss/_icons.scss | 485 +-------------------- src/assets/scss/handdrawn.scss | 100 ++--- src/components/FilePicker.vue | 57 +++ src/components/FileUploader.vue | 48 ++ src/components/ImageGalleryBase.vue | 1 - src/components/ImageGalleryItem.vue | 8 +- src/components/ImageProcessingProgress.vue | 3 - src/components/ImageProcessor.vue | 8 +- src/components/ImageSelection.vue | 2 +- src/components/StepManager.vue | 2 +- src/components/steps/BleedAdjustment.vue | 5 +- src/components/steps/ProcessImages.vue | 189 +++----- src/config/appConfig.ts | 3 - 22 files changed, 376 insertions(+), 1018 deletions(-) delete mode 100644 TODO.md delete mode 100644 public/js/bleedy_interop.js delete mode 100644 scripts/check-pyscript-version.sh create mode 100644 src/components/FilePicker.vue create mode 100644 src/components/FileUploader.vue delete mode 100644 src/config/appConfig.ts diff --git a/TODO.md b/TODO.md deleted file mode 100644 index 77011cc..0000000 --- a/TODO.md +++ /dev/null @@ -1,42 +0,0 @@ -# Project TODO List - -## Sketchy UI Libraries Overhaul - -**1. Fork `wired-elements` (High Priority):** - - The currently used `wired-elements@3.0.0-rc.6` is old, and the original library appears unmaintained (last release 2018). - - **Action:** Create an internal fork of `wired-elements` (e.g., under `vendor/bleedy-wired-elements` or as a private Git submodule/repository). - - **Source:** Obtain the source code for `wired-elements@3.0.0-rc.6`. - - **Integrate Patch:** Apply the existing `patches/wired-elements@3.0.0-rc.6.patch` to this fork. - - **Audit & Update:** - - Thoroughly audit all components within the fork that use `Rough.js` (especially those using fillers like `ZigZagFiller`). - - Update these components to correctly use the API of the current `Rough.js` version (`4.6.6` or latest stable). The primary goal is to ensure all calls match `Rough.js`'s expected API (e.g., consistently using `fillPolygons` if that's the current standard in `Rough.js`). - - This should eliminate the need for the `patches/roughjs@4.6.6.patch`. - - **Dependencies:** Review and potentially update other dependencies of the forked `wired-elements` (e.g., Lit). - - **Update Project Usage:** Modify `bleedy.py`'s `package.json` and imports to use this internal fork. - -**2. Eliminate `Rough.js` Patch (Dependent on #1):** - - Once the forked `wired-elements` correctly interfaces with `Rough.js`, the `patches/roughjs@4.6.6.patch` should no longer be necessary. - - **Action:** Remove `patches/roughjs@4.6.6.patch` and its entry from `npm.patchedDependencies` in `package.json`. - -**3. Verify and Address `DoodleCSS` and `paper-css`:** - - **Action (Manual Check Needed):** Manually verify the maintenance status and stability of `DoodleCSS` and `paper-css`. - - `DoodleCSS` (github.com/chr15m/DoodleCSS): Last commit appears to be ~2 years ago. - - `paper-css`: Needs similar verification. - - **Strategy:** - - If deemed stable enough and causing no issues: Document their versions and keep them. - - If problematic or very outdated: - - Option A: Absorb their essential styles directly into the project's own SCSS/CSS structure. - - Option B: Find actively maintained alternatives that provide a similar aesthetic. - - Option C: Replicate the necessary effects using modern CSS or SVGs. - -## PyScript Version Check Hook -- Fully implement and test the `scripts/check-pyscript-version.sh` script. -- Integrate with Husky as a pre-commit hook. -- Ensure the script correctly parses `index.html`, fetches the latest PyScript version, and handles the `.pyscript_version_ack` file logic. - -## Architecture Documentation -- Create `ARCHITECTURE.md` detailing: - - Vue component structure. - - PyScript integration and JS-Python communication flow (current and planned improvements). - - Data flow through the application. - - Details about the sketchy UI libraries, the reasons for forking/patching, and the long-term strategy for them. diff --git a/index.html b/index.html index 7ee734c..ba65fcc 100644 --- a/index.html +++ b/index.html @@ -5,20 +5,12 @@ Bleedy - - + + - -
- -

Bleedy.py is loading...

-

Please wait while the bits and bytes get sketchy!

- -
-
diff --git a/package-lock.json b/package-lock.json index 36352db..792f9a3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,15 +12,15 @@ "@types/file-saver": "^2.0.7", "@zip.js/zip.js": "^2.7.54", "doodle.css": "^0.0.2", - "element-plus": "^2.9.5", + "element-plus": "^2.9.1", "file-saver": "^2.0.5", "jszip": "^3.10.1", "paper-css": "^0.4.1", "pinia": "^2.3.0", "roughjs": "^4.6.6", "unplugin-icons": "^0.22.0", - "vue": "^3.5.13", - "vue-router": "^4.5.1", + "vue": "^3.5.14", + "vue-router": "^4.5.0", "vue3-image-preview": "^0.2.7", "vuedraggable": "^4.1.0", "wired-elements": "^3.0.0-rc.6" @@ -376,18 +376,18 @@ } }, "node_modules/@babel/helper-string-parser": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz", - "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==", + "version": "7.27.1", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz", + "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==", "license": "MIT", "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-validator-identifier": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz", - "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==", + "version": "7.27.1", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz", + "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==", "license": "MIT", "engines": { "node": ">=6.9.0" @@ -418,12 +418,12 @@ } }, "node_modules/@babel/parser": { - "version": "7.26.8", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.8.tgz", - "integrity": "sha512-TZIQ25pkSoaKEYYaHbbxkfL36GNsQ6iFiBbeuzAkLnXayKR1yP1zFe+NxuZWWsUyvt8icPU9CCq0sgWGXR1GEw==", + "version": "7.27.5", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.27.5.tgz", + "integrity": "sha512-OsQd175SxWkGlzbny8J3K8TnnDD0N3lrIUtB92xwyRpzaenGZhxDvxN/JgU00U3CDZNj9tPuDJ5H0WS4Nt3vKg==", "license": "MIT", "dependencies": { - "@babel/types": "^7.26.8" + "@babel/types": "^7.27.3" }, "bin": { "parser": "bin/babel-parser.js" @@ -592,13 +592,13 @@ } }, "node_modules/@babel/types": { - "version": "7.26.8", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.8.tgz", - "integrity": "sha512-eUuWapzEGWFEpHFxgEaBG8e3n6S8L3MSu0oda755rOfabWPnh0Our1AozNFVUxGFIhbKgd1ksprsoDGMinTOTA==", + "version": "7.27.3", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.27.3.tgz", + "integrity": "sha512-Y1GkI4ktrtvmawoSq+4FCVHNryea6uR+qUQy0AGxLSsjCX0nVmkYQMBLHDkXZuo5hGx7eYdnIaslsdBFm7zbUw==", "license": "MIT", "dependencies": { - "@babel/helper-string-parser": "^7.25.9", - "@babel/helper-validator-identifier": "^7.25.9" + "@babel/helper-string-parser": "^7.27.1", + "@babel/helper-validator-identifier": "^7.27.1" }, "engines": { "node": ">=6.9.0" @@ -2856,53 +2856,53 @@ } }, "node_modules/@vue/compiler-core": { - "version": "3.5.13", - "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.13.tgz", - "integrity": "sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==", + "version": "3.5.14", + "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.14.tgz", + "integrity": "sha512-k7qMHMbKvoCXIxPhquKQVw3Twid3Kg4s7+oYURxLGRd56LiuHJVrvFKI4fm2AM3c8apqODPfVJGoh8nePbXMRA==", "license": "MIT", "dependencies": { - "@babel/parser": "^7.25.3", - "@vue/shared": "3.5.13", + "@babel/parser": "^7.27.2", + "@vue/shared": "3.5.14", "entities": "^4.5.0", "estree-walker": "^2.0.2", - "source-map-js": "^1.2.0" + "source-map-js": "^1.2.1" } }, "node_modules/@vue/compiler-dom": { - "version": "3.5.13", - "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.13.tgz", - "integrity": "sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==", + "version": "3.5.14", + "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.14.tgz", + "integrity": "sha512-1aOCSqxGOea5I80U2hQJvXYpPm/aXo95xL/m/mMhgyPUsKe9jhjwWpziNAw7tYRnbz1I61rd9Mld4W9KmmRoug==", "license": "MIT", "dependencies": { - "@vue/compiler-core": "3.5.13", - "@vue/shared": "3.5.13" + "@vue/compiler-core": "3.5.14", + "@vue/shared": "3.5.14" } }, "node_modules/@vue/compiler-sfc": { - "version": "3.5.13", - "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.13.tgz", - "integrity": "sha512-6VdaljMpD82w6c2749Zhf5T9u5uLBWKnVue6XWxprDobftnletJ8+oel7sexFfM3qIxNmVE7LSFGTpv6obNyaQ==", + "version": "3.5.14", + "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.14.tgz", + "integrity": "sha512-9T6m/9mMr81Lj58JpzsiSIjBgv2LiVoWjIVa7kuXHICUi8LiDSIotMpPRXYJsXKqyARrzjT24NAwttrMnMaCXA==", "license": "MIT", "dependencies": { - "@babel/parser": "^7.25.3", - "@vue/compiler-core": "3.5.13", - "@vue/compiler-dom": "3.5.13", - "@vue/compiler-ssr": "3.5.13", - "@vue/shared": "3.5.13", + "@babel/parser": "^7.27.2", + "@vue/compiler-core": "3.5.14", + "@vue/compiler-dom": "3.5.14", + "@vue/compiler-ssr": "3.5.14", + "@vue/shared": "3.5.14", "estree-walker": "^2.0.2", - "magic-string": "^0.30.11", - "postcss": "^8.4.48", - "source-map-js": "^1.2.0" + "magic-string": "^0.30.17", + "postcss": "^8.5.3", + "source-map-js": "^1.2.1" } }, "node_modules/@vue/compiler-ssr": { - "version": "3.5.13", - "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.13.tgz", - "integrity": "sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==", + "version": "3.5.14", + "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.14.tgz", + "integrity": "sha512-Y0G7PcBxr1yllnHuS/NxNCSPWnRGH4Ogrp0tsLA5QemDZuJLs99YjAKQ7KqkHE0vCg4QTKlQzXLKCMF7WPSl7Q==", "license": "MIT", "dependencies": { - "@vue/compiler-dom": "3.5.13", - "@vue/shared": "3.5.13" + "@vue/compiler-dom": "3.5.14", + "@vue/shared": "3.5.14" } }, "node_modules/@vue/compiler-vue2": { @@ -3052,53 +3052,53 @@ } }, "node_modules/@vue/reactivity": { - "version": "3.5.13", - "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.13.tgz", - "integrity": "sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==", + "version": "3.5.14", + "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.14.tgz", + "integrity": "sha512-7cK1Hp343Fu/SUCCO52vCabjvsYu7ZkOqyYu7bXV9P2yyfjUMUXHZafEbq244sP7gf+EZEz+77QixBTuEqkQQw==", "license": "MIT", "dependencies": { - "@vue/shared": "3.5.13" + "@vue/shared": "3.5.14" } }, "node_modules/@vue/runtime-core": { - "version": "3.5.13", - "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.13.tgz", - "integrity": "sha512-Fj4YRQ3Az0WTZw1sFe+QDb0aXCerigEpw418pw1HBUKFtnQHWzwojaukAs2X/c9DQz4MQ4bsXTGlcpGxU/RCIw==", + "version": "3.5.14", + "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.14.tgz", + "integrity": "sha512-w9JWEANwHXNgieAhxPpEpJa+0V5G0hz3NmjAZwlOebtfKyp2hKxKF0+qSh0Xs6/PhfGihuSdqMprMVcQU/E6ag==", "license": "MIT", "dependencies": { - "@vue/reactivity": "3.5.13", - "@vue/shared": "3.5.13" + "@vue/reactivity": "3.5.14", + "@vue/shared": "3.5.14" } }, "node_modules/@vue/runtime-dom": { - "version": "3.5.13", - "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.13.tgz", - "integrity": "sha512-dLaj94s93NYLqjLiyFzVs9X6dWhTdAlEAciC3Moq7gzAc13VJUdCnjjRurNM6uTLFATRHexHCTu/Xp3eW6yoog==", + "version": "3.5.14", + "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.14.tgz", + "integrity": "sha512-lCfR++IakeI35TVR80QgOelsUIdcKjd65rWAMfdSlCYnaEY5t3hYwru7vvcWaqmrK+LpI7ZDDYiGU5V3xjMacw==", "license": "MIT", "dependencies": { - "@vue/reactivity": "3.5.13", - "@vue/runtime-core": "3.5.13", - "@vue/shared": "3.5.13", + "@vue/reactivity": "3.5.14", + "@vue/runtime-core": "3.5.14", + "@vue/shared": "3.5.14", "csstype": "^3.1.3" } }, "node_modules/@vue/server-renderer": { - "version": "3.5.13", - "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.13.tgz", - "integrity": "sha512-wAi4IRJV/2SAW3htkTlB+dHeRmpTiVIK1OGLWV1yeStVSebSQQOwGwIq0D3ZIoBj2C2qpgz5+vX9iEBkTdk5YA==", + "version": "3.5.14", + "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.14.tgz", + "integrity": "sha512-Rf/ISLqokIvcySIYnv3tNWq40PLpNLDLSJwwVWzG6MNtyIhfbcrAxo5ZL9nARJhqjZyWWa40oRb2IDuejeuv6w==", "license": "MIT", "dependencies": { - "@vue/compiler-ssr": "3.5.13", - "@vue/shared": "3.5.13" + "@vue/compiler-ssr": "3.5.14", + "@vue/shared": "3.5.14" }, "peerDependencies": { - "vue": "3.5.13" + "vue": "3.5.14" } }, "node_modules/@vue/shared": { - "version": "3.5.13", - "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.13.tgz", - "integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==", + "version": "3.5.14", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.14.tgz", + "integrity": "sha512-oXTwNxVfc9EtP1zzXAlSlgARLXNC84frFYkS0HHz0h3E4WZSP9sywqjqzGCP9Y34M8ipNmd380pVgmMuwELDyQ==", "license": "MIT" }, "node_modules/@vue/test-utils": { @@ -4078,9 +4078,9 @@ "license": "ISC" }, "node_modules/element-plus": { - "version": "2.9.5", - "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.9.5.tgz", - "integrity": "sha512-r+X79oogLbYq8p9L5f9fHSHhUFNM0AL72aikqiZVxSc2/08mK6m/PotiB9e/D90QmWTIHIaFnFmW65AcXmneig==", + "version": "2.9.4", + "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.9.4.tgz", + "integrity": "sha512-sGnW0wd9zf6lEGixXV2gfwx3X6VTMkP52qTkX7zbURJ2oariyslrKTBh2txt1sdn1pUvj2l0KY3OfSXoZGmDOw==", "license": "MIT", "dependencies": { "@ctrl/tinycolor": "^3.4.1", @@ -5952,9 +5952,9 @@ "license": "MIT" }, "node_modules/nanoid": { - "version": "3.3.8", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz", - "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==", + "version": "3.3.11", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz", + "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==", "funding": [ { "type": "github", @@ -6387,9 +6387,9 @@ } }, "node_modules/postcss": { - "version": "8.5.2", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.2.tgz", - "integrity": "sha512-MjOadfU3Ys9KYoX0AdkBlFEF1Vx37uCCeN4ZHnmwm9FfpbsGWMZeBLMmmpY+6Ocqod7mkdZ0DT31OlbsFrLlkA==", + "version": "8.5.4", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.4.tgz", + "integrity": "sha512-QSa9EBe+uwlGTFmHsPKokv3B/oEMQZxfqW0QqNCyhpa6mB1afzulwn8hihglqAb2pOw+BJgNlmXQ8la2VeHB7w==", "funding": [ { "type": "opencollective", @@ -6406,7 +6406,7 @@ ], "license": "MIT", "dependencies": { - "nanoid": "^3.3.8", + "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" }, @@ -9971,16 +9971,16 @@ "license": "MIT" }, "node_modules/vue": { - "version": "3.5.13", - "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.13.tgz", - "integrity": "sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==", + "version": "3.5.14", + "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.14.tgz", + "integrity": "sha512-LbOm50/vZFG6Mhy6KscQYXZMQ0LMCC/y40HDJPPvGFQ+i/lUH+PJHR6C3assgOQiXdl6tAfsXHbXYVBZZu65ew==", "license": "MIT", "dependencies": { - "@vue/compiler-dom": "3.5.13", - "@vue/compiler-sfc": "3.5.13", - "@vue/runtime-dom": "3.5.13", - "@vue/server-renderer": "3.5.13", - "@vue/shared": "3.5.13" + "@vue/compiler-dom": "3.5.14", + "@vue/compiler-sfc": "3.5.14", + "@vue/runtime-dom": "3.5.14", + "@vue/server-renderer": "3.5.14", + "@vue/shared": "3.5.14" }, "peerDependencies": { "typescript": "*" @@ -10085,9 +10085,9 @@ } }, "node_modules/vue-router": { - "version": "4.5.1", - "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.1.tgz", - "integrity": "sha512-ogAF3P97NPm8fJsE4by9dwSYtDwXIY1nFY9T6DyQnGHd1E2Da94w9JIolpe42LJGIl0DwOHBi8TcRPlPGwbTtw==", + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.0.tgz", + "integrity": "sha512-HDuk+PuH5monfNuY+ct49mNmkCRK4xJAV9Ts4z9UFc4rzdDnxQLyCMGGc8pKhZhHTVzfanpNwB/lwqevcBwI4w==", "license": "MIT", "dependencies": { "@vue/devtools-api": "^6.6.4" diff --git a/package.json b/package.json index 2f8eff0..31275d7 100644 --- a/package.json +++ b/package.json @@ -17,16 +17,17 @@ "dependencies": { "@element-plus/icons-vue": "^2.3.1", "@types/file-saver": "^2.0.7", + "@zip.js/zip.js": "^2.7.54", "doodle.css": "^0.0.2", - "element-plus": "^2.9.5", + "element-plus": "^2.9.1", "file-saver": "^2.0.5", "jszip": "^3.10.1", "paper-css": "^0.4.1", "pinia": "^2.3.0", "roughjs": "^4.6.6", "unplugin-icons": "^0.22.0", - "vue": "^3.5.13", - "vue-router": "^4.5.1", + "vue": "^3.5.14", + "vue-router": "^4.5.0", "vue3-image-preview": "^0.2.7", "vuedraggable": "^4.1.0", "wired-elements": "^3.0.0-rc.6" diff --git a/public/js/bleedy_interop.js b/public/js/bleedy_interop.js deleted file mode 100644 index c26f9ad..0000000 --- a/public/js/bleedy_interop.js +++ /dev/null @@ -1,39 +0,0 @@ -// public/js/bleedy_interop.js - -/** - * Dispatches a custom event to inform the Vue application that an image has been processed. - * @param {string} name - The name of the processed image file. - * @param {string} blobUrl - The blob URL of the processed image. - * @param {string} format - The format of the processed image (e.g., 'PNG', 'JPEG'). - */ -export function dispatchProcessedImageToVue(name, blobUrl, format) { - console.log(`JS interop: dispatching processed image - Name: ${name}, Format: ${format}`); - const event = new CustomEvent('bleedy-image-processed', { - detail: { - name, - blobUrl, - format, - } - }); - window.dispatchEvent(event); -} - -/** - * Dispatches a custom event to update the Vue application on processing progress. - * @param {object} progressDetail - The progress detail object. - * @param {number} progressDetail.progress - Overall progress percentage. - * @param {number} progressDetail.processed - Number of files processed. - * @param {number} progressDetail.total - Total number of files. - * @param {number} progressDetail.elapsed - Elapsed time in seconds. - * @param {number} progressDetail.remaining - Estimated remaining time in seconds. - */ -export function dispatchProgressToVue(progressDetail) { - // console.log('JS interop: dispatching progress', progressDetail); // Can be noisy - const event = new CustomEvent('processing-progress', { - detail: progressDetail - }); - window.dispatchEvent(event); -} - -// Log to confirm the module is loaded by PyScript -console.log("bleedy_interop.js loaded"); diff --git a/public/pyscript/config.toml b/public/pyscript/config.toml index e4756b9..9bc9dc7 100644 --- a/public/pyscript/config.toml +++ b/public/pyscript/config.toml @@ -1,7 +1,3 @@ -interpreter = "0.26.1" # Pin Pyodide version packages = ["pillow" ] # "opencv-contrib-python-headless" experimental_create_proxy = "auto" -sync_main_only = true - -[js_modules.main] -"/js/bleedy_interop.js" = "interop" \ No newline at end of file +sync_main_only = true \ No newline at end of file diff --git a/public/pyscript/main.py b/public/pyscript/main.py index ed14b5c..831291b 100644 --- a/public/pyscript/main.py +++ b/public/pyscript/main.py @@ -1,15 +1,13 @@ from PIL import Image from io import BytesIO -from pyscript import when # noqa # pyright: ignore [reportAttributeAccessIssue] -from pyscript.ffi import to_js # noqa # pyright: ignore [reportMissingImports] -# window is kept for performance.now(), console, Uint8Array, File, URL are used. -# document, display, page are no longer needed. -from js import window, console, Uint8Array, File, URL # noqa # pyright: ignore [reportMissingImports] -from pyscript.js_modules import interop # Our new JS bridge +from pyscript import when, display # noqa # pyright: ignore [reportAttributeAccessIssue] +from pyscript.web import page # noqa # pyright: ignore [reportMissingImports] +from pyscript.ffi import to_js # noqa # pyright: ignore [reportMissingImports] +from js import document, window, console, Uint8Array, File, URL # noqa # pyright: ignore [reportMissingImports] async def add_bleed(image: Image, bleed: int) -> Image: - console.log(f"(PY) Adding {bleed} pixels of bleed to the image") + console.log(f"Adding {bleed} pixels of bleed to the image") old_width, old_height = image.size new_img = Image.new("RGB", (old_width + 2 * bleed, old_height + 2 * bleed)) new_img.paste(image, (bleed, bleed)) @@ -24,91 +22,80 @@ async def add_bleed(image: Image, bleed: int) -> Image: Image.Transpose.FLIP_LEFT_RIGHT) new_img.paste(segment, (horizontal_position, 0)) - console.log("(PY) Bleed added to the image") + console.log("Bleed added to the image") return new_img async def process_image(img: Image, bleed: int) -> Image: if bleed <= 0: - console.log("(PY) No bleed required. Returning original image.") + console.log("No bleed required. Returning original image.") return img return await add_bleed(img, bleed) + async def create_image_file(modified_image: Image, name: str, fmt: str) -> File: stream = BytesIO() - actual_fmt = fmt if fmt else 'PNG' # Ensure format is not None for saving - modified_image.save(stream, format=actual_fmt.upper()) + modified_image.save(stream, format=fmt.upper()) stream_val = stream.getvalue() js_array = Uint8Array.new(len(stream_val)) js_array.assign(stream_val) + # js_array = Uint8Array.new(stream.getvalue()) + + return File.new([to_js(js_array)], name, to_js({"type": f"image/{fmt.lower()}"})) - # Create a JS File object. Name and type are important for blob URL and download. - return File.new([to_js(js_array)], name, to_js({"type": f"image/{actual_fmt.lower()}"})) +async def display_image_file(img_file: File): + #Create new tag and insert into page + new_image = document.createElement('img') + new_image.src = URL.createObjectURL(img_file) + document.getElementById("bleedy-output").appendChild(new_image) -# display_image_file function is removed as results are dispatched via interop @when("process-images", ".image-bleed-processor") async def process_files(event): - console.log("🚀 (PY) Starting image processing in PyScript!") + console.log("🚀 Starting image processing in PyScript!") try: - files_js = event.detail.files # Keep as JS Array-like of File objects (e.g., FileList) + files = event.detail.files.to_py() # Convert JS objects to Python bleed_amount = event.detail.bleedAmount - num_files = files_js.length # Use .length for JS FileList or Array - - console.log(f"📏 (PY) Bleed amount set to: {bleed_amount}px") - console.log(f"🖼️ (PY) Number of images to process: {num_files}") + console.log(f"📏 Bleed amount set to: {bleed_amount}px") + console.log(f"🖼️ Number of images to process: {len(files)}") start_time = window.performance.now() processed_count = 0 def update_progress(): elapsed = (window.performance.now() - start_time) / 1000 # in seconds - progress_val = (processed_count / num_files) * 100 if num_files > 0 else 0 + progress = (processed_count / len(files)) * 100 rate = processed_count / elapsed if elapsed > 0 else 0 - remaining_val = (num_files - processed_count) / rate if rate > 0 else 0 - - progress_detail = { - "progress": progress_val, - "processed": processed_count, - "total": num_files, - "elapsed": elapsed, - "remaining": remaining_val - } - # Dispatch progress event using the interop module - # Ensure the dictionary is converted to a JS object for the JS function - interop.dispatchProgressToVue(to_js(progress_detail)) - - # Initial progress update (0%) - update_progress() - - for i in range(num_files): - file_obj = files_js.item(i) # Get File object from FileList/JS Array - console.log(f"⚙️ (PY) Processing file {i + 1}/{num_files}: {file_obj.name}") - - array_buf = Uint8Array.new(await file_obj.arrayBuffer()) # Get ArrayBuffer from JS File - bytes_list = bytearray(array_buf) # Convert to bytearray for BytesIO + remaining = (len(files) - processed_count) / rate if rate > 0 else 0 + + # Dispatch progress event using window directly + window.dispatchEvent(window.CustomEvent.new("processing-progress", { + "detail": { + "progress": progress, + "processed": processed_count, + "total": len(files), + "elapsed": elapsed, + "remaining": remaining + } + })) + + for i, file in enumerate(files): + console.log(f"⚙️ Processing file {i + 1}/{len(files)}: {file.name}") + processed_count = i + 1 + update_progress() + array_buf = Uint8Array.new(await file.arrayBuffer()) + bytes_list = bytearray(array_buf) image_bytes = BytesIO(bytes_list) img = Image.open(image_bytes) - - img_format_str = img.format if img.format else 'PNG' # Default to PNG if format is not detected - console.log(f"📄 (PY) Image details - Name: {file_obj.name}, Format: {img_format_str}, Size: {img.width}x{img.height}") - + console.log(f"📄 Image details - Name: {file.name}, Format: {img.format}, Size: {img.width}x{img.height}") modified_image = await process_image(img, bleed_amount) - modified_img_file = await create_image_file(modified_image, file_obj.name, img_format_str) - - # Create a blob URL in Python to pass to JS, as JS side expects a URL - blob_url = URL.createObjectURL(modified_img_file) - - # Dispatch processed image data to Vue via JS interop module - interop.dispatchProcessedImageToVue(modified_img_file.name, blob_url, img_format_str) - - processed_count += 1 - update_progress() # Update progress after each image - - console.log(f"✅ (PY) File {i + 1}/{num_files}: {file_obj.name} processed successfully") - - console.log("🎉 (PY) All images processed successfully!") + modified_img_file = await create_image_file(modified_image, file.name, img.format) + await display_image_file(modified_img_file) + # Example: processing file data with PIL + # file_data = file.arrayBuffer().to_py() + # img = Image.open(BytesIO(file_data)) + # img_with_border = ImageOps.expand(img, border=bleed_amount, fill="red") + # img_with_border.show() + console.log(f"✅ File {i + 1}/{len(files)}: {file.name} processed successfully") + console.log("🎉 All images processed successfully!") except Exception as e: - console.error(f"❌ (PY) Error processing images: {str(e)}") - # Future: dispatch an error event to JS/Vue via interop - # if hasattr(interop, 'dispatchErrorToVue'): - # interop.dispatchErrorToVue(str(e)) + console.error(f"❌ Error processing images: {str(e)}") diff --git a/scripts/check-pyscript-version.sh b/scripts/check-pyscript-version.sh deleted file mode 100644 index d59d666..0000000 --- a/scripts/check-pyscript-version.sh +++ /dev/null @@ -1,68 +0,0 @@ -#!/bin/bash - -# Placeholder script for checking PyScript version consistency -# To be integrated with Husky as a pre-commit hook. - -# --- Configuration --- -# Path to the index.html file relative to the repository root -INDEX_HTML_PATH="index.html" -# Expected PyScript version (should be kept in sync with actual upgrades) -EXPECTED_PYSCRIPT_VERSION="2025.5.1" -# Path to the acknowledgment file, relative to the repository root -# This file can contain a version string that, if it matches the *latest found online*, allows a commit even if different from EXPECTED_PYSCRIPT_VERSION -# This is for cases where we know a new version is out but are not ready to upgrade yet. -# Example content for .pyscript_version_ack: 2025.6.1 -ACK_FILE_PATH=".pyscript_version_ack" -# URL to check for the latest PyScript version string (e.g., on pyscript.net or a stable API endpoint) -# This is a placeholder; a more robust method might be needed, like parsing a specific element from pyscript.net/latest/ -LATEST_VERSION_URL="https://pyscript.net/latest/" # This URL itself might not directly give the version string easily. - -echo "Bleedy - PyScript Version Check (Placeholder)" - -# --- 1. Check current version in index.html --- -# Placeholder: Actual parsing logic needed here. -# Example: grep for 'releases/YYYY.M.X/core.js' and extract YYYY.M.X -# current_version_in_html=$(grep -o 'releases/[0-9.]\+/core.js' "$INDEX_HTML_PATH" | head -n 1 | sed -E 's/releases\/(.*)\/core.js/\1/') -# For now, we'll simulate this: -current_version_in_html=$EXPECTED_PYSCRIPT_VERSION # Assume it matches for this placeholder - -if [ -z "$current_version_in_html" ]; then - echo "Error: Could not determine PyScript version from $INDEX_HTML_PATH." - # exit 1 # Uncomment to enforce failure -fi -echo "Current version in $INDEX_HTML_PATH: $current_version_in_html" - -if [ "$current_version_in_html" != "$EXPECTED_PYSCRIPT_VERSION" ]; then - echo "Error: PyScript version in $INDEX_HTML_PATH ($current_version_in_html) does not match expected version ($EXPECTED_PYSCRIPT_VERSION)." - echo "Please update $INDEX_HTML_PATH or this script's EXPECTED_PYSCRIPT_VERSION." - # exit 1 # Uncomment to enforce failure -fi - -# --- 2. Check latest official PyScript version (Simulated) --- -# Placeholder: Actual fetching and parsing logic needed. -# Example: curl -s $LATEST_VERSION_URL | ... parse out version ... -# For now, we'll simulate this: -latest_official_version="2025.5.1" # Simulate that the current version is the latest official -# latest_official_version="2025.6.1" # Simulate a newer version is available - -echo "Latest official PyScript version (simulated check): $latest_official_version" - -# --- 3. Check acknowledgment file if versions diverge --- -acknowledged_version="" -if [ -f "$ACK_FILE_PATH" ]; then - acknowledged_version=$(cat "$ACK_FILE_PATH") -fi - -if [ "$current_version_in_html" != "$latest_official_version" ]; then - echo "Warning: Your current PyScript version ($current_version_in_html) is different from the latest official version ($latest_official_version)." - if [ "$acknowledged_version" == "$latest_official_version" ]; then - echo "However, the latest version ($latest_official_version) has been acknowledged in $ACK_FILE_PATH. Proceeding." - else - echo "The latest version ($latest_official_version) has NOT been acknowledged in $ACK_FILE_PATH (or file doesn't exist/ack is for different version: '$acknowledged_version')." - echo "To proceed with commit without upgrading, create/update $ACK_FILE_PATH with the version string: $latest_official_version" - # exit 1 # Uncomment to enforce failure - fi -fi - -echo "PyScript version check complete (Placeholder - actual checks and enforcement not fully active)." -exit 0 # Placeholder: always allow commit for now diff --git a/src/App.vue b/src/App.vue index 7dc8c57..f5bafdb 100644 --- a/src/App.vue +++ b/src/App.vue @@ -100,7 +100,7 @@ onMounted(() => { diff --git a/src/assets/scss/_icons.scss b/src/assets/scss/_icons.scss index 535d92e..2602eb8 100644 --- a/src/assets/scss/_icons.scss +++ b/src/assets/scss/_icons.scss @@ -1,18 +1,17 @@ @font-face { - font-family: icons; + font-family: "icons"; src: url('fonts/icons.eot'); src: url('fonts/icons.eot?#iefix') format('eot'), // url('fonts/icons.woff2') format('woff2'), url('fonts/icons.woff') format('woff'), url('fonts/icons.ttf') format('truetype')/*, url('fonts/icons.svg#icons') format('svg')*/; } @mixin icon-styles { - font-family: icons; + font-family: "icons"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; - // speak: none; // only necessary if not using the private unicode range (firstGlyph option) text-decoration: none; text-transform: none; @@ -24,959 +23,720 @@ @function icon-char($filename) { $char: ""; - @if $filename==anchor { $char: "\E001"; } - @if $filename==android { $char: "\E002"; } - @if $filename==apple { $char: "\E003"; } - @if $filename==archive { $char: "\E004"; } - @if $filename==arrow-alt { $char: "\E005"; } - @if $filename==arrow-down { $char: "\E006"; } - @if $filename==arrow-left { $char: "\E007"; } - @if $filename==arrow-right { $char: "\E008"; } - @if $filename==arrow-up { $char: "\E009"; } - @if $filename==balance-scale { $char: "\E00A"; } - @if $filename==ban { $char: "\E00B"; } - @if $filename==bar-chart { $char: "\E00C"; } - @if $filename==barcode { $char: "\E00D"; } - @if $filename==bars { $char: "\E00E"; } - @if $filename==battery-empty { $char: "\E00F"; } - @if $filename==battery-full { $char: "\E010"; } - @if $filename==battery-half { $char: "\E011"; } - @if $filename==battery-quarter { $char: "\E012"; } - @if $filename==beer { $char: "\E013"; } - @if $filename==behance { $char: "\E014"; } - @if $filename==bell { $char: "\E015"; } - @if $filename==bicycle { $char: "\E016"; } - @if $filename==birthday-cake { $char: "\E017"; } - @if $filename==bolt { $char: "\E018"; } - @if $filename==bomb { $char: "\E019"; } - @if $filename==book { $char: "\E01A"; } - @if $filename==bookmark-o { $char: "\E01B"; } - @if $filename==briefcase { $char: "\E01C"; } - @if $filename==bug { $char: "\E01D"; } - @if $filename==bullseye { $char: "\E01E"; } - @if $filename==calculator { $char: "\E01F"; } - @if $filename==calendar { $char: "\E020"; } - @if $filename==caret-down { $char: "\E021"; } - @if $filename==caret-left { $char: "\E022"; } - @if $filename==caret-square-o-down { $char: "\E023"; } - @if $filename==caret-square-o-left { $char: "\E024"; } - @if $filename==caret-square-o-right { $char: "\E025"; } - @if $filename==caret-square-o-up { $char: "\E026"; } - @if $filename==caret-up { $char: "\E027"; } - @if $filename==check { $char: "\E028"; } - @if $filename==chevron-down { $char: "\E029"; } - @if $filename==chevron-left { $char: "\E02A"; } - @if $filename==chevron-right { $char: "\E02B"; } - @if $filename==chevron-up { $char: "\E02C"; } - @if $filename==circle-o { $char: "\E02D"; } - @if $filename==clipboard { $char: "\E02E"; } - @if $filename==clone { $char: "\E02F"; } - @if $filename==cloud-remove { $char: "\E030"; } - @if $filename==cloud-sync { $char: "\E031"; } - @if $filename==cloud-upload { $char: "\E032"; } - @if $filename==cloud { $char: "\E033"; } - @if $filename==code-fork { $char: "\E034"; } - @if $filename==code { $char: "\E035"; } - @if $filename==coffee { $char: "\E036"; } - @if $filename==cog { $char: "\E037"; } - @if $filename==cogs { $char: "\E038"; } - @if $filename==comment { $char: "\E039"; } - @if $filename==comments { $char: "\E03A"; } - @if $filename==compass { $char: "\E03B"; } - @if $filename==compress { $char: "\E03C"; } - @if $filename==cutlery { $char: "\E03D"; } - @if $filename==dashboard { $char: "\E03E"; } - @if $filename==database { $char: "\E03F"; } - @if $filename==delicious { $char: "\E040"; } - @if $filename==desktop { $char: "\E041"; } - @if $filename==download { $char: "\E042"; } - @if $filename==dribble { $char: "\E043"; } - @if $filename==edit { $char: "\E044"; } - @if $filename==eject { $char: "\E045"; } - @if $filename==envelope { $char: "\E046"; } - @if $filename==euro { $char: "\E047"; } - @if $filename==exchange { $char: "\E048"; } - @if $filename==expand { $char: "\E049"; } - @if $filename==eye { $char: "\E04A"; } - @if $filename==eyedropper { $char: "\E04B"; } - @if $filename==facebook { $char: "\E04C"; } - @if $filename==female { $char: "\E04D"; } - @if $filename==file-ai-o { $char: "\E04E"; } - @if $filename==file-archive-o { $char: "\E04F"; } - @if $filename==file-css-o { $char: "\E050"; } - @if $filename==file-doc-o { $char: "\E051"; } - @if $filename==file-eps-o { $char: "\E052"; } - @if $filename==file-gif-o { $char: "\E053"; } - @if $filename==file-html-o { $char: "\E054"; } - @if $filename==file-jpg-o { $char: "\E055"; } - @if $filename==file-js-o { $char: "\E056"; } - @if $filename==file-minus { $char: "\E057"; } - @if $filename==file-o { $char: "\E058"; } - @if $filename==file-pdf-o { $char: "\E059"; } - @if $filename==file-php-o { $char: "\E05A"; } - @if $filename==file-png-o { $char: "\E05B"; } - @if $filename==file-psd-o { $char: "\E05C"; } - @if $filename==file-text-o { $char: "\E05D"; } - @if $filename==file-xls-o { $char: "\E05E"; } - @if $filename==files-o { $char: "\E05F"; } - @if $filename==film { $char: "\E060"; } - @if $filename==filter { $char: "\E061"; } - @if $filename==fire { $char: "\E062"; } - @if $filename==flag { $char: "\E063"; } - @if $filename==flask { $char: "\E064"; } - @if $filename==floppy-o { $char: "\E065"; } - @if $filename==folder-lock { $char: "\E066"; } - @if $filename==folder-minus { $char: "\E067"; } - @if $filename==folder-plus { $char: "\E068"; } - @if $filename==folder-remove { $char: "\E069"; } - @if $filename==font { $char: "\E06A"; } - @if $filename==frown-o { $char: "\E06B"; } - @if $filename==futbol-o { $char: "\E06C"; } - @if $filename==gamepad { $char: "\E06D"; } - @if $filename==gem { $char: "\E06E"; } - @if $filename==github { $char: "\E06F"; } - @if $filename==glass { $char: "\E070"; } - @if $filename==globe { $char: "\E071"; } - @if $filename==google-plus { $char: "\E072"; } - @if $filename==graduation-cap { $char: "\E073"; } - @if $filename==hdd-o { $char: "\E074"; } - @if $filename==headphones { $char: "\E075"; } - @if $filename==heart { $char: "\E076"; } - @if $filename==home { $char: "\E077"; } - @if $filename==hourglass-half { $char: "\E078"; } - @if $filename==industry { $char: "\E079"; } - @if $filename==info-circle-o { $char: "\E07A"; } - @if $filename==info-circle { $char: "\E07B"; } - @if $filename==instagram { $char: "\E07C"; } - @if $filename==jpy { $char: "\E07D"; } - @if $filename==key { $char: "\E07E"; } - @if $filename==keyboard { $char: "\E07F"; } - @if $filename==leaf { $char: "\E080"; } - @if $filename==life-ring { $char: "\E081"; } - @if $filename==lightbulb-o { $char: "\E082"; } - @if $filename==line-chart { $char: "\E083"; } - @if $filename==link { $char: "\E084"; } - @if $filename==linkedin { $char: "\E085"; } - @if $filename==list { $char: "\E086"; } - @if $filename==location-arrow { $char: "\E087"; } - @if $filename==lock { $char: "\E088"; } - @if $filename==magic { $char: "\E089"; } - @if $filename==magnet { $char: "\E08A"; } - @if $filename==male { $char: "\E08B"; } - @if $filename==map-marker { $char: "\E08C"; } - @if $filename==map-o { $char: "\E08D"; } - @if $filename==map-signs { $char: "\E08E"; } - @if $filename==map { $char: "\E08F"; } - @if $filename==mars { $char: "\E090"; } - @if $filename==microphone { $char: "\E091"; } - @if $filename==minus-circle { $char: "\E092"; } - @if $filename==minus-square-o { $char: "\E093"; } - @if $filename==minus { $char: "\E094"; } - @if $filename==money { $char: "\E095"; } - @if $filename==moon-o { $char: "\E096"; } - @if $filename==music { $char: "\E097"; } - @if $filename==paint-brush { $char: "\E098"; } - @if $filename==paper-plane { $char: "\E099"; } - @if $filename==paragraph { $char: "\E09A"; } - @if $filename==pause { $char: "\E09B"; } - @if $filename==pencil-22 { $char: "\E09C"; } - @if $filename==pencil-square-o { $char: "\E09D"; } - @if $filename==pencil { $char: "\E09E"; } - @if $filename==phone { $char: "\E09F"; } - @if $filename==picture-o { $char: "\E0A0"; } - @if $filename==pie-chart { $char: "\E0A1"; } - @if $filename==pinterest { $char: "\E0A2"; } - @if $filename==play { $char: "\E0A3"; } - @if $filename==plus-circle-o { $char: "\E0A4"; } - @if $filename==plus-square-o { $char: "\E0A5"; } - @if $filename==plus { $char: "\E0A6"; } - @if $filename==power-off { $char: "\E0A7"; } - @if $filename==question-circle { $char: "\E0A8"; } - @if $filename==question { $char: "\E0A9"; } - @if $filename==quote-right { $char: "\E0AA"; } - @if $filename==random { $char: "\E0AB"; } - @if $filename==refresh { $char: "\E0AC"; } - @if $filename==repeat { $char: "\E0AD"; } - @if $filename==rss { $char: "\E0AE"; } - @if $filename==scissors { $char: "\E0AF"; } - @if $filename==search-minus { $char: "\E0B0"; } - @if $filename==search-plus { $char: "\E0B1"; } - @if $filename==search { $char: "\E0B2"; } - @if $filename==share-alt { $char: "\E0B3"; } - @if $filename==shopping-bag { $char: "\E0B4"; } - @if $filename==shopping-cart { $char: "\E0B5"; } - @if $filename==sign-in { $char: "\E0B6"; } - @if $filename==sign-out { $char: "\E0B7"; } - @if $filename==sitemap { $char: "\E0B8"; } - @if $filename==skype { $char: "\E0B9"; } - @if $filename==sliders { $char: "\E0BA"; } - @if $filename==smile-o { $char: "\E0BB"; } - @if $filename==sort { $char: "\E0BC"; } - @if $filename==space-shuttle { $char: "\E0BD"; } - @if $filename==square-o { $char: "\E0BE"; } - @if $filename==star-half { $char: "\E0BF"; } - @if $filename==star-o { $char: "\E0C0"; } - @if $filename==step-backward { $char: "\E0C1"; } - @if $filename==step-forward { $char: "\E0C2"; } - @if $filename==suitcase { $char: "\E0C3"; } - @if $filename==sun-o { $char: "\E0C4"; } - @if $filename==tag { $char: "\E0C5"; } - @if $filename==television { $char: "\E0C6"; } - @if $filename==terminal { $char: "\E0C7"; } - @if $filename==th-large { $char: "\E0C8"; } - @if $filename==th { $char: "\E0C9"; } - @if $filename==thumb-down { $char: "\E0CA"; } - @if $filename==thumb-tack { $char: "\E0CB"; } - @if $filename==thumbs-o-up { $char: "\E0CC"; } - @if $filename==ticket { $char: "\E0CD"; } - @if $filename==times-circle { $char: "\E0CE"; } - @if $filename==times-square { $char: "\E0CF"; } - @if $filename==times { $char: "\E0D0"; } - @if $filename==tint { $char: "\E0D1"; } - @if $filename==trash { $char: "\E0D2"; } - @if $filename==tree { $char: "\E0D3"; } - @if $filename==trophy { $char: "\E0D4"; } - @if $filename==truck { $char: "\E0D5"; } - @if $filename==twitter { $char: "\E0D6"; } - @if $filename==umbrella { $char: "\E0D7"; } - @if $filename==undo { $char: "\E0D8"; } - @if $filename==unlock { $char: "\E0D9"; } - @if $filename==usb { $char: "\E0DA"; } - @if $filename==usd { $char: "\E0DB"; } - @if $filename==user-minus { $char: "\E0DC"; } - @if $filename==user-plus { $char: "\E0DD"; } - @if $filename==user-star { $char: "\E0DE"; } - @if $filename==user { $char: "\E0DF"; } - @if $filename==users { $char: "\E0E0"; } - @if $filename==venus { $char: "\E0E1"; } - @if $filename==video-camera { $char: "\E0E2"; } - @if $filename==vimeo { $char: "\E0E3"; } - @if $filename==volume-diabled { $char: "\E0E4"; } - @if $filename==volume-down-2 { $char: "\E0E5"; } - @if $filename==volume-down { $char: "\E0E6"; } - @if $filename==volume-off { $char: "\E0E7"; } - @if $filename==volume-up { $char: "\E0E8"; } - @if $filename==warning { $char: "\E0E9"; } - @if $filename==weather { $char: "\E0EA"; } - @if $filename==webcam { $char: "\E0EB"; } - @if $filename==wifi { $char: "\E0EC"; } - @if $filename==windows { $char: "\E0ED"; } - @if $filename==wrench { $char: "\E0EE"; } - @return $char; } @@ -986,10 +746,10 @@ $extend: true) { &:#{$insert} { @if $extend { @extend %icon; - } @else { + } + @else { @include icon-styles; } - content: icon-char($filename); } } @@ -997,951 +757,714 @@ $extend: true) { .icon-anchor { @include icon(anchor); } - .icon-android { @include icon(android); } - .icon-apple { @include icon(apple); } - .icon-archive { @include icon(archive); } - .icon-arrow-alt { @include icon(arrow-alt); } - .icon-arrow-down { @include icon(arrow-down); } - .icon-arrow-left { @include icon(arrow-left); } - .icon-arrow-right { @include icon(arrow-right); } - .icon-arrow-up { @include icon(arrow-up); } - .icon-balance-scale { @include icon(balance-scale); } - .icon-ban { @include icon(ban); } - .icon-bar-chart { @include icon(bar-chart); } - .icon-barcode { @include icon(barcode); } - .icon-bars { @include icon(bars); } - .icon-battery-empty { @include icon(battery-empty); } - .icon-battery-full { @include icon(battery-full); } - .icon-battery-half { @include icon(battery-half); } - .icon-battery-quarter { @include icon(battery-quarter); } - .icon-beer { @include icon(beer); } - .icon-behance { @include icon(behance); } - .icon-bell { @include icon(bell); } - .icon-bicycle { @include icon(bicycle); } - .icon-birthday-cake { @include icon(birthday-cake); } - .icon-bolt { @include icon(bolt); } - .icon-bomb { @include icon(bomb); } - .icon-book { @include icon(book); } - .icon-bookmark-o { @include icon(bookmark-o); } - .icon-briefcase { @include icon(briefcase); } - .icon-bug { @include icon(bug); } - .icon-bullseye { @include icon(bullseye); } - .icon-calculator { @include icon(calculator); } - .icon-calendar { @include icon(calendar); } - .icon-caret-down { @include icon(caret-down); } - .icon-caret-left { @include icon(caret-left); } - .icon-caret-square-o-down { @include icon(caret-square-o-down); } - .icon-caret-square-o-left { @include icon(caret-square-o-left); } - .icon-caret-square-o-right { @include icon(caret-square-o-right); } - .icon-caret-square-o-up { @include icon(caret-square-o-up); } - .icon-caret-up { @include icon(caret-up); } - .icon-check { @include icon(check); } - .icon-chevron-down { @include icon(chevron-down); } - .icon-chevron-left { @include icon(chevron-left); } - .icon-chevron-right { @include icon(chevron-right); } - .icon-chevron-up { @include icon(chevron-up); } - .icon-circle-o { @include icon(circle-o); } - .icon-clipboard { @include icon(clipboard); } - .icon-clone { @include icon(clone); } - .icon-cloud-remove { @include icon(cloud-remove); } - .icon-cloud-sync { @include icon(cloud-sync); } - .icon-cloud-upload { @include icon(cloud-upload); } - .icon-cloud { @include icon(cloud); } - .icon-code-fork { @include icon(code-fork); } - .icon-code { @include icon(code); } - .icon-coffee { @include icon(coffee); } - .icon-cog { @include icon(cog); } - .icon-cogs { @include icon(cogs); } - .icon-comment { @include icon(comment); } - .icon-comments { @include icon(comments); } - .icon-compass { @include icon(compass); } - .icon-compress { @include icon(compress); } - .icon-cutlery { @include icon(cutlery); } - .icon-dashboard { @include icon(dashboard); } - .icon-database { @include icon(database); } - .icon-delicious { @include icon(delicious); } - .icon-desktop { @include icon(desktop); } - .icon-download { @include icon(download); } - .icon-dribble { @include icon(dribble); } - .icon-edit { @include icon(edit); } - .icon-eject { @include icon(eject); } - .icon-envelope { @include icon(envelope); } - .icon-euro { @include icon(euro); } - .icon-exchange { @include icon(exchange); } - .icon-expand { @include icon(expand); } - .icon-eye { @include icon(eye); } - .icon-eyedropper { @include icon(eyedropper); } - .icon-facebook { @include icon(facebook); } - .icon-female { @include icon(female); } - .icon-file-ai-o { @include icon(file-ai-o); } - .icon-file-archive-o { @include icon(file-archive-o); } - .icon-file-css-o { @include icon(file-css-o); } - .icon-file-doc-o { @include icon(file-doc-o); } - .icon-file-eps-o { @include icon(file-eps-o); } - .icon-file-gif-o { @include icon(file-gif-o); } - .icon-file-html-o { @include icon(file-html-o); } - .icon-file-jpg-o { @include icon(file-jpg-o); } - .icon-file-js-o { @include icon(file-js-o); } - .icon-file-minus { @include icon(file-minus); } - .icon-file-o { @include icon(file-o); } - .icon-file-pdf-o { @include icon(file-pdf-o); } - .icon-file-php-o { @include icon(file-php-o); } - .icon-file-png-o { @include icon(file-png-o); } - .icon-file-psd-o { @include icon(file-psd-o); } - .icon-file-text-o { @include icon(file-text-o); } - .icon-file-xls-o { @include icon(file-xls-o); } - .icon-files-o { @include icon(files-o); } - .icon-film { @include icon(film); } - .icon-filter { @include icon(filter); } - .icon-fire { @include icon(fire); } - .icon-flag { @include icon(flag); } - .icon-flask { @include icon(flask); } - .icon-floppy-o { @include icon(floppy-o); } - .icon-folder-lock { @include icon(folder-lock); } - .icon-folder-minus { @include icon(folder-minus); } - .icon-folder-plus { @include icon(folder-plus); } - .icon-folder-remove { @include icon(folder-remove); } - .icon-font { @include icon(font); } - .icon-frown-o { @include icon(frown-o); } - .icon-futbol-o { @include icon(futbol-o); } - .icon-gamepad { @include icon(gamepad); } - .icon-gem { @include icon(gem); } - .icon-github { @include icon(github); } - .icon-glass { @include icon(glass); } - .icon-globe { @include icon(globe); } - .icon-google-plus { @include icon(google-plus); } - .icon-graduation-cap { @include icon(graduation-cap); } - .icon-hdd-o { @include icon(hdd-o); } - .icon-headphones { @include icon(headphones); } - .icon-heart { @include icon(heart); } - .icon-home { @include icon(home); } - .icon-hourglass-half { @include icon(hourglass-half); } - .icon-industry { @include icon(industry); } - .icon-info-circle-o { @include icon(info-circle-o); } - .icon-info-circle { @include icon(info-circle); } - .icon-instagram { @include icon(instagram); } - .icon-jpy { @include icon(jpy); } - .icon-key { @include icon(key); } - .icon-keyboard { @include icon(keyboard); } - .icon-leaf { @include icon(leaf); } - .icon-life-ring { @include icon(life-ring); } - .icon-lightbulb-o { @include icon(lightbulb-o); } - .icon-line-chart { @include icon(line-chart); } - .icon-link { @include icon(link); } - .icon-linkedin { @include icon(linkedin); } - .icon-list { @include icon(list); } - .icon-location-arrow { @include icon(location-arrow); } - .icon-lock { @include icon(lock); } - .icon-magic { @include icon(magic); } - .icon-magnet { @include icon(magnet); } - .icon-male { @include icon(male); } - .icon-map-marker { @include icon(map-marker); } - .icon-map-o { @include icon(map-o); } - .icon-map-signs { @include icon(map-signs); } - .icon-map { @include icon(map); } - .icon-mars { @include icon(mars); } - .icon-microphone { @include icon(microphone); } - .icon-minus-circle { @include icon(minus-circle); } - .icon-minus-square-o { @include icon(minus-square-o); } - .icon-minus { @include icon(minus); } - .icon-money { @include icon(money); } - .icon-moon-o { @include icon(moon-o); } - .icon-music { @include icon(music); } - .icon-paint-brush { @include icon(paint-brush); } - .icon-paper-plane { @include icon(paper-plane); } - .icon-paragraph { @include icon(paragraph); } - .icon-pause { @include icon(pause); } - .icon-pencil-22 { @include icon(pencil-22 ); } - .icon-pencil-square-o { @include icon(pencil-square-o); } - .icon-pencil { @include icon(pencil); } - .icon-phone { @include icon(phone); } - .icon-picture-o { @include icon(picture-o); } - .icon-pie-chart { @include icon(pie-chart); } - .icon-pinterest { @include icon(pinterest); } - .icon-play { @include icon(play); } - .icon-plus-circle-o { @include icon(plus-circle-o); } - .icon-plus-square-o { @include icon(plus-square-o); } - .icon-plus { @include icon(plus); } - .icon-power-off { @include icon(power-off); } - .icon-question-circle { @include icon(question-circle); } - .icon-question { @include icon(question); } - .icon-quote-right { @include icon(quote-right); } - .icon-random { @include icon(random); } - .icon-refresh { @include icon(refresh); } - .icon-repeat { @include icon(repeat); } - .icon-rss { @include icon(rss); } - .icon-scissors { @include icon(scissors); } - .icon-search-minus { @include icon(search-minus); } - .icon-search-plus { @include icon(search-plus); } - .icon-search { @include icon(search); } - .icon-share-alt { @include icon(share-alt); } - .icon-shopping-bag { @include icon(shopping-bag); } - .icon-shopping-cart { @include icon(shopping-cart); } - .icon-sign-in { @include icon(sign-in); } - .icon-sign-out { @include icon(sign-out); } - .icon-sitemap { @include icon(sitemap); } - .icon-skype { @include icon(skype); } - .icon-sliders { @include icon(sliders); } - .icon-smile-o { @include icon(smile-o); } - .icon-sort { @include icon(sort); } - .icon-space-shuttle { @include icon(space-shuttle); } - .icon-square-o { @include icon(square-o); } - .icon-star-half { @include icon(star-half); } - .icon-star-o { @include icon(star-o); } - .icon-step-backward { @include icon(step-backward); } - .icon-step-forward { @include icon(step-forward); } - .icon-suitcase { @include icon(suitcase); } - .icon-sun-o { @include icon(sun-o); } - .icon-tag { @include icon(tag); } - .icon-television { @include icon(television); } - .icon-terminal { @include icon(terminal); } - .icon-th-large { @include icon(th-large); } - .icon-th { @include icon(th); } - .icon-thumb-down { @include icon(thumb-down); } - .icon-thumb-tack { @include icon(thumb-tack); } - .icon-thumbs-o-up { @include icon(thumbs-o-up); } - .icon-ticket { @include icon(ticket); } - .icon-times-circle { @include icon(times-circle); } - .icon-times-square { @include icon(times-square); } - .icon-times { @include icon(times); } - .icon-tint { @include icon(tint); } - .icon-trash { @include icon(trash); } - .icon-tree { @include icon(tree); } - .icon-trophy { @include icon(trophy); } - .icon-truck { @include icon(truck); } - .icon-twitter { @include icon(twitter); } - .icon-umbrella { @include icon(umbrella); } - .icon-undo { @include icon(undo); } - .icon-unlock { @include icon(unlock); } - .icon-usb { @include icon(usb); } - .icon-usd { @include icon(usd); } - .icon-user-minus { @include icon(user-minus); } - .icon-user-plus { @include icon(user-plus); } - .icon-user-star { @include icon(user-star); } - .icon-user { @include icon(user); } - .icon-users { @include icon(users); } - .icon-venus { @include icon(venus); } - .icon-video-camera { @include icon(video-camera); } - .icon-vimeo { @include icon(vimeo); } - .icon-volume-diabled { @include icon(volume-diabled); } - .icon-volume-down-2 { @include icon(volume-down-2); } - .icon-volume-down { @include icon(volume-down); } - .icon-volume-off { @include icon(volume-off); } - .icon-volume-up { @include icon(volume-up); } - .icon-warning { @include icon(warning); } - .icon-weather { @include icon(weather); } - .icon-webcam { @include icon(webcam); } - .icon-wifi { @include icon(wifi); } - .icon-windows { @include icon(windows); } - .icon-wrench { @include icon(wrench); } diff --git a/src/assets/scss/handdrawn.scss b/src/assets/scss/handdrawn.scss index 3fa18c5..506104a 100644 --- a/src/assets/scss/handdrawn.scss +++ b/src/assets/scss/handdrawn.scss @@ -1,16 +1,13 @@ -$gray: #717171; +$gray : #717171; $lightgray: #919090; - // @import url(https://fonts.googleapis.com/css?family=Indie+Flower); // @import url(https://fonts.googleapis.com/css?family=Covered+By+Your+Grace); // @import url(https://fonts.googleapis.com/css?family=Shadows+Into+Light); -@import "https://fonts.googleapis.com/css?family=Architects+Daughter"; - +@import url(https://fonts.googleapis.com/css?family=Architects+Daughter); body { // background: whitesmoke url(assets/backgrounds/paper_texture309.jpg); - background: whitesmoke url("assets/backgrounds/paper_texture310.jpg"); - + background: whitesmoke url(assets/backgrounds/paper_texture310.jpg); // background: whitesmoke url(assets/backgrounds/paper_texture318.jpg); // background: whitesmoke url(assets/backgrounds/paper_texture327.jpg); // background: whitesmoke url(assets/backgrounds/paper_texture332.jpg); @@ -29,9 +26,7 @@ select, button { // font-family: 'Indie Flower', cursive; font-family: 'Architects Daughter', cursive; - /* font-family: 'Shadows Into Light', cursive; */ - /* font-family: 'Covered By Your Grace', cursive; */ padding: .2rem .4rem; } @@ -44,17 +39,15 @@ button, table, .hd-border, fieldset, -.checkbox > input[type="checkbox"] + label::before , -.radio > input[type="radio"] + label::before +.checkbox > input[type="checkbox"] + label:before , +.radio > input[type="radio"] + label:before { background: transparent; align-self: center; outline: none; border: 2px solid $lightgray; - // box-shadow: 20px 18px 24px -26px hsla(0, 0%, 0%, .2); - border-radius: 255px 15px 225px / 15px 225px 15px 255px; - + border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; /* Above is shorthand for: border-top-left-radius: 255px 15px; @@ -65,23 +58,18 @@ fieldset, &.lined.thick { border: solid 7px #41403E; } - &.dotted.thick { border: dotted 5px #41403E; } - &.dashed.thick { border: dashed 5px #41403E; } - &.lined.thin { border: solid 2px #41403E; } - &.dotted.thin { border: dotted 2px #41403E; } - &.dashed.thin { border: dashed 2px #41403E; } @@ -95,30 +83,28 @@ button, textarea { color: $gray; } - -/* */ -input[type="button"], +/**/ +input[type=button], button { background: $lightgray; cursor:pointer; color: white; } - /* Tables */ thead { tr th { border-bottom: 2px solid $lightgray; - box-shadow: 20px 38px 34px -26px hsl(0deg 0% 0% / 20%); - border-radius: 0 0 225px / 0 0 15px; + box-shadow: 20px 38px 34px -26px hsla(0, 0%, 0%, .2); + border-radius: 0 0 225px 0/0 0 15px 0; } } tfoot { tr td { border-top: 2px solid $lightgray; - box-shadow: 20px 38px 34px -26px hsl(0deg 0% 0% / 20%); - border-radius: 0 0 225px / 0 0 15px; - border-radius: 255px 0 0 / 15px 0 0; + box-shadow: 20px 38px 34px -26px hsla(0, 0%, 0%, .2); + border-radius: 0 0 225px 0/0 0 15px 0; + border-radius: 255px 0 0 0/15px 0 0 0; } } @@ -130,8 +116,7 @@ th { ul li { list-style: none; position: relative; - - &::before { + &:before { font-family: icons; content: "\E02D"; position:absolute; @@ -146,7 +131,7 @@ ul li { */ $color-default: $gray; // default color -$color-default-light: #DDD; // default color light +$color-default-light: #DDDDDD; // default color light $color-active: $gray; // color when active or checked $color-active-light: #9EFFC4; // active color light $color-focus: $gray; // color when focused @@ -158,7 +143,6 @@ $margin-el: 7px; // default margin for our custom inputs .checkbox, .radio { display: inline; } - .checkbox > input[type="checkbox"], .radio > input[type="radio"] { &:checked, @@ -167,7 +151,6 @@ $margin-el: 7px; // default margin for our custom inputs height: 0; display: none; opacity: 0; - & + label { display: inline-block; margin-right: $margin-el; @@ -177,8 +160,7 @@ $margin-el: 7px; // default margin for our custom inputs padding-top: 2px; position: relative; cursor: pointer; - - &::before { + &:before { // position elements absolute to parent container position: absolute; display: inline-block; @@ -189,23 +171,19 @@ $margin-el: 7px; // default margin for our custom inputs border: 2px solid $color-default; color: $color-default; } - - &:hover::before { + &:hover:before { // add some hover styling // background-color: $color-default; } } - - &:focus + label::before { + &:focus + label:before { border-color: $color-focus; box-shadow: 0 0 6px 0 $color-focus; } - &[disabled] + label { cursor: not-allowed; opacity: .4; - - &::before { + &:before { opacity: .7; } } @@ -213,56 +191,52 @@ $margin-el: 7px; // default margin for our custom inputs } // styling for checkbox for both states -.checkbox > [type="checkbox"]:checked + label::before, -.checkbox > [type="checkbox"]:not(:checked) + label::before { +.checkbox > [type="checkbox"]:checked + label:before, +.checkbox > [type="checkbox"]:not(:checked) + label:before { // set icon font - font-family: icons; + font-family: "icons"; line-height: 0.3rem; font-size: 1rem; - // add some CSS3-animations transition: border-color .2s ease-in, background-color .2s ease-in; } // styling for checkbox when selected -.checkbox > [type="checkbox"]:checked + label::before { +.checkbox > [type="checkbox"]:checked + label:before { // set checkmark icon content: "\E028"; color: #FFF; - // background-color: $color-active; border-color: $color-active; } // styling for checkbox when not selected -.checkbox > [type="checkbox"]:not(:checked) + label::before { +.checkbox > [type="checkbox"]:not(:checked) + label:before { // remove checkmark icon content: ""; } // styling for radio for both states -.radio > [type="radio"]:checked + label::before, -.radio > [type="radio"]:not(:checked) + label::before, +.radio > [type="radio"]:checked + label:before, +.radio > [type="radio"]:not(:checked) + label:before, { content: ""; border-radius: 15px; - // add some CSS3-animations transition: border-color .2s ease-in, box-shadow .1s ease-in, background-color .2s ease-in; } // styling for radio when selected -.radio > [type="radio"]:checked + label::before { +.radio > [type="radio"]:checked + label:before { color: $color-active; border-color: $color-active; background-color: $color-active; - // use box-shadow to render circle box-shadow: inset 0 0 0 1px #fff; } // styling for radio when not selected -.radio > [type="radio"]:not(:checked) + label::before { +.radio > [type="radio"]:not(:checked) + label:before { box-shadow: inset 0 0 0 3px #fff; } @@ -282,29 +256,24 @@ $margin-el: 7px; // default margin for our custom inputs height: 0; display: none; opacity: 0; - & + label { cursor: pointer; display: inline-block; margin-right: $margin-el; margin-top: $margin-el; margin-bottom: $margin-el; - // apply padding so the switch fits inside the label padding-right: 60px; - - &::after { + &:after { content: ""; top: 4px; right: 10px; width: 30px; height: 12px; - // use absolute for better positioning position: absolute; border-radius: 30px; } - & + .hd-switch-knob { top: 0; width: 20px; @@ -315,20 +284,17 @@ $margin-el: 7px; // default margin for our custom inputs cursor: pointer; pointer-events: none; box-shadow: 1px 1px 1px $color-default-light; - // add some CSS3-animations transition: right .1s ease-in, background-color .1s ease-in; } } - - &:focus + label::after, + &:focus + label:after, &:focus + label + .hd-switch-knob { box-shadow: 0 0 6px 0 $color-focus; } - &[disabled] { & + label, - & + label::after, + & + label:after, & + label + .hd-switch-knob { cursor: not-allowed; opacity: 0.4; @@ -336,11 +302,11 @@ $margin-el: 7px; // default margin for our custom inputs } } -.hd-switch > [type="checkbox"]:checked + label::after { +.hd-switch > [type="checkbox"]:checked + label:after { background-color: $color-active-light; } -.hd-switch > [type="checkbox"]:not(:checked) + label::after { +.hd-switch > [type="checkbox"]:not(:checked) + label:after { background-color: $color-default-light; } diff --git a/src/components/FilePicker.vue b/src/components/FilePicker.vue new file mode 100644 index 0000000..fbe99f9 --- /dev/null +++ b/src/components/FilePicker.vue @@ -0,0 +1,57 @@ + + + + + diff --git a/src/components/FileUploader.vue b/src/components/FileUploader.vue new file mode 100644 index 0000000..3e7d617 --- /dev/null +++ b/src/components/FileUploader.vue @@ -0,0 +1,48 @@ + + + + + diff --git a/src/components/ImageGalleryBase.vue b/src/components/ImageGalleryBase.vue index a76917c..72d450e 100644 --- a/src/components/ImageGalleryBase.vue +++ b/src/components/ImageGalleryBase.vue @@ -65,7 +65,6 @@ defineEmits<{ :deep(wired-card) { height: 100%; - --wired-card-background-color: transparent; } diff --git a/src/components/ImageGalleryItem.vue b/src/components/ImageGalleryItem.vue index e1aabd8..9daf55b 100644 --- a/src/components/ImageGalleryItem.vue +++ b/src/components/ImageGalleryItem.vue @@ -102,10 +102,8 @@ export default { position: absolute; bottom: 10px; right: 10px; - - --wired-button-background-color: #f44; + --wired-button-background-color: #ff4444; --wired-button-color: white; - font-size: 12px; padding: 2px; min-width: 24px; @@ -114,7 +112,7 @@ export default { } .remove-button:hover { - --wired-button-background-color: #f00; + --wired-button-background-color: #ff0000; } .image-thumbnail { @@ -129,7 +127,7 @@ export default { } mark { - background-color: #ff0; + background-color: #ffff00; color: #000; padding: 0 2px; border-radius: 2px; diff --git a/src/components/ImageProcessingProgress.vue b/src/components/ImageProcessingProgress.vue index 350d345..fce3d0b 100644 --- a/src/components/ImageProcessingProgress.vue +++ b/src/components/ImageProcessingProgress.vue @@ -45,10 +45,8 @@ function formatTime(seconds: number): string { diff --git a/src/components/ImageProcessor.vue b/src/components/ImageProcessor.vue index 15a2f39..0bcfa4d 100644 --- a/src/components/ImageProcessor.vue +++ b/src/components/ImageProcessor.vue @@ -33,7 +33,6 @@ diff --git a/src/assets/scss/_icons.scss b/src/assets/scss/_icons.scss index 2602eb8..535d92e 100644 --- a/src/assets/scss/_icons.scss +++ b/src/assets/scss/_icons.scss @@ -1,17 +1,18 @@ @font-face { - font-family: "icons"; + font-family: icons; src: url('fonts/icons.eot'); src: url('fonts/icons.eot?#iefix') format('eot'), // url('fonts/icons.woff2') format('woff2'), url('fonts/icons.woff') format('woff'), url('fonts/icons.ttf') format('truetype')/*, url('fonts/icons.svg#icons') format('svg')*/; } @mixin icon-styles { - font-family: "icons"; + font-family: icons; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; + // speak: none; // only necessary if not using the private unicode range (firstGlyph option) text-decoration: none; text-transform: none; @@ -23,720 +24,959 @@ @function icon-char($filename) { $char: ""; + @if $filename==anchor { $char: "\E001"; } + @if $filename==android { $char: "\E002"; } + @if $filename==apple { $char: "\E003"; } + @if $filename==archive { $char: "\E004"; } + @if $filename==arrow-alt { $char: "\E005"; } + @if $filename==arrow-down { $char: "\E006"; } + @if $filename==arrow-left { $char: "\E007"; } + @if $filename==arrow-right { $char: "\E008"; } + @if $filename==arrow-up { $char: "\E009"; } + @if $filename==balance-scale { $char: "\E00A"; } + @if $filename==ban { $char: "\E00B"; } + @if $filename==bar-chart { $char: "\E00C"; } + @if $filename==barcode { $char: "\E00D"; } + @if $filename==bars { $char: "\E00E"; } + @if $filename==battery-empty { $char: "\E00F"; } + @if $filename==battery-full { $char: "\E010"; } + @if $filename==battery-half { $char: "\E011"; } + @if $filename==battery-quarter { $char: "\E012"; } + @if $filename==beer { $char: "\E013"; } + @if $filename==behance { $char: "\E014"; } + @if $filename==bell { $char: "\E015"; } + @if $filename==bicycle { $char: "\E016"; } + @if $filename==birthday-cake { $char: "\E017"; } + @if $filename==bolt { $char: "\E018"; } + @if $filename==bomb { $char: "\E019"; } + @if $filename==book { $char: "\E01A"; } + @if $filename==bookmark-o { $char: "\E01B"; } + @if $filename==briefcase { $char: "\E01C"; } + @if $filename==bug { $char: "\E01D"; } + @if $filename==bullseye { $char: "\E01E"; } + @if $filename==calculator { $char: "\E01F"; } + @if $filename==calendar { $char: "\E020"; } + @if $filename==caret-down { $char: "\E021"; } + @if $filename==caret-left { $char: "\E022"; } + @if $filename==caret-square-o-down { $char: "\E023"; } + @if $filename==caret-square-o-left { $char: "\E024"; } + @if $filename==caret-square-o-right { $char: "\E025"; } + @if $filename==caret-square-o-up { $char: "\E026"; } + @if $filename==caret-up { $char: "\E027"; } + @if $filename==check { $char: "\E028"; } + @if $filename==chevron-down { $char: "\E029"; } + @if $filename==chevron-left { $char: "\E02A"; } + @if $filename==chevron-right { $char: "\E02B"; } + @if $filename==chevron-up { $char: "\E02C"; } + @if $filename==circle-o { $char: "\E02D"; } + @if $filename==clipboard { $char: "\E02E"; } + @if $filename==clone { $char: "\E02F"; } + @if $filename==cloud-remove { $char: "\E030"; } + @if $filename==cloud-sync { $char: "\E031"; } + @if $filename==cloud-upload { $char: "\E032"; } + @if $filename==cloud { $char: "\E033"; } + @if $filename==code-fork { $char: "\E034"; } + @if $filename==code { $char: "\E035"; } + @if $filename==coffee { $char: "\E036"; } + @if $filename==cog { $char: "\E037"; } + @if $filename==cogs { $char: "\E038"; } + @if $filename==comment { $char: "\E039"; } + @if $filename==comments { $char: "\E03A"; } + @if $filename==compass { $char: "\E03B"; } + @if $filename==compress { $char: "\E03C"; } + @if $filename==cutlery { $char: "\E03D"; } + @if $filename==dashboard { $char: "\E03E"; } + @if $filename==database { $char: "\E03F"; } + @if $filename==delicious { $char: "\E040"; } + @if $filename==desktop { $char: "\E041"; } + @if $filename==download { $char: "\E042"; } + @if $filename==dribble { $char: "\E043"; } + @if $filename==edit { $char: "\E044"; } + @if $filename==eject { $char: "\E045"; } + @if $filename==envelope { $char: "\E046"; } + @if $filename==euro { $char: "\E047"; } + @if $filename==exchange { $char: "\E048"; } + @if $filename==expand { $char: "\E049"; } + @if $filename==eye { $char: "\E04A"; } + @if $filename==eyedropper { $char: "\E04B"; } + @if $filename==facebook { $char: "\E04C"; } + @if $filename==female { $char: "\E04D"; } + @if $filename==file-ai-o { $char: "\E04E"; } + @if $filename==file-archive-o { $char: "\E04F"; } + @if $filename==file-css-o { $char: "\E050"; } + @if $filename==file-doc-o { $char: "\E051"; } + @if $filename==file-eps-o { $char: "\E052"; } + @if $filename==file-gif-o { $char: "\E053"; } + @if $filename==file-html-o { $char: "\E054"; } + @if $filename==file-jpg-o { $char: "\E055"; } + @if $filename==file-js-o { $char: "\E056"; } + @if $filename==file-minus { $char: "\E057"; } + @if $filename==file-o { $char: "\E058"; } + @if $filename==file-pdf-o { $char: "\E059"; } + @if $filename==file-php-o { $char: "\E05A"; } + @if $filename==file-png-o { $char: "\E05B"; } + @if $filename==file-psd-o { $char: "\E05C"; } + @if $filename==file-text-o { $char: "\E05D"; } + @if $filename==file-xls-o { $char: "\E05E"; } + @if $filename==files-o { $char: "\E05F"; } + @if $filename==film { $char: "\E060"; } + @if $filename==filter { $char: "\E061"; } + @if $filename==fire { $char: "\E062"; } + @if $filename==flag { $char: "\E063"; } + @if $filename==flask { $char: "\E064"; } + @if $filename==floppy-o { $char: "\E065"; } + @if $filename==folder-lock { $char: "\E066"; } + @if $filename==folder-minus { $char: "\E067"; } + @if $filename==folder-plus { $char: "\E068"; } + @if $filename==folder-remove { $char: "\E069"; } + @if $filename==font { $char: "\E06A"; } + @if $filename==frown-o { $char: "\E06B"; } + @if $filename==futbol-o { $char: "\E06C"; } + @if $filename==gamepad { $char: "\E06D"; } + @if $filename==gem { $char: "\E06E"; } + @if $filename==github { $char: "\E06F"; } + @if $filename==glass { $char: "\E070"; } + @if $filename==globe { $char: "\E071"; } + @if $filename==google-plus { $char: "\E072"; } + @if $filename==graduation-cap { $char: "\E073"; } + @if $filename==hdd-o { $char: "\E074"; } + @if $filename==headphones { $char: "\E075"; } + @if $filename==heart { $char: "\E076"; } + @if $filename==home { $char: "\E077"; } + @if $filename==hourglass-half { $char: "\E078"; } + @if $filename==industry { $char: "\E079"; } + @if $filename==info-circle-o { $char: "\E07A"; } + @if $filename==info-circle { $char: "\E07B"; } + @if $filename==instagram { $char: "\E07C"; } + @if $filename==jpy { $char: "\E07D"; } + @if $filename==key { $char: "\E07E"; } + @if $filename==keyboard { $char: "\E07F"; } + @if $filename==leaf { $char: "\E080"; } + @if $filename==life-ring { $char: "\E081"; } + @if $filename==lightbulb-o { $char: "\E082"; } + @if $filename==line-chart { $char: "\E083"; } + @if $filename==link { $char: "\E084"; } + @if $filename==linkedin { $char: "\E085"; } + @if $filename==list { $char: "\E086"; } + @if $filename==location-arrow { $char: "\E087"; } + @if $filename==lock { $char: "\E088"; } + @if $filename==magic { $char: "\E089"; } + @if $filename==magnet { $char: "\E08A"; } + @if $filename==male { $char: "\E08B"; } + @if $filename==map-marker { $char: "\E08C"; } + @if $filename==map-o { $char: "\E08D"; } + @if $filename==map-signs { $char: "\E08E"; } + @if $filename==map { $char: "\E08F"; } + @if $filename==mars { $char: "\E090"; } + @if $filename==microphone { $char: "\E091"; } + @if $filename==minus-circle { $char: "\E092"; } + @if $filename==minus-square-o { $char: "\E093"; } + @if $filename==minus { $char: "\E094"; } + @if $filename==money { $char: "\E095"; } + @if $filename==moon-o { $char: "\E096"; } + @if $filename==music { $char: "\E097"; } + @if $filename==paint-brush { $char: "\E098"; } + @if $filename==paper-plane { $char: "\E099"; } + @if $filename==paragraph { $char: "\E09A"; } + @if $filename==pause { $char: "\E09B"; } + @if $filename==pencil-22 { $char: "\E09C"; } + @if $filename==pencil-square-o { $char: "\E09D"; } + @if $filename==pencil { $char: "\E09E"; } + @if $filename==phone { $char: "\E09F"; } + @if $filename==picture-o { $char: "\E0A0"; } + @if $filename==pie-chart { $char: "\E0A1"; } + @if $filename==pinterest { $char: "\E0A2"; } + @if $filename==play { $char: "\E0A3"; } + @if $filename==plus-circle-o { $char: "\E0A4"; } + @if $filename==plus-square-o { $char: "\E0A5"; } + @if $filename==plus { $char: "\E0A6"; } + @if $filename==power-off { $char: "\E0A7"; } + @if $filename==question-circle { $char: "\E0A8"; } + @if $filename==question { $char: "\E0A9"; } + @if $filename==quote-right { $char: "\E0AA"; } + @if $filename==random { $char: "\E0AB"; } + @if $filename==refresh { $char: "\E0AC"; } + @if $filename==repeat { $char: "\E0AD"; } + @if $filename==rss { $char: "\E0AE"; } + @if $filename==scissors { $char: "\E0AF"; } + @if $filename==search-minus { $char: "\E0B0"; } + @if $filename==search-plus { $char: "\E0B1"; } + @if $filename==search { $char: "\E0B2"; } + @if $filename==share-alt { $char: "\E0B3"; } + @if $filename==shopping-bag { $char: "\E0B4"; } + @if $filename==shopping-cart { $char: "\E0B5"; } + @if $filename==sign-in { $char: "\E0B6"; } + @if $filename==sign-out { $char: "\E0B7"; } + @if $filename==sitemap { $char: "\E0B8"; } + @if $filename==skype { $char: "\E0B9"; } + @if $filename==sliders { $char: "\E0BA"; } + @if $filename==smile-o { $char: "\E0BB"; } + @if $filename==sort { $char: "\E0BC"; } + @if $filename==space-shuttle { $char: "\E0BD"; } + @if $filename==square-o { $char: "\E0BE"; } + @if $filename==star-half { $char: "\E0BF"; } + @if $filename==star-o { $char: "\E0C0"; } + @if $filename==step-backward { $char: "\E0C1"; } + @if $filename==step-forward { $char: "\E0C2"; } + @if $filename==suitcase { $char: "\E0C3"; } + @if $filename==sun-o { $char: "\E0C4"; } + @if $filename==tag { $char: "\E0C5"; } + @if $filename==television { $char: "\E0C6"; } + @if $filename==terminal { $char: "\E0C7"; } + @if $filename==th-large { $char: "\E0C8"; } + @if $filename==th { $char: "\E0C9"; } + @if $filename==thumb-down { $char: "\E0CA"; } + @if $filename==thumb-tack { $char: "\E0CB"; } + @if $filename==thumbs-o-up { $char: "\E0CC"; } + @if $filename==ticket { $char: "\E0CD"; } + @if $filename==times-circle { $char: "\E0CE"; } + @if $filename==times-square { $char: "\E0CF"; } + @if $filename==times { $char: "\E0D0"; } + @if $filename==tint { $char: "\E0D1"; } + @if $filename==trash { $char: "\E0D2"; } + @if $filename==tree { $char: "\E0D3"; } + @if $filename==trophy { $char: "\E0D4"; } + @if $filename==truck { $char: "\E0D5"; } + @if $filename==twitter { $char: "\E0D6"; } + @if $filename==umbrella { $char: "\E0D7"; } + @if $filename==undo { $char: "\E0D8"; } + @if $filename==unlock { $char: "\E0D9"; } + @if $filename==usb { $char: "\E0DA"; } + @if $filename==usd { $char: "\E0DB"; } + @if $filename==user-minus { $char: "\E0DC"; } + @if $filename==user-plus { $char: "\E0DD"; } + @if $filename==user-star { $char: "\E0DE"; } + @if $filename==user { $char: "\E0DF"; } + @if $filename==users { $char: "\E0E0"; } + @if $filename==venus { $char: "\E0E1"; } + @if $filename==video-camera { $char: "\E0E2"; } + @if $filename==vimeo { $char: "\E0E3"; } + @if $filename==volume-diabled { $char: "\E0E4"; } + @if $filename==volume-down-2 { $char: "\E0E5"; } + @if $filename==volume-down { $char: "\E0E6"; } + @if $filename==volume-off { $char: "\E0E7"; } + @if $filename==volume-up { $char: "\E0E8"; } + @if $filename==warning { $char: "\E0E9"; } + @if $filename==weather { $char: "\E0EA"; } + @if $filename==webcam { $char: "\E0EB"; } + @if $filename==wifi { $char: "\E0EC"; } + @if $filename==windows { $char: "\E0ED"; } + @if $filename==wrench { $char: "\E0EE"; } + @return $char; } @@ -746,10 +986,10 @@ $extend: true) { &:#{$insert} { @if $extend { @extend %icon; - } - @else { + } @else { @include icon-styles; } + content: icon-char($filename); } } @@ -757,714 +997,951 @@ $extend: true) { .icon-anchor { @include icon(anchor); } + .icon-android { @include icon(android); } + .icon-apple { @include icon(apple); } + .icon-archive { @include icon(archive); } + .icon-arrow-alt { @include icon(arrow-alt); } + .icon-arrow-down { @include icon(arrow-down); } + .icon-arrow-left { @include icon(arrow-left); } + .icon-arrow-right { @include icon(arrow-right); } + .icon-arrow-up { @include icon(arrow-up); } + .icon-balance-scale { @include icon(balance-scale); } + .icon-ban { @include icon(ban); } + .icon-bar-chart { @include icon(bar-chart); } + .icon-barcode { @include icon(barcode); } + .icon-bars { @include icon(bars); } + .icon-battery-empty { @include icon(battery-empty); } + .icon-battery-full { @include icon(battery-full); } + .icon-battery-half { @include icon(battery-half); } + .icon-battery-quarter { @include icon(battery-quarter); } + .icon-beer { @include icon(beer); } + .icon-behance { @include icon(behance); } + .icon-bell { @include icon(bell); } + .icon-bicycle { @include icon(bicycle); } + .icon-birthday-cake { @include icon(birthday-cake); } + .icon-bolt { @include icon(bolt); } + .icon-bomb { @include icon(bomb); } + .icon-book { @include icon(book); } + .icon-bookmark-o { @include icon(bookmark-o); } + .icon-briefcase { @include icon(briefcase); } + .icon-bug { @include icon(bug); } + .icon-bullseye { @include icon(bullseye); } + .icon-calculator { @include icon(calculator); } + .icon-calendar { @include icon(calendar); } + .icon-caret-down { @include icon(caret-down); } + .icon-caret-left { @include icon(caret-left); } + .icon-caret-square-o-down { @include icon(caret-square-o-down); } + .icon-caret-square-o-left { @include icon(caret-square-o-left); } + .icon-caret-square-o-right { @include icon(caret-square-o-right); } + .icon-caret-square-o-up { @include icon(caret-square-o-up); } + .icon-caret-up { @include icon(caret-up); } + .icon-check { @include icon(check); } + .icon-chevron-down { @include icon(chevron-down); } + .icon-chevron-left { @include icon(chevron-left); } + .icon-chevron-right { @include icon(chevron-right); } + .icon-chevron-up { @include icon(chevron-up); } + .icon-circle-o { @include icon(circle-o); } + .icon-clipboard { @include icon(clipboard); } + .icon-clone { @include icon(clone); } + .icon-cloud-remove { @include icon(cloud-remove); } + .icon-cloud-sync { @include icon(cloud-sync); } + .icon-cloud-upload { @include icon(cloud-upload); } + .icon-cloud { @include icon(cloud); } + .icon-code-fork { @include icon(code-fork); } + .icon-code { @include icon(code); } + .icon-coffee { @include icon(coffee); } + .icon-cog { @include icon(cog); } + .icon-cogs { @include icon(cogs); } + .icon-comment { @include icon(comment); } + .icon-comments { @include icon(comments); } + .icon-compass { @include icon(compass); } + .icon-compress { @include icon(compress); } + .icon-cutlery { @include icon(cutlery); } + .icon-dashboard { @include icon(dashboard); } + .icon-database { @include icon(database); } + .icon-delicious { @include icon(delicious); } + .icon-desktop { @include icon(desktop); } + .icon-download { @include icon(download); } + .icon-dribble { @include icon(dribble); } + .icon-edit { @include icon(edit); } + .icon-eject { @include icon(eject); } + .icon-envelope { @include icon(envelope); } + .icon-euro { @include icon(euro); } + .icon-exchange { @include icon(exchange); } + .icon-expand { @include icon(expand); } + .icon-eye { @include icon(eye); } + .icon-eyedropper { @include icon(eyedropper); } + .icon-facebook { @include icon(facebook); } + .icon-female { @include icon(female); } + .icon-file-ai-o { @include icon(file-ai-o); } + .icon-file-archive-o { @include icon(file-archive-o); } + .icon-file-css-o { @include icon(file-css-o); } + .icon-file-doc-o { @include icon(file-doc-o); } + .icon-file-eps-o { @include icon(file-eps-o); } + .icon-file-gif-o { @include icon(file-gif-o); } + .icon-file-html-o { @include icon(file-html-o); } + .icon-file-jpg-o { @include icon(file-jpg-o); } + .icon-file-js-o { @include icon(file-js-o); } + .icon-file-minus { @include icon(file-minus); } + .icon-file-o { @include icon(file-o); } + .icon-file-pdf-o { @include icon(file-pdf-o); } + .icon-file-php-o { @include icon(file-php-o); } + .icon-file-png-o { @include icon(file-png-o); } + .icon-file-psd-o { @include icon(file-psd-o); } + .icon-file-text-o { @include icon(file-text-o); } + .icon-file-xls-o { @include icon(file-xls-o); } + .icon-files-o { @include icon(files-o); } + .icon-film { @include icon(film); } + .icon-filter { @include icon(filter); } + .icon-fire { @include icon(fire); } + .icon-flag { @include icon(flag); } + .icon-flask { @include icon(flask); } + .icon-floppy-o { @include icon(floppy-o); } + .icon-folder-lock { @include icon(folder-lock); } + .icon-folder-minus { @include icon(folder-minus); } + .icon-folder-plus { @include icon(folder-plus); } + .icon-folder-remove { @include icon(folder-remove); } + .icon-font { @include icon(font); } + .icon-frown-o { @include icon(frown-o); } + .icon-futbol-o { @include icon(futbol-o); } + .icon-gamepad { @include icon(gamepad); } + .icon-gem { @include icon(gem); } + .icon-github { @include icon(github); } + .icon-glass { @include icon(glass); } + .icon-globe { @include icon(globe); } + .icon-google-plus { @include icon(google-plus); } + .icon-graduation-cap { @include icon(graduation-cap); } + .icon-hdd-o { @include icon(hdd-o); } + .icon-headphones { @include icon(headphones); } + .icon-heart { @include icon(heart); } + .icon-home { @include icon(home); } + .icon-hourglass-half { @include icon(hourglass-half); } + .icon-industry { @include icon(industry); } + .icon-info-circle-o { @include icon(info-circle-o); } + .icon-info-circle { @include icon(info-circle); } + .icon-instagram { @include icon(instagram); } + .icon-jpy { @include icon(jpy); } + .icon-key { @include icon(key); } + .icon-keyboard { @include icon(keyboard); } + .icon-leaf { @include icon(leaf); } + .icon-life-ring { @include icon(life-ring); } + .icon-lightbulb-o { @include icon(lightbulb-o); } + .icon-line-chart { @include icon(line-chart); } + .icon-link { @include icon(link); } + .icon-linkedin { @include icon(linkedin); } + .icon-list { @include icon(list); } + .icon-location-arrow { @include icon(location-arrow); } + .icon-lock { @include icon(lock); } + .icon-magic { @include icon(magic); } + .icon-magnet { @include icon(magnet); } + .icon-male { @include icon(male); } + .icon-map-marker { @include icon(map-marker); } + .icon-map-o { @include icon(map-o); } + .icon-map-signs { @include icon(map-signs); } + .icon-map { @include icon(map); } + .icon-mars { @include icon(mars); } + .icon-microphone { @include icon(microphone); } + .icon-minus-circle { @include icon(minus-circle); } + .icon-minus-square-o { @include icon(minus-square-o); } + .icon-minus { @include icon(minus); } + .icon-money { @include icon(money); } + .icon-moon-o { @include icon(moon-o); } + .icon-music { @include icon(music); } + .icon-paint-brush { @include icon(paint-brush); } + .icon-paper-plane { @include icon(paper-plane); } + .icon-paragraph { @include icon(paragraph); } + .icon-pause { @include icon(pause); } + .icon-pencil-22 { @include icon(pencil-22 ); } + .icon-pencil-square-o { @include icon(pencil-square-o); } + .icon-pencil { @include icon(pencil); } + .icon-phone { @include icon(phone); } + .icon-picture-o { @include icon(picture-o); } + .icon-pie-chart { @include icon(pie-chart); } + .icon-pinterest { @include icon(pinterest); } + .icon-play { @include icon(play); } + .icon-plus-circle-o { @include icon(plus-circle-o); } + .icon-plus-square-o { @include icon(plus-square-o); } + .icon-plus { @include icon(plus); } + .icon-power-off { @include icon(power-off); } + .icon-question-circle { @include icon(question-circle); } + .icon-question { @include icon(question); } + .icon-quote-right { @include icon(quote-right); } + .icon-random { @include icon(random); } + .icon-refresh { @include icon(refresh); } + .icon-repeat { @include icon(repeat); } + .icon-rss { @include icon(rss); } + .icon-scissors { @include icon(scissors); } + .icon-search-minus { @include icon(search-minus); } + .icon-search-plus { @include icon(search-plus); } + .icon-search { @include icon(search); } + .icon-share-alt { @include icon(share-alt); } + .icon-shopping-bag { @include icon(shopping-bag); } + .icon-shopping-cart { @include icon(shopping-cart); } + .icon-sign-in { @include icon(sign-in); } + .icon-sign-out { @include icon(sign-out); } + .icon-sitemap { @include icon(sitemap); } + .icon-skype { @include icon(skype); } + .icon-sliders { @include icon(sliders); } + .icon-smile-o { @include icon(smile-o); } + .icon-sort { @include icon(sort); } + .icon-space-shuttle { @include icon(space-shuttle); } + .icon-square-o { @include icon(square-o); } + .icon-star-half { @include icon(star-half); } + .icon-star-o { @include icon(star-o); } + .icon-step-backward { @include icon(step-backward); } + .icon-step-forward { @include icon(step-forward); } + .icon-suitcase { @include icon(suitcase); } + .icon-sun-o { @include icon(sun-o); } + .icon-tag { @include icon(tag); } + .icon-television { @include icon(television); } + .icon-terminal { @include icon(terminal); } + .icon-th-large { @include icon(th-large); } + .icon-th { @include icon(th); } + .icon-thumb-down { @include icon(thumb-down); } + .icon-thumb-tack { @include icon(thumb-tack); } + .icon-thumbs-o-up { @include icon(thumbs-o-up); } + .icon-ticket { @include icon(ticket); } + .icon-times-circle { @include icon(times-circle); } + .icon-times-square { @include icon(times-square); } + .icon-times { @include icon(times); } + .icon-tint { @include icon(tint); } + .icon-trash { @include icon(trash); } + .icon-tree { @include icon(tree); } + .icon-trophy { @include icon(trophy); } + .icon-truck { @include icon(truck); } + .icon-twitter { @include icon(twitter); } + .icon-umbrella { @include icon(umbrella); } + .icon-undo { @include icon(undo); } + .icon-unlock { @include icon(unlock); } + .icon-usb { @include icon(usb); } + .icon-usd { @include icon(usd); } + .icon-user-minus { @include icon(user-minus); } + .icon-user-plus { @include icon(user-plus); } + .icon-user-star { @include icon(user-star); } + .icon-user { @include icon(user); } + .icon-users { @include icon(users); } + .icon-venus { @include icon(venus); } + .icon-video-camera { @include icon(video-camera); } + .icon-vimeo { @include icon(vimeo); } + .icon-volume-diabled { @include icon(volume-diabled); } + .icon-volume-down-2 { @include icon(volume-down-2); } + .icon-volume-down { @include icon(volume-down); } + .icon-volume-off { @include icon(volume-off); } + .icon-volume-up { @include icon(volume-up); } + .icon-warning { @include icon(warning); } + .icon-weather { @include icon(weather); } + .icon-webcam { @include icon(webcam); } + .icon-wifi { @include icon(wifi); } + .icon-windows { @include icon(windows); } + .icon-wrench { @include icon(wrench); } diff --git a/src/assets/scss/handdrawn.scss b/src/assets/scss/handdrawn.scss index 506104a..3fa18c5 100644 --- a/src/assets/scss/handdrawn.scss +++ b/src/assets/scss/handdrawn.scss @@ -1,13 +1,16 @@ -$gray : #717171; +$gray: #717171; $lightgray: #919090; + // @import url(https://fonts.googleapis.com/css?family=Indie+Flower); // @import url(https://fonts.googleapis.com/css?family=Covered+By+Your+Grace); // @import url(https://fonts.googleapis.com/css?family=Shadows+Into+Light); -@import url(https://fonts.googleapis.com/css?family=Architects+Daughter); +@import "https://fonts.googleapis.com/css?family=Architects+Daughter"; + body { // background: whitesmoke url(assets/backgrounds/paper_texture309.jpg); - background: whitesmoke url(assets/backgrounds/paper_texture310.jpg); + background: whitesmoke url("assets/backgrounds/paper_texture310.jpg"); + // background: whitesmoke url(assets/backgrounds/paper_texture318.jpg); // background: whitesmoke url(assets/backgrounds/paper_texture327.jpg); // background: whitesmoke url(assets/backgrounds/paper_texture332.jpg); @@ -26,7 +29,9 @@ select, button { // font-family: 'Indie Flower', cursive; font-family: 'Architects Daughter', cursive; + /* font-family: 'Shadows Into Light', cursive; */ + /* font-family: 'Covered By Your Grace', cursive; */ padding: .2rem .4rem; } @@ -39,15 +44,17 @@ button, table, .hd-border, fieldset, -.checkbox > input[type="checkbox"] + label:before , -.radio > input[type="radio"] + label:before +.checkbox > input[type="checkbox"] + label::before , +.radio > input[type="radio"] + label::before { background: transparent; align-self: center; outline: none; border: 2px solid $lightgray; + // box-shadow: 20px 18px 24px -26px hsla(0, 0%, 0%, .2); - border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; + border-radius: 255px 15px 225px / 15px 225px 15px 255px; + /* Above is shorthand for: border-top-left-radius: 255px 15px; @@ -58,18 +65,23 @@ fieldset, &.lined.thick { border: solid 7px #41403E; } + &.dotted.thick { border: dotted 5px #41403E; } + &.dashed.thick { border: dashed 5px #41403E; } + &.lined.thin { border: solid 2px #41403E; } + &.dotted.thin { border: dotted 2px #41403E; } + &.dashed.thin { border: dashed 2px #41403E; } @@ -83,28 +95,30 @@ button, textarea { color: $gray; } -/**/ -input[type=button], + +/* */ +input[type="button"], button { background: $lightgray; cursor:pointer; color: white; } + /* Tables */ thead { tr th { border-bottom: 2px solid $lightgray; - box-shadow: 20px 38px 34px -26px hsla(0, 0%, 0%, .2); - border-radius: 0 0 225px 0/0 0 15px 0; + box-shadow: 20px 38px 34px -26px hsl(0deg 0% 0% / 20%); + border-radius: 0 0 225px / 0 0 15px; } } tfoot { tr td { border-top: 2px solid $lightgray; - box-shadow: 20px 38px 34px -26px hsla(0, 0%, 0%, .2); - border-radius: 0 0 225px 0/0 0 15px 0; - border-radius: 255px 0 0 0/15px 0 0 0; + box-shadow: 20px 38px 34px -26px hsl(0deg 0% 0% / 20%); + border-radius: 0 0 225px / 0 0 15px; + border-radius: 255px 0 0 / 15px 0 0; } } @@ -116,7 +130,8 @@ th { ul li { list-style: none; position: relative; - &:before { + + &::before { font-family: icons; content: "\E02D"; position:absolute; @@ -131,7 +146,7 @@ ul li { */ $color-default: $gray; // default color -$color-default-light: #DDDDDD; // default color light +$color-default-light: #DDD; // default color light $color-active: $gray; // color when active or checked $color-active-light: #9EFFC4; // active color light $color-focus: $gray; // color when focused @@ -143,6 +158,7 @@ $margin-el: 7px; // default margin for our custom inputs .checkbox, .radio { display: inline; } + .checkbox > input[type="checkbox"], .radio > input[type="radio"] { &:checked, @@ -151,6 +167,7 @@ $margin-el: 7px; // default margin for our custom inputs height: 0; display: none; opacity: 0; + & + label { display: inline-block; margin-right: $margin-el; @@ -160,7 +177,8 @@ $margin-el: 7px; // default margin for our custom inputs padding-top: 2px; position: relative; cursor: pointer; - &:before { + + &::before { // position elements absolute to parent container position: absolute; display: inline-block; @@ -171,19 +189,23 @@ $margin-el: 7px; // default margin for our custom inputs border: 2px solid $color-default; color: $color-default; } - &:hover:before { + + &:hover::before { // add some hover styling // background-color: $color-default; } } - &:focus + label:before { + + &:focus + label::before { border-color: $color-focus; box-shadow: 0 0 6px 0 $color-focus; } + &[disabled] + label { cursor: not-allowed; opacity: .4; - &:before { + + &::before { opacity: .7; } } @@ -191,52 +213,56 @@ $margin-el: 7px; // default margin for our custom inputs } // styling for checkbox for both states -.checkbox > [type="checkbox"]:checked + label:before, -.checkbox > [type="checkbox"]:not(:checked) + label:before { +.checkbox > [type="checkbox"]:checked + label::before, +.checkbox > [type="checkbox"]:not(:checked) + label::before { // set icon font - font-family: "icons"; + font-family: icons; line-height: 0.3rem; font-size: 1rem; + // add some CSS3-animations transition: border-color .2s ease-in, background-color .2s ease-in; } // styling for checkbox when selected -.checkbox > [type="checkbox"]:checked + label:before { +.checkbox > [type="checkbox"]:checked + label::before { // set checkmark icon content: "\E028"; color: #FFF; + // background-color: $color-active; border-color: $color-active; } // styling for checkbox when not selected -.checkbox > [type="checkbox"]:not(:checked) + label:before { +.checkbox > [type="checkbox"]:not(:checked) + label::before { // remove checkmark icon content: ""; } // styling for radio for both states -.radio > [type="radio"]:checked + label:before, -.radio > [type="radio"]:not(:checked) + label:before, +.radio > [type="radio"]:checked + label::before, +.radio > [type="radio"]:not(:checked) + label::before, { content: ""; border-radius: 15px; + // add some CSS3-animations transition: border-color .2s ease-in, box-shadow .1s ease-in, background-color .2s ease-in; } // styling for radio when selected -.radio > [type="radio"]:checked + label:before { +.radio > [type="radio"]:checked + label::before { color: $color-active; border-color: $color-active; background-color: $color-active; + // use box-shadow to render circle box-shadow: inset 0 0 0 1px #fff; } // styling for radio when not selected -.radio > [type="radio"]:not(:checked) + label:before { +.radio > [type="radio"]:not(:checked) + label::before { box-shadow: inset 0 0 0 3px #fff; } @@ -256,24 +282,29 @@ $margin-el: 7px; // default margin for our custom inputs height: 0; display: none; opacity: 0; + & + label { cursor: pointer; display: inline-block; margin-right: $margin-el; margin-top: $margin-el; margin-bottom: $margin-el; + // apply padding so the switch fits inside the label padding-right: 60px; - &:after { + + &::after { content: ""; top: 4px; right: 10px; width: 30px; height: 12px; + // use absolute for better positioning position: absolute; border-radius: 30px; } + & + .hd-switch-knob { top: 0; width: 20px; @@ -284,17 +315,20 @@ $margin-el: 7px; // default margin for our custom inputs cursor: pointer; pointer-events: none; box-shadow: 1px 1px 1px $color-default-light; + // add some CSS3-animations transition: right .1s ease-in, background-color .1s ease-in; } } - &:focus + label:after, + + &:focus + label::after, &:focus + label + .hd-switch-knob { box-shadow: 0 0 6px 0 $color-focus; } + &[disabled] { & + label, - & + label:after, + & + label::after, & + label + .hd-switch-knob { cursor: not-allowed; opacity: 0.4; @@ -302,11 +336,11 @@ $margin-el: 7px; // default margin for our custom inputs } } -.hd-switch > [type="checkbox"]:checked + label:after { +.hd-switch > [type="checkbox"]:checked + label::after { background-color: $color-active-light; } -.hd-switch > [type="checkbox"]:not(:checked) + label:after { +.hd-switch > [type="checkbox"]:not(:checked) + label::after { background-color: $color-default-light; } diff --git a/src/components/FilePicker.vue b/src/components/FilePicker.vue index fbe99f9..c5526b1 100644 --- a/src/components/FilePicker.vue +++ b/src/components/FilePicker.vue @@ -51,6 +51,7 @@ export default { text-align: center; margin-top: 20px; } + button { margin-top: 10px; } diff --git a/src/components/ImageGalleryBase.vue b/src/components/ImageGalleryBase.vue index 72d450e..a76917c 100644 --- a/src/components/ImageGalleryBase.vue +++ b/src/components/ImageGalleryBase.vue @@ -65,6 +65,7 @@ defineEmits<{ :deep(wired-card) { height: 100%; + --wired-card-background-color: transparent; } diff --git a/src/components/ImageGalleryItem.vue b/src/components/ImageGalleryItem.vue index 9daf55b..e1aabd8 100644 --- a/src/components/ImageGalleryItem.vue +++ b/src/components/ImageGalleryItem.vue @@ -102,8 +102,10 @@ export default { position: absolute; bottom: 10px; right: 10px; - --wired-button-background-color: #ff4444; + + --wired-button-background-color: #f44; --wired-button-color: white; + font-size: 12px; padding: 2px; min-width: 24px; @@ -112,7 +114,7 @@ export default { } .remove-button:hover { - --wired-button-background-color: #ff0000; + --wired-button-background-color: #f00; } .image-thumbnail { @@ -127,7 +129,7 @@ export default { } mark { - background-color: #ffff00; + background-color: #ff0; color: #000; padding: 0 2px; border-radius: 2px; diff --git a/src/components/ImageProcessingProgress.vue b/src/components/ImageProcessingProgress.vue index fce3d0b..350d345 100644 --- a/src/components/ImageProcessingProgress.vue +++ b/src/components/ImageProcessingProgress.vue @@ -45,8 +45,10 @@ function formatTime(seconds: number): string { diff --git a/src/components/ImageSelection.vue b/src/components/ImageSelection.vue index b0f227b..3c52906 100644 --- a/src/components/ImageSelection.vue +++ b/src/components/ImageSelection.vue @@ -196,7 +196,7 @@ export default { .status-messages { text-align: center; - font-family: 'Doodle', sans-serif; + font-family: Doodle, sans-serif; margin: 1rem 0; } diff --git a/src/components/StepManager.vue b/src/components/StepManager.vue index 2716dfc..ec948eb 100644 --- a/src/components/StepManager.vue +++ b/src/components/StepManager.vue @@ -154,7 +154,7 @@ function prevStep() { :deep(.current-step) { transform: scale(1.2); - filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.2)); + filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 20%)); } :deep(.current-step)::before { diff --git a/src/components/steps/BleedAdjustment.vue b/src/components/steps/BleedAdjustment.vue index e577365..a11fa86 100644 --- a/src/components/steps/BleedAdjustment.vue +++ b/src/components/steps/BleedAdjustment.vue @@ -59,6 +59,7 @@ onMounted(() => { .value-display wired-card { --wired-card-background-color: transparent; + padding: 0.5rem 1rem; font-family: 'Architects Daughter', cursive; } @@ -70,6 +71,7 @@ onMounted(() => { :deep(wired-slider) { width: 100%; + --wired-slider-knob-color: var(--el-color-primary); --wired-slider-bar-color: #666; }