forked from
pds.ls/pdsls
this repo has no description
collection filter styling (#46)
* collection filter background on scroll
* buttons styling
* naming
* prettier
* oops
+68
-7
+65
-6
src/views/collection.tsx
+65
-6
src/views/collection.tsx
···
3
3
import { $type, ActorIdentifier, InferXRPCBodyOutput } from "@atcute/lexicons";
4
4
import * as TID from "@atcute/tid";
5
5
import { A, useParams } from "@solidjs/router";
6
-
import { createEffect, createResource, createSignal, For, Show, untrack } from "solid-js";
6
+
import {
7
+
createEffect,
8
+
createResource,
9
+
createSignal,
10
+
For,
11
+
onCleanup,
12
+
onMount,
13
+
Show,
14
+
untrack,
15
+
} from "solid-js";
7
16
import { createStore } from "solid-js/store";
8
-
import { Button } from "../components/button.jsx";
17
+
import { Button, type ButtonProps } from "../components/button.jsx";
9
18
import { JSONType, JSONValue } from "../components/json.jsx";
10
19
import { agent } from "../components/login.jsx";
11
20
import { TextInput } from "../components/text-input.jsx";
···
72
81
const [batchDelete, setBatchDelete] = createSignal(false);
73
82
const [lastSelected, setLastSelected] = createSignal<number>();
74
83
const [reverse, setReverse] = createSignal(false);
84
+
const [filterStuck, setFilterStuck] = createSignal(false);
75
85
const did = params.repo;
76
86
let pds: string;
77
87
let rpc: Client;
88
+
let sticky!: HTMLDivElement;
78
89
79
90
const fetchRecords = async () => {
80
91
if (!pds) pds = await resolvePDS(did);
···
157
168
true,
158
169
);
159
170
171
+
const FilterButton = (props: ButtonProps) => {
172
+
return (
173
+
<Button
174
+
class="flex items-center gap-1 rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1.5 text-xs font-semibold shadow-md dark:border-neutral-700"
175
+
classList={{
176
+
"dark:bg-dark-300 dark:hover:bg-dark-100 dark:active:bg-dark-100 bg-white hover:bg-neutral-50 active:bg-neutral-50":
177
+
!filterStuck(),
178
+
"dark:bg-dark-100 dark:hover:bg-dark-50 dark:active:bg-dark-50 bg-neutral-50 hover:bg-neutral-200 active:bg-neutral-200":
179
+
filterStuck(),
180
+
}}
181
+
{...props}
182
+
/>
183
+
);
184
+
};
185
+
186
+
onMount(() => {
187
+
let ticking = false;
188
+
const tick = () => {
189
+
const topPx = parseFloat(getComputedStyle(sticky).top);
190
+
const { top } = sticky.getBoundingClientRect();
191
+
setFilterStuck(top <= topPx + 0.5);
192
+
ticking = false;
193
+
};
194
+
195
+
const onScroll = () => {
196
+
if (!ticking) {
197
+
ticking = true;
198
+
requestAnimationFrame(tick);
199
+
}
200
+
};
201
+
202
+
window.addEventListener("scroll", onScroll, { passive: true });
203
+
204
+
tick();
205
+
206
+
onCleanup(() => {
207
+
window.removeEventListener("scroll", onScroll);
208
+
});
209
+
});
210
+
160
211
return (
161
212
<Show when={records.length || response()}>
162
213
<div class="flex w-full flex-col items-center">
163
-
<div class="dark:bg-dark-500 sticky top-0 z-5 flex w-screen flex-col items-center justify-center gap-2 bg-neutral-100 pt-1 pb-3">
214
+
<div
215
+
ref={(el) => (sticky = el)}
216
+
class="sticky top-2 z-10 flex flex-col items-center justify-center gap-2 rounded-lg p-3 transition-colors"
217
+
classList={{
218
+
"bg-neutral-50 dark:bg-dark-300 border-[0.5px] border-neutral-300 dark:border-neutral-700 shadow-md":
219
+
filterStuck(),
220
+
"bg-transparent border-transparent shadow-none -mt-2": !filterStuck(),
221
+
}}
222
+
>
164
223
<div class="flex w-[22rem] items-center gap-2 sm:w-[24rem]">
165
224
<Show when={agent() && agent()?.sub === did}>
166
225
<div class="flex items-center gap-x-2">
···
221
280
</div>
222
281
<Show when={records.length > 1}>
223
282
<div class="flex w-[22rem] items-center justify-between gap-x-2 sm:w-[24rem]">
224
-
<Button
283
+
<FilterButton
225
284
onClick={() => {
226
285
setReverse(!reverse());
227
286
setRecords([]);
···
233
292
class={`iconify ${reverse() ? "lucide--rotate-ccw" : "lucide--rotate-cw"} text-sm`}
234
293
></span>
235
294
Reverse
236
-
</Button>
295
+
</FilterButton>
237
296
<div>
238
297
<Show when={batchDelete()}>
239
298
<span>{records.filter((rec) => rec.toDelete).length}</span>
···
244
303
<div class="flex w-[5rem] items-center justify-end">
245
304
<Show when={cursor()}>
246
305
<Show when={!response.loading}>
247
-
<Button onClick={() => refetch()}>Load More</Button>
306
+
<FilterButton onClick={() => refetch()}>Load More</FilterButton>
248
307
</Show>
249
308
<Show when={response.loading}>
250
309
<div class="iconify lucide--loader-circle w-[5rem] animate-spin text-xl" />