From 6a4c10c4309a9bd2fde6a955c966d2f8577e071a Mon Sep 17 00:00:00 2001 From: Aqib Mirza Date: Fri, 7 Jul 2023 20:54:36 +0530 Subject: [PATCH] feat: grid column settings in theme --- .../src/icons/icon-table-cells.svg | 4 ++ .../lowcoder-design/src/icons/index.ts | 1 + .../lowcoder/src/api/commonSettingApi.ts | 5 ++ .../lowcoder/src/components/ColorPicker.tsx | 54 +++++++++++++++++-- .../comps/containerComp/containerView.tsx | 12 ++++- .../comps/comps/gridLayoutComp/canvasView.tsx | 13 +++++ .../moduleContainerComp/moduleLayoutComp.tsx | 5 +- .../comps/controls/styleControlConstants.tsx | 1 + .../packages/lowcoder/src/i18n/locales/en.ts | 4 ++ .../lowcoder/src/layout/calculateUtils.tsx | 12 ++++- .../lowcoder/src/layout/gridLayout.tsx | 2 +- .../src/pages/setting/theme/detail/index.tsx | 18 ++++++- .../pages/setting/theme/styledComponents.tsx | 12 +++++ .../src/pages/setting/theme/themeConstant.tsx | 3 ++ 14 files changed, 136 insertions(+), 10 deletions(-) create mode 100644 client/packages/lowcoder-design/src/icons/icon-table-cells.svg diff --git a/client/packages/lowcoder-design/src/icons/icon-table-cells.svg b/client/packages/lowcoder-design/src/icons/icon-table-cells.svg new file mode 100644 index 000000000..70df3bddc --- /dev/null +++ b/client/packages/lowcoder-design/src/icons/icon-table-cells.svg @@ -0,0 +1,4 @@ + + + + diff --git a/client/packages/lowcoder-design/src/icons/index.ts b/client/packages/lowcoder-design/src/icons/index.ts index 8a3a9c6a2..0fd41530e 100644 --- a/client/packages/lowcoder-design/src/icons/index.ts +++ b/client/packages/lowcoder-design/src/icons/index.ts @@ -284,3 +284,4 @@ export { ReactComponent as CalendarDeleteIcon } from "icons/icon-calendar-delete export { ReactComponent as TableCheckedIcon } from "icons/icon-table-checked.svg"; export { ReactComponent as TableUnCheckedIcon } from "icons/icon-table-boolean-false.svg"; export { ReactComponent as FileFolderIcon } from "icons/icon-editor-folder.svg"; +export { ReactComponent as TableCellsIcon } from "icons/icon-table-cells.svg" // Added By Aqib Mirza diff --git a/client/packages/lowcoder/src/api/commonSettingApi.ts b/client/packages/lowcoder/src/api/commonSettingApi.ts index 32228055f..62486f358 100644 --- a/client/packages/lowcoder/src/api/commonSettingApi.ts +++ b/client/packages/lowcoder/src/api/commonSettingApi.ts @@ -44,6 +44,7 @@ export interface ThemeDetail { primarySurface: string; // comp bg-color borderRadius: string; chart?: string; + gridColumns?: string; //Added By Aqib Mirza } export function getThemeDetailName(key: keyof ThemeDetail) { @@ -60,6 +61,9 @@ export function getThemeDetailName(key: keyof ThemeDetail) { return trans("themeDetail.primarySurface"); case "borderRadius": return trans("themeDetail.borderRadius"); + //Added By Aqib Mirza + case "gridColumns": + return trans("themeDetail.gridColumns"); } return ""; } @@ -71,6 +75,7 @@ export function isThemeColorKey(key: string) { case "textLight": case "canvas": case "primarySurface": + case "gridColumns": //Added By Aqib Mirza return true; } return false; diff --git a/client/packages/lowcoder/src/components/ColorPicker.tsx b/client/packages/lowcoder/src/components/ColorPicker.tsx index 1d8dddec1..3fb44215c 100644 --- a/client/packages/lowcoder/src/components/ColorPicker.tsx +++ b/client/packages/lowcoder/src/components/ColorPicker.tsx @@ -1,15 +1,17 @@ import _ from "lodash"; import { useEffect, useState } from "react"; -import { ConfigItem, Radius } from "../pages/setting/theme/styledComponents"; +import { ConfigItem, Radius, GridColumns } from "../pages/setting/theme/styledComponents"; import { isValidColor, toHex } from "components/colorSelect/colorUtils"; import { ColorSelect } from "components/colorSelect"; import { TacoInput } from "components/tacoInput"; +import { TableCellsIcon as GridIcon } from "lowcoder-design"; //Added By Aqib Mirza export type configChangeParams = { colorKey: string; color?: string; radius?: string; chart?: string; + gridColumns?: string; //Added By Aqib Mirza }; type ColorConfigProps = { @@ -21,6 +23,7 @@ type ColorConfigProps = { radius?: string; configChange: (params: configChangeParams) => void; showVarName?: boolean; + gridColumns?: string; //Added By Aqib Mirza }; export default function ColorPicker(props: ColorConfigProps) { @@ -32,10 +35,14 @@ export default function ColorPicker(props: ColorConfigProps) { radius: defaultRadius, configChange, showVarName = true, + gridColumns: defaultGridColumns, //Added By Aqib Mirza } = props; const configChangeWithDebounce = _.debounce(configChange, 0); const [color, setColor] = useState(defaultColor); const [radius, setRadius] = useState(defaultRadius); + + const [gridColumns, setGridColumns] = useState(defaultGridColumns); //Added By Aqib Mirza + const varName = `(${colorKey})`; const colorInputBlur = () => { @@ -62,6 +69,21 @@ export default function ColorPicker(props: ColorConfigProps) { configChange({ colorKey, radius: result }); }; + //Added By Aqib Mirza + + const gridColumnsInputBlur = (gridColumns: string) => { + let result = ""; + if (!gridColumns) { + result = "0"; + } else { + result = gridColumns; + } + setGridColumns(result); + configChange({ colorKey, gridColumns: result }); + }; + + ///////////////////// + useEffect(() => { if (color && isValidColor(color)) { configChangeWithDebounce({ colorKey, color }); @@ -77,6 +99,12 @@ export default function ColorPicker(props: ColorConfigProps) { setRadius(defaultRadius); }, [defaultRadius]); + // Added By Aqib Mirza + useEffect(() => { + setGridColumns(defaultGridColumns); + }, [defaultGridColumns]); + ////////////////////// + return (
@@ -85,7 +113,8 @@ export default function ColorPicker(props: ColorConfigProps) {
{desc}
- {colorKey !== "borderRadius" ? ( + {colorKey !== "borderRadius" && + colorKey !== "gridColumns" && (
e.nativeEvent.key === "Enter" && colorInputBlur()} />
- ) : ( + )} + {colorKey === "borderRadius" && (
@@ -117,6 +147,24 @@ export default function ColorPicker(props: ColorConfigProps) { />
)} + {colorKey === "gridColumns" && ( +
+ +
+ +
+ + setGridColumns(e.target.value)} + onBlur={(e) => gridColumnsInputBlur(e.target.value)} + onKeyUp={(e) => + e.nativeEvent.key === "Enter" && + gridColumnsInputBlur(e.currentTarget.value) + } + /> +
+ )} ); } diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx index 7788862e2..990eb4782 100644 --- a/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx +++ b/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx @@ -58,6 +58,8 @@ import { checkIsMobile } from "util/commonUtils"; import { ExternalEditorContext } from "util/context/ExternalEditorContext"; import { selectCompModifierKeyPressed } from "util/keyUtils"; import { defaultLayout, GridItemComp, GridItemDataType } from "../gridItemComp"; +import { ThemeContext } from "comps/utils/themeContext"; +import { defaultTheme } from "comps/controls/styleControlConstants"; const childrenMap = { layout: valueComp({}), @@ -312,6 +314,12 @@ export function InnerGrid(props: ViewPropsWithSelect) { const editorState = useContext(EditorContext); const { readOnly } = useContext(ExternalEditorContext); + //Added By Aqib Mirza + const defaultGrid = + useContext(ThemeContext)?.theme?.gridColumns || + defaultTheme?.gridColumns || + "24"; + ///////////////////// const isDroppable = useContext(IsDroppable) && (_.isNil(props.isDroppable) || props.isDroppable) && !readOnly; const isDraggable = !readOnly && (_.isNil(props.isDraggable) || props.isDraggable); @@ -354,7 +362,7 @@ export function InnerGrid(props: ViewPropsWithSelect) { margin: [0, 0], containerPadding: [0, 0], containerWidth: width, - cols: DEFAULT_GRID_COLUMNS, + cols: parseInt(defaultGrid), rowHeight: currentRowHeight, maxRows: currentRowCount, }; @@ -493,7 +501,7 @@ export function InnerGrid(props: ViewPropsWithSelect) { rowHeight={currentRowHeight} overflow={props.overflow} extraHeight={props.extraHeight} - cols={DEFAULT_GRID_COLUMNS} + cols={parseInt(defaultGrid)} autoHeight={props.autoHeight} minHeight={props.minHeight} bgColor={props.bgColor} diff --git a/client/packages/lowcoder/src/comps/comps/gridLayoutComp/canvasView.tsx b/client/packages/lowcoder/src/comps/comps/gridLayoutComp/canvasView.tsx index 767730870..e8d0cee74 100644 --- a/client/packages/lowcoder/src/comps/comps/gridLayoutComp/canvasView.tsx +++ b/client/packages/lowcoder/src/comps/comps/gridLayoutComp/canvasView.tsx @@ -91,6 +91,18 @@ export function CanvasView(props: ContainerBaseProps) { const isModule = appType === AppTypeEnum.Module; const bgColor = (useContext(ThemeContext)?.theme || defaultTheme).canvas; + // Added By Aqib Mirza + const defaultGrid = + useContext(ThemeContext)?.theme?.gridColumns || + defaultTheme?.gridColumns || + "24"; + + const positionParams = { + ...props.positionParams, + cols: parseInt(defaultGrid), + }; + ////////////////////// + if (readOnly) { return ( ; -export const DEFAULT_GRID_COLUMNS = 24; +// Added By Aqib Mirza +let gridColumns: number; + +const getDefaultGridColumns = () => { + return gridColumns; +}; + +export { getDefaultGridColumns }; +export const DEFAULT_GRID_COLUMNS = getDefaultGridColumns() || 24; +////////////////////// + export const DEFAULT_ROW_HEIGHT = 8; export const DEFAULT_POSITION_PARAMS: PositionParams = { diff --git a/client/packages/lowcoder/src/layout/gridLayout.tsx b/client/packages/lowcoder/src/layout/gridLayout.tsx index e30300e4e..6eae5a248 100644 --- a/client/packages/lowcoder/src/layout/gridLayout.tsx +++ b/client/packages/lowcoder/src/layout/gridLayout.tsx @@ -147,7 +147,7 @@ class GridLayout extends React.Component { ); // log.debug("layout: getDrivedState. nextProps: ", nextProps.layout, " prevState: ", prevState.layout, " newLayoutBase: ", newLayoutBase, " newLayout: ", newLayout); return { - layout: newLayout, + layout: draggingUtils.isDragging() ? newLayout : nextProps.layout, // We need to save these props to state for using // getDerivedStateFromProps instead of componentDidMount (in which we would get extra rerender) children: nextProps.children, diff --git a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx index 386f72e79..1fdd24283 100644 --- a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx +++ b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx @@ -127,7 +127,7 @@ class ThemeDetailPage extends React.Component
+
+
+ {trans("themeDetail.gridColumns")} + { + this.configChange(params); + }} + /> +
+
{trans("themeDetail.chart")} {trans("themeDetail.chartDesc")} - + {" "} {trans("themeDetail.echartsJson")} diff --git a/client/packages/lowcoder/src/pages/setting/theme/styledComponents.tsx b/client/packages/lowcoder/src/pages/setting/theme/styledComponents.tsx index b4fabe71e..a3bbe4caf 100644 --- a/client/packages/lowcoder/src/pages/setting/theme/styledComponents.tsx +++ b/client/packages/lowcoder/src/pages/setting/theme/styledComponents.tsx @@ -653,3 +653,15 @@ export const CustomModalStyled = styled(CustomModal)` margin-top: 20px; } `; + +// Added By Aqib Mirza +export const GridColumns = styled.div<{ gridColumns: string }>` + > div { + margin: 3px; + overflow: hidden; + > svg { + fill: currentColor; + } + } + } +`; diff --git a/client/packages/lowcoder/src/pages/setting/theme/themeConstant.tsx b/client/packages/lowcoder/src/pages/setting/theme/themeConstant.tsx index 798569059..a346be9da 100644 --- a/client/packages/lowcoder/src/pages/setting/theme/themeConstant.tsx +++ b/client/packages/lowcoder/src/pages/setting/theme/themeConstant.tsx @@ -29,6 +29,7 @@ export const themeTemplateList = [ primarySurface: "#FFFFFF", borderRadius: "4px", chart: JSON.stringify(ChartTheme, null, 2), + gridColumns: "24", //Added By Aqib Mirza }, }, { @@ -43,6 +44,7 @@ export const themeTemplateList = [ primarySurface: "#495780", borderRadius: "4px", chart: JSON.stringify(ChartYellowTheme, null, 2), + gridColumns: "24", //Added By Aqib Mirza }, }, { @@ -57,6 +59,7 @@ export const themeTemplateList = [ primarySurface: "#FFFFFF", borderRadius: "4px", chart: JSON.stringify(ChartGreenTheme, null, 2), + gridColumns: "24", //Added By Aqib Mirza }, }, ];