Skip to content

Commit 4380582

Browse files
FalkWolskyFalkWolsky
authored
Merge pull request #684 from imtananikhwa/imtanan-task1
Add properties and CSS controls to components
2 parents 2f38c64 + e3463a0 commit 4380582

File tree

10 files changed

+438
-384
lines changed

10 files changed

+438
-384
lines changed

‎client/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
},
1212
"scripts": {
1313
"start": "yarn workspace lowcoder start",
14+
"start-win":"LOWCODER_API_SERVICE_URL=http://localhost:3000 yarn start",
1415
"start:ee": "REACT_APP_EDITION=enterprise yarn workspace lowcoder start",
1516
"start:ee-global": "REACT_APP_EDITION=enterprise-global yarn workspace lowcoder start",
1617
"build": "yarn node ./scripts/build.js",

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

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,7 @@ export const columnChildrenMap = {
108108
textSize: withDefault(RadiusControl, ""),
109109
textWeight: withDefault(StringControl, "normal"),
110110
fontFamily: withDefault(StringControl, "sans-serif"),
111+
fontStyle: withDefault(StringControl, 'normal'),
111112
cellColor: CellColorComp,
112113
textOverflow: withDefault(TextOverflowControl, "ellipsis"),
113114
linkColor: withDefault(ColorControl, "#3377ff"),
@@ -155,10 +156,10 @@ export class ColumnComp extends ColumnInitComp {
155156
)
156157
);
157158
}
158-
if(action.type === CompActionTypes.CHANGE_VALUE) {
159+
if (action.type === CompActionTypes.CHANGE_VALUE) {
159160
const title = comp.children.title.unevaledValue;
160161
const dataIndex = comp.children.dataIndex.getView();
161-
if(!Boolean(title)) {
162+
if (!Boolean(title)) {
162163
comp.children.title.dispatchChangeValueAction(dataIndex);
163164
}
164165
}
@@ -223,10 +224,10 @@ export class ColumnComp extends ColumnInitComp {
223224
})}
224225
{this.children.autoWidth.getView() === "fixed" &&
225226
this.children.width.propertyView({ label: trans("prop.width") })}
226-
227+
227228
{(columnType === 'link' || columnType === 'links') && (
228229
<>
229-
<Divider style={{margin: '12px 0'}} />
230+
<Divider style={{ margin: '12px 0' }} />
230231
{controlItem({}, (
231232
<div>
232233
<b>{"Link Style"}</b>
@@ -243,10 +244,10 @@ export class ColumnComp extends ColumnInitComp {
243244
})}
244245
</>
245246
)}
246-
<Divider style={{margin: '12px 0'}} />
247+
<Divider style={{ margin: '12px 0' }} />
247248
{controlItem({}, (
248249
<div>
249-
<b>{"Column Style"}</b>
250+
<b>{"Column Style"}</b>
250251
</div>
251252
))}
252253
{this.children.background.propertyView({
@@ -260,29 +261,34 @@ export class ColumnComp extends ColumnInitComp {
260261
})}
261262
{this.children.borderWidth.propertyView({
262263
label: trans('style.borderWidth'),
263-
preInputNode: <StyledBorderIcon as={BorderWidthIcon} title="" />,
264+
preInputNode: <StyledBorderIcon as={BorderWidthIcon} title="" />,
264265
placeholder: '1px',
265266
})}
266267
{this.children.radius.propertyView({
267268
label: trans('style.borderRadius'),
268-
preInputNode: <StyledBorderRadiusIcon as={IconRadius} title="" />,
269+
preInputNode: <StyledBorderRadiusIcon as={IconRadius} title="" />,
269270
placeholder: '3px',
270271
})}
271272
{this.children.textSize.propertyView({
272273
label: trans('style.textSize'),
273-
preInputNode: <StyledTextSizeIcon as={TextSizeIcon} title="" />,
274+
preInputNode: <StyledTextSizeIcon as={TextSizeIcon} title="" />,
274275
placeholder: '14px',
275276
})}
276277
{this.children.textWeight.propertyView({
277278
label: trans('style.textWeight'),
278-
preInputNode: <StyledTextWeightIcon as={TextWeigthIcon} title="" />,
279+
preInputNode: <StyledTextWeightIcon as={TextWeigthIcon} title="" />,
279280
placeholder: 'normal',
280281
})}
281282
{this.children.fontFamily.propertyView({
282283
label: trans('style.fontFamily'),
283-
preInputNode: <StyledFontFamilyIcon as={FontFamilyIcon} title="" />,
284+
preInputNode: <StyledFontFamilyIcon as={FontFamilyIcon} title="" />,
284285
placeholder: 'sans-serif',
285286
})}
287+
{this.children.fontStyle.propertyView({
288+
label: trans('style.fontStyle'),
289+
preInputNode: <StyledFontFamilyIcon as={FontFamilyIcon} title="" />,
290+
placeholder: 'normal'
291+
})}
286292
{this.children.textOverflow.getPropertyView()}
287293
{this.children.cellColor.getPropertyView()}
288294
</>

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

Lines changed: 34 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ const getStyle = (
5151
style: TableStyleType,
5252
rowStyle: TableRowStyleType,
5353
headerStyle: TableHeaderStyleType,
54-
toolbarStyle: TableToolbarStyleType
54+
toolbarStyle: TableToolbarStyleType,
5555
) => {
5656
const background = genLinerGradient(style.background);
5757
const selectedRowBackground = genLinerGradient(rowStyle.selectedRowBackground);
@@ -140,7 +140,8 @@ const BackgroundWrapper = styled.div<{
140140
background: ${(props) => props.$style.background} !important;
141141
border: ${(props) => `${props.$style.borderWidth} solid ${props.$style.border} !important`};
142142
border-radius: ${(props) => props.$style.radius} !important;
143-
padding: unset !important;
143+
// padding: unset !important;
144+
padding: ${(props) => props.$style.padding} !important
144145
margin: ${(props) => props.$style.margin} !important;
145146
overflow: scroll !important;
146147
${(props) => props.$style}
@@ -209,18 +210,19 @@ const TableWrapper = styled.div<{
209210
> .ant-table-thead {
210211
> tr > th {
211212
background-color: ${(props) => props.$headerStyle.headerBackground};
213+
212214
border-color: ${(props) => props.$headerStyle.border};
213215
border-width: ${(props) => props.$headerStyle.borderWidth};
214216
color: ${(props) => props.$headerStyle.headerText};
215217
border-inline-end: ${(props) => `${props.$headerStyle.borderWidth} solid ${props.$headerStyle.border}`} !important;
216-
${(props) =>
217-
props.$fixedHeader && `
218+
${(props) =>
219+
props.$fixedHeader && `
218220
position: sticky;
219221
position: -webkit-sticky;
220222
top: ${props.$fixedToolbar ? '47px' : '0'};
221223
z-index: 99;
222224
`
223-
}
225+
}
224226
225227
> div {
226228
margin: ${(props) => props.$headerStyle.margin};
@@ -229,6 +231,8 @@ const TableWrapper = styled.div<{
229231
font-size: ${(props) => props.$headerStyle.textSize};
230232
font-weight: ${(props) => props.$headerStyle.textWeight};
231233
font-family: ${(props) => props.$headerStyle.fontFamily};
234+
font-style: ${(props) => props.$headerStyle.fontStyle};
235+
color:${(props) => props.$headerStyle.text}
232236
}
233237
}
234238
@@ -286,8 +290,8 @@ const TableWrapper = styled.div<{
286290
287291
// hide the bottom border of the last row
288292
${(props) =>
289-
props.$toolbarPosition !== "below" &&
290-
`
293+
props.$toolbarPosition !== "below" &&
294+
`
291295
tbody > tr:last-child > td {
292296
border-bottom: unset;
293297
}
@@ -300,10 +304,10 @@ const TableWrapper = styled.div<{
300304
}
301305
}
302306
303-
${(props) =>
307+
${(props) =>
304308
props.$style && getStyle(props.$style, props.$rowStyle, props.$headerStyle, props.$toolbarStyle)}
305309
`;
306-
310+
307311
const TableTh = styled.th<{ width?: number }>`
308312
overflow: hidden;
309313
@@ -318,7 +322,7 @@ const TableTh = styled.th<{ width?: number }>`
318322

319323
const TableTd = styled.td<{
320324
$background: string;
321-
$style: TableColumnStyleType & {rowHeight?: string};
325+
$style: TableColumnStyleType & { rowHeight?: string };
322326
$defaultThemeDetail: ThemeDetail;
323327
$linkStyle?: TableColumnLinkStyleType;
324328
$isEditing: boolean;
@@ -348,7 +352,8 @@ const TableTd = styled.td<{
348352
349353
${(props) => props.$tableSize === 'small' && `
350354
padding: 1px 8px;
351-
font-size: ${props.$defaultThemeDetail.textSize == props.$style.textSize ? '14px !important' : props.$style.textSize + ' !important' };
355+
font-size: ${props.$defaultThemeDetail.textSize == props.$style.textSize ? '14px !important' : props.$style.textSize + ' !important'};
356+
font-style:${props.$style.fontStyle} !important;
352357
min-height: ${props.$style.rowHeight || '14px'};
353358
line-height: 20px;
354359
${!props.$autoHeight && `
@@ -358,7 +363,8 @@ const TableTd = styled.td<{
358363
`};
359364
${(props) => props.$tableSize === 'middle' && `
360365
padding: 8px 8px;
361-
font-size: ${props.$defaultThemeDetail.textSize == props.$style.textSize ? '16px !important' : props.$style.textSize + ' !important' };
366+
font-size: ${props.$defaultThemeDetail.textSize == props.$style.textSize ? '16px !important' : props.$style.textSize + ' !important'};
367+
font-style:${props.$style.fontStyle} !important;
362368
min-height: ${props.$style.rowHeight || '24px'};
363369
line-height: 24px;
364370
${!props.$autoHeight && `
@@ -368,7 +374,8 @@ const TableTd = styled.td<{
368374
`};
369375
${(props) => props.$tableSize === 'large' && `
370376
padding: 16px 16px;
371-
font-size: ${props.$defaultThemeDetail.textSize == props.$style.textSize ? '18px !important' : props.$style.textSize + ' !important' };
377+
font-size: ${props.$defaultThemeDetail.textSize == props.$style.textSize ? '18px !important' : props.$style.textSize + ' !important'};
378+
font-style:${props.$style.fontStyle} !important;
372379
min-height: ${props.$style.rowHeight || '48px'};
373380
${!props.$autoHeight && `
374381
overflow-y: auto;
@@ -444,7 +451,7 @@ const ResizeableTitle = (props: any) => {
444451
draggableOpts={{ enableUserSelectHack: false }}
445452
handle={(axis: ResizeHandleAxis, ref: ReactRef<HTMLDivElement>) => (
446453
<TitleResizeHandle
447-
ref={ref}
454+
ref={ref}
448455
onClick={(e) => {
449456
e.preventDefault();
450457
e.stopPropagation();
@@ -519,7 +526,7 @@ function TableCellView(props: {
519526
const cellColor = cellColorFn({
520527
currentCell: record[title.toLowerCase()],
521528
});
522-
529+
523530
const style = {
524531
background: cellColor || rowColor || columnStyle.background || columnsStyle.background,
525532
margin: columnStyle.margin || columnsStyle.margin,
@@ -528,8 +535,9 @@ function TableCellView(props: {
528535
radius: columnStyle.radius || columnsStyle.radius,
529536
borderWidth: columnStyle.borderWidth || columnsStyle.borderWidth,
530537
textSize: columnStyle.textSize || columnsStyle.textSize,
531-
textWeight: columnStyle.textWeight || columnsStyle.textWeight,
532-
fontFamily: columnStyle.fontFamily || columnsStyle.fontFamily,
538+
textWeight: columnsStyle.textWeight || columnStyle.textWeight,
539+
fontFamily: columnsStyle.fontFamily || columnStyle.fontFamily,
540+
fontStyle: columnsStyle.fontStyle || columnStyle.fontStyle,
533541
rowHeight: rowHeight,
534542
}
535543
let { background } = style;
@@ -554,7 +562,7 @@ function TableCellView(props: {
554562
</TableTd>
555563
);
556564
}
557-
565+
558566
return (
559567
<TableCellContext.Provider value={{ isEditing: editing, setIsEditing: setEditing }}>
560568
{tdView}
@@ -804,7 +812,7 @@ export function TableCompView(props: {
804812

805813
return (
806814
<BackgroundColorContext.Provider value={style.background} >
807-
815+
808816
<BackgroundWrapper ref={ref} $style={style} $tableAutoHeight={tableAutoHeight}>
809817
{toolbar.position === "above" && toolbarView}
810818
<TableWrapper
@@ -826,11 +834,11 @@ export function TableCompView(props: {
826834
: "OB_CHILDREN_KEY_PLACEHOLDER",
827835
fixed: "left",
828836
onExpand: (expanded) => {
829-
if(expanded) {
830-
handleChangeEvent('rowExpand')
831-
} else {
832-
handleChangeEvent('rowShrink')
833-
}
837+
if (expanded) {
838+
handleChangeEvent('rowExpand')
839+
} else {
840+
handleChangeEvent('rowShrink')
841+
}
834842
}
835843
}}
836844
rowColorFn={compChildren.rowColor.getView() as any}
@@ -857,14 +865,14 @@ export function TableCompView(props: {
857865
compChildren.loading.getView()
858866
}
859867
/>
860-
868+
861869
<SlotConfigContext.Provider value={{ modalWidth: width && Math.max(width, 300) }}>
862870
{expansion.expandModalView}
863871
</SlotConfigContext.Provider>
864872
</TableWrapper>
865873
{toolbar.position === "below" && toolbarView}
866874
</BackgroundWrapper>
867-
875+
868876
</BackgroundColorContext.Provider>
869877
);
870878
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -210,7 +210,7 @@ const tableChildrenMap = {
210210
toolbarStyle: styleControl(TableToolbarStyle),
211211
headerStyle: styleControl(TableHeaderStyle),
212212
searchText: StringControl,
213-
columnsStyle: withDefault(styleControl(TableColumnStyle), {borderWidth: '1px', radius: '0px'}),
213+
columnsStyle: withDefault(styleControl(TableColumnStyle), {borderWidth: '1px', radius: '0px',fontStyle:'italic'}),
214214
viewModeResizable: BoolControl,
215215
visibleResizables: BoolControl,
216216
// sample data for regenerating columns

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -311,6 +311,7 @@ export function columnsToAntdFormat(
311311
status: StatusType;
312312
}[];
313313
const title = renderTitle({ title: column.title, editable: column.editable });
314+
314315
return {
315316
title: column.showTitle ? title : '',
316317
titleText: column.title,
@@ -326,6 +327,7 @@ export function columnsToAntdFormat(
326327
radius: column.radius,
327328
textSize: column.textSize,
328329
textWeight: column.textWeight,
330+
fontStyle:column.fontStyle,
329331
fontFamily: column.fontFamily,
330332
borderWidth: column.borderWidth,
331333
},

‎client/packages/lowcoder/src/comps/comps/textComp.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ const getStyle = (style: TextStyleType) => {
2929
font-size: ${style.textSize} !important;
3030
font-weight: ${style.textWeight} !important;
3131
font-family: ${style.fontFamily} !important;
32+
font-style:${style.fontStyle} !important;
3233
background-color: ${style.background};
3334
.markdown-body a {
3435
color: ${style.links};
@@ -111,7 +112,7 @@ const VerticalAlignmentOptions = [
111112
] as const;
112113

113114

114-
let TextTmpComp = (function () {
115+
let TextTmpComp = (function () {
115116

116117
const childrenMap = {
117118
text: stringExposingStateControl(
@@ -123,7 +124,7 @@ let TextTmpComp = (function () {
123124
horizontalAlignment: alignWithJustifyControl(),
124125
verticalAlignment: dropdownControl(VerticalAlignmentOptions, "center"),
125126
style: styleControl(TextStyle),
126-
margin: MarginControl,
127+
margin: MarginControl,
127128
padding: PaddingControl,
128129
};
129130
return new UICompBuilder(childrenMap, (props) => {
@@ -145,7 +146,7 @@ let TextTmpComp = (function () {
145146
.setPropertyViewFn((children) => {
146147
return (
147148
<>
148-
149+
149150
<Section name={sectionNames.basic}>
150151
{children.type.propertyView({
151152
label: trans("value"),
@@ -160,7 +161,7 @@ let TextTmpComp = (function () {
160161
{hiddenPropertyView(children)}
161162
</Section>
162163
)}
163-
164+
164165
{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
165166
<>
166167
<Section name={sectionNames.layout}>

‎client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -229,6 +229,7 @@ export function getStyle(style: InputLikeStyleType) {
229229
font-size: ${style.textSize};
230230
font-weight: ${style.textWeight};
231231
font-family: ${style.fontFamily};
232+
font-style:${style.fontStyle};
232233
background-color: ${style.background};
233234
border-color: ${style.border};
234235
@@ -275,10 +276,10 @@ export const inputRefMethods = [
275276
];
276277

277278
export function checkMentionListData(data: any) {
278-
if(data === "") return {}
279-
for(const key in data) {
280-
check(data[key], ["array"], key,(node)=>{
281-
check(node, ["string"], );
279+
if (data === "") return {}
280+
for (const key in data) {
281+
check(data[key], ["array"], key, (node) => {
282+
check(node, ["string"],);
282283
return node
283284
})
284285
}

0 commit comments

Comments
 (0)