From 6af5166aa581ee0e15df4924b3c1296bb9d01966 Mon Sep 17 00:00:00 2001 From: Aimsucks Date: Tue, 7 Jun 2022 00:07:56 +0000 Subject: [PATCH 1/6] =?UTF-8?q?=E2=9C=A8=20Ability=20to=20change=20title?= =?UTF-8?q?=20and=20icons?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Settings/AdvancedSettings.tsx | 49 ++++++ src/components/Settings/SettingsMenu.tsx | 173 ++++++++++--------- src/components/layout/HeaderConfig.tsx | 14 ++ src/components/layout/Logo.tsx | 8 +- src/tools/getConfig.ts | 3 + src/tools/state.tsx | 10 +- src/tools/types.ts | 3 + 7 files changed, 174 insertions(+), 86 deletions(-) create mode 100644 src/components/Settings/AdvancedSettings.tsx create mode 100644 src/components/layout/HeaderConfig.tsx diff --git a/src/components/Settings/AdvancedSettings.tsx b/src/components/Settings/AdvancedSettings.tsx new file mode 100644 index 000000000..63c242176 --- /dev/null +++ b/src/components/Settings/AdvancedSettings.tsx @@ -0,0 +1,49 @@ +import { TextInput, Group, Button } from '@mantine/core'; +import { useState } from 'react'; +import { useConfig } from '../../tools/state'; + +export default function TitleChanger() { + const { config, loadConfig, setConfig, getConfigs } = useConfig(); + const [customTitle, setCustomTitle] = useState(config.title); + const [customLogo, setCustomLogo] = useState(config.logo); + const [customFavicon, setCustomFavicon] = useState(config.favicon); + + const saveChanges = () => { + setConfig({ + ...config, + title: customTitle || "Homarr 🦞", + logo: customLogo || "/imgs/logo.png", + favicon: customFavicon || "/favicon.svg", + }); + } + + return ( + + setCustomTitle(event.currentTarget.value)} + /> + setCustomLogo(event.currentTarget.value)} + /> + setCustomFavicon(event.currentTarget.value)} + /> + + + ); +} diff --git a/src/components/Settings/SettingsMenu.tsx b/src/components/Settings/SettingsMenu.tsx index 956db2ec7..2cdb79db9 100644 --- a/src/components/Settings/SettingsMenu.tsx +++ b/src/components/Settings/SettingsMenu.tsx @@ -8,6 +8,7 @@ import { TextInput, Drawer, Anchor, + Tabs } from '@mantine/core'; import { useColorScheme, useHotkeys } from '@mantine/hooks'; import { useState } from 'react'; @@ -18,6 +19,7 @@ import { ColorSchemeSwitch } from '../ColorSchemeToggle/ColorSchemeSwitch'; import ConfigChanger from '../Config/ConfigChanger'; import SaveConfigComponent from '../Config/SaveConfig'; import ModuleEnabler from './ModuleEnabler'; +import AdvancedSettings from './AdvancedSettings'; function SettingsMenu(props: any) { const { config, setConfig } = useConfig(); @@ -37,95 +39,102 @@ function SettingsMenu(props: any) { ); return ( - - - Search engine - { - setSearchUrl(e); - setConfig({ - ...config, - settings: { - ...config.settings, - searchUrl: e, - }, - }); - } - } - data={matches} - /> - {searchUrl === 'Custom' && ( - { - setCustomSearchUrl(event.currentTarget.value); - setConfig({ - ...config, - settings: { - ...config.settings, - searchUrl: event.currentTarget.value, - }, - }); - }} - /> - )} - - - - - - - Tip: You can upload your config file by dragging and dropping it onto the page! - - - - component="a" href="https://github.com/ajnart/homarr" size="lg"> - - + + + + + Search engine + { + setSearchUrl(e); + setConfig({ + ...config, + settings: { + ...config.settings, + searchUrl: e, + }, + }); + } + } + data={matches} + /> + {searchUrl === 'Custom' && ( + { + setCustomSearchUrl(event.currentTarget.value); + setConfig({ + ...config, + settings: { + ...config.settings, + searchUrl: event.currentTarget.value, + }, + }); + }} + /> + )} + + + + + - {CURRENT_VERSION} + Tip: You can upload your config file by dragging and dropping it onto the page! + + + component="a" href="https://github.com/ajnart/homarr" size="lg"> + + + + {CURRENT_VERSION} + + + + Made with ❤️ by @ + + ajnart + + + - - Made with ❤️ by @ - - ajnart - - - - + + + + + ); } diff --git a/src/components/layout/HeaderConfig.tsx b/src/components/layout/HeaderConfig.tsx new file mode 100644 index 000000000..277dc73bb --- /dev/null +++ b/src/components/layout/HeaderConfig.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import Head from 'next/head'; +import { useConfig } from '../../tools/state'; + +export function HeaderConfig(props: any) { + const { config } = useConfig(); + + return ( + + {config.title ?? "Homarr 🦞"} + + + ); +} diff --git a/src/components/layout/Logo.tsx b/src/components/layout/Logo.tsx index 2c37a6f99..4b1e4c442 100644 --- a/src/components/layout/Logo.tsx +++ b/src/components/layout/Logo.tsx @@ -1,13 +1,16 @@ import { Group, Image, Text } from '@mantine/core'; import { NextLink } from '@mantine/next'; import * as React from 'react'; +import { useConfig } from '../../tools/state'; export function Logo({ style }: any) { + const { config } = useConfig(); + return ( - Homarr + {/* Added the .replace to remove emojis because they get screwed up by the gradient */} + {config.title.replace(/([\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g, '') ?? "Homarr"} diff --git a/src/tools/getConfig.ts b/src/tools/getConfig.ts index 64082af04..8fd1815a2 100644 --- a/src/tools/getConfig.ts +++ b/src/tools/getConfig.ts @@ -10,6 +10,9 @@ export function getConfig(name: string) { configName: name, config: { name: name.toString(), + title: 'Homarr 🦞', + logo: '/imgs/logo.png', + favicon: '/favicon.svg', services: [], settings: { searchUrl: 'https://www.google.com/search?q=', diff --git a/src/tools/state.tsx b/src/tools/state.tsx index 21e4da1dc..e0b108591 100644 --- a/src/tools/state.tsx +++ b/src/tools/state.tsx @@ -15,14 +15,17 @@ type configContextType = { const configContext = createContext({ config: { name: 'default', + title: 'Homarr 🦞', + logo: '/imgs/logo.png', + favicon: '/favicon.svg', services: [], settings: { searchUrl: 'https://google.com/search?q=', }, modules: {}, }, - setConfig: () => {}, - loadConfig: async (name: string) => {}, + setConfig: () => { }, + loadConfig: async (name: string) => { }, getConfigs: async () => [], }); @@ -41,6 +44,9 @@ type Props = { export function ConfigProvider({ children }: Props) { const [config, setConfigInternal] = useState({ name: 'default', + title: 'Homarr 🦞', + logo: '/imgs/logo.png', + favicon: '/favicon.svg', services: [], settings: { searchUrl: 'https://www.google.com/search?q=', diff --git a/src/tools/types.ts b/src/tools/types.ts index d8058f044..5820ed3b5 100644 --- a/src/tools/types.ts +++ b/src/tools/types.ts @@ -6,6 +6,9 @@ export interface Settings { export interface Config { name: string; + title: string; + logo: string; + favicon: string; services: serviceItem[]; settings: Settings; modules: { From 838f1969379604896e32106c143eaf8a45fed61f Mon Sep 17 00:00:00 2001 From: Aimsucks Date: Tue, 7 Jun 2022 01:35:50 +0000 Subject: [PATCH 2/6] :sparkles: Ability to change title and icons V2! Results of criticism in pull request #182 --- src/components/Settings/AdvancedSettings.tsx | 61 ++++++++------------ src/components/layout/HeaderConfig.tsx | 4 +- src/components/layout/Layout.tsx | 8 +-- src/components/layout/Logo.tsx | 5 +- src/tools/state.tsx | 16 ++--- src/tools/types.ts | 6 +- 6 files changed, 43 insertions(+), 57 deletions(-) diff --git a/src/components/Settings/AdvancedSettings.tsx b/src/components/Settings/AdvancedSettings.tsx index 63c242176..5097c5823 100644 --- a/src/components/Settings/AdvancedSettings.tsx +++ b/src/components/Settings/AdvancedSettings.tsx @@ -1,49 +1,38 @@ import { TextInput, Group, Button } from '@mantine/core'; -import { useState } from 'react'; +import { useForm } from '@mantine/form'; import { useConfig } from '../../tools/state'; export default function TitleChanger() { const { config, loadConfig, setConfig, getConfigs } = useConfig(); - const [customTitle, setCustomTitle] = useState(config.title); - const [customLogo, setCustomLogo] = useState(config.logo); - const [customFavicon, setCustomFavicon] = useState(config.favicon); - const saveChanges = () => { + const form = useForm({ + initialValues: { + title: config.settings.title, + logo: config.settings.logo, + favicon: config.settings.favicon, + }, + }); + + const saveChanges = (values: { title: string; logo: string; favicon: string }) => { setConfig({ ...config, - title: customTitle || "Homarr 🦞", - logo: customLogo || "/imgs/logo.png", - favicon: customFavicon || "/favicon.svg", + settings: { + ...config.settings, + title: values.title, + logo: values.logo, + favicon: values.favicon, + }, }); - } + }; return ( - - setCustomTitle(event.currentTarget.value)} - /> - setCustomLogo(event.currentTarget.value)} - /> - setCustomFavicon(event.currentTarget.value)} - /> - - +
saveChanges(values))}> + + + + + + + ); } diff --git a/src/components/layout/HeaderConfig.tsx b/src/components/layout/HeaderConfig.tsx index 277dc73bb..ed5a7804f 100644 --- a/src/components/layout/HeaderConfig.tsx +++ b/src/components/layout/HeaderConfig.tsx @@ -7,8 +7,8 @@ export function HeaderConfig(props: any) { return ( - {config.title ?? "Homarr 🦞"} - + {config.settings.title || 'Homarr 🦞'} + ); } diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx index 8b82b4a74..d9ccbccb7 100644 --- a/src/components/layout/Layout.tsx +++ b/src/components/layout/Layout.tsx @@ -2,6 +2,7 @@ import { AppShell, createStyles } from '@mantine/core'; import { Header } from './Header'; import { Footer } from './Footer'; import Aside from './Aside'; +import { HeaderConfig } from './HeaderConfig'; const useStyles = createStyles((theme) => ({ main: {}, @@ -10,11 +11,8 @@ const useStyles = createStyles((theme) => ({ export default function Layout({ children, style }: any) { const { classes, cx } = useStyles(); return ( - } - header={
} - footer={