♻️ Improved code structure for layout, remove most settings components

2023-08-01 15:23:31 +02:00
parent 6b8d94b6b5
commit 65d0b31a1a
48 changed files with 103 additions and 1575 deletions
--- a/src/components/layout/Templates/BoardLayout.tsx
+++ b/src/components/layout/Templates/BoardLayout.tsx
@@ -1,4 +1,4 @@
-import { Button, Text, Title, Tooltip, clsx } from '@mantine/core';
+import { Button, Global, Text, Title, Tooltip, clsx } from '@mantine/core';
 import { useHotkeys, useWindowEvent } from '@mantine/hooks';
 import { openContextModal } from '@mantine/modals';
 import { hideNotification, showNotification } from '@mantine/notifications';
@@ -19,8 +19,8 @@ import { useConfigContext } from '~/config/provider';
 import { env } from '~/env';
 import { api } from '~/utils/api';

-import { Background } from '../Background';
 import { HeaderActionButton } from '../Header/ActionButton';
+import { BoardHeadOverride } from '../Meta/BoardHead';
 import { MainLayout } from './MainLayout';

 type BoardLayoutProps = {
@@ -32,7 +32,8 @@ export const BoardLayout = ({ children }: BoardLayoutProps) => {

  return (
    <MainLayout headerActions={<HeaderActions />}>
-      <Background />
+      <BoardHeadOverride />
+      <BackgroundImage />
      {children}
      <style>{clsx(config?.settings.customization.customCss)}</style>
    </MainLayout>
@@ -195,3 +196,25 @@ const AddElementButton = () => {
    </Tooltip>
  );
 };
+
+const BackgroundImage = () => {
+  const { config } = useConfigContext();
+
+  if (!config?.settings.customization.backgroundImageUrl) {
+    return null;
+  }
+
+  return (
+    <Global
+      styles={{
+        body: {
+          minHeight: '100vh',
+          backgroundImage: `url('${config?.settings.customization.backgroundImageUrl}')`,
+          backgroundPosition: 'center center',
+          backgroundSize: 'cover',
+          backgroundRepeat: 'no-repeat',
+        },
+      }}
+    />
+  );
+};
--- a/src/components/layout/Templates/MainLayout.tsx
+++ b/src/components/layout/Templates/MainLayout.tsx
@@ -1,7 +1,6 @@
 import { AppShell, useMantineTheme } from '@mantine/core';

 import { MainHeader } from '../Header/Header';
-import { Head } from '../Meta/Head';

 type MainLayoutProps = {
  headerActions?: React.ReactNode;
@@ -21,7 +20,6 @@ export const MainLayout = ({ headerActions, children }: MainLayoutProps) => {
      header={<MainHeader headerActions={headerActions} />}
      className="dashboard-app-shell"
    >
-      <Head />
      {children}
    </AppShell>
  );
--- a/src/components/layout/Templates/ManageLayout.tsx
+++ b/src/components/layout/Templates/ManageLayout.tsx
@@ -33,7 +33,6 @@ import { useScreenLargerThan } from '~/hooks/useScreenLargerThan';
 import { usePackageAttributesStore } from '~/tools/client/zustands/usePackageAttributesStore';

 import { MainHeader } from '../Header/Header';
-import { CommonHeader } from '../common-header';

 interface ManageLayoutProps {
  children: ReactNode;
@@ -143,7 +142,6 @@ export const ManageLayout = ({ children }: ManageLayoutProps) => {

  return (
    <>
-      <CommonHeader />
      <AppShell
        styles={{
          root: {