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 d887665c3d
commit 69790bea1e
22 changed files with 272 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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>