root
/
tabby
mirror of https://gitee.com/zhang_1334717033/tabby.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(ui): adjust team page layout (#1007) 

* feat(ui): display green check button after copy success

* feat(ui): set max width for getting started page

* feat(ui): adjust team management layout

* adjust team table layout
r0.7
Meng Zhang 2023-12-10 16:07:10 +08:00 committed by GitHub
parent 766c481c68
commit 7bd18a41bc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 29 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ee/tabby-ui/app/(dashboard)/team/components/create-invitation-form.tsx vendored
View File

@ -47,7 +47,7 @@ export default function CreateInvitationForm({
return ( return (
<Form {...form}> <Form {...form}>
<div className="flex flex-col items-end gap-2"> <div className="flex flex-col items-start gap-2">
<form <form
className="flex w-full items-center gap-2" className="flex w-full items-center gap-2"
onSubmit={form.handleSubmit(onSubmit)} onSubmit={form.handleSubmit(onSubmit)}

22
ee/tabby-ui/app/(dashboard)/team/components/invitation-table.tsx vendored
View File

@ -54,23 +54,23 @@ export default function InvitationTable() {
return ( return (
invitations && ( invitations && (
<Table> <Table>
<TableHeader> {invitations.length > 0 && (
<TableRow> <TableHeader>
<TableHead>Invitee</TableHead> <TableRow>
<TableHead>Created</TableHead> <TableHead className="w-[25%]">Invitee</TableHead>
<TableHead></TableHead> <TableHead className="w-[45%]">Created</TableHead>
</TableRow> <TableHead>Actions</TableHead>
</TableHeader> </TableRow>
</TableHeader>
)}
<TableBody> <TableBody>
{invitations.map((x, i) => { {invitations.map((x, i) => {
const link = `${origin}/auth/signup?invitationCode=${x.code}` const link = `${origin}/auth/signup?invitationCode=${x.code}`
return ( return (
<TableRow key={i}> <TableRow key={i}>
<TableCell className="w-[300px] font-medium"> <TableCell>{x.email}</TableCell>
{x.email}
</TableCell>
<TableCell>{moment.utc(x.createdAt).fromNow()}</TableCell> <TableCell>{moment.utc(x.createdAt).fromNow()}</TableCell>
<TableCell className="flex items-center"> <TableCell>
<CopyButton value={link} /> <CopyButton value={link} />
<Button <Button
size="icon" size="icon"

7
ee/tabby-ui/app/(dashboard)/team/components/team.tsx vendored
View File

@ -7,18 +7,19 @@ import UsersTable from './user-table'
export default function Team() { export default function Team() {
return ( return (
<div className="xl:max-w-[750px]"> <div>
<div> <div>
<CardHeader> <CardHeader>
<CardTitle>Invites</CardTitle> <CardTitle>Pending Invites</CardTitle>
</CardHeader> </CardHeader>
<CardContent className="p-4"> <CardContent className="p-4">
<InvitationTable /> <InvitationTable />
</CardContent> </CardContent>
</div> </div>
<div className="h-16" />
<div> <div>
<CardHeader> <CardHeader>
<CardTitle>Users</CardTitle> <CardTitle>Members</CardTitle>
</CardHeader> </CardHeader>
<CardContent className="p-4"> <CardContent className="p-4">
<UsersTable /> <UsersTable />

17
ee/tabby-ui/app/(dashboard)/team/components/user-table.tsx vendored
View File

@ -5,6 +5,7 @@ import moment from 'moment'
import { graphql } from '@/lib/gql/generates' import { graphql } from '@/lib/gql/generates'
import { useAuthenticatedGraphQLQuery } from '@/lib/tabby/gql' import { useAuthenticatedGraphQLQuery } from '@/lib/tabby/gql'
import { Badge } from '@/components/ui/badge'
import { import {
Table, Table,
TableBody, TableBody,
@ -25,7 +26,7 @@ const listUsers = graphql(/* GraphQL */ `
`) `)
export default function UsersTable() { export default function UsersTable() {
const { data, mutate } = useAuthenticatedGraphQLQuery(listUsers) const { data } = useAuthenticatedGraphQLQuery(listUsers)
const users = data?.users const users = data?.users
return ( return (
@ -33,17 +34,23 @@ export default function UsersTable() {
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow> <TableRow>
<TableHead>Email</TableHead> <TableHead className="w-[25%]">Email</TableHead>
<TableHead>Joined</TableHead> <TableHead className="w-[45%]">Joined</TableHead>
<TableHead>Role</TableHead> <TableHead>Role</TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
{users.map((x, i) => ( {users.map((x, i) => (
<TableRow key={i}> <TableRow key={i}>
<TableCell className="w-[300px] font-medium">{x.email}</TableCell> <TableCell>{x.email}</TableCell>
<TableCell>{moment.utc(x.createdAt).fromNow()}</TableCell> <TableCell>{moment.utc(x.createdAt).fromNow()}</TableCell>
<TableCell>{x.isAdmin ? 'Admin' : 'Member'}</TableCell> <TableCell>
{x.isAdmin ? (
<Badge>OWNER</Badge>
) : (
<Badge variant="secondary">MEMBER</Badge>
)}
</TableCell>
</TableRow> </TableRow>
))} ))}
</TableBody> </TableBody>

2
ee/tabby-ui/components/copy-button.tsx vendored
View File

@ -29,7 +29,7 @@ export function CopyButton({ className, value, ...props }: CopyButtonProps) {
onClick={onCopy} onClick={onCopy}
{...props} {...props}
> >
{isCopied ? <IconCheck /> : <IconCopy />} {isCopied ? <IconCheck className="text-green-600" /> : <IconCopy />}
<span className="sr-only">Copy</span> <span className="sr-only">Copy</span>
</Button> </Button>
) )