Skip to content

Commit e76ef90

Browse files
raheeliftikhar5raheeliftikhar5
committed
canvas setting in theme and app
1 parent dba9097 commit e76ef90

File tree

12 files changed

+361
-122
lines changed

12 files changed

+361
-122
lines changed

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,9 +53,11 @@ export interface ThemeDetail {
5353
chart?: string;
5454
margin?: string;
5555
padding?: string;
56-
gridPadding?: string;
57-
gridColumns?: string; //Added By Aqib Mirza
56+
gridPaddingX?: number;
57+
gridPaddingY?: number;
58+
gridColumns?: string;
5859
gridRowHeight?: string;
60+
gridRowCount?: number;
5961
gridBgImage?: string;
6062
gridBgImageRepeat?: string;
6163
gridBgImageSize?: string;

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

Lines changed: 105 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,9 @@ export type configChangeParams = {
3030
showDataLoadingIndicators?: boolean;
3131
gridColumns?: string;
3232
gridRowHeight?: string;
33-
gridPadding?: string;
33+
gridRowCount?: number;
34+
gridPaddingX?: number;
35+
gridPaddingY?: number;
3436
gridBgImage?: string;
3537
gridBgImageRepeat?: string;
3638
gridBgImageSize?: string;
@@ -58,7 +60,9 @@ type ColorConfigProps = {
5860
showDataLoadingIndicators?: boolean;
5961
gridColumns?: string;
6062
gridRowHeight?: string;
61-
gridPadding?: string;
63+
gridRowCount?: number;
64+
gridPaddingX?: number;
65+
gridPaddingY?: number;
6266
gridBgImage?: string;
6367
gridBgImageRepeat?: string;
6468
gridBgImageSize?: string;
@@ -85,7 +89,9 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
8589
showDataLoadingIndicators: defaultShowDataLoaders,
8690
gridColumns: defaultGridColumns,
8791
gridRowHeight: defaultGridRowHeight,
88-
gridPadding: defaultGridPadding,
92+
gridRowCount: defaultGridRowCount,
93+
gridPaddingX: defaultGridPaddingX,
94+
gridPaddingY: defaultGridPaddingY,
8995
gridBgImage: defaultGridBgImage,
9096
gridBgImageRepeat: defaultGridBgImageRepeat,
9197
gridBgImageSize: defaultGridBgImageSize,
@@ -106,7 +112,9 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
106112
const [showDataLoaders, setDataLoaders] = useState(defaultShowDataLoaders);
107113
const [gridColumns, setGridColumns] = useState(defaultGridColumns);
108114
const [gridRowHeight, setGridRowHeight] = useState(defaultGridRowHeight);
109-
const [gridPadding, setGridPadding] = useState(defaultGridPadding);
115+
const [gridRowCount, setGridRowCount] = useState(defaultGridRowCount);
116+
const [gridPaddingX, setGridPaddingX] = useState(defaultGridPaddingX);
117+
const [gridPaddingY, setGridPaddingY] = useState(defaultGridPaddingY);
110118
const [gridBgImage, setGridBgImage] = useState(defaultGridBgImage);
111119
const [gridBgImageRepeat, setGridBgImageRepeat] = useState(defaultGridBgImageRepeat);
112120
const [gridBgImageSize, setGridBgImageSize] = useState(defaultGridBgImageSize);
@@ -166,11 +174,6 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
166174
result = "3px";
167175
}
168176

169-
if (themeSettingKey === 'gridPadding') {
170-
setGridPadding(result);
171-
configChange({ themeSettingKey, gridPadding: result });
172-
return;
173-
}
174177
setPadding(result);
175178
configChange({ themeSettingKey, padding: result });
176179
};
@@ -233,6 +236,34 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
233236
configChange({ themeSettingKey, gridColumns: result });
234237
};
235238

239+
const gridRowCountInputBlur = (value: number) => {
240+
let result = Infinity;
241+
if (value > 0) {
242+
result = value;
243+
}
244+
245+
setGridRowCount(result);
246+
configChange({ themeSettingKey, gridRowCount: result });
247+
};
248+
249+
const gridPaddingInputBlur = (padding: number) => {
250+
let result = 20;
251+
if (padding > 0) {
252+
result = padding;
253+
}
254+
255+
if (themeSettingKey === 'gridPaddingX') {
256+
setGridPaddingX(result);
257+
configChange({ themeSettingKey, gridPaddingX: result });
258+
return;
259+
}
260+
if (themeSettingKey === 'gridPaddingY') {
261+
setGridPaddingY(result);
262+
configChange({ themeSettingKey, gridPaddingY: result });
263+
return;
264+
}
265+
};
266+
236267
const gridBackgroundInputBlur = (value: string) => {
237268
switch (themeSettingKey) {
238269
case 'gridBgImage':
@@ -284,6 +315,10 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
284315
setGridColumns(defaultGridColumns);
285316
}, [defaultGridColumns]);
286317

318+
useEffect(() => {
319+
setGridRowCount(defaultGridRowCount);
320+
}, [defaultGridRowCount]);
321+
287322
useEffect(() => {
288323
setBorderStyle(defaultBorderStyle);
289324
}, [defaultBorderStyle]);
@@ -331,7 +366,9 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
331366
themeSettingKey !== "showDataLoadingIndicators" &&
332367
themeSettingKey !== "gridColumns" &&
333368
themeSettingKey !== "gridRowHeight" &&
334-
themeSettingKey !== "gridPadding" &&
369+
themeSettingKey !== "gridRowCount" &&
370+
themeSettingKey !== "gridPaddingX" &&
371+
themeSettingKey !== "gridPaddingY" &&
335372
themeSettingKey !== "gridBgImage" &&
336373
themeSettingKey !== "gridBgImageRepeat" &&
337374
themeSettingKey !== "gridBgImageSize" &&
@@ -508,9 +545,7 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
508545
{themeSettingKey === "gridColumns" && (
509546
<div className="config-input">
510547
<GridColumns $gridColumns={defaultGridColumns || "24"}>
511-
<div>
512-
<TableCellsIcon title="" />
513-
</div>
548+
<div><TableCellsIcon title="" /></div>
514549
</GridColumns>
515550

516551
<Slider
@@ -527,36 +562,75 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
527562
{themeSettingKey === "gridRowHeight" && (
528563
<div className="config-input">
529564
<GridColumns $gridColumns={defaultGridColumns || "24"}>
530-
<div>
531-
<TableCellsIcon title="" />
532-
</div>
565+
<div><TableCellsIcon title="" /></div>
533566
</GridColumns>
534567

535568
<Slider
536569
style={{ width: "90%", margin: "8px 5% 0 5%"}}
537570
min={6} // Define the minimum value for the slider
538-
max={16} // Define the maximum value for the slider
571+
max={20} // Define the maximum value for the slider
539572
value={parseInt(gridRowHeight || "8")}
540573
onChange={(value) => setGridRowHeight(value.toString())}
541574
onChangeComplete={(value) => gridSizeInputBlur(value.toString())}
542575
/>
543576
</div>
544577
)}
545578

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-
/>
579+
{themeSettingKey === "gridRowCount" && (
580+
<div className="config-input">
581+
<GridColumns $gridColumns={defaultGridColumns || "24"}>
582+
<div><TableCellsIcon title="" /></div>
583+
</GridColumns>
584+
585+
<TacoInput
586+
type="number"
587+
min={0}
588+
value={gridRowCount}
589+
onChange={(e) => setGridRowCount(Number(e.target.value))}
590+
onBlur={(e) => gridRowCountInputBlur(Number(e.target.value))}
591+
onKeyUp={(e) =>
592+
e.nativeEvent.key === "Enter" &&
593+
gridRowCountInputBlur(Number(e.currentTarget.value))
594+
}
595+
/>
596+
</div>
597+
)}
598+
599+
{themeSettingKey === "gridPaddingX" && (
600+
<div className="config-input">
601+
<Padding $padding={"3px"}>
602+
<div><CompressIcon title="" /></div>
603+
</Padding>
604+
<TacoInput
605+
type="number"
606+
min={0}
607+
value={gridPaddingX}
608+
onChange={(e) => setGridPaddingX(Number(e.target.value))}
609+
onBlur={(e) => gridPaddingInputBlur(Number(e.target.value))}
610+
onKeyUp={(e) =>
611+
e.nativeEvent.key === "Enter" &&
612+
gridPaddingInputBlur(Number(e.currentTarget.value))
613+
}
614+
/>
615+
</div>
616+
)}
617+
618+
{themeSettingKey === "gridPaddingY" && (
619+
<div className="config-input">
620+
<Padding $padding={"3px"}>
621+
<div><CompressIcon title="" /></div>
622+
</Padding>
623+
<TacoInput
624+
type="number"
625+
min={0}
626+
value={gridPaddingY}
627+
onChange={(e) => setGridPaddingY(Number(e.target.value))}
628+
onBlur={(e) => gridPaddingInputBlur(Number(e.target.value))}
629+
onKeyUp={(e) =>
630+
e.nativeEvent.key === "Enter" &&
631+
gridPaddingInputBlur(Number(e.currentTarget.value))
632+
}
633+
/>
560634
</div>
561635
)}
562636

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

Lines changed: 79 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { default as Divider } from "antd/es/divider";
1414
import { THEME_SETTING } from "constants/routesURL";
1515
import { CustomShortcutsComp } from "./customShortcutsComp";
1616
import { DEFAULT_THEMEID } from "comps/utils/themeUtil";
17-
import { StringControl } from "comps/controls/codeControl";
17+
import { NumberControl, RangeControl, StringControl } from "comps/controls/codeControl";
1818
import { IconControl } from "comps/controls/iconControl";
1919
import { dropdownControl } from "comps/controls/dropdownControl";
2020
import { ApplicationCategoriesEnum } from "constants/applicationConstants";
@@ -183,12 +183,22 @@ const childrenMap = {
183183
icon: IconControl,
184184
category: dropdownControl(AppCategories, ApplicationCategoriesEnum.BUSINESS),
185185
showHeaderInPublic: withDefault(BoolControl, true),
186-
maxWidth: dropdownInputSimpleControl(OPTIONS, USER_DEFINE, "1920"),
187186
themeId: valueComp<string>(DEFAULT_THEMEID),
188187
preventAppStylesOverwriting: withDefault(BoolControl, true),
189188
customShortcuts: CustomShortcutsComp,
190189
disableCollision: valueComp<boolean>(false),
191190
lowcoderCompVersion: withDefault(StringControl, 'latest'),
191+
maxWidth: dropdownInputSimpleControl(OPTIONS, USER_DEFINE, "1920"),
192+
gridColumns: RangeControl.closed(8, 48, 24),
193+
gridRowHeight: RangeControl.closed(6, 20, 8),
194+
gridRowCount: NumberControl,
195+
gridPaddingX: NumberControl,
196+
gridPaddingY: NumberControl,
197+
gridBgImage: StringControl,
198+
gridBgImageRepeat: StringControl,
199+
gridBgImageSize: StringControl,
200+
gridBgImagePosition: StringControl,
201+
gridBgImageOrigin: StringControl,
192202
};
193203
type ChildrenInstance = RecordConstructorToComp<typeof childrenMap> & {
194204
themeList: ThemeType[];
@@ -210,6 +220,16 @@ function AppSettingsModal(props: ChildrenInstance) {
210220
showHeaderInPublic,
211221
preventAppStylesOverwriting,
212222
lowcoderCompVersion,
223+
gridColumns,
224+
gridRowHeight,
225+
gridRowCount,
226+
gridPaddingX,
227+
gridPaddingY,
228+
gridBgImage,
229+
gridBgImageRepeat,
230+
gridBgImageSize,
231+
gridBgImagePosition,
232+
gridBgImageOrigin,
213233
} = props;
214234

215235
const THEME_OPTIONS = themeList?.map((theme) => ({
@@ -278,14 +298,6 @@ function AppSettingsModal(props: ChildrenInstance) {
278298
label: trans("appSetting.showPublicHeader"),
279299
})}
280300
</div>
281-
{maxWidth.propertyView({
282-
dropdownLabel: trans("appSetting.canvasMaxWidth"),
283-
inputLabel: trans("appSetting.userDefinedMaxWidth"),
284-
inputPlaceholder: trans("appSetting.inputUserDefinedPxValue"),
285-
placement: "bottom",
286-
min: 350,
287-
lastNode: <span>{trans("appSetting.maxWidthTip")}</span>,
288-
})}
289301
<Dropdown
290302
defaultValue={
291303
themeWithDefault === ""
@@ -322,14 +334,69 @@ function AppSettingsModal(props: ChildrenInstance) {
322334
</div>
323335
</DivStyled>
324336
<DividerStyled />
337+
338+
<Title>{trans("appSetting.canvas")}</Title>
339+
<DivStyled>
340+
{maxWidth.propertyView({
341+
dropdownLabel: trans("appSetting.canvasMaxWidth"),
342+
inputLabel: trans("appSetting.userDefinedMaxWidth"),
343+
inputPlaceholder: trans("appSetting.inputUserDefinedPxValue"),
344+
placement: "bottom",
345+
min: 350,
346+
lastNode: <span>{trans("appSetting.maxWidthTip")}</span>,
347+
})}
348+
{gridColumns.propertyView({
349+
label: trans("appSetting.gridColumns"),
350+
placeholder: '24',
351+
})}
352+
{gridRowHeight.propertyView({
353+
label: trans("appSetting.gridRowHeight"),
354+
placeholder: '8',
355+
})}
356+
{gridRowCount.propertyView({
357+
label: trans("appSetting.gridRowCount"),
358+
placeholder: 'Infinity',
359+
})}
360+
{gridPaddingX.propertyView({
361+
label: trans("appSetting.gridPaddingX"),
362+
placeholder: '20',
363+
})}
364+
{gridPaddingY.propertyView({
365+
label: trans("appSetting.gridPaddingY"),
366+
placeholder: '20',
367+
})}
368+
{gridBgImage.propertyView({
369+
label: trans("appSetting.gridBgImage"),
370+
placeholder: '',
371+
})}
372+
{gridBgImageRepeat.propertyView({
373+
label: trans("appSetting.gridBgImageRepeat"),
374+
placeholder: 'no-repeat',
375+
})}
376+
{gridBgImageSize.propertyView({
377+
label: trans("appSetting.gridBgImageSize"),
378+
placeholder: 'cover',
379+
})}
380+
{gridBgImagePosition.propertyView({
381+
label: trans("appSetting.gridBgImagePosition"),
382+
placeholder: 'center',
383+
})}
384+
{gridBgImageOrigin.propertyView({
385+
label: trans("appSetting.gridBgImageOrigin"),
386+
placeholder: 'no-padding',
387+
})}
388+
</DivStyled>
389+
<DividerStyled />
390+
391+
<Title>Lowcoder Comps</Title>
325392
<DivStyled>
326393
<Dropdown
327394
defaultValue={lowcoderCompVersion.getView()}
328395
placeholder={'Select version'}
329396
options={
330397
lowcoderCompVersions.map(version => ({label: version, value: version}))
331398
}
332-
label={'Lowcoder Comps Version'}
399+
label={'Current Version'}
333400
placement="bottom"
334401
onChange={async (value) => {
335402
await getPromiseAfterDispatch(
@@ -345,6 +412,7 @@ function AppSettingsModal(props: ChildrenInstance) {
345412
/>
346413
</DivStyled>
347414
<DividerStyled />
415+
348416
{props.customShortcuts.getPropertyView()}
349417
</SettingsStyled>
350418
);

0 commit comments

Comments
 (0)