From de5c34ab079c308c80cc3b1ba8f9c8a265e3a1c3 Mon Sep 17 00:00:00 2001 From: Andre Silva <32734153+Aandree5@users.noreply.github.com> Date: Wed, 19 Feb 2025 19:45:12 +0000 Subject: [PATCH] feat(board): allow to set icon color of widgets (#2228) Co-authored-by: Andre Silva --- .../app/[locale]/boards/(content)/_theme.tsx | 3 +- .../boards/[name]/settings/_appereance.tsx | 7 + packages/api/src/router/board.ts | 1 + .../migrations/mysql/0027_acoustic_karma.sql | 1 + .../migrations/mysql/meta/0027_snapshot.json | 1826 +++++++++++++++++ .../db/migrations/mysql/meta/_journal.json | 7 + .../sqlite/0027_wooden_blizzard.sql | 1 + .../migrations/sqlite/meta/0027_snapshot.json | 1751 ++++++++++++++++ .../db/migrations/sqlite/meta/_journal.json | 7 + packages/db/schema/mysql.ts | 1 + packages/db/schema/sqlite.ts | 1 + packages/translation/src/lang/en.json | 3 + packages/ui/src/components/index.tsx | 2 + .../ui/src/components/masked-image.module.css | 3 + packages/ui/src/components/masked-image.tsx | 49 + .../src/components/masked-or-normal-image.tsx | 55 + packages/validation/src/board.ts | 6 + packages/widgets/src/app/app.module.css | 6 +- packages/widgets/src/app/component.tsx | 14 +- .../widgets/src/bookmarks/bookmark.module.css | 4 + packages/widgets/src/bookmarks/component.tsx | 41 +- .../src/dns-hole/controls/component.tsx | 37 +- pnpm-lock.yaml | 2 +- 23 files changed, 3790 insertions(+), 38 deletions(-) create mode 100644 packages/db/migrations/mysql/0027_acoustic_karma.sql create mode 100644 packages/db/migrations/mysql/meta/0027_snapshot.json create mode 100644 packages/db/migrations/sqlite/0027_wooden_blizzard.sql create mode 100644 packages/db/migrations/sqlite/meta/0027_snapshot.json create mode 100644 packages/ui/src/components/masked-image.module.css create mode 100644 packages/ui/src/components/masked-image.tsx create mode 100644 packages/ui/src/components/masked-or-normal-image.tsx diff --git a/apps/nextjs/src/app/[locale]/boards/(content)/_theme.tsx b/apps/nextjs/src/app/[locale]/boards/(content)/_theme.tsx index bde65aa42..76d68a6b3 100644 --- a/apps/nextjs/src/app/[locale]/boards/(content)/_theme.tsx +++ b/apps/nextjs/src/app/[locale]/boards/(content)/_theme.tsx @@ -2,7 +2,7 @@ import type { PropsWithChildren } from "react"; import type { MantineColorsTuple } from "@mantine/core"; -import { createTheme, darken, lighten, MantineProvider } from "@mantine/core"; +import { colorsTuple, createTheme, darken, lighten, MantineProvider } from "@mantine/core"; import { useRequiredBoard } from "@homarr/boards/context"; import type { ColorScheme } from "@homarr/definitions"; @@ -20,6 +20,7 @@ export const BoardMantineProvider = ({ colors: { primaryColor: generateColors(board.primaryColor), secondaryColor: generateColors(board.secondaryColor), + iconColor: board.iconColor ? generateColors(board.iconColor) : colorsTuple("#000000"), }, primaryColor: "primaryColor", autoContrast: true, diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_appereance.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_appereance.tsx index b403843fb..b96d99a88 100644 --- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_appereance.tsx +++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_appereance.tsx @@ -40,6 +40,7 @@ export const ColorSettingsContent = ({ board }: Props) => { primaryColor: board.primaryColor, secondaryColor: board.secondaryColor, opacity: board.opacity, + iconColor: board.iconColor ?? "", itemRadius: board.itemRadius, }, }); @@ -101,6 +102,12 @@ export const ColorSettingsContent = ({ board }: Props) => { + color[6])} + {...form.getInputProps("iconColor")} + />