From b3464b3340cf57b4f85da0dd2e1bd8e754f1bec8 Mon Sep 17 00:00:00 2001 From: Jack Weller <97435840+jackwellerreal@users.noreply.github.com> Date: Sat, 8 Mar 2025 07:56:16 +1000 Subject: [PATCH] feat(widgets): add border color option to advanced-options (#2512) * feat: add border color option for all widgets * fix: broken lockfile * fix: typecheck issue --------- Co-authored-by: Meier Lukas --- .../src/app/[locale]/widgets/[kind]/_content.tsx | 1 + .../components/board/items/actions/create-item.ts | 1 + .../items/actions/test/duplicate-item.spec.ts | 2 +- .../board/items/actions/test/mocks/item-mock.ts | 1 + .../src/components/board/items/item-content.tsx | 1 + packages/translation/src/lang/en.json | 3 +++ packages/validation/src/shared.ts | 1 + .../src/modals/widget-advanced-options-modal.tsx | 15 ++++++++++++++- packages/widgets/src/modals/widget-edit-modal.tsx | 1 + 9 files changed, 24 insertions(+), 2 deletions(-) diff --git a/apps/nextjs/src/app/[locale]/widgets/[kind]/_content.tsx b/apps/nextjs/src/app/[locale]/widgets/[kind]/_content.tsx index d31f42e9e..362236300 100644 --- a/apps/nextjs/src/app/[locale]/widgets/[kind]/_content.tsx +++ b/apps/nextjs/src/app/[locale]/widgets/[kind]/_content.tsx @@ -49,6 +49,7 @@ export const WidgetPreviewPageContent = ({ kind, integrationData }: WidgetPrevie integrationIds: [], advancedOptions: { customCssClasses: [], + borderColor: "", }, }); diff --git a/apps/nextjs/src/components/board/items/actions/create-item.ts b/apps/nextjs/src/components/board/items/actions/create-item.ts index 6525718f9..d29d407b5 100644 --- a/apps/nextjs/src/components/board/items/actions/create-item.ts +++ b/apps/nextjs/src/components/board/items/actions/create-item.ts @@ -29,6 +29,7 @@ export const createItemCallback = integrationIds: [], advancedOptions: { customCssClasses: [], + borderColor: "", }, } satisfies Modify< Item, diff --git a/apps/nextjs/src/components/board/items/actions/test/duplicate-item.spec.ts b/apps/nextjs/src/components/board/items/actions/test/duplicate-item.spec.ts index 7bb2fb7ad..88ccd781b 100644 --- a/apps/nextjs/src/components/board/items/actions/test/duplicate-item.spec.ts +++ b/apps/nextjs/src/components/board/items/actions/test/duplicate-item.spec.ts @@ -20,7 +20,7 @@ describe("item actions duplicate-item", () => { kind: itemKind, integrationIds: ["1"], options: { address: "localhost" }, - advancedOptions: { customCssClasses: ["test"] }, + advancedOptions: { customCssClasses: ["test"], borderColor: "#ff0000" }, }) .addLayout({ layoutId, sectionId: currentSectionId, ...currentItemSize }) .build(); diff --git a/apps/nextjs/src/components/board/items/actions/test/mocks/item-mock.ts b/apps/nextjs/src/components/board/items/actions/test/mocks/item-mock.ts index f7533bd56..71b84918e 100644 --- a/apps/nextjs/src/components/board/items/actions/test/mocks/item-mock.ts +++ b/apps/nextjs/src/components/board/items/actions/test/mocks/item-mock.ts @@ -14,6 +14,7 @@ export class ItemMockBuilder { integrationIds: [], advancedOptions: { customCssClasses: [], + borderColor: "", }, ...item, } satisfies Item; diff --git a/apps/nextjs/src/components/board/items/item-content.tsx b/apps/nextjs/src/components/board/items/item-content.tsx index b486a20cf..709d52182 100644 --- a/apps/nextjs/src/components/board/items/item-content.tsx +++ b/apps/nextjs/src/components/board/items/item-content.tsx @@ -40,6 +40,7 @@ export const BoardItemContent = ({ item }: BoardItemContentProps) => { "--opacity": board.opacity / 100, containerType: "size", overflow: item.kind === "iframe" ? "hidden" : undefined, + "--border-color": item.advancedOptions.borderColor !== "" ? item.advancedOptions.borderColor : undefined, }, }} p={0} diff --git a/packages/translation/src/lang/en.json b/packages/translation/src/lang/en.json index 72ed28ddc..d7d9f8697 100644 --- a/packages/translation/src/lang/en.json +++ b/packages/translation/src/lang/en.json @@ -1070,6 +1070,9 @@ }, "customCssClasses": { "label": "Custom css classes" + }, + "borderColor": { + "label": "Border color" } } }, diff --git a/packages/validation/src/shared.ts b/packages/validation/src/shared.ts index 0080254c0..733d3edef 100644 --- a/packages/validation/src/shared.ts +++ b/packages/validation/src/shared.ts @@ -15,6 +15,7 @@ export type BoardItemIntegration = z.infer; export const itemAdvancedOptionsSchema = z.object({ customCssClasses: z.array(z.string()).default([]), + borderColor: z.string().default(""), }); export type BoardItemAdvancedOptions = z.infer; diff --git a/packages/widgets/src/modals/widget-advanced-options-modal.tsx b/packages/widgets/src/modals/widget-advanced-options-modal.tsx index 674bc8f9c..f957b100a 100644 --- a/packages/widgets/src/modals/widget-advanced-options-modal.tsx +++ b/packages/widgets/src/modals/widget-advanced-options-modal.tsx @@ -1,6 +1,6 @@ "use client"; -import { Button, Group, Stack } from "@mantine/core"; +import { Button, CloseButton, ColorInput, Group, Stack, useMantineTheme } from "@mantine/core"; import { useForm } from "@homarr/form"; import { createModal } from "@homarr/modals"; @@ -15,6 +15,7 @@ interface InnerProps { export const WidgetAdvancedOptionsModal = createModal(({ actions, innerProps }) => { const t = useI18n(); + const theme = useMantineTheme(); const form = useForm({ initialValues: innerProps.advancedOptions, }); @@ -30,6 +31,18 @@ export const WidgetAdvancedOptionsModal = createModal(({ actions, in label={t("item.edit.field.customCssClasses.label")} {...form.getInputProps("customCssClasses")} /> + color[6])} + rightSection={ + form.setFieldValue("borderColor", "")} + style={{ display: form.getInputProps("borderColor").value ? undefined : "none" }} + /> + } + {...form.getInputProps("borderColor")} + />