github-mirror/OpenDeck
1
0 Fork 0
mirror of https://github.com/nekename/OpenDeck.git synced 2026-10-28 09:44:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: remove light mode support as it was poorly maintained

Browse Source
This commit is contained in:
nekename committed 2026-02-20 18:21:15 +00:00
1 parent 0a7d0cf636
commit 88c29469df
17 files changed
+110 -138
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src-tauri/src/store/mod.rs
-2
View File
@@ -114,7 +114,6 @@ pub struct Settings {
pub language: String,
pub brightness: u8,
pub rotation: u16,
pub darktheme: bool,
pub background: bool,
pub autolaunch: bool,
pub updatecheck: bool,
@@ -131,7 +130,6 @@ impl Default for Settings {
language: "en".to_owned(),
brightness: 50,
rotation: 0,
darktheme: true,
background: !is_flatpak(),
autolaunch: false,
updatecheck: option_env!("OPENDECK_DISABLE_UPDATE_CHECK").is_none() && !is_flatpak(),
src/app.css
+10 -18
View File
@@ -4,8 +4,6 @@
@import "tailwindcss/preflight.css";
@import "tailwindcss/utilities.css";
@custom-variant dark (&:where(.dark, .dark *));
*, ::after, ::before, ::backdrop, ::file-selector-button {
border-color: var(--color-gray-200, currentColor);
}
@@ -21,9 +19,9 @@ button, input[type="radio"], input[type="checkbox"], input[type="range"], input[
.select-wrapper select {
@apply appearance-none;
@apply px-2 py-1;
@apply text-sm text-neutral-700 dark:text-neutral-300;
@apply bg-neutral-100 dark:bg-neutral-700;
@apply border-2 dark:border-neutral-900 rounded-md outline-hidden;
@apply text-sm text-neutral-300;
@apply bg-neutral-700;
@apply border-2 border-neutral-900 rounded-md outline-hidden;
@apply cursor-pointer;
}
@@ -40,7 +38,7 @@ button, input[type="radio"], input[type="checkbox"], input[type="range"], input[
.select-device-wrapper select {
@apply appearance-none;
@apply font-semibold text-xl text-neutral-800 dark:text-neutral-200;
@apply font-semibold text-xl text-neutral-200;
@apply outline-hidden;
@apply cursor-pointer;
}
@@ -48,12 +46,9 @@ button, input[type="radio"], input[type="checkbox"], input[type="range"], input[
.select-device-wrapper::after {
@apply absolute right-0.5 top-[47.5%] -translate-y-1/2;
@apply w-2 h-2 rotate-45;
@apply border-r-2 border-b-2 border-neutral-800;
@apply border-r-2 border-b-2 border-neutral-100;
@apply pointer-events-none content-["_"];
}
:is(.dark, .dark *) .select-device-wrapper::after {
@apply border-neutral-100;
}
.select-profile-wrapper {
@apply relative;
@@ -61,7 +56,7 @@ button, input[type="radio"], input[type="checkbox"], input[type="range"], input[
.select-profile-wrapper select {
@apply appearance-none;
@apply text-neutral-500 dark:text-neutral-400;
@apply text-neutral-400;
@apply outline-hidden;
@apply cursor-pointer;
}
@@ -69,21 +64,18 @@ button, input[type="radio"], input[type="checkbox"], input[type="range"], input[
.select-profile-wrapper::after {
@apply absolute right-0.5 top-[47.5%] -translate-y-1/2;
@apply w-1.5 h-1.5 rotate-45;
@apply border-r-2 border-b-2 border-neutral-500;
@apply border-r-2 border-b-2 border-neutral-400;
@apply pointer-events-none content-["_"];
}
:is(.dark, .dark *) .select-profile-wrapper::after {
@apply border-neutral-400;
}
.plugin-readme h1, .plugin-readme h2, .plugin-readme h3, .plugin-readme h4, .plugin-readme h5, .plugin-readme h6 {
@apply font-medium dark:text-neutral-200;
@apply font-medium text-neutral-200;
}
.plugin-readme h1:not(:first-child), .plugin-readme h2:not(:first-child), .plugin-readme h3:not(:first-child) {
@apply mt-5;
}
.plugin-readme h1, .plugin-readme h2, .plugin-readme h3 {
@apply mb-3 pb-1.5 border-b border-neutral-300 dark:border-neutral-600;
@apply mb-3 pb-1.5 border-b border-neutral-600;
}
.plugin-readme h1 {
@apply text-2xl;
@@ -95,7 +87,7 @@ button, input[type="radio"], input[type="checkbox"], input[type="range"], input[
@apply text-lg;
}
.plugin-readme a {
@apply text-blue-600 dark:text-blue-400 hover:underline cursor-pointer;
@apply text-blue-400 hover:underline cursor-pointer;
}
.plugin-readme ul {
@apply list-disc ml-6;
src/app.html
+1 -1
View File
@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover" class="dark:bg-neutral-900">
<body data-sveltekit-preload-data="hover" class="bg-neutral-900">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>
src/components/ActionList.svelte
+6 -6
View File
@@ -33,12 +33,12 @@
}
</script>
<div class="flex flex-col w-[18rem] h-full p-2 border-l dark:border-neutral-700">
<div class="flex flex-row items-center bg-neutral-100 dark:bg-neutral-700 border-2 dark:border-neutral-900 rounded-md">
<MagnifyingGlass size="13" class="ml-2 mr-1 text-neutral-500 dark:text-neutral-300" />
<div class="flex flex-col w-[18rem] h-full p-2 border-l border-neutral-700">
<div class="flex flex-row items-center bg-neutral-700 border-2 border-neutral-900 rounded-md">
<MagnifyingGlass size="13" class="ml-2 mr-1 text-neutral-300" />
<input
bind:value={query}
class="w-full p-1 text-sm text-neutral-700 dark:text-neutral-300 outline-hidden"
class="w-full p-1 text-sm text-neutral-300 outline-hidden"
placeholder="Search actions"
type="search"
spellcheck="false"
@@ -48,7 +48,7 @@
<div class="grow mt-1 overflow-auto select-none">
{#each filteredCategories as [name, { icon, actions }]}
<details open class="mb-2">
<summary class="text-xl font-semibold dark:text-neutral-300">
<summary class="text-xl font-semibold text-neutral-300">
{#if icon || (actions[0] && plugins.find((x) => x.id == actions[0].plugin) && categories[name].actions.every((x) => x.plugin == actions[0].plugin))}
<img
src={icon ? (!icon.startsWith("opendeck/") ? getWebserverUrl(icon) : icon.replace("opendeck", "")) : getWebserverUrl(plugins.find((x) => x.id == actions[0].plugin).icon)}
@@ -75,7 +75,7 @@
alt={$localisations?.[action.plugin]?.[action.uuid]?.Tooltip ?? action.tooltip}
class="w-12 h-12 rounded-xs pointer-events-none"
/>
<span class="dark:text-neutral-400">{$localisations?.[action.plugin]?.[action.uuid]?.Name ?? action.name}</span>
<span class="text-neutral-400">{$localisations?.[action.plugin]?.[action.uuid]?.Name ?? action.name}</span>
</div>
{/each}
</details>
src/components/InstanceEditor.svelte
+10 -10
View File
@@ -55,7 +55,7 @@
}}
/>
<div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 p-2 dark:text-neutral-300 bg-neutral-100 dark:bg-neutral-700 border-2 dark:border-neutral-600 rounded-lg z-10">
<div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 p-2 text-neutral-300 bg-neutral-700 border-2 border-neutral-600 rounded-lg z-10">
<div class="flex flex-row">
<div class="select-wrapper m-1 w-full">
<select class="w-full" bind:value={state}>
@@ -64,7 +64,7 @@
{/each}
</select>
</div>
<button class="ml-2 mr-1 float-right text-xl dark:text-neutral-300" on:click={() => showEditor = false}>✕</button>
<button class="ml-2 mr-1 float-right text-xl text-neutral-300" on:click={() => showEditor = false}>✕</button>
</div>
<div class="flex flex-row">
<div class="flex flex-col justify-center items-center">
@@ -107,7 +107,7 @@
on:mouseleave={() => {
if (navigator.userAgent.toLowerCase().includes("mac")) backgroundColourInput.className = "absolute invisible w-0 h-0";
}}
class="my-0.5 px-0.5 text-sm text-neutral-700 dark:text-neutral-400 bg-neutral-200 dark:bg-neutral-600 rounded-md outline-hidden"
class="my-0.5 px-0.5 text-sm text-neutral-400 bg-neutral-600 rounded-md outline-hidden"
>
Set background
<input
@@ -131,7 +131,7 @@
on:mouseleave={() => {
if (navigator.userAgent.toLowerCase().includes("mac")) solidColourInput.className = "absolute invisible w-0 h-0";
}}
class="mt-0.5 px-0.5 text-sm text-neutral-700 dark:text-neutral-400 bg-neutral-200 dark:bg-neutral-600 rounded-md outline-hidden"
class="mt-0.5 px-0.5 text-sm text-neutral-400 bg-neutral-600 rounded-md outline-hidden"
>
Use solid colour
<input
@@ -180,7 +180,7 @@
<textarea
bind:value={instance.states[state].text}
rows="1"
class="w-full px-1 dark:text-neutral-300 bg-neutral-200 dark:bg-neutral-600 rounded-md outline-hidden resize-none"
class="w-full px-1 text-neutral-300 bg-neutral-600 rounded-md outline-hidden resize-none"
/>
</div>
<div class="flex flex-row items-center">
@@ -188,7 +188,7 @@
<input
type="color"
bind:value={instance.states[state].colour}
class="mr-2 px-0.5 bg-neutral-200 dark:bg-neutral-600 rounded-md outline-hidden"
class="mr-2 px-0.5 bg-neutral-600 rounded-md outline-hidden"
/>
<span class="mr-2"> Show </span>
<input
@@ -210,13 +210,13 @@
<input
type="color"
bind:value={instance.states[state].stroke_colour}
class="mr-2 px-0.5 bg-neutral-200 dark:bg-neutral-600 rounded-md outline-hidden"
class="mr-2 px-0.5 bg-neutral-600 rounded-md outline-hidden"
/>
<span class="mr-2"> Outline </span>
<input
type="number"
bind:value={instance.states[state].stroke_size}
class="px-0.5 w-14 dark:text-neutral-300 bg-neutral-200 dark:bg-neutral-600 rounded-md outline-hidden"
class="px-0.5 w-14 text-neutral-300 bg-neutral-600 rounded-md outline-hidden"
/>
</div>
<div class="flex flex-row">
@@ -225,7 +225,7 @@
list="families"
bind:value={instance.states[state].family}
placeholder="Font family"
class="w-full px-1 dark:text-neutral-300 bg-neutral-200 dark:bg-neutral-600 rounded-md outline-hidden"
class="w-full px-1 text-neutral-300 bg-neutral-600 rounded-md outline-hidden"
/>
<datalist id="families">
<option value="Liberation Sans">Liberation Sans</option>
@@ -268,7 +268,7 @@
<input
type="number"
bind:value={instance.states[state].size}
class="px-0.5 w-14 dark:text-neutral-300 bg-neutral-200 dark:bg-neutral-600 rounded-md outline-hidden"
class="px-0.5 w-14 text-neutral-300 bg-neutral-600 rounded-md outline-hidden"
/>
</div>
</div>
src/components/Key.svelte
+6 -6
View File
@@ -136,7 +136,7 @@
>
<canvas
bind:this={canvas}
class="relative -m-2 border-2 dark:border-neutral-700 rounded-md outline-none outline-offset-2 outline-blue-500"
class="relative -m-2 border-2 border-neutral-700 rounded-md outline-none outline-offset-2 outline-blue-500"
class:outline-solid={slot && $inspectedInstance == slot.context}
class:-m-[2.06rem]={size == 192}
class:rounded-full!={context?.controller == "Encoder"}
@@ -152,13 +152,13 @@
on:contextmenu={contextMenu}
/>
{#if isTouchPoint && !slot}
<div class="absolute left-1/4 top-1/2 w-1/2 border-t-4 dark:border-neutral-700 pointer-events-none"></div>
<div class="absolute left-1/4 top-1/2 w-1/2 border-t-4 border-neutral-700 pointer-events-none"></div>
{/if}
</div>
{#if $openContextMenu && $openContextMenu?.context == context}
<div
class="absolute text-sm font-semibold w-32 dark:text-neutral-300 bg-neutral-100 dark:bg-neutral-700 border-2 dark:border-neutral-600 rounded-lg divide-y z-10"
class="absolute text-sm font-semibold w-32 text-neutral-300 bg-neutral-700 border-2 border-neutral-600 rounded-lg divide-y z-10"
style={`left: ${$openContextMenu.x}px; top: ${$openContextMenu.y}px;`}
>
{#if !slot}
@@ -166,7 +166,7 @@
class="flex flex-row p-2 w-full cursor-pointer items-center"
on:click={paste}
>
<Clipboard size="18" class="text-neutral-500 dark:text-neutral-300" />
<Clipboard size="18" class="text-neutral-300" />
<span class="ml-2"> Paste </span>
</button>
{:else}
@@ -174,14 +174,14 @@
class="flex flex-row p-2 w-full cursor-pointer items-center"
on:click={edit}
>
<Pencil size="18" class="text-neutral-500 dark:text-neutral-300" />
<Pencil size="18" class="text-neutral-300" />
<span class="ml-2"> Edit </span>
</button>
<button
class="flex flex-row p-2 w-full cursor-pointer items-center"
on:click={() => copiedContext.set(context)}
>
<Copy size="18" class="text-neutral-500 dark:text-neutral-300" />
<Copy size="18" class="text-neutral-300" />
<span class="ml-2"> Copy </span>
</button>
<button
src/components/ListedPlugin.svelte
+2 -2
View File
@@ -9,11 +9,11 @@
</script>
<div
class="flex flex-row items-center m-2 p-2 bg-neutral-200 dark:bg-neutral-700 rounded-md"
class="flex flex-row items-center m-2 p-2 bg-neutral-700 rounded-md"
class:hidden
>
<img src={icon} class="w-24 h-24 rounded-md" class:opacity-75={disconnected} alt={name} loading="lazy" />
<div class="ml-4 mr-2 dark:text-neutral-300 wrap-anywhere" class:opacity-75={disconnected}>
<div class="ml-4 mr-2 text-neutral-300 wrap-anywhere" class:opacity-75={disconnected}>
<p class="font-semibold">{name}</p>
<slot name="subtitle">{subtitle}</slot>
</div>
src/components/NoDevicesDetected.svelte
+2 -2
View File
@@ -7,7 +7,7 @@
(async () => buildInfo = await invoke("get_build_info"))();
</script>
<div class="flex flex-col justify-center items-center w-full h-full text-center dark:text-neutral-300">
<div class="flex flex-col justify-center items-center w-full h-full text-center text-neutral-300">
<div class="w-80 text-sm">
<h2 class="text-lg font-bold mb-2">No devices detected</h2>
<p class="mb-2">Make sure your devices are connected properly and you have permission to access them.</p>
@@ -16,7 +16,7 @@
{/if}
<p class="mb-4">You may need to install a plugin that adds support for your device.</p>
<button
class="px-2 py-1 text-sm text-neutral-700 dark:text-neutral-300 bg-neutral-100 dark:bg-neutral-700 border dark:border-neutral-600 rounded-lg"
class="px-2 py-1 text-sm text-neutral-300 bg-neutral-700 border border-neutral-600 rounded-lg"
on:click={() => invoke("restart")}
>
Restart {PRODUCT_NAME}
src/components/ParentActionView.svelte
+5 -5
View File
@@ -51,7 +51,7 @@
}}
/>
<div class="px-6 pt-6 pb-4 dark:text-neutral-300">
<div class="px-6 pt-6 pb-4 text-neutral-300">
<button class="float-right text-xl" on:click={() => $inspectedParentAction = null}>✕</button>
<h1 class="font-semibold text-2xl">{parentUuid == "opendeck.toggleaction" ? "Toggle Action" : "Multi Action"}</h1>
</div>
@@ -63,19 +63,19 @@
on:keyup={() => inspectedInstance.set(null)}
>
{#each children as instance, index}
<div class="flex flex-row items-center mx-4 my-1 bg-neutral-100 dark:bg-neutral-800 rounded-md">
<div class="flex flex-row items-center mx-4 my-1 bg-neutral-800 rounded-md">
<Key inslot={instance} context={null} active={false} scale={3 / 4} />
<p class="ml-4 text-xl dark:text-neutral-400">{instance.action.name}</p>
<p class="ml-4 text-xl text-neutral-400">{instance.action.name}</p>
<button
class="ml-auto mr-10"
on:click={() => removeInstance(index)}
>
<Trash size="32" class="text-neutral-500 dark:text-neutral-400" />
<Trash size="32" class="text-neutral-400" />
</button>
</div>
{/each}
<div
class="flex flex-row items-center mx-4 mt-1 mb-4 p-3 bg-neutral-100 dark:bg-neutral-800 border-2 border-dashed dark:border-neutral-700 rounded-md"
class="flex flex-row items-center mx-4 mt-1 mb-4 p-3 bg-neutral-800 border-2 border-dashed border-neutral-700 rounded-md"
on:dragover={handleDragOver}
on:drop={handleDrop}
>
src/components/PluginDetails.svelte
+5 -5
View File
@@ -71,7 +71,7 @@
</script>
<Popup show>
<button class="mr-2 my-1 float-right text-xl dark:text-neutral-300" on:click={close}>✕</button>
<button class="mr-2 my-1 float-right text-xl text-neutral-300" on:click={close}>✕</button>
<div class="flex flex-row items-start">
<img
src={"https://openactionapi.github.io/plugins/icons/" + id + ".png"}
@@ -79,8 +79,8 @@
class="size-48 rounded-2xl"
/>
<div class="flex flex-col justify-center h-48 ml-8">
<div class="text-3xl dark:text-neutral-200">{details.name}</div>
<div class="flex items-center mt-2 text-lg text-neutral-600 dark:text-neutral-400">
<div class="text-3xl text-neutral-200">{details.name}</div>
<div class="flex items-center mt-2 text-lg text-neutral-400">
<span class="mr-2">by</span>
<img
src={"https://avatars.githubusercontent.com/" + details.repository.split("/")[3]}
@@ -116,7 +116,7 @@
</button>
{#if downloadCount}
<div class="flex flex-row ml-6 text-neutral-700 dark:text-neutral-300">
<div class="flex flex-row ml-6 text-neutral-300">
<span class="mr-1 text-lg">{downloadCount}</span>
<DownloadSimple size={28} />
</div>
@@ -127,7 +127,7 @@
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<div
class="mt-4 p-6 plugin-readme text-neutral-700 dark:text-neutral-300 border-4 border-neutral-300 dark:border-neutral-600 rounded-xl"
class="mt-4 p-6 plugin-readme text-neutral-300 border-4 border-neutral-600 rounded-xl"
on:click={handleReadmeClick}
on:keyup={handleReadmeClick}
role="region"
src/components/PluginManager.svelte
+26 -26
View File
@@ -196,7 +196,7 @@
</script>
<button
class="px-3 py-1 text-sm text-neutral-700 dark:text-neutral-300 bg-neutral-100 dark:bg-neutral-700 border dark:border-neutral-600 rounded-lg outline-hidden"
class="px-3 py-1 text-sm text-neutral-300 bg-neutral-700 border border-neutral-600 rounded-lg outline-hidden"
on:click={() => showPopup = true}
>
Plugins
@@ -213,10 +213,10 @@
/>
<Popup show={showPopup}>
<button class="mr-2 my-1 float-right text-xl dark:text-neutral-300" on:click={() => showPopup = false}>✕</button>
<h2 class="m-2 font-semibold text-xl dark:text-neutral-300">Manage plugins</h2>
<button class="mr-2 my-1 float-right text-xl text-neutral-300" on:click={() => showPopup = false}>✕</button>
<h2 class="m-2 font-semibold text-xl text-neutral-300">Manage plugins</h2>
<h2 class="mx-2 mt-6 mb-2 text-lg dark:text-neutral-400">Installed plugins</h2>
<h2 class="mx-2 mt-6 mb-2 text-lg text-neutral-400">Installed plugins</h2>
<div class="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
<!-- deno-fmt-ignore -->
{#each installed.sort((a, b) =>
@@ -243,7 +243,7 @@
<svelte:fragment slot="subtitle">
{plugin.version}
{#if availableUpdates[plugin.id]}
(<span class="text-yellow-600 dark:text-yellow-400">
(<span class="text-yellow-400">
available:
<button
class="font-semibold underline outline-hidden"
@@ -263,18 +263,18 @@
</svelte:fragment>
{#if $settings?.developer}
<ArrowClockwise size="24" class="mt-2 text-neutral-500 dark:text-neutral-400" />
<ArrowClockwise size="24" class="mt-2 text-neutral-400" />
{:else if !plugin.builtin}
<Trash size="24" class="mt-2 text-neutral-500 dark:text-neutral-400" />
<Trash size="24" class="mt-2 text-neutral-400" />
{/if}
</ListedPlugin>
{/each}
</div>
<div class="flex flex-row justify-between items-center mx-2 mt-6 mb-2">
<h2 class="text-lg dark:text-neutral-400">Plugin store</h2>
<h2 class="text-lg text-neutral-400">Plugin store</h2>
<button
class="flex flex-row items-center mt-2 px-1 py-0.5 text-sm text-neutral-700 dark:text-neutral-300 bg-neutral-100 dark:bg-neutral-700 border dark:border-neutral-600 rounded-lg outline-hidden"
class="flex flex-row items-center mt-2 px-1 py-0.5 text-sm text-neutral-300 bg-neutral-700 border border-neutral-600 rounded-lg outline-hidden"
on:click={installPluginFile}
>
<FileArrowUp />
@@ -282,18 +282,18 @@
</button>
</div>
<div class="flex flex-row items-center mx-2 my-4 p-3 space-x-2 bg-yellow-50 dark:bg-yellow-900/20 border-l-4 border-yellow-500 rounded">
<div class="flex flex-row items-center mx-2 my-4 p-3 space-x-2 bg-yellow-900/20 border-l-4 border-yellow-500 rounded">
<WarningCircle size="20" class="mt-0.5 text-yellow-500" />
<div class="text-sm text-yellow-800 dark:text-yellow-200">
<div class="text-sm text-yellow-200">
If you are experiencing issues with a plugin, please reach out on one of the {PRODUCT_NAME} support channels before attempting to contact the plugin developer.
</div>
</div>
<div class="flex flex-row items-center m-2 bg-neutral-200 dark:bg-neutral-700 rounded-md">
<MagnifyingGlass size="14" class="ml-3 mr-0.5 text-neutral-500 dark:text-neutral-300" />
<div class="flex flex-row items-center m-2 bg-neutral-700 rounded-md">
<MagnifyingGlass size="14" class="ml-3 mr-0.5 text-neutral-300" />
<input
bind:value={query}
class="w-full p-2 dark:text-neutral-300 outline-hidden"
class="w-full p-2 text-neutral-300 outline-hidden"
placeholder="Search plugins"
type="search"
spellcheck="false"
@@ -301,10 +301,10 @@
</div>
{#if !plugins}
<h2 class="mx-2 mt-6 mb-2 text-md dark:text-neutral-400">Loading open-source plugin list...</h2>
<h2 class="mx-2 mt-6 mb-2 text-md text-neutral-400">Loading open-source plugin list...</h2>
{:else}
<div class="flex flex-row items-center ml-2 mt-6 mb-2 space-x-2">
<h2 class="font-semibold text-md dark:text-neutral-400">Open-source plugins</h2>
<h2 class="font-semibold text-md text-neutral-400">Open-source plugins</h2>
<Tooltip>Open-source plugins downloaded from the author's releases</Tooltip>
</div>
<div class="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
@@ -316,19 +316,19 @@
hidden={!plugin.name.toLowerCase().includes(query.toLowerCase())}
action={() => openDetailsView = id}
>
<ArrowSquareOut size="24" class="text-neutral-500 dark:text-neutral-400" />
<ArrowSquareOut size="24" class="text-neutral-400" />
</ListedPlugin>
{/each}
</div>
{/if}
<div class="flex flex-row items-center mt-6 mb-2">
<h2 class="mx-2 font-semibold text-md dark:text-neutral-400">Elgato App Store archive</h2>
<h2 class="mx-2 font-semibold text-md text-neutral-400">Elgato App Store archive</h2>
<Tooltip>Plugins archived from the Elgato App Store (now replaced by the Elgato Marketplace)</Tooltip>
</div>
{#if !showArchive}
<button
class="ml-2 mt-2 mb-2 px-2 py-1 text-sm text-neutral-700 dark:text-neutral-300 bg-neutral-100 dark:bg-neutral-700 border dark:border-neutral-600 rounded-lg"
class="ml-2 mt-2 mb-2 px-2 py-1 text-sm text-neutral-300 bg-neutral-700 border border-neutral-600 rounded-lg"
on:click={async () => {
showArchive = true;
archivePlugins = await (await fetch("https://plugins.amankhanna.me/catalogue.json")).json();
@@ -337,7 +337,7 @@
Load Elgato App Store archive
</button>
{:else if !archivePlugins}
<h2 class="mx-2 mt-4 mb-2 text-md dark:text-neutral-400">Loading Elgato App Store archive plugin list...</h2>
<h2 class="mx-2 mt-4 mb-2 text-md text-neutral-400">Loading Elgato App Store archive plugin list...</h2>
{:else}
<div class="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
{#each archivePlugins as plugin}
@@ -348,7 +348,7 @@
hidden={!plugin.name.toLowerCase().includes(query.toLowerCase())}
action={() => installPluginElgato(plugin)}
>
<CloudArrowDown size="24" class="text-neutral-500 dark:text-neutral-400" />
<CloudArrowDown size="24" class="text-neutral-400" />
</ListedPlugin>
{/each}
</div>
@@ -356,7 +356,7 @@
{#if "Tacto Connect".toLowerCase().includes(query.toLowerCase())}
<div class="flex flex-row items-center mt-6 mb-2">
<h2 class="mx-2 font-semibold text-md dark:text-neutral-400">Tacto</h2>
<h2 class="mx-2 font-semibold text-md text-neutral-400">Tacto</h2>
<Tooltip>Turn your phone or keyboard into a control centre for your computer</Tooltip>
</div>
<div class="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
@@ -374,10 +374,10 @@
secondaryAction={() => window.open("https://tacto.live")}
>
<svelte:fragment slot="secondary">
<ArrowSquareOut size="24" class="text-neutral-500 dark:text-neutral-400" />
<ArrowSquareOut size="24" class="text-neutral-400" />
</svelte:fragment>
<CloudArrowDown size="24" class="mt-2 text-neutral-500 dark:text-neutral-400" />
<CloudArrowDown size="24" class="mt-2 text-neutral-400" />
</ListedPlugin>
</div>
{/if}
@@ -396,7 +396,7 @@
{/if}
{#if choices}
<div class="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 mt-2 p-2 w-96 text-xs dark:text-neutral-300 bg-neutral-100 dark:bg-neutral-700 border-2 dark:border-neutral-600 rounded-lg z-40">
<div class="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 mt-2 p-2 w-96 text-xs text-neutral-300 bg-neutral-700 border-2 border-neutral-600 rounded-lg z-40">
<h3 class="mb-2 font-semibold text-lg text-center">Choose a release asset</h3>
<div class="select-wrapper">
<select class="w-full" bind:value={choice}>
@@ -406,7 +406,7 @@
</select>
</div>
<button
class="mt-2 p-1 w-full text-sm text-neutral-700 dark:text-neutral-300 bg-neutral-200 dark:bg-neutral-800 border dark:border-neutral-600 rounded-lg"
class="mt-2 p-1 w-full text-sm text-neutral-300 bg-neutral-800 border border-neutral-600 rounded-lg"
on:click={finishChoice}
>
Install
src/components/Popup.svelte
+1 -1
View File
@@ -3,7 +3,7 @@
</script>
{#if show}
<div class="absolute top-0 left-0 m-2 p-4 w-[calc(100%-1rem)] h-[calc(100%-1rem)] bg-neutral-100 dark:bg-neutral-800 border-2 dark:border-neutral-700 rounded-lg overflow-auto z-30">
<div class="absolute top-0 left-0 m-2 p-4 w-[calc(100%-1rem)] h-[calc(100%-1rem)] bg-neutral-800 border-2 border-neutral-700 rounded-lg overflow-auto z-30">
<slot />
</div>
{/if}
src/components/ProfileManager.svelte
+16 -16
View File
@@ -201,14 +201,14 @@
/>
<Popup show={showPopup}>
<button class="mr-1 float-right text-xl dark:text-neutral-300" on:click={() => showPopup = false}>✕</button>
<h2 class="text-xl font-semibold dark:text-neutral-300">{device.name}</h2>
<button class="mr-1 float-right text-xl text-neutral-300" on:click={() => showPopup = false}>✕</button>
<h2 class="text-xl font-semibold text-neutral-300">{device.name}</h2>
<div class="flex flex-row mt-2 mb-1">
<input
bind:this={nameInput}
pattern="[a-zA-Z0-9_ ]+(\/[a-zA-Z0-9_ ]+)?"
class="grow p-2 dark:text-neutral-300 invalid:text-red-400 bg-neutral-200 dark:bg-neutral-700 rounded-l-md outline-hidden"
class="grow p-2 text-neutral-300 invalid:text-red-400 bg-neutral-700 rounded-l-md outline-hidden"
placeholder='Profile name or "folder/name"'
/>
@@ -220,13 +220,13 @@
nameInput.value = "";
showPopup = false;
}}
class="px-4 dark:text-neutral-300 bg-neutral-300 dark:bg-neutral-900 rounded-r-md"
class="px-4 text-neutral-300 bg-neutral-900 rounded-r-md"
>
Create
</button>
<button
class="ml-2 px-4 flex items-center dark:text-neutral-300 bg-neutral-300 dark:bg-neutral-900 rounded-md outline-hidden"
class="ml-2 px-4 flex items-center text-neutral-300 bg-neutral-900 rounded-md outline-hidden"
on:click={() => showApplicationManager = true}
>
<Browsers size={24} />
@@ -236,7 +236,7 @@
<div class="divide-y">
{#each Object.entries(folders).sort() as [id, profiles]}
{#if id && profiles.length}
<h4 class="py-2 font-bold text-lg dark:text-neutral-300">{id}</h4>
<h4 class="py-2 font-bold text-lg text-neutral-300">{id}</h4>
{/if}
{#each profiles.sort() as profile}
<div class="flex flex-row items-center py-2 space-x-2" class:ml-6={id} class:pl-2={id}>
@@ -246,26 +246,26 @@
bind:this={renameInput}
bind:value={newId}
pattern="[a-zA-Z0-9_ ]+(\/[a-zA-Z0-9_ ]+)?"
class="grow px-2 py-1 dark:text-neutral-300 invalid:text-red-400 bg-neutral-200 dark:bg-neutral-700 rounded outline-hidden"
class="grow px-2 py-1 text-neutral-300 invalid:text-red-400 bg-neutral-700 rounded outline-hidden"
placeholder='Profile name or "folder/name"'
on:keydown={(e) => {
if (e.key === "Enter") saveRenamedProfile(profile);
}}
/>
<button on:click={() => saveRenamedProfile(profile)} title="Save">
<FloppyDisk size="20" class="text-green-600 dark:text-green-500" />
<FloppyDisk size="20" class="text-green-500" />
</button>
{:else}
<span class="grow dark:text-neutral-400">{id ? profile.split("/")[1] : profile}</span>
<span class="grow text-neutral-400">{id ? profile.split("/")[1] : profile}</span>
{#if profile != value}
<button
on:click={() => renamingProfile = newId = profile}
title="Rename"
>
<Pencil size="20" class="text-neutral-500 dark:text-neutral-400" />
<Pencil size="20" class="text-neutral-400" />
</button>
<button on:click={() => deleteProfile(profile)} title="Delete">
<Trash size="20" class="text-neutral-500 dark:text-neutral-400" />
<Trash size="20" class="text-neutral-400" />
</button>
{/if}
{/if}
@@ -276,12 +276,12 @@
</Popup>
<Popup show={showApplicationManager}>
<button class="mr-1 float-right text-xl dark:text-neutral-300" on:click={() => showApplicationManager = false}>✕</button>
<h2 class="text-xl font-semibold dark:text-neutral-300">{device.name}</h2>
<span class="text-sm dark:text-neutral-400">If your application isn't listed, try switching to it and back again.</span>
<span class="text-sm dark:text-neutral-400">The 'default profile' will activate when the focussed application has no profile associated with it.</span>
<button class="mr-1 float-right text-xl text-neutral-300" on:click={() => showApplicationManager = false}>✕</button>
<h2 class="text-xl font-semibold text-neutral-300">{device.name}</h2>
<span class="text-sm text-neutral-400">If your application isn't listed, try switching to it and back again.</span>
<span class="text-sm text-neutral-400">The 'default profile' will activate when the focussed application has no profile associated with it.</span>
<table class="w-full dark:text-neutral-300 divide-y">
<table class="w-full text-neutral-300 divide-y">
{#each Object.entries(applicationProfiles).sort((a, b) => a[0] == "opendeck_default" ? -1 : b[0] == "opendeck_default" ? 1 : a[0].localeCompare(b[0])) as [appName, devices]}
{#if devices[device.id]}
<tr class="h-12">
src/components/PropertyInspectorView.svelte
+2 -2
View File
@@ -175,11 +175,11 @@
}}
/>
<div class="grow min-h-64 max-h-96 overflow-auto bg-white dark:bg-neutral-900 border-t dark:border-neutral-700" bind:this={iframeContainer}>
<div class="grow min-h-64 max-h-96 overflow-auto bg-neutral-900 border-t border-neutral-700" bind:this={iframeContainer}>
<button
bind:this={iframeClosePopup}
on:click={() => closePopup(iframePopupsOpen[iframePopupsOpen.length - 1])}
class="absolute top-2 right-2 text-2xl dark:text-neutral-300 font-bold hidden"
class="absolute top-2 right-2 text-2xl text-neutral-300 font-bold hidden"
>
✕
</button>
src/components/SettingsView.svelte
+17 -34
View File
@@ -14,18 +14,6 @@
let buildInfo: string;
(async () => buildInfo = await invoke("get_build_info"))();
settings.subscribe((settings) => {
if (settings) updateTheme(settings.darktheme);
});
function updateTheme(darktheme: boolean) {
if (darktheme) {
document.documentElement.classList.add("dark");
} else {
document.documentElement.classList.remove("dark");
}
}
listen("device_brightness", ({ payload }: { payload: { action: string; value: number } }) => {
if (!$settings) return;
let value = $settings.brightness;
@@ -45,7 +33,7 @@
</script>
<button
class="px-3 py-1 text-sm text-neutral-700 dark:text-neutral-300 bg-neutral-100 dark:bg-neutral-700 border dark:border-neutral-600 rounded-lg outline-hidden"
class="px-3 py-1 text-sm text-neutral-300 bg-neutral-700 border border-neutral-600 rounded-lg outline-hidden"
on:click={() => showPopup = true}
>
Settings
@@ -58,11 +46,11 @@
/>
<Popup show={showPopup}>
<button class="mr-2 my-1 float-right text-xl dark:text-neutral-300" on:click={() => showPopup = false}>✕</button>
<h2 class="m-2 font-semibold text-xl dark:text-neutral-300">Settings</h2>
<button class="mr-2 my-1 float-right text-xl text-neutral-300" on:click={() => showPopup = false}>✕</button>
<h2 class="m-2 font-semibold text-xl text-neutral-300">Settings</h2>
{#if $settings}
<div class="flex flex-row items-center m-2 space-x-2">
<span class="dark:text-neutral-400"> Language: </span>
<span class="text-neutral-400"> Language: </span>
<div class="select-wrapper">
<select bind:value={$settings.language} class="w-32">
<option value="en">English</option>
@@ -80,28 +68,23 @@
</div>
<div class="flex flex-row items-center m-2 space-x-2">
<span class="dark:text-neutral-400"> Device brightness: </span>
<span class="text-neutral-400"> Device brightness: </span>
<input type="range" min="0" max="100" bind:value={$settings.brightness} />
</div>
<div class="flex flex-row items-center m-2 space-x-2">
<span class="dark:text-neutral-400"> Image rotation: </span>
<span class="text-neutral-400"> Image rotation: </span>
<input type="range" min="0" max="270" step="90" bind:value={$settings.rotation} />
</div>
<div class="flex flex-row items-center m-2 space-x-2">
<span class="dark:text-neutral-400"> Enable dark theme: </span>
<input type="checkbox" bind:checked={$settings.darktheme} />
</div>
<div class="flex flex-row items-center m-2 space-x-2">
<span class="dark:text-neutral-400"> Run in background: </span>
<span class="text-neutral-400"> Run in background: </span>
<input type="checkbox" bind:checked={$settings.background} />
<Tooltip> If this option is enabled, {PRODUCT_NAME} will minimise to the tray and run in the background. </Tooltip>
</div>
<div class="flex flex-row items-center m-2 space-x-2">
<span class="dark:text-neutral-400"> Start at login: </span>
<span class="text-neutral-400"> Start at login: </span>
<input type="checkbox" bind:checked={$settings.autolaunch} />
<Tooltip>
If this option is enabled, {PRODUCT_NAME} will automatically start at login.
@@ -113,18 +96,18 @@
</div>
<div class="flex flex-row items-center m-2 space-x-2">
<span class="dark:text-neutral-400"> Check for updates: </span>
<span class="text-neutral-400"> Check for updates: </span>
<input type="checkbox" bind:checked={$settings.updatecheck} />
</div>
<div class="flex flex-row items-center m-2 space-x-2">
<span class="dark:text-neutral-400"> Contribute statistics: </span>
<span class="text-neutral-400"> Contribute statistics: </span>
<input type="checkbox" bind:checked={$settings.statistics} />
</div>
{#if !buildInfo?.includes("windows")}
<div class="flex flex-row items-center m-2 space-x-2">
<span class="dark:text-neutral-400"> Create separate Wine prefixes: </span>
<span class="text-neutral-400"> Create separate Wine prefixes: </span>
<input type="checkbox" bind:checked={$settings.separatewine} />
<Tooltip>
If this option is enabled, {PRODUCT_NAME} will create a separate Wine prefix for each plugin that runs under Wine. Please note that each Wine prefix is quite large - around 300MB when
@@ -134,7 +117,7 @@
{/if}
<div class="flex flex-row items-center m-2 space-x-2">
<span class="dark:text-neutral-400"> Enable developer mode: </span>
<span class="text-neutral-400"> Enable developer mode: </span>
<input type="checkbox" bind:checked={$settings.developer} />
<Tooltip>
This option enables features that make plugin development and debugging easier. Additionally, this option exposes all file paths on your device on the local webserver to allow symbolic linking
@@ -143,7 +126,7 @@
</div>
<div class="flex flex-row items-center m-2 space-x-2">
<span class="dark:text-neutral-400"> Disable Elgato device discovery: </span>
<span class="text-neutral-400"> Disable Elgato device discovery: </span>
<input type="checkbox" bind:checked={$settings.disableelgato} />
<Tooltip> This option disables discovery of Elgato devices so that they can be managed by other software. </Tooltip>
</div>
@@ -151,21 +134,21 @@
<div class="ml-2">
<button
class="mt-2 mb-4 px-2 py-1 text-sm text-neutral-700 dark:text-neutral-300 bg-neutral-100 dark:bg-neutral-700 border dark:border-neutral-600 rounded-lg"
class="mt-2 mb-4 px-2 py-1 text-sm text-neutral-300 bg-neutral-700 border border-neutral-600 rounded-lg"
on:click={() => invoke("open_config_directory")}
>
Open config directory
</button>
<button
class="mt-2 mb-4 px-2 py-1 text-sm text-neutral-700 dark:text-neutral-300 bg-neutral-100 dark:bg-neutral-700 border dark:border-neutral-600 rounded-lg"
class="mt-2 mb-4 px-2 py-1 text-sm text-neutral-300 bg-neutral-700 border border-neutral-600 rounded-lg"
on:click={() => invoke("open_log_directory")}
>
Open log directory
</button>
<span class="text-xs dark:text-neutral-400">
<span class="text-xs text-neutral-400">
{@html buildInfo}
</span>
<div class="absolute bottom-6 flex flex-row items-center text-sm dark:text-neutral-400">
<div class="absolute bottom-6 flex flex-row items-center text-sm text-neutral-400">
<span class="mr-1">
Please leave a
<button on:click={() => invoke("open_url", { url: "https://github.com/nekename/OpenDeck" })} class="underline">star on GitHub</button>
src/components/Tooltip.svelte
+1 -1
View File
@@ -12,7 +12,7 @@
>
<Question size="24" class="text-neutral-500" />
{#if show}
<div class="absolute mt-2 p-2 w-96 text-xs dark:text-neutral-300 bg-neutral-100 dark:bg-neutral-700 border-2 dark:border-neutral-600 rounded-lg">
<div class="absolute mt-2 p-2 w-96 text-xs text-neutral-300 bg-neutral-700 border-2 border-neutral-600 rounded-lg">
<slot />
</div>
{/if}
src/lib/settings.ts
-1
View File
@@ -3,7 +3,6 @@ export type Settings = {
language: string;
brightness: number;
rotation: number;
darktheme: boolean;
background: boolean;
autolaunch: boolean;
updatecheck: boolean;