mirror of
https://github.com/ajnart/homarr.git
synced 2025-11-11 07:55:52 +01:00
🎨 Refactored dashboard-view
This commit is contained in:
Meierschlumpf
@@ -17,67 +17,6 @@
|
|||||||
}
|
}
|
||||||
],
|
],
|
||||||
"apps": [
|
"apps": [
|
||||||
{
|
|
||||||
"id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33a",
|
|
||||||
"name": "Documentation",
|
|
||||||
"url": "https://homarr.dev",
|
|
||||||
"behaviour": {
|
|
||||||
"onClickUrl": "https://homarr.dev",
|
|
||||||
"externalUrl": "https://homarr.dev",
|
|
||||||
"isOpeningNewTab": true
|
|
||||||
},
|
|
||||||
"network": {
|
|
||||||
"enabledStatusChecker": false,
|
|
||||||
"okStatus": [
|
|
||||||
200
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"appearance": {
|
|
||||||
"iconUrl": "/imgs/logo/logo.png"
|
|
||||||
},
|
|
||||||
"integration": {
|
|
||||||
"type": null,
|
|
||||||
"properties": []
|
|
||||||
},
|
|
||||||
"area": {
|
|
||||||
"type": "category",
|
|
||||||
"properties": {
|
|
||||||
"id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33f"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"shape": {
|
|
||||||
"md": {
|
|
||||||
"location": {
|
|
||||||
"x": 0,
|
|
||||||
"y": 10
|
|
||||||
},
|
|
||||||
"size": {
|
|
||||||
"width": 1,
|
|
||||||
"height": 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"sm": {
|
|
||||||
"location": {
|
|
||||||
"x": 0,
|
|
||||||
"y": 10
|
|
||||||
},
|
|
||||||
"size": {
|
|
||||||
"width": 2,
|
|
||||||
"height": 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"lg": {
|
|
||||||
"location": {
|
|
||||||
"x": 3,
|
|
||||||
"y": 1
|
|
||||||
},
|
|
||||||
"size": {
|
|
||||||
"width": 1,
|
|
||||||
"height": 1
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"id": "5df743d9-5cb1-457c-85d2-64ff86855652",
|
"id": "5df743d9-5cb1-457c-85d2-64ff86855652",
|
||||||
"name": "Your app",
|
"name": "Your app",
|
||||||
@@ -136,67 +75,6 @@
|
|||||||
"properties": []
|
"properties": []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a990",
|
|
||||||
"name": "Donate",
|
|
||||||
"url": "https://ko-fi.com/ajnart",
|
|
||||||
"behaviour": {
|
|
||||||
"onClickUrl": "https://ko-fi.com/ajnart",
|
|
||||||
"externalUrl": "https://ko-fi.com/ajnart",
|
|
||||||
"isOpeningNewTab": true
|
|
||||||
},
|
|
||||||
"network": {
|
|
||||||
"enabledStatusChecker": false,
|
|
||||||
"okStatus": [
|
|
||||||
200
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"appearance": {
|
|
||||||
"iconUrl": "https://uploads-ssl.webflow.com/5c14e387dab576fe667689cf/61e1116779fc0a9bd5bdbcc7_Frame%206.png"
|
|
||||||
},
|
|
||||||
"integration": {
|
|
||||||
"type": null,
|
|
||||||
"properties": []
|
|
||||||
},
|
|
||||||
"area": {
|
|
||||||
"type": "sidebar",
|
|
||||||
"properties": {
|
|
||||||
"location": "left"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"shape": {
|
|
||||||
"md": {
|
|
||||||
"location": {
|
|
||||||
"x": 1,
|
|
||||||
"y": 0
|
|
||||||
},
|
|
||||||
"size": {
|
|
||||||
"width": 1,
|
|
||||||
"height": 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"sm": {
|
|
||||||
"location": {
|
|
||||||
"x": 1,
|
|
||||||
"y": 0
|
|
||||||
},
|
|
||||||
"size": {
|
|
||||||
"width": 1,
|
|
||||||
"height": 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"lg": {
|
|
||||||
"location": {
|
|
||||||
"x": 1,
|
|
||||||
"y": 0
|
|
||||||
},
|
|
||||||
"size": {
|
|
||||||
"width": 1,
|
|
||||||
"height": 1
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a330",
|
"id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a330",
|
||||||
"name": "Contribute",
|
"name": "Contribute",
|
||||||
@@ -377,6 +255,128 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a990",
|
||||||
|
"name": "Donate",
|
||||||
|
"url": "https://ko-fi.com/ajnart",
|
||||||
|
"behaviour": {
|
||||||
|
"onClickUrl": "https://ko-fi.com/ajnart",
|
||||||
|
"externalUrl": "https://ko-fi.com/ajnart",
|
||||||
|
"isOpeningNewTab": true
|
||||||
|
},
|
||||||
|
"network": {
|
||||||
|
"enabledStatusChecker": false,
|
||||||
|
"okStatus": [
|
||||||
|
200
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"appearance": {
|
||||||
|
"iconUrl": "https://uploads-ssl.webflow.com/5c14e387dab576fe667689cf/61e1116779fc0a9bd5bdbcc7_Frame%206.png"
|
||||||
|
},
|
||||||
|
"integration": {
|
||||||
|
"type": null,
|
||||||
|
"properties": []
|
||||||
|
},
|
||||||
|
"area": {
|
||||||
|
"type": "sidebar",
|
||||||
|
"properties": {
|
||||||
|
"location": "left"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"shape": {
|
||||||
|
"md": {
|
||||||
|
"location": {
|
||||||
|
"x": 1,
|
||||||
|
"y": 0
|
||||||
|
},
|
||||||
|
"size": {
|
||||||
|
"width": 1,
|
||||||
|
"height": 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"sm": {
|
||||||
|
"location": {
|
||||||
|
"x": 1,
|
||||||
|
"y": 0
|
||||||
|
},
|
||||||
|
"size": {
|
||||||
|
"width": 1,
|
||||||
|
"height": 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"lg": {
|
||||||
|
"location": {
|
||||||
|
"x": 1,
|
||||||
|
"y": 0
|
||||||
|
},
|
||||||
|
"size": {
|
||||||
|
"width": 1,
|
||||||
|
"height": 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33a",
|
||||||
|
"name": "Documentation",
|
||||||
|
"url": "https://homarr.dev",
|
||||||
|
"behaviour": {
|
||||||
|
"onClickUrl": "https://homarr.dev",
|
||||||
|
"externalUrl": "https://homarr.dev",
|
||||||
|
"isOpeningNewTab": true
|
||||||
|
},
|
||||||
|
"network": {
|
||||||
|
"enabledStatusChecker": false,
|
||||||
|
"okStatus": [
|
||||||
|
200
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"appearance": {
|
||||||
|
"iconUrl": "/imgs/logo/logo.png"
|
||||||
|
},
|
||||||
|
"integration": {
|
||||||
|
"type": null,
|
||||||
|
"properties": []
|
||||||
|
},
|
||||||
|
"area": {
|
||||||
|
"type": "category",
|
||||||
|
"properties": {
|
||||||
|
"id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33f"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"shape": {
|
||||||
|
"md": {
|
||||||
|
"location": {
|
||||||
|
"x": 0,
|
||||||
|
"y": 10
|
||||||
|
},
|
||||||
|
"size": {
|
||||||
|
"width": 1,
|
||||||
|
"height": 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"sm": {
|
||||||
|
"location": {
|
||||||
|
"x": 0,
|
||||||
|
"y": 10
|
||||||
|
},
|
||||||
|
"size": {
|
||||||
|
"width": 2,
|
||||||
|
"height": 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"lg": {
|
||||||
|
"location": {
|
||||||
|
"x": 3,
|
||||||
|
"y": 1
|
||||||
|
},
|
||||||
|
"size": {
|
||||||
|
"width": 1,
|
||||||
|
"height": 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"id": "e41a11f5-9c6e-41bc-ac0e-4c4c47582faa",
|
"id": "e41a11f5-9c6e-41bc-ac0e-4c4c47582faa",
|
||||||
"name": "Your app",
|
"name": "Your app",
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ import { Center, Group, Loader, Stack } from '@mantine/core';
|
|||||||
import { useEffect, useMemo, useRef } from 'react';
|
import { useEffect, useMemo, useRef } from 'react';
|
||||||
import { useConfigContext } from '../../../config/provider';
|
import { useConfigContext } from '../../../config/provider';
|
||||||
import { useResize } from '../../../hooks/use-resize';
|
import { useResize } from '../../../hooks/use-resize';
|
||||||
import { useScreenSmallerThan } from '../../../hooks/useScreenSmallerThan';
|
import { useScreenLargerThan } from '../../../hooks/useScreenLargerThan';
|
||||||
import { CategoryType } from '../../../types/category';
|
import { CategoryType } from '../../../types/category';
|
||||||
import { WrapperType } from '../../../types/wrapper';
|
import { WrapperType } from '../../../types/wrapper';
|
||||||
import { DashboardCategory } from '../Wrappers/Category/Category';
|
import { DashboardCategory } from '../Wrappers/Category/Category';
|
||||||
@@ -12,11 +12,43 @@ import { DashboardWrapper } from '../Wrappers/Wrapper/Wrapper';
|
|||||||
|
|
||||||
export const DashboardView = () => {
|
export const DashboardView = () => {
|
||||||
const wrappers = useWrapperItems();
|
const wrappers = useWrapperItems();
|
||||||
const layoutSettings = useConfigContext()?.config?.settings.customization.layout;
|
const sidebarsVisible = useSidebarVisibility();
|
||||||
const doNotShowSidebar = useScreenSmallerThan('md');
|
const { isReady, mainAreaRef } = usePrepareGridstack();
|
||||||
const notReady = typeof doNotShowSidebar === 'undefined';
|
|
||||||
|
return (
|
||||||
|
<Group align="top" h="100%">
|
||||||
|
{sidebarsVisible.isLoading ?
|
||||||
|
<Center w="100%">
|
||||||
|
<Loader />
|
||||||
|
</Center>
|
||||||
|
:
|
||||||
|
<>
|
||||||
|
{sidebarsVisible.left ? (
|
||||||
|
<DashboardSidebar location="left" isGridstackReady={isReady} />
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<Stack ref={mainAreaRef} mx={-10} style={{ flexGrow: 1 }}>
|
||||||
|
{!isReady ? null : wrappers.map((item) =>
|
||||||
|
item.type === 'category' ? (
|
||||||
|
<DashboardCategory key={item.id} category={item as unknown as CategoryType} />
|
||||||
|
) : (
|
||||||
|
<DashboardWrapper key={item.id} wrapper={item as WrapperType} />
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</Stack>
|
||||||
|
|
||||||
|
{sidebarsVisible.right ? (
|
||||||
|
<DashboardSidebar location="right" isGridstackReady={isReady} />
|
||||||
|
) : null}
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
</Group>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const usePrepareGridstack = () => {
|
||||||
const mainAreaRef = useRef<HTMLDivElement>(null);
|
const mainAreaRef = useRef<HTMLDivElement>(null);
|
||||||
const { width } = useResize(mainAreaRef, [doNotShowSidebar]);
|
const { width } = useResize(mainAreaRef, []);
|
||||||
const setMainAreaWidth = useGridstackStore(x => x.setMainAreaWidth);
|
const setMainAreaWidth = useGridstackStore(x => x.setMainAreaWidth);
|
||||||
const mainAreaWidth = useGridstackStore(x => x.mainAreaWidth);
|
const mainAreaWidth = useGridstackStore(x => x.mainAreaWidth);
|
||||||
|
|
||||||
@@ -25,30 +57,23 @@ export const DashboardView = () => {
|
|||||||
setMainAreaWidth(width);
|
setMainAreaWidth(width);
|
||||||
}, [width]);
|
}, [width]);
|
||||||
|
|
||||||
return (
|
return {
|
||||||
<Group align="top" h="100%">
|
isReady: !!mainAreaWidth,
|
||||||
{notReady ? <Center w="100%">
|
mainAreaRef,
|
||||||
<Loader />
|
};
|
||||||
</Center> : <>
|
};
|
||||||
{layoutSettings?.enabledLeftSidebar && !doNotShowSidebar ? (
|
|
||||||
<DashboardSidebar location="left" isGridstackReady={!!mainAreaWidth} />
|
const useSidebarVisibility = () => {
|
||||||
) : null}
|
const layoutSettings = useConfigContext()?.config?.settings.customization.layout;
|
||||||
<Stack ref={mainAreaRef} mx={-10} style={{ flexGrow: 1 }}>
|
const screenLargerThanMd = useScreenLargerThan('md'); // For smaller screens mobile ribbons are displayed with drawers
|
||||||
{!mainAreaWidth ? null : wrappers.map((item) =>
|
|
||||||
item.type === 'category' ? (
|
const isScreenSizeUnknown = typeof screenLargerThanMd === 'undefined';
|
||||||
<DashboardCategory key={item.id} category={item as unknown as CategoryType} />
|
|
||||||
) : (
|
return {
|
||||||
<DashboardWrapper key={item.id} wrapper={item as WrapperType} />
|
right: layoutSettings?.enabledRightSidebar && screenLargerThanMd,
|
||||||
)
|
left: layoutSettings?.enabledLeftSidebar && screenLargerThanMd,
|
||||||
)}
|
isLoading: isScreenSizeUnknown,
|
||||||
</Stack>
|
};
|
||||||
{layoutSettings?.enabledRightSidebar && !doNotShowSidebar ? (
|
|
||||||
<DashboardSidebar location="right" isGridstackReady={!!mainAreaWidth} />
|
|
||||||
) : null}
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
</Group>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const useWrapperItems = () => {
|
const useWrapperItems = () => {
|
||||||
|
|||||||
Reference in New Issue
Block a user