yadunut/clan-core
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

UI: machine listitem pepare for grid view

Browse Source
This commit is contained in:
Johannes Kirschbauer
2024-12-11 11:32:10 +01:00
parent cfba2e2288
commit 131ed69d53
1 changed files with 95 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

195
pkgs/webview-ui/app/src/components/MachineListItem.tsx
View File

@@ -106,109 +106,104 @@ export const MachineListItem = (props: MachineListItemProps) => {
setUpdating(false); setUpdating(false);
}; };
return ( return (
<li> <div class="card card-side m-2">
<div class="card card-side m-2"> <figure class="h-fit rounded-xl border bg-def-2 border-def-5">
<figure class="h-fit rounded-xl border bg-def-2 border-def-5"> <RndThumbnail name={name} width={220} height={120} />
<RndThumbnail name={name} width={220} height={120} /> </figure>
</figure> <div class="card-body flex-row justify-between ">
<div class="card-body flex-row justify-between "> <div class="flex flex-col">
<div class="flex flex-col"> <A href={`/machines/${name}`}>
<A href={`/machines/${name}`}> <h2
<h2 class="card-title underline"
class="card-title underline" classList={{
classList={{ "text-neutral-500": nixOnly,
"text-neutral-500": nixOnly, }}
}}
>
{name}
</h2>
</A>
<div class="text-slate-600">
<Show when={info}>{(d) => d()?.description}</Show>
</div>
<div class="text-slate-600">
<Show when={info}>
{(d) => (
<>
<Show when={d().tags}>
{(tags) => (
<span class="flex gap-1">
<For each={tags()}>
{(tag) => (
<button
type="button"
onClick={() =>
props.setFilter((prev) => {
if (prev.tags.includes(tag)) {
return prev;
}
return {
...prev,
tags: [...prev.tags, tag],
};
})
}
>
<span class="rounded-full px-3 py-1 bg-inv-4 fg-inv-1">
{tag}
</span>
</button>
)}
</For>
</span>
)}
</Show>
{d()?.deploy?.targetHost}
</>
)}
</Show>
</div>
<div class="flex flex-row flex-wrap gap-4 py-2"></div>
</div>
<div>
<Menu
popoverid={`menu-${props.name}`}
label={<Icon icon={"More"} />}
> >
<ul class="menu z-[1] w-52 rounded-box bg-base-100 p-2 shadow"> {name}
<li> </h2>
<a </A>
onClick={() => { <div class="text-slate-600">
navigate("/machines/" + name); <Show when={info}>{(d) => d()?.description}</Show>
}}
>
Details
</a>
</li>
<li
classList={{
disabled: !info?.deploy?.targetHost || installing(),
}}
onClick={handleInstall}
>
<a>
<Show when={info?.deploy?.targetHost} fallback={"Deploy"}>
{(d) => `Install to ${d()}`}
</Show>
</a>
</li>
<li
classList={{
disabled: !info?.deploy?.targetHost || updating(),
}}
onClick={handleUpdate}
>
<a>
<Show when={info?.deploy?.targetHost} fallback={"Deploy"}>
{(d) => `Update (${d()})`}
</Show>
</a>
</li>
</ul>
</Menu>
</div> </div>
<div class="text-slate-600">
<Show when={info}>
{(d) => (
<>
<Show when={d().tags}>
{(tags) => (
<span class="flex gap-1">
<For each={tags()}>
{(tag) => (
<button
type="button"
onClick={() =>
props.setFilter((prev) => {
if (prev.tags.includes(tag)) {
return prev;
}
return {
...prev,
tags: [...prev.tags, tag],
};
})
}
>
<span class="rounded-full px-3 py-1 bg-inv-4 fg-inv-1">
{tag}
</span>
</button>
)}
</For>
</span>
)}
</Show>
{d()?.deploy?.targetHost}
</>
)}
</Show>
</div>
<div class="flex flex-row flex-wrap gap-4 py-2"></div>
</div>
<div>
<Menu popoverid={`menu-${props.name}`} label={<Icon icon={"More"} />}>
<ul class="menu z-[1] w-52 rounded-box bg-base-100 p-2 shadow">
<li>
<a
onClick={() => {
navigate("/machines/" + name);
}}
>
Details
</a>
</li>
<li
classList={{
disabled: !info?.deploy?.targetHost || installing(),
}}
onClick={handleInstall}
>
<a>
<Show when={info?.deploy?.targetHost} fallback={"Deploy"}>
{(d) => `Install to ${d()}`}
</Show>
</a>
</li>
<li
classList={{
disabled: !info?.deploy?.targetHost || updating(),
}}
onClick={handleUpdate}
>
<a>
<Show when={info?.deploy?.targetHost} fallback={"Deploy"}>
{(d) => `Update (${d()})`}
</Show>
</a>
</li>
</ul>
</Menu>
</div> </div>
</div> </div>
</li> </div>
); );
}; };