Skip to content

Commit fd314d4

Browse files
FalkWolskyFalkWolsky
authored
Merge pull request #529 from lowcoder-org/feat/Layout-Mode
[WIP] Introducing Layout Mode
2 parents 5dd8d32 + 7998c85 commit fd314d4

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

59 files changed

+1395
-1025
lines changed

‎client/packages/lowcoder-design/src/components/Section.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -142,5 +142,6 @@ export const sectionNames = {
142142
validation: trans("prop.validation"),
143143
layout: trans("prop.layout"),
144144
style: trans("prop.style"),
145+
data: trans("prop.data"),
145146
meetings : trans("prop.meetings"), // added by Falk Wolsky
146147
};

‎client/packages/lowcoder-design/src/i18n/design/locales/en.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export const en = {
2424
layout: "Layout",
2525
style: "Style",
2626
meetings : "Meeting Settings",
27+
data: "Data",
2728
},
2829
passwordInput: {
2930
label: "Password:",

‎client/packages/lowcoder-design/src/icons/icon-ShowLayout.svg

Lines changed: 20 additions & 0 deletions
Loading

‎client/packages/lowcoder-design/src/icons/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ export { ReactComponent as WarningWhiteIcon } from "./icon-warning-white.svg";
6464
export { ReactComponent as WarningIcon } from "./icon-warning.svg";
6565
export { ReactComponent as WidthDragIcon } from "./icon-widthDrag.svg";
6666
export { ReactComponent as ManyCheckboxIcon } from "./manyCheckbox.svg";
67+
export { ReactComponent as Layout } from "./icon-ShowLayout.svg";
6768
export { ReactComponent as Left } from "./icon-ShowLeft.svg";
6869
export { ReactComponent as Middle } from "./icon-ShowMiddle.svg";
6970
export { ReactComponent as Right } from "./icon-ShowRight.svg";

‎client/packages/lowcoder/index.html

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,11 @@
22
<html>
33
<head>
44
<meta charset="utf-8" />
5-
<meta
6-
name="viewport"
7-
content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no viewport-fit=cover"
8-
/>
9-
<meta
10-
lang="en"
11-
name="description"
12-
content="A developer-friendly open-source low code platform to build internal apps within minutes."
13-
/>
5+
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no viewport-fit=cover"/>
6+
<meta lang="en" name="description" content="Lowcoder | rapid App & VideoMeeting builder for everyone." />
147
<meta name="theme-color" content="#000000" />
8+
<meta property="iframely:title" content="Lowcoder" />
9+
<meta property="iframely:description" content="Lowcoder | rapid App & VideoMeeting builder for everyone." />
1510
<style>
1611
html,
1712
body {

‎client/packages/lowcoder/package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,6 @@
104104
"ua-parser-js": "^1.0.33",
105105
"uuid": "^9.0.0",
106106
"web-vitals": "^2.1.0",
107-
"weixin-js-sdk": "^1.6.0",
108107
"xlsx": "^0.18.5"
109108
},
110109
"scripts": {

‎client/packages/lowcoder/src/app-env.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,4 +42,4 @@ declare var REACT_APP_BUNDLE_TYPE: "sdk" | "app";
4242
declare var REACT_APP_DISABLE_JS_SANDBOX: string;
4343
declare var REACT_APP_BUNDLE_BUILTIN_PLUGIN: string;
4444

45-
declare module "weixin-js-sdk";
45+
// declare module "weixin-js-sdk";

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

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ import {
2424
} from "./buttonCompConstants";
2525
import { RefControl } from "comps/controls/refControl";
2626

27+
import React, { useContext } from "react";
28+
2729
const FormLabel = styled(CommonBlueLabel)`
2830
font-size: 13px;
2931
margin-right: 4px;
@@ -161,24 +163,30 @@ const ButtonTmpComp = (function () {
161163
{children.text.propertyView({ label: trans("text") })}
162164
</Section>
163165

164-
<Section name={sectionNames.interaction}>
165-
{children.type.propertyView({ label: trans("prop.type"), radioButton: true })}
166-
{isDefault(children.type.getView())
167-
? [
166+
{(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
167+
<><Section name={sectionNames.interaction}>
168+
{children.type.propertyView({ label: trans("prop.type"), radioButton: true })}
169+
{isDefault(children.type.getView())
170+
? [
168171
children.onEvent.getPropertyView(),
169172
disabledPropertyView(children),
173+
hiddenPropertyView(children),
170174
loadingPropertyView(children),
171175
]
172-
: children.form.getPropertyView()}
173-
</Section>
174-
175-
<Section name={sectionNames.layout}>
176-
{children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })}
177-
{children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
178-
{hiddenPropertyView(children)}
179-
</Section>
176+
: children.form.getPropertyView()}
177+
</Section>
178+
</>
179+
)}
180180

181-
<Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
181+
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
182+
<>
183+
<Section name={sectionNames.layout}>
184+
{children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })}
185+
{children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
186+
</Section>
187+
<Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
188+
</>
189+
)}
182190
</>
183191
))
184192
.setExposeMethodConfigs(buttonRefMethods)

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

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ import { UICompBuilder } from "comps/generators/uiCompBuilder";
77
import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
88
import { Section, sectionNames } from "lowcoder-design";
99
import { trans } from "i18n";
10-
import React, { ReactElement } from "react";
10+
import React, { ReactElement, useContext } from "react";
11+
import { EditorContext } from "comps/editorState";
1112
import styled from "styled-components";
1213
import { ButtonEventHandlerControl } from "../../controls/eventHandlerControl";
1314
import { DropdownOptionControl } from "../../controls/optionsControl";
@@ -19,16 +20,16 @@ import {
1920
getButtonStyle,
2021
} from "./buttonCompConstants";
2122

23+
2224
const DropdownButton = styled(Dropdown.Button)`
2325
width: 100%;
24-
2526
.ant-btn-group {
2627
width: 100%;
2728
}
2829
`;
2930

3031
const LeftButtonWrapper = styled.div<{ $buttonStyle: ButtonStyleType }>`
31-
width: calc(100% - 32px);
32+
width: calc(100%);
3233
${(props) => `margin: ${props.$buttonStyle.margin};`}
3334
margin-right: 0;
3435
.ant-btn {
@@ -66,7 +67,7 @@ const DropdownTmpComp = (function () {
6667
options: DropdownOptionControl,
6768
disabled: BoolCodeControl,
6869
onEvent: ButtonEventHandlerControl,
69-
style: withDefault(ButtonStyleControl, { background: "#FFFFFF" }),
70+
style: ButtonStyleControl,
7071
};
7172
return new UICompBuilder(childrenMap, (props) => {
7273
const hasIcon =
@@ -92,7 +93,6 @@ const DropdownTmpComp = (function () {
9293

9394
return (
9495
<ButtonCompWrapper disabled={props.disabled}>
95-
{console.log("props,", props)}
9696
{props.onlyMenu ? (
9797
<Dropdown
9898
disabled={props.disabled}
@@ -131,18 +131,26 @@ const DropdownTmpComp = (function () {
131131
<>
132132
<Section name={sectionNames.basic}>
133133
{children.options.propertyView({})}
134-
{children.text.propertyView({ label: trans("text") })}
135-
{children.onlyMenu.propertyView({ label: trans("dropdown.onlyMenu") })}
136-
</Section>
137-
138-
<Section name={sectionNames.interaction}>
139-
{disabledPropertyView(children)}
140-
{!children.onlyMenu.getView() && children.onEvent.getPropertyView()}
141134
</Section>
142135

143-
<Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
136+
{(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
137+
<><Section name={sectionNames.interaction}>
138+
{!children.onlyMenu.getView() && children.onEvent.getPropertyView()}
139+
{disabledPropertyView(children)}
140+
{hiddenPropertyView(children)}
141+
</Section>
142+
</>
143+
)}
144144

145-
<Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
145+
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
146+
<>
147+
<Section name={sectionNames.layout}>
148+
{children.text.propertyView({ label: trans("label") })}
149+
{children.onlyMenu.propertyView({ label: trans("dropdown.onlyMenu") })}
150+
</Section>
151+
<Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
152+
</>
153+
)}
146154
</>
147155
))
148156
.build();

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

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,11 @@ import { IconControl } from "comps/controls/iconControl";
2020
import { hasIcon } from "comps/utils";
2121
import { RefControl } from "comps/controls/refControl";
2222

23+
import { EditorContext } from "comps/editorState";
24+
import React, { useContext } from "react";
25+
2326
const Link = styled(Button)<{ $style: LinkStyleType }>`
24-
${(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};`}
2528
&.ant-btn {
2629
display: inline-flex;
2730
align-items: center;
@@ -93,19 +96,22 @@ const LinkTmpComp = (function () {
9396
{children.text.propertyView({ label: trans("text") })}
9497
</Section>
9598

96-
<Section name={sectionNames.interaction}>
97-
{children.onEvent.getPropertyView()}
98-
{disabledPropertyView(children)}
99-
{loadingPropertyView(children)}
100-
</Section>
101-
102-
<Section name={sectionNames.layout}>
103-
{children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })}
104-
{children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
105-
{hiddenPropertyView(children)}
106-
</Section>
99+
{(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
100+
<><Section name={sectionNames.interaction}>
101+
{children.onEvent.getPropertyView()}
102+
{disabledPropertyView(children)}
103+
{hiddenPropertyView(children)}
104+
{loadingPropertyView(children)}
105+
</Section>
106+
<Section name={sectionNames.advanced}>
107+
{children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })}
108+
{children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
109+
</Section></>
110+
)}
107111

108-
<Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
112+
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
113+
<><Section name={sectionNames.style}>{children.style.getPropertyView()}</Section></>
114+
)}
109115
</>
110116
);
111117
})

0 commit comments

Comments
 (0)