✨ Image properties customization (#1590)

src/components/Board/Customize/Appearance/AppearanceCustomization.tsx

@@ -4,9 +4,9 @@ import {
   Group,
   Input,
   MantineTheme,
+  Select,
   Slider,
   Stack,
-  Text,
   TextInput,
   createStyles,
   rem,
@@ -16,6 +16,7 @@ import { useTranslation } from 'next-i18next';
 import { highlight, languages } from 'prismjs';
 import Editor from 'react-simple-code-editor';
 import { useColorTheme } from '~/tools/color';
+import { BackgroundImageAttachment, BackgroundImageRepeat, BackgroundImageSize } from '~/types/settings';
 
 import { useBoardCustomizationFormContext } from '../form';
 
@@ -30,6 +31,32 @@ export const AppearanceCustomization = () => {
         placeholder="/imgs/backgrounds/background.png"
         {...form.getInputProps('appearance.backgroundSrc')}
       />
+      <Select
+        label={t('backgroundImageAttachment.label')}
+        data={BackgroundImageAttachment.map((attachment) => ({
+          value: attachment,
+          label: t(`backgroundImageAttachment.options.${attachment}`) as string,
+        }))}
+        {...form.getInputProps('appearance.backgroundImageAttachment')}
+      />
+
+      <Select
+        label={t('backgroundImageSize.label')}
+        data={BackgroundImageSize.map((size) => ({
+          value: size,
+          label: t(`backgroundImageSize.options.${size}`) as string,
+        }))}
+        {...form.getInputProps('appearance.backgroundImageSize')}
+      />
+
+      <Select
+        label={t('backgroundImageRepeat.label')}
+        data={BackgroundImageRepeat.map((repeat) => ({
+          value: repeat,
+          label: t(`backgroundImageRepeat.options.${repeat}`) as string,
+        }))}
+        {...form.getInputProps('appearance.backgroundImageRepeat')}
+      />
       <ColorSelector type="primaryColor" />
       <ColorSelector type="secondaryColor" />
       <ShadeSelector />

src/components/layout/Templates/BoardLayout.tsx

@@ -4,10 +4,9 @@ import { openContextModal } from '@mantine/modals';
 import { hideNotification, showNotification } from '@mantine/notifications';
 import {
   IconApps,
-  IconBrandDocker,
   IconEditCircle,
   IconEditCircleOff,
-  IconSettings,
+  IconSettings
 } from '@tabler/icons-react';
 import Consola from 'consola';
 import { useSession } from 'next-auth/react';
@@ -19,11 +18,10 @@ import { useNamedWrapperColumnCount } from '~/components/Dashboard/Wrappers/grid
 import { BoardHeadOverride } from '~/components/layout/Meta/BoardHeadOverride';
 import { HeaderActionButton } from '~/components/layout/header/ActionButton';
 import { useConfigContext } from '~/config/provider';
-import { useScreenLargerThan } from '~/hooks/useScreenLargerThan';
 import { api } from '~/utils/api';
 
-import { MainLayout } from './MainLayout';
 import { env } from 'process';
+import { MainLayout } from './MainLayout';
 
 type BoardLayoutProps = {
   children: React.ReactNode;
@@ -205,8 +203,9 @@ const BackgroundImage = () => {
           minHeight: '100vh',
           backgroundImage: `url('${config?.settings.customization.backgroundImageUrl}')`,
           backgroundPosition: 'center center',
-          backgroundSize: 'cover',
-          backgroundRepeat: 'no-repeat',
+          backgroundSize: config?.settings.customization.backgroundImageSize ?? 'cover',
+          backgroundRepeat: config?.settings.customization.backgroundImageRepeat ?? 'no-repeat',
+          backgroundAttachment: config?.settings.customization.backgroundImageAttachment ?? 'fixed'
         },
       }}
     />