fix: restore translucent dashboard styling (#6664)
* fix: restore translucent dashboard styling
* fix: restore dashboard widget transparency
* fix: address dashboard review feedback
* fix: apply board opacity to containers
* fix: flatten demo board container
* fix: default board roundness to sm
* fix: restore assistant widget transparency
* Revert "fix: default board roundness to sm"
This reverts commit c235cbdf2b.
* fix: address remaining dashboard review comments
* test: align grid geometry expectations
This commit is contained in:
Thomas authored and 
GitHub committed
1 parent
2570de25a6
commit
19760e5722
88 files changed
+940
-620
No files matched your search
@@ -1,21 +1,20 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import type { ReactNode } from "react";
|
||||
import { getQueryKey } from "@trpc/react-query";
|
||||
import {
|
||||
Box,
|
||||
Center,
|
||||
Button,
|
||||
Divider,
|
||||
Group,
|
||||
Pagination,
|
||||
Paper,
|
||||
ScrollArea,
|
||||
SegmentedControl,
|
||||
Select,
|
||||
SimpleGrid,
|
||||
Stack,
|
||||
Text,
|
||||
VisuallyHidden,
|
||||
} from "@mantine/core";
|
||||
import { IconClipboardList, IconCpu2, IconReportAnalytics } from "@tabler/icons-react";
|
||||
|
||||
@@ -44,6 +43,24 @@ const viewIcons = {
|
||||
statistics: IconReportAnalytics,
|
||||
} satisfies Record<View, TablerIcon>;
|
||||
|
||||
type TranscodingControlMode = "buttons" | "select";
|
||||
|
||||
const narrowWidthLayout = { minimumWidth: 0, advancedColumns: 1, controlMode: "select" } as const;
|
||||
|
||||
const widthBreakpoints = [
|
||||
{ minimumWidth: 1100, advancedColumns: 3, controlMode: "buttons" },
|
||||
{ minimumWidth: 700, advancedColumns: 2, controlMode: "buttons" },
|
||||
{ minimumWidth: 560, advancedColumns: 1, controlMode: "buttons" },
|
||||
narrowWidthLayout,
|
||||
] as const satisfies readonly {
|
||||
minimumWidth: number;
|
||||
advancedColumns: number;
|
||||
controlMode: TranscodingControlMode;
|
||||
}[];
|
||||
|
||||
const getTranscodingWidthLayout = (width: number) =>
|
||||
widthBreakpoints.find((candidate) => width >= candidate.minimumWidth) ?? narrowWidthLayout;
|
||||
|
||||
export default function MediaTranscodingWidget({
|
||||
integrationIds,
|
||||
options,
|
||||
@@ -91,6 +108,7 @@ export default function MediaTranscodingWidget({
|
||||
const handleQueuePageChange = (page: number) => {
|
||||
setQueuePagination({ page, pageSize: queuePageSize, isAdvanced });
|
||||
};
|
||||
const widthLayout = useMemo(() => getTranscodingWidthLayout(width), [width]);
|
||||
|
||||
if (!transcodingData) return <WidgetEmptyState />;
|
||||
|
||||
@@ -108,7 +126,7 @@ export default function MediaTranscodingWidget({
|
||||
<Stack gap="xs" h="100%" p="xs" pos="relative">
|
||||
{queryIndicator}
|
||||
<ScrollArea h="100%" style={{ flex: 1 }}>
|
||||
<SimpleGrid cols={width >= 1100 ? 3 : width >= 700 ? 2 : 1} spacing="sm">
|
||||
<SimpleGrid cols={widthLayout.advancedColumns} spacing="sm">
|
||||
<AdvancedPanel title={t("tab.workers")} icon={IconCpu2}>
|
||||
<WorkersPanel workers={transcodingData.data.workers} isTiny={false} />
|
||||
</AdvancedPanel>
|
||||
@@ -147,35 +165,45 @@ export default function MediaTranscodingWidget({
|
||||
)}
|
||||
<Divider />
|
||||
<Group gap="xs" mb={4} ms={4} me={8} wrap="nowrap">
|
||||
<SegmentedControl
|
||||
data={views.map((value) => {
|
||||
const Icon = viewIcons[value];
|
||||
return {
|
||||
label: (
|
||||
<Center style={{ gap: 4 }}>
|
||||
<Icon size="var(--mantine-font-size-xs)" style={{ flexShrink: 0 }} />
|
||||
{footerLayout.showTabLabels ? (
|
||||
<Text span size="xs">
|
||||
{t(`tab.${value}`)}
|
||||
</Text>
|
||||
) : (
|
||||
<VisuallyHidden>{t(`tab.${value}`)}</VisuallyHidden>
|
||||
)}
|
||||
</Center>
|
||||
),
|
||||
{widthLayout.controlMode === "buttons" ? (
|
||||
<Button.Group style={{ flex: 1, minWidth: 0 }}>
|
||||
{views.map((value) => {
|
||||
const Icon = viewIcons[value];
|
||||
return (
|
||||
<Button
|
||||
key={value}
|
||||
size="compact-xs"
|
||||
variant={value === view ? "filled" : "default"}
|
||||
leftSection={<Icon size="var(--mantine-font-size-xs)" />}
|
||||
aria-pressed={value === view}
|
||||
style={{ flex: 1 }}
|
||||
onClick={() => setView(value)}
|
||||
>
|
||||
{t(`tab.${value}`)}
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</Button.Group>
|
||||
) : (
|
||||
<Select
|
||||
size="xs"
|
||||
value={view}
|
||||
data={views.map((value) => ({
|
||||
value,
|
||||
};
|
||||
})}
|
||||
value={view}
|
||||
onChange={(value) => {
|
||||
const nextView = viewBySegmentValue[value];
|
||||
if (nextView) {
|
||||
setView(nextView);
|
||||
}
|
||||
}}
|
||||
size="xs"
|
||||
style={{ minWidth: 0, flexShrink: footerLayout.showTabLabels ? 1 : 0 }}
|
||||
/>
|
||||
label: t(`tab.${value}`),
|
||||
}))}
|
||||
aria-label={t("option.defaultView.label")}
|
||||
style={{ flex: 1, minWidth: 0 }}
|
||||
onChange={(value) => {
|
||||
if (!value) return;
|
||||
|
||||
const nextView = viewBySegmentValue[value];
|
||||
if (nextView) {
|
||||
setView(nextView);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Group gap="xs" ml="auto" wrap="nowrap">
|
||||
{view === "queue" && queuePageCount > 1 && (
|
||||
|
||||
@@ -97,7 +97,7 @@ function StatisticItem(props: StatisticItemProps) {
|
||||
const board = useRequiredBoard();
|
||||
return (
|
||||
<Tooltip label={props.label}>
|
||||
<Card p={0} radius={board.itemRadius} miw={48} flex={1}>
|
||||
<Card p={0} radius={board.itemRadius} miw={48} flex={1} bg="transparent">
|
||||
<Group justify="center" align="center" gap="xs" w="100%" wrap="nowrap">
|
||||
<props.icon size="var(--mantine-font-size-md)" style={{ flexShrink: 0 }} />
|
||||
<Text size="md">{props.value}</Text>
|
||||
|
||||
Reference in new issue
Block a user