Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit0f9d2ef

Browse files
feat: add text-size option in styling
1 parent382f564 commit0f9d2ef

File tree

10 files changed

+80
-11
lines changed

10 files changed

+80
-11
lines changed
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{ReactComponentasMentionIcon}from"icons/icon-mention-comp.svg";
297297
export{ReactComponentasAutoCompleteCompIcon}from"icons/icon-autocomplete-comp.svg";
298298
export{ReactComponentasWidthIcon}from"icons/icon-width.svg";
299-
export{ReactComponentasResponsiveLayoutCompIcon}from"icons/icon-responsive-layout-comp.svg";
299+
export{ReactComponentasResponsiveLayoutCompIcon}from"icons/icon-responsive-layout-comp.svg";
300+
export{ReactComponentasTextSizeIcon}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
exportfunctiongetThemeDetailName(key:keyofThemeDetail){
@@ -70,6 +71,8 @@ export function getThemeDetailName(key: keyof ThemeDetail) {
7071
//Added By Aqib Mirza
7172
case"gridColumns":
7273
returntrans("themeDetail.gridColumns");
74+
case"textSize":
75+
returntrans("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
returntrue;
8892
}
8993
returnfalse;

‎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+
importstyledfrom"styled-components";
2829

2930
exporttypeRender=ReturnType<ConstructorToComp<typeofRenderComp>["getOriginalComp"]>;
3031
exportconstRenderComp=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+
constStyledIcon=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:<StyledIconas={IconRadius}title=""/>,
212218
placeholder:'3px',
213219
})}
220+
{this.children.textSize.propertyView({
221+
label:trans('style.textSize'),
222+
preInputNode:<StyledIconas={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
importstyledfrom"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
functionisSimpleColorConfig(config:SingleColorConfig):config isSimpleColorConfig{
@@ -35,6 +43,10 @@ function isRadiusConfig(config: SingleColorConfig): config is RadiusConfig {
3543
returnconfig.hasOwnProperty("radius");
3644
}
3745

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

71+
functionisEmptyTextSize(textSize:string){
72+
return_.isEmpty(textSize);
73+
}
74+
5975
functionisEmptyMargin(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
constPaddingIcon=styled(CompressIcon)`
223247
margin: 0 8px 0 -2px;
224248
`;
225-
249+
constStyledTextSizeIcon=styled(TextSizeIcon)`
250+
margin: 0 8px 0 -2px;
251+
`;
226252
constResetIcon=styled(IconReset)`
227253
&:hover g g {
228254
stroke: #315efb;
@@ -236,7 +262,8 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
236262
constname:Names<T>=config.name;
237263
if(
238264
name==="radius"||
239-
name==="cardRadius"
265+
name==="cardRadius"||
266+
name==="textSize"
240267
){
241268
childrenMap[name]=StringControl;
242269
}elseif(name==="margin"||name==="padding"||name==="containerheaderpadding"||name==="containerfooterpadding"||name==="containerbodypadding"){
@@ -323,9 +350,9 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
323350
returncontrolItem(
324351
{filterText:config.label},
325352
<divkey={index}>
326-
{name==="radius"||
353+
{(name==="radius"||
327354
name==="gap"||
328-
name==="cardRadius"
355+
name==="cardRadius")
329356
?(
330357
children[name]asInstanceType<typeofStringControl>
331358
).propertyView({
@@ -341,17 +368,25 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
341368
preInputNode:<MarginIcontitle=""/>,
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]asInstanceType<typeofStringControl>
350377
).propertyView({
351378
label:config.label,
352379
preInputNode:<PaddingIcontitle=""/>,
353380
placeholder:props[name],
354381
})
382+
:name==="textSize"
383+
?(
384+
children[name]asInstanceType<typeofStringControl>
385+
).propertyView({
386+
label:config.label,
387+
preInputNode:<StyledTextSizeIcontitle=""/>,
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
readonlyradius:string;
1818
};
1919

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

4751
exportconstdefaultTheme: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
exportconstSURFACE_COLOR="#FFFFFF";
@@ -260,6 +265,12 @@ const PADDING = {
260265
padding:"padding",
261266
}asconst;
262267

268+
constTEXT_SIZE={
269+
name:"textSize",
270+
label:trans("style.textSize"),
271+
textSize:"textSize",
272+
}asconst;
273+
263274
constCONTAINERHEADERPADDING={
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
]asconst;
700712

701713
exportconstFileStyle=[...getStaticBgBorderRadiusByBg(SURFACE_COLOR),TEXT,ACCENT,MARGIN,PADDING]asconst;

‎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)
[8]ページ先頭
©2009-2025 Movatter.jp