Skip to content

Layout component #346

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Aug 23, 2023
Merged

Layout component #346

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
9d2d043
feat: added responsive layout component
raheeliftikhar5 Aug 18, 2023
70561a0
fix: layout default style
raheeliftikhar5 Aug 18, 2023
41c491c
feat: added columns per row, vertical and horizonal spacing option
raheeliftikhar5 Aug 20, 2023
fba6a02
fix: fixed issues related to column height
raheeliftikhar5 Aug 21, 2023
a343a02
fix: added match columns height switch
raheeliftikhar5 Aug 21, 2023
0fcf771
fix: remove selectedTabKey from childrenMap
raheeliftikhar5 Aug 22, 2023
9eb33af
Merge branch 'main' into layout-component
FalkWolsky Aug 22, 2023
2260bdb
fix: bug fixes
raheeliftikhar5 Aug 23, 2023
bb5cefd
fix: fixed column margin/padding issue
raheeliftikhar5 Aug 23, 2023
bf3bc70
Merge branch 'main' into layout-component
aaron1604 Aug 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
fix: fixed issues related to column height
  • Loading branch information
@raheeliftikhar5
raheeliftikhar5 committed Aug 21, 2023
commit fba6a026c59405b683d1fd5856cc92f18dac7dad
108 changes: 52 additions & 56 deletions client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { NameGenerator } from "comps/utils";
import { Section, sectionNames } from "lowcoder-design";
import { HintPlaceHolder } from "lowcoder-design";
import _ from "lodash";
import React, { useContext } from "react";
import React from "react";
import styled from "styled-components";
import { IContainer } from "../containerBase/iContainer";
import { SimpleContainerComp } from "../containerBase/simpleContainerComp";
Expand All @@ -26,8 +26,6 @@ import {
} from "../containerComp/containerView";
import { BackgroundColorContext } from "comps/utils/backgroundColorContext";
import { trans } from "i18n";
import { EditorContext } from "comps/editorState";
import { checkIsMobile } from "util/commonUtils";
import { messageInstance } from "lowcoder-design";
import { BoolControl } from "comps/controls/boolControl";
import { NumberControl } from "comps/controls/codeControl";
Expand All @@ -44,14 +42,10 @@ const RowWrapper = styled(Row)<{$style: ResponsiveLayoutRowStyleType}>`
const ColWrapper = styled(Col)<{
$style: ResponsiveLayoutColStyleType,
$minWidth?: string,
$backgroundImage?: string,
}>`
height: 100%;
min-width: ${(props) => props.$minWidth};

> div {
background: ${(props) => `center / cover url(${props.$backgroundImage}) no-repeat, ${props.$style.background} !important`};
border: 1px solid ${(props) => props.$style.border} !important;
height: 100%;
}
`;

Expand All @@ -76,7 +70,7 @@ const childrenMap = {
type ViewProps = RecordConstructorToView<typeof childrenMap>;
type ResponsiveLayoutProps = ViewProps & { dispatch: DispatchType };
type ColumnContainerProps = Omit<ContainerBaseProps, 'style'> & {
style: ResponsiveLayoutColStyleType
style: ResponsiveLayoutColStyleType,
}

const ColumnContainer = (props: ColumnContainerProps) => {
Expand Down Expand Up @@ -106,57 +100,59 @@ const ResponsiveLayout = (props: ResponsiveLayoutProps) => {
horizontalSpacing,
} = props;

const editorState = useContext(EditorContext);
const maxWidth = editorState.getAppSettings().maxWidth;
const isMobile = checkIsMobile(maxWidth);
const paddingWidth = isMobile ? 8 : 20;

return (
<BackgroundColorContext.Provider value={props.rowStyle.background}>
<RowWrapper
$style={rowStyle}
wrap={rowBreak}
gutter={[horizontalSpacing, verticalSpacing]}
>
{columns.map(column => {
const id = String(column.id);
const childDispatch = wrapDispatch(wrapDispatch(dispatch, "containers"), id);
if(!containers[id]) return null
const containerProps = containers[id].children;
<div style={{padding: rowStyle.margin, height: '100%'}}>
<RowWrapper
$style={rowStyle}
wrap={rowBreak}
gutter={[horizontalSpacing, verticalSpacing]}
>
{columns.map(column => {
const id = String(column.id);
const childDispatch = wrapDispatch(wrapDispatch(dispatch, "containers"), id);
if(!containers[id]) return null
const containerProps = containers[id].children;

const columnCustomStyle = {
margin: !_.isEmpty(column.margin) ? column.margin : columnStyle.margin,
padding: !_.isEmpty(column.padding) ? column.padding : columnStyle.padding,
radius: !_.isEmpty(column.radius) ? column.radius : columnStyle.radius,
border: !_.isEmpty(column.border) ? column.border : columnStyle.border,
background: !_.isEmpty(column.background) ? column.background : columnStyle.background,
const columnCustomStyle = {
margin: !_.isEmpty(column.margin) ? column.margin : columnStyle.margin,
padding: !_.isEmpty(column.padding) ? column.padding : columnStyle.padding,
radius: !_.isEmpty(column.radius) ? column.radius : columnStyle.radius,
border: !_.isEmpty(column.border) ? column.border : columnStyle.border,
background: !_.isEmpty(column.background) ? column.background : columnStyle.background,
}
const noOfColumns = columns.length;
let backgroundStyle = columnCustomStyle.background;
if(!_.isEmpty(column.backgroundImage)) {
backgroundStyle = `center / cover url('${column.backgroundImage}') no-repeat, ${backgroundStyle}`;
}
return (
<ColWrapper
key={id}
lg={24/(noOfColumns < columnPerRowLG ? noOfColumns : columnPerRowLG)}
md={24/(noOfColumns < columnPerRowMD ? noOfColumns : columnPerRowMD)}
sm={24/(noOfColumns < columnPerRowSM ? noOfColumns : columnPerRowSM)}
xs={24/(noOfColumns < columnPerRowSM ? noOfColumns : columnPerRowSM)}
$style={columnCustomStyle}
$minWidth={column.minWidth}
>
<ColumnContainer
layout={containerProps.layout.getView()}
items={gridItemCompToGridItems(containerProps.items.getView())}
positionParams={containerProps.positionParams.getView()}
dispatch={childDispatch}
autoHeight={props.autoHeight}
style={{
...columnCustomStyle,
background: backgroundStyle,
}}
/>
</ColWrapper>
)
})
}
const noOfColumns = columns.length;
return (
<ColWrapper
key={id}
lg={24/(noOfColumns < columnPerRowLG ? noOfColumns : columnPerRowLG)}
md={24/(noOfColumns < columnPerRowMD ? noOfColumns : columnPerRowMD)}
sm={24/(noOfColumns < columnPerRowSM ? noOfColumns : columnPerRowSM)}
$style={columnCustomStyle}
$minWidth={column.minWidth}
$backgroundImage={
!_.isEmpty(column.backgroundImage) && column.backgroundImage
}
>
<ColumnContainer
layout={containerProps.layout.getView()}
items={gridItemCompToGridItems(containerProps.items.getView())}
positionParams={containerProps.positionParams.getView()}
dispatch={childDispatch}
autoHeight={props.autoHeight}
style={columnCustomStyle}
/>
</ColWrapper>
)
})
}
</RowWrapper>
</RowWrapper>
</div>
</BackgroundColorContext.Provider>
);
};
Expand Down
4 changes: 2 additions & 2 deletions client/packages/lowcoder/src/comps/controls/optionsControl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -573,8 +573,8 @@ const ColumnOption = new MultiCompBuilder(
backgroundImage: withDefault(StringControl, ""),
border: withDefault(ColorControl, ""),
radius: withDefault(RadiusControl, ""),
margin: withDefault(StringControl, ""),
padding: withDefault(StringControl, ""),
margin: withDefault(StringControl, "0px"),
padding: withDefault(StringControl, "0px"),
},
(props) => props
)
Expand Down