From 603df8a22c1a1ad7c177436c08218d16632c03e6 Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Tue, 27 Jun 2023 15:25:53 +0200 Subject: [PATCH] Reset properties with option-click (#1866) ## Description Closes https://github.com/webstudio-is/webstudio-builder/issues/1844 ## Steps for reproduction 1. see issue ## Code Review - [ ] hi @TrySound , I need you to do - conceptual review (architecture, feature-correctness) - [ ] hi @taylornowotny , I need you to do - QC ## Before requesting a review - [ ] made a self-review - [ ] added inline comments where things may be not obvious (the "why", not "what") ## Before merging - [ ] tested locally and on preview environment (preview dev login: 5de6) - [ ] updated [test cases](https://github.com/webstudio-is/webstudio-builder/blob/main/apps/builder/docs/test-cases.md) document - [ ] added tests - [ ] if any new env variables are added, added them to `.env.example` and the `builder/env-check.js` if mandatory --- .../controls/toggle/toggle-control.tsx | 11 ++++++++++- .../sections/backgrounds/background-content.tsx | 1 + .../sections/flex-child/flex-child.tsx | 15 +++++++++------ .../features/style-panel/sections/size/size.tsx | 1 + .../sections/typography/typography.tsx | 9 ++++++++- .../features/style-panel/shared/property-name.tsx | 8 ++++++-- 6 files changed, 35 insertions(+), 10 deletions(-) diff --git a/apps/builder/app/builder/features/style-panel/controls/toggle/toggle-control.tsx b/apps/builder/app/builder/features/style-panel/controls/toggle/toggle-control.tsx index 487854454a..668b4007b4 100644 --- a/apps/builder/app/builder/features/style-panel/controls/toggle/toggle-control.tsx +++ b/apps/builder/app/builder/features/style-panel/controls/toggle/toggle-control.tsx @@ -11,6 +11,7 @@ export type ToggleGroupControlProps = { value: string; items: { child: JSX.Element; label: string; value: string }[]; onValueChange?: (value: string) => void; + onReset: () => void; }; // @todo refactor this control to follow the standard interface we otherwise have for all controls @@ -19,6 +20,7 @@ export const ToggleGroupControl = ({ value = "", items = [], onValueChange, + onReset, }: ToggleGroupControlProps) => { return ( { return ( - + { + if (event.altKey) { + onReset?.(); + } + }} + > {child} diff --git a/apps/builder/app/builder/features/style-panel/sections/backgrounds/background-content.tsx b/apps/builder/app/builder/features/style-panel/sections/backgrounds/background-content.tsx index 3fbec9ea4a..0497e779b8 100644 --- a/apps/builder/app/builder/features/style-panel/sections/backgrounds/background-content.tsx +++ b/apps/builder/app/builder/features/style-panel/sections/backgrounds/background-content.tsx @@ -271,6 +271,7 @@ export const BackgroundContent = (props: BackgroundContentProps) => { value, }) } + onReset={() => deleteProperty("backgroundRepeat")} value={toValue(props.currentStyle.backgroundRepeat?.value)} items={[ { diff --git a/apps/builder/app/builder/features/style-panel/sections/flex-child/flex-child.tsx b/apps/builder/app/builder/features/style-panel/sections/flex-child/flex-child.tsx index 663e6624f2..1f6acd38ef 100644 --- a/apps/builder/app/builder/features/style-panel/sections/flex-child/flex-child.tsx +++ b/apps/builder/app/builder/features/style-panel/sections/flex-child/flex-child.tsx @@ -59,6 +59,7 @@ const FlexChildSectionAlign = (props: RenderCategoryProps) => { /> setAlignSelf({ type: "keyword", value })} + onReset={() => deleteProperty("alignSelf")} value={toValue(currentStyle.alignSelf?.value)} items={[ { @@ -100,7 +101,11 @@ const FlexChildSectionAlign = (props: RenderCategoryProps) => { const FlexChildSectionSizing = (props: RenderCategoryProps) => { const { createBatchUpdate, currentStyle } = props; const setSizing = createBatchUpdate(); - + const onReset = () => { + setSizing.deleteProperty("flexGrow"); + setSizing.deleteProperty("flexShrink"); + setSizing.publish(); + }; return ( { properties={["flexGrow", "flexShrink"]} label="Sizing" description="Specifies the ability of a flex item to grow or shrink" - onReset={() => { - setSizing.deleteProperty("flexGrow"); - setSizing.deleteProperty("flexShrink"); - setSizing.publish(); - }} + onReset={onReset} /> { switch (value) { case "none": { @@ -273,6 +275,7 @@ const FlexChildSectionOrder = (props: RenderCategoryProps) => { onReset={() => deleteProperty("order")} /> deleteProperty("order")} onValueChange={(value) => { switch (value) { case "0": diff --git a/apps/builder/app/builder/features/style-panel/sections/size/size.tsx b/apps/builder/app/builder/features/style-panel/sections/size/size.tsx index 5b69127858..bc9fce9470 100644 --- a/apps/builder/app/builder/features/style-panel/sections/size/size.tsx +++ b/apps/builder/app/builder/features/style-panel/sections/size/size.tsx @@ -132,6 +132,7 @@ export const SizeSection = ({ onReset={() => deleteProperty("overflow")} /> deleteProperty("overflow")} items={[ { child: , diff --git a/apps/builder/app/builder/features/style-panel/sections/typography/typography.tsx b/apps/builder/app/builder/features/style-panel/sections/typography/typography.tsx index 27debfe137..d5e3781256 100644 --- a/apps/builder/app/builder/features/style-panel/sections/typography/typography.tsx +++ b/apps/builder/app/builder/features/style-panel/sections/typography/typography.tsx @@ -184,7 +184,7 @@ export const TypographySectionSizing = (props: RenderCategoryProps) => { }; export const TypographySectionAdvanced = (props: RenderCategoryProps) => { - const { setProperty, currentStyle } = props; + const { setProperty, deleteProperty, currentStyle } = props; const setTextAlign = setProperty("textAlign"); const setTextDecorationLine = setProperty("textDecorationLine"); const setTextTransform = setProperty("textTransform"); @@ -205,6 +205,7 @@ export const TypographySectionAdvanced = (props: RenderCategoryProps) => { setTextAlign({ type: "keyword", value })} + onReset={() => deleteProperty("textAlign")} value={String(getTextAlign(toValue(currentStyle.textAlign?.value)))} items={[ { @@ -234,6 +235,7 @@ export const TypographySectionAdvanced = (props: RenderCategoryProps) => { onValueChange={(value) => setTextDecorationLine({ type: "keyword", value }) } + onReset={() => deleteProperty("textDecorationLine")} value={toValue(currentStyle.textDecorationLine?.value)} items={[ { @@ -266,6 +268,7 @@ export const TypographySectionAdvanced = (props: RenderCategoryProps) => { onValueChange={(value) => setTextTransform({ type: "keyword", value }) } + onReset={() => deleteProperty("textTransform")} value={toValue(currentStyle.textTransform?.value)} items={[ { @@ -293,6 +296,7 @@ export const TypographySectionAdvanced = (props: RenderCategoryProps) => { setFontStyle({ type: "keyword", value })} + onReset={() => deleteProperty("fontStyle")} value={toValue(currentStyle.fontStyle?.value)} items={[ { @@ -350,6 +354,7 @@ export const TypographySectionAdvancedPopover = ( onValueChange={(value) => setDirection({ type: "keyword", value }) } + onReset={() => deleteProperty("direction")} value={toValue(currentStyle.direction?.value)} items={[ { @@ -374,6 +379,7 @@ export const TypographySectionAdvancedPopover = ( /> setHyphens({ type: "keyword", value })} + onReset={() => deleteProperty("hyphens")} value={toValue(currentStyle.hyphens?.value)} items={[ { @@ -400,6 +406,7 @@ export const TypographySectionAdvancedPopover = ( onValueChange={(value) => setTextOverflow({ type: "keyword", value }) } + onReset={() => deleteProperty("textOverflow")} value={toValue(currentStyle.textOverflow?.value)} items={[ { diff --git a/apps/builder/app/builder/features/style-panel/shared/property-name.tsx b/apps/builder/app/builder/features/style-panel/shared/property-name.tsx index 00e455ad3b..39ebc3c50b 100644 --- a/apps/builder/app/builder/features/style-panel/shared/property-name.tsx +++ b/apps/builder/app/builder/features/style-panel/shared/property-name.tsx @@ -221,7 +221,7 @@ type PropertyNameInternalProps = { label: string | ReactElement; title?: string; description?: React.ReactNode; - onReset?: undefined | (() => void); + onReset?: () => void; disabled?: boolean; }; @@ -263,7 +263,11 @@ const PropertyNameInternal = ({ shrink gap={1} align="center" - onClick={() => { + onClick={(event) => { + if (event.altKey) { + onReset?.(); + return; + } setIsOpen(true); }} >