feat: add text-size option in styling

lowcoder-org · FalkWolsky · Nov 25, 2023 · Nov 21, 2023 · Nov 21, 2023 · Nov 22, 2023
commit 0f9d2ef3e1cc0070355af173f90ca880eabafd9e
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
@@ -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";
diff --git a/client/packages/lowcoder/src/api/commonSettingApi.ts b/client/packages/lowcoder/src/api/commonSettingApi.ts
@@ -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) {
@@ -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 "";
 }
@@ -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;

diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx
@@ -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);
@@ -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
@@ -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()}
       </>
     );

diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
@@ -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 {
@@ -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) {

diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx
@@ -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,

diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx
@@ -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";
@@ -21,6 +28,7 @@ import {
   SingleColorConfig,
   MarginConfig,
   PaddingConfig,
+  TextSizeConfig,
 } from "./styleControlConstants";
 
 function isSimpleColorConfig(config: SingleColorConfig): config is SimpleColorConfig {
@@ -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");	
 }	
@@ -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);	
 }	
@@ -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];	
@@ -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];	
     }	
@@ -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;
@@ -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") {	
@@ -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({	
@@ -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],	

diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -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;
 };
@@ -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",
@@ -54,6 +58,7 @@ export const defaultTheme: ThemeDetail = {
   margin: "3px",	
   padding: "3px",
   gridColumns: "24",
+  textSize: "14px",
 };
 
 export const SURFACE_COLOR = "#FFFFFF";
@@ -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"),	
@@ -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;

diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -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",

diff --git a/client/packages/lowcoder/src/i18n/locales/zh.ts b/client/packages/lowcoder/src/i18n/locales/zh.ts
@@ -343,6 +343,7 @@ style: {
     containerfooterpadding: "下内边距",
     containerbodypadding: "内边距",
     minWidth: "最小宽度",
+    textSize: "字体大小",
 },
 export: {
     hiddenDesc: "如果为true,则隐藏组件",