WinBoat Beta v{{ appVer }} {{ isDev ? "Dev" : "Prod" }}
-
+
@@ -1108,7 +1108,7 @@ function install() {
}
-
+
@@ -155,8 +168,8 @@
\ No newline at end of file
diff --git a/src/renderer/components/ConfigCard.vue b/src/renderer/components/ConfigCard.vue
index 82a10329..3368c4b8 100644
--- a/src/renderer/components/ConfigCard.vue
+++ b/src/renderer/components/ConfigCard.vue
@@ -24,7 +24,7 @@
Subtract
Add
- ();
const value = defineModel("value");
+const emits = defineEmits(["toggle"]);
function ensureNumericInput(e: any) {
if (e.metaKey || e.ctrlKey || e.which <= 0 || e.which === 8 || e.key === "ArrowRight" || e.key === "ArrowLeft") {
@@ -150,4 +151,7 @@ function applyStep(step: number) {
value.value = Math.min(Math.max(props.min ?? Number.MIN_SAFE_INTEGER, tmp), props.max ?? Number.MAX_SAFE_INTEGER);
}
-
\ No newline at end of file
+
+
+
\ No newline at end of file
diff --git a/src/renderer/components/FancyIcon.vue b/src/renderer/components/FancyIcon.vue
new file mode 100644
index 00000000..eaf9c5d8
--- /dev/null
+++ b/src/renderer/components/FancyIcon.vue
@@ -0,0 +1,34 @@
+
+
WinBoat
-- {{ useRoute().name }} -
+ ++ {{ token.token }} +
+{{ props.unit }}
+{{ props.unit }}
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/renderer/index.css b/src/renderer/index.css
index 73c1b500..768a13e3 100644
--- a/src/renderer/index.css
+++ b/src/renderer/index.css
@@ -29,3 +29,14 @@ body img {
.generic-hover {
@apply hover:brightness-90 transition duration-200;
}
+
+.input-animation {
+ @apply before:transition-transform before:duration-200 before:ease-in-out before:scale-x-0 focus:before:scale-x-100;
+}
+
+.opening-transition {
+ transition: width 300ms, scale 300ms;
+ @starting-style {
+ width: 40%;
+ }
+}
\ No newline at end of file
diff --git a/src/renderer/lib/constants.ts b/src/renderer/lib/constants.ts
index 015f52c2..7eded94e 100644
--- a/src/renderer/lib/constants.ts
+++ b/src/renderer/lib/constants.ts
@@ -1,5 +1,6 @@
const os: typeof import("os") = require("node:os");
const path: typeof import("path") = require("node:path");
+const remote: typeof import("@electron/remote") = require("@electron/remote");
// Should be {home}/.winboat
export const WINBOAT_DIR = path.join(os.homedir(), ".winboat");
@@ -71,3 +72,7 @@ export const RESTART_UNLESS_STOPPED = "unless-stopped";
export const RESTART_ON_FAILURE = "on-failure";
export const RESTART_ALWAYS = "always";
export const RESTART_NO = "no";
+
+export const ICONS_PATH = remote.app.isPackaged
+ ? path.join(process.resourcesPath, "icons")
+ : path.join(remote.app.getAppPath(), "..", "..", "icons");
\ No newline at end of file
diff --git a/src/renderer/router.ts b/src/renderer/router.ts
index 4ffb14bf..8a01611d 100644
--- a/src/renderer/router.ts
+++ b/src/renderer/router.ts
@@ -8,16 +8,77 @@ import Blank from "./views/Blank.vue";
import Config from "./views/Config.vue";
import Migration from "./views/Migration.vue";
+import Winboat from "./views/Config/Winboat.vue";
+import General from "./views/Config/General.vue";
+import Display from "./views/Config/Display.vue";
+import Devices from "./views/Config/Devices.vue";
+
export const routes: RouteRecordRaw[] = [
- { path: "/", name: "Loading", component: Blank, meta: { icon: "line-md:loading-loop" } },
- { path: "/home", name: "Home", component: Home, meta: { icon: "fluent:home-32-filled" } },
- { path: "/migration", name: "Migration", component: Migration, meta: { icon: "fluent:home-32-filled" } },
- { path: "/setup", name: "SetupUI", component: SetupUI, meta: { icon: "fluent-mdl2:install-to-drive" } },
- { path: "/apps", name: "Apps", component: Apps, meta: { icon: "fluent:apps-32-filled" } },
- { path: "/configuration", name: "Configuration", component: Config, meta: { icon: "icon-park-outline:config" } },
- { path: "/about", name: "About", component: About, meta: { icon: "fluent:info-32-filled" } },
+ { path: "/", component: Blank, meta: { icon: "line-md:loading-loop" } },
+ { path: "/Home", component: Home, meta: { icon: "fluent:home-32-filled", nav: true } },
+ { path: "/Migration", component: Migration, meta: { icon: "fluent:home-32-filled", } },
+ { path: "/Setup", component: SetupUI, meta: { icon: "fluent-mdl2:install-to-drive", } },
+ { path: "/Apps", component: Apps, meta: { icon: "fluent:apps-32-filled", nav: true } },
+ { path: "/Configuration", component: Config, meta: { icon: "icon-park-outline:config", nav: true }, },
+ {
+ path: "/Configuration/WinBoat",
+ component: Winboat,
+ meta: {
+ icon: "winboat:config-logo",
+ desc: "Lorem Ipsum WinBoat"
+ }
+ },
+ {
+ path: "/Configuration/General",
+ component: General,
+ meta: {
+ icon: "fluent:wrench-screwdriver-32-regular" ,
+ desc: "Lorem Ipsum General"
+ }
+ },
+ {
+ path: "/Configuration/Display",
+ component:
+ Display,
+ meta: {
+ icon: "ci:monitor",
+ desc: "Lorem Ipsum Display"
+ }
+ },
+ {
+ path: "/Configuration/Devices",
+ component: Devices,
+ meta: {
+ icon: "tabler:device-usb",
+ desc: "Lorem Ipsum Devices"
+ }
+ },
+ { path: "/About", component: About, meta: { icon: "fluent:info-32-filled", nav: true } },
];
+export type RouteToken = {
+ token: string;
+ icon?: string;
+ desc?: string;
+};
+
+const routeMetaLookup = Object.fromEntries(routes.map(route => {
+ const lastSlashIdx = route.path.lastIndexOf("/");
+ const lastToken = route.path.substring(lastSlashIdx + 1);
+ return [lastToken, [route.meta?.icon, route.meta?.desc]];
+}));
+
+export function splitRoute(url: string): RouteToken[] {
+ return url.substring(1).split("/").map(token => {
+ const currMeta = routeMetaLookup[token] as string[];
+ return { token, icon: currMeta[0], desc: currMeta[1] };
+ });
+}
+
+export function joinRouteTokens(tokens: RouteToken[]): string {
+ return `/${tokens.map(x => x.token).join('/')}`;
+}
+
export const router = createRouter({
history: createMemoryHistory(),
routes,
diff --git a/src/renderer/utils/navigation.ts b/src/renderer/utils/navigation.ts
new file mode 100644
index 00000000..083e25e1
--- /dev/null
+++ b/src/renderer/utils/navigation.ts
@@ -0,0 +1,19 @@
+import { router } from "../router";
+
+export function mouseBack(e: MouseEvent) {
+ if (e.button === 3) router.back();
+}
+
+export function escBack(e: KeyboardEvent) {
+ if (e.key === "Escape") router.back();
+}
+
+export function addNavigationEvents() {
+ window.addEventListener("mouseup", mouseBack);
+ window.addEventListener("keyup", escBack);
+}
+
+export function removeNavigationEvents() {
+ window.removeEventListener("mouseup", mouseBack);
+ window.removeEventListener("keyup", escBack);
+}
\ No newline at end of file
diff --git a/src/renderer/views/Config.vue b/src/renderer/views/Config.vue
index 0647fe6d..da38a2cd 100644
--- a/src/renderer/views/Config.vue
+++ b/src/renderer/views/Config.vue
@@ -1,741 +1,37 @@
-
-
Windows has been installed successfully!
- Finish
+ Finish
- Container
-
-
-
-
-
- If enabled, you will be able to access your Linux home folder within Windows under
- Network\host.lan
-
-
-
-
-
-
- None
-
-
-
- Save
-
-
-
-
- ❗ {{ error }}
-
- Devices
-
-
-
-
-
-
-
-
-
-
- Update
-
-
-
-
-
-
-
-
-
-
-
- Press the button below to add USB devices to your passthrough list
-
-
-
-
-
-
-
-
- Add Device
-
-
- {{ usbManager.stringifyDevice(device) }}
-
-
- No available devices
-
-
-
-
-
-
-
-
-
- - USB Passthrough - Experimental -
-- We need to update your Compose in order to use this feature! -
- -- USB Passthrough is not yet supported while using Podman as the container runtime. -
-
-
-
- - {{ usbManager.stringifyPTSerializableDevice(device) }} -
-
- FreeRDP
-
-
-
-
-
-
-
-
- Press the buttons below to add arguments to FreeRDP, you can choose to either add a new
- argument or modify an existing one to your liking via replacement
-
-
-
-
-
-
-
-
-
-
-
- - FreeRDP Arguments - Advanced -
-
-
- Original Argument
-
-
- New Argument
-
-
-
-
- Add Argument
-
-
- Replace Argument
-
-
-
- General
-
-
-
-
-
-
- Controls how multiple monitors are handled. MultiMon creates separate displays for each
- monitor, while Span stretches the display across all monitors. Note: Span or MultiMon may
- work better depending on your setup.
-
-
-
-
-
-
-
-
-
-
- WinBoat
-
-
-
-
-
-
-
- Danger Zone
-
-
-
-
-
-
+ - ⚠️ WARNING: All actions here are potentially destructive, proceed at - your own caution! -
-
+
- // Create the QMP interval if experimental features are enabled
- // This would get created by default since we're changing the compose and re-deploying,
- // but a scenario could also occur where the user is re-enabling experimental features
- // after the compose changes, which then would cause a bug
- // TODO: Remove after USB passthrough is no longer experimental
- } else if (winboat.containerStatus.value == ContainerStatus.RUNNING && !winboat.hasQMPInterval) {
- console.log("Creating QMP interval because experimental features were turned on");
- winboat.createQMPInterval();
+
+
\ No newline at end of file
diff --git a/src/renderer/views/Config/Devices.vue b/src/renderer/views/Config/Devices.vue
new file mode 100644
index 00000000..c81fec8f
--- /dev/null
+++ b/src/renderer/views/Config/Devices.vue
@@ -0,0 +1,303 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/renderer/views/Config/Display.vue b/src/renderer/views/Config/Display.vue
new file mode 100644
index 00000000..4e2a9ee1
--- /dev/null
+++ b/src/renderer/views/Config/Display.vue
@@ -0,0 +1,135 @@
+
+
+
+
+
+
+
+
+
+ Update
+
+
+
+
+
+
+
+
+
+
+
+ Press the button below to add USB devices to your passthrough list
+
+
+
+
+
+
+
+
+ Add Device
+
+
+ {{ usbManager.stringifyDevice(device) }}
+
+
+ No available devices
+
+
+
+
+
+
+
+
+
+ + USB Passthrough + Experimental +
++ We need to update your Compose in order to use this feature! +
+ ++ USB Passthrough is not yet supported while using Podman as the container runtime. +
+
+
+
+ + {{ usbManager.stringifyPTSerializableDevice(device) }} +
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/renderer/views/Config/General.vue b/src/renderer/views/Config/General.vue
new file mode 100644
index 00000000..b46e7311
--- /dev/null
+++ b/src/renderer/views/Config/General.vue
@@ -0,0 +1,77 @@
+
+
+
+
+ Controls how multiple monitors are handled. MultiMon creates separate displays for each
+ monitor, while Span stretches the display across all monitors. Note: Span or MultiMon may
+ work better depending on your setup.
+
+
+
+
+
+ Press the buttons below to add arguments to FreeRDP, you can choose to either add a new
+ argument or modify an existing one to your liking via replacement
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + FreeRDP Arguments + Advanced +
+
+
+ Original Argument
+
+
+
+ New Argument
+
+
+
+
+
+ Add Argument
+
+
+
+ Replace Argument
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/renderer/views/Config/Winboat.vue b/src/renderer/views/Config/Winboat.vue
new file mode 100644
index 00000000..801cb855
--- /dev/null
+++ b/src/renderer/views/Config/Winboat.vue
@@ -0,0 +1,248 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/renderer/views/SetupUI.vue b/src/renderer/views/SetupUI.vue
index fe1b960f..3115c937 100644
--- a/src/renderer/views/SetupUI.vue
+++ b/src/renderer/views/SetupUI.vue
@@ -771,7 +771,7 @@
+
+
+
+ If enabled, you will be able to access your Linux home folder within Windows under
+ Network\host.lan
+
+
+
+
+
+
+ None
+
+
+
+ Save
+
+
+
+
+ ❗ {{ error }}
+