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

Commit93b11fc

Browse files
authored
Merge pull request#538 from lowcoder-org/feat/Layout-Mode
Numerous fixes and introduction of Layout mode.
2 parentsb081a7d +1f1afa0 commit93b11fc

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
importReact,{useContext}from"react";
2525

2626
constLink=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
constCarouselItem=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
<Sectionname={sectionNames.basic}>
7681
{children.data.propertyView({label:trans("data")})}
77-
{children.autoPlay.propertyView({label:trans("carousel.autoPlay")})}
7882
</Section>
79-
<FormDataPropertyView{...children}/>
80-
<Sectionname={sectionNames.interaction}>{children.onEvent.getPropertyView()}</Section>
81-
<Sectionname={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-
<Sectionname={sectionNames.style}>{children.style.getPropertyView()}</Section>
83+
84+
{["logic","both"].includes(useContext(EditorContext).editorModeStatus)&&(
85+
<><FormDataPropertyView{...children}/>
86+
<Sectionname={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+
<><Sectionname={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+
<Sectionname={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
typeIProps=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
constStyledDivider=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
returnprops.$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
<Sectionname={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-
<Sectionname={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
86-
<Sectionname={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+
<Sectionname={sectionNames.interaction}>
97+
{hiddenPropertyView(children)}
98+
</Section>
99+
)}
100+
101+
{["layout","both"].includes(useContext(EditorContext).editorModeStatus)&&(
102+
<>
103+
<Sectionname={sectionNames.layout}>
104+
{!_.isEmpty(children.title.getView())&&
105+
children.align.propertyView({
106+
label:trans("divider.align"),
107+
radioButton:true,
108+
})}
109+
</Section>
110+
<Sectionname={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
constgetStyle=(style:FileViewerStyleType)=>{
1518
returncss`
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-
<spanstyle={{wordBreak:"break-all"}}>{trans("fileViewer.srcTooltip")}</span>
84+
<span>{trans("fileViewer.srcTooltip")}</span>
8285
),
8386
})}
8487
</Section>
8588

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

88-
<Sectionname={sectionNames.style}>{children.style.getPropertyView()}</Section>
95+
{["layout","both"].includes(useContext(EditorContext).editorModeStatus)&&(
96+
<Sectionname={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
importlogfrom"loglevel";
1212

13+
import{useContext}from"react";
14+
import{EditorContext}from"comps/editorState";
15+
1316
constWrapper=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-
<Sectionname={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+
<Sectionname={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-
<Sectionname={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
76-
<Sectionname={sectionNames.style}>{children.style.getPropertyView()}</Section>
81+
{["layout","both"].includes(useContext(EditorContext).editorModeStatus)&&(
82+
<Sectionname={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{ImageasAntImage}from"antd";
3030
import{DEFAULT_IMG_URL}from"util/stringUtils";
3131

32+
import{useContext}from"react";
33+
import{EditorContext}from"comps/editorState";
34+
3235
constContainer=styled.div<{$style:ImageStyleType|undefined}>`
3336
height: 100%;
3437
width: 100%;
@@ -52,7 +55,7 @@ const Container = styled.div<{ $style: ImageStyleType | undefined }>`
5255
constgetStyle=(style:ImageStyleType)=>{
5356
returncss`
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-
<Sectionname={sectionNames.interaction}>
179-
{children.onEvent.getPropertyView()}
180175
</Section>
181176

182-
<Sectionname={sectionNames.layout}>
183-
{children.autoHeight.getPropertyView()}
184-
{hiddenPropertyView(children)}
185-
</Section>
186-
187-
<Sectionname={sectionNames.style}>
188-
{children.style.getPropertyView()}
189-
</Section>
177+
{["logic","both"].includes(useContext(EditorContext).editorModeStatus)&&(
178+
<Sectionname={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+
<Sectionname={sectionNames.layout}>
191+
{children.autoHeight.getPropertyView()}
192+
</Section>
193+
<Sectionname={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
constgetStyle=(style:ProgressStyleType)=>{
1318
returncss`
1419
width:${widthCalculator(style.margin)};
@@ -74,8 +79,18 @@ let ProgressCircleTmpComp = (function () {
7479
tooltip:trans("progress.valueTooltip"),
7580
})}
7681
</Section>
77-
<Sectionname={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
78-
<Sectionname={sectionNames.style}>{children.style.getPropertyView()}</Section>
82+
83+
{["logic","both"].includes(useContext(EditorContext).editorModeStatus)&&(
84+
<Sectionname={sectionNames.interaction}>
85+
{hiddenPropertyView(children)}
86+
</Section>
87+
)}
88+
89+
{["layout","both"].includes(useContext(EditorContext).editorModeStatus)&&(
90+
<Sectionname={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
constgetStyle=(style:ProgressStyleType)=>{
1417
returncss`
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-
<Sectionname={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
72-
<Sectionname={sectionNames.style}>{children.style.getPropertyView()}</Section>
71+
72+
{["logic","both"].includes(useContext(EditorContext).editorModeStatus)&&(
73+
<Sectionname={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+
<Sectionname={sectionNames.style}>
83+
{children.style.getPropertyView()}
84+
</Section>
85+
)}
7386
</>
7487
);
7588
})

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp