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

Commitb19a0b3

Browse files
feat: add border-width option in styling
1 parent0f9d2ef commitb19a0b3

File tree

7 files changed

+45
-8
lines changed

7 files changed

+45
-8
lines changed

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,7 @@ export const columnChildrenMap = {
100100
background:withDefault(ColorControl,""),
101101
text:withDefault(ColorControl,""),
102102
border:withDefault(ColorControl,""),
103+
borderWidth:withDefault(RadiusControl,""),
103104
radius:withDefault(RadiusControl,""),
104105
textSize:withDefault(RadiusControl,""),
105106
cellColor:CellColorComp,
@@ -212,6 +213,11 @@ export class ColumnComp extends ColumnInitComp {
212213
{this.children.border.propertyView({
213214
label:trans('style.border')
214215
})}
216+
{this.children.borderWidth.propertyView({
217+
label:trans('style.borderWidth'),
218+
preInputNode:<StyledIconas={IconRadius}title=""/>,
219+
placeholder:'1px',
220+
})}
215221
{this.children.radius.propertyView({
216222
label:trans('style.borderRadius'),
217223
preInputNode:<StyledIconas={IconRadius}title=""/>,

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -273,6 +273,7 @@ const TableTd = styled.td<{
273273
}
274274
background:${(props)=>props.background} !important;
275275
border-color:${(props)=>props.$style.border} !important;
276+
border-width:${(props)=>props.$style.borderWidth} !important;
276277
border-radius:${(props)=>props.$style.radius};
277278
278279
> div > div {
@@ -405,6 +406,7 @@ function TableCellView(props: {
405406
text:columnStyle.text||columnsStyle.text,
406407
border:columnStyle.border||columnsStyle.border,
407408
radius:columnStyle.radius||columnsStyle.radius,
409+
borderWidth:columnStyle.borderWidth||columnsStyle.borderWidth,
408410
textSize:columnStyle.textSize||columnsStyle.textSize,
409411
}
410412
let{ background}=style;

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -322,6 +322,7 @@ export function columnsToAntdFormat(
322322
border:column.border,
323323
radius:column.radius,
324324
textSize:column.textSize,
325+
borderWidth:column.borderWidth,
325326
},
326327
cellColorFn:column.cellColor,
327328
onWidthResize:column.onWidthResize,

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

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import {
2929
MarginConfig,
3030
PaddingConfig,
3131
TextSizeConfig,
32+
BorderWidthConfig,
3233
}from"./styleControlConstants";
3334

3435
functionisSimpleColorConfig(config:SingleColorConfig):config isSimpleColorConfig{
@@ -43,6 +44,10 @@ function isRadiusConfig(config: SingleColorConfig): config is RadiusConfig {
4344
returnconfig.hasOwnProperty("radius");
4445
}
4546

47+
functionisBorderWidthConfig(config:SingleColorConfig):config isBorderWidthConfig{
48+
returnconfig.hasOwnProperty("borderWidth");
49+
}
50+
4651
functionisTextSizeConfig(config:SingleColorConfig):config isTextSizeConfig{
4752
returnconfig.hasOwnProperty("textSize");
4853
}
@@ -67,7 +72,9 @@ function isEmptyColor(color: string) {
6772
functionisEmptyRadius(radius:string){
6873
return_.isEmpty(radius);
6974
}
70-
75+
functionisEmptyBorderWidth(borderWidth:string){
76+
return_.isEmpty(borderWidth);
77+
}
7178
functionisEmptyTextSize(textSize:string){
7279
return_.isEmpty(textSize);
7380
}
@@ -97,6 +104,10 @@ function calcColors<ColorMap extends Record<string, string>>(
97104
res[name]=props[name];
98105
return;
99106
}
107+
if(!isEmptyBorderWidth(props[name])&&isBorderWidthConfig(config)){
108+
res[name]=props[name];
109+
return;
110+
}
100111
if(!isEmptyTextSize(props[name])&&isTextSizeConfig(config)){
101112
res[name]=props[name];
102113
return;
@@ -123,6 +134,9 @@ function calcColors<ColorMap extends Record<string, string>>(
123134
if(isRadiusConfig(config)){
124135
res[name]=themeWithDefault[config.radius];
125136
}
137+
if(isBorderWidthConfig(config)){
138+
res[name]='1px';
139+
}
126140
if(isTextSizeConfig(config)){
127141
// TODO: remove default textSize after added in theme in backend.
128142
res[name]=themeWithDefault[config.textSize]||'14px';
@@ -261,7 +275,8 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
261275
colorConfigs.map((config)=>{
262276
constname:Names<T>=config.name;
263277
if(
264-
name==="radius"||
278+
name==="radius"||
279+
name==="borderWidth"||
265280
name==="cardRadius"||
266281
name==="textSize"
267282
){
@@ -350,7 +365,8 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
350365
returncontrolItem(
351366
{filterText:config.label},
352367
<divkey={index}>
353-
{(name==="radius"||
368+
{(name==="radius"||
369+
name==="borderWidth"||
354370
name==="gap"||
355371
name==="cardRadius")
356372
?(

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

Lines changed: 12 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+
exporttypeBorderWidthConfig=CommonColorConfig&{
21+
readonlyborderWidth:string;
22+
};
23+
2024
exporttypeTextSizeConfig=CommonColorConfig&{
2125
readonlytextSize:string;
2226
};
@@ -46,7 +50,7 @@ export type DepColorConfig = CommonColorConfig & {
4650
readonlydepType?:DEP_TYPE;
4751
transformer:(color:string, ...rest:string[])=>string;
4852
};
49-
exporttypeSingleColorConfig=SimpleColorConfig|DepColorConfig|RadiusConfig|TextSizeConfig|MarginConfig|PaddingConfig|ContainerHeaderPaddigConfig|ContainerFooterPaddigConfig|ContainerBodyPaddigConfig;
53+
exporttypeSingleColorConfig=SimpleColorConfig|DepColorConfig|RadiusConfig|BorderWidthConfig|TextSizeConfig|MarginConfig|PaddingConfig|ContainerHeaderPaddigConfig|ContainerFooterPaddigConfig|ContainerBodyPaddigConfig;
5054

5155
exportconstdefaultTheme:ThemeDetail={
5256
primary:"#3377FF",
@@ -253,6 +257,12 @@ const RADIUS = {
253257
radius:"borderRadius",
254258
}asconst;
255259

260+
constBORDER_WIDTH={
261+
name:"borderWidth",
262+
label:trans("style.borderWidth"),
263+
borderWidth:"borderWidth",
264+
}asconst;
265+
256266
constMARGIN={
257267
name:"margin",
258268
label:trans("style.margin"),
@@ -705,6 +715,7 @@ export const TableRowStyle = [
705715
exportconstTableColumnStyle=[
706716
getStaticBackground("#00000000"),
707717
getStaticBorder(),
718+
BORDER_WIDTH,
708719
RADIUS,
709720
TEXT,
710721
TEXT_SIZE,

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -318,9 +318,9 @@ export const en = {
318318
staticText:"Static text",
319319
accent:"Accent",
320320
validate:"Validation message",
321-
border:"Border",
321+
border:"Border color",
322322
borderRadius:"Border radius",
323-
borderwidth:"Border width",
323+
borderWidth:"Border width",
324324
background:"Background",
325325
headerBackground:"Header background",
326326
footerBackground:"Footer background",
@@ -362,7 +362,7 @@ export const en = {
362362
containerfooterpadding:"Footer Padding",
363363
containerbodypadding:"Body Padding",
364364
minWidth:"Minimum Width",
365-
textSize:"TextSize",
365+
textSize:"Textsize",
366366
},
367367
export:{
368368
hiddenDesc:"If true, the component is hidden",

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -300,8 +300,9 @@ style: {
300300
staticText:"静态文本",
301301
accent:"强调色",
302302
validate:"验证消息",
303-
border:"边框",
303+
border:"边框颜色",
304304
borderRadius:"边框半径",
305+
borderWidth:"边框宽度",
305306
background:"背景",
306307
headerBackground:"头部背景",
307308
footerBackground:"底部背景",

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp