diff --git a/src/common/components/organisms/FidgetSettingsEditor.tsx b/src/common/components/organisms/FidgetSettingsEditor.tsx index d741c07f..d08627df 100644 --- a/src/common/components/organisms/FidgetSettingsEditor.tsx +++ b/src/common/components/organisms/FidgetSettingsEditor.tsx @@ -70,7 +70,7 @@ const FidgetSettingsRow: React.FC = ({ return (
= ({ ) : ( // X Button and Save Button (shows first) -
+
)} diff --git a/src/common/fidgets/index.d.ts b/src/common/fidgets/index.d.ts index 78548c90..0ba303ef 100644 --- a/src/common/fidgets/index.d.ts +++ b/src/common/fidgets/index.d.ts @@ -3,9 +3,19 @@ import CSSInput from "@/common/ui/molecules/CSSInput"; import HTMLInput from "@/common/ui/molecules/HTMLInput"; import ColorSelector from "@/common/components/molecules/ColorSelector"; import FontSelector from "@/common/components/molecules/FontSelector"; -import type { ThemeSettings } from "@/common/lib/theme"; +import type { ThemeSettings, FontFamily, Color } from "@/common/lib/theme"; export type FidgetSettings = Record; +export type FidgetSettingsStyle = { + background?: Color; + fontFamily?: FontFamily; + fontColor?: Color; + headingsFontFamily?: FontFamily; + headingsFontColor?: Color; + fidgetBorderWidth?: string; + fidgetBorderColor?: Color; + fidgetShadow?: string; +}; export type FidgetData = Record; export type FidgetConfig< diff --git a/src/common/lib/theme/helpers.ts b/src/common/lib/theme/helpers.ts index 32565ced..31b6d6b4 100644 --- a/src/common/lib/theme/helpers.ts +++ b/src/common/lib/theme/helpers.ts @@ -23,7 +23,7 @@ export const SHADOW_STYLES = [ ]; export const tabListClasses = - "w-full p-0 justify-between bg-transparent rounded-none"; + "w-full p-0 justify-start bg-transparent rounded-none"; export const tabTriggerClasses = "data-[state=active]:text-blue-600 text-md data-[state=active]:shadow-none data-[state=active]:border-b data-[state=active]:rounded-none data-[state=active]:border-blue-600 data-[state=active]:border-solid px-3 py-2"; export const tabContentClasses = diff --git a/src/fidgets/example.tsx b/src/fidgets/example.tsx index cac9f50e..ea468fd1 100644 --- a/src/fidgets/example.tsx +++ b/src/fidgets/example.tsx @@ -1,10 +1,16 @@ import React, { useState } from "react"; import TextInput from "@/common/components/molecules/TextInput"; -import { FidgetArgs, FidgetProperties, FidgetModule } from "@/common/fidgets"; +import { + FidgetArgs, + FidgetProperties, + FidgetModule, + type FidgetSettingsStyle, +} from "@/common/fidgets"; +import { defaultStyleFields } from "@/fidgets/helpers"; export type ExampleFidgetSettings = { text: string; -}; +} & FidgetSettingsStyle; const exampleProperties: FidgetProperties = { fidgetName: "example", @@ -17,6 +23,7 @@ const exampleProperties: FidgetProperties = { inputSelector: TextInput, group: "settings", }, + ...defaultStyleFields, ], size: { minHeight: 1, diff --git a/src/fidgets/helpers.tsx b/src/fidgets/helpers.tsx new file mode 100644 index 00000000..ea2dcb1d --- /dev/null +++ b/src/fidgets/helpers.tsx @@ -0,0 +1,36 @@ +import ColorSelector from "@/common/components/molecules/ColorSelector"; +import BorderSelector from "@/common/components/molecules/BorderSelector"; +import ShadowSelector from "@/common/components/molecules/ShadowSelector"; + +import { type FidgetFieldConfig } from "@/common/fidgets"; + +export const defaultStyleFields: FidgetFieldConfig[] = [ + { + fieldName: "background", + default: "var(--user-theme-fidget-background)", + required: false, + inputSelector: ColorSelector, + group: "style", + }, + { + fieldName: "fidgetBorderWidth", + default: "var(--user-theme-fidget-border-width)", + required: false, + inputSelector: BorderSelector, + group: "style", + }, + { + fieldName: "fidgetBorderColor", + default: "var(--user-theme-fidget-border-color)", + required: false, + inputSelector: ColorSelector, + group: "style", + }, + { + fieldName: "fidgetShadow", + default: "var(--user-theme-fidget-shadow)", + required: false, + inputSelector: ShadowSelector, + group: "style", + }, +]; diff --git a/src/fidgets/ui/IFrame.tsx b/src/fidgets/ui/IFrame.tsx index 80c91fa9..c8571aa6 100644 --- a/src/fidgets/ui/IFrame.tsx +++ b/src/fidgets/ui/IFrame.tsx @@ -1,12 +1,18 @@ import React from "react"; import TextInput from "@/common/components/molecules/TextInput"; -import { FidgetArgs, FidgetProperties, FidgetModule } from "@/common/fidgets"; +import { + FidgetArgs, + FidgetProperties, + FidgetModule, + type FidgetSettingsStyle, +} from "@/common/fidgets"; import { isValidUrl } from "@/common/lib/utils/url"; import useSafeUrl from "@/common/lib/hooks/useSafeUrl"; +import { defaultStyleFields } from "@/fidgets/helpers"; export type IFrameFidgetSettings = { url: string; -}; +} & FidgetSettingsStyle; const DISALLOW_URL_PATTERNS = [ /javascript:/i, @@ -25,6 +31,7 @@ const frameConfig: FidgetProperties = { inputSelector: TextInput, group: "settings", }, + ...defaultStyleFields, ], size: { minHeight: 2, diff --git a/src/fidgets/ui/Text.tsx b/src/fidgets/ui/Text.tsx index a38383e9..b0e54277 100644 --- a/src/fidgets/ui/Text.tsx +++ b/src/fidgets/ui/Text.tsx @@ -3,29 +3,24 @@ import TextInput from "@/common/components/molecules/TextInput"; import CSSInput from "@/common/components/molecules/CSSInput"; import ColorSelector from "@/common/components/molecules/ColorSelector"; import FontSelector from "@/common/components/molecules/FontSelector"; -import BorderSelector from "@/common/components/molecules/BorderSelector"; -import ShadowSelector from "@/common/components/molecules/ShadowSelector"; -import { FidgetArgs, FidgetProperties, FidgetModule } from "@/common/fidgets"; +import { + FidgetArgs, + FidgetProperties, + FidgetModule, + type FidgetSettingsStyle, +} from "@/common/fidgets"; import { CardHeader, CardContent, CardTitle, CardDescription, } from "@/common/components/atoms/card"; -import { FontFamily, Color } from "@/common/lib/theme"; +import { defaultStyleFields } from "@/fidgets/helpers"; export type TextFidgetSettings = { title?: string; text: string; - fontFamily: FontFamily; - fontColor: Color; - headingsFontFamily: FontFamily; - headingsFontColor: Color; - background: Color; - fidgetBorderWidth: string; - fidgetBorderColor: Color; - fidgetShadow: string; -}; +} & FidgetSettingsStyle; export const textConfig: FidgetProperties = { fidgetName: "text", @@ -73,34 +68,7 @@ export const textConfig: FidgetProperties = { inputSelector: ColorSelector, group: "style", }, - { - fieldName: "background", - default: "var(--user-theme-fidget-background)", - required: false, - inputSelector: ColorSelector, - group: "style", - }, - { - fieldName: "fidgetBorderWidth", - default: "var(--user-theme-fidget-border-width)", - required: false, - inputSelector: BorderSelector, - group: "style", - }, - { - fieldName: "fidgetBorderColor", - default: "var(--user-theme-fidget-border-color)", - required: false, - inputSelector: ColorSelector, - group: "style", - }, - { - fieldName: "fidgetShadow", - default: "var(--user-theme-fidget-shadow)", - required: false, - inputSelector: ShadowSelector, - group: "style", - }, + ...defaultStyleFields, { fieldName: "css", default: "", @@ -121,16 +89,7 @@ export const Text: React.FC> = ({ settings, }) => { return ( -