Skip to content

Commit 93b11fc

Browse files
FalkWolskyFalkWolsky
authored
Merge pull request #538 from lowcoder-org/feat/Layout-Mode
Numerous fixes and introduction of Layout mode.
2 parents b081a7d + 1f1afa0 commit 93b11fc

23 files changed

+546
-255
lines changed

‎client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import { EditorContext } from "comps/editorState";
2424
import React, { useContext } from "react";
2525

2626
const Link = styled(Button)<{ $style: LinkStyleType }>`
27-
${(props) => `color: ${props.$style.text}; margin: ${props.$style.margin}; padding: ${props.$style.padding};`}
27+
${(props) => `color: ${props.$style.text}; margin: ${props.$style.margin}; padding: ${props.$style.padding}; font-size: ${props.$style.textSize};`}
2828
&.ant-btn {
2929
display: inline-flex;
3030
align-items: center;

‎client/packages/lowcoder/src/comps/comps/carouselComp.tsx‎

Lines changed: 27 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,11 @@ import { ArrayStringControl } from "comps/controls/codeControl";
1515
import { styleControl } from "comps/controls/styleControl";
1616
import { CarouselStyle } from "comps/controls/styleControlConstants";
1717

18+
import { useContext } from "react";
19+
import { EditorContext } from "comps/editorState";
20+
21+
// TODO: dots at top position needs proper margin (should be the same as bottom position)
22+
1823
const CarouselItem = styled.div<{ src: string }>`
1924
background: ${(props) => props.src && `url(${props.src})`} no-repeat 50% 50%;
2025
background-size: contain;
@@ -74,19 +79,29 @@ let CarouselBasicComp = (function () {
7479
<>
7580
<Section name={sectionNames.basic}>
7681
{children.data.propertyView({ label: trans("data") })}
77-
{children.autoPlay.propertyView({ label: trans("carousel.autoPlay") })}
7882
</Section>
79-
<FormDataPropertyView {...children} />
80-
<Section name={sectionNames.interaction}>{children.onEvent.getPropertyView()}</Section>
81-
<Section name={sectionNames.layout}>
82-
{children.showDots.propertyView({ label: trans("carousel.showDots") })}
83-
{children.dotPosition.propertyView({
84-
label: trans("carousel.dotPosition"),
85-
radioButton: true,
86-
})}
87-
{hiddenPropertyView(children)}
88-
</Section>
89-
<Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
83+
84+
{["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
85+
<><FormDataPropertyView {...children} />
86+
<Section name={sectionNames.interaction}>
87+
{children.onEvent.getPropertyView()}
88+
{hiddenPropertyView(children)}
89+
{children.autoPlay.propertyView({ label: trans("carousel.autoPlay") })}
90+
</Section></>
91+
)}
92+
{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
93+
<><Section name={sectionNames.layout}>
94+
{children.showDots.propertyView({ label: trans("carousel.showDots") })}
95+
{children.dotPosition.propertyView({
96+
label: trans("carousel.dotPosition"),
97+
radioButton: true,
98+
})}
99+
</Section>
100+
<Section name={sectionNames.style}>
101+
{children.style.getPropertyView()}
102+
</Section>
103+
</>
104+
)}
90105
</>
91106
);
92107
})

‎client/packages/lowcoder/src/comps/comps/dividerComp.tsx‎

Lines changed: 37 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,21 @@ import { migrateOldData } from "comps/generators/simpleGenerators";
1313
import { hiddenPropertyView } from "comps/utils/propertyUtils";
1414
import { trans } from "i18n";
1515

16+
import { useContext } from "react";
17+
import { EditorContext } from "comps/editorState";
18+
1619
type IProps = DividerProps & { $style: DividerStyleType; dashed: boolean };
1720

21+
// TODO: find out how to set border style when text is active
22+
// TODO: enable type "vertical" https://ant.design/components/divider
23+
1824
const StyledDivider = styled(Divider)<IProps>`
1925
margin-top: 3.5px;
2026
.ant-divider-inner-text {
2127
height: 32px;
2228
display: flex;
2329
align-items: center;
30+
font-size: ${(props) => props.$style.textSize};
2431
}
2532
min-width: 0;
2633
width: ${(props) => {
@@ -33,7 +40,14 @@ const StyledDivider = styled(Divider)<IProps>`
3340
return props.$style.margin;
3441
}};
3542
padding: ${(props) => props.$style.padding};
36-
border-top: 1px ${(props) => (props.dashed ? "dashed" : "solid")} ${(props) => props.$style.color};
43+
44+
border-top: ${(props) => (props.$style.borderWidth ? props.$style.borderWidth : "1px")} ${(props) => (props.dashed ? "dashed" : "solid")} ${(props) => props.$style.color};
45+
46+
.ant-divider-inner-text::before, .ant-divider-inner-text::after {
47+
border-block-start: ${(props) => (props.$style.borderWidth ? props.$style.borderWidth : "1px")} ${(props) => (props.dashed ? "dashed" : "solid")} ${(props) => props.$style.color} !important;
48+
border-block-start-color: inherit;
49+
border-block-end: 0;
50+
}
3751
3852
&.ant-divider-horizontal.ant-divider-with-text {
3953
margin: 0;
@@ -76,17 +90,29 @@ export const DividerComp = migrateOldData(
7690
<>
7791
<Section name={sectionNames.basic}>
7892
{children.title.propertyView({ label: trans("divider.title") })}
79-
{!_.isEmpty(children.title.getView()) &&
80-
children.align.propertyView({
81-
label: trans("divider.align"),
82-
radioButton: true,
83-
})}
84-
</Section>
85-
<Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
86-
<Section name={sectionNames.style}>
87-
{children.dashed.propertyView({ label: trans("divider.dashed") })}
88-
{children.style.getPropertyView()}
8993
</Section>
94+
95+
{["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
96+
<Section name={sectionNames.interaction}>
97+
{hiddenPropertyView(children)}
98+
</Section>
99+
)}
100+
101+
{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
102+
<>
103+
<Section name={sectionNames.layout}>
104+
{!_.isEmpty(children.title.getView()) &&
105+
children.align.propertyView({
106+
label: trans("divider.align"),
107+
radioButton: true,
108+
})}
109+
</Section>
110+
<Section name={sectionNames.style}>
111+
{children.dashed.propertyView({ label: trans("divider.dashed") })}
112+
{children.style.getPropertyView()}
113+
</Section>
114+
</>
115+
)}
90116
</>
91117
);
92118
})

‎client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@ import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators
1111
import { hiddenPropertyView } from "comps/utils/propertyUtils";
1212
import { trans } from "i18n";
1313

14+
import { useContext } from "react";
15+
import { EditorContext } from "comps/editorState";
16+
1417
const getStyle = (style: FileViewerStyleType) => {
1518
return css`
1619
width: ${widthCalculator(style.margin)};
@@ -20,7 +23,7 @@ const getStyle = (style: FileViewerStyleType) => {
2023
2124
overflow: hidden;
2225
background-color: ${style.background};
23-
border: 1px solid ${style.border};
26+
border: ${(props) => (style.borderWidth ? style.borderWidth : "1px")} solid ${style.border};
2427
border-radius: calc(min(${style.radius}, 20px));
2528
`;
2629
};
@@ -78,14 +81,22 @@ let FileViewerBasicComp = (function () {
7881
{children.src.propertyView({
7982
label: trans("fileViewer.src"),
8083
tooltip: (
81-
<span style={{ wordBreak: "break-all" }}>{trans("fileViewer.srcTooltip")}</span>
84+
<span>{trans("fileViewer.srcTooltip")}</span>
8285
),
8386
})}
8487
</Section>
8588

86-
<Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
89+
{["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
90+
<Section name={sectionNames.interaction}>
91+
{hiddenPropertyView(children)}
92+
</Section>
93+
)}
8794

88-
<Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
95+
{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
96+
<Section name={sectionNames.style}>
97+
{children.style.getPropertyView()}
98+
</Section>
99+
)}
89100
</>
90101
);
91102
})

‎client/packages/lowcoder/src/comps/comps/iframeComp.tsx‎

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,14 @@ import { hiddenPropertyView } from "comps/utils/propertyUtils";
1010
import { trans } from "i18n";
1111
import log from "loglevel";
1212

13+
import { useContext } from "react";
14+
import { EditorContext } from "comps/editorState";
15+
1316
const Wrapper = styled.div<{ $style: IframeStyleType }>`
1417
width: 100%;
1518
height: 100%;
1619
overflow: hidden;
17-
border: 1px solid ${(props) => props.$style.border};
20+
border: ${(props) => (props.$style.borderWidth ? props.$style.borderWidth : "1px")} solid ${(props) => props.$style.border};
1821
border-radius: calc(min(${(props) => props.$style.radius}, 20px));
1922
2023
iframe {
@@ -64,16 +67,22 @@ let IFrameCompBase = new UICompBuilder(
6467
{children.url.propertyView({ label: "URL", placeholder: "https://example.com" })}
6568
</Section>
6669

67-
<Section name={sectionNames.advanced}>
68-
{children.allowDownload.propertyView({ label: trans("iframe.allowDownload") })}
69-
{children.allowSubmitForm.propertyView({ label: trans("iframe.allowSubmitForm") })}
70-
{children.allowMicrophone.propertyView({ label: trans("iframe.allowMicrophone") })}
71-
{children.allowCamera.propertyView({ label: trans("iframe.allowCamera") })}
72-
{children.allowPopup.propertyView({ label: trans("iframe.allowPopup") })}
73-
</Section>
70+
{["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
71+
<Section name={sectionNames.interaction}>
72+
{hiddenPropertyView(children)}
73+
{children.allowDownload.propertyView({ label: trans("iframe.allowDownload") })}
74+
{children.allowSubmitForm.propertyView({ label: trans("iframe.allowSubmitForm") })}
75+
{children.allowMicrophone.propertyView({ label: trans("iframe.allowMicrophone") })}
76+
{children.allowCamera.propertyView({ label: trans("iframe.allowCamera") })}
77+
{children.allowPopup.propertyView({ label: trans("iframe.allowPopup") })}
78+
</Section>
79+
)}
7480

75-
<Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
76-
<Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
81+
{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
82+
<Section name={sectionNames.style}>
83+
{children.style.getPropertyView()}
84+
</Section>
85+
)}
7786
</>
7887
))
7988
.build();

‎client/packages/lowcoder/src/comps/comps/imageComp.tsx‎

Lines changed: 25 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,9 @@ import { BoolControl } from "comps/controls/boolControl";
2929
import { Image as AntImage } from "antd";
3030
import { DEFAULT_IMG_URL } from "util/stringUtils";
3131

32+
import { useContext } from "react";
33+
import { EditorContext } from "comps/editorState";
34+
3235
const Container = styled.div<{ $style: ImageStyleType | undefined }>`
3336
height: 100%;
3437
width: 100%;
@@ -52,7 +55,7 @@ const Container = styled.div<{ $style: ImageStyleType | undefined }>`
5255
const getStyle = (style: ImageStyleType) => {
5356
return css`
5457
img {
55-
border: 1px solid ${style.border};
58+
border: ${(props) => (style.borderWidth ? style.borderWidth : "1px")} solid ${style.border};
5659
border-radius: ${style.radius};
5760
margin: ${style.margin};
5861
padding: ${style.padding};
@@ -169,24 +172,29 @@ let ImageBasicComp = new UICompBuilder(childrenMap, (props) => {
169172
{children.src.propertyView({
170173
label: trans("image.src"),
171174
})}
172-
{children.supportPreview.propertyView({
173-
label: trans("image.supportPreview"),
174-
tooltip: trans("image.supportPreviewTip"),
175-
})}
176-
</Section>
177-
178-
<Section name={sectionNames.interaction}>
179-
{children.onEvent.getPropertyView()}
180175
</Section>
181176

182-
<Section name={sectionNames.layout}>
183-
{children.autoHeight.getPropertyView()}
184-
{hiddenPropertyView(children)}
185-
</Section>
186-
187-
<Section name={sectionNames.style}>
188-
{children.style.getPropertyView()}
189-
</Section>
177+
{["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
178+
<Section name={sectionNames.interaction}>
179+
{children.onEvent.getPropertyView()}
180+
{hiddenPropertyView(children)}
181+
{children.supportPreview.propertyView({
182+
label: trans("image.supportPreview"),
183+
tooltip: trans("image.supportPreviewTip"),
184+
})}
185+
</Section>
186+
)}
187+
188+
{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
189+
<>
190+
<Section name={sectionNames.layout}>
191+
{children.autoHeight.getPropertyView()}
192+
</Section>
193+
<Section name={sectionNames.style}>
194+
{children.style.getPropertyView()}
195+
</Section>
196+
</>
197+
)}
190198
</>
191199
);
192200
})

‎client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,11 @@ import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators
99
import { hiddenPropertyView } from "comps/utils/propertyUtils";
1010
import { trans } from "i18n";
1111

12+
import { useContext } from "react";
13+
import { EditorContext } from "comps/editorState";
14+
15+
// TODO: after Update of ANTd, introduce Size attribute to ProgressCircle
16+
1217
const getStyle = (style: ProgressStyleType) => {
1318
return css`
1419
width: ${widthCalculator(style.margin)};
@@ -74,8 +79,18 @@ let ProgressCircleTmpComp = (function () {
7479
tooltip: trans("progress.valueTooltip"),
7580
})}
7681
</Section>
77-
<Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
78-
<Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
82+
83+
{["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
84+
<Section name={sectionNames.interaction}>
85+
{hiddenPropertyView(children)}
86+
</Section>
87+
)}
88+
89+
{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
90+
<Section name={sectionNames.style}>
91+
{children.style.getPropertyView()}
92+
</Section>
93+
)}
7994
</>
8095
);
8196
})

‎client/packages/lowcoder/src/comps/comps/progressComp.tsx‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@ import styled, { css } from "styled-components";
1010
import { hiddenPropertyView } from "comps/utils/propertyUtils";
1111
import { trans } from "i18n";
1212

13+
import { useContext } from "react";
14+
import { EditorContext } from "comps/editorState";
15+
1316
const getStyle = (style: ProgressStyleType) => {
1417
return css`
1518
line-height: 2;
@@ -64,12 +67,22 @@ const ProgressBasicComp = (function () {
6467
label: trans("progress.value"),
6568
tooltip: trans("progress.valueTooltip"),
6669
})}
67-
{children.showInfo.propertyView({
68-
label: trans("progress.showInfo"),
69-
})}
7070
</Section>
71-
<Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
72-
<Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
71+
72+
{["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
73+
<Section name={sectionNames.interaction}>
74+
{hiddenPropertyView(children)}
75+
{children.showInfo.propertyView({
76+
label: trans("progress.showInfo"),
77+
})}
78+
</Section>
79+
)}
80+
81+
{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
82+
<Section name={sectionNames.style}>
83+
{children.style.getPropertyView()}
84+
</Section>
85+
)}
7386
</>
7487
);
7588
})

0 commit comments

Comments
 (0)