Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2026-02-26 16:30:57 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: indexer manager UI behaviour + class naming (#1134)

Browse Source
This commit is contained in:
SeDemal
2024-09-18 12:11:23 +02:00
committed by GitHub
parent 8f5d7f8387
commit 6d4d6efe3f
1 changed files with 39 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
packages/widgets/src/indexer-manager/component.tsx
View File

@@ -16,9 +16,6 @@ export default function IndexerManagerWidget({
integrationIds,
serverData,
}: WidgetComponentProps<"indexerManager">) {
if (integrationIds.length === 0) {
throw new NoIntegrationSelectedError();
}
const t = useI18n();
const [indexersData, setIndexersData] = useState<{ integrationId: string; indexers: Indexer[] }[]>(
serverData?.initialData ?? [],
@@ -39,26 +36,49 @@ export default function IndexerManagerWidget({
},
);
const iconStyle = { height: "7.5cqmin", width: "7.5cqmin" };
if (integrationIds.length === 0) {
throw new NoIntegrationSelectedError();
}
return (
<Flex h="100%" direction="column">
<Text size="6.5cqmin" mt="1.5cqmin" pl="20cqmin">
<IconReportSearch size="7cqmin" /> {t("widget.indexerManager.title")}
<Flex className="indexer-manager-container" h="100%" direction="column" gap="2.5cqmin" p="2.5cqmin" align="center">
<Text className="indexer-manager-title" size="6.5cqmin">
<IconReportSearch className="indexer-manager-title-icon" size="7cqmin" /> {t("widget.indexerManager.title")}
</Text>
<Card m="2.5cqmin" p="2.5cqmin" radius="md" withBorder>
<ScrollArea h="100%">
<Card className="indexer-manager-list-container" w="100%" p="2.5cqmin" radius="md" flex={1} withBorder>
<ScrollArea className="indexer-manager-list-scroll-area" h="100%">
{indexersData.map(({ integrationId, indexers }) => (
<Container key={integrationId}>
<Container className={`indexer-manager-${integrationId}-list-container`} p={0} key={integrationId}>
{indexers.map((indexer) => (
<Group key={indexer.id} justify="space-between">
<Anchor href={indexer.url} target={options.openIndexerSiteInNewTab ? "_blank" : "_self"}>
<Text c="dimmed" size="xs">
<Group
className={`indexer-manager-line indexer-manager-${indexer.name}`}
h="7.5cqmin"
key={indexer.id}
justify="space-between"
>
<Anchor
className="indexer-manager-line-anchor"
href={indexer.url}
target={options.openIndexerSiteInNewTab ? "_blank" : "_self"}
>
<Text className="indexer-manager-line-anchor-text" c="dimmed" size="5cqmin">
{indexer.name}
</Text>
</Anchor>
{indexer.status === false || indexer.enabled === false ? (
<IconCircleX color="#d9534f" />
<IconCircleX
className="indexer-manager-line-status-icon indexer-manager-line-icon-disabled"
color="#d9534f"
style={iconStyle}
/>
) : (
<IconCircleCheck color="#2ecc71" />
<IconCircleCheck
className="indexer-manager-line-status-icon indexer-manager-line-icon-enabled"
color="#2ecc71"
style={iconStyle}
/>
)}
</Group>
))}
@@ -67,11 +87,13 @@ export default function IndexerManagerWidget({
</ScrollArea>
</Card>
<Button
m="2.5cqmin"
p="2.5cqmin"
className="indexer-manager-test-button"
w="100%"
fz="5cqmin"
h="12.5cqmin"
radius="md"
variant="light"
leftSection={<IconTestPipe size={20} />}
leftSection={<IconTestPipe style={iconStyle} />}
loading={isPending}
loaderProps={{ type: "dots" }}
onClick={() => {