Skip to content

Commit 8e9feae

Browse files
xirrealxirreal
committed
external upload style fixes and delete no longer sends link
1 parent 095f0b9 commit 8e9feae

4 files changed

Lines changed: 116 additions & 74 deletions

File tree

‎plugins/externalUpload/index.jsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ export const settings = () => (
9191
Example CORS configuration:
9292
<br />
9393
<br />
94-
<pre style="background-color: var(--background-secondary); padding: 10px; border-radius: 8px;">
94+
<pre style="background: var(--background-code); border: 1px solid var(--border-normal); padding: 10px; border-radius: 4px;">
9595
<code>
9696
{`{
9797
"CORSRules": [
@@ -188,5 +188,7 @@ export const settings = () => (
188188
>
189189
Clear cached previews
190190
</Button>
191+
<br />
192+
<br />
191193
</>
192194
);

‎plugins/externalUpload/modal.jsx‎

Lines changed: 75 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,8 @@ export function UploadModal(closeModal) {
136136
setFetchingFiles(false);
137137
};
138138

139-
const handleDeleteFile = async (file) => {
139+
const handleDeleteFile = async (e, file) => {
140+
e.stopPropagation();
140141
await deleteFile(file.Key);
141142
await fetchDashboardFiles();
142143
};
@@ -237,76 +238,84 @@ export function UploadModal(closeModal) {
237238
</Show>
238239
<Show when={dashOpen()}>
239240
<ModalBody>
240-
<p>Total bucket usage: {formatFileSize(dashboardFiles().reduce((acc, file) => acc + file.Size, 0))}</p>
241-
<div class={styles.previewArea}>
242-
<For each={dashboardFiles()}>
243-
{(file) => {
244-
const extension = file.Key.split(".").pop();
245-
const isImage = ["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(extension);
246-
const isVideo = ["mp4", "webm"].includes(extension);
241+
<Show when={fetchingFiles()}>
242+
<p>Loading files...</p>
243+
</Show>
244+
<Show when={!fetchingFiles()}>
245+
<p>
246+
Total bucket usage: {formatFileSize(dashboardFiles().reduce((acc, file) => acc + file.Size, 0))}
247+
</p>
248+
<div class={styles.previewArea}>
249+
<For each={dashboardFiles()}>
250+
{(file) => {
251+
const extension = file.Key.split(".").pop();
252+
const isImage = ["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(extension);
253+
const isVideo = ["mp4", "webm"].includes(extension);
247254

248-
const [preview, setPreview] = createSignal(store.previews[file.Key]);
255+
const [preview, setPreview] = createSignal(store.previews[file.Key]);
249256

250-
if (!preview() && (isImage || isVideo)) {
251-
getFilePreview(file, isImage, isVideo, store.publicUrl).then((url) => {
252-
store.previews = { ...store.previews, [file.Key]: url };
253-
setPreview(url);
254-
});
255-
}
257+
if (!preview() && (isImage || isVideo)) {
258+
getFilePreview(file, isImage, isVideo, store.publicUrl).then((url) => {
259+
store.previews = { ...store.previews, [file.Key]: url };
260+
setPreview(url);
261+
});
262+
}
256263

257-
return (
258-
<div
259-
class={styles.dashboardItem}
260-
use:focusring
261-
onclick={() => {
262-
const fiber = getFiber(document.querySelector('[class*="slateContainer"]'));
263-
const editor = fiber.child.pendingProps.editor;
264+
return (
265+
<div
266+
class={styles.dashboardItem}
267+
use:focusring
268+
onclick={(e) => {
269+
e.stopPropagation();
270+
const fiber = getFiber(document.querySelector('[class*="slateContainer"]'));
271+
const editor = fiber.child.pendingProps.editor;
264272

265-
const url = getUrl(file, store.publicUrl);
266-
editor.insertText(url + " ");
267-
}}
268-
>
269-
{preview() && isImage && (
270-
<img src={preview()} alt={file.Key} class={styles.previewImage} />
271-
)}
272-
{preview() && isVideo && (
273-
<img src={preview()} alt={file.Key} class={styles.previewVideo} />
274-
)}
275-
{(!preview() || (!isImage && !isVideo)) && <div class={styles.previewIcon}>📄</div>}
276-
<div class={styles.previewItemInfo}>
277-
<p>{file.Key}</p>
278-
<p>{formatFileSize(file.Size)}</p>
279-
<p>{formatDate(file.LastModified)}</p>
273+
const url = getUrl(file, store.publicUrl);
274+
editor.insertText(url + " ");
275+
}}
276+
>
277+
{preview() && isImage && (
278+
<img src={preview()} alt={file.Key} class={styles.previewImage} />
279+
)}
280+
{preview() && isVideo && (
281+
<img src={preview()} alt={file.Key} class={styles.previewVideo} />
282+
)}
283+
{(!preview() || (!isImage && !isVideo)) && <div class={styles.previewIcon}>📄</div>}
284+
<div class={styles.previewItemInfo}>
285+
<p>{file.Key}</p>
286+
<p>{formatFileSize(file.Size)}</p>
287+
<p>{formatDate(file.LastModified)}</p>
288+
</div>
289+
<button class={styles.removeButton} onClick={(e) => handleDeleteFile(e, file)}>
290+
<svg
291+
aria-hidden="true"
292+
role="img"
293+
xmlns="http://www.w3.org/2000/svg"
294+
width="24"
295+
height="24"
296+
fill="none"
297+
viewBox="0 0 24 24"
298+
>
299+
<path
300+
fill="currentColor"
301+
d="M14.25 1c.41 0 .75.34.75.75V3h5.25c.41 0 .75.34.75.75v.5c0 .41-.34.75-.75.75H3.75A.75.75 0 0 1 3 4.25v-.5c0-.41.34-.75.75-.75H9V1.75c0-.41.34-.75.75-.75h4.5Z"
302+
class=""
303+
></path>
304+
<path
305+
fill="currentColor"
306+
fill-rule="evenodd"
307+
d="M5.06 7a1 1 0 0 0-1 1.06l.76 12.13a3 3 0 0 0 3 2.81h8.36a3 3 0 0 0 3-2.81l.75-12.13a1 1 0 0 0-1-1.06H5.07ZM11 12a1 1 0 1 0-2 0v6a1 1 0 1 0 2 0v-6Zm3-1a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0v-6a1 1 0 0 1 1-1Z"
308+
clip-rule="evenodd"
309+
class=""
310+
></path>
311+
</svg>
312+
</button>
280313
</div>
281-
<button class={styles.removeButton} onClick={() => handleDeleteFile(file)}>
282-
<svg
283-
aria-hidden="true"
284-
role="img"
285-
xmlns="http://www.w3.org/2000/svg"
286-
width="24"
287-
height="24"
288-
fill="none"
289-
viewBox="0 0 24 24"
290-
>
291-
<path
292-
fill="currentColor"
293-
d="M14.25 1c.41 0 .75.34.75.75V3h5.25c.41 0 .75.34.75.75v.5c0 .41-.34.75-.75.75H3.75A.75.75 0 0 1 3 4.25v-.5c0-.41.34-.75.75-.75H9V1.75c0-.41.34-.75.75-.75h4.5Z"
294-
class=""
295-
></path>
296-
<path
297-
fill="currentColor"
298-
fill-rule="evenodd"
299-
d="M5.06 7a1 1 0 0 0-1 1.06l.76 12.13a3 3 0 0 0 3 2.81h8.36a3 3 0 0 0 3-2.81l.75-12.13a1 1 0 0 0-1-1.06H5.07ZM11 12a1 1 0 1 0-2 0v6a1 1 0 1 0 2 0v-6Zm3-1a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0v-6a1 1 0 0 1 1-1Z"
300-
clip-rule="evenodd"
301-
class=""
302-
></path>
303-
</svg>
304-
</button>
305-
</div>
306-
);
307-
}}
308-
</For>
309-
</div>
314+
);
315+
}}
316+
</For>
317+
</div>
318+
</Show>
310319
</ModalBody>
311320
</Show>
312321
<ModalFooter>

‎plugins/externalUpload/modal.jsx.scss‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,12 +56,13 @@
5656
flex-direction: column;
5757
align-items: center;
5858
justify-content: space-between;
59-
border: 1px solid var(--background-tertiary);
60-
background-color: var(--background-secondary);
59+
border: 1px solid var(--border-subtle);
60+
background-color: var(--background-surface-highest);
6161
border-radius: 8px;
6262
padding: 8px;
6363
overflow: hidden;
6464
transition: all 0.3s ease;
65+
margin-left: -3px;
6566
}
6667

6768
.dashboardItem {
@@ -100,7 +101,8 @@
100101
padding: 4px 5px 1px 5px;
101102
font-size: 12px;
102103
color: var(--status-danger);
103-
background-color: color-mix(in srgb, var(--background-tertiary) 80%, transparent);
104+
border: 1px solid color-mix(in srgb, var(--border-subtle) 30%, transparent);
105+
background-color: color-mix(in srgb, color-mix(in srgb, var(--status-danger) 40%, var(--background-surface-high)) 40%, transparent);
104106
backdrop-filter: blur(4px);
105107
border-radius: 8px;
106108
cursor: pointer;

‎plugins/favoriteSearch/index.jsx‎

Lines changed: 33 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ const {
55

66
const {
77
ui: { TextBox, openModal, CheckboxItem, ReactiveRoot },
8-
solid: { createSignal, createEffect },
8+
solid: { createSignal, createEffect, onCleanup },
99
util: { getFiberOwner, getFiber, reactFiberWalker },
1010
plugin: { store },
1111
} = shelter;
@@ -32,7 +32,20 @@ function SearchBar() {
3232
const [counter, setCounter] = createSignal(fiber.props.favorites.length.toString());
3333
const total = fiber.props.favorites.length;
3434

35-
createEffect(() => {
35+
if (!fiber.props.__favorites) {
36+
Object.defineProperty(fiber.props, "__favorites", {
37+
get: () => fiber.props.favorites,
38+
set: (value) => {
39+
console.log("Favorites updated:", value);
40+
fiber.props.favorites = value;
41+
},
42+
});
43+
fiber.props.__favorites = fiber.props.favorites;
44+
console.log("Initialized __favorites with current favorites.");
45+
}
46+
47+
function update() {
48+
console.log(fiber.props.__favorites);
3649
if (!fiber.props.__favorites) {
3750
fiber.props.__favorites = fiber.props.favorites;
3851
}
@@ -57,6 +70,16 @@ function SearchBar() {
5770
setCounter(fiber.props.favorites.length.toString());
5871

5972
fiber.forceUpdate();
73+
}
74+
75+
createEffect(update);
76+
77+
const stopObserving = observeDom("#gif-picker-tab-panel", () => {
78+
setTimeout(update, 100);
79+
});
80+
81+
onCleanup(() => {
82+
stopObserving();
6083
});
6184

6285
return (
@@ -87,7 +110,13 @@ function handleClick() {
87110
requestAnimationFrame(() => {
88111
const header = document.querySelector("#gif-picker-tab-panel > div:first-child");
89112
if (!header) return;
90-
header.appendChild(<SearchBar />);
113+
header.appendChild(
114+
<div id="shltr-gifsearch-container">
115+
<ReactiveRoot>
116+
<SearchBar />
117+
</ReactiveRoot>
118+
</div>,
119+
);
91120

92121
stopObservingResults = observeDom("[class^='content'] > div > [class^='result_']", (card) => {
93122
if (card.dataset.addedRightClick) return;
@@ -99,7 +128,7 @@ function handleClick() {
99128
}
100129

101130
function handleBack() {
102-
document.getElementById(classes.searchBar)?.remove();
131+
document.getElementById("shltr-gifsearch-container")?.remove();
103132
if (stopObservingResults) {
104133
stopObservingResults();
105134
stopObservingResults = null;

0 commit comments

Comments
 (0)