Mirrored_Repos/InvenTree
1
0
Fork 0
mirror of https://github.com/inventree/InvenTree synced 2024-08-30 18:33:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make Category tree theme-aware (#6523)

Browse Source
This commit is contained in:
Lavissa 2024-02-20 01:32:19 +01:00 committed by GitHub
parent ebe01530e6
commit 41f09f7578
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 62 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/frontend/src/components/nav/PartCategoryTree.tsx
View File

@ -1,6 +1,13 @@
import { t } from '@lingui/macro';
import { Drawer, Group, LoadingOverlay, Stack, Text } from '@mantine/core';
import { ReactTree } from '@naisutech/react-tree';
import {
Drawer,
Group,
LoadingOverlay,
Stack,
Text,
useMantineTheme
} from '@mantine/core';
import { ReactTree, ThemeSettings } from '@naisutech/react-tree';
import { IconSitemap } from '@tabler/icons-react';
import { useQuery } from '@tanstack/react-query';
import { useNavigate } from 'react-router-dom';
@ -37,7 +44,7 @@ export function PartCategoryTree({
})
)
.catch((error) => {
console.error('Error fetching part categpry tree:', error);
console.error('Error fetching part category tree:', error);
return error;
}),
refetchOnMount: true
@ -59,6 +66,56 @@ export function PartCategoryTree({
);
}
const mantineTheme = useMantineTheme();
const currentTheme =
mantineTheme.colorScheme === 'dark'
? mantineTheme.colorScheme
: mantineTheme.primaryColor;
const themes: ThemeSettings = {
dark: {
text: {
...mantineTheme.fn.fontStyles()
},
nodes: {
height: '2.5rem',
folder: {
selectedBgColor: mantineTheme.colors[currentTheme][4],
hoverBgColor: mantineTheme.colors[currentTheme][6]
},
leaf: {
selectedBgColor: mantineTheme.colors[currentTheme][4],
hoverBgColor: mantineTheme.colors[currentTheme][6]
},
icons: {
folderColor: mantineTheme.colors[currentTheme][3],
leafColor: mantineTheme.colors[currentTheme][3]
}
}
},
light: {
text: {
...mantineTheme.fn.fontStyles()
},
nodes: {
height: '2.5rem',
folder: {
selectedBgColor: mantineTheme.colors[currentTheme][4],
hoverBgColor: mantineTheme.colors[currentTheme][2]
},
leaf: {
bgColor: 'initial',
selectedBgColor: mantineTheme.colors[currentTheme][4],
hoverBgColor: mantineTheme.colors[currentTheme][2]
},
icons: {
folderColor: mantineTheme.colors[currentTheme][8],
leafColor: mantineTheme.colors[currentTheme][6]
}
}
}
};
return (
<Drawer
opened={opened}
@ -88,6 +145,8 @@ export function PartCategoryTree({
RenderNode={renderNode}
defaultSelectedNodes={selectedCategory ? [selectedCategory] : []}
showEmptyItems={false}
theme={mantineTheme.colorScheme}
themes={themes}
/>
</Stack>
</Drawer>