jcreek/LivingDexTracker
1
0
Fork 0
mirror of https://github.com/jcreek/LivingDexTracker.git synced 2026-07-13 19:13:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(#57): Replace 'mark box as' buttons with dropdown for better ux

Browse Source
This commit is contained in:
Josh Creek
2026-01-09 22:21:01 +00:00
parent cbece0ec22
commit cb0773b03e
1 changed files with 91 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/pokedex/PokedexViewBoxes.svelte
+91 -16
View File
@@ -25,6 +25,17 @@
let filterInHome = false; let filterInHome = false;
let filterNotInHome = false; let filterNotInHome = false;
// Bulk actions menu state (one open menu at a time)
let openBulkMenuForBox: number | null = null;
onMount(() => {
const close = () => {
openBulkMenuForBox = null;
};
window.addEventListener('click', close);
return () => window.removeEventListener('click', close);
});
let filteredCombinedData: CombinedData[] = []; let filteredCombinedData: CombinedData[] = [];
let filteredTotal = 0; let filteredTotal = 0;
let overallTotal = 0; let overallTotal = 0;
@@ -336,22 +347,86 @@
> >
{#each boxNumbers as boxNumber} {#each boxNumbers as boxNumber}
<div class="mb-8"> <div class="mb-8">
<h2 class="text-xl font-bold mb-4">Box {boxNumber}</h2> <div class="flex flex-wrap items-center justify-between gap-3 mb-4 relative z-20">
<button class="btn" on:click={() => markBoxAsNotCaught(boxNumber)}> <h2 class="text-xl font-bold">Box {boxNumber}</h2>
Mark box as not 'caught' <div class="relative" on:click|stopPropagation>
</button> <button
<button class="btn" on:click={() => markBoxAsCaught(boxNumber)}> type="button"
Mark box as 'caught' class="btn btn-sm btn-outline relative z-[210]"
</button> aria-label="Open bulk actions menu"
<button class="btn" on:click={() => markBoxAsNeedsToEvolve(boxNumber)}> aria-haspopup="menu"
Mark box as 'needs to evolve' aria-expanded={openBulkMenuForBox === boxNumber}
</button> on:click={(event) => {
<button class="btn" on:click={() => markBoxAsInHome(boxNumber)}> event.stopPropagation();
Mark box as 'in Home' openBulkMenuForBox = openBulkMenuForBox === boxNumber ? null : boxNumber;
</button> }}
<button class="btn" on:click={() => markBoxAsNotInHome(boxNumber)}> on:keydown={(event) => {
Mark box as not 'in Home' if (event.key === 'Escape') openBulkMenuForBox = null;
</button> }}
>
⋯
</button>
{#if openBulkMenuForBox === boxNumber}
<ul
class="menu bg-base-100 rounded-box absolute right-0 mt-2 z-[220] w-56 p-2 shadow border border-base-300"
role="menu"
on:click|stopPropagation
>
<li>
<button
on:click={() => {
markBoxAsNotCaught(boxNumber);
openBulkMenuForBox = null;
}}
>
Mark box as Not caught
</button>
</li>
<li>
<button
on:click={() => {
markBoxAsCaught(boxNumber);
openBulkMenuForBox = null;
}}
>
Mark box as Caught
</button>
</li>
<li>
<button
on:click={() => {
markBoxAsNeedsToEvolve(boxNumber);
openBulkMenuForBox = null;
}}
>
Mark box as Needs to evolve
</button>
</li>
<li>
<button
on:click={() => {
markBoxAsInHome(boxNumber);
openBulkMenuForBox = null;
}}
>
Mark box as In HOME
</button>
</li>
<li>
<button
on:click={() => {
markBoxAsNotInHome(boxNumber);
openBulkMenuForBox = null;
}}
>
Mark box as Not in HOME
</button>
</li>
</ul>
{/if}
</div>
</div>
<div class="grid grid-cols-6"> <div class="grid grid-cols-6">
{#each combinedData as { pokedexEntry, catchRecord }, index} {#each combinedData as { pokedexEntry, catchRecord }, index}
{@const placement = calculateBoxPlacement(index)} {@const placement = calculateBoxPlacement(index)}