Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

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.

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

Already on GitHub?Sign in to your account

Merged
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
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
View file
Open in desktop
Original file line numberDiff line numberDiff 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
View file
Open in desktop
Original file line numberDiff line numberDiff 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
View file
Open in desktop
Original file line numberDiff line numberDiff 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
View file
Open in desktop
Original file line numberDiff line numberDiff 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
View file
Open in desktop
Original file line numberDiff line numberDiff 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 DownExpand 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 DownExpand 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
View file
Open in desktop
Original file line numberDiff line numberDiff 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 DownExpand 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 deletionsclient/packages/lowcoder/src/i18n/locales/en.ts
View file
Open in desktop
Original file line numberDiff line numberDiff 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": "HeaderBgImage",
"headerBackgroundImageRepeat": "HeaderBgImage Repeat",
"headerBackgroundImageSize": "HeaderBgImage Size",
"headerBackgroundImagePosition": "HeaderBgImage Position",
"headerBackgroundImageOrigin": "HeaderBgImage Origin",
"footerBackgroundImage": "FooterBgImage",
"footerBackgroundImageRepeat": "FooterBgImage Repeat",
"footerBackgroundImageSize": "FooterBgImage Size",
"footerBackgroundImagePosition": "FooterBgImage Position",
"footerBackgroundImageOrigin": "FooterBgImage 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
[8]ページ先頭
©2009-2025 Movatter.jp