forked from
pds.ls/pdsls
this repo has no description
new delete button
+23
-38
+23
-38
src/views/record.tsx
+23
-38
src/views/record.tsx
···
1
1
import { CredentialManager, Client } from "@atcute/client";
2
2
3
3
import { query, useParams } from "@solidjs/router";
4
-
import { createEffect, createSignal, onCleanup, onMount, Show } from "solid-js";
4
+
import { createSignal, onCleanup, onMount, Show } from "solid-js";
5
5
6
6
import { Backlinks } from "../components/backlinks.jsx";
7
7
import { JSONValue } from "../components/json.jsx";
···
28
28
target: string;
29
29
}>();
30
30
const [modal, setModal] = createSignal<HTMLDialogElement>();
31
+
const [deleteIcon, setDeleteIcon] = createSignal<HTMLButtonElement>();
31
32
const [openDelete, setOpenDelete] = createSignal(false);
32
33
const [notice, setNotice] = createSignal("");
33
34
const [showBacklinks, setShowBacklinks] = createSignal(false);
···
38
39
let rpc: Client;
39
40
40
41
const clickEvent = (event: MouseEvent) => {
41
-
if (modal() && event.target == modal()) setOpenDelete(false);
42
+
if (modal() && event.target !== modal() && event.target !== deleteIcon()) setOpenDelete(false);
42
43
};
43
44
const keyEvent = (event: KeyboardEvent) => {
44
-
if (modal() && event.key == "Escape") setOpenDelete(false);
45
+
if (modal() && event.key === "Escape") setOpenDelete(false);
45
46
};
46
47
47
48
onMount(async () => {
···
132
133
window.location.href = `/at://${params.repo}/${params.collection}`;
133
134
};
134
135
135
-
createEffect(() => {
136
-
if (openDelete()) document.body.style.overflow = "hidden";
137
-
else document.body.style.overflow = "auto";
138
-
});
139
-
140
136
const checkUri = (uri: string) => {
141
137
const uriParts = uri.split("/"); // expected: ["at:", "", "repo", "collection", "rkey"]
142
138
if (uriParts.length != 5) return undefined;
···
169
165
</Tooltip>
170
166
<Show when={loginState() && agent.sub === record()?.uri.split("/")[2]}>
171
167
<RecordEditor create={false} record={record()?.value} />
172
-
<Show when={openDelete()}>
173
-
<dialog
174
-
ref={setModal}
175
-
class="backdrop-brightness-60 fixed left-0 top-0 z-20 flex h-screen w-screen items-center justify-center bg-transparent"
176
-
>
177
-
<div class="dark:bg-dark-400 rounded-md border border-slate-900 bg-zinc-100 p-4 text-slate-900 dark:border-slate-100 dark:text-slate-100">
178
-
<h3 class="text-lg font-bold">Delete this record?</h3>
179
-
<form>
180
-
<div class="mt-2 inline-flex gap-2">
181
-
<button
182
-
onclick={() => setOpenDelete(false)}
183
-
class="dark:bg-dark-900 dark:hover:bg-dark-300 bg-light-100 rounded-lg border border-slate-400 px-2.5 py-1.5 text-sm font-bold hover:bg-zinc-200 focus:outline-none focus:ring-1 focus:ring-slate-700 dark:focus:ring-slate-300"
184
-
>
185
-
Cancel
186
-
</button>
187
-
<button
188
-
type="button"
189
-
onclick={deleteRecord}
190
-
class="rounded-lg bg-red-500 px-2.5 py-1.5 text-sm font-bold text-slate-100 hover:bg-red-400 focus:outline-none focus:ring-1 focus:ring-slate-700 dark:bg-red-600 dark:hover:bg-red-500 dark:focus:ring-slate-300"
191
-
>
192
-
Delete
193
-
</button>
194
-
</div>
195
-
</form>
196
-
</div>
197
-
</dialog>
198
-
</Show>
199
-
<Tooltip text="Delete">
200
-
<button onclick={() => setOpenDelete(true)} class="i-lucide-trash-2 text-xl" />
201
-
</Tooltip>
168
+
<div class="relative flex">
169
+
<Tooltip text="Delete">
170
+
<button
171
+
ref={setDeleteIcon}
172
+
onclick={() => setOpenDelete(true)}
173
+
class="i-lucide-trash-2 text-xl"
174
+
/>
175
+
</Tooltip>
176
+
<Show when={openDelete()}>
177
+
<button
178
+
ref={setModal}
179
+
type="button"
180
+
onclick={deleteRecord}
181
+
class="left-50% w-7rem absolute top-7 z-50 -translate-x-1/2 rounded-lg bg-red-500 px-2 py-1.5 text-sm font-bold text-slate-100 shadow-lg hover:bg-red-400 focus:outline-none focus:ring-1 focus:ring-slate-700 dark:bg-red-600 dark:hover:bg-red-500 dark:focus:ring-slate-300"
182
+
>
183
+
Delete record
184
+
</button>
185
+
</Show>
186
+
</div>
202
187
</Show>
203
188
<Show when={externalLink()}>
204
189
{(externalLink) => (