Skip to content

Commit 23f10e4

Browse files
raheeliftikhar5raheeliftikhar5
committed
theme canvas settings
1 parent 60609a1 commit 23f10e4

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": "Canvas Grid 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.props as Required<GridLayoutProps>;
216216
const { extraHeight, emptyRows } = this.props;
217217
const positionParams = genPositionParams(this.props);
218+
console.log(positionParams);
218219
const { containerPadding } = positionParams;
219220
const layout = this.getUILayout(undefined, true);
220221
let nbRow = 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+
const canvasSettings = [
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
<Flex align="center" justify="center" vertical style={{
@@ -468,6 +542,45 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
468542
</Flex>
469543
</Card>
470544
</ThemeSettingsView>
545+
546+
<ThemeSettingsView>
547+
<StyleThemeSettingsCover>
548+
<PageLayoutCompIcon width={"36px"} style={{marginRight : "10px"}}/> <h2 style={{color: "#ffffff", marginTop : "8px"}}> {trans("theme.canvas")}</h2>
549+
</StyleThemeSettingsCover>
550+
<Card style={{ marginBottom: "20px", minHeight : "200px" }}>
551+
<Flex gap={"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+
<Tooltip key={canvasSettingItem.settingsKey} title={canvasSettingItem.desc} placement="right">
564+
<List.Item key={canvasSettingItem.settingsKey}>
565+
<ThemeSettingsSelector
566+
themeSettingKey={canvasSettingItem.settingsKey}
567+
name={canvasSettingItem.name}
568+
radius={canvasSettingItem.value as string}
569+
configChange={(params) => {
570+
this.configChange(params);
571+
}}
572+
/>
573+
</List.Item>
574+
</Tooltip>
575+
))}
576+
</>
577+
)}
578+
/>
579+
<Divider type="vertical" style={{height: "610px"}}/>
580+
<PreviewApp style={{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)