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

Commit1616232

Browse files
theme canvas settings
1 parent1ff153e commit1616232

File tree

4 files changed

+148
-10
lines changed

4 files changed

+148
-10
lines changed

‎client/packages/lowcoder/src/api/commonSettingApi.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,14 @@ export interface ThemeDetail {
5353
chart?:string;
5454
margin?:string;
5555
padding?:string;
56+
gridPadding?:string;
5657
gridColumns?:string;//Added By Aqib Mirza
58+
gridRowHeight?:string;
59+
gridBgImage?:string;
60+
gridBgImageRepeat?:string;
61+
gridBgImageSize?:string;
62+
gridBgImagePosition?:string;
63+
gridBgImageOrigin?:string;
5764
text?:string;
5865
textSize?:string;
5966
fontFamily?:string;

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

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2581,7 +2581,8 @@ export const en = {
25812581
"chartClick":"Click",
25822582
"chartVisit":"Visit",
25832583
"chartQuery":"Query",
2584-
"chartBuy":"Buy"
2584+
"chartBuy":"Buy",
2585+
"canvas":"Canvas Settings",
25852586
},
25862587
"themeDetail":{
25872588
"primary":"Brand Color",
@@ -2617,11 +2618,27 @@ export const en = {
26172618
"paddingDesc":"Default padding typically used for most components",
26182619
"containerHeaderPadding":"Header Padding",
26192620
"containerheaderpaddingDesc":"Default header padding typically used for most components",
2620-
"gridColumns":"CanvasGrid Columns",
2621+
"gridColumns":"Grid Columns",
26212622
"gridColumnsDesc":"Default number of columns typically used for most containers",
26222623
"loadingIndicators":"Loading Indicators",
26232624
"showComponentLoadingIndicators":"Show loading indicators when component load",
2624-
"showDataLoadingIndicators":"Show loading indicators when data load"
2625+
"showDataLoadingIndicators":"Show loading indicators when data load",
2626+
"background":"Background Styles",
2627+
"gridSettings":"Grid Settings",
2628+
"gridRowHeight":"Grid Row Height",
2629+
"gridRowHeightDesc":"Height of each row in grid",
2630+
"gridPadding":"Canvas Padding",
2631+
"gridPaddingDesc":"Padding around the canvas",
2632+
"gridBgImage":"Background Image",
2633+
"gridBgImageDesc":"Canvas background image",
2634+
"gridBgImageRepeat":"Background Image Repeat",
2635+
"gridBgImageRepeatDesc":"Canvas background image repeat",
2636+
"gridBgImageSize":"Background Image Size",
2637+
"gridBgImageSizeDesc":"Canvas background image size",
2638+
"gridBgImagePosition":"Background Image Position",
2639+
"gridBgImagePositionDesc":"Canvas background image position",
2640+
"gridBgImageOrigin":"Background Image Origin",
2641+
"gridBgImageOriginDesc":"Canvas background image origin",
26252642
},
26262643
"pluginSetting":{
26272644
"title":"Plugins",

‎client/packages/lowcoder/src/layout/gridLayout.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -215,6 +215,7 @@ class GridLayout extends React.Component<GridLayoutProps, GridLayoutState> {
215215
const{ margin, rowHeight}=this.propsasRequired<GridLayoutProps>;
216216
const{ extraHeight, emptyRows}=this.props;
217217
constpositionParams=genPositionParams(this.props);
218+
console.log(positionParams);
218219
const{ containerPadding}=positionParams;
219220
constlayout=this.getUILayout(undefined,true);
220221
letnbRow=bottom(layout);

‎client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx

Lines changed: 120 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -302,13 +302,13 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
302302
type:"padding",
303303
value:this.state.theme?.padding,
304304
},
305-
{
306-
settingsKey:'gridColumns',
307-
name:trans('themeDetail.gridColumns'),
308-
desc:trans('themeDetail.gridColumnsDesc'),
309-
type:"gridColumns",
310-
value:this.state.theme?.gridColumns,
311-
}
305+
//{
306+
// settingsKey: 'gridColumns',
307+
// name: trans('themeDetail.gridColumns'),
308+
// desc: trans('themeDetail.gridColumnsDesc'),
309+
// type: "gridColumns",
310+
// value: this.state.theme?.gridColumns,
311+
//}
312312
]
313313
},
314314
{
@@ -332,6 +332,80 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
332332
},
333333
];
334334

335+
constcanvasSettings=[
336+
{
337+
title:trans('themeDetail.gridSettings'),
338+
items:[
339+
{
340+
settingsKey:'gridColumns',
341+
name:trans('themeDetail.gridColumns'),
342+
desc:trans('themeDetail.gridColumnsDesc'),
343+
type:"gridColumns",
344+
value:this.state.theme?.gridColumns,
345+
},
346+
{
347+
settingsKey:'gridRowHeight',
348+
name:trans('themeDetail.gridRowHeight'),
349+
desc:trans('themeDetail.gridRowHeightDesc'),
350+
type:"gridRowHeight",
351+
value:this.state.theme?.gridRowHeight,
352+
},
353+
]
354+
},
355+
{
356+
title:trans('themeDetail.spacing'),
357+
items:[
358+
{
359+
settingsKey:'gridPadding',
360+
name:trans('themeDetail.gridPadding'),
361+
desc:trans('themeDetail.gridPaddingDesc'),
362+
type:"gridPadding",
363+
value:this.state.theme?.gridPadding,
364+
}
365+
]
366+
},
367+
{
368+
title:trans('themeDetail.background'),
369+
items:[
370+
{
371+
settingsKey:'gridBgImage',
372+
name:trans('themeDetail.gridBgImage'),
373+
desc:trans('themeDetail.gridBgImageDesc'),
374+
type:"gridBgImage",
375+
value:this.state.theme?.gridBgImage,
376+
},
377+
{
378+
settingsKey:'gridBgImageRepeat',
379+
name:trans('themeDetail.gridBgImageRepeat'),
380+
desc:trans('themeDetail.gridBgImageRepeatDesc'),
381+
type:"gridBgImageRepeat",
382+
value:this.state.theme?.gridBgImageRepeat,
383+
},
384+
{
385+
settingsKey:'gridBgImageSize',
386+
name:trans('themeDetail.gridBgImageSize'),
387+
desc:trans('themeDetail.gridBgImageSizeDesc'),
388+
type:"gridBgImageSize",
389+
value:this.state.theme?.gridBgImageSize,
390+
},
391+
{
392+
settingsKey:'gridBgImagePosition',
393+
name:trans('themeDetail.gridBgImagePosition'),
394+
desc:trans('themeDetail.gridBgImagePositionDesc'),
395+
type:"gridBgImagePosition",
396+
value:this.state.theme?.gridBgImagePosition,
397+
},
398+
{
399+
settingsKey:'gridBgImageOrigin',
400+
name:trans('themeDetail.gridBgImageOrigin'),
401+
desc:trans('themeDetail.gridBgImageOriginDesc'),
402+
type:"gridBgImageOrigin",
403+
value:this.state.theme?.gridBgImageOrigin,
404+
}
405+
]
406+
},
407+
];
408+
335409
if(!this.themeDefault){
336410
return(
337411
<Flexalign="center"justify="center"verticalstyle={{
@@ -468,6 +542,45 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
468542
</Flex>
469543
</Card>
470544
</ThemeSettingsView>
545+
546+
<ThemeSettingsView>
547+
<StyleThemeSettingsCover>
548+
<PageLayoutCompIconwidth={"36px"}style={{marginRight :"10px"}}/><h2style={{color:"#ffffff",marginTop :"8px"}}>{trans("theme.canvas")}</h2>
549+
</StyleThemeSettingsCover>
550+
<Cardstyle={{marginBottom:"20px",minHeight :"200px"}}>
551+
<Flexgap={"middle"}>
552+
<List
553+
bordered
554+
dataSource={canvasSettings}
555+
renderItem={(item)=>(
556+
<>
557+
{item.title&&(
558+
<List.Item>
559+
<DetailTitle>{item.title}</DetailTitle>
560+
</List.Item>
561+
)}
562+
{item.items.map((canvasSettingItem)=>(
563+
<Tooltipkey={canvasSettingItem.settingsKey}title={canvasSettingItem.desc}placement="right">
564+
<List.Itemkey={canvasSettingItem.settingsKey}>
565+
<ThemeSettingsSelector
566+
themeSettingKey={canvasSettingItem.settingsKey}
567+
name={canvasSettingItem.name}
568+
radius={canvasSettingItem.valueasstring}
569+
configChange={(params)=>{
570+
this.configChange(params);
571+
}}
572+
/>
573+
</List.Item>
574+
</Tooltip>
575+
))}
576+
</>
577+
)}
578+
/>
579+
<Dividertype="vertical"style={{height:"610px"}}/>
580+
<PreviewAppstyle={{marginTop:'3px',height:"620px",width:"100%"}}theme={this.state.theme!}dsl={dsl}/>
581+
</Flex>
582+
</Card>
583+
</ThemeSettingsView>
471584

472585
<ThemeSettingsView>
473586
<StyleThemeSettingsCover>

0 commit comments

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