Table style updates

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";

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;

client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx

@@ -1,14 +1,16 @@
 import { BoolControl } from "comps/controls/boolControl";
-import { NumberControl, StringControl } from "comps/controls/codeControl";
+import { ColorOrBoolCodeControl, NumberControl, RadiusControl, StringControl } from "comps/controls/codeControl";
 import { dropdownControl, HorizontalAlignmentControl } from "comps/controls/dropdownControl";
-import { MultiCompBuilder, stateComp, valueComp } from "comps/generators";
+import { MultiCompBuilder, stateComp, valueComp, withContext, withDefault } from "comps/generators";
 import { withSelectedMultiContext } from "comps/generators/withSelectedMultiContext";
 import { genRandomKey } from "comps/utils/idGenerator";
 import { trans } from "i18n";
 import _ from "lodash";
 import {
   changeChildAction,
   changeValueAction,
+  CompAction,
+  CompActionTypes,
   ConstructorToComp,
   ConstructorToDataType,
   ConstructorToNodeType,
@@ -19,8 +21,11 @@ import {
   withFunction,
   wrapChildAction,
 } from "lowcoder-core";
-import { AlignClose, AlignLeft, AlignRight } 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);
@@ -51,6 +56,31 @@ const columnFixOptions = [
   },
 ] as const;
 
+const cellColorLabel = trans("table.cellColor");
+const CellColorTempComp = withContext(
+  new MultiCompBuilder({ color: ColorOrBoolCodeControl }, (props) => props.color)
+    .setPropertyViewFn((children) =>
+      children.color.propertyView({
+        label: cellColorLabel,
+        tooltip: trans("table.cellColorDesc"),
+      })
+    )
+    .build(),
+  ["currentCell"] as const
+);
+
+// @ts-ignore
+export class CellColorComp extends CellColorTempComp {
+  override getPropertyView() {
+    return controlItem({ filterText: cellColorLabel }, super.getPropertyView());
+  }
+}
+
+// fixme, should be infer from RowColorComp, but withContext type incorrect
+export type CellColorViewType = (param: {
+  currentCell: JSONValue | undefined; //number | string;
+}) => string;
+
 export const columnChildrenMap = {
   // column title
   title: StringControl,
@@ -67,8 +97,19 @@ export const columnChildrenMap = {
   tempHide: stateComp<boolean>(false),
   fixed: dropdownControl(columnFixOptions, "close"),
   editable: BoolControl,
+  background: withDefault(ColorControl, ""),
+  text: withDefault(ColorControl, ""),
+  border: withDefault(ColorControl, ""),
+  borderWidth: withDefault(RadiusControl, ""),
+  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
@@ -90,6 +131,21 @@ const ColumnInitComp = new MultiCompBuilder(columnChildrenMap, (props, dispatch)
   .build();
 
 export class ColumnComp extends ColumnInitComp {
+  override reduce(action: CompAction) {
+    let comp = super.reduce(action);
+    if (action.type === CompActionTypes.UPDATE_NODES_V2) {
+      comp = comp.setChild(
+        "cellColor",
+        comp.children.cellColor.reduce(
+          CellColorComp.changeContextDataAction({
+            currentCell: undefined,
+          })
+        )
+      );
+    }
+    return comp;
+  }
+
   override getView() {
     const superView = super.getView();
     const columnType = this.children.render.getSelectedComp().getComp().children.compType.getView();
@@ -143,6 +199,36 @@ export class ColumnComp extends ColumnInitComp {
         })}
         {this.children.autoWidth.getView() === "fixed" &&
           this.children.width.propertyView({ label: trans("prop.width") })}
+        {controlItem({}, (
+          <div style={{marginTop: '8px'}}>
+            <b>{"Style"}</b>
+          </div>
+        ))}
+        {this.children.background.propertyView({
+          label: trans('style.background'),
+        })}
+        {this.children.text.propertyView({
+          label: trans('text'),
+        })}
+        {this.children.border.propertyView({
+          label: trans('style.border')
+        })}
+        {this.children.borderWidth.propertyView({
+          label: trans('style.borderWidth'),
+          preInputNode: <StyledIcon as={IconRadius} title="" />,	
+          placeholder: '1px',
+        })}
+        {this.children.radius.propertyView({
+          label: trans('style.borderRadius'),
+          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()}
       </>
     );
   }