Skip to content

fix: Modify Popup.svelte to accept slots to render header and footer … #384

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
fcrespo82 wants to merge 5 commits into
base: main
Choose a base branch
from
Open

fix: Modify Popup.svelte to accept slots to render header and footer … #384

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
096ab37
fix: Modify Popup.svelte to accept slots to render header and footer …
fcrespo82 Jul 6, 2026
8e12359
Merge branch 'main' into pr/fcrespo82/384
nekename Jul 24, 2026
117c827
cleanup
nekename Jul 24, 2026
c0b4550
fix margins
nekename Jul 24, 2026
6550d5d
revert in PluginDetails
nekename Jul 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/components/PluginDetails.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@

<Popup show label={$t("plugin_details.title", { name: details.name })}>
<button class="mr-2 my-1 float-right text-xl text-neutral-300" on:click={close} aria-label={$t("settings.close")}>✕</button>

<div class="flex flex-row items-start">
<img src={"https://openactionapi.github.io/plugins/icons/" + id + ".png"} alt={details.name} class="size-48 rounded-2xl" />
<div class="flex flex-col justify-center h-48 ml-8">
Expand Down
8 changes: 5 additions & 3 deletions src/components/PluginManager.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,10 +237,12 @@
/>

<Popup show={showPopup} label={$t("plugin_manager.title")}>
<button class="mr-2 my-1 float-right text-xl text-neutral-300" on:click={() => (showPopup = false)} aria-label={$t("settings.close")}>✕</button>
<h2 class="m-2 font-semibold text-xl text-neutral-300">{$t("plugin_manager.title")}</h2>
<svelte:fragment slot="header">
<button class="mr-2 my-1 float-right text-xl text-neutral-300" on:click={() => (showPopup = false)} aria-label={$t("settings.close")}>✕</button>
<h2 class="m-2 font-semibold text-xl text-neutral-300">{$t("plugin_manager.title")}</h2>
</svelte:fragment>

<h2 class="mx-2 mt-6 mb-2 text-lg text-neutral-400">{$t("plugin_manager.installed")}</h2>
<h2 class="mx-2 mt-4 mb-2 text-lg text-neutral-400">{$t("plugin_manager.installed")}</h2>
<div class="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
<!-- prettier-ignore -->
{#each installed.sort((a, b) =>
Expand Down
19 changes: 17 additions & 2 deletions src/components/Popup.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,26 @@
{#if show}
<div
bind:this={popupEl}
class="absolute top-0 left-0 m-2 p-4 w-[calc(100%-1rem)] h-[calc(100%-1rem)] bg-neutral-800 border border-neutral-700 rounded-lg overflow-auto z-30"
class="absolute top-0 left-0 m-2 p-4 w-[calc(100%-1rem)] h-[calc(100%-1rem)] bg-neutral-800 border border-neutral-700 rounded-lg z-30"
class:flex={$$slots.header || $$slots.footer}
class:flex-col={$$slots.header || $$slots.footer}
class:overflow-auto={!$$slots.header && !$$slots.footer}
role="dialog"
tabindex="-1"
aria-label={label}
>
<slot />
{#if $$slots.header}
<div class="shrink-0">
<slot name="header" />
</div>
{/if}
<div class="flex-1" class:overflow-auto={$$slots.header || $$slots.footer}>
<slot />
</div>
{#if $$slots.footer}
<div class="shrink-0">
<slot name="footer" />
</div>
{/if}
</div>
{/if}
16 changes: 10 additions & 6 deletions src/components/ProfileManager.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -220,8 +220,10 @@
/>

<Popup show={showPopup} label="{device.name} {$t('profile_manager.profiles')}">
<button class="mr-1 float-right text-xl text-neutral-300" on:click={() => (showPopup = false)} aria-label={$t("settings.close")}>✕</button>
<h2 class="text-xl font-semibold text-neutral-300">{device.name}</h2>
<svelte:fragment slot="header">
<button class="mr-1 float-right text-xl text-neutral-300" on:click={() => (showPopup = false)} aria-label={$t("settings.close")}>✕</button>
<h2 class="text-xl font-semibold text-neutral-300">{device.name}</h2>
</svelte:fragment>

<div class="flex flex-row mt-2 mb-1">
<input
Expand Down Expand Up @@ -305,10 +307,12 @@
</Popup>

<Popup show={showApplicationManager} label={$t("profile_manager.application_profiles")}>
<button class="mr-1 float-right text-xl text-neutral-300" on:click={() => (showApplicationManager = false)} aria-label={$t("settings.close")}>✕</button>
<h2 class="text-xl font-semibold text-neutral-300">{device.name}</h2>
<span class="text-sm text-neutral-400">{$t("profile_manager.application_profiles.hint.1")}</span>
<span class="text-sm text-neutral-400">{$t("profile_manager.application_profiles.hint.2")}</span>
<svelte:fragment slot="header">
<button class="mr-1 float-right text-xl text-neutral-300" on:click={() => (showApplicationManager = false)} aria-label={$t("settings.close")}>✕</button>
<h2 class="text-xl font-semibold text-neutral-300">{device.name}</h2>
<span class="text-sm text-neutral-400">{$t("profile_manager.application_profiles.hint.1")}</span>
<span class="text-sm text-neutral-400">{$t("profile_manager.application_profiles.hint.2")}</span>
</svelte:fragment>

<table class="w-full text-neutral-300 divide-y divide-neutral-500!">
{#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]}
Expand Down
16 changes: 11 additions & 5 deletions src/components/SettingsView.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,10 +64,13 @@
/>

<Popup show={showPopup} label={$t("settings.button")}>
<button class="mr-2 my-1 float-right text-xl text-neutral-300" on:click={() => (showPopup = false)} aria-label={$t("settings.close")}>✕</button>
<h2 class="m-2 font-semibold text-xl text-neutral-300">{$t("settings.button")}</h2>
<svelte:fragment slot="header">
<button class="mr-2 my-1 float-right text-xl text-neutral-300" on:click={() => (showPopup = false)} aria-label={$t("settings.close")}>✕</button>
<h2 class="m-2 font-semibold text-xl text-neutral-300">{$t("settings.button")}</h2>
</svelte:fragment>

{#if $settings}
<div class="flex flex-row items-center m-2 space-x-2">
<div class="flex flex-row items-center mx-2 mb-2 space-x-2">
<label for="settings-language" class="text-neutral-400">{$t("settings.language")}</label>
<div class="select-wrapper">
<select bind:value={$settings.language} class="w-auto pr-10!" id="settings-language">
Expand Down Expand Up @@ -204,7 +207,10 @@
<span class="text-xs text-neutral-400">
{@html buildInfo}
</span>
<div class="absolute bottom-6 flex flex-row items-center text-sm text-neutral-400">
</div>

<svelte:fragment slot="footer">
<div class="flex flex-row items-center mt-4 text-sm text-neutral-400">
<span class="mr-1">
{$t("settings.footer.1")}
<button on:click={() => invoke("open_url", { url: "https://github.com/nekename/OpenDeck" })} class="underline">{$t("settings.footer.2")}</button>
Expand All @@ -217,5 +223,5 @@
<Heart weight="fill" fill="fuchsia" />
<span class="ml-1">{$t("settings.footer.5")}</span>
</div>
</div>
</svelte:fragment>
</Popup>