From e6eedefec4e5e9117941ba7040537a80df9a4cd6 Mon Sep 17 00:00:00 2001 From: Aimsucks Date: Wed, 8 Jun 2022 15:36:54 +0000 Subject: [PATCH] :sparkles: Added a shade selector Added a popover shade selector similar to the color selector, but shows primary and secondary colors to pick the desired Mantine primaryShade --- src/components/Settings/CommonSettings.tsx | 30 +------ src/components/Settings/ShadeSelector.tsx | 97 ++++++++++++++++++++++ src/pages/_app.tsx | 10 ++- src/tools/color.ts | 13 ++- src/tools/theme.ts | 4 +- src/tools/types.ts | 6 +- 6 files changed, 121 insertions(+), 39 deletions(-) create mode 100644 src/components/Settings/ShadeSelector.tsx diff --git a/src/components/Settings/CommonSettings.tsx b/src/components/Settings/CommonSettings.tsx index dd4069379..7fb23dcc7 100644 --- a/src/components/Settings/CommonSettings.tsx +++ b/src/components/Settings/CommonSettings.tsx @@ -1,12 +1,4 @@ -import { - ActionIcon, - Group, - Text, - SegmentedControl, - TextInput, - Anchor, - useMantineTheme, -} from '@mantine/core'; +import { ActionIcon, Group, Text, SegmentedControl, TextInput, Anchor } from '@mantine/core'; import { useState } from 'react'; import { IconBrandGithub as BrandGithub } from '@tabler/icons'; import { CURRENT_VERSION } from '../../../data/constants'; @@ -16,6 +8,7 @@ import ConfigChanger from '../Config/ConfigChanger'; import SaveConfigComponent from '../Config/SaveConfig'; import ModuleEnabler from './ModuleEnabler'; import { ColorSelector } from './ColorSelector'; +import { ShadeSelector } from './ShadeSelector'; export default function CommonSettings(args: any) { const { config, setConfig } = useConfig(); @@ -32,24 +25,6 @@ export default function CommonSettings(args: any) { matches.find((match) => match.value === config.settings.searchUrl)?.value ?? 'Custom' ); - const theme = useMantineTheme(); - const colors = Object.keys(theme.colors).map((color) => theme.colors[color][6]); - - const [primaryColor, setPrimaryColor] = useState(config.settings.primaryColor); - const [secondaryColor, setSecondaryColor] = useState(config.settings.secondaryColor); - - // const convertColorHexToNames = (hex: string) => { - // // Have to add some exceptions here because it's not converting cleanly - // let colorName = Object.keys(theme.colors).find((key) => theme.colors[key].includes(hex)); - // if (!colorName) { - // if (hex === '#228ae6') colorName = 'blue'; - // else if (hex === '#15abbf') colorName = 'cyan'; - // else if (hex === '#3fbf57') colorName = 'green'; - // else if (hex === '#fc7d14') colorName = 'orange'; - // } - // return colorName; - // }; - return ( @@ -98,6 +73,7 @@ export default function CommonSettings(args: any) { + ({ + swatch: theme.colors[primaryColor][i], + shade: i as MantineTheme['primaryShade'], + })); + const secondaryShades = theme.colors[secondaryColor].map((s, i) => ({ + swatch: theme.colors[secondaryColor][i], + shade: i as MantineTheme['primaryShade'], + })); + + const setConfigShade = (shade: MantineTheme['primaryShade']) => { + setPrimaryShade(shade); + setConfig({ + ...config, + settings: { + ...config.settings, + primaryShade: shade, + }, + }); + }; + + const primarySwatches = primaryShades.map(({ swatch, shade }) => ( + setConfigShade(shade)} + key={Number(shade)} + color={swatch} + size={22} + style={{ color: theme.white, cursor: 'pointer' }} + /> + )); + + const secondarySwatches = secondaryShades.map(({ swatch, shade }) => ( + setConfigShade(shade)} + key={Number(shade)} + color={swatch} + size={22} + style={{ color: theme.white, cursor: 'pointer' }} + /> + )); + + return ( + + setOpened(false)} + transitionDuration={0} + target={ + setOpened((o) => !o)} + size={22} + style={{ display: 'block', cursor: 'pointer' }} + /> + } + styles={{ + root: { + marginRight: theme.spacing.xs, + }, + body: { + backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white, + }, + arrow: { + backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white, + }, + }} + position="bottom" + placement="end" + withArrow + arrowSize={3} + > + + {primarySwatches} + {secondarySwatches} + + + Primary shade + + ); +} diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index ecdbadd00..2f5837c0e 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -3,7 +3,7 @@ import { useState } from 'react'; import { AppProps } from 'next/app'; import { getCookie, setCookies } from 'cookies-next'; import Head from 'next/head'; -import { MantineProvider, ColorScheme, ColorSchemeProvider } from '@mantine/core'; +import { MantineProvider, ColorScheme, ColorSchemeProvider, MantineTheme } from '@mantine/core'; import { NotificationsProvider } from '@mantine/notifications'; import { useHotkeys } from '@mantine/hooks'; import { ConfigProvider } from '../tools/state'; @@ -15,13 +15,16 @@ export default function App(this: any, props: AppProps & { colorScheme: ColorSch const { Component, pageProps } = props; const [colorScheme, setColorScheme] = useState(props.colorScheme); - const [primaryColor, setPrimaryColor] = useState('red'); - const [secondaryColor, setSecondaryColor] = useState('orange'); + const [primaryColor, setPrimaryColor] = useState('red'); + const [secondaryColor, setSecondaryColor] = useState('orange'); + const [primaryShade, setPrimaryShade] = useState(6); const colorTheme = { primaryColor, secondaryColor, setPrimaryColor, setSecondaryColor, + primaryShade, + setPrimaryShade, }; const toggleColorScheme = (value?: ColorScheme) => { @@ -45,6 +48,7 @@ export default function App(this: any, props: AppProps & { colorScheme: ColorSch theme={{ ...theme, primaryColor, + primaryShade, colorScheme, }} styles={{ diff --git a/src/tools/color.ts b/src/tools/color.ts index 793b11155..6e92bfab9 100644 --- a/src/tools/color.ts +++ b/src/tools/color.ts @@ -1,17 +1,22 @@ import { createContext, useContext } from 'react'; +import { MantineTheme } from '@mantine/core'; type colorThemeContextType = { - primaryColor: string; - secondaryColor: string; - setPrimaryColor: (color: string) => void; - setSecondaryColor: (color: string) => void; + primaryColor: MantineTheme['primaryColor']; + secondaryColor: MantineTheme['primaryColor']; + primaryShade: MantineTheme['primaryShade']; + setPrimaryColor: (color: MantineTheme['primaryColor']) => void; + setSecondaryColor: (color: MantineTheme['primaryColor']) => void; + setPrimaryShade: (shade: MantineTheme['primaryShade']) => void; }; export const ColorTheme = createContext({ primaryColor: 'red', secondaryColor: 'orange', + primaryShade: 6, setPrimaryColor: () => {}, setSecondaryColor: () => {}, + setPrimaryShade: () => {}, }); export function useColorTheme() { diff --git a/src/tools/theme.ts b/src/tools/theme.ts index e9df916a2..69d7b9643 100644 --- a/src/tools/theme.ts +++ b/src/tools/theme.ts @@ -1,5 +1,3 @@ import { MantineProviderProps } from '@mantine/core'; -export const theme: MantineProviderProps['theme'] = { - primaryShade: 6, -}; +export const theme: MantineProviderProps['theme'] = {}; diff --git a/src/tools/types.ts b/src/tools/types.ts index 40f233c74..6b823b3a0 100644 --- a/src/tools/types.ts +++ b/src/tools/types.ts @@ -1,12 +1,14 @@ import { OptionValues } from '../components/modules/modules'; +import { MantineTheme } from '@mantine/core'; export interface Settings { searchUrl: string; title?: string; logo?: string; favicon?: string; - primaryColor?: string; - secondaryColor?: string; + primaryColor?: MantineTheme['primaryColor']; + secondaryColor?: MantineTheme['primaryColor']; + primaryShade?: MantineTheme['primaryShade']; background?: string; }