Skip to content

Commit e616845

Browse files
FalkWolskyFalkWolsky
authored
Merge pull request #637 from lowcoder-org/feature/styletypes-improvement
Feature/styletypes improvement
2 parents c8282d1 + 952da2f commit e616845

File tree

15 files changed

+760
-73
lines changed

15 files changed

+760
-73
lines changed

‎client/packages/lowcoder-design/src/components/colorSelect/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -177,4 +177,4 @@ const ColorBlock = styled.div<{ $color: string }>`
177177
cursor: pointer;
178178
background-clip: content-box;
179179
overflow: hidden;
180-
`;
180+
`;

‎client/packages/lowcoder/src/components/ColorPicker.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,7 @@ export default function ColorPicker(props: ColorConfigProps) {
197197
)}
198198
{colorKey === "margin" && (
199199
<div className="config-input">
200-
<Margin $margin={defaultMargin || "3px"}>
200+
<Margin $margin={defaultMargin || "4px"}>
201201
<div>
202202
<ExpandIcon title="" />
203203
</div>
@@ -215,7 +215,7 @@ export default function ColorPicker(props: ColorConfigProps) {
215215
)}
216216
{colorKey === "padding" && (
217217
<div className="config-input">
218-
<Padding $padding={defaultPadding || "3px"}>
218+
<Padding $padding={defaultPadding || "4px"}>
219219
<div>
220220
<CompressIcon title="" />
221221
</div>

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,30 +16,30 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
1616
margin: ${buttonStyle.margin};
1717
padding: ${buttonStyle.padding};
1818
&:not(:disabled) {
19-
// click animation color
2019
--antd-wave-shadow-color: ${buttonStyle.border};
2120
border-color: ${buttonStyle.border};
2221
color: ${buttonStyle.text};
22+
font-size: ${buttonStyle.textSize};
23+
font-weight: ${buttonStyle.textWeight};
2324
background-color: ${buttonStyle.background};
2425
border-radius: ${buttonStyle.radius};
2526
margin: ${buttonStyle.margin};
2627
padding: ${buttonStyle.padding};
2728
28-
:hover,
29-
:focus {
29+
&:hover,
30+
&:focus {
3031
color: ${buttonStyle.text};
3132
background-color: ${hoverColor};
3233
border-color: ${buttonStyle.border === buttonStyle.background
3334
? hoverColor
34-
: buttonStyle.border};
35+
: buttonStyle.border} !important;
3536
}
36-
37-
:active {
37+
&:active {
3838
color: ${buttonStyle.text};
3939
background-color: ${activeColor};
4040
border-color: ${buttonStyle.border === buttonStyle.background
4141
? activeColor
42-
: buttonStyle.border};
42+
: buttonStyle.border} !important;
4343
}
4444
}
4545
}
@@ -54,11 +54,11 @@ export const Button100 = styled(Button)<{ $buttonStyle?: ButtonStyleType }>`
5454
justify-content: center;
5555
align-items: center;
5656
overflow: hidden;
57+
gap: 6px;
5758
span {
5859
overflow: hidden;
5960
text-overflow: ellipsis;
6061
}
61-
gap: 6px;
6262
`;
6363

6464
export const ButtonCompWrapper = styled.div<{ disabled: boolean }>`

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,11 @@ export const ContainerBaseComp = (function () {
4141
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
4242
<><Section name={sectionNames.layout}>
4343
{children.container.getPropertyView()}
44-
</Section><Section name={sectionNames.style}>{children.container.stylePropertyView()}</Section></>
44+
</Section>
45+
<Section name={sectionNames.style}>
46+
{ children.container.stylePropertyView() }
47+
</Section>
48+
</>
4549
)}
4650
</>
4751
);

‎client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -318,7 +318,7 @@ export function InnerGrid(props: ViewPropsWithSelect) {
318318
const defaultGrid =
319319
useContext(ThemeContext)?.theme?.gridColumns ||
320320
defaultTheme?.gridColumns ||
321-
"24";
321+
"12";
322322
/////////////////////
323323
const isDroppable =
324324
useContext(IsDroppable) && (_.isNil(props.isDroppable) || props.isDroppable) && !readOnly;

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { EventData, EventTypeEnum } from "./types";
1212
import { hiddenPropertyView } from "comps/utils/propertyUtils";
1313
import { trans } from "i18n";
1414
import { EditorContext } from "comps/editorState";
15+
import * as ReactDOMClient from 'react-dom/client';
1516

1617
// TODO: eventually to embedd in container so we have styling?
1718
// TODO: support different starter templates for different frameworks (react, ANT, Flutter, Angular, etc)
@@ -59,9 +60,8 @@ const defaultCode = `
5960
);
6061
6162
const ConnectedComponent = ${trans("customComp.sdkGlobalVarName")}.connect(MyCustomComponent);
62-
63-
const container = document.getElementById("root");
64-
const root = createRoot(container);
63+
const container = document.getElementById('root');
64+
const root = ReactDOMClient.createRoot(container);
6565
root.render(<ConnectedComponent />);
6666
6767
</script>

‎client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx

Lines changed: 35 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { JSONObject, JSONValue } from "util/jsonTypes";
33
import { CompAction, CompActionTypes, deleteCompAction, wrapChildAction } from "lowcoder-core";
44
import { DispatchType, RecordConstructorToView, wrapDispatch } from "lowcoder-core";
55
import { AutoHeightControl } from "comps/controls/autoHeightControl";
6-
import { stringExposingStateControl } from "comps/controls/codeStateControl";
6+
import { BooleanStateControl, booleanExposingStateControl, stringExposingStateControl } from "comps/controls/codeStateControl";
77
import { eventHandlerControl } from "comps/controls/eventHandlerControl";
88
import { TabsOptionControl } from "comps/controls/optionsControl";
99
import { styleControl } from "comps/controls/styleControl";
@@ -12,7 +12,7 @@ import { sameTypeMap, UICompBuilder, withDefault } from "comps/generators";
1212
import { addMapChildAction } from "comps/generators/sameTypeMap";
1313
import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
1414
import { NameGenerator } from "comps/utils";
15-
import { Section, sectionNames } from "lowcoder-design";
15+
import { ControlNode, Section, sectionNames } from "lowcoder-design";
1616
import { HintPlaceHolder } from "lowcoder-design";
1717
import _ from "lodash";
1818
import React, { useCallback, useContext } from "react";
@@ -33,6 +33,9 @@ import { DisabledContext } from "comps/generators/uiCompBuilder";
3333
import { EditorContext } from "comps/editorState";
3434
import { checkIsMobile } from "util/commonUtils";
3535
import { messageInstance } from "lowcoder-design";
36+
import { show } from "antd-mobile/es/components/dialog/show";
37+
import { BoolControl } from "@lowcoder-ee/index.sdk";
38+
import { Switch } from "antd";
3639

3740
const EVENT_OPTIONS = [
3841
{
@@ -52,27 +55,40 @@ const childrenMap = {
5255
autoHeight: AutoHeightControl,
5356
onEvent: eventHandlerControl(EVENT_OPTIONS),
5457
disabled: BoolCodeControl,
58+
showHeader: BooleanStateControl,
5559
style: styleControl(TabContainerStyle),
5660
};
5761

5862
type ViewProps = RecordConstructorToView<typeof childrenMap>;
5963
type TabbedContainerProps = ViewProps & { dispatch: DispatchType };
60-
64+
6165
const getStyle = (style: TabContainerStyleType) => {
6266
return css`
6367
&.ant-tabs {
64-
border: 1px solid ${style.border};
68+
border: ${style.borderWidth} solid ${style.border};
6569
border-radius: ${style.radius};
6670
overflow: hidden;
67-
padding: ${style.padding};
71+
padding: ${style.padding};
6872
6973
> .ant-tabs-content-holder > .ant-tabs-content > div > .react-grid-layout {
7074
background-color: ${style.background};
7175
border-radius: 0;
76+
77+
background-image: ${style.backgroundImage};
78+
background-repeat: ${style.backgroundImageRepeat};
79+
background-size: ${style.backgroundImageSize};
80+
background-position: ${style.backgroundImagePosition};
81+
background-origin: ${style.backgroundImageOrigin};
82+
7283
}
7384
7485
> .ant-tabs-nav {
7586
background-color: ${style.headerBackground};
87+
background-image: ${style.headerBackgroundImage};
88+
background-repeat: ${style.headerBackgroundImageRepeat};
89+
background-size: ${style.headerBackgroundImageSize};
90+
background-position: ${style.headerBackgroundImagePosition};
91+
background-origin: ${style.headerBackgroundImageOrigin};
7692
7793
.ant-tabs-tab {
7894
div {
@@ -96,7 +112,11 @@ const getStyle = (style: TabContainerStyleType) => {
96112
`;
97113
};
98114

99-
const StyledTabs = styled(Tabs)<{ $style: TabContainerStyleType; $isMobile?: boolean }>`
115+
const StyledTabs = styled(Tabs)<{
116+
$style: TabContainerStyleType;
117+
$isMobile?: boolean;
118+
$showHeader?: boolean;
119+
}>`
100120
&.ant-tabs {
101121
height: 100%;
102122
}
@@ -111,6 +131,7 @@ const StyledTabs = styled(Tabs)<{ $style: TabContainerStyleType; $isMobile?: boo
111131
}
112132
113133
.ant-tabs-nav {
134+
display: ${(props) => (props.$showHeader ? "block" : "none")};
114135
padding: 0 ${(props) => (props.$isMobile ? 16 : 24)}px;
115136
background: white;
116137
margin: 0px;
@@ -158,12 +179,10 @@ const TabbedContainer = (props: TabbedContainerProps) => {
158179
const editorState = useContext(EditorContext);
159180
const maxWidth = editorState.getAppSettings().maxWidth;
160181
const isMobile = checkIsMobile(maxWidth);
161-
const paddingWidth = isMobile ? 8 : 20;
162-
163-
// log.debug("TabbedContainer. props: ", props);
182+
const showHeader = props.showHeader.value;
183+
const paddingWidth = isMobile ? 8 : 0;
164184

165185
const tabItems = visibleTabs.map((tab) => {
166-
// log.debug("Tab. tab: ", tab, " containers: ", containers);
167186
const id = String(tab.id);
168187
const childDispatch = wrapDispatch(wrapDispatch(dispatch, "containers"), id);
169188
const containerProps = containers[id].children;
@@ -203,6 +222,7 @@ const TabbedContainer = (props: TabbedContainerProps) => {
203222
<StyledTabs
204223
activeKey={activeKey}
205224
$style={style}
225+
$showHeader={showHeader}
206226
onChange={(key) => {
207227
if (key !== props.selectedTabKey.value) {
208228
props.selectedTabKey.onChange(key);
@@ -220,6 +240,7 @@ const TabbedContainer = (props: TabbedContainerProps) => {
220240
);
221241
};
222242

243+
223244
export const TabbedContainerBaseComp = (function () {
224245
return new UICompBuilder(childrenMap, (props, dispatch) => {
225246
return (
@@ -238,11 +259,12 @@ export const TabbedContainerBaseComp = (function () {
238259
})}
239260
{children.selectedTabKey.propertyView({ label: trans("prop.defaultValue") })}
240261
</Section>
241-
262+
242263
{["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
243264
<Section name={sectionNames.interaction}>
244265
{children.onEvent.getPropertyView()}
245266
{disabledPropertyView(children)}
267+
{children.showHeader.propertyView({ label: trans("prop.showHeader") })}
246268
{hiddenPropertyView(children)}
247269
</Section>
248270
)}
@@ -364,6 +386,8 @@ class TabbedContainerImplComp extends TabbedContainerBaseComp implements IContai
364386
override autoHeight(): boolean {
365387
return this.children.autoHeight.getView();
366388
}
389+
390+
367391
}
368392

369393
export const TabbedContainerComp = withExposingConfigs(TabbedContainerImplComp, [

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ const getStyle = (style: TextStyleType) => {
2626
border-radius: ${(style.radius ? style.radius : "4px")};
2727
border: ${(style.borderWidth ? style.borderWidth : "0px")} solid ${style.border};
2828
color: ${style.text};
29+
font-size: ${style.textSize} !important;
30+
font-weight: ${style.textWeight} !important;
2931
background-color: ${style.background};
3032
.markdown-body a {
3133
color: ${style.links};

‎client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx

Lines changed: 52 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,9 @@ import { gridItemCompToGridItems, InnerGrid } from "../containerComp/containerVi
99
import { TriContainerViewProps } from "../triContainerComp/triContainerCompBuilder";
1010

1111
const getStyle = (style: ContainerStyleType) => {
12-
return css`
12+
return css`
1313
border-color: ${style.border};
14+
border-width: ${style.borderWidth};
1415
border-radius: ${style.radius};
1516
overflow: hidden;
1617
// margin: ${style.margin};
@@ -29,32 +30,64 @@ const Wrapper = styled.div<{ $style: ContainerStyleType }>`
2930
${(props) => props.$style && getStyle(props.$style)}
3031
`;
3132

32-
const HeaderInnerGrid = styled(InnerGrid)<{ $backgroundColor: string }>`
33+
const HeaderInnerGrid = styled(InnerGrid)<{
34+
$backgroundColor: string
35+
$headerBackgroundImage: string;
36+
$headerBackgroundImageRepeat: string;
37+
$headerBackgroundImageSize: string;
38+
$headerBackgroundImagePosition: string;
39+
$headerBackgroundImageOrigin: string;
40+
}>`
3341
overflow: visible;
3442
${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
3543
border-radius: 0;
44+
${(props) => props.$headerBackgroundImage && `background-image: ${props.$headerBackgroundImage};`}
45+
${(props) => props.$headerBackgroundImageRepeat && `background-repeat: ${props.$headerBackgroundImageRepeat};`}
46+
${(props) => props.$headerBackgroundImageSize && `background-size: ${props.$headerBackgroundImageSize};`}
47+
${(props) => props.$headerBackgroundImagePosition && `background-position: ${props.$headerBackgroundImagePosition};`}
48+
${(props) => props.$headerBackgroundImageOrigin && `background-origin: ${props.$headerBackgroundImageOrigin};`}
3649
`;
3750

3851
const BodyInnerGrid = styled(InnerGrid)<{
3952
$showBorder: boolean;
4053
$backgroundColor: string;
4154
$borderColor: string;
55+
$backgroundImage: string;
56+
$backgroundImageRepeat: string;
57+
$backgroundImageSize: string;
58+
$backgroundImagePosition: string;
59+
$backgroundImageOrigin: string;
4260
}>`
4361
border-top: ${(props) => `${props.$showBorder ? 1 : 0}px solid ${props.$borderColor}`};
4462
flex: 1;
4563
${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
4664
border-radius: 0;
65+
${(props) => props.$backgroundImage && `background-image: ${props.$backgroundImage};`}
66+
${(props) => props.$backgroundImageRepeat && `background-repeat: ${props.$backgroundImageRepeat};`}
67+
${(props) => props.$backgroundImageSize && `background-size: ${props.$backgroundImageSize};`}
68+
${(props) => props.$backgroundImagePosition && `background-position: ${props.$backgroundImagePosition};`}
69+
${(props) => props.$backgroundImageOrigin && `background-origin: ${props.$backgroundImageOrigin};`}
4770
`;
4871

4972
const FooterInnerGrid = styled(InnerGrid)<{
5073
$showBorder: boolean;
5174
$backgroundColor: string;
5275
$borderColor: string;
76+
$footerBackgroundImage: string;
77+
$footerBackgroundImageRepeat: string;
78+
$footerBackgroundImageSize: string;
79+
$footerBackgroundImagePosition: string;
80+
$footerBackgroundImageOrigin: string;
5381
}>`
5482
border-top: ${(props) => `${props.$showBorder ? 1 : 0}px solid ${props.$borderColor}`};
5583
overflow: visible;
5684
${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
5785
border-radius: 0;
86+
${(props) => props.$footerBackgroundImage && `background-image: ${props.$footerBackgroundImage};`}
87+
${(props) => props.$footerBackgroundImageRepeat && `background-repeat: ${props.$footerBackgroundImageRepeat};`}
88+
${(props) => props.$footerBackgroundImageSize && `background-size: ${props.$footerBackgroundImageSize};`}
89+
${(props) => props.$footerBackgroundImagePosition && `background-position: ${props.$footerBackgroundImagePosition};`}
90+
${(props) => props.$footerBackgroundImageOrigin && `background-origin: ${props.$footerBackgroundImageOrigin};`}
5891
`;
5992

6093
export type TriContainerProps = TriContainerViewProps & {
@@ -75,7 +108,7 @@ export function TriContainer(props: TriContainerProps) {
75108
const editorState = useContext(EditorContext);
76109
const maxWidth = editorState.getAppSettings().maxWidth;
77110
const isMobile = checkIsMobile(maxWidth);
78-
const paddingWidth = isMobile ? 7 : 19;
111+
const paddingWidth = isMobile ? 8 : 0;
79112

80113
return (
81114
<div style={{padding: style.margin, height: '100%'}}>
@@ -91,7 +124,13 @@ export function TriContainer(props: TriContainerProps) {
91124
containerPadding={[paddingWidth, 3]}
92125
showName={{ bottom: showBody || showFooter ? 20 : 0 }}
93126
$backgroundColor={style?.headerBackground}
127+
$headerBackgroundImage={style?.headerBackgroundImage}
128+
$headerBackgroundImageRepeat={style?.headerBackgroundImageRepeat}
129+
$headerBackgroundImageSize={style?.headerBackgroundImageSize}
130+
$headerBackgroundImagePosition={style?.headerBackgroundImagePosition}
131+
$headerBackgroundImageOrigin={style?.headerBackgroundImageOrigin}
94132
style={{padding: style.containerheaderpadding}}
133+
95134
/>
96135
</BackgroundColorContext.Provider>
97136
)}
@@ -110,6 +149,11 @@ export function TriContainer(props: TriContainerProps) {
110149
hintPlaceholder={props.hintPlaceholder ?? HintPlaceHolder}
111150
$backgroundColor={style?.background}
112151
$borderColor={style?.border}
152+
$backgroundImage={style?.backgroundImage}
153+
$backgroundImageRepeat={style?.backgroundImageRepeat}
154+
$backgroundImageSize={style?.backgroundImageSize}
155+
$backgroundImagePosition={style?.backgroundImagePosition}
156+
$backgroundImageOrigin={style?.backgroundImageOrigin}
113157
style={{padding: style.containerbodypadding}}
114158
/>
115159
</BackgroundColorContext.Provider>
@@ -126,6 +170,11 @@ export function TriContainer(props: TriContainerProps) {
126170
containerPadding={showBody || showHeader ? [paddingWidth, 3.5] : [paddingWidth, 3]}
127171
showName={{ top: showHeader || showBody ? 20 : 0 }}
128172
$backgroundColor={style?.footerBackground}
173+
$footerBackgroundImage={style?.footerBackgroundImage}
174+
$footerBackgroundImageRepeat={style?.footerBackgroundImageRepeat}
175+
$footerBackgroundImageSize={style?.footerBackgroundImageSize}
176+
$footerBackgroundImagePosition={style?.footerBackgroundImagePosition}
177+
$footerBackgroundImageOrigin={style?.footerBackgroundImageOrigin}
129178
$borderColor={style?.border}
130179
style={{padding: style.containerfooterpadding}}
131180
/>

0 commit comments

Comments
 (0)