Jan 17, 2024 · Jan 14, 2024 · Jan 14, 2024 · Jan 14, 2024 · Jan 15, 2024 · Jan 15, 2024
diff --git a/client/packages/lowcoder-design/src/components/colorSelect/index.tsx b/client/packages/lowcoder-design/src/components/colorSelect/index.tsx
  cursor: pointer;
  background-clip: content-box;
  overflow: hidden;
 `;
 `;
diff --git a/client/packages/lowcoder/src/components/ColorPicker.tsx b/client/packages/lowcoder/src/components/ColorPicker.tsx
      )}
      {colorKey === "margin" && (
        <div className="config-input">
          <Margin $margin={defaultMargin || "3px"}>
          <Margin $margin={defaultMargin || "4px"}>
            <div>
              <ExpandIcon title="" />
            </div>
      )}
      {colorKey === "padding" && (
        <div className="config-input">
          <Padding $padding={defaultPadding || "3px"}>
          <Padding $padding={defaultPadding || "4px"}>
            <div>
              <CompressIcon title="" />
            </div>
diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx
  ExpandIcon,
  CompressIcon,
  TextSizeIcon,
  PencilIcon,
  ShowBorderIcon,
 } from "lowcoder-design";
 import { useContext } from "react";
 import styled from "styled-components";
  }
 `;

 const RadiusIcon = styled(IconRadius)`
  margin: 0 8px 0 -2px;
 `;

 const MarginIcon = styled(ExpandIcon)`
 margin: 0 8px 0 -2px;
 `;
 const PaddingIcon = styled(CompressIcon)`
 margin: 0 8px 0 -2px;
 `;
 const StyledTextSizeIcon = styled(TextSizeIcon)`
 margin: 0 8px 0 -2px;
 `;
 const RadiusIcon = styled(IconRadius)` margin: 0 8px 0 -2px;`;
 const BorderIcon = styled(ShowBorderIcon)` margin: 0px 10px 0 3px;`;
 const MarginIcon = styled(ExpandIcon)` margin: 0 8px 0 2px;`;
 const PaddingIcon = styled(CompressIcon)`margin: 0 8px 0 2px;`;
 const StyledTextSizeIcon = styled(TextSizeIcon)` margin: 0 8px 0 0px;`;
 const ResetIcon = styled(IconReset)`
  &:hover g g {
    stroke: #315efb;
                  { filterText: config.label },
                  <div key={index}>
                    {(name === "radius" ||
                    name === "borderWidth" ||
                    name === "gap" ||
                    name === "cardRadius")
                      ? (
                          children[name] as InstanceType<typeof StringControl>
                        ).propertyView({
                          label: config.label,
                          preInputNode: <RadiusIcon title="" />,
                          preInputNode: <RadiusIcon title="Radius" />,
                          placeholder: props[name],
                        })
                        })
                        : name === "borderWidth"
                        ? (
                            children[name] as InstanceType<typeof StringControl>
                          ).propertyView({
                            label: config.label,
                            preInputNode: <BorderIcon title="Border-Width" />,
                            placeholder: props[name],
                          })
                      : name === "margin"
                      ? (
                          children[name] as InstanceType<typeof StringControl>
                        ).propertyView({
                          label: config.label,
                          preInputNode: <MarginIcon title="" />,
                          preInputNode: <MarginIcon title="Margin" />,
                          placeholder: props[name],
                        })
                      : (name === "padding" ||
                          children[name] as InstanceType<typeof StringControl>
                        ).propertyView({
                          label: config.label,
                          preInputNode: <PaddingIcon title="" />,
                          preInputNode: <PaddingIcon title="Padding" />,
                          placeholder: props[name],
                        })
                      : name === "textSize"
Original file line number	Diff line number	Diff line change
Expand Up		@@ -178,4 +178,4 @@ const ColorBlock = styled.div<{ $color: string }>`
		cursor: pointer;
		background-clip: content-box;
		overflow: hidden;
		`;
		`;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -197,7 +197,7 @@ export default function ColorPicker(props: ColorConfigProps) {
		)}
		{colorKey === "margin" && (
		<div className="config-input">
		<Margin $margin={defaultMargin \|\| "3px"}>
		<Margin $margin={defaultMargin \|\| "4px"}>
		<div>
		<ExpandIcon title="" />
		</div>
Expand All		@@ -215,7 +215,7 @@ export default function ColorPicker(props: ColorConfigProps) {
		)}
		{colorKey === "padding" && (
		<div className="config-input">
		<Padding $padding={defaultPadding \|\| "3px"}>
		<Padding $padding={defaultPadding \|\| "4px"}>
		<div>
		<CompressIcon title="" />
		</div>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -13,6 +13,8 @@ import {
		ExpandIcon,
		CompressIcon,
		TextSizeIcon,
		PencilIcon,
		ShowBorderIcon,
		} from "lowcoder-design";
		import { useContext } from "react";
		import styled from "styled-components";
Expand DownExpand Up		@@ -250,19 +252,11 @@ const StyleContent = styled.div`
		}
		`;

		const RadiusIcon = styled(IconRadius)`
		margin: 0 8px 0 -2px;
		`;

		const MarginIcon = styled(ExpandIcon)`
		margin: 0 8px 0 -2px;
		`;
		const PaddingIcon = styled(CompressIcon)`
		margin: 0 8px 0 -2px;
		`;
		const StyledTextSizeIcon = styled(TextSizeIcon)`
		margin: 0 8px 0 -2px;
		`;
		const RadiusIcon = styled(IconRadius)` margin: 0 8px 0 -2px;`;
		const BorderIcon = styled(ShowBorderIcon)` margin: 0px 10px 0 3px;`;
		const MarginIcon = styled(ExpandIcon)` margin: 0 8px 0 2px;`;
		const PaddingIcon = styled(CompressIcon)`margin: 0 8px 0 2px;`;
		const StyledTextSizeIcon = styled(TextSizeIcon)` margin: 0 8px 0 0px;`;
		const ResetIcon = styled(IconReset)`
		&:hover g g {
		stroke: #315efb;
Expand DownExpand Up		@@ -366,22 +360,29 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
		{ filterText: config.label },
		<div key={index}>
		{(name === "radius" \|\|
		name === "borderWidth" \|\|
		name === "gap" \|\|
		name === "cardRadius")
		? (
		children[name] as InstanceType<typeof StringControl>
		).propertyView({
		label: config.label,
		preInputNode: <RadiusIcon title="" />,
		preInputNode: <RadiusIcon title="Radius" />,
		placeholder: props[name],
		})
		})
		: name === "borderWidth"
		? (
		children[name] as InstanceType<typeof StringControl>
		).propertyView({
		label: config.label,
		preInputNode: <BorderIcon title="Border-Width" />,
		placeholder: props[name],
		})
		: name === "margin"
		? (
		children[name] as InstanceType<typeof StringControl>
		).propertyView({
		label: config.label,
		preInputNode: <MarginIcon title="" />,
		preInputNode: <MarginIcon title="Margin" />,
		placeholder: props[name],
		})
		: (name === "padding" \|\|
Expand All		@@ -392,7 +393,7 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
		children[name] as InstanceType<typeof StringControl>
		).propertyView({
		label: config.label,
		preInputNode: <PaddingIcon title="" />,
		preInputNode: <PaddingIcon title="Padding" />,
		placeholder: props[name],
		})
		: name === "textSize"
Expand Down