Dec 3, 2023 · Nov 21, 2023 · Nov 21, 2023 · Nov 21, 2023 · Nov 22, 2023 · Nov 22, 2023
diff --git a/client/packages/lowcoder-design/src/icons/icon-text-size.svg b/client/packages/lowcoder-design/src/icons/icon-text-size.svg
diff --git a/client/packages/lowcoder-design/src/icons/index.ts b/client/packages/lowcoder-design/src/icons/index.ts
 export { ReactComponent as MentionIcon } from "icons/icon-mention-comp.svg";
 export { ReactComponent as AutoCompleteCompIcon } from "icons/icon-autocomplete-comp.svg";
 export { ReactComponent as WidthIcon } from "icons/icon-width.svg";
 export { ReactComponent as ResponsiveLayoutCompIcon } from "icons/icon-responsive-layout-comp.svg";
 export { ReactComponent as ResponsiveLayoutCompIcon } from "icons/icon-responsive-layout-comp.svg";
 export { ReactComponent as TextSizeIcon } from "./icon-text-size.svg";
diff --git a/client/packages/lowcoder/src/api/commonSettingApi.ts b/client/packages/lowcoder/src/api/commonSettingApi.ts
  margin?: string;
  padding?: string;
  gridColumns?: string; //Added By Aqib Mirza
  textSize?: string;
 }

 export function getThemeDetailName(key: keyof ThemeDetail) {
    //Added By Aqib Mirza
    case "gridColumns":
      return trans("themeDetail.gridColumns");
    case "textSize":
      return trans("style.textSize");
  }
  return "";
 }
    case "margin":
    case "padding":
    case "gridColumns": //Added By Aqib Mirza
    case "textSize":
      return true;
  }
  return false;
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx
  withFunction,
  wrapChildAction,
 } from "lowcoder-core";
 import { AlignClose, AlignLeft, AlignRight, controlItem } from "lowcoder-design";
 import { AlignClose, AlignLeft, AlignRight,IconRadius, TextSizeIcon,controlItem } from "lowcoder-design";
 import { ColumnTypeComp, ColumnTypeCompMap } from "./columnTypeComp";
 import { ColorControl } from "comps/controls/colorControl";
 import { JSONValue } from "util/jsonTypes";
 import styled from "styled-components";

 export type Render = ReturnType<ConstructorToComp<typeof RenderComp>["getOriginalComp"]>;
 export const RenderComp = withSelectedMultiContext(ColumnTypeComp);
  text: withDefault(ColorControl, ""),
  border: withDefault(ColorControl, ""),
  radius: withDefault(RadiusControl, ""),
  textSize: withDefault(RadiusControl, ""),
  cellColor: CellColorComp,
 };

 const StyledIcon = styled.span`
  margin: 0 4px 0 14px;
 `;

 /**
 * export for test.
 * Put it here temporarily to avoid circular dependencies
        })}
        {this.children.radius.propertyView({
          label: trans('style.borderRadius'),
 //preInputNode: <StyledIcon as={IconRadius} title="" />,
          preInputNode: <StyledIcon as={IconRadius} title="" />,
          placeholder: '3px',
        })}
        {this.children.textSize.propertyView({
          label: trans('style.textSize'),
          preInputNode: <StyledIcon as={TextSizeIcon} title="" />,
          placeholder: '14px',
        })}
        {this.children.cellColor.getPropertyView()}
      </>
    );
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx

  > div > div {
    color: ${(props) => props.$style.text};
    font-size: ${(props) => props.$style.textSize};
    &,
    > .ant-badge > .ant-badge-status-text,
    > div > .markdown-body {
      text: columnStyle.text || columnsStyle.text,
      border: columnStyle.border || columnsStyle.border,
      radius: columnStyle.radius || columnsStyle.radius,
      textSize: columnStyle.textSize || columnsStyle.textSize,
    }
    let { background } = style;
    if (rowContext.selected) {
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx
        text: column.text,
        border: column.border,
        radius: column.radius,
        textSize: column.textSize,
      },
      cellColorFn: column.cellColor,
      onWidthResize: column.onWidthResize,
diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx
 import { ThemeContext } from "comps/utils/themeContext";
 import { trans } from "i18n";
 import _ from "lodash";
 import { controlItem, IconRadius, IconReset, ExpandIcon, CompressIcon, } from "lowcoder-design";
 import {
  controlItem,
  IconRadius,
  IconReset,
  ExpandIcon,
  CompressIcon,
  TextSizeIcon,
 } from "lowcoder-design";
 import { useContext } from "react";
 import styled from "styled-components";
 import { useIsMobile } from "util/hooks";
  SingleColorConfig,
  MarginConfig,
  PaddingConfig,
  TextSizeConfig,
 } from "./styleControlConstants";

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

 function isTextSizeConfig(config: SingleColorConfig): config is TextSizeConfig {
  return config.hasOwnProperty("textSize");
 }

 function isMarginConfig(config: SingleColorConfig): config is MarginConfig {
  return config.hasOwnProperty("margin");
 }
  return _.isEmpty(radius);
 }

 function isEmptyTextSize(textSize: string) {
  return _.isEmpty(textSize);
 }

 function isEmptyMargin(margin: string) {
  return _.isEmpty(margin);
 }
    if (!isEmptyRadius(props[name]) && isRadiusConfig(config)) {
      res[name] = props[name];
      return;
    }
    if (!isEmptyTextSize(props[name]) && isTextSizeConfig(config)) {
      res[name] = props[name];
      return;
    }
    if (!isEmptyMargin(props[name]) && isMarginConfig(config)) {
      res[name] = props[name];
    if (isRadiusConfig(config)) {
      res[name] = themeWithDefault[config.radius];
    }
    if (isTextSizeConfig(config)) {
      // TODO: remove default textSize after added in theme in backend.
      res[name] = themeWithDefault[config.textSize] || '14px';
    }
    if (isMarginConfig(config)) {
      res[name] = themeWithDefault[config.margin];
    }
 const PaddingIcon = styled(CompressIcon)`
 margin: 0 8px 0 -2px;
 `;

 const StyledTextSizeIcon = styled(TextSizeIcon)`
 margin: 0 8px 0 -2px;
 `;
 const ResetIcon = styled(IconReset)`
  &:hover g g {
    stroke: #315efb;
    const name: Names<T> = config.name;
    if (
      name === "radius" ||
      name === "cardRadius"
      name === "cardRadius" ||
      name === "textSize"
    ) {
      childrenMap[name] = StringControl;
    } else if (name === "margin" || name === "padding" || name==="containerheaderpadding" || name==="containerfooterpadding" || name==="containerbodypadding") {
                return controlItem(
                  { filterText: config.label },
                  <div key={index}>
                    {name === "radius" ||
                    {(name === "radius" ||
                    name === "gap" ||
                    name === "cardRadius"
                    name === "cardRadius")
                      ? (
                          children[name] as InstanceType<typeof StringControl>
                        ).propertyView({
                          preInputNode: <MarginIcon title="" />,
                          placeholder: props[name],
                        })
                      : name === "padding" ||
                      :(name === "padding" ||
                      name === "containerheaderpadding"||
                      name === "containerfooterpadding"||
                      name === "containerbodypadding"
                      name === "containerbodypadding")
                      ? (
                          children[name] as InstanceType<typeof StringControl>
                        ).propertyView({
                          label: config.label,
                          preInputNode: <PaddingIcon title="" />,
                          placeholder: props[name],
                        })
                      : name === "textSize"
                      ? (
                          children[name] as InstanceType<typeof StringControl>
                        ).propertyView({
                          label: config.label,
                          preInputNode: <StyledTextSizeIcon title="" />,
                          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
  readonly radius: string;
 };

 export type TextSizeConfig = CommonColorConfig & {
  readonly textSize: string;
 };

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

 export const defaultTheme: ThemeDetail = {
  primary: "#3377FF",
  margin: "3px",
  padding: "3px",
  gridColumns: "24",
  textSize: "14px",
 };

 export const SURFACE_COLOR = "#FFFFFF";
  padding: "padding",
 } as const;

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

 const CONTAINERHEADERPADDING = {
  name: "containerheaderpadding",
  label: trans("style.containerheaderpadding"),
  getStaticBorder(),
  RADIUS,
  TEXT,
  TEXT_SIZE,
 ] as const;

 export const FileStyle = [...getStaticBgBorderRadiusByBg(SURFACE_COLOR), TEXT, ACCENT, MARGIN, PADDING] as const;
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
    containerfooterpadding: "Footer Padding",
    containerbodypadding: "Body Padding",
    minWidth: "Minimum Width",
    textSize: "Text Size",
  },
  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
    containerfooterpadding: "下内边距",
    containerbodypadding: "内边距",
    minWidth: "最小宽度",
    textSize: "字体大小",
 },
 export: {
    hiddenDesc: "如果为true,则隐藏组件",
Original file line number	Diff line number	Diff line change
Expand Up		@@ -296,4 +296,5 @@ export { ReactComponent as CommentIcon } from "icons/icon-comment-comp.svg";
		export { ReactComponent as MentionIcon } from "icons/icon-mention-comp.svg";
		export { ReactComponent as AutoCompleteCompIcon } from "icons/icon-autocomplete-comp.svg";
		export { ReactComponent as WidthIcon } from "icons/icon-width.svg";
		export { ReactComponent as ResponsiveLayoutCompIcon } from "icons/icon-responsive-layout-comp.svg";
		export { ReactComponent as ResponsiveLayoutCompIcon } from "icons/icon-responsive-layout-comp.svg";
		export { ReactComponent as TextSizeIcon } from "./icon-text-size.svg";
Original file line number	Diff line number	Diff line change
Expand Up		@@ -47,6 +47,7 @@ export interface ThemeDetail {
		margin?: string;
		padding?: string;
		gridColumns?: string; //Added By Aqib Mirza
		textSize?: string;
		}

		export function getThemeDetailName(key: keyof ThemeDetail) {
Expand All		@@ -70,6 +71,8 @@ export function getThemeDetailName(key: keyof ThemeDetail) {
		//Added By Aqib Mirza
		case "gridColumns":
		return trans("themeDetail.gridColumns");
		case "textSize":
		return trans("style.textSize");
		}
		return "";
		}
Expand All		@@ -84,6 +87,7 @@ export function isThemeColorKey(key: string) {
		case "margin":
		case "padding":
		case "gridColumns": //Added By Aqib Mirza
		case "textSize":
		return true;
		}
		return false;
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -21,10 +21,11 @@ import {
		withFunction,
		wrapChildAction,
		} from "lowcoder-core";
		import { AlignClose, AlignLeft, AlignRight, controlItem } from "lowcoder-design";
		import { AlignClose, AlignLeft, AlignRight,IconRadius, TextSizeIcon,controlItem } from "lowcoder-design";
		import { ColumnTypeComp, ColumnTypeCompMap } from "./columnTypeComp";
		import { ColorControl } from "comps/controls/colorControl";
		import { JSONValue } from "util/jsonTypes";
		import styled from "styled-components";

		export type Render = ReturnType<ConstructorToComp<typeof RenderComp>["getOriginalComp"]>;
		export const RenderComp = withSelectedMultiContext(ColumnTypeComp);
Expand DownExpand Up		@@ -100,9 +101,14 @@ export const columnChildrenMap = {
		text: withDefault(ColorControl, ""),
		border: withDefault(ColorControl, ""),
		radius: withDefault(RadiusControl, ""),
		textSize: withDefault(RadiusControl, ""),
		cellColor: CellColorComp,
		};

		const StyledIcon = styled.span`
		margin: 0 4px 0 14px;
		`;

		/**
		* export for test.
		* Put it here temporarily to avoid circular dependencies
Expand DownExpand Up		@@ -208,9 +214,14 @@ export class ColumnComp extends ColumnInitComp {
		})}
		{this.children.radius.propertyView({
		label: trans('style.borderRadius'),
		//preInputNode: <StyledIcon as={IconRadius} title="" />,
		preInputNode: <StyledIcon as={IconRadius} title="" />,
		placeholder: '3px',
		})}
		{this.children.textSize.propertyView({
		label: trans('style.textSize'),
		preInputNode: <StyledIcon as={TextSizeIcon} title="" />,
		placeholder: '14px',
		})}
		{this.children.cellColor.getPropertyView()}
		</>
		);
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -277,6 +277,7 @@ const TableTd = styled.td<{

		> div > div {
		color: ${(props) => props.$style.text};
		font-size: ${(props) => props.$style.textSize};
		&,
		> .ant-badge > .ant-badge-status-text,
		> div > .markdown-body {
Expand DownExpand Up		@@ -404,6 +405,7 @@ function TableCellView(props: {
		text: columnStyle.text \|\| columnsStyle.text,
		border: columnStyle.border \|\| columnsStyle.border,
		radius: columnStyle.radius \|\| columnsStyle.radius,
		textSize: columnStyle.textSize \|\| columnsStyle.textSize,
		}
		let { background } = style;
		if (rowContext.selected) {
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -321,6 +321,7 @@ export function columnsToAntdFormat(
		text: column.text,
		border: column.border,
		radius: column.radius,
		textSize: column.textSize,
		},
		cellColorFn: column.cellColor,
		onWidthResize: column.onWidthResize,
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -6,7 +6,14 @@ import { BackgroundColorContext } from "comps/utils/backgroundColorContext";
		import { ThemeContext } from "comps/utils/themeContext";
		import { trans } from "i18n";
		import _ from "lodash";
		import { controlItem, IconRadius, IconReset, ExpandIcon, CompressIcon, } from "lowcoder-design";
		import {
		controlItem,
		IconRadius,
		IconReset,
		ExpandIcon,
		CompressIcon,
		TextSizeIcon,
		} from "lowcoder-design";
		import { useContext } from "react";
		import styled from "styled-components";
		import { useIsMobile } from "util/hooks";
Expand All		@@ -21,6 +28,7 @@ import {
		SingleColorConfig,
		MarginConfig,
		PaddingConfig,
		TextSizeConfig,
		} from "./styleControlConstants";

		function isSimpleColorConfig(config: SingleColorConfig): config is SimpleColorConfig {
Expand All		@@ -35,6 +43,10 @@ function isRadiusConfig(config: SingleColorConfig): config is RadiusConfig {
		return config.hasOwnProperty("radius");
		}

		function isTextSizeConfig(config: SingleColorConfig): config is TextSizeConfig {
		return config.hasOwnProperty("textSize");
		}

		function isMarginConfig(config: SingleColorConfig): config is MarginConfig {
		return config.hasOwnProperty("margin");
		}
Expand All		@@ -56,6 +68,10 @@ function isEmptyRadius(radius: string) {
		return _.isEmpty(radius);
		}

		function isEmptyTextSize(textSize: string) {
		return _.isEmpty(textSize);
		}

		function isEmptyMargin(margin: string) {
		return _.isEmpty(margin);
		}
Expand All		@@ -80,6 +96,10 @@ function calcColors<ColorMap extends Record<string, string>>(
		if (!isEmptyRadius(props[name]) && isRadiusConfig(config)) {
		res[name] = props[name];
		return;
		}
		if (!isEmptyTextSize(props[name]) && isTextSizeConfig(config)) {
		res[name] = props[name];
		return;
		}
		if (!isEmptyMargin(props[name]) && isMarginConfig(config)) {
		res[name] = props[name];
Expand All		@@ -103,6 +123,10 @@ function calcColors<ColorMap extends Record<string, string>>(
		if (isRadiusConfig(config)) {
		res[name] = themeWithDefault[config.radius];
		}
		if (isTextSizeConfig(config)) {
		// TODO: remove default textSize after added in theme in backend.
		res[name] = themeWithDefault[config.textSize] \|\| '14px';
		}
		if (isMarginConfig(config)) {
		res[name] = themeWithDefault[config.margin];
		}
Expand DownExpand Up		@@ -222,7 +246,9 @@ margin: 0 8px 0 -2px;
		const PaddingIcon = styled(CompressIcon)`
		margin: 0 8px 0 -2px;
		`;

		const StyledTextSizeIcon = styled(TextSizeIcon)`
		margin: 0 8px 0 -2px;
		`;
		const ResetIcon = styled(IconReset)`
		&:hover g g {
		stroke: #315efb;
Expand All		@@ -236,7 +262,8 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
		const name: Names<T> = config.name;
		if (
		name === "radius" \|\|
		name === "cardRadius"
		name === "cardRadius" \|\|
		name === "textSize"
		) {
		childrenMap[name] = StringControl;
		} else if (name === "margin" \|\| name === "padding" \|\| name==="containerheaderpadding" \|\| name==="containerfooterpadding" \|\| name==="containerbodypadding") {
Expand DownExpand Up		@@ -323,9 +350,9 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
		return controlItem(
		{ filterText: config.label },
		<div key={index}>
		{name === "radius" \|\|
		{(name === "radius" \|\|
		name === "gap" \|\|
		name === "cardRadius"
		name === "cardRadius")
		? (
		children[name] as InstanceType<typeof StringControl>
		).propertyView({
Expand All		@@ -341,17 +368,25 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
		preInputNode: <MarginIcon title="" />,
		placeholder: props[name],
		})
		: name === "padding" \|\|
		:(name === "padding" \|\|
		name === "containerheaderpadding"\|\|
		name === "containerfooterpadding"\|\|
		name === "containerbodypadding"
		name === "containerbodypadding")
		? (
		children[name] as InstanceType<typeof StringControl>
		).propertyView({
		label: config.label,
		preInputNode: <PaddingIcon title="" />,
		placeholder: props[name],
		})
		: name === "textSize"
		? (
		children[name] as InstanceType<typeof StringControl>
		).propertyView({
		label: config.label,
		preInputNode: <StyledTextSizeIcon title="" />,
		placeholder: props[name],
		})
		: children[name].propertyView({
		label: config.label,
		panelDefaultColor: props[name],
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -17,6 +17,10 @@ export type RadiusConfig = CommonColorConfig & {
		readonly radius: string;
		};

		export type TextSizeConfig = CommonColorConfig & {
		readonly textSize: string;
		};

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

		export const defaultTheme: ThemeDetail = {
		primary: "#3377FF",
Expand All		@@ -54,6 +58,7 @@ export const defaultTheme: ThemeDetail = {
		margin: "3px",
		padding: "3px",
		gridColumns: "24",
		textSize: "14px",
		};

		export const SURFACE_COLOR = "#FFFFFF";
Expand DownExpand Up		@@ -260,6 +265,12 @@ const PADDING = {
		padding: "padding",
		} as const;

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

		const CONTAINERHEADERPADDING = {
		name: "containerheaderpadding",
		label: trans("style.containerheaderpadding"),
Expand DownExpand Up		@@ -696,6 +707,7 @@ export const TableColumnStyle = [
		getStaticBorder(),
		RADIUS,
		TEXT,
		TEXT_SIZE,
		] as const;

		export const FileStyle = [...getStaticBgBorderRadiusByBg(SURFACE_COLOR), TEXT, ACCENT, MARGIN, PADDING] as const;
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -362,6 +362,7 @@ export const en = {
		containerfooterpadding: "Footer Padding",
		containerbodypadding: "Body Padding",
		minWidth: "Minimum Width",
		textSize: "Text Size",
		},
		export: {
		hiddenDesc: "If true, the component is hidden",
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -343,6 +343,7 @@ style: {
		containerfooterpadding: "下内边距",
		containerbodypadding: "内边距",
		minWidth: "最小宽度",
		textSize: "字体大小",
		},
		export: {
		hiddenDesc: "如果为true,则隐藏组件",
Expand Down