forked from
pds.ls/pdsls
atmosphere explorer
change batch selection UI
+37
-24
+37
-24
src/views/collection.tsx
+37
-24
src/views/collection.tsx
···
56
56
57
57
return (
58
58
<span
59
-
class="relative flex w-full min-w-0 items-baseline rounded p-0.5 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
59
+
class="relative flex w-full min-w-0 items-baseline rounded p-0.5"
60
60
ref={rkeyRef}
61
61
onmouseover={() => !isTouchDevice && setHover(true)}
62
62
onmouseleave={() => !isTouchDevice && setHover(false)}
···
361
361
}}
362
362
>
363
363
<span
364
-
class={`iconify ${reverse() ? "lucide--rotate-ccw" : "lucide--rotate-cw"}`}
364
+
class={`iconify ${reverse() ? "lucide--clock-arrow-down" : "lucide--clock-arrow-up"}`}
365
365
></span>
366
366
Reverse
367
367
</Button>
···
388
388
</StickyOverlay>
389
389
<div class="flex max-w-full flex-col px-2 font-mono">
390
390
<For each={filteredRecords()}>
391
-
{(record, index) => (
392
-
<>
393
-
<Show when={batchDelete()}>
394
-
<label
395
-
class="flex items-center gap-1 select-none"
396
-
onclick={(e) => handleSelectionClick(e, index())}
397
-
>
398
-
<input
399
-
type="checkbox"
400
-
checked={record.toDelete}
401
-
onchange={(e) => setRecords(index(), "toDelete", e.currentTarget.checked)}
402
-
/>
403
-
<RecordLink record={record} />
404
-
</label>
405
-
</Show>
406
-
<Show when={!batchDelete()}>
407
-
<A href={`/at://${did}/${params.collection}/${record.rkey}`} class="select-none">
408
-
<RecordLink record={record} />
409
-
</A>
410
-
</Show>
411
-
</>
412
-
)}
391
+
{(record, index) => {
392
+
const rounding = () => {
393
+
const recs = filteredRecords();
394
+
const prevSelected = recs[index() - 1]?.toDelete;
395
+
const nextSelected = recs[index() + 1]?.toDelete;
396
+
return `${!prevSelected ? "rounded-t" : ""} ${!nextSelected ? "rounded-b" : ""}`;
397
+
};
398
+
return (
399
+
<>
400
+
<Show when={batchDelete()}>
401
+
<div
402
+
class={`select-none ${
403
+
record.toDelete ?
404
+
`bg-blue-200 hover:bg-blue-300/80 active:bg-blue-300 dark:bg-blue-700/30 dark:hover:bg-blue-700/50 dark:active:bg-blue-700/70 ${rounding()}`
405
+
: "rounded hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
406
+
}`}
407
+
onclick={(e) => {
408
+
handleSelectionClick(e, index());
409
+
setRecords(index(), "toDelete", !record.toDelete);
410
+
}}
411
+
>
412
+
<RecordLink record={record} />
413
+
</div>
414
+
</Show>
415
+
<Show when={!batchDelete()}>
416
+
<A
417
+
href={`/at://${did}/${params.collection}/${record.rkey}`}
418
+
class="rounded select-none hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
419
+
>
420
+
<RecordLink record={record} />
421
+
</A>
422
+
</Show>
423
+
</>
424
+
);
425
+
}}
413
426
</For>
414
427
</div>
415
428
</div>