Skip to content

Commit dba9097

Browse files
raheeliftikhar5raheeliftikhar5
committed
theme canvas settings
1 parent 420c56f commit dba9097

File tree

8 files changed

+381
-92
lines changed

8 files changed

+381
-92
lines changed

‎client/packages/lowcoder/src/components/ThemeSettingsSelector.tsx

Lines changed: 198 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,21 @@ export type configChangeParams = {
2121
chart?: string;
2222
margin?: string;
2323
padding?: string;
24-
gridColumns?: string; // Added By Aqib Mirza
2524
borderStyle?: string;
2625
borderColor?: string;
2726
borderWidth?: string;
2827
fontFamily?: string;
2928
components?: Record<string, object>,
3029
showComponentLoadingIndicators?: boolean;
3130
showDataLoadingIndicators?: boolean;
31+
gridColumns?: string;
32+
gridRowHeight?: string;
33+
gridPadding?: string;
34+
gridBgImage?: string;
35+
gridBgImageRepeat?: string;
36+
gridBgImageSize?: string;
37+
gridBgImagePosition?: string;
38+
gridBgImageOrigin?: string;
3239
};
3340

3441
type ColorConfigProps = {
@@ -47,10 +54,16 @@ type ColorConfigProps = {
4754
fontFamily?: string;
4855
margin?: string;
4956
padding?: string;
50-
gridColumns?: string; // Added By Aqib Mirza
5157
showComponentLoadingIndicators?: boolean;
5258
showDataLoadingIndicators?: boolean;
53-
canvasItemValue?: string;
59+
gridColumns?: string;
60+
gridRowHeight?: string;
61+
gridPadding?: string;
62+
gridBgImage?: string;
63+
gridBgImageRepeat?: string;
64+
gridBgImageSize?: string;
65+
gridBgImagePosition?: string;
66+
gridBgImageOrigin?: string;
5467
};
5568

5669
export default function ThemeSettingsSelector(props: ColorConfigProps) {
@@ -64,29 +77,41 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
6477
showVarName = true,
6578
margin: defaultMargin,
6679
padding: defaultPadding,
67-
gridColumns: defaultGridColumns,
6880
borderStyle: defaultBorderStyle,
6981
borderWidth: defaultBorderWidth,
7082
borderColor: defaultBorderColor,
7183
fontFamily: defaultFontFamily,
7284
showComponentLoadingIndicators: defaultShowComponentLoaders,
7385
showDataLoadingIndicators: defaultShowDataLoaders,
74-
canvasItemValue: defaultCanvasItemValue,
86+
gridColumns: defaultGridColumns,
87+
gridRowHeight: defaultGridRowHeight,
88+
gridPadding: defaultGridPadding,
89+
gridBgImage: defaultGridBgImage,
90+
gridBgImageRepeat: defaultGridBgImageRepeat,
91+
gridBgImageSize: defaultGridBgImageSize,
92+
gridBgImagePosition: defaultGridBgImagePosition,
93+
gridBgImageOrigin: defaultGridBgImageOrigin,
7594
} = props;
7695

7796
const configChangeWithDebounce = _.debounce(configChange, 0);
7897
const [color, setColor] = useState(defaultColor);
7998
const [radius, setRadius] = useState(defaultRadius);
8099
const [margin, setMargin] = useState(defaultMargin);
81100
const [padding, setPadding] = useState(defaultPadding);
82-
const [gridColumns, setGridColumns] = useState(defaultGridColumns);
83101
const [borderStyle, setBorderStyle] = useState(defaultBorderStyle);
84102
const [borderWidth, setBorderWidth] = useState(defaultBorderWidth);
85103
const [borderColor, setBorderColor] = useState(defaultBorderColor);
86104
const [fontFamily, setFontFamily] = useState(defaultFontFamily);
87105
const [showComponentLoaders, setComponentLoaders] = useState(defaultShowComponentLoaders);
88106
const [showDataLoaders, setDataLoaders] = useState(defaultShowDataLoaders);
89-
const [canvasValue, setCanvasValue] = useState(defaultCanvasItemValue);
107+
const [gridColumns, setGridColumns] = useState(defaultGridColumns);
108+
const [gridRowHeight, setGridRowHeight] = useState(defaultGridRowHeight);
109+
const [gridPadding, setGridPadding] = useState(defaultGridPadding);
110+
const [gridBgImage, setGridBgImage] = useState(defaultGridBgImage);
111+
const [gridBgImageRepeat, setGridBgImageRepeat] = useState(defaultGridBgImageRepeat);
112+
const [gridBgImageSize, setGridBgImageSize] = useState(defaultGridBgImageSize);
113+
const [gridBgImagePosition, setGridBgImagePosition] = useState(defaultGridBgImagePosition);
114+
const [gridBgImageOrigin, setGridBgImageOrigin] = useState(defaultGridBgImageOrigin);
90115

91116
const varName = `(${themeSettingKey})`;
92117

@@ -139,20 +164,15 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
139164
result = padding;
140165
} else {
141166
result = "3px";
142-
}
143-
setPadding(result);
144-
configChange({ themeSettingKey, padding: result });
145-
};
167+
}
146168

147-
const gridColumnsInputBlur = (gridColumns: string) => {
148-
let result = "";
149-
if (!gridColumns) {
150-
result = "24";
151-
} else {
152-
result = gridColumns;
169+
if (themeSettingKey === 'gridPadding') {
170+
setGridPadding(result);
171+
configChange({ themeSettingKey, gridPadding: result });
172+
return;
153173
}
154-
setGridColumns(result);
155-
configChange({ themeSettingKey, gridColumns: result });
174+
setPadding(result);
175+
configChange({ themeSettingKey, padding: result });
156176
};
157177

158178
const borderStyleInputBlur = (borderStyle: string) => {
@@ -197,6 +217,46 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
197217
configChange({ themeSettingKey, fontFamily: result });
198218
};
199219

220+
const gridSizeInputBlur = (value: string) => {
221+
let result = "";
222+
if (!value) {
223+
result = themeSettingKey === 'gridRowHeight' ? '8' : '24';
224+
} else {
225+
result = value;
226+
}
227+
if (themeSettingKey === 'gridRowHeight') {
228+
setGridRowHeight(result);
229+
configChange({ themeSettingKey, gridRowHeight: result });
230+
return;
231+
}
232+
setGridColumns(result);
233+
configChange({ themeSettingKey, gridColumns: result });
234+
};
235+
236+
const gridBackgroundInputBlur = (value: string) => {
237+
switch (themeSettingKey) {
238+
case 'gridBgImage':
239+
setGridBgImage(value);
240+
configChange({ themeSettingKey, gridBgImage: value });
241+
break;
242+
case 'gridBgImageRepeat':
243+
setGridBgImageRepeat(value || 'no-repeat');
244+
configChange({ themeSettingKey, gridBgImageRepeat: value });
245+
break;
246+
case 'gridBgImageSize':
247+
setGridBgImageSize(value || "cover");
248+
configChange({ themeSettingKey, gridBgImageSize: value });
249+
break;
250+
case 'gridBgImagePosition':
251+
setGridBgImagePosition(value || "center");
252+
configChange({ themeSettingKey, gridBgImagePosition: value });
253+
break;
254+
case 'gridBgImageOrigin':
255+
setGridBgImageOrigin(value || 'padding-box');
256+
configChange({ themeSettingKey, gridBgImageOrigin: value });
257+
break;
258+
}
259+
}
200260

201261
useEffect(() => {
202262
if (color && isValidColor(color)) {
@@ -248,10 +308,6 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
248308
setDataLoaders(defaultShowDataLoaders);
249309
}, [defaultShowDataLoaders]);
250310

251-
useEffect(() => {
252-
setCanvasValue(defaultCanvasItemValue);
253-
}, [defaultCanvasItemValue]);
254-
255311
return (
256312
<ConfigItem className={props.className}>
257313
{themeSettingKey !== "showDataLoadingIndicators"
@@ -268,12 +324,19 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
268324
{themeSettingKey !== "radius" &&
269325
themeSettingKey !== "margin" &&
270326
themeSettingKey !== "padding" &&
271-
themeSettingKey !== "gridColumns" &&
272327
themeSettingKey !== "borderStyle" &&
273328
themeSettingKey !== "borderWidth" &&
274329
themeSettingKey !== "fontFamily" &&
275330
themeSettingKey !== "showComponentLoadingIndicators" &&
276-
themeSettingKey !== "showDataLoadingIndicators" && (
331+
themeSettingKey !== "showDataLoadingIndicators" &&
332+
themeSettingKey !== "gridColumns" &&
333+
themeSettingKey !== "gridRowHeight" &&
334+
themeSettingKey !== "gridPadding" &&
335+
themeSettingKey !== "gridBgImage" &&
336+
themeSettingKey !== "gridBgImageRepeat" &&
337+
themeSettingKey !== "gridBgImageSize" &&
338+
themeSettingKey !== "gridBgImagePosition" &&
339+
themeSettingKey !== "gridBgImageOrigin" && (
277340
<div className="config-input">
278341
<ColorSelect
279342
changeColor={_.debounce(setColor, 500, {
@@ -396,25 +459,6 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
396459
</div>
397460
)}
398461

399-
{themeSettingKey === "gridColumns" && (
400-
<div className="config-input">
401-
<GridColumns $gridColumns={defaultGridColumns || "24"}>
402-
<div>
403-
<TableCellsIcon title="" />
404-
</div>
405-
</GridColumns>
406-
407-
<Slider
408-
style={{ width: "90%", margin: "8px 5% 0 5%"}}
409-
min={8} // Define the minimum value for the slider
410-
max={48} // Define the maximum value for the slider
411-
value={parseInt(gridColumns || "24")}
412-
onChange={(value) => setGridColumns(value.toString())}
413-
onChangeComplete={(value) => gridColumnsInputBlur(value.toString())}
414-
/>
415-
</div>
416-
)}
417-
418462
{themeSettingKey === "fontFamily" && (
419463
<div className="config-input">
420464
<TacoInput
@@ -460,6 +504,116 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
460504
<span>{name}</span>
461505
</div>
462506
)}
507+
508+
{themeSettingKey === "gridColumns" && (
509+
<div className="config-input">
510+
<GridColumns $gridColumns={defaultGridColumns || "24"}>
511+
<div>
512+
<TableCellsIcon title="" />
513+
</div>
514+
</GridColumns>
515+
516+
<Slider
517+
style={{ width: "90%", margin: "8px 5% 0 5%"}}
518+
min={8} // Define the minimum value for the slider
519+
max={48} // Define the maximum value for the slider
520+
value={parseInt(gridColumns || "24")}
521+
onChange={(value) => setGridColumns(value.toString())}
522+
onChangeComplete={(value) => gridSizeInputBlur(value.toString())}
523+
/>
524+
</div>
525+
)}
526+
527+
{themeSettingKey === "gridRowHeight" && (
528+
<div className="config-input">
529+
<GridColumns $gridColumns={defaultGridColumns || "24"}>
530+
<div>
531+
<TableCellsIcon title="" />
532+
</div>
533+
</GridColumns>
534+
535+
<Slider
536+
style={{ width: "90%", margin: "8px 5% 0 5%"}}
537+
min={6} // Define the minimum value for the slider
538+
max={16} // Define the maximum value for the slider
539+
value={parseInt(gridRowHeight || "8")}
540+
onChange={(value) => setGridRowHeight(value.toString())}
541+
onChangeComplete={(value) => gridSizeInputBlur(value.toString())}
542+
/>
543+
</div>
544+
)}
545+
546+
{themeSettingKey === "gridPadding" && (
547+
<div className="config-input">
548+
<Padding $padding={defaultGridPadding || "0px"}>
549+
<div><CompressIcon title="" /></div>
550+
</Padding>
551+
<TacoInput
552+
value={gridPadding}
553+
onChange={(e) => setGridPadding(e.target.value)}
554+
onBlur={(e) => paddingInputBlur(e.target.value)}
555+
onKeyUp={(e) =>
556+
e.nativeEvent.key === "Enter" &&
557+
paddingInputBlur(e.currentTarget.value)
558+
}
559+
/>
560+
</div>
561+
)}
562+
563+
{themeSettingKey === "gridBgImage" && (
564+
<div className="config-input">
565+
<TacoInput
566+
value={gridBgImage}
567+
onChange={(e) => setGridBgImage(e.target.value)}
568+
onBlur={(e) => gridBackgroundInputBlur(e.target.value)}
569+
onKeyUp={(e) => e.nativeEvent.key === "Enter" && gridBackgroundInputBlur(e.currentTarget.value)}
570+
/>
571+
</div>
572+
)}
573+
574+
{themeSettingKey === "gridBgImageRepeat" && (
575+
<div className="config-input">
576+
<TacoInput
577+
value={gridBgImageRepeat}
578+
onChange={(e) => setGridBgImageRepeat(e.target.value)}
579+
onBlur={(e) => gridBackgroundInputBlur(e.target.value)}
580+
onKeyUp={(e) => e.nativeEvent.key === "Enter" && gridBackgroundInputBlur(e.currentTarget.value)}
581+
/>
582+
</div>
583+
)}
584+
585+
{themeSettingKey === "gridBgImageSize" && (
586+
<div className="config-input">
587+
<TacoInput
588+
value={gridBgImageSize}
589+
onChange={(e) => setGridBgImageSize(e.target.value)}
590+
onBlur={(e) => gridBackgroundInputBlur(e.target.value)}
591+
onKeyUp={(e) => e.nativeEvent.key === "Enter" && gridBackgroundInputBlur(e.currentTarget.value)}
592+
/>
593+
</div>
594+
)}
595+
596+
{themeSettingKey === "gridBgImagePosition" && (
597+
<div className="config-input">
598+
<TacoInput
599+
value={gridBgImagePosition}
600+
onChange={(e) => setGridBgImagePosition(e.target.value)}
601+
onBlur={(e) => gridBackgroundInputBlur(e.target.value)}
602+
onKeyUp={(e) => e.nativeEvent.key === "Enter" && gridBackgroundInputBlur(e.currentTarget.value)}
603+
/>
604+
</div>
605+
)}
606+
607+
{themeSettingKey === "gridBgImageOrigin" && (
608+
<div className="config-input">
609+
<TacoInput
610+
value={gridBgImageOrigin}
611+
onChange={(e) => setGridBgImageOrigin(e.target.value)}
612+
onBlur={(e) => gridBackgroundInputBlur(e.target.value)}
613+
onKeyUp={(e) => e.nativeEvent.key === "Enter" && gridBackgroundInputBlur(e.currentTarget.value)}
614+
/>
615+
</div>
616+
)}
463617
</ConfigItem>
464618
);
465619
}

‎client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -342,20 +342,21 @@ export const InnerGrid = React.memo((props: ViewPropsWithSelect) => {
342342
const horizontalGridCells = props.horizontalGridCells ? String(props.horizontalGridCells) : undefined;
343343
const currentTheme = useContext(ThemeContext)?.theme;
344344
const [currentRowCount, setRowCount] = useState(rowCount || Infinity);
345-
const [currentRowHeight, setRowHeight] = useState(DEFAULT_ROW_HEIGHT);
345+
const [currentRowHeight, setRowHeight] = useState(positionParams.rowHeight || DEFAULT_ROW_HEIGHT);
346346
const editorState = useContext(EditorContext);
347347
const { readOnly } = useContext(ExternalEditorContext);
348+
const appSettingsComp = editorState.getAppSettingsComp().getView();
349+
350+
const maxWidth = useMemo(() => appSettingsComp.maxWidth, [appSettingsComp.maxWidth]);
348351

349352
// Falk: TODO: Here we can define the inner grid columns dynamically
350-
//Added By Aqib Mirza
351353
const defaultGrid = useMemo(() => {
352354
return horizontalGridCells ||
353355
currentTheme?.gridColumns ||
354356
defaultTheme?.gridColumns ||
355-
"12";
357+
String(DEFAULT_GRID_COLUMNS);
356358
}, [horizontalGridCells, currentTheme?.gridColumns, defaultTheme?.gridColumns]);
357359

358-
/////////////////////
359360
const isDroppable =
360361
useContext(IsDroppable) && (_.isNil(props.isDroppable) || props.isDroppable) && !readOnly;
361362
const isDraggable = !readOnly && (_.isNil(props.isDraggable) || props.isDraggable);
@@ -479,14 +480,12 @@ export const InnerGrid = React.memo((props: ViewPropsWithSelect) => {
479480

480481
useEffect(() => {
481482
if (!isRowCountLocked) {
482-
setRowHeight(DEFAULT_ROW_HEIGHT);
483+
setRowHeight(positionParams.rowHeight || DEFAULT_ROW_HEIGHT);
483484
setRowCount(Infinity);
484485
onRowCountChange?.(0);
485486
}
486487
}, [isRowCountLocked, onRowCountChange]);
487488

488-
const maxWidth = editorState.getAppSettings().maxWidth;
489-
490489
// log.info("rowCount:", currentRowCount, "rowHeight:", currentRowHeight);
491490

492491
return (

0 commit comments

Comments
 (0)