From abedcd2f43a74ccc9636cccf5982481535dc6daf Mon Sep 17 00:00:00 2001 From: Sultan <105234327+natlusyht@users.noreply.github.com> Date: Sat, 15 Oct 2022 23:14:05 +0300 Subject: [PATCH] show when is current breakpoint, refactor --- .../controls/toggle/toggle-control.tsx | 47 +++++++++------- .../sections/flex-child/flex-child.tsx | 53 +++++++++++-------- .../style-panel/shared/property-name.tsx | 14 +++-- .../features/style-panel/style-sections.tsx | 2 +- .../design-system/src/components/popover.tsx | 17 ++++-- .../src/components/toggle-group.tsx | 8 ++- 6 files changed, 88 insertions(+), 53 deletions(-) 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 index 5d4dacdcaa..2ccc5251f1 100644 --- 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 @@ -1,30 +1,41 @@ import { Flex, ToggleGroup, Tooltip } from "@webstudio-is/design-system"; +import { StyleProperty } from "@webstudio-is/react-sdk"; +import { useIsFromCurrentBreakpoint } from "../../shared/use-is-from-current-breakpoint"; export type ToggleGroupControlProps = { + property: StyleProperty | StyleProperty[]; value: string; items: { child: JSX.Element; label: string; value: string }[]; onValueChange?: (value: string) => void; }; export const ToggleGroupControl = ({ + property, value = "", items = [], onValueChange, -}: ToggleGroupControlProps) => ( - - {items.map(({ child, label, value }, index) => { - return ( - - - {child} - - - ); - })} - -); +}: ToggleGroupControlProps) => { + const isCurrentBreakpoint = useIsFromCurrentBreakpoint(property); + return ( + + {items.map(({ child, label, value }, index) => { + return ( + + + {child} + + + ); + })} + + ); +}; diff --git a/apps/designer/app/designer/features/style-panel/sections/flex-child/flex-child.tsx b/apps/designer/app/designer/features/style-panel/sections/flex-child/flex-child.tsx index 76b26d6f17..28fe43a641 100644 --- a/apps/designer/app/designer/features/style-panel/sections/flex-child/flex-child.tsx +++ b/apps/designer/app/designer/features/style-panel/sections/flex-child/flex-child.tsx @@ -1,5 +1,4 @@ -import { useState } from "react"; -import { Text, Flex, Grid, FloatingPopover } from "@webstudio-is/design-system"; +import { Flex, Grid, FloatingPopover } from "@webstudio-is/design-system"; import type { RenderCategoryProps } from "../../style-sections"; import { ToggleGroupControl } from "../../controls"; import { PropertyName } from "../../shared/property-name"; @@ -27,6 +26,25 @@ export const FlexChildSection = ({ const setAlignSelf = setProperty("alignSelf"); const setOrder = setProperty("order"); const setSizing = createBatchUpdate(); + const getSizingValue = () => { + switch ( + String(currentStyle.flexGrow?.value) + + String(currentStyle.flexShrink?.value) + ) { + case "00": { + return "none"; + } + case "10": { + return "grow"; + } + case "01": { + return "shrink"; + } + default: { + return ""; + } + } + }; return ( @@ -36,6 +54,7 @@ export const FlexChildSection = ({ label="Align" /> setAlignSelf(value)} value={String(currentStyle.alignSelf?.value)} items={[ @@ -74,10 +93,17 @@ export const FlexChildSection = ({ { switch (value) { case "none": { @@ -100,25 +126,7 @@ export const FlexChildSection = ({ } } }} - value={(() => { - switch ( - String(currentStyle.flexGrow?.value) + - String(currentStyle.flexShrink?.value) - ) { - case "00": { - return "none"; - } - case "10": { - return "grow"; - } - case "01": { - return "shrink"; - } - default: { - return ""; - } - } - })()} + value={getSizingValue()} items={[ { child: , @@ -190,6 +198,7 @@ export const FlexChildSection = ({ label="Order" /> { switch (value) { case "0": diff --git a/apps/designer/app/designer/features/style-panel/shared/property-name.tsx b/apps/designer/app/designer/features/style-panel/shared/property-name.tsx index b60de2eaf7..0f986777d5 100644 --- a/apps/designer/app/designer/features/style-panel/shared/property-name.tsx +++ b/apps/designer/app/designer/features/style-panel/shared/property-name.tsx @@ -2,7 +2,6 @@ import { Flex, Label, Tooltip, IconButton } from "@webstudio-is/design-system"; import { useIsFromCurrentBreakpoint } from "./use-is-from-current-breakpoint"; import { propertyNameColorForSelectedBreakpoint } from "./constants"; import type { PropertyProps } from "../style-sections"; -import { iconConfigs } from "./configs"; import { forwardRef, PointerEventHandler } from "react"; export const PropertyName = ({ property, label, css }: PropertyProps) => { @@ -33,7 +32,6 @@ export const PropertyName = ({ property, label, css }: PropertyProps) => { }} variant="contrast" size="1" - htmlFor={property} > {label} @@ -45,12 +43,12 @@ PropertyName.displayName = "PropertyName"; export const PropertyIcon = forwardRef< HTMLButtonElement, - PropertyProps & { [key: `on${string}`]: PointerEventHandler } ->(({ property, label, ...props }, forwardRef) => { + PropertyProps & { + children?: JSX.Element; + [key: `on${string}`]: PointerEventHandler; + } +>(({ property, label, children, ...props }, forwardRef) => { const isCurrentBreakpoint = useIsFromCurrentBreakpoint(property); - const IconType = iconConfigs[property]?.normal; - if (!IconType) return null; - return ( - + {children} ); 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 71f24fe578..04f1a367cf 100644 --- a/apps/designer/app/designer/features/style-panel/style-sections.tsx +++ b/apps/designer/app/designer/features/style-panel/style-sections.tsx @@ -31,7 +31,7 @@ import { import { PropertyName } from "./shared/property-name"; export type PropertyProps = { - property: StyleProperty; + property: StyleProperty | StyleProperty[]; label: string; css?: CSS; }; diff --git a/packages/design-system/src/components/popover.tsx b/packages/design-system/src/components/popover.tsx index 569c2c2784..fa1a5a017b 100644 --- a/packages/design-system/src/components/popover.tsx +++ b/packages/design-system/src/components/popover.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useState, useRef, MutableRefObject } from "react"; import { Cross1Icon } from "@webstudio-is/icons"; import * as PopoverPrimitive from "@radix-ui/react-popover"; import { Box } from "./box"; @@ -96,6 +96,15 @@ export const PopoverTrigger = PopoverPrimitive.Trigger; export const PopoverClose = PopoverPrimitive.Close; export const PopoverPortal = PopoverPrimitive.Portal; +const useSideOffset = ( + isOpen: boolean +): [MutableRefObject, number] => { + const ref = useRef(null); + const sideOffset = + isOpen && ref.current !== null ? 240 - ref.current.offsetWidth : 0; + return [ref, sideOffset]; +}; + export const FloatingPopover = ({ title, content, @@ -106,20 +115,22 @@ export const FloatingPopover = ({ children: JSX.Element; }) => { const [isOpen, setIsOpen] = useState(false); + const [ref, sideOffset] = useSideOffset(isOpen); return ( { setIsOpen(true); }} > - {children} + {children}