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

✨ Add contentComponents to the main layout

Browse Source 
Return button is not inside of the header.
This commit is contained in:
ajnart
2023-08-14 10:15:12 +02:00
parent b249c0205f
commit ce5552c913
6 changed files with 31 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/locales/en/common.json
View File

@@ -3,6 +3,7 @@
"about": "About", "about": "About",
"cancel": "Cancel", "cancel": "Cancel",
"close": "Close", "close": "Close",
"back": "Back",
"delete": "Delete", "delete": "Delete",
"ok": "OK", "ok": "OK",
"edit": "Edit", "edit": "Edit",

5
src/components/layout/Templates/MainLayout.tsx
View File

@@ -4,10 +4,11 @@ import { MainHeader } from '~/components/layout/header/Header';
type MainLayoutProps = { type MainLayoutProps = {
showExperimental?: boolean; showExperimental?: boolean;
headerActions?: React.ReactNode; headerActions?: React.ReactNode;
contentComponents?: React.ReactNode;
children: React.ReactNode; children: React.ReactNode;
}; };
export const MainLayout = ({ showExperimental, headerActions, children }: MainLayoutProps) => { export const MainLayout = ({ showExperimental, headerActions, contentComponents, children }: MainLayoutProps) => {
const theme = useMantineTheme(); const theme = useMantineTheme();
return ( return (
@@ -17,7 +18,7 @@ export const MainLayout = ({ showExperimental, headerActions, children }: MainLa
background: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[1], background: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[1],
}, },
}} }}
header={<MainHeader headerActions={headerActions} showExperimental={showExperimental} />} header={<MainHeader headerActions={headerActions} contentComponents={contentComponents} showExperimental={showExperimental} />}
className="dashboard-app-shell" className="dashboard-app-shell"
> >
{children} {children}

3
src/components/layout/header/AvatarMenu.tsx
View File

@@ -41,13 +41,14 @@ export const AvatarMenu = () => {
<CurrentUserAvatar user={sessionData?.user ?? null} /> <CurrentUserAvatar user={sessionData?.user ?? null} />
</Menu.Target> </Menu.Target>
<Menu.Dropdown> <Menu.Dropdown>
<Menu.Item icon={<Icon size="1rem" />} onClick={toggleColorScheme}> <Menu.Item closeMenuOnClick={false} icon={<Icon size="1rem" />} onClick={toggleColorScheme}>
{t('actions.avatar.switchTheme')} {t('actions.avatar.switchTheme')}
</Menu.Item> </Menu.Item>
{sessionData?.user && ( {sessionData?.user && (
<> <>
<Menu.Item <Menu.Item
component={Link} component={Link}
passHref
href="/user/preferences" href="/user/preferences"
icon={<IconUserCog size="1rem" />} icon={<IconUserCog size="1rem" />}
> >

3
src/components/layout/header/Header.tsx
View File

@@ -21,6 +21,7 @@ type MainHeaderProps = {
logoHref?: string; logoHref?: string;
showExperimental?: boolean; showExperimental?: boolean;
headerActions?: React.ReactNode; headerActions?: React.ReactNode;
contentComponents?: React.ReactNode;
leftIcon?: React.ReactNode; leftIcon?: React.ReactNode;
}; };
@@ -29,6 +30,7 @@ export const MainHeader = ({
logoHref = '/', logoHref = '/',
headerActions, headerActions,
leftIcon, leftIcon,
contentComponents,
}: MainHeaderProps) => { }: MainHeaderProps) => {
const { breakpoints } = useMantineTheme(); const { breakpoints } = useMantineTheme();
const isSmallerThanMd = useMediaQuery(`(max-width: ${breakpoints.sm})`); const isSmallerThanMd = useMediaQuery(`(max-width: ${breakpoints.sm})`);
@@ -53,6 +55,7 @@ export const MainHeader = ({
<Group noWrap style={{ flex: 1 }} position="right"> <Group noWrap style={{ flex: 1 }} position="right">
<Group noWrap spacing={8}> <Group noWrap spacing={8}>
{contentComponents}
{headerActions} {headerActions}
</Group> </Group>
<AvatarMenu /> <AvatarMenu />

22
src/pages/board/[slug]/customize.tsx
View File

@@ -134,7 +134,19 @@ export default function CustomizationPage() {
})} • Homarr`; })} • Homarr`;
return ( return (
<MainLayout> <MainLayout
contentComponents={
<Button
component={Link}
passHref
href={backToBoardHref}
variant="light"
leftIcon={<IconArrowLeft size={16} />}
>
{t('backToBoard')}
</Button>
}
>
<Head> <Head>
<title>{metaTitle}</title> <title>{metaTitle}</title>
</Head> </Head>
@@ -191,14 +203,6 @@ export default function CustomizationPage() {
name: firstUpperCase(query.slug), name: firstUpperCase(query.slug),
})} })}
</Title> </Title>
<Button
component={Link}
href={backToBoardHref}
variant="light"
leftIcon={<IconArrowLeft size={16} />}
>
{t('backToBoard')}
</Button>
</Group> </Group>
<BoardCustomizationFormProvider form={form}> <BoardCustomizationFormProvider form={form}>
<Stack spacing="xl"> <Stack spacing="xl">

10
src/pages/user/preferences.tsx
View File

@@ -10,6 +10,7 @@ import {
Title, Title,
} from '@mantine/core'; } from '@mantine/core';
import { createFormContext } from '@mantine/form'; import { createFormContext } from '@mantine/form';
import { IconArrowLeft } from '@tabler/icons-react';
import { GetServerSideProps } from 'next'; import { GetServerSideProps } from 'next';
import { useTranslation } from 'next-i18next'; import { useTranslation } from 'next-i18next';
import Head from 'next/head'; import Head from 'next/head';
@@ -33,7 +34,14 @@ const PreferencesPage = () => {
const headTitle = `${t('metaTitle')} • Homarr`; const headTitle = `${t('metaTitle')} • Homarr`;
return ( return (
<MainLayout showExperimental> <MainLayout
showExperimental
contentComponents={
<Button component="a" href="/board/" variant="light" leftIcon={<IconArrowLeft size={16} />}>
{t('common:back')}
</Button>
}
>
<Container> <Container>
<Paper p="xl" mih="100%" withBorder> <Paper p="xl" mih="100%" withBorder>
<Head> <Head>