chunzhi/comfyui-deploy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): layout and scrollable

Browse Source
This commit is contained in:
BennyKok 2023-12-29 14:55:08 +08:00
parent d9f83dadd1
commit 9d0a52b7ab
7 changed files with 65 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
web/bun.lockb
View File

Binary file not shown.

1
web/package.json
View File

@ -33,6 +33,7 @@
"@radix-ui/react-label": "^2.0.2", "@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-popover": "^1.0.7", "@radix-ui/react-popover": "^1.0.7",
"@radix-ui/react-radio-group": "^1.1.3", "@radix-ui/react-radio-group": "^1.1.3",
"@radix-ui/react-scroll-area": "^1.0.5",
"@radix-ui/react-select": "^2.0.0", "@radix-ui/react-select": "^2.0.0",
"@radix-ui/react-separator": "^1.0.3", "@radix-ui/react-separator": "^1.0.3",
"@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-slot": "^1.0.2",

4
web/src/app/(app)/layout.tsx
View File

@ -46,7 +46,7 @@ export default function RootLayout({
<div className="z-[-1] fixed h-full w-full bg-white"> <div className="z-[-1] fixed h-full w-full bg-white">
<div className="absolute h-full w-full bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:16px_16px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]" /> <div className="absolute h-full w-full bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:16px_16px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]" />
</div> </div>
<div className="w-full h-18 flex items-center justify-between gap-4 p-4 border-b border-gray-200"> <div className="sticky w-full h-18 flex items-center justify-between gap-4 p-4 border-b border-gray-200">
<div className="flex flex-row items-center gap-4"> <div className="flex flex-row items-center gap-4">
<a <a
className="font-bold text-md md:text-lg hover:underline" className="font-bold text-md md:text-lg hover:underline"
@ -80,7 +80,7 @@ export default function RootLayout({
</div> </div>
{/* <div></div> */} {/* <div></div> */}
</div> </div>
<div className="md:px-10 px-6 w-full min-h-[calc(100dvh-73px)]"> <div className="md:px-10 px-6 w-full h-[calc(100dvh-73px)]">
{children} {children}
</div> </div>
<Toaster richColors /> <Toaster richColors />

6
web/src/app/(docs)/docs/layout.tsx
View File

@ -4,6 +4,7 @@ import { Layout } from "@/components/docs/Layout";
import { type Section } from "@/components/docs/SectionProvider"; import { type Section } from "@/components/docs/SectionProvider";
import glob from "fast-glob"; import glob from "fast-glob";
import { type Metadata } from "next"; import { type Metadata } from "next";
import PlausibleProvider from "next-plausible";
export const metadata: Metadata = { export const metadata: Metadata = {
title: { title: {
@ -28,6 +29,11 @@ export default async function RootLayout({
return ( return (
<html lang="en" className="h-full" suppressHydrationWarning> <html lang="en" className="h-full" suppressHydrationWarning>
<head>
{process.env.PLAUSIBLE_DOMAIN && (
<PlausibleProvider domain={process.env.PLAUSIBLE_DOMAIN} />
)}
</head>
<body className="flex min-h-full bg-white antialiased dark:bg-zinc-900"> <body className="flex min-h-full bg-white antialiased dark:bg-zinc-900">
<Providers> <Providers>
<div className="w-full"> <div className="w-full">

2
web/src/components/MachineList.tsx
View File

@ -91,7 +91,7 @@ export const columns: ColumnDef<Machine>[] = [
cell: ({ row }) => { cell: ({ row }) => {
return ( return (
// <a className="hover:underline" href={`/${row.original.id}`}> // <a className="hover:underline" href={`/${row.original.id}`}>
<div className="flex flex-row gap-2"> <div className="flex flex-row gap-2 items-center">
<div>{row.getValue("name")}</div> <div>{row.getValue("name")}</div>
{row.original.disabled && ( {row.original.disabled && (
<Badge variant="destructive">Disabled</Badge> <Badge variant="destructive">Disabled</Badge>

13
web/src/components/WorkflowList.tsx
View File

@ -12,6 +12,7 @@ import {
DropdownMenuTrigger, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"; } from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { ScrollArea } from "@/components/ui/scroll-area";
import { import {
Table, Table,
TableBody, TableBody,
@ -192,8 +193,8 @@ export function WorkflowList({ data }: { data: Payment[] }) {
}); });
return ( return (
<div className="w-full"> <div className="grid grid-rows-[auto,1fr,auto] h-full">
<div className="flex items-center py-4"> <div className="flex flex-row w-full items-center py-4">
<Input <Input
placeholder="Filter workflows..." placeholder="Filter workflows..."
value={(table.getColumn("email")?.getFilterValue() as string) ?? ""} value={(table.getColumn("email")?.getFilterValue() as string) ?? ""}
@ -229,9 +230,9 @@ export function WorkflowList({ data }: { data: Payment[] }) {
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
</div> </div>
<div className="rounded-md border overflow-x-auto w-full"> <ScrollArea className="h-full w-full rounded-md border">
<Table> <Table>
<TableHeader> <TableHeader className="bg-background top-0 sticky">
{table.getHeaderGroups().map((headerGroup) => ( {table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}> <TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => { {headerGroup.headers.map((header) => {
@ -278,8 +279,8 @@ export function WorkflowList({ data }: { data: Payment[] }) {
)} )}
</TableBody> </TableBody>
</Table> </Table>
</div> </ScrollArea>
<div className="flex items-center justify-end space-x-2 py-4"> <div className="flex flex-row items-center justify-end space-x-2 py-4">
<div className="flex-1 text-sm text-muted-foreground"> <div className="flex-1 text-sm text-muted-foreground">
{table.getFilteredSelectedRowModel().rows.length} of{" "} {table.getFilteredSelectedRowModel().rows.length} of{" "}
{table.getFilteredRowModel().rows.length} row(s) selected. {table.getFilteredRowModel().rows.length} row(s) selected.

48
web/src/components/ui/scroll-area.tsx Normal file
View File

@ -0,0 +1,48 @@
"use client";
import { cn } from "@/lib/utils";
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
import * as React from "react";
const ScrollArea = React.forwardRef<
React.ElementRef<typeof ScrollAreaPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
>(({ className, children, ...props }, ref) => (
<ScrollAreaPrimitive.Root
ref={ref}
className={cn("relative overflow-hidden", className)}
{...props}
>
<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
{children}
</ScrollAreaPrimitive.Viewport>
<ScrollBar />
<ScrollBar orientation="horizontal" />
<ScrollAreaPrimitive.Corner />
</ScrollAreaPrimitive.Root>
));
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
const ScrollBar = React.forwardRef<
React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
>(({ className, orientation = "vertical", ...props }, ref) => (
<ScrollAreaPrimitive.ScrollAreaScrollbar
ref={ref}
orientation={orientation}
className={cn(
"flex touch-none select-none transition-colors",
orientation === "vertical" &&
"h-full w-2.5 border-l border-l-transparent p-[1px]",
orientation === "horizontal" &&
"h-2.5 flex-col border-t border-t-transparent p-[1px]",
className
)}
{...props}
>
<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
</ScrollAreaPrimitive.ScrollAreaScrollbar>
));
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
export { ScrollArea, ScrollBar };