Skip to content

Commit b19a0b3

Browse files
raheeliftikhar5raheeliftikhar5
committed
feat: add border-width option in styling
1 parent 0f9d2ef commit b19a0b3

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: <StyledIcon as={IconRadius} title="" />,
219+
placeholder: '1px',
220+
})}
215221
{this.children.radius.propertyView({
216222
label: trans('style.borderRadius'),
217223
preInputNode: <StyledIcon as={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
function isSimpleColorConfig(config: SingleColorConfig): config is SimpleColorConfig {
@@ -43,6 +44,10 @@ function isRadiusConfig(config: SingleColorConfig): config is RadiusConfig {
4344
return config.hasOwnProperty("radius");
4445
}
4546

47+
function isBorderWidthConfig(config: SingleColorConfig): config is BorderWidthConfig {
48+
return config.hasOwnProperty("borderWidth");
49+
}
50+
4651
function isTextSizeConfig(config: SingleColorConfig): config is TextSizeConfig {
4752
return config.hasOwnProperty("textSize");
4853
}
@@ -67,7 +72,9 @@ function isEmptyColor(color: string) {
6772
function isEmptyRadius(radius: string) {
6873
return _.isEmpty(radius);
6974
}
70-
75+
function isEmptyBorderWidth(borderWidth: string) {
76+
return _.isEmpty(borderWidth);
77+
}
7178
function isEmptyTextSize(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
const name: 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
return controlItem(
351366
{ filterText: config.label },
352367
<div key={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
readonly radius: string;
1818
};
1919

20+
export type BorderWidthConfig = CommonColorConfig & {
21+
readonly borderWidth: string;
22+
};
23+
2024
export type TextSizeConfig = CommonColorConfig & {
2125
readonly textSize: string;
2226
};
@@ -46,7 +50,7 @@ export type DepColorConfig = CommonColorConfig & {
4650
readonly depType?: DEP_TYPE;
4751
transformer: (color: string, ...rest: string[]) => string;
4852
};
49-
export type SingleColorConfig = SimpleColorConfig | DepColorConfig | RadiusConfig | TextSizeConfig | MarginConfig | PaddingConfig | ContainerHeaderPaddigConfig | ContainerFooterPaddigConfig | ContainerBodyPaddigConfig;
53+
export type SingleColorConfig = SimpleColorConfig | DepColorConfig | RadiusConfig | BorderWidthConfig | TextSizeConfig | MarginConfig | PaddingConfig | ContainerHeaderPaddigConfig | ContainerFooterPaddigConfig | ContainerBodyPaddigConfig;
5054

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

260+
const BORDER_WIDTH = {
261+
name: "borderWidth",
262+
label: trans("style.borderWidth"),
263+
borderWidth: "borderWidth",
264+
} as const;
265+
256266
const MARGIN = {
257267
name: "margin",
258268
label: trans("style.margin"),
@@ -705,6 +715,7 @@ export const TableRowStyle = [
705715
export const TableColumnStyle = [
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: "Text Size",
365+
textSize: "Text size",
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)