Skip to content

Separate container styling into header, footer and body styles #640

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 1 commit into from
Jan 16, 2024
Merged

Separate container styling into header, footer and body styles #640

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 4 additions & 0 deletions client/packages/lowcoder-design/src/components/Collapase.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,10 @@ const Container = styled.div<{ $optColor?: boolean; $simple?: boolean }>`
line-height: 23px;
user-select: none;
cursor: pointer;

.ant-collapse-header-text {
min-width: 0;
}
}

.ant-collapse-ghost > .ant-collapse-item > .ant-collapse-content > .ant-collapse-content-box {
Expand Down
15 changes: 15 additions & 0 deletions client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,21 @@ export const ContainerBaseComp = (function () {
<Section name={sectionNames.style}>
{ children.container.stylePropertyView() }
</Section>
{children.container.children.showHeader.getView() && (
<Section name={"Header Style"}>
{ children.container.headerStylePropertyView() }
</Section>
)}
{children.container.children.showBody.getView() && (
<Section name={"Body Style"}>
{ children.container.bodyStylePropertyView() }
</Section>
)}
{children.container.children.showFooter.getView() && (
<Section name={"Footer Style"}>
{ children.container.footerStylePropertyView() }
</Section>
)}
</>
)}
</>
Expand Down
15 changes: 15 additions & 0 deletions client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -218,6 +218,21 @@ const FormBaseComp = (function () {
<Section name={sectionNames.style}>
{children.container.stylePropertyView()}
</Section>
{children.container.children.showHeader.getView() && (
<Section name={"Header Style"}>
{ children.container.headerStylePropertyView() }
</Section>
)}
{children.container.children.showBody.getView() && (
<Section name={"Body Style"}>
{ children.container.bodyStylePropertyView() }
</Section>
)}
{children.container.children.showFooter.getView() && (
<Section name={"Footer Style"}>
{ children.container.footerStylePropertyView() }
</Section>
)}
</>
)}

Expand Down
63 changes: 36 additions & 27 deletions client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,13 +52,14 @@ const BodyInnerGrid = styled(InnerGrid)<{
$showBorder: boolean;
$backgroundColor: string;
$borderColor: string;
$borderWidth: string;
$backgroundImage: string;
$backgroundImageRepeat: string;
$backgroundImageSize: string;
$backgroundImagePosition: string;
$backgroundImageOrigin: string;
}>`
border-top: ${(props) => `${props.$showBorder ? 1 : 0}px solid ${props.$borderColor}`};
border-top: ${(props) => `${props.$showBorder ? props.$borderWidth : 0} solid ${props.$borderColor}`};
flex: 1;
${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
border-radius: 0;
Expand All @@ -73,13 +74,14 @@ const FooterInnerGrid = styled(InnerGrid)<{
$showBorder: boolean;
$backgroundColor: string;
$borderColor: string;
$borderWidth: string;
$footerBackgroundImage: string;
$footerBackgroundImageRepeat: string;
$footerBackgroundImageSize: string;
$footerBackgroundImagePosition: string;
$footerBackgroundImageOrigin: string;
}>`
border-top: ${(props) => `${props.$showBorder ? 1 : 0}px solid ${props.$borderColor}`};
border-top: ${(props) => `${props.$showBorder ? props.$borderWidth : 0} solid ${props.$borderColor}`};
overflow: visible;
${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
border-radius: 0;
Expand All @@ -103,7 +105,12 @@ export function TriContainer(props: TriContainerProps) {
const { items: headerItems, ...otherHeaderProps } = container.header;
const { items: bodyItems, ...otherBodyProps } = container.body["0"].children.view.getView();
const { items: footerItems, ...otherFooterProps } = container.footer;
const { style } = container;
const {
style,
headerStyle,
bodyStyle,
footerStyle,
} = container;

const editorState = useContext(EditorContext);
const maxWidth = editorState.getAppSettings().maxWidth;
Expand All @@ -114,7 +121,7 @@ export function TriContainer(props: TriContainerProps) {
<div style={{padding: style.margin, height: '100%'}}>
<Wrapper $style={style}>
{showHeader && (
<BackgroundColorContext.Provider value={container.style.headerBackground}>
<BackgroundColorContext.Provider value={headerStyle.headerBackground}>
<HeaderInnerGrid
{...otherHeaderProps}
items={gridItemCompToGridItems(headerItems)}
Expand All @@ -123,19 +130,19 @@ export function TriContainer(props: TriContainerProps) {
minHeight="46px"
containerPadding={[paddingWidth, 3]}
showName={{ bottom: showBody || showFooter ? 20 : 0 }}
$backgroundColor={style?.headerBackground}
$headerBackgroundImage={style?.headerBackgroundImage}
$headerBackgroundImageRepeat={style?.headerBackgroundImageRepeat}
$headerBackgroundImageSize={style?.headerBackgroundImageSize}
$headerBackgroundImagePosition={style?.headerBackgroundImagePosition}
$headerBackgroundImageOrigin={style?.headerBackgroundImageOrigin}
style={{padding: style.containerheaderpadding}}
$backgroundColor={headerStyle?.headerBackground}
$headerBackgroundImage={headerStyle?.headerBackgroundImage}
$headerBackgroundImageRepeat={headerStyle?.headerBackgroundImageRepeat}
$headerBackgroundImageSize={headerStyle?.headerBackgroundImageSize}
$headerBackgroundImagePosition={headerStyle?.headerBackgroundImagePosition}
$headerBackgroundImageOrigin={headerStyle?.headerBackgroundImageOrigin}
style={{padding: headerStyle.containerheaderpadding}}

/>
</BackgroundColorContext.Provider>
)}
{showBody && (
<BackgroundColorContext.Provider value={container.style.background}>
<BackgroundColorContext.Provider value={bodyStyle.background}>
<BodyInnerGrid
$showBorder={showHeader}
{...otherBodyProps}
Expand All @@ -147,19 +154,20 @@ export function TriContainer(props: TriContainerProps) {
(showHeader && showFooter) || showHeader ? [paddingWidth, 11.5] : [paddingWidth, 11]
}
hintPlaceholder={props.hintPlaceholder ?? HintPlaceHolder}
$backgroundColor={style?.background}
$backgroundColor={bodyStyle?.background}
$borderColor={style?.border}
$backgroundImage={style?.backgroundImage}
$backgroundImageRepeat={style?.backgroundImageRepeat}
$backgroundImageSize={style?.backgroundImageSize}
$backgroundImagePosition={style?.backgroundImagePosition}
$backgroundImageOrigin={style?.backgroundImageOrigin}
style={{padding: style.containerbodypadding}}
$borderWidth={style?.borderWidth}
$backgroundImage={bodyStyle?.backgroundImage}
$backgroundImageRepeat={bodyStyle?.backgroundImageRepeat}
$backgroundImageSize={bodyStyle?.backgroundImageSize}
$backgroundImagePosition={bodyStyle?.backgroundImagePosition}
$backgroundImageOrigin={bodyStyle?.backgroundImageOrigin}
style={{padding: bodyStyle.containerbodypadding}}
/>
</BackgroundColorContext.Provider>
)}
{showFooter && (
<BackgroundColorContext.Provider value={container.style.footerBackground}>
<BackgroundColorContext.Provider value={footerStyle.footerBackground}>
<FooterInnerGrid
$showBorder={showHeader || showBody}
{...otherFooterProps}
Expand All @@ -169,14 +177,15 @@ export function TriContainer(props: TriContainerProps) {
minHeight={showBody ? "47px" : "46px"}
containerPadding={showBody || showHeader ? [paddingWidth, 3.5] : [paddingWidth, 3]}
showName={{ top: showHeader || showBody ? 20 : 0 }}
$backgroundColor={style?.footerBackground}
$footerBackgroundImage={style?.footerBackgroundImage}
$footerBackgroundImageRepeat={style?.footerBackgroundImageRepeat}
$footerBackgroundImageSize={style?.footerBackgroundImageSize}
$footerBackgroundImagePosition={style?.footerBackgroundImagePosition}
$footerBackgroundImageOrigin={style?.footerBackgroundImageOrigin}
$backgroundColor={footerStyle?.footerBackground}
$footerBackgroundImage={footerStyle?.footerBackgroundImage}
$footerBackgroundImageRepeat={footerStyle?.footerBackgroundImageRepeat}
$footerBackgroundImageSize={footerStyle?.footerBackgroundImageSize}
$footerBackgroundImagePosition={footerStyle?.footerBackgroundImagePosition}
$footerBackgroundImageOrigin={footerStyle?.footerBackgroundImageOrigin}
$borderColor={style?.border}
style={{padding: style.containerfooterpadding}}
$borderWidth={style?.borderWidth}
style={{padding: footerStyle.containerfooterpadding}}
/>
</BackgroundColorContext.Provider>
)}
Expand Down
21 changes: 20 additions & 1 deletion client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,12 @@ import { JSONValue } from "util/jsonTypes";
import { AutoHeightControl } from "comps/controls/autoHeightControl";
import { BoolControl } from "comps/controls/boolControl";
import { styleControl } from "comps/controls/styleControl";
import { ContainerStyle } from "comps/controls/styleControlConstants";
import {
ContainerStyle,
ContainerHeaderStyle,
ContainerBodyStyle,
ContainerFooterStyle,
} from "comps/controls/styleControlConstants";
import { MultiCompBuilder, sameTypeMap, withDefault } from "comps/generators";
import { migrateOldData } from "comps/generators/simpleGenerators";
import { NameGenerator } from "comps/utils";
Expand Down Expand Up @@ -36,6 +41,9 @@ const childrenMap = {
autoHeight: AutoHeightControl,

style: styleControl(ContainerStyle),
headerStyle: styleControl(ContainerHeaderStyle),
bodyStyle: styleControl(ContainerBodyStyle),
footerStyle: styleControl(ContainerFooterStyle),
};

// Compatible with old style data 2022-8-15
Expand Down Expand Up @@ -127,6 +135,17 @@ export class TriContainerComp extends TriContainerBaseComp implements IContainer
return this.children.style.getPropertyView();
}

headerStylePropertyView() {
return this.children.headerStyle.getPropertyView();
}

bodyStylePropertyView() {
return this.children.bodyStyle.getPropertyView();
}

footerStylePropertyView() {
return this.children.footerStyle.getPropertyView();
}
}

function checkEquals(node1: Node<unknown>, node2: Node<unknown>): boolean {
Expand Down
63 changes: 42 additions & 21 deletions client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -489,46 +489,53 @@ export const MarginStyle = [


export const ContainerStyle = [
...BG_STATIC_BORDER_RADIUS,
// ...BG_STATIC_BORDER_RADIUS,
getStaticBorder(),
RADIUS,
BORDER_WIDTH,
HEADER_BACKGROUND,
{
name: "footerBackground",
label: trans("style.footerBackground"),
depName: "background",
depType: DEP_TYPE.SELF,
transformer: toSelf,
},
MARGIN,
PADDING,
] as const;

export const ContainerHeaderStyle = [
CONTAINERHEADERPADDING,
CONTAINERFOOTERPADDING,
CONTAINERBODYPADDING,
HEADER_BACKGROUND,
{
name: "headerBackgroundImage",
label: trans("style.headerBackgroundImage"),
label: trans("style.backgroundImage"),
headerBackgroundImage: "headerBackgroundImage",
},
{
name: "headerBackgroundImageRepeat",
label: trans("style.headerBackgroundImageRepeat"),
label: trans("style.backgroundImageRepeat"),
headerBackgroundImageRepeat: "headerBackgroundImageRepeat",
},
{
name: "headerBackgroundImageSize",
label: trans("style.headerBackgroundImageSize"),
label: trans("style.backgroundImageSize"),
headerBackgroundImageSize: "headerBackgroundImageSize",
},
{
name: "headerBackgroundImagePosition",
label: trans("style.headerBackgroundImagePosition"),
label: trans("style.backgroundImagePosition"),
headerBackgroundImagePosition: "headerBackgroundImagePosition",
}
,{
name: "headerBackgroundImageOrigin",
label: trans("style.headerBackgroundImageOrigin"),
label: trans("style.backgroundImageOrigin"),
headerBackgroundImageOrigin: "headerBackgroundImageOrigin",
},
] as const;

export const ContainerBodyStyle = [
CONTAINERBODYPADDING,
{
name: "background",
label: trans("style.background"),
depName: "background",
depType: DEP_TYPE.SELF,
transformer: toSelf,
},
{
name: "backgroundImage",
label: trans("style.backgroundImage"),
Expand All @@ -554,29 +561,40 @@ export const ContainerStyle = [
label: trans("style.backgroundImageOrigin"),
backgroundImageOrigin: "backgroundImageOrigin",
},
] as const;

export const ContainerFooterStyle = [
CONTAINERFOOTERPADDING,
{
name: "footerBackground",
label: trans("style.background"),
depName: "background",
depType: DEP_TYPE.SELF,
transformer: toSelf,
},
{
name: "footerBackgroundImage",
label: trans("style.footerBackgroundImage"),
label: trans("style.backgroundImage"),
footerBackgroundImage: "footerBackgroundImage",
},
{
name: "footerBackgroundImageRepeat",
label: trans("style.footerBackgroundImageRepeat"),
label: trans("style.backgroundImageRepeat"),
footerBackgroundImageRepeat: "footerBackgroundImageRepeat",
},
{
name: "footerBackgroundImageSize",
label: trans("style.footerBackgroundImageSize"),
label: trans("style.backgroundImageSize"),
footerBackgroundImageSize: "footerBackgroundImageSize",
},
{
name: "footerBackgroundImagePosition",
label: trans("style.footerBackgroundImagePosition"),
label: trans("style.backgroundImagePosition"),
footerBackgroundImagePosition: "footerBackgroundImagePosition",
}
,{
name: "footerBackgroundImageOrigin",
label: trans("style.footerBackgroundImageOrigin"),
label: trans("style.backgroundImageOrigin"),
footerBackgroundImageOrigin: "footerBackgroundImageOrigin",
}
] as const;
Expand Down Expand Up @@ -1312,6 +1330,9 @@ export type ButtonStyleType = StyleConfigType<typeof ButtonStyle>;
export type ToggleButtonStyleType = StyleConfigType<typeof ToggleButtonStyle>;
export type TextStyleType = StyleConfigType<typeof TextStyle>;
export type ContainerStyleType = StyleConfigType<typeof ContainerStyle>;
export type ContainerHeaderStyleType = StyleConfigType<typeof ContainerHeaderStyle>;
export type ContainerBodyStyleType = StyleConfigType<typeof ContainerBodyStyle>;
export type ContainerFooterStyleType = StyleConfigType<typeof ContainerFooterStyle>;
export type SliderStyleType = StyleConfigType<typeof SliderStyle>;
export type RatingStyleType = StyleConfigType<typeof RatingStyle>;
export type SwitchStyleType = StyleConfigType<typeof SwitchStyle>;
Expand Down
30 changes: 15 additions & 15 deletions client/packages/lowcoder/src/i18n/locales/en.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -360,21 +360,21 @@ export const en = {
"aspectRatio": "Aspect Ratio",
"textSize": "Text Size",
"textWeight": "Text Weight",
"backgroundImage": "BgImage",
"backgroundImageRepeat": "BgImage Repeat",
"backgroundImageSize": "BgImage Size",
"backgroundImagePosition": "BgImage Position",
"backgroundImageOrigin": "BgImage Origin",
"headerBackgroundImage": "Header BgImage",
"headerBackgroundImageRepeat": "Header BgImage Repeat",
"headerBackgroundImageSize": "Header BgImage Size",
"headerBackgroundImagePosition": "Header BgImage Position",
"headerBackgroundImageOrigin": "Header BgImage Origin",
"footerBackgroundImage": "Footer BgImage",
"footerBackgroundImageRepeat": "Footer BgImage Repeat",
"footerBackgroundImageSize": "Footer BgImage Size",
"footerBackgroundImagePosition": "Footer BgImage Position",
"footerBackgroundImageOrigin": "Footer BgImage Origin",
"backgroundImage": "BG Image",
"backgroundImageRepeat": "BG Repeat",
"backgroundImageSize": "BG Size",
"backgroundImagePosition": "BG Position",
"backgroundImageOrigin": "BG Origin",
"headerBackgroundImage": "BgImage",
"headerBackgroundImageRepeat": "BgImage Repeat",
"headerBackgroundImageSize": "BgImage Size",
"headerBackgroundImagePosition": "BgImage Position",
"headerBackgroundImageOrigin": "BgImage Origin",
"footerBackgroundImage": "BgImage",
"footerBackgroundImageRepeat": "BgImage Repeat",
"footerBackgroundImageSize": "BgImage Size",
"footerBackgroundImagePosition": "BgImage Position",
"footerBackgroundImageOrigin": "BgImage Origin",
},
"export": {
"hiddenDesc": "If true, the component is hidden",
Expand Down