Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-10 07:25:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

🐛 fix dash. layout bugs & compact mode

Browse Source
This commit is contained in:
Manuel
2022-09-09 21:09:47 +02:00
parent bcdbb0dd37
commit 6ab15763ff
1 changed files with 13 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/modules/dashdot/DashdotModule.tsx
View File

@@ -28,13 +28,7 @@ export const DashdotModule = asModule({
graphs: { graphs: {
name: 'descriptor.settings.graphs.label', name: 'descriptor.settings.graphs.label',
value: ['CPU', 'RAM', 'Storage', 'Network'], value: ['CPU', 'RAM', 'Storage', 'Network'],
options: [ options: ['CPU', 'RAM', 'Storage', 'Network', 'GPU'],
'CPU',
'RAM',
'Storage',
'Network',
'GPU',
],
}, },
url: { url: {
name: 'descriptor.settings.url.label', name: 'descriptor.settings.url.label',
@@ -126,8 +120,7 @@ export function DashdotComponent() {
const { classes } = useStyles(); const { classes } = useStyles();
const { colorScheme } = useMantineColorScheme(); const { colorScheme } = useMantineColorScheme();
const dashConfig = config.modules?.[DashdotModule.id] const dashConfig = config.modules?.[DashdotModule.id].options as typeof DashdotModule['options'];
.options as typeof DashdotModule['options'];
const isCompact = dashConfig?.useCompactView?.value ?? false; const isCompact = dashConfig?.useCompactView?.value ?? false;
const dashdotService: serviceItem | undefined = config.services.filter( const dashdotService: serviceItem | undefined = config.services.filter(
(service) => service.type === 'Dash.' (service) => service.type === 'Dash.'
@@ -159,7 +152,7 @@ export function DashdotComponent() {
}, },
}, },
{ {
name: t('card.graphs.cpu.title'), name: t('card.graphs.storage.title'),
enabled: storageEnabled && !isCompact, enabled: storageEnabled && !isCompact,
params: { params: {
multiView: dashConfig?.storageMultiView?.value ?? false, multiView: dashConfig?.storageMultiView?.value ?? false,
@@ -222,19 +215,21 @@ export function DashdotComponent() {
</div> </div>
{graphs.map((graph) => ( {graphs.map((graph) => (
<Stack> <Stack
style={
isCompact
? {
width: graph.spanTwo ? '100%' : 'calc(50% - 5px)',
position: 'relative',
}
: undefined
}
>
<Title style={{ position: 'absolute', right: 0 }} order={4} mt={10} mr={25}> <Title style={{ position: 'absolute', right: 0 }} order={4} mt={10} mr={25}>
{graph.name} {graph.name}
</Title> </Title>
<iframe <iframe
className={classes.iframe} className={classes.iframe}
style={
isCompact
? {
width: graph.spanTwo ? '100%' : 'calc(50% - 5px)',
}
: undefined
}
key={graph.name} key={graph.name}
title={graph.name} title={graph.name}
src={`${dashdotUrl}?singleGraphMode=true&graph=${graph.name.toLowerCase()}&theme=${colorScheme}&surface=${(colorScheme === src={`${dashdotUrl}?singleGraphMode=true&graph=${graph.name.toLowerCase()}&theme=${colorScheme}&surface=${(colorScheme ===