Skip to content

Commit 1a28ed3

Browse files
FalkWolskyFalkWolsky
authored
Merge pull request #270 from aaron1604/feat./grid-column-settings
feat: grid column settings in theme
2 parents 8502d64 + 8ab1298 commit 1a28ed3

File tree

14 files changed

+136
-10
lines changed

14 files changed

+136
-10
lines changed

‎client/packages/lowcoder-design/src/icons/icon-table-cells.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎client/packages/lowcoder-design/src/icons/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -284,3 +284,4 @@ export { ReactComponent as CalendarDeleteIcon } from "icons/icon-calendar-delete
284284
export { ReactComponent as TableCheckedIcon } from "icons/icon-table-checked.svg";
285285
export { ReactComponent as TableUnCheckedIcon } from "icons/icon-table-boolean-false.svg";
286286
export { ReactComponent as FileFolderIcon } from "icons/icon-editor-folder.svg";
287+
export { ReactComponent as TableCellsIcon } from "icons/icon-table-cells.svg" // Added By Aqib Mirza

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ export interface ThemeDetail {
4444
primarySurface: string; // comp bg-color
4545
borderRadius: string;
4646
chart?: string;
47+
gridColumns?: string; //Added By Aqib Mirza
4748
}
4849

4950
export function getThemeDetailName(key: keyof ThemeDetail) {
@@ -60,6 +61,9 @@ export function getThemeDetailName(key: keyof ThemeDetail) {
6061
return trans("themeDetail.primarySurface");
6162
case "borderRadius":
6263
return trans("themeDetail.borderRadius");
64+
//Added By Aqib Mirza
65+
case "gridColumns":
66+
return trans("themeDetail.gridColumns");
6367
}
6468
return "";
6569
}
@@ -71,6 +75,7 @@ export function isThemeColorKey(key: string) {
7175
case "textLight":
7276
case "canvas":
7377
case "primarySurface":
78+
case "gridColumns": //Added By Aqib Mirza
7479
return true;
7580
}
7681
return false;

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

Lines changed: 51 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
import _ from "lodash";
22
import { useEffect, useState } from "react";
3-
import { ConfigItem, Radius } from "../pages/setting/theme/styledComponents";
3+
import { ConfigItem, Radius, GridColumns } from "../pages/setting/theme/styledComponents";
44
import { isValidColor, toHex } from "components/colorSelect/colorUtils";
55
import { ColorSelect } from "components/colorSelect";
66
import { TacoInput } from "components/tacoInput";
7+
import { TableCellsIcon as GridIcon } from "lowcoder-design"; //Added By Aqib Mirza
78

89
export type configChangeParams = {
910
colorKey: string;
1011
color?: string;
1112
radius?: string;
1213
chart?: string;
14+
gridColumns?: string; //Added By Aqib Mirza
1315
};
1416

1517
type ColorConfigProps = {
@@ -21,6 +23,7 @@ type ColorConfigProps = {
2123
radius?: string;
2224
configChange: (params: configChangeParams) => void;
2325
showVarName?: boolean;
26+
gridColumns?: string; //Added By Aqib Mirza
2427
};
2528

2629
export default function ColorPicker(props: ColorConfigProps) {
@@ -32,10 +35,14 @@ export default function ColorPicker(props: ColorConfigProps) {
3235
radius: defaultRadius,
3336
configChange,
3437
showVarName = true,
38+
gridColumns: defaultGridColumns, //Added By Aqib Mirza
3539
} = props;
3640
const configChangeWithDebounce = _.debounce(configChange, 0);
3741
const [color, setColor] = useState(defaultColor);
3842
const [radius, setRadius] = useState(defaultRadius);
43+
44+
const [gridColumns, setGridColumns] = useState(defaultGridColumns); //Added By Aqib Mirza
45+
3946
const varName = `(${colorKey})`;
4047

4148
const colorInputBlur = () => {
@@ -62,6 +69,21 @@ export default function ColorPicker(props: ColorConfigProps) {
6269
configChange({ colorKey, radius: result });
6370
};
6471

72+
//Added By Aqib Mirza
73+
74+
const gridColumnsInputBlur = (gridColumns: string) => {
75+
let result = "";
76+
if (!gridColumns) {
77+
result = "0";
78+
} else {
79+
result = gridColumns;
80+
}
81+
setGridColumns(result);
82+
configChange({ colorKey, gridColumns: result });
83+
};
84+
85+
/////////////////////
86+
6587
useEffect(() => {
6688
if (color && isValidColor(color)) {
6789
configChangeWithDebounce({ colorKey, color });
@@ -77,6 +99,12 @@ export default function ColorPicker(props: ColorConfigProps) {
7799
setRadius(defaultRadius);
78100
}, [defaultRadius]);
79101

102+
// Added By Aqib Mirza
103+
useEffect(() => {
104+
setGridColumns(defaultGridColumns);
105+
}, [defaultGridColumns]);
106+
//////////////////////
107+
80108
return (
81109
<ConfigItem className={props.className}>
82110
<div className="text-desc">
@@ -85,7 +113,8 @@ export default function ColorPicker(props: ColorConfigProps) {
85113
</div>
86114
<div className="desc">{desc}</div>
87115
</div>
88-
{colorKey !== "borderRadius" ? (
116+
{colorKey !== "borderRadius" &&
117+
colorKey !== "gridColumns" && (
89118
<div className="config-input">
90119
<ColorSelect
91120
changeColor={_.debounce(setColor, 500, {
@@ -102,7 +131,8 @@ export default function ColorPicker(props: ColorConfigProps) {
102131
onKeyUp={(e) => e.nativeEvent.key === "Enter" && colorInputBlur()}
103132
/>
104133
</div>
105-
) : (
134+
)}
135+
{colorKey === "borderRadius" && (
106136
<div className="config-input">
107137
<Radius radius={defaultRadius || "0"}>
108138
<div>
@@ -117,6 +147,24 @@ export default function ColorPicker(props: ColorConfigProps) {
117147
/>
118148
</div>
119149
)}
150+
{colorKey === "gridColumns" && (
151+
<div className="config-input">
152+
<GridColumns gridColumns={defaultGridColumns || "24"}>
153+
<div>
154+
<GridIcon title="" />
155+
</div>
156+
</GridColumns>
157+
<TacoInput
158+
value={gridColumns}
159+
onChange={(e) => setGridColumns(e.target.value)}
160+
onBlur={(e) => gridColumnsInputBlur(e.target.value)}
161+
onKeyUp={(e) =>
162+
e.nativeEvent.key === "Enter" &&
163+
gridColumnsInputBlur(e.currentTarget.value)
164+
}
165+
/>
166+
</div>
167+
)}
120168
</ConfigItem>
121169
);
122170
}

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

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,8 @@ import { checkIsMobile } from "util/commonUtils";
5858
import { ExternalEditorContext } from "util/context/ExternalEditorContext";
5959
import { selectCompModifierKeyPressed } from "util/keyUtils";
6060
import { defaultLayout, GridItemComp, GridItemDataType } from "../gridItemComp";
61+
import { ThemeContext } from "comps/utils/themeContext";
62+
import { defaultTheme } from "comps/controls/styleControlConstants";
6163

6264
const childrenMap = {
6365
layout: valueComp<Layout>({}),
@@ -312,6 +314,12 @@ export function InnerGrid(props: ViewPropsWithSelect) {
312314
const editorState = useContext(EditorContext);
313315
const { readOnly } = useContext(ExternalEditorContext);
314316

317+
//Added By Aqib Mirza
318+
const defaultGrid =
319+
useContext(ThemeContext)?.theme?.gridColumns ||
320+
defaultTheme?.gridColumns ||
321+
"24";
322+
/////////////////////
315323
const isDroppable =
316324
useContext(IsDroppable) && (_.isNil(props.isDroppable) || props.isDroppable) && !readOnly;
317325
const isDraggable = !readOnly && (_.isNil(props.isDraggable) || props.isDraggable);
@@ -354,7 +362,7 @@ export function InnerGrid(props: ViewPropsWithSelect) {
354362
margin: [0, 0],
355363
containerPadding: [0, 0],
356364
containerWidth: width,
357-
cols: DEFAULT_GRID_COLUMNS,
365+
cols: parseInt(defaultGrid),
358366
rowHeight: currentRowHeight,
359367
maxRows: currentRowCount,
360368
};
@@ -493,7 +501,7 @@ export function InnerGrid(props: ViewPropsWithSelect) {
493501
rowHeight={currentRowHeight}
494502
overflow={props.overflow}
495503
extraHeight={props.extraHeight}
496-
cols={DEFAULT_GRID_COLUMNS}
504+
cols={parseInt(defaultGrid)}
497505
autoHeight={props.autoHeight}
498506
minHeight={props.minHeight}
499507
bgColor={props.bgColor}

‎client/packages/lowcoder/src/comps/comps/gridLayoutComp/canvasView.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,18 @@ export function CanvasView(props: ContainerBaseProps) {
9191
const isModule = appType === AppTypeEnum.Module;
9292
const bgColor = (useContext(ThemeContext)?.theme || defaultTheme).canvas;
9393

94+
// Added By Aqib Mirza
95+
const defaultGrid =
96+
useContext(ThemeContext)?.theme?.gridColumns ||
97+
defaultTheme?.gridColumns ||
98+
"24";
99+
100+
const positionParams = {
101+
...props.positionParams,
102+
cols: parseInt(defaultGrid),
103+
};
104+
//////////////////////
105+
94106
if (readOnly) {
95107
return (
96108
<UICompContainer
@@ -105,6 +117,7 @@ export function CanvasView(props: ContainerBaseProps) {
105117
containerPadding={rootContainerPadding}
106118
overflow={rootContainerOverflow}
107119
{...props}
120+
positionParams={positionParams} // Added By Aqib Mirza
108121
{...gridLayoutCanvasProps}
109122
bgColor={bgColor}
110123
radius="0px"

‎client/packages/lowcoder/src/comps/comps/moduleContainerComp/moduleLayoutComp.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import ModuleMethodListComp from "./moduleMethodListComp";
2323
import { ConfigViewWrapper } from "./styled";
2424
import { CNRootContainer } from "constants/styleSelectors";
2525
import styled from "styled-components";
26+
import { ThemeContext } from "comps/utils/themeContext";
2627

2728
export const MODULE_LAYOUT_COMP = "@moduleLayoutComp";
2829

@@ -60,6 +61,8 @@ const moduleContainerId = "moduleContainer";
6061
function ModuleLayoutView(props: IProps) {
6162
const { containerSize, containerView, positionParams, onPositionParamsChange, onLayoutChange } =
6263
props;
64+
65+
const defaultGrid = useContext(ThemeContext)?.theme?.gridColumns || "24"; //Added By Aqib Mirza
6366
const { readOnly } = useContext(ExternalEditorContext);
6467

6568
if (readOnly) {
@@ -94,7 +97,7 @@ function ModuleLayoutView(props: IProps) {
9497
<CanvasView
9598
layout={layout}
9699
items={items}
97-
positionParams={positionParams}
100+
positionParams={{ ...positionParams, cols: parseInt(defaultGrid) }}
98101
onPositionParamsChange={onPositionParamsChange}
99102
dispatch={_.noop}
100103
onLayoutChange={onLayoutChange}

‎client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ export const defaultTheme: ThemeDetail = {
3131
canvas: "#F5F5F6",
3232
primarySurface: "#FFFFFF",
3333
borderRadius: "4px",
34+
gridColumns: "24",
3435
};
3536

3637
export const SURFACE_COLOR = "#FFFFFF";

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -280,6 +280,10 @@ export const en = {
280280
chart: "Chart style",
281281
chartDesc: "Input Echarts",
282282
echartsJson: "Theme JSON",
283+
//Added By Aqib Mirza
284+
gridColumns: "Grid Columns",
285+
gridColumnsDesc:
286+
"The default number of columns is typically used for most containers",
283287
},
284288
style: {
285289
resetTooltip: "Reset styles. Delete the input's value to reset an individual field.",

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

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,17 @@ export type PositionParams = Pick<
77
"margin" | "containerPadding" | "containerWidth" | "cols" | "rowHeight" | "maxRows"
88
>;
99

10-
export const DEFAULT_GRID_COLUMNS = 24;
10+
// Added By Aqib Mirza
11+
let gridColumns: number;
12+
13+
const getDefaultGridColumns = () => {
14+
return gridColumns;
15+
};
16+
17+
export { getDefaultGridColumns };
18+
export const DEFAULT_GRID_COLUMNS = getDefaultGridColumns() || 24;
19+
//////////////////////
20+
1121
export const DEFAULT_ROW_HEIGHT = 8;
1222

1323
export const DEFAULT_POSITION_PARAMS: PositionParams = {

0 commit comments

Comments
 (0)