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

UI/treewide: replace all {button,icon} component

Browse Source
This commit is contained in:
Johannes Kirschbauer
2024-11-27 10:05:54 +01:00
parent cc84a53b6d
commit e7a9344665
22 changed files with 272 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
pkgs/webview-ui/app/src/Form/form/index.tsx
View File

@@ -35,6 +35,8 @@ import {
import cx from "classnames";
import { Label } from "../base/label";
import { SelectInput } from "../fields/Select";
import { Button } from "@/src/components/button";
import Icon from "@/src/components/icon";
function generateDefaults(schema: JSONSchema7): unknown {
switch (schema.type) {
@@ -385,15 +387,25 @@ export function ListValueDisplay<T extends FieldValues, R extends ResponseData>(
<div class="flex w-full items-end gap-2 px-4">
{props.children}
<div class="ml-4 min-w-fit pb-4">
<button class="btn" onClick={moveItemBy(1)} disabled={topMost()}>
↓
</button>
<button class="btn" onClick={moveItemBy(-1)} disabled={bottomMost()}>
↑
</button>
<button class="btn btn-error" onClick={removeItem}>
x
</button>
<Button
variant="light"
onClick={moveItemBy(1)}
disabled={topMost()}
startIcon={<Icon icon="ArrowBottom" />}
class="h-12"
></Button>
<Button
variant="light"
onClick={moveItemBy(-1)}
disabled={bottomMost()}
class="h-12"
startIcon={<Icon icon="ArrowTop" />}
></Button>
<Button
class="h-12"
startIcon={<Icon icon="Trash" />}
onClick={removeItem}
></Button>
</div>
</div>
</div>
@@ -641,7 +653,14 @@ export function ArrayFields<T extends FieldValues, R extends ResponseData>(
}}
// Button for adding new items
components={{
before: <button class="btn">Add ↑</button>,
before: (
<Button
variant="light"
endIcon={<Icon icon={"Plus"} />}
>
Add
</Button>
),
}}
// Add the new item to the FieldArray
handleSubmit={(values, event) => {
@@ -827,8 +846,10 @@ export function ObjectFields<T extends FieldValues, R extends ResponseData>(
<span class="text-xl font-semibold">
{key}
</span>
<button
class="btn btn-warning btn-sm ml-auto"
<Button
variant="light"
class="ml-auto"
size="s"
type="button"
onClick={(_e) => {
const copy = {
@@ -845,8 +866,8 @@ export function ObjectFields<T extends FieldValues, R extends ResponseData>(
);
}}
>
Remove
</button>
<Icon icon="Trash" />
</Button>
</div>
),
}}

2
pkgs/webview-ui/app/src/components/BackButton.tsx
View File

@@ -9,7 +9,7 @@ export const BackButton = () => {
variant="light"
class="w-fit"
onClick={() => navigate(-1)}
startIcon={<Icon icon="ArrowLeft" />}
startIcon={<Icon icon="CaretRight" />}
></Button>
);
};

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

@@ -5,6 +5,7 @@ import { activeURI } from "../App";
import toast from "solid-toast";
import { A, useNavigate } from "@solidjs/router";
import { RndThumbnail } from "./noiseThumbnail";
import Icon from "./icon";
type MachineDetails = SuccessQuery<"list_inventory_machines">["data"][string];
@@ -138,7 +139,7 @@ export const MachineListItem = (props: MachineListItemProps) => {
<div>
<Menu
popoverid={`menu-${props.name}`}
label={<span class="material-icons">more_vert</span>}
label={<Icon icon={"Expand"} />}
>
<ul class="menu z-[1] w-52 rounded-box bg-base-100 p-2 shadow">
<li>

6
pkgs/webview-ui/app/src/components/Menu.tsx
View File

@@ -9,6 +9,7 @@ import {
shift,
} from "@floating-ui/dom";
import cx from "classnames";
import { Button } from "./button";
interface MenuProps {
/**
@@ -53,7 +54,8 @@ export const Menu = (props: MenuProps) => {
return (
<div>
<button
<Button
variant="light"
popovertarget={props.popoverid}
popovertargetaction="toggle"
ref={setReference}
@@ -64,7 +66,7 @@ export const Menu = (props: MenuProps) => {
{...props.buttonProps}
>
{props.label}
</button>
</Button>
<div
popover="auto"
id={props.popoverid}

2
pkgs/webview-ui/app/src/components/Sidebar/SidebarFlyout/index.tsx
View File

@@ -6,7 +6,7 @@ export const SidebarFlyout = () => {
<div class="sidebar__flyout">
<div class="sidebar__flyout__inner">
<List gapSize="small">
<SidebarListItem href="/settings" title="Settings" />
<SidebarListItem href="/clans" title="Settings" />
</List>
</div>
</div>

2
pkgs/webview-ui/app/src/components/Sidebar/SidebarHeader.tsx
View File

@@ -29,7 +29,7 @@ export const SidebarHeader = (props: SidebarHeader) => {
color="primary"
inverted={true}
>
{clanName.slice(0, 1)}
{clanName.slice(0, 1).toUpperCase()}
</Typography>
</div>
);

1
pkgs/webview-ui/app/src/components/button/index.tsx
View File

@@ -61,6 +61,7 @@ export const Button = (props: ButtonProps) => {
"inline-flex items-center flex-shrink gap-2 justify-center",
// Styles
"border border-solid",
"p-4",
sizePaddings[local.size || "default"],
// Colors
variantColors[local.variant || "dark"],

14
pkgs/webview-ui/app/src/components/icon/index.tsx
View File

@@ -1,4 +1,4 @@
import { Component, JSX } from "solid-js";
import { Component, JSX, splitProps } from "solid-js";
import ArrowBottom from "@/icons/arrow-bottom.svg";
import ArrowLeft from "@/icons/arrow-left.svg";
import ArrowRight from "@/icons/arrow-right.svg";
@@ -81,10 +81,18 @@ const Icon: Component<IconProps> = (props) => {
Trash,
Update,
};
const [local, iconProps] = splitProps(props, ["icon"]);
const IconComponent = icons[props.icon];
const IconComponent = icons[local.icon];
return IconComponent ? (
<IconComponent width={16} height={16} viewBox="0 0 48 48" />
<IconComponent
width={16}
height={16}
viewBox="0 0 48 48"
// @ts-expect-error: dont know, fix this type nit later
ref={iconProps.ref}
{...iconProps}
/>
) : null;
};

3
pkgs/webview-ui/app/src/index.tsx
View File

@@ -136,9 +136,10 @@ export const routes: AppRoute[] = [
{
path: "/welcome",
label: "",
hidden: true,
hidden: false,
component: () => <Welcome />,
},
{
path: "/api_testing",
label: "api_testing",

43
pkgs/webview-ui/app/src/layout/header.tsx
View File

@@ -4,7 +4,8 @@ import { callApi } from "../api";
import { Accessor, Show } from "solid-js";
import { useNavigate } from "@solidjs/router";
import ArrowBottom from "@/icons/arrow-bottom.svg";
import Icon from "../components/icon";
import { Button } from "../components/button";
interface HeaderProps {
clan_dir: Accessor<string | null>;
@@ -28,7 +29,7 @@ export const Header = (props: HeaderProps) => {
return (
<div class="navbar">
<div class="flex-none">
<span class="tooltip tooltip-bottom" data-tip="Menu">
<span class="tooltip tooltip-bottom lg:hidden" data-tip="Menu">
<label
class="btn btn-square btn-ghost drawer-button"
for="toplevel-drawer"
@@ -37,44 +38,16 @@ export const Header = (props: HeaderProps) => {
</label>
</span>
</div>
<div class="flex-1">
<Show when={query.isLoading && !query.data}>
<div class="skeleton mx-4 size-11 rounded-full"></div>
<span class="flex flex-col gap-2">
<div class="skeleton h-3 w-32"></div>
<div class="skeleton h-3 w-40"></div>
</span>
</Show>
<Show when={query.data}>
{(meta) => (
<div class="tooltip tooltip-right" data-tip={activeURI()}>
<div class="avatar placeholder online mx-4">
<div class="w-10 rounded-full bg-slate-700 text-3xl text-neutral-content">
<ArrowBottom />
</div>
</div>
</div>
)}
</Show>
<span class="flex flex-col">
<Show when={query.data}>
{(meta) => [
<span class="text-primary-800">{meta().name}</span>,
<span class="text-neutral">{meta()?.description}</span>,
]}
</Show>
</span>
</div>
<div class="flex-1"></div>
<div class="flex-none">
<Show when={activeURI()}>
{(d) => (
<span class="tooltip tooltip-bottom" data-tip="Clan Settings">
<button
class="link"
<Button
variant="light"
onClick={() => navigate(`/clans/${window.btoa(d())}`)}
>
<span class="material-icons">settings</span>
</button>
startIcon={<Icon icon="Settings" />}
></Button>
</span>
)}
</Show>

4
pkgs/webview-ui/app/src/layout/layout.tsx
View File

@@ -18,14 +18,14 @@ export const Layout: Component<RouteSectionProps> = (props) => {
});
return (
<div class="h-screen w-full p-4 bg-def-3">
<div class="h-screen w-full p-4 bg-def-2">
<div class="drawer h-full lg:drawer-open ">
<input
id="toplevel-drawer"
type="checkbox"
class="drawer-toggle hidden"
/>
<div class="drawer-content overflow-x-hidden overflow-y-scroll">
<div class="drawer-content overflow-x-hidden overflow-y-scroll p-2">
<Show when={props.location.pathname !== "welcome"}>
<Header clan_dir={activeURI} />
</Show>

9
pkgs/webview-ui/app/src/routes/blockdevices/view.tsx
View File

@@ -2,6 +2,8 @@ import { callApi } from "@/src/api";
import { Component, For, Show } from "solid-js";
import { createQuery } from "@tanstack/solid-query";
import { Button } from "@/src/components/button";
import Icon from "@/src/components/icon";
export const BlockDevicesView: Component = () => {
const {
@@ -22,9 +24,10 @@ export const BlockDevicesView: Component = () => {
return (
<div>
<div class="tooltip tooltip-bottom" data-tip="Refresh">
<button class="btn btn-ghost" onClick={() => loadDevices()}>
<span class="material-icons ">refresh</span>
</button>
<Button
onClick={() => loadDevices()}
startIcon={<Icon icon="Reload" />}
></Button>
</div>
<div class="flex max-w-screen-lg flex-col gap-4">
{isFetching ? (

8
pkgs/webview-ui/app/src/routes/clans/create.tsx
View File

@@ -10,6 +10,8 @@ import toast from "solid-toast";
import { setActiveURI, setClanList } from "@/src/App";
import { TextInput } from "@/src/components/TextInput";
import { useNavigate } from "@solidjs/router";
import { Button } from "@/src/components/button";
import Icon from "@/src/components/icon";
type CreateForm = Meta & {
template: string;
@@ -176,13 +178,13 @@ export const CreateClan = () => {
</Field>
{
<div class="card-actions justify-end">
<button
class="btn btn-primary"
<Button
type="submit"
disabled={formStore.submitting}
endIcon={<Icon icon="Plus" />}
>
Create
</button>
</Button>
</div>
}
</div>

44
pkgs/webview-ui/app/src/routes/clans/details.tsx
View File

@@ -1,16 +1,7 @@
import {
callApi,
ClanService,
ClanServiceInstance,
SuccessQuery,
} from "@/src/api";
import { callApi, ClanServiceInstance, SuccessQuery } from "@/src/api";
import { BackButton } from "@/src/components/BackButton";
import { useParams } from "@solidjs/router";
import {
createQuery,
QueryClient,
useQueryClient,
} from "@tanstack/solid-query";
import { createQuery, useQueryClient } from "@tanstack/solid-query";
import { createSignal, For, Match, Switch } from "solid-js";
import { Show } from "solid-js";
import {
@@ -25,6 +16,8 @@ import {
import { TextInput } from "@/src/components/TextInput";
import toast from "solid-toast";
import { get_single_service, set_single_service } from "@/src/api/inventory";
import { Button } from "@/src/components/button";
import Icon from "@/src/components/icon";
interface AdminModuleFormProps {
admin: AdminData;
@@ -157,13 +150,12 @@ const EditClanForm = (props: EditClanFormProps) => {
</Field>
{
<div class="card-actions justify-end">
<button
class="btn btn-primary"
<Button
type="submit"
disabled={formStore.submitting || !formStore.dirty}
>
Save
</button>
</Button>
</div>
}
</div>
@@ -307,41 +299,39 @@ const AdminModuleForm = (props: AdminModuleFormProps) => {
</>
)}
</Field>
<button
class="btn btn-ghost col-span-1 self-end"
<Button
variant="light"
class="col-span-1 self-end"
startIcon={<Icon icon="Trash" />}
onClick={(e) => {
e.preventDefault();
setKeys((c) => c.filter((_, i) => i !== idx()));
setValue(formStore, `allowedKeys.${idx()}.name`, "");
setValue(formStore, `allowedKeys.${idx()}.value`, "");
}}
>
<span class="material-icons">delete</span>
</button>
></Button>
</>
)}
</For>
<div class="my-2 flex w-full gap-2">
<button
class="btn btn-square btn-ghost"
<Button
variant="light"
onClick={(e) => {
e.preventDefault();
setKeys((c) => [...c, 1]);
}}
>
<span class="material-icons">add</span>
</button>
startIcon={<Icon icon="Plus" />}
></Button>
</div>
</div>
{
<div class="card-actions justify-end">
<button
class="btn btn-primary"
<Button
type="submit"
disabled={formStore.submitting || !formStore.dirty}
>
Save
</button>
</Button>
</div>
}
</div>

62
pkgs/webview-ui/app/src/routes/clans/list.tsx
View File

@@ -6,6 +6,8 @@ import { useFloating } from "@/src/floating";
import { autoUpdate, flip, hide, offset, shift } from "@floating-ui/dom";
import { useNavigate, A } from "@solidjs/router";
import { registerClan } from "@/src/hooks";
import { Button } from "@/src/components/button";
import Icon from "@/src/components/icon";
interface ClanItemProps {
clan_dir: string;
@@ -61,33 +63,32 @@ const ClanItem = (props: ClanItemProps) => {
<div class="stat">
<div class="stat-figure text-primary-800">
<div class="join">
<button
class="join-item btn-sm"
<Button
size="s"
variant="light"
class="join-item"
onClick={() => navigate(`/clans/${window.btoa(clan_dir)}`)}
>
<span class="material-icons">edit</span>
</button>
<button
class=" join-item btn-sm"
classList={{
"btn btn-ghost btn-outline": activeURI() !== clan_dir,
"badge badge-primary": activeURI() === clan_dir,
}}
disabled={activeURI() === clan_dir}
endIcon={<Icon icon="Settings" />}
></Button>
<Button
size="s"
variant="light"
class="join-item "
onClick={() => {
setActiveURI(clan_dir);
}}
>
{activeURI() === clan_dir ? "active" : "select"}
</button>
<button
</Button>
<Button
size="s"
variant="light"
popovertarget={`clan-delete-popover-${clan_dir}`}
popovertargetaction="toggle"
ref={setReference}
class="btn btn-ghost btn-outline join-item btn-sm"
>
Remove
</button>
class="btn btn-ghost btn-outline join-item"
endIcon={<Icon icon="Trash" />}
></Button>
<div
popover="auto"
role="tooltip"
@@ -100,9 +101,14 @@ const ClanItem = (props: ClanItemProps) => {
}}
class="m-0 bg-transparent"
>
<button class="btn bg-[#ffdd2c]" onClick={handleRemove}>
<Button
size="s"
onClick={handleRemove}
variant="dark"
endIcon={<Icon icon="Trash" />}
>
Remove from App
</button>
</Button>
</div>
</div>
</div>
@@ -139,19 +145,19 @@ export const ClanList = () => {
<div class="label-text text-2xl text-neutral">Registered Clans</div>
<div class="flex gap-2">
<span class="tooltip tooltip-top" data-tip="Register clan">
<button class="btn btn-square btn-ghost" onClick={registerClan}>
<span class="material-icons">post_add</span>
</button>
<Button
variant="light"
onClick={registerClan}
startIcon={<Icon icon="List" />}
></Button>
</span>
<span class="tooltip tooltip-top" data-tip="Create new clan">
<button
class="btn btn-square btn-ghost"
<Button
onClick={() => {
navigate("create");
}}
>
<span class="material-icons">add</span>
</button>
startIcon={<Icon icon="Plus" />}
></Button>
</span>
</div>
</div>

68
pkgs/webview-ui/app/src/routes/flash/view.tsx
View File

@@ -1,5 +1,7 @@
import { callApi } from "@/src/api";
import { Button } from "@/src/components/button";
import { FileInput } from "@/src/components/FileInput";
import Icon from "@/src/components/icon";
import { SelectInput } from "@/src/components/SelectInput";
import { TextInput } from "@/src/components/TextInput";
import {
@@ -209,15 +211,15 @@ export const Flash = () => {
{(field, props) => (
<SelectInput
topRightLabel={
<button
class="btn btn-ghost btn-sm"
<Button
size="s"
variant="light"
onClick={(e) => {
e.preventDefault();
deviceQuery.refetch();
}}
>
<span class="material-icons text-sm">refresh</span>
</button>
startIcon={<Icon icon="Reload" />}
></Button>
}
formStore={formStore}
selectProps={props}
@@ -285,17 +287,19 @@ export const Flash = () => {
adornment={{
position: "end",
content: (
<button
<Button
variant="light"
type="button"
class="flex justify-center opacity-70"
onClick={() => togglePasswordVisibility(index())}
>
<span class="material-icons">
{passwordVisibility()[index()]
? "visibility_off"
: "visibility"}
</span>
</button>
startIcon={
passwordVisibility()[index()] ? (
<Icon icon="EyeClose" />
) : (
<Icon icon="EyeOpen" />
)
}
></Button>
),
}}
required
@@ -304,25 +308,27 @@ export const Flash = () => {
)}
</Field>
<div class="col-span-1 self-end">
<button
<Button
type="button"
class="btn btn-ghost "
variant="light"
class="h-12"
onClick={() => removeWifiNetwork(index())}
>
<span class="material-icons">delete</span>
</button>
startIcon={<Icon icon="Trash" />}
></Button>
</div>
</div>
)}
</For>
<div class="">
<button
<Button
type="button"
class="btn btn-ghost btn-sm"
size="s"
variant="light"
onClick={addWifiNetwork}
startIcon={<Icon icon="Plus" />}
>
<span class="material-icons">add</span>Add WiFi Network
</button>
Add WiFi Network
</Button>
</div>
</div>
@@ -434,18 +440,20 @@ export const Flash = () => {
<hr></hr>
<div class="mt-2 flex justify-end pt-2">
<button
class="btn btn-error self-end"
<Button
class="self-end"
type="submit"
disabled={formStore.submitting}
startIcon={
formStore.submitting ? (
<Icon icon="Load" />
) : (
<Icon icon="Flash" />
)
}
>
{formStore.submitting ? (
<span class="loading loading-spinner"></span>
) : (
<span class="material-icons">bolt</span>
)}
{formStore.submitting ? "Flashing..." : "Flash Installer"}
</button>
</Button>
</div>
</Form>
</div>

11
pkgs/webview-ui/app/src/routes/hosts/view.tsx
View File

@@ -1,5 +1,7 @@
import { type Component, createSignal, For, Show } from "solid-js";
import { OperationResponse, pyApi } from "@/src/api";
import { Button } from "@/src/components/button";
import Icon from "@/src/components/icon";
type ServiceModel = Extract<
OperationResponse<"show_mdns">,
@@ -12,12 +14,11 @@ export const HostList: Component = () => {
return (
<div>
<div class="tooltip tooltip-bottom" data-tip="Refresh install targets">
<button
class="btn btn-ghost"
<Button
variant="light"
onClick={() => pyApi.show_mdns.dispatch({})}
>
<span class="material-icons ">refresh</span>
</button>
startIcon={<Icon icon="Update" />}
></Button>
</div>
<div class="flex flex-wrap gap-2">
<Show when={services()}>

31
pkgs/webview-ui/app/src/routes/machines/create.tsx
View File

@@ -1,5 +1,7 @@
import { callApi, OperationArgs } from "@/src/api";
import { activeURI } from "@/src/App";
import { Button } from "@/src/components/button";
import Icon from "@/src/components/icon";
import { TextInput } from "@/src/components/TextInput";
import { createForm, required, reset } from "@modular-forms/solid";
import { useNavigate } from "@solidjs/router";
@@ -108,26 +110,21 @@ export function CreateMachine() {
)}
</Field>
<div class="mt-12 flex justify-end">
<button
class="btn btn-primary"
<Button
type="submit"
classList={{
"btn-disabled": formStore.submitting,
}}
disabled={formStore.submitting}
startIcon={
formStore.submitting ? (
<Icon icon="Load" />
) : (
<Icon icon="Plus" />
)
}
>
<Switch
fallback={
<>
<span class="loading loading-spinner loading-sm"></span>
Creating
</>
}
>
<Match when={!formStore.submitting}>
<span class="material-icons">add</span>Create
</Match>
<Switch fallback={<>Creating</>}>
<Match when={!formStore.submitting}>Create</Match>
</Switch>
</button>
</Button>
</div>
</Form>
</div>

101
pkgs/webview-ui/app/src/routes/machines/details.tsx
View File

@@ -3,7 +3,9 @@ import { set_single_disk_id } from "@/src/api/disk";
import { get_iwd_service } from "@/src/api/wifi";
import { activeURI } from "@/src/App";
import { BackButton } from "@/src/components/BackButton";
import { Button } from "@/src/components/button";
import { FileInput } from "@/src/components/FileInput";
import Icon from "@/src/components/icon";
import { SelectInput } from "@/src/components/SelectInput";
import { TextInput } from "@/src/components/TextInput";
import { selectSshKeys } from "@/src/hooks";
@@ -192,13 +194,15 @@ const InstallMachine = (props: InstallMachineProps) => {
</Match>
</Switch>
<div class="">
<button
class="btn btn-ghost btn-sm btn-wide"
<Button
variant="light"
size="s"
class="w-full"
onclick={generateReport}
>
<span class="material-icons">manage_search</span>
Generate report
</button>
</Button>
</div>
</div>
</div>
@@ -252,25 +256,32 @@ const InstallMachine = (props: InstallMachineProps) => {
<Show
when={confirmDisk()}
fallback={
<button
<Button
class="btn btn-primary btn-wide"
onClick={handleDiskConfirm}
disabled={!hasDisk()}
startIcon={<Icon icon="Flash" />}
>
<span class="material-icons">check</span>
Confirm Disk
</button>
</Button>
}
>
<button class="btn btn-primary btn-wide" type="submit">
<span class="material-icons">send_to_mobile</span>
<Button
class="w-full"
type="submit"
startIcon={<Icon icon="Flash" />}
>
Install
</button>
</Button>
</Show>
<form method="dialog">
<button onClick={() => setConfirmDisk(false)} class="btn">
<Button
variant="light"
onClick={() => setConfirmDisk(false)}
class="btn"
>
Close
</button>
</Button>
</form>
</div>
</Form>
@@ -519,13 +530,12 @@ const MachineForm = (props: MachineDetailsProps) => {
{
<div class="card-actions justify-end">
<button
class="btn btn-primary"
<Button
type="submit"
disabled={formStore.submitting || !formStore.dirty}
>
Save
</button>
</Button>
</div>
}
</div>
@@ -550,15 +560,19 @@ const MachineForm = (props: MachineDetailsProps) => {
device.
</span>
<div class="tooltip w-fit" data-tip="Machine must be online">
<button
class="btn btn-primary btn-sm btn-wide"
disabled={!online()}
// @ts-expect-error: This string method is not supported by ts
onClick="install_modal.showModal()"
<Button
class="w-full"
// disabled={!online()}
onClick={() => {
const modal = document.getElementById(
"install_modal",
) as HTMLDialogElement | null;
modal?.showModal();
}}
endIcon={<Icon icon="Flash" />}
>
<span class="material-icons">send_to_mobile</span>
Install
</button>
</Button>
</div>
<dialog id="install_modal" class="modal backdrop:bg-transparent">
@@ -577,14 +591,14 @@ const MachineForm = (props: MachineDetailsProps) => {
process.
</span>
<div class="tooltip w-fit" data-tip="Machine must be online">
<button
class="btn btn-primary btn-sm btn-wide"
<Button
class="w-full"
disabled={!online()}
onClick={() => handleUpdate()}
endIcon={<Icon icon="Update" />}
>
<span class="material-icons">update</span>
Update
</button>
</Button>
</div>
</div>
</div>
@@ -761,41 +775,38 @@ function WifiModule(props: MachineWifiProps) {
/>
)}
</Field>
<button class="btn btn-ghost self-end">
<span
class="material-icons"
onClick={(e) => {
e.preventDefault();
setNets((c) => c.filter((_, i) => i !== idx()));
setValue(formStore, `networks.${idx()}.ssid`, undefined);
setValue(formStore, `networks.${idx()}.password`, undefined);
}}
>
delete
</span>
</button>
<Button
variant="light"
class="self-end"
type="button"
onClick={() => {
setNets((c) => c.filter((_, i) => i !== idx()));
setValue(formStore, `networks.${idx()}.ssid`, undefined);
setValue(formStore, `networks.${idx()}.password`, undefined);
}}
startIcon={<Icon icon="Trash" />}
></Button>
</div>
)}
</For>
<button
<Button
class="btn btn-ghost btn-sm my-1 flex items-center justify-center"
onClick={(e) => {
e.preventDefault();
setNets([...nets(), 1]);
}}
type="button"
startIcon={<Icon icon="Plus" />}
>
<span class="material-icons">add</span>
Add Network
</button>
</Button>
{
<div class="card-actions mt-4 justify-end">
<button
class="btn btn-primary"
<Button
type="submit"
disabled={formStore.submitting || !formStore.dirty}
>
Save
</button>
</Button>
</div>
}
</Form>

25
pkgs/webview-ui/app/src/routes/machines/list.tsx
View File

@@ -9,6 +9,8 @@ import {
useQueryClient,
} from "@tanstack/solid-query";
import { useNavigate } from "@solidjs/router";
import { Button } from "@/src/components/button";
import Icon from "@/src/components/icon";
type MachinesModel = Extract<
OperationResponse<"list_inventory_machines">,
@@ -80,14 +82,18 @@ export const MachineListView: Component = () => {
<div>
<div class="tooltip tooltip-bottom" data-tip="Open Clan"></div>
<div class="tooltip tooltip-bottom" data-tip="Refresh">
<button class="btn btn-ghost" onClick={() => refresh()}>
<span class="material-icons ">refresh</span>
</button>
<Button
variant="light"
onClick={() => refresh()}
startIcon={<Icon icon="Reload" />}
></Button>
</div>
<div class="tooltip tooltip-bottom" data-tip="Create machine">
<button class="btn btn-ghost" onClick={() => navigate("create")}>
<span class="material-icons ">add</span>
</button>
<Button
variant="light"
onClick={() => navigate("create")}
startIcon={<Icon icon="Plus" />}
></Button>
</div>
<Switch>
<Match when={inventoryQuery.isLoading}>
@@ -117,12 +123,13 @@ export const MachineListView: Component = () => {
<span class="text-lg text-neutral">
No machines defined yet. Click below to define one.
</span>
<button
class="btn btn-square btn-ghost size-28 overflow-hidden p-2"
<Button
variant="light"
class="size-28 overflow-hidden p-2"
onClick={() => navigate("/machines/create")}
>
<span class="material-icons text-6xl font-light">add</span>
</button>
</Button>
</div>
</Match>
<Match when={!inventoryQuery.isLoading}>

9
pkgs/webview-ui/app/src/routes/modules/details.tsx
View File

@@ -25,6 +25,8 @@ import {
SubmitHandler,
} from "@modular-forms/solid";
import { DynForm } from "@/src/Form/form";
import { Button } from "@/src/components/button";
import Icon from "@/src/components/icon";
export const ModuleDetails = () => {
const params = useParams();
@@ -116,10 +118,9 @@ const Details = (props: DetailsProps) => {
<SolidMarkdown>{props.data.readme}</SolidMarkdown>
</div>
<div class="my-2 flex w-full gap-2">
<button class="btn btn-primary" onClick={add}>
<span class="material-icons ">add</span>
<Button variant="light" onClick={add} startIcon={<Icon icon="Plus" />}>
Add to Clan
</button>
</Button>
{/* Add -> Select (required) roles, assign Machine */}
</div>
<ModuleForm id={props.id} />
@@ -192,7 +193,7 @@ export const ModuleForm = (props: { id: string }) => {
handleSubmit={handleSubmit}
schema={schema}
components={{
after: <button class="btn btn-primary">Submit</button>,
after: <Button>Submit</Button>,
}}
/>
</div>

15
pkgs/webview-ui/app/src/routes/welcome/index.tsx
View File

@@ -1,4 +1,5 @@
import { setActiveURI } from "@/src/App";
import { Button } from "@/src/components/button";
import { registerClan } from "@/src/hooks";
import { useNavigate } from "@solidjs/router";
@@ -11,14 +12,12 @@ export const Welcome = () => {
<h1 class="text-5xl font-bold">Welcome to Clan</h1>
<p class="py-6">Own the services you use.</p>
<div class="flex flex-col items-start gap-2">
<button
class="btn btn-primary w-full"
onClick={() => navigate("/clans/create")}
>
<Button class="w-full" onClick={() => navigate("/clans/create")}>
Build your own
</button>
<button
class="link w-full text-right text-primary-800"
</Button>
<Button
variant="light"
class="!link w-full text-right !text-primary-800"
onClick={async () => {
const uri = await registerClan();
if (uri) {
@@ -28,7 +27,7 @@ export const Welcome = () => {
}}
>
Or select folder
</button>
</Button>
</div>
</div>
</div>