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

Commit4380582

Browse files
authored
Merge pull request#684 from imtananikhwa/imtanan-task1
Add properties and CSS controls to components
2 parents2f38c64 +e3463a0 commit4380582

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
consttitle=comp.children.title.unevaledValue;
160161
constdataIndex=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-
<Dividerstyle={{margin:'12px 0'}}/>
230+
<Dividerstyle={{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-
<Dividerstyle={{margin:'12px 0'}}/>
247+
<Dividerstyle={{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:<StyledBorderIconas={BorderWidthIcon}title=""/>,
264+
preInputNode:<StyledBorderIconas={BorderWidthIcon}title=""/>,
264265
placeholder:'1px',
265266
})}
266267
{this.children.radius.propertyView({
267268
label:trans('style.borderRadius'),
268-
preInputNode:<StyledBorderRadiusIconas={IconRadius}title=""/>,
269+
preInputNode:<StyledBorderRadiusIconas={IconRadius}title=""/>,
269270
placeholder:'3px',
270271
})}
271272
{this.children.textSize.propertyView({
272273
label:trans('style.textSize'),
273-
preInputNode:<StyledTextSizeIconas={TextSizeIcon}title=""/>,
274+
preInputNode:<StyledTextSizeIconas={TextSizeIcon}title=""/>,
274275
placeholder:'14px',
275276
})}
276277
{this.children.textWeight.propertyView({
277278
label:trans('style.textWeight'),
278-
preInputNode:<StyledTextWeightIconas={TextWeigthIcon}title=""/>,
279+
preInputNode:<StyledTextWeightIconas={TextWeigthIcon}title=""/>,
279280
placeholder:'normal',
280281
})}
281282
{this.children.fontFamily.propertyView({
282283
label:trans('style.fontFamily'),
283-
preInputNode:<StyledFontFamilyIconas={FontFamilyIcon}title=""/>,
284+
preInputNode:<StyledFontFamilyIconas={FontFamilyIcon}title=""/>,
284285
placeholder:'sans-serif',
285286
})}
287+
{this.children.fontStyle.propertyView({
288+
label:trans('style.fontStyle'),
289+
preInputNode:<StyledFontFamilyIconas={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
constbackground=genLinerGradient(style.background);
5757
constselectedRowBackground=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
constTableTh=styled.th<{width?:number}>`
308312
overflow: hidden;
309313
@@ -318,7 +322,7 @@ const TableTh = styled.th<{ width?: number }>`
318322

319323
constTableTd=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
constcellColor=cellColorFn({
520527
currentCell:record[title.toLowerCase()],
521528
});
522-
529+
523530
conststyle={
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.Providervalue={{isEditing:editing,setIsEditing:setEditing}}>
560568
{tdView}
@@ -804,7 +812,7 @@ export function TableCompView(props: {
804812

805813
return(
806814
<BackgroundColorContext.Providervalue={style.background}>
807-
815+
808816
<BackgroundWrapperref={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()asany}
@@ -857,14 +865,14 @@ export function TableCompView(props: {
857865
compChildren.loading.getView()
858866
}
859867
/>
860-
868+
861869
<SlotConfigContext.Providervalue={{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
consttitle=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-bodya {
3435
color:${style.links};
@@ -111,7 +112,7 @@ const VerticalAlignmentOptions = [
111112
]asconst;
112113

113114

114-
letTextTmpComp=(function(){
115+
letTextTmpComp=(function(){
115116

116117
constchildrenMap={
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
returnnewUICompBuilder(childrenMap,(props)=>{
@@ -145,7 +146,7 @@ let TextTmpComp = (function () {
145146
.setPropertyViewFn((children)=>{
146147
return(
147148
<>
148-
149+
149150
<Sectionname={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
<Sectionname={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
exportfunctioncheckMentionListData(data:any){
278-
if(data==="")return{}
279-
for(constkeyindata){
280-
check(data[key],["array"],key,(node)=>{
281-
check(node,["string"],);
279+
if(data==="")return{}
280+
for(constkeyindata){
281+
check(data[key],["array"],key,(node)=>{
282+
check(node,["string"],);
282283
returnnode
283284
})
284285
}

0 commit comments

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