JohnCosta27/Haystack
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat: styling

Browse Source
This commit is contained in:
John Costa
2025-07-02 14:24:17 +01:00
parent 6482a76a51
commit a4a8c191b6
1 changed files with 12 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/src/notifications/ProcessingImages.tsx
View File

@ -2,15 +2,16 @@ import { Popover } from "@kobalte/core/popover";
import { type Component, For, Show } from "solid-js"; import { type Component, For, Show } from "solid-js";
import { base } from "../network"; import { base } from "../network";
import { useNotifications } from "../ProtectedRoute"; import { useNotifications } from "../ProtectedRoute";
import { useSearchImageContext } from "../contexts/SearchImageContext";
const LoadingCircle: Component<{ status: "loading" | "complete" }> = ( const LoadingCircle: Component<{
props, status: "loading" | "complete";
) => { class?: string;
}> = (props) => {
switch (props.status) { switch (props.status) {
case "loading": case "loading":
return ( return (
<svg <svg
class={props.class}
width="24" width="24"
height="24" height="24"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -29,6 +30,7 @@ const LoadingCircle: Component<{ status: "loading" | "complete" }> = (
case "complete": case "complete":
return ( return (
<svg <svg
class={props.class}
width="24" width="24"
height="24" height="24"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -51,7 +53,7 @@ export const ProcessingImages: Component = () => {
const notifications = useNotifications(); const notifications = useNotifications();
return ( return (
<Popover> <Popover sameWidth gutter={4}>
<Popover.Trigger class="w-full flex justify-between rounded-xl bg-slate-800 text-gray-100 px-4 py-2"> <Popover.Trigger class="w-full flex justify-between rounded-xl bg-slate-800 text-gray-100 px-4 py-2">
<p class="text-md">Processing Images</p> <p class="text-md">Processing Images</p>
<Show <Show
@ -61,12 +63,12 @@ export const ProcessingImages: Component = () => {
<LoadingCircle status="complete" /> <LoadingCircle status="complete" />
</Show> </Show>
</Popover.Trigger> </Popover.Trigger>
<Popover.Content class="w-96 flex flex-col gap-2 bg-slate-800 rounded-xl"> <Popover.Content class="shadow-2xl flex flex-col gap-2 bg-slate-800 rounded-xl">
<For each={Object.entries(notifications.state.ProcessingImages)}> <For each={Object.entries(notifications.state.ProcessingImages)}>
{([id, _image]) => ( {([id, _image]) => (
<Show when={_image}> <Show when={_image}>
{(image) => ( {(image) => (
<div class="flex gap-2"> <div class="flex gap-2 w-full justify-center">
<img <img
class="w-16 h-16 aspect-square" class="w-16 h-16 aspect-square"
alt="processing" alt="processing"
@ -75,6 +77,9 @@ export const ProcessingImages: Component = () => {
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">
<p class="text-slate-100">{image().ImageName}</p> <p class="text-slate-100">{image().ImageName}</p>
</div> </div>
<div class="ml-auto px-4 py-2 flex place-items-center">
<LoadingCircle status="loading" class="ml-auto" />
</div>
</div> </div>
)} )}
</Show> </Show>