diff --git a/apps/designer/app/designer/features/style-panel/controls/index.ts b/apps/designer/app/designer/features/style-panel/controls/index.ts index 23066cea02..b2c1fc3e34 100644 --- a/apps/designer/app/designer/features/style-panel/controls/index.ts +++ b/apps/designer/app/designer/features/style-panel/controls/index.ts @@ -3,3 +3,4 @@ export * from "./color/color-control"; export * from "./select/select-control"; export * from "./menu/menu-control"; export * from "./font-family/font-family-control"; +export * from "./toggle/toggle-control"; diff --git a/apps/designer/app/designer/features/style-panel/controls/toggle/toggle-control.tsx b/apps/designer/app/designer/features/style-panel/controls/toggle/toggle-control.tsx new file mode 100644 index 0000000000..f49a3f0626 --- /dev/null +++ b/apps/designer/app/designer/features/style-panel/controls/toggle/toggle-control.tsx @@ -0,0 +1,24 @@ +import { ToggleGroup } from "@webstudio-is/design-system"; +import { + TextAlignLeftIcon, + TextAlignCenterIcon, + TextAlignRightIcon, +} from "@webstudio-is/icons"; + +export const ToggleGroupControl = () => ( + + + + + + + + + + + +); diff --git a/apps/designer/app/designer/features/style-panel/sections/backgrounds/backgrounds.tsx b/apps/designer/app/designer/features/style-panel/sections/backgrounds/backgrounds.tsx new file mode 100644 index 0000000000..c0c66b8dfe --- /dev/null +++ b/apps/designer/app/designer/features/style-panel/sections/backgrounds/backgrounds.tsx @@ -0,0 +1,19 @@ +import type { RenderCategoryProps } from "../../style-sections"; +import { ShowMore } from "../../shared/show-more"; +import { renderProperty } from "../../style-sections"; + +export const BackgroundsSection = ({ + styleConfigsByCategory, + moreStyleConfigsByCategory, +}: RenderCategoryProps) => { + return ( + <> + {styleConfigsByCategory.map((entry) => renderProperty(entry))} + + renderProperty(entry) + )} + /> + + ); +}; diff --git a/apps/designer/app/designer/features/style-panel/sections/borders/borders.tsx b/apps/designer/app/designer/features/style-panel/sections/borders/borders.tsx new file mode 100644 index 0000000000..9ed390754b --- /dev/null +++ b/apps/designer/app/designer/features/style-panel/sections/borders/borders.tsx @@ -0,0 +1,19 @@ +import type { RenderCategoryProps } from "../../style-sections"; +import { ShowMore } from "../../shared/show-more"; +import { renderProperty } from "../../style-sections"; + +export const BordersSection = ({ + styleConfigsByCategory, + moreStyleConfigsByCategory, +}: RenderCategoryProps) => { + return ( + <> + {styleConfigsByCategory.map((entry) => renderProperty(entry))} + + renderProperty(entry) + )} + /> + + ); +}; diff --git a/apps/designer/app/designer/features/style-panel/sections/effects/effects.tsx b/apps/designer/app/designer/features/style-panel/sections/effects/effects.tsx new file mode 100644 index 0000000000..59cb2fc213 --- /dev/null +++ b/apps/designer/app/designer/features/style-panel/sections/effects/effects.tsx @@ -0,0 +1,19 @@ +import type { RenderCategoryProps } from "../../style-sections"; +import { ShowMore } from "../../shared/show-more"; +import { renderProperty } from "../../style-sections"; + +export const EffectsSection = ({ + styleConfigsByCategory, + moreStyleConfigsByCategory, +}: RenderCategoryProps) => { + return ( + <> + {styleConfigsByCategory.map((entry) => renderProperty(entry))} + + renderProperty(entry) + )} + /> + + ); +}; diff --git a/apps/designer/app/designer/features/style-panel/sections/flexChild/flexChild.tsx b/apps/designer/app/designer/features/style-panel/sections/flexChild/flexChild.tsx new file mode 100644 index 0000000000..f09d23207f --- /dev/null +++ b/apps/designer/app/designer/features/style-panel/sections/flexChild/flexChild.tsx @@ -0,0 +1,21 @@ +import type { RenderCategoryProps } from "../../style-sections"; +import { ShowMore } from "../../shared/show-more"; +import { renderProperty } from "../../style-sections"; +import { ToggleGroupControl } from "../../controls"; + +export const FlexChildSection = ({ + styleConfigsByCategory, + moreStyleConfigsByCategory, +}: RenderCategoryProps) => { + return ( + <> + + {styleConfigsByCategory.map((entry) => renderProperty(entry))} + + renderProperty(entry) + )} + /> + + ); +}; diff --git a/apps/designer/app/designer/features/style-panel/sections/gridChild/gridChild.tsx b/apps/designer/app/designer/features/style-panel/sections/gridChild/gridChild.tsx new file mode 100644 index 0000000000..543ed0e8e5 --- /dev/null +++ b/apps/designer/app/designer/features/style-panel/sections/gridChild/gridChild.tsx @@ -0,0 +1,19 @@ +import type { RenderCategoryProps } from "../../style-sections"; +import { ShowMore } from "../../shared/show-more"; +import { renderProperty } from "../../style-sections"; + +export const GridChildSection = ({ + styleConfigsByCategory, + moreStyleConfigsByCategory, +}: RenderCategoryProps) => { + return ( + <> + {styleConfigsByCategory.map((entry) => renderProperty(entry))} + + renderProperty(entry) + )} + /> + + ); +}; diff --git a/apps/designer/app/designer/features/style-panel/sections/index.ts b/apps/designer/app/designer/features/style-panel/sections/index.ts index ceb46300a7..4a750c30bc 100644 --- a/apps/designer/app/designer/features/style-panel/sections/index.ts +++ b/apps/designer/app/designer/features/style-panel/sections/index.ts @@ -1,2 +1,11 @@ export * from "./layout/layout"; +export * from "./flexChild/flexChild"; +export * from "./gridChild/gridChild"; export * from "./spacing/spacing"; +export * from "./size/size"; +export * from "./position/position"; +export * from "./typography/typography"; +export * from "./backgrounds/backgrounds"; +export * from "./borders/borders"; +export * from "./effects/effects"; +export * from "./other/other"; diff --git a/apps/designer/app/designer/features/style-panel/sections/layout/layout.tsx b/apps/designer/app/designer/features/style-panel/sections/layout/layout.tsx index 422fb8867d..d36cb8ace5 100644 --- a/apps/designer/app/designer/features/style-panel/sections/layout/layout.tsx +++ b/apps/designer/app/designer/features/style-panel/sections/layout/layout.tsx @@ -2,9 +2,12 @@ import { Box, Flex, Grid } from "@webstudio-is/design-system"; import type { RenderCategoryProps } from "../../style-sections"; import { FlexGrid } from "./shared/flex-grid"; import { Lock } from "./shared/lock"; -import { ShowMore } from "../../shared/show-more"; -import { renderProperty } from "../../style-sections"; -import { MenuControl, SelectControl, TextControl } from "../../controls"; +import { + MenuControl, + SelectControl, + TextControl, + ToggleGroupControl, +} from "../../controls"; import { PropertyName } from "../../shared/property-name"; const LayoutSectionFlex = ({ @@ -12,34 +15,9 @@ const LayoutSectionFlex = ({ sectionStyle, createBatchUpdate, }: RenderCategoryProps) => { - const { - display, - flexDirection, - flexWrap, - alignItems, - justifyContent, - alignContent, - columnGap, - rowGap, - } = sectionStyle; const batchUpdate = createBatchUpdate(); return ( - - - - - + <> - - - - - - - - - - - - - {alignContent && ( - - - + {( + [ + "flexDirection", + "flexWrap", + "alignItems", + "justifyContent", + "alignContent", + ] as const + ).map( + (type) => + sectionStyle[type] && ( + + + + ) )} - + - + - + ); }; @@ -109,10 +86,26 @@ export const LayoutSection = ({ styleConfigsByCategory, moreStyleConfigsByCategory, }: RenderCategoryProps) => { - const ActiveLayout = layouts.get(String(currentStyle.display?.value)); + const ActiveLayout = + layouts.get(String(currentStyle.display?.value)) ?? (() => null); - if (ActiveLayout) { - return ( + return ( + + + + + - ); - } - - return ( - <> - - renderProperty(entry) - )} - /> - {styleConfigsByCategory.map((entry) => renderProperty(entry))} - + ); }; diff --git a/apps/designer/app/designer/features/style-panel/sections/other/other.tsx b/apps/designer/app/designer/features/style-panel/sections/other/other.tsx new file mode 100644 index 0000000000..ac4b9548b7 --- /dev/null +++ b/apps/designer/app/designer/features/style-panel/sections/other/other.tsx @@ -0,0 +1,19 @@ +import type { RenderCategoryProps } from "../../style-sections"; +import { ShowMore } from "../../shared/show-more"; +import { renderProperty } from "../../style-sections"; + +export const OtherSection = ({ + styleConfigsByCategory, + moreStyleConfigsByCategory, +}: RenderCategoryProps) => { + return ( + <> + {styleConfigsByCategory.map((entry) => renderProperty(entry))} + + renderProperty(entry) + )} + /> + + ); +}; diff --git a/apps/designer/app/designer/features/style-panel/sections/position/position.tsx b/apps/designer/app/designer/features/style-panel/sections/position/position.tsx new file mode 100644 index 0000000000..41fc379430 --- /dev/null +++ b/apps/designer/app/designer/features/style-panel/sections/position/position.tsx @@ -0,0 +1,19 @@ +import type { RenderCategoryProps } from "../../style-sections"; +import { ShowMore } from "../../shared/show-more"; +import { renderProperty } from "../../style-sections"; + +export const PositionSection = ({ + styleConfigsByCategory, + moreStyleConfigsByCategory, +}: RenderCategoryProps) => { + return ( + <> + {styleConfigsByCategory.map((entry) => renderProperty(entry))} + + renderProperty(entry) + )} + /> + + ); +}; diff --git a/apps/designer/app/designer/features/style-panel/sections/size/size.tsx b/apps/designer/app/designer/features/style-panel/sections/size/size.tsx new file mode 100644 index 0000000000..2d558697e8 --- /dev/null +++ b/apps/designer/app/designer/features/style-panel/sections/size/size.tsx @@ -0,0 +1,19 @@ +import type { RenderCategoryProps } from "../../style-sections"; +import { ShowMore } from "../../shared/show-more"; +import { renderProperty } from "../../style-sections"; + +export const SizeSection = ({ + styleConfigsByCategory, + moreStyleConfigsByCategory, +}: RenderCategoryProps) => { + return ( + <> + {styleConfigsByCategory.map((entry) => renderProperty(entry))} + + renderProperty(entry) + )} + /> + + ); +}; diff --git a/apps/designer/app/designer/features/style-panel/sections/typography/typography.tsx b/apps/designer/app/designer/features/style-panel/sections/typography/typography.tsx new file mode 100644 index 0000000000..a71078d2ec --- /dev/null +++ b/apps/designer/app/designer/features/style-panel/sections/typography/typography.tsx @@ -0,0 +1,19 @@ +import type { RenderCategoryProps } from "../../style-sections"; +import { ShowMore } from "../../shared/show-more"; +import { renderProperty } from "../../style-sections"; + +export const TypographySection = ({ + styleConfigsByCategory, + moreStyleConfigsByCategory, +}: RenderCategoryProps) => { + return ( + <> + {styleConfigsByCategory.map((entry) => renderProperty(entry))} + + renderProperty(entry) + )} + /> + + ); +}; diff --git a/apps/designer/app/designer/features/style-panel/style-sections.tsx b/apps/designer/app/designer/features/style-panel/style-sections.tsx index 8b7947ba4a..755c9b8db9 100644 --- a/apps/designer/app/designer/features/style-panel/style-sections.tsx +++ b/apps/designer/app/designer/features/style-panel/style-sections.tsx @@ -16,7 +16,19 @@ import { FontFamilyControl, } from "./controls"; import { ShowMore } from "./shared/show-more"; -import { LayoutSection, SpacingSection } from "./sections"; +import { + LayoutSection, + FlexChildSection, + GridChildSection, + SpacingSection, + SizeSection, + PositionSection, + TypographySection, + BackgroundsSection, + BordersSection, + EffectsSection, + OtherSection, +} from "./sections"; import { PropertyName } from "./shared/property-name"; export type PropertyProps = { @@ -37,7 +49,9 @@ export type RenderCategoryProps = { setProperty: SetProperty; createBatchUpdate: CreateBatchUpdate; currentStyle: Style; - sectionStyle: Style; + sectionStyle: { + [Property in keyof Style]-?: RenderPropertyProps; + }; inheritedStyle: InheritedStyle; category: Category; styleConfigsByCategory: Array; @@ -64,7 +78,7 @@ export const renderProperty = ({ if (!Control) return null; return ( - + { - const Category = sections[category]; - if (!Category) { - return ( - <> - {styleConfigsByCategory.map((entry) => renderProperty(entry))} - - renderProperty(entry) - )} - /> - - ); - } - + const Section = sections[category]; return ( - JSX.Element | null; + [Property in Category]: (props: RenderCategoryProps) => JSX.Element | null; } = { layout: LayoutSection, + flexChild: FlexChildSection, + gridChild: GridChildSection, spacing: SpacingSection, + size: SizeSection, + position: PositionSection, + typography: TypographySection, + backgrounds: BackgroundsSection, + borders: BordersSection, + effects: EffectsSection, + other: OtherSection, }; const controls: { diff --git a/apps/designer/app/designer/features/style-panel/style-settings.tsx b/apps/designer/app/designer/features/style-panel/style-settings.tsx index 83cba01833..10889df162 100644 --- a/apps/designer/app/designer/features/style-panel/style-settings.tsx +++ b/apps/designer/app/designer/features/style-panel/style-settings.tsx @@ -8,7 +8,11 @@ import { import { type StyleConfig, styleConfigs } from "./shared/configs"; import { CollapsibleSection } from "~/designer/shared/inspector"; -import { renderCategory, shouldRenderCategory } from "./style-sections"; +import { + renderCategory, + RenderCategoryProps, + shouldRenderCategory, +} from "./style-sections"; import { dependencies } from "./shared/dependencies"; import { type InheritedStyle } from "./shared/get-inherited-style"; import { @@ -68,7 +72,7 @@ const didRender = (category: Category, { property }: StyleConfig): boolean => { return false; }; -type StyleSettingsProps = { +export type StyleSettingsProps = { currentStyle: Style; inheritedStyle: InheritedStyle; cssRule?: CssRule; @@ -95,7 +99,7 @@ export const StyleSettings = ({ search ); const { moreFrom } = categories[category]; - const sectionStyle: Style = {}; + const sectionStyle = {} as RenderCategoryProps["sectionStyle"]; const styleConfigsByCategory: Array = []; const moreStyleConfigsByCategory: Array = [];