diff --git a/src/ModManUi/build/HeaderTransformationPlugin.ts b/src/ModManUi/build/HeaderTransformationPlugin.ts index 4d6fba3c..c2269f0a 100644 --- a/src/ModManUi/build/HeaderTransformationPlugin.ts +++ b/src/ModManUi/build/HeaderTransformationPlugin.ts @@ -8,7 +8,7 @@ type MinimalOutputChunk = Pick; type MinimalOutputBundle = Record; function createVarName(fileName: string) { - return fileName.replaceAll(".", "_").toUpperCase(); + return fileName.replaceAll(/[\.-]/g, "_").toUpperCase(); } function transformAsset(asset: MinimalOutputAsset) { diff --git a/src/ModManUi/package-lock.json b/src/ModManUi/package-lock.json index d64a29a2..40b2841d 100644 --- a/src/ModManUi/package-lock.json +++ b/src/ModManUi/package-lock.json @@ -8,7 +8,10 @@ "name": "openassettools", "version": "0.1.0", "dependencies": { + "@fontsource/inter": "^5.2.8", + "@primeuix/themes": "^1.2.5", "pinia": "3.0.3", + "primevue": "^4.4.1", "vue": "3.5.22" }, "devDependencies": { @@ -1324,6 +1327,15 @@ "node": "^18.18.0 || ^20.9.0 || >=21.1.0" } }, + "node_modules/@fontsource/inter": { + "version": "5.2.8", + "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-5.2.8.tgz", + "integrity": "sha512-P6r5WnJoKiNVV+zvW2xM13gNdFhAEpQ9dQJHt3naLvfg+LkF2ldgSLiF4T41lf1SQCM9QmkqPTn4TH568IRagg==", + "license": "OFL-1.1", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, "node_modules/@humanfs/core": { "version": "0.19.1", "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz", @@ -1829,6 +1841,74 @@ "dev": true, "license": "MIT" }, + "node_modules/@primeuix/styled": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@primeuix/styled/-/styled-0.7.4.tgz", + "integrity": "sha512-QSO/NpOQg8e9BONWRBx9y8VGMCMYz0J/uKfNJEya/RGEu7ARx0oYW0ugI1N3/KB1AAvyGxzKBzGImbwg0KUiOQ==", + "license": "MIT", + "dependencies": { + "@primeuix/utils": "^0.6.1" + }, + "engines": { + "node": ">=12.11.0" + } + }, + "node_modules/@primeuix/styles": { + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/@primeuix/styles/-/styles-1.2.5.tgz", + "integrity": "sha512-nypFRct/oaaBZqP4jinT0puW8ZIfs4u+l/vqUFmJEPU332fl5ePj6DoOpQgTLzo3OfmvSmz5a5/5b4OJJmmi7Q==", + "license": "MIT", + "dependencies": { + "@primeuix/styled": "^0.7.3" + } + }, + "node_modules/@primeuix/themes": { + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/@primeuix/themes/-/themes-1.2.5.tgz", + "integrity": "sha512-n3YkwJrHQaEESc/D/A/iD815sxp8cKnmzscA6a8Tm8YvMtYU32eCahwLLe6h5rywghVwxASWuG36XBgISYOIjQ==", + "license": "MIT", + "dependencies": { + "@primeuix/styled": "^0.7.3" + } + }, + "node_modules/@primeuix/utils": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/@primeuix/utils/-/utils-0.6.1.tgz", + "integrity": "sha512-tQL/ZOPgCdD+NTimlUmhyD0ey8J1XmpZE4hDHM+/fnuBicVVmlKOd5HpS748LcOVRUKbWjmEPdHX4hi5XZoC1Q==", + "license": "MIT", + "engines": { + "node": ">=12.11.0" + } + }, + "node_modules/@primevue/core": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/@primevue/core/-/core-4.4.1.tgz", + "integrity": "sha512-RG56iDKIJT//EtntjQzOiWOHZZJczw/qWWtdL5vFvw8/QDS9DPKn8HLpXK7N5Le6KK1MLXUsxoiGTZK+poUFUg==", + "license": "MIT", + "dependencies": { + "@primeuix/styled": "^0.7.4", + "@primeuix/utils": "^0.6.1" + }, + "engines": { + "node": ">=12.11.0" + }, + "peerDependencies": { + "vue": "^3.5.0" + } + }, + "node_modules/@primevue/icons": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/@primevue/icons/-/icons-4.4.1.tgz", + "integrity": "sha512-UfDimrIjVdY6EziwieyV4zPKzW6mnKHKhy4Dgyjv2oI6pNeuim+onbJo1ce22PEGXW78vfblG/3/JIzVHFweqQ==", + "license": "MIT", + "dependencies": { + "@primeuix/utils": "^0.6.1", + "@primevue/core": "4.4.1" + }, + "engines": { + "node": ">=12.11.0" + } + }, "node_modules/@rolldown/pluginutils": { "version": "1.0.0-beta.29", "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.29.tgz", @@ -5369,6 +5449,22 @@ "node": ">=6.0.0" } }, + "node_modules/primevue": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/primevue/-/primevue-4.4.1.tgz", + "integrity": "sha512-JbHBa5k30pZ7mn/z4vYBOnyt5GrR15eM3X0wa3VanonxnFLYkTEx8OMh33aU6ndWeOfi7Ef57dOL3bTH+3f4hQ==", + "license": "MIT", + "dependencies": { + "@primeuix/styled": "^0.7.4", + "@primeuix/styles": "^1.2.5", + "@primeuix/utils": "^0.6.1", + "@primevue/core": "4.4.1", + "@primevue/icons": "4.4.1" + }, + "engines": { + "node": ">=12.11.0" + } + }, "node_modules/proto-list": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz", diff --git a/src/ModManUi/package.json b/src/ModManUi/package.json index aaba126d..0eeaac30 100644 --- a/src/ModManUi/package.json +++ b/src/ModManUi/package.json @@ -13,7 +13,10 @@ "format": "prettier --write **/*.{js,ts,vue,html,json,yml,yaml,md}" }, "dependencies": { + "@fontsource/inter": "^5.2.8", + "@primeuix/themes": "^1.2.5", "pinia": "3.0.3", + "primevue": "^4.4.1", "vue": "3.5.22" }, "devDependencies": { diff --git a/src/ModManUi/src/App.vue b/src/ModManUi/src/App.vue index 73f92c86..d79530fc 100644 --- a/src/ModManUi/src/App.vue +++ b/src/ModManUi/src/App.vue @@ -1,16 +1,15 @@ @@ -90,33 +83,28 @@ webviewAddEventListener("zoneUnlinkProgress", (dto) => { Nothing to see here yet, this is mainly for testing
- - +
-
-

Loaded zones:

-
-
- {{ zone }} - -
-
-
+ -
-
-
+ @@ -127,10 +115,6 @@ webviewAddEventListener("zoneUnlinkProgress", (dto) => { column-gap: 0.5em; } -.loading { - margin-right: 0.2em; -} - .zone-list { display: flex; flex-direction: column; @@ -141,23 +125,21 @@ webviewAddEventListener("zoneUnlinkProgress", (dto) => { margin-left: 0.5em; } -.progressbar-wrapper { +@starting-style { + .progressbar { + opacity: 0; + } +} + +.progressbar { position: absolute; bottom: 0; left: 0; right: 0; - padding: 0.35rem 0.4rem; -} -.progressbar { - opacity: 0; height: 0.4rem; - border-radius: 2.5rem; - background-color: #b9772c; - transition: opacity 0.2s ease-in-out; - &.visible { - opacity: 1; - } + transition: opacity 0.2s ease-in-out; + opacity: 1; } diff --git a/src/ModManUi/src/PrimeVue.ts b/src/ModManUi/src/PrimeVue.ts new file mode 100644 index 00000000..9eb4aeb4 --- /dev/null +++ b/src/ModManUi/src/PrimeVue.ts @@ -0,0 +1,35 @@ +import type { App } from "vue"; +import PrimeVue from "primevue/config"; +import Aura from "@primeuix/themes/aura"; +import { definePreset } from "@primeuix/themes"; + +const ModManTheme = definePreset(Aura, { + semantic: { + primary: { + 50: "{orange.50}", + 100: "{orange.100}", + 200: "{orange.200}", + 300: "{orange.300}", + 400: "{orange.400}", + 500: "{orange.500}", + 600: "{orange.600}", + 700: "{orange.700}", + 800: "{orange.800}", + 900: "{orange.900}", + 950: "{orange.950}", + }, + }, +}); + +export function configurePrimeVue(app: App) { + app.use(PrimeVue, { + theme: { + preset: ModManTheme, + options: { + darkModeSelector: ".dark-mode", + }, + }, + }); + // Always make dark mode for now + document.documentElement.classList.add("dark-mode"); +} diff --git a/src/ModManUi/src/components/ZoneSelector.vue b/src/ModManUi/src/components/ZoneSelector.vue new file mode 100644 index 00000000..bc098574 --- /dev/null +++ b/src/ModManUi/src/components/ZoneSelector.vue @@ -0,0 +1,54 @@ + + + + + diff --git a/src/ModManUi/src/main.scss b/src/ModManUi/src/main.scss index bfd40850..e119d56c 100644 --- a/src/ModManUi/src/main.scss +++ b/src/ModManUi/src/main.scss @@ -1,11 +1,20 @@ -:root { +@import "@fontsource/inter/latin-300.css"; +@import "@fontsource/inter/latin-300-italic.css"; +@import "@fontsource/inter/latin-400.css"; +@import "@fontsource/inter/latin-400-italic.css"; +@import "@fontsource/inter/latin-600.css"; +@import "@fontsource/inter/latin-600-italic.css"; +@import "@fontsource/inter/latin-700.css"; +@import "@fontsource/inter/latin-700-italic.css"; + +:root { font-family: Inter, Avenir, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; font-weight: 400; - color: #0f0f0f; - background-color: #f6f6f6; + color: var(--p-text-color); + background-color: var(--p-content-background); font-synthesis: none; text-rendering: optimizeLegibility; @@ -33,92 +42,3 @@ body { height: 100vh; } - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: 0.75s; -} - -.logo.tauri:hover { - filter: drop-shadow(0 0 2em #24c8db); -} - -.row { - display: flex; - justify-content: center; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} - -a:hover { - color: #535bf2; -} - -h1 { - text-align: center; -} - -input, -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - color: #0f0f0f; - background-color: #ffffff; - transition: border-color 0.25s; - box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); -} - -button { - cursor: pointer; -} - -button:not(:disabled):hover { - border-color: #396cd8; -} -button:not(:disabled):active { - border-color: #396cd8; - background-color: #e8e8e8; -} -button:disabled { - opacity: 0.6; - cursor: not-allowed; -} - -input, -button { - outline: none; -} - -#greet-input { - margin-right: 5px; -} - -@media (prefers-color-scheme: dark) { - :root { - color: #f6f6f6; - background-color: #2f2f2f; - } - - a:hover { - color: #24c8db; - } - - input, - button { - color: #ffffff; - background-color: #0f0f0f98; - } - button:not(:disabled):active { - background-color: #0f0f0f69; - } -} \ No newline at end of file diff --git a/src/ModManUi/src/main.ts b/src/ModManUi/src/main.ts index d1a7b243..1f9883ef 100644 --- a/src/ModManUi/src/main.ts +++ b/src/ModManUi/src/main.ts @@ -3,6 +3,7 @@ import "./main.scss"; import { createApp } from "vue"; import { createPinia } from "pinia"; +import { configurePrimeVue } from "./PrimeVue.ts"; import App from "./App.vue"; @@ -10,4 +11,6 @@ const app = createApp(App); app.use(createPinia()); +configurePrimeVue(app); + app.mount("#app"); diff --git a/src/ModManUi/src/stores/ZoneStore.ts b/src/ModManUi/src/stores/ZoneStore.ts index 3877ab87..1b2fe86e 100644 --- a/src/ModManUi/src/stores/ZoneStore.ts +++ b/src/ModManUi/src/stores/ZoneStore.ts @@ -1,4 +1,4 @@ -import { readonly, ref } from "vue"; +import { ref } from "vue"; import { defineStore } from "pinia"; import { webviewAddEventListener } from "@/native"; @@ -16,5 +16,5 @@ export const useZoneStore = defineStore("zone", () => { } }); - return { loadedZones: readonly(loadedZones) }; + return { loadedZones }; });