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

Merge pull request #74 from jcreek/57-replace-many-buttons-with-toggles

Browse Source 
feat(#57): Replace 'mark box as' buttons with dropdown for better ux
This commit is contained in:
Josh Creek
2026-01-10 10:15:01 +00:00
committed by GitHub
parent cbece0ec22 789321ce03
commit fc09b5f2f1
1 changed files with 98 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/pokedex/PokedexViewBoxes.svelte
+98 -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;
@@ -335,23 +346,94 @@
style="--boxes-per-row: {boxesPerRow}; --cell-padding: {cellPaddingRem}rem; --sprite-size: {spriteSizePx}px;" style="--boxes-per-row: {boxesPerRow}; --cell-padding: {cellPaddingRem}rem; --sprite-size: {spriteSizePx}px;"
> >
{#each boxNumbers as boxNumber} {#each boxNumbers as boxNumber}
{@const bulkMenuId = `box-${boxNumber}-bulk-menu`}
<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-controls={bulkMenuId}
</button> aria-expanded={openBulkMenuForBox === boxNumber}
<button class="btn" on:click={() => markBoxAsInHome(boxNumber)}> on:click={(event) => {
Mark box as 'in Home' event.stopPropagation();
</button> openBulkMenuForBox = openBulkMenuForBox === boxNumber ? null : boxNumber;
<button class="btn" on:click={() => markBoxAsNotInHome(boxNumber)}> }}
Mark box as not 'in Home' on:keydown={(event) => {
</button> if (event.key === 'Escape') openBulkMenuForBox = null;
}}
>
⋯
</button>
{#if openBulkMenuForBox === boxNumber}
<ul
id={bulkMenuId}
class="menu bg-base-100 rounded-box absolute right-0 mt-2 z-[220] w-56 p-2 shadow border border-base-300"
on:click|stopPropagation
>
<li>
<button
type="button"
on:click={() => {
markBoxAsNotCaught(boxNumber);
openBulkMenuForBox = null;
}}
>
Mark box as Not caught
</button>
</li>
<li>
<button
type="button"
on:click={() => {
markBoxAsCaught(boxNumber);
openBulkMenuForBox = null;
}}
>
Mark box as Caught
</button>
</li>
<li>
<button
type="button"
on:click={() => {
markBoxAsNeedsToEvolve(boxNumber);
openBulkMenuForBox = null;
}}
>
Mark box as Needs to evolve
</button>
</li>
<li>
<button
type="button"
on:click={() => {
markBoxAsInHome(boxNumber);
openBulkMenuForBox = null;
}}
>
Mark box as In HOME
</button>
</li>
<li>
<button
type="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)}