Skip to content

Commit 0f9d2ef

Browse files
raheeliftikhar5raheeliftikhar5
committed
feat: add text-size option in styling
1 parent 382f564 commit 0f9d2ef

File tree

10 files changed

+80
-11
lines changed

10 files changed

+80
-11
lines changed

‎client/packages/lowcoder-design/src/icons/icon-text-size.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎client/packages/lowcoder-design/src/icons/index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -296,4 +296,5 @@ export { ReactComponent as CommentIcon } from "icons/icon-comment-comp.svg";
296296
export { ReactComponent as MentionIcon } from "icons/icon-mention-comp.svg";
297297
export { ReactComponent as AutoCompleteCompIcon } from "icons/icon-autocomplete-comp.svg";
298298
export { ReactComponent as WidthIcon } from "icons/icon-width.svg";
299-
export { ReactComponent as ResponsiveLayoutCompIcon } from "icons/icon-responsive-layout-comp.svg";
299+
export { ReactComponent as ResponsiveLayoutCompIcon } from "icons/icon-responsive-layout-comp.svg";
300+
export { ReactComponent as TextSizeIcon } from "./icon-text-size.svg";

‎client/packages/lowcoder/src/api/commonSettingApi.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ export interface ThemeDetail {
4747
margin?: string;
4848
padding?: string;
4949
gridColumns?: string; //Added By Aqib Mirza
50+
textSize?: string;
5051
}
5152

5253
export function getThemeDetailName(key: keyof ThemeDetail) {
@@ -70,6 +71,8 @@ export function getThemeDetailName(key: keyof ThemeDetail) {
7071
//Added By Aqib Mirza
7172
case "gridColumns":
7273
return trans("themeDetail.gridColumns");
74+
case "textSize":
75+
return trans("style.textSize");
7376
}
7477
return "";
7578
}
@@ -84,6 +87,7 @@ export function isThemeColorKey(key: string) {
8487
case "margin":
8588
case "padding":
8689
case "gridColumns": //Added By Aqib Mirza
90+
case "textSize":
8791
return true;
8892
}
8993
return false;

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

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,11 @@ import {
2121
withFunction,
2222
wrapChildAction,
2323
} from "lowcoder-core";
24-
import { AlignClose, AlignLeft, AlignRight, controlItem } from "lowcoder-design";
24+
import { AlignClose, AlignLeft, AlignRight, IconRadius, TextSizeIcon, controlItem } from "lowcoder-design";
2525
import { ColumnTypeComp, ColumnTypeCompMap } from "./columnTypeComp";
2626
import { ColorControl } from "comps/controls/colorControl";
2727
import { JSONValue } from "util/jsonTypes";
28+
import styled from "styled-components";
2829

2930
export type Render = ReturnType<ConstructorToComp<typeof RenderComp>["getOriginalComp"]>;
3031
export const RenderComp = withSelectedMultiContext(ColumnTypeComp);
@@ -100,9 +101,14 @@ export const columnChildrenMap = {
100101
text: withDefault(ColorControl, ""),
101102
border: withDefault(ColorControl, ""),
102103
radius: withDefault(RadiusControl, ""),
104+
textSize: withDefault(RadiusControl, ""),
103105
cellColor: CellColorComp,
104106
};
105107

108+
const StyledIcon = styled.span`
109+
margin: 0 4px 0 14px;
110+
`;
111+
106112
/**
107113
* export for test.
108114
* Put it here temporarily to avoid circular dependencies
@@ -208,9 +214,14 @@ export class ColumnComp extends ColumnInitComp {
208214
})}
209215
{this.children.radius.propertyView({
210216
label: trans('style.borderRadius'),
211-
// preInputNode: <StyledIcon as={IconRadius} title="" />,
217+
preInputNode: <StyledIcon as={IconRadius} title="" />,
212218
placeholder: '3px',
213219
})}
220+
{this.children.textSize.propertyView({
221+
label: trans('style.textSize'),
222+
preInputNode: <StyledIcon as={TextSizeIcon} title="" />,
223+
placeholder: '14px',
224+
})}
214225
{this.children.cellColor.getPropertyView()}
215226
</>
216227
);

‎client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -277,6 +277,7 @@ const TableTd = styled.td<{
277277
278278
> div > div {
279279
color: ${(props) => props.$style.text};
280+
font-size: ${(props) => props.$style.textSize};
280281
&,
281282
> .ant-badge > .ant-badge-status-text,
282283
> div > .markdown-body {
@@ -404,6 +405,7 @@ function TableCellView(props: {
404405
text: columnStyle.text || columnsStyle.text,
405406
border: columnStyle.border || columnsStyle.border,
406407
radius: columnStyle.radius || columnsStyle.radius,
408+
textSize: columnStyle.textSize || columnsStyle.textSize,
407409
}
408410
let { background } = style;
409411
if (rowContext.selected) {

‎client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -321,6 +321,7 @@ export function columnsToAntdFormat(
321321
text: column.text,
322322
border: column.border,
323323
radius: column.radius,
324+
textSize: column.textSize,
324325
},
325326
cellColorFn: column.cellColor,
326327
onWidthResize: column.onWidthResize,

‎client/packages/lowcoder/src/comps/controls/styleControl.tsx‎

Lines changed: 42 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,14 @@ import { BackgroundColorContext } from "comps/utils/backgroundColorContext";
66
import { ThemeContext } from "comps/utils/themeContext";
77
import { trans } from "i18n";
88
import _ from "lodash";
9-
import { controlItem, IconRadius, IconReset, ExpandIcon, CompressIcon, } from "lowcoder-design";
9+
import {
10+
controlItem,
11+
IconRadius,
12+
IconReset,
13+
ExpandIcon,
14+
CompressIcon,
15+
TextSizeIcon,
16+
} from "lowcoder-design";
1017
import { useContext } from "react";
1118
import styled from "styled-components";
1219
import { useIsMobile } from "util/hooks";
@@ -21,6 +28,7 @@ import {
2128
SingleColorConfig,
2229
MarginConfig,
2330
PaddingConfig,
31+
TextSizeConfig,
2432
} from "./styleControlConstants";
2533

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

46+
function isTextSizeConfig(config: SingleColorConfig): config is TextSizeConfig {
47+
return config.hasOwnProperty("textSize");
48+
}
49+
3850
function isMarginConfig(config: SingleColorConfig): config is MarginConfig {
3951
return config.hasOwnProperty("margin");
4052
}
@@ -56,6 +68,10 @@ function isEmptyRadius(radius: string) {
5668
return _.isEmpty(radius);
5769
}
5870

71+
function isEmptyTextSize(textSize: string) {
72+
return _.isEmpty(textSize);
73+
}
74+
5975
function isEmptyMargin(margin: string) {
6076
return _.isEmpty(margin);
6177
}
@@ -80,6 +96,10 @@ function calcColors<ColorMap extends Record<string, string>>(
8096
if (!isEmptyRadius(props[name]) && isRadiusConfig(config)) {
8197
res[name] = props[name];
8298
return;
99+
}
100+
if (!isEmptyTextSize(props[name]) && isTextSizeConfig(config)) {
101+
res[name] = props[name];
102+
return;
83103
}
84104
if (!isEmptyMargin(props[name]) && isMarginConfig(config)) {
85105
res[name] = props[name];
@@ -103,6 +123,10 @@ function calcColors<ColorMap extends Record<string, string>>(
103123
if (isRadiusConfig(config)) {
104124
res[name] = themeWithDefault[config.radius];
105125
}
126+
if (isTextSizeConfig(config)) {
127+
// TODO: remove default textSize after added in theme in backend.
128+
res[name] = themeWithDefault[config.textSize] || '14px';
129+
}
106130
if (isMarginConfig(config)) {
107131
res[name] = themeWithDefault[config.margin];
108132
}
@@ -222,7 +246,9 @@ margin: 0 8px 0 -2px;
222246
const PaddingIcon = styled(CompressIcon)`
223247
margin: 0 8px 0 -2px;
224248
`;
225-
249+
const StyledTextSizeIcon = styled(TextSizeIcon)`
250+
margin: 0 8px 0 -2px;
251+
`;
226252
const ResetIcon = styled(IconReset)`
227253
&:hover g g {
228254
stroke: #315efb;
@@ -236,7 +262,8 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
236262
const name: Names<T> = config.name;
237263
if (
238264
name === "radius" ||
239-
name === "cardRadius"
265+
name === "cardRadius" ||
266+
name === "textSize"
240267
) {
241268
childrenMap[name] = StringControl;
242269
} else if (name === "margin" || name === "padding" || name==="containerheaderpadding" || name==="containerfooterpadding" || name==="containerbodypadding") {
@@ -323,9 +350,9 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
323350
return controlItem(
324351
{ filterText: config.label },
325352
<div key={index}>
326-
{name === "radius" ||
353+
{(name === "radius" ||
327354
name === "gap" ||
328-
name === "cardRadius"
355+
name === "cardRadius")
329356
? (
330357
children[name] as InstanceType<typeof StringControl>
331358
).propertyView({
@@ -341,17 +368,25 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
341368
preInputNode: <MarginIcon title="" />,
342369
placeholder: props[name],
343370
})
344-
: name === "padding" ||
371+
: (name === "padding" ||
345372
name === "containerheaderpadding" ||
346373
name === "containerfooterpadding" ||
347-
name === "containerbodypadding"
374+
name === "containerbodypadding")
348375
? (
349376
children[name] as InstanceType<typeof StringControl>
350377
).propertyView({
351378
label: config.label,
352379
preInputNode: <PaddingIcon title="" />,
353380
placeholder: props[name],
354381
})
382+
: name === "textSize"
383+
? (
384+
children[name] as InstanceType<typeof StringControl>
385+
).propertyView({
386+
label: config.label,
387+
preInputNode: <StyledTextSizeIcon title="" />,
388+
placeholder: props[name],
389+
})
355390
: children[name].propertyView({
356391
label: config.label,
357392
panelDefaultColor: props[name],

‎client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,10 @@ export type RadiusConfig = CommonColorConfig & {
1717
readonly radius: string;
1818
};
1919

20+
export type TextSizeConfig = CommonColorConfig & {
21+
readonly textSize: string;
22+
};
23+
2024
export type ContainerHeaderPaddigConfig = CommonColorConfig & {
2125
readonly containerheaderpadding: string;
2226
};
@@ -42,7 +46,7 @@ export type DepColorConfig = CommonColorConfig & {
4246
readonly depType?: DEP_TYPE;
4347
transformer: (color: string, ...rest: string[]) => string;
4448
};
45-
export type SingleColorConfig = SimpleColorConfig | DepColorConfig | RadiusConfig | MarginConfig | PaddingConfig | ContainerHeaderPaddigConfig | ContainerFooterPaddigConfig | ContainerBodyPaddigConfig;
49+
export type SingleColorConfig = SimpleColorConfig | DepColorConfig | RadiusConfig | TextSizeConfig | MarginConfig | PaddingConfig | ContainerHeaderPaddigConfig | ContainerFooterPaddigConfig | ContainerBodyPaddigConfig;
4650

4751
export const defaultTheme: ThemeDetail = {
4852
primary: "#3377FF",
@@ -54,6 +58,7 @@ export const defaultTheme: ThemeDetail = {
5458
margin: "3px",
5559
padding: "3px",
5660
gridColumns: "24",
61+
textSize: "14px",
5762
};
5863

5964
export const SURFACE_COLOR = "#FFFFFF";
@@ -260,6 +265,12 @@ const PADDING = {
260265
padding: "padding",
261266
} as const;
262267

268+
const TEXT_SIZE = {
269+
name: "textSize",
270+
label: trans("style.textSize"),
271+
textSize: "textSize",
272+
} as const;
273+
263274
const CONTAINERHEADERPADDING = {
264275
name: "containerheaderpadding",
265276
label: trans("style.containerheaderpadding"),
@@ -696,6 +707,7 @@ export const TableColumnStyle = [
696707
getStaticBorder(),
697708
RADIUS,
698709
TEXT,
710+
TEXT_SIZE,
699711
] as const;
700712

701713
export const FileStyle = [...getStaticBgBorderRadiusByBg(SURFACE_COLOR), TEXT, ACCENT, MARGIN, PADDING] as const;

‎client/packages/lowcoder/src/i18n/locales/en.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -362,6 +362,7 @@ export const en = {
362362
containerfooterpadding: "Footer Padding",
363363
containerbodypadding: "Body Padding",
364364
minWidth: "Minimum Width",
365+
textSize: "Text Size",
365366
},
366367
export: {
367368
hiddenDesc: "If true, the component is hidden",

‎client/packages/lowcoder/src/i18n/locales/zh.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -343,6 +343,7 @@ style: {
343343
containerfooterpadding: "下内边距",
344344
containerbodypadding: "内边距",
345345
minWidth: "最小宽度",
346+
textSize: "字体大小",
346347
},
347348
export: {
348349
hiddenDesc: "如果为true,则隐藏组件",

0 commit comments

Comments
 (0)