mirror
/
tiangolo.fastapi
mirror of https://github.com/tiangolo/fastapi
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

🎨 Add minor UI tweaks in Skeletons and other components (#1507)

pull/13907/head
Alejandra 5 months ago
committed by GitHub
parent
e46b8d9421
commit
d18cf4b6be
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
8 changed files with 50 additions and 51 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      frontend/src/components/Common/UserMenu.tsx
  2. 19
      frontend/src/components/Pending/PendingItems.tsx
  3. 23
      frontend/src/components/Pending/PendingUsers.tsx
  4. 5
      frontend/src/components/UserSettings/ChangePassword.tsx
  5. 7
      frontend/src/main.tsx
  6. 24
      frontend/src/routes/_layout/admin.tsx
  7. 14
      frontend/src/routes/_layout/items.tsx
  8. 2
      frontend/tests/login.spec.ts

7
frontend/src/components/Common/UserMenu.tsx
View File

@ -19,12 +19,7 @@ const UserMenu = () => {
<Flex> <Flex>
<MenuRoot> <MenuRoot>
<MenuTrigger asChild p={2}> <MenuTrigger asChild p={2}>
<Button <Button data-testid="user-menu" variant="solid" maxW="sm" truncate>
data-testid="user-menu"
variant="solid"
maxW="150px"
truncate
>
<FaUserAstronaut fontSize="18" /> <FaUserAstronaut fontSize="18" />
<Text>{user?.full_name || "User"}</Text> <Text>{user?.full_name || "User"}</Text>
</Button> </Button>

19
frontend/src/components/Pending/PendingItems.tsx
View File

@ -1,29 +1,30 @@
import { Skeleton, Table } from "@chakra-ui/react" import { Table } from "@chakra-ui/react"
import { SkeletonText } from "../ui/skeleton"
const PendingItems = () => ( const PendingItems = () => (
<Table.Root size={{ base: "sm", md: "md" }}> <Table.Root size={{ base: "sm", md: "md" }}>
<Table.Header> <Table.Header>
<Table.Row> <Table.Row>
<Table.ColumnHeader w="30%">ID</Table.ColumnHeader> <Table.ColumnHeader w="sm">ID</Table.ColumnHeader>
<Table.ColumnHeader w="30%">Title</Table.ColumnHeader> <Table.ColumnHeader w="sm">Title</Table.ColumnHeader>
<Table.ColumnHeader w="30%">Description</Table.ColumnHeader> <Table.ColumnHeader w="sm">Description</Table.ColumnHeader>
<Table.ColumnHeader w="10%">Actions</Table.ColumnHeader> <Table.ColumnHeader w="sm">Actions</Table.ColumnHeader>
</Table.Row> </Table.Row>
</Table.Header> </Table.Header>
<Table.Body> <Table.Body>
{[...Array(5)].map((_, index) => ( {[...Array(5)].map((_, index) => (
<Table.Row key={index}> <Table.Row key={index}>
<Table.Cell> <Table.Cell>
<Skeleton h="20px" /> <SkeletonText noOfLines={1} />
</Table.Cell> </Table.Cell>
<Table.Cell> <Table.Cell>
<Skeleton h="20px" /> <SkeletonText noOfLines={1} />
</Table.Cell> </Table.Cell>
<Table.Cell> <Table.Cell>
<Skeleton h="20px" /> <SkeletonText noOfLines={1} />
</Table.Cell> </Table.Cell>
<Table.Cell> <Table.Cell>
<Skeleton h="20px" /> <SkeletonText noOfLines={1} />
</Table.Cell> </Table.Cell>
</Table.Row> </Table.Row>
))} ))}

23
frontend/src/components/Pending/PendingUsers.tsx
View File

@ -1,33 +1,34 @@
import { Skeleton, Table } from "@chakra-ui/react" import { Table } from "@chakra-ui/react"
import { SkeletonText } from "../ui/skeleton"
const PendingUsers = () => ( const PendingUsers = () => (
<Table.Root size={{ base: "sm", md: "md" }}> <Table.Root size={{ base: "sm", md: "md" }}>
<Table.Header> <Table.Header>
<Table.Row> <Table.Row>
<Table.ColumnHeader w="20%">Full name</Table.ColumnHeader> <Table.ColumnHeader w="sm">Full name</Table.ColumnHeader>
<Table.ColumnHeader w="25%">Email</Table.ColumnHeader> <Table.ColumnHeader w="sm">Email</Table.ColumnHeader>
<Table.ColumnHeader w="15%">Role</Table.ColumnHeader> <Table.ColumnHeader w="sm">Role</Table.ColumnHeader>
<Table.ColumnHeader w="20%">Status</Table.ColumnHeader> <Table.ColumnHeader w="sm">Status</Table.ColumnHeader>
<Table.ColumnHeader w="20%">Actions</Table.ColumnHeader> <Table.ColumnHeader w="sm">Actions</Table.ColumnHeader>
</Table.Row> </Table.Row>
</Table.Header> </Table.Header>
<Table.Body> <Table.Body>
{[...Array(5)].map((_, index) => ( {[...Array(5)].map((_, index) => (
<Table.Row key={index}> <Table.Row key={index}>
<Table.Cell> <Table.Cell>
<Skeleton h="20px" /> <SkeletonText noOfLines={1} />
</Table.Cell> </Table.Cell>
<Table.Cell> <Table.Cell>
<Skeleton h="20px" /> <SkeletonText noOfLines={1} />
</Table.Cell> </Table.Cell>
<Table.Cell> <Table.Cell>
<Skeleton h="20px" /> <SkeletonText noOfLines={1} />
</Table.Cell> </Table.Cell>
<Table.Cell> <Table.Cell>
<Skeleton h="20px" /> <SkeletonText noOfLines={1} />
</Table.Cell> </Table.Cell>
<Table.Cell> <Table.Cell>
<Skeleton h="20px" /> <SkeletonText noOfLines={1} />
</Table.Cell> </Table.Cell>
</Table.Row> </Table.Row>
))} ))}

5
frontend/src/components/UserSettings/ChangePassword.tsx
View File

@ -47,10 +47,7 @@ const ChangePassword = () => {
<Heading size="sm" py={4}> <Heading size="sm" py={4}>
Change Password Change Password
</Heading> </Heading>
<Box <Box as="form" onSubmit={handleSubmit(onSubmit)}>
as="form"
onSubmit={handleSubmit(onSubmit)}
>
<VStack gap={4} w={{ base: "100%", md: "sm" }}> <VStack gap={4} w={{ base: "100%", md: "sm" }}>
<PasswordInput <PasswordInput
type="current_password" type="current_password"

7
frontend/src/main.tsx
View File

@ -1,4 +1,9 @@
import { MutationCache, QueryCache, QueryClient, QueryClientProvider } from "@tanstack/react-query" import {
MutationCache,
QueryCache,
QueryClient,
QueryClientProvider,
} from "@tanstack/react-query"
import { RouterProvider, createRouter } from "@tanstack/react-router" import { RouterProvider, createRouter } from "@tanstack/react-router"
import React, { StrictMode } from "react" import React, { StrictMode } from "react"
import ReactDOM from "react-dom/client" import ReactDOM from "react-dom/client"

24
frontend/src/routes/_layout/admin.tsx
View File

@ -61,17 +61,17 @@ function UsersTable() {
<Table.Root size={{ base: "sm", md: "md" }}> <Table.Root size={{ base: "sm", md: "md" }}>
<Table.Header> <Table.Header>
<Table.Row> <Table.Row>
<Table.ColumnHeader w="20%">Full name</Table.ColumnHeader> <Table.ColumnHeader w="sm">Full name</Table.ColumnHeader>
<Table.ColumnHeader w="25%">Email</Table.ColumnHeader> <Table.ColumnHeader w="sm">Email</Table.ColumnHeader>
<Table.ColumnHeader w="15%">Role</Table.ColumnHeader> <Table.ColumnHeader w="sm">Role</Table.ColumnHeader>
<Table.ColumnHeader w="20%">Status</Table.ColumnHeader> <Table.ColumnHeader w="sm">Status</Table.ColumnHeader>
<Table.ColumnHeader w="20%">Actions</Table.ColumnHeader> <Table.ColumnHeader w="sm">Actions</Table.ColumnHeader>
</Table.Row> </Table.Row>
</Table.Header> </Table.Header>
<Table.Body> <Table.Body>
{users?.map((user) => ( {users?.map((user) => (
<Table.Row key={user.id} opacity={isPlaceholderData ? 0.5 : 1}> <Table.Row key={user.id} opacity={isPlaceholderData ? 0.5 : 1}>
<Table.Cell w="20%" color={!user.full_name ? "gray" : "inherit"}> <Table.Cell color={!user.full_name ? "gray" : "inherit"}>
{user.full_name || "N/A"} {user.full_name || "N/A"}
{currentUser?.id === user.id && ( {currentUser?.id === user.id && (
<Badge ml="1" colorScheme="teal"> <Badge ml="1" colorScheme="teal">
@ -79,14 +79,14 @@ function UsersTable() {
</Badge> </Badge>
)} )}
</Table.Cell> </Table.Cell>
<Table.Cell w="25%">{user.email}</Table.Cell> <Table.Cell truncate maxW="sm">
<Table.Cell w="15%"> {user.email}
{user.is_superuser ? "Superuser" : "User"}
</Table.Cell> </Table.Cell>
<Table.Cell w="20%"> <Table.Cell>
{user.is_active ? "Active" : "Inactive"} {user.is_superuser ? "Superuser" : "User"}
</Table.Cell> </Table.Cell>
<Table.Cell w="20%"> <Table.Cell>{user.is_active ? "Active" : "Inactive"}</Table.Cell>
<Table.Cell>
<UserActionsMenu <UserActionsMenu
user={user} user={user}
disabled={currentUser?.id === user.id} disabled={currentUser?.id === user.id}

14
frontend/src/routes/_layout/items.tsx
View File

@ -85,19 +85,19 @@ function ItemsTable() {
<Table.Root size={{ base: "sm", md: "md" }}> <Table.Root size={{ base: "sm", md: "md" }}>
<Table.Header> <Table.Header>
<Table.Row> <Table.Row>
<Table.ColumnHeader w="30%">ID</Table.ColumnHeader> <Table.ColumnHeader w="sm">ID</Table.ColumnHeader>
<Table.ColumnHeader w="30%">Title</Table.ColumnHeader> <Table.ColumnHeader w="sm">Title</Table.ColumnHeader>
<Table.ColumnHeader w="30%">Description</Table.ColumnHeader> <Table.ColumnHeader w="sm">Description</Table.ColumnHeader>
<Table.ColumnHeader w="10%">Actions</Table.ColumnHeader> <Table.ColumnHeader w="sm">Actions</Table.ColumnHeader>
</Table.Row> </Table.Row>
</Table.Header> </Table.Header>
<Table.Body> <Table.Body>
{items?.map((item) => ( {items?.map((item) => (
<Table.Row key={item.id} opacity={isPlaceholderData ? 0.5 : 1}> <Table.Row key={item.id} opacity={isPlaceholderData ? 0.5 : 1}>
<Table.Cell truncate maxW="30%"> <Table.Cell truncate maxW="sm">
{item.id} {item.id}
</Table.Cell> </Table.Cell>
<Table.Cell truncate maxW="30%"> <Table.Cell truncate maxW="sm">
{item.title} {item.title}
</Table.Cell> </Table.Cell>
<Table.Cell <Table.Cell
@ -107,7 +107,7 @@ function ItemsTable() {
> >
{item.description || "N/A"} {item.description || "N/A"}
</Table.Cell> </Table.Cell>
<Table.Cell width="10%"> <Table.Cell>
<ItemActionsMenu item={item} /> <ItemActionsMenu item={item} />
</Table.Cell> </Table.Cell>
</Table.Row> </Table.Row>

2
frontend/tests/login.spec.ts
View File

@ -124,4 +124,4 @@ test("Redirects to /login when token is wrong", async ({ page }) => {
await page.goto("/settings") await page.goto("/settings")
await page.waitForURL("/login") await page.waitForURL("/login")
await expect(page).toHaveURL("/login") await expect(page).toHaveURL("/login")
}) })

Write Preview
Loading…
Cancel
Save