Jan 17, 2024 · Jan 14, 2024 · Jan 14, 2024 · Jan 14, 2024 · Jan 15, 2024 · Jan 15, 2024
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx
      margin: ${buttonStyle.margin};
      padding: ${buttonStyle.padding};
      &:not(:disabled) {
        // click animation color
        --antd-wave-shadow-color: ${buttonStyle.border};
        border-color: ${buttonStyle.border};
        color: ${buttonStyle.text};
        font-size: ${buttonStyle.textSize};
        font-weight: ${buttonStyle.textWeight};
        background-color: ${buttonStyle.background};
        border-radius: ${buttonStyle.radius};
        margin: ${buttonStyle.margin};
          background-color: ${hoverColor};
          border-color: ${buttonStyle.border === buttonStyle.background
            ? hoverColor
            : buttonStyle.border};
            : buttonStyle.border} !important;
        }

        :active {
          color: ${buttonStyle.text};
          background-color: ${activeColor};
          border-color: ${buttonStyle.border === buttonStyle.background
            ? activeColor
            : buttonStyle.border};
            : buttonStyle.border} !important;
        }
      }
    }
  justify-content: center;
  align-items: center;
  overflow: hidden;
  gap: 6px;
  &:not(:disabled) {
    &:hover,
    &:focus {
      background-color: ${(props) => props.$buttonStyle ? genHoverColor(props.$buttonStyle.background) : ''} !important;
    }
    :active {
      background-color: ${(props) => props.$buttonStyle ? genActiveColor(props.$buttonStyle.background) : ''} !important;
    }
  }
  span {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  gap: 6px;
 `;

 export const ButtonCompWrapper = styled.div<{ disabled: boolean }>`
diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx
  ExpandIcon,
  CompressIcon,
  TextSizeIcon,
 PencilIcon,
 TypographyIcon,
  ShowBorderIcon,
 } from "lowcoder-design";
 import { useContext } from "react";
  MarginConfig,
  PaddingConfig,
  TextSizeConfig,
  TextWeightConfig,
  BorderWidthConfig,
 } from "./styleControlConstants";
 import { faTextWidth } from "@fortawesome/free-solid-svg-icons";

 function isSimpleColorConfig(config: SingleColorConfig): config is SimpleColorConfig {
  return config.hasOwnProperty("color");
  return config.hasOwnProperty("textSize");
 }

 function isTextWeightConfig(config: SingleColorConfig): config is TextWeightConfig {
  return config.hasOwnProperty("textWeight");
 }

 function isMarginConfig(config: SingleColorConfig): config is MarginConfig {
  return config.hasOwnProperty("margin");
 }
 function isEmptyTextSize(textSize: string) {
  return _.isEmpty(textSize);
 }
 function isEmptyTextWeight(textWeight: string) {
  return _.isEmpty(textWeight);
 }

 function isEmptyMargin(margin: string) {
  return _.isEmpty(margin);
      res[name] = props[name];
      return;
    }
    if (!isEmptyTextWeight(props[name]) && isTextWeightConfig(config)) {
      res[name] = props[name];
      return;
    }
    if (!isEmptyMargin(props[name]) && isMarginConfig(config)) {
      res[name] = props[name];
      return;
      // TODO: remove default textSize after added in theme in backend.
      res[name] = themeWithDefault[config.textSize] || '14px';
    }
    if (isTextWeightConfig(config)) {
      // TODO: remove default textWeight after added in theme in backend.
      res[name] = themeWithDefault[config.textWeight] || 'regular';
    }
    if (isMarginConfig(config)) {
      res[name] = themeWithDefault[config.margin];
    }
 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 StyledTextWeightIcon = styled(TypographyIcon)` margin: 0 8px 0 0px;`;

 const ResetIcon = styled(IconReset)`
  &:hover g g {
    stroke: #315efb;
      name === "radius" ||
      name === "borderWidth" ||
      name === "cardRadius" ||
      name === "textSize"
      name === "textSize" ||
      name === "textWeight"
    ) {
      childrenMap[name] = StringControl;
    } else if (name === "margin" || name === "padding" || name==="containerheaderpadding" || name==="containerfooterpadding" || name==="containerbodypadding") {
                          children[name] as InstanceType<typeof StringControl>
                        ).propertyView({
                          label: config.label,
                          preInputNode: <StyledTextSizeIcon title="" />,
                          preInputNode: <StyledTextSizeIcon title="Font Size" />,
                          placeholder: props[name],
                        })
                        : name === "textWeight"
                        ? (
                            children[name] as InstanceType<typeof StringControl>
                          ).propertyView({
                            label: config.label,
                            preInputNode: <StyledTextWeightIcon title="Font Weight" />,
                            placeholder: props[name],
                          })
                      : children[name].propertyView({
                          label: config.label,
                          panelDefaultColor: props[name],
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
 import { ThemeDetail } from "api/commonSettingApi";
 import { darkenColor, isDarkColor, lightenColor, toHex } from "lowcoder-design";
 import { trans } from "i18n";
 import { StyleConfigType } from "./styleControl";
 import { StyleConfigType } from "./styleControl";

 type SupportPlatform = "pc" | "mobile";

  readonly textSize: string;
 };

 export type TextWeightConfig = CommonColorConfig & {
  readonly textWeight: string;
 };

 export type ContainerHeaderPaddigConfig = CommonColorConfig & {
  readonly containerheaderpadding: string;
 };
  readonly depType?: DEP_TYPE;
  transformer: (color: string, ...rest: string[]) => string;
 };
 export type SingleColorConfig = SimpleColorConfig | DepColorConfig | RadiusConfig | BorderWidthConfig | TextSizeConfig | MarginConfig | PaddingConfig | ContainerHeaderPaddigConfig | ContainerFooterPaddigConfig | ContainerBodyPaddigConfig;
 export type SingleColorConfig = SimpleColorConfig | DepColorConfig | RadiusConfig | BorderWidthConfig | TextSizeConfig |TextWeightConfig |MarginConfig | PaddingConfig | ContainerHeaderPaddigConfig | ContainerFooterPaddigConfig | ContainerBodyPaddigConfig;

 export const defaultTheme: ThemeDetail = {
  primary: "#3377FF",
  textSize: "textSize",
 } as const;

 const TEXT_WEIGHT = {
  name: "textWeight",
  label: trans("style.textWeight"),
  textWeight: "textWeight",
 } as const;

 const CONTAINERHEADERPADDING = {
  name: "containerheaderpadding",
  label: trans("style.containerheaderpadding"),
  } as const;
 }

 export const ButtonStyle = [...getBgBorderRadiusByBg("primary"), TEXT, MARGIN, PADDING] as const;
 export const ButtonStyle = [
  ...getBgBorderRadiusByBg("primary"),
  TEXT,
  TEXT_SIZE,
  TEXT_WEIGHT,
  MARGIN,
  PADDING
 ] as const;

 export const ToggleButtonStyle = [
  getBackground("canvas"),
  TEXT,
  TEXT_SIZE,
  TEXT_WEIGHT,
  {
    name: "border",
    label: trans("style.border"),
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
    "containerbodypadding": "Body Padding",
    "minWidth": "Minimum Width",
    "aspectRatio": "Aspect Ratio",
    "textSize": "Text Size"
    "textSize": "Text Size",
    "textWeight": "Text Weight",
  },
  "export": {
    "hiddenDesc": "If true, the component is hidden",
diff --git a/client/packages/lowcoder/src/i18n/locales/zh.ts b/client/packages/lowcoder/src/i18n/locales/zh.ts
    containerbodypadding: "内边距",
    minWidth: "最小宽度",
    textSize: "字体大小",
    textWeight: "字体粗细",
 },
 export: {
    hiddenDesc: "如果为true,则隐藏组件",
Original file line number	Diff line number	Diff line change
Expand Up		@@ -16,10 +16,11 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
		margin: ${buttonStyle.margin};
		padding: ${buttonStyle.padding};
		&:not(:disabled) {
		// click animation color
		--antd-wave-shadow-color: ${buttonStyle.border};
		border-color: ${buttonStyle.border};
		color: ${buttonStyle.text};
		font-size: ${buttonStyle.textSize};
		font-weight: ${buttonStyle.textWeight};
		background-color: ${buttonStyle.background};
		border-radius: ${buttonStyle.radius};
		margin: ${buttonStyle.margin};
Expand All		@@ -31,15 +32,14 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
		background-color: ${hoverColor};
		border-color: ${buttonStyle.border === buttonStyle.background
		? hoverColor
		: buttonStyle.border};
		: buttonStyle.border} !important;
		}

		:active {
		color: ${buttonStyle.text};
		background-color: ${activeColor};
		border-color: ${buttonStyle.border === buttonStyle.background
		? activeColor
		: buttonStyle.border};
		: buttonStyle.border} !important;
		}
		}
		}
Expand All		@@ -54,11 +54,20 @@ export const Button100 = styled(Button)<{ $buttonStyle?: ButtonStyleType }>`
		justify-content: center;
		align-items: center;
		overflow: hidden;
		gap: 6px;
		&:not(:disabled) {
		&:hover,
		&:focus {
		background-color: ${(props) => props.$buttonStyle ? genHoverColor(props.$buttonStyle.background) : ''} !important;
		}
		:active {
		background-color: ${(props) => props.$buttonStyle ? genActiveColor(props.$buttonStyle.background) : ''} !important;
		}
		}
		span {
		overflow: hidden;
		text-overflow: ellipsis;
		}
		gap: 6px;
		`;

		export const ButtonCompWrapper = styled.div<{ disabled: boolean }>`
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -13,7 +13,7 @@ import {
		ExpandIcon,
		CompressIcon,
		TextSizeIcon,
		PencilIcon,
		TypographyIcon,
		ShowBorderIcon,
		} from "lowcoder-design";
		import { useContext } from "react";
Expand All		@@ -31,8 +31,10 @@ import {
		MarginConfig,
		PaddingConfig,
		TextSizeConfig,
		TextWeightConfig,
		BorderWidthConfig,
		} from "./styleControlConstants";
		import { faTextWidth } from "@fortawesome/free-solid-svg-icons";

		function isSimpleColorConfig(config: SingleColorConfig): config is SimpleColorConfig {
		return config.hasOwnProperty("color");
Expand All		@@ -54,6 +56,10 @@ function isTextSizeConfig(config: SingleColorConfig): config is TextSizeConfig {
		return config.hasOwnProperty("textSize");
		}

		function isTextWeightConfig(config: SingleColorConfig): config is TextWeightConfig {
		return config.hasOwnProperty("textWeight");
		}

		function isMarginConfig(config: SingleColorConfig): config is MarginConfig {
		return config.hasOwnProperty("margin");
		}
Expand All		@@ -80,6 +86,9 @@ function isEmptyBorderWidth(borderWidth: string) {
		function isEmptyTextSize(textSize: string) {
		return _.isEmpty(textSize);
		}
		function isEmptyTextWeight(textWeight: string) {
		return _.isEmpty(textWeight);
		}

		function isEmptyMargin(margin: string) {
		return _.isEmpty(margin);
Expand DownExpand Up		@@ -114,6 +123,10 @@ function calcColors<ColorMap extends Record<string, string>>(
		res[name] = props[name];
		return;
		}
		if (!isEmptyTextWeight(props[name]) && isTextWeightConfig(config)) {
		res[name] = props[name];
		return;
		}
		if (!isEmptyMargin(props[name]) && isMarginConfig(config)) {
		res[name] = props[name];
		return;
Expand DownExpand Up		@@ -143,6 +156,10 @@ function calcColors<ColorMap extends Record<string, string>>(
		// TODO: remove default textSize after added in theme in backend.
		res[name] = themeWithDefault[config.textSize] \|\| '14px';
		}
		if (isTextWeightConfig(config)) {
		// TODO: remove default textWeight after added in theme in backend.
		res[name] = themeWithDefault[config.textWeight] \|\| 'regular';
		}
		if (isMarginConfig(config)) {
		res[name] = themeWithDefault[config.margin];
		}
Expand DownExpand Up		@@ -257,6 +274,8 @@ 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 StyledTextWeightIcon = styled(TypographyIcon)` margin: 0 8px 0 0px;`;

		const ResetIcon = styled(IconReset)`
		&:hover g g {
		stroke: #315efb;
Expand All		@@ -272,7 +291,8 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
		name === "radius" \|\|
		name === "borderWidth" \|\|
		name === "cardRadius" \|\|
		name === "textSize"
		name === "textSize" \|\|
		name === "textWeight"
		) {
		childrenMap[name] = StringControl;
		} else if (name === "margin" \|\| name === "padding" \|\| name==="containerheaderpadding" \|\| name==="containerfooterpadding" \|\| name==="containerbodypadding") {
Expand DownExpand Up		@@ -401,9 +421,17 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
		children[name] as InstanceType<typeof StringControl>
		).propertyView({
		label: config.label,
		preInputNode: <StyledTextSizeIcon title="" />,
		preInputNode: <StyledTextSizeIcon title="Font Size" />,
		placeholder: props[name],
		})
		: name === "textWeight"
		? (
		children[name] as InstanceType<typeof StringControl>
		).propertyView({
		label: config.label,
		preInputNode: <StyledTextWeightIcon title="Font Weight" />,
		placeholder: props[name],
		})
		: children[name].propertyView({
		label: config.label,
		panelDefaultColor: props[name],
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,7 +1,7 @@
		import { ThemeDetail } from "api/commonSettingApi";
		import { darkenColor, isDarkColor, lightenColor, toHex } from "lowcoder-design";
		import { trans } from "i18n";
		import { StyleConfigType } from "./styleControl";
		import { StyleConfigType } from "./styleControl";

		type SupportPlatform = "pc" \| "mobile";

Expand All		@@ -25,6 +25,10 @@ export type TextSizeConfig = CommonColorConfig & {
		readonly textSize: string;
		};

		export type TextWeightConfig = CommonColorConfig & {
		readonly textWeight: string;
		};

		export type ContainerHeaderPaddigConfig = CommonColorConfig & {
		readonly containerheaderpadding: string;
		};
Expand All		@@ -50,7 +54,7 @@ export type DepColorConfig = CommonColorConfig & {
		readonly depType?: DEP_TYPE;
		transformer: (color: string, ...rest: string[]) => string;
		};
		export type SingleColorConfig = SimpleColorConfig \| DepColorConfig \| RadiusConfig \| BorderWidthConfig \| TextSizeConfig \| MarginConfig \| PaddingConfig \| ContainerHeaderPaddigConfig \| ContainerFooterPaddigConfig \| ContainerBodyPaddigConfig;
		export type SingleColorConfig = SimpleColorConfig \| DepColorConfig \| RadiusConfig \| BorderWidthConfig \| TextSizeConfig \|TextWeightConfig \|MarginConfig \| PaddingConfig \| ContainerHeaderPaddigConfig \| ContainerFooterPaddigConfig \| ContainerBodyPaddigConfig;

		export const defaultTheme: ThemeDetail = {
		primary: "#3377FF",
Expand DownExpand Up		@@ -284,6 +288,12 @@ const TEXT_SIZE = {
		textSize: "textSize",
		} as const;

		const TEXT_WEIGHT = {
		name: "textWeight",
		label: trans("style.textWeight"),
		textWeight: "textWeight",
		} as const;

		const CONTAINERHEADERPADDING = {
		name: "containerheaderpadding",
		label: trans("style.containerheaderpadding"),
Expand DownExpand Up		@@ -370,11 +380,20 @@ function getStaticBackground(color: string) {
		} as const;
		}

		export const ButtonStyle = [...getBgBorderRadiusByBg("primary"), TEXT, MARGIN, PADDING] as const;
		export const ButtonStyle = [
		...getBgBorderRadiusByBg("primary"),
		TEXT,
		TEXT_SIZE,
		TEXT_WEIGHT,
		MARGIN,
		PADDING
		] as const;

		export const ToggleButtonStyle = [
		getBackground("canvas"),
		TEXT,
		TEXT_SIZE,
		TEXT_WEIGHT,
		{
		name: "border",
		label: trans("style.border"),
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -358,7 +358,8 @@ export const en = {
		"containerbodypadding": "Body Padding",
		"minWidth": "Minimum Width",
		"aspectRatio": "Aspect Ratio",
		"textSize": "Text Size"
		"textSize": "Text Size",
		"textWeight": "Text Weight",
		},
		"export": {
		"hiddenDesc": "If true, the component is hidden",
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -349,6 +349,7 @@ style: {
		containerbodypadding: "内边距",
		minWidth: "最小宽度",
		textSize: "字体大小",
		textWeight: "字体粗细",
		},
		export: {
		hiddenDesc: "如果为true,则隐藏组件",
Expand Down