Skip to content

Commit 9ab8650

Browse files
FalkWolskyFalkWolsky
authored
Merge pull request #1038 from lowcoder-org/dev
Dev -> Main for 2.4.4
2 parents 77a30e6 + d3e6771 commit 9ab8650

File tree

15 files changed

+200
-139
lines changed

15 files changed

+200
-139
lines changed

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ import { refMethods } from "comps/generators/withMethodExposing";
88
import { blurMethod, clickMethod, focusWithOptions } from "comps/utils/methodUtils";
99

1010
export function getButtonStyle(buttonStyle: ButtonStyleType) {
11-
const hoverColor = genHoverColor(buttonStyle.background);
12-
const activeColor = genActiveColor(buttonStyle.background);
11+
const hoverColor = buttonStyle.background && genHoverColor(buttonStyle.background);
12+
const activeColor = buttonStyle.background && genActiveColor(buttonStyle.background);
1313
return css`
1414
&&& {
1515
border-radius: ${buttonStyle.radius};

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ const Link = styled(Button)<{
3636
padding: ${props.$style.padding};
3737
font-size: ${props.$style.textSize};
3838
font-style:${props.$style.fontStyle};
39-
font-family:${props.$style.fontFamily};
39+
${props.$style.fontFamily && `font-family: ${props.$style.fontFamily}`};
4040
font-weight:${props.$style.textWeight};
4141
border: ${props.$style.borderWidth} ${props.$style.borderStyle} ${props.$style.border};
4242
border-radius:${props.$style.radius ? props.$style.radius:'0px'};

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import { AutoHeightControl } from "comps/controls/autoHeightControl";
1717

1818
import { useContext } from "react";
1919
import { EditorContext } from "comps/editorState";
20-
import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
20+
import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
2121

2222
type IProps = DividerProps & {
2323
$style: DividerStyleType;

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

+6-3
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import { trans } from "i18n";
2222

2323
import { useContext } from "react";
2424
import { EditorContext } from "comps/editorState";
25+
import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
2526

2627
type IProps = {
2728
$justify: boolean;
@@ -135,16 +136,18 @@ const childrenMap = {
135136
logoUrl: StringControl,
136137
logoEvent: withDefault(eventHandlerControl(logoEventHandlers), [{ name: "click" }]),
137138
horizontalAlignment: alignWithJustifyControl(),
138-
style: migrateOldData(styleControl(NavigationStyle), fixOldStyleData),
139-
animationStyle: styleControl(AnimationStyle),
139+
style: migrateOldData(styleControl(NavigationStyle, 'style'), fixOldStyleData),
140+
animationStyle: styleControl(AnimationStyle, 'animationStyle'),
140141
items: withDefault(navListComp(), [
141142
{
142143
label: trans("menuItem") + " 1",
143144
},
144145
]),
145146
};
146147

147-
const NavCompBase = new UICompBuilder(childrenMap, (props) => {
148+
const NavCompBase = new UICompBuilder(childrenMap, (props, dispatch) => {
149+
useMergeCompStyles(props, dispatch);
150+
148151
const data = props.items;
149152
const items = (
150153
<>

‎client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generat
66
import { SliderChildren, SliderPropertyView, SliderStyled, SliderWrapper } from "./sliderCompConstants";
77
import { hasIcon } from "comps/utils";
88
import { BoolControl } from "comps/controls/boolControl";
9+
import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
910

1011
const RangeSliderBasicComp = (function () {
1112
const childrenMap = {
@@ -14,7 +15,8 @@ const RangeSliderBasicComp = (function () {
1415
end: numberExposingStateControl("end", 60),
1516
vertical: BoolControl,
1617
};
17-
return new UICompBuilder(childrenMap, (props) => {
18+
return new UICompBuilder(childrenMap, (props, dispatch) => {
19+
useMergeCompStyles(props as Record<string, any>, dispatch);
1820
return props.label({
1921
style: props.style,
2022
labelStyle: props.labelStyle,

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ function RootView(props: RootViewProps) {
7373
localDefaultTheme;
7474

7575
const themeId = selectedTheme ? selectedTheme.id : (
76-
previewTheme ? "" : 'default-theme-id'
76+
previewTheme ? "preview-theme" : 'default-theme-id'
7777
);
7878

7979
useEffect(() => {

‎client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx

+2-6
Original file line numberDiff line numberDiff line change
@@ -75,14 +75,10 @@ export const getStyle = (style: CheckboxStyleType) => {
7575
&:hover .ant-checkbox-inner,
7676
.ant-checkbox:hover .ant-checkbox-inner,
7777
.ant-checkbox-input + ant-checkbox-inner {
78-
background-color:${style.hoverBackground ? style.hoverBackground : '#fff'};
78+
${style.hoverBackground && `background-color: ${style.hoverBackground}`};
7979
}
8080
81-
&:hover .ant-checkbox-checked .ant-checkbox-inner,
82-
.ant-checkbox:hover .ant-checkbox-inner,
83-
.ant-checkbox-input + ant-checkbox-inner {
84-
background-color:${style.hoverBackground ? style.hoverBackground : '#ffff'};
85-
}
81+
8682
8783
&:hover .ant-checkbox-inner,
8884
.ant-checkbox:hover .ant-checkbox-inner,

‎client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,9 @@ let MultiSelectBasicComp = (function () {
2525
defaultValue: arrayStringExposingStateControl("defaultValue", ["1", "2"]),
2626
value: arrayStringExposingStateControl("value"),
2727
style: styleControl(InputFieldStyle , 'style'),
28-
labelStyle:styleControl(LabelStyle , 'labelStyle'),
29-
inputFieldStyle:styleControl(MultiSelectStyle , 'inputFieldStyle'),
30-
childrenInputFieldStyle:styleControl(ChildrenMultiSelectStyle),
28+
labelStyle: styleControl(LabelStyle , 'labelStyle'),
29+
inputFieldStyle: styleControl(MultiSelectStyle , 'inputFieldStyle'),
30+
childrenInputFieldStyle: styleControl(ChildrenMultiSelectStyle, 'childrenInputFieldStyle'),
3131
margin: MarginControl,
3232
padding: PaddingControl,
3333
};

‎client/packages/lowcoder/src/comps/controls/styleControl.tsx

+10-4
Original file line numberDiff line numberDiff line change
@@ -863,17 +863,23 @@ export function styleControl<T extends readonly SingleColorConfig[]>(
863863
const {comp, compType} = useContext(CompContext);
864864
const theme = useContext(ThemeContext);
865865
const bgColor = useContext(BackgroundColorContext);
866+
const { themeId } = theme || {};
867+
const isPreviewTheme = themeId === 'preview-theme';
868+
const isDefaultTheme = themeId === 'default-theme-id';
869+
866870

867871
const appSettingsComp = editorState?.getAppSettingsComp();
868872
const preventAppStylesOverwriting = appSettingsComp?.getView()?.preventAppStylesOverwriting;
869-
const { themeId } = theme || {};
870873
const { appliedThemeId, preventStyleOverwriting } = comp?.comp?.container || comp?.comp || {};
871-
const appTheme = !preventStyleOverwriting && !preventAppStylesOverwriting
874+
const appTheme = isPreviewTheme || isDefaultTheme || (!preventStyleOverwriting && !preventAppStylesOverwriting)
872875
? theme?.theme
873876
: undefined;
874-
const compTheme = compType && !preventStyleOverwriting && !preventAppStylesOverwriting
877+
const compTheme = isPreviewTheme || isDefaultTheme || (compType && !preventStyleOverwriting && !preventAppStylesOverwriting)
875878
? {
876-
...(theme?.theme?.components?.[compType]?.[styleKey] || {}) as unknown as Record<string, string>
879+
...(
880+
theme?.theme?.components?.[compType]?.[styleKey]
881+
|| defaultTheme.components?.[compType]?.[styleKey]
882+
) as unknown as Record<string, string>
877883
}
878884
: undefined;
879885
const styleProps = (!comp && !compType) || preventStyleOverwriting || preventAppStylesOverwriting || appliedThemeId === themeId

‎client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1459,8 +1459,8 @@ export const TableHeaderStyle = [
14591459
FONT_FAMILY,
14601460
FONT_STYLE,
14611461
TEXT,
1462-
getStaticBackground(SURFACE_COLOR),
1463-
getBackground("primarySurface"),
1462+
// getStaticBackground(SURFACE_COLOR),
1463+
// getBackground("primarySurface"),
14641464
{
14651465
name: "headerBackground",
14661466
label: trans("style.tableHeaderBackground"),

‎client/packages/lowcoder/src/constants/routesURL.ts

+1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export const ORGANIZATION_SETTING = "/setting/organization";
1515
export const THEME_SETTING = "/setting/theme";
1616
export const PLUGINS_SETTING = "/setting/plugins";
1717
export const THEME_DETAIL = "/setting/theme/detail";
18+
export const THEME_DETAIL_URL = `${THEME_DETAIL}/:themeId`;
1819

1920
export const OAUTH_PROVIDER_SETTING = "/setting/oauth-provider";
2021
export const OAUTH_PROVIDER_DETAIL = "/setting/oauth-provider/detail";

‎client/packages/lowcoder/src/constants/themeConstants.ts

+74-37
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,29 @@
11
import { ThemeDetail } from "@lowcoder-ee/api/commonSettingApi";
22

3+
const theme = {
4+
primary: "#3377FF",
5+
textDark: "#222222",
6+
textLight: "#FFFFFF",
7+
canvas: "#F5F5F6",
8+
primarySurface: "#FFFFFF",
9+
border: "#D7D9E0",
10+
radius: "4px",
11+
borderWidth: "1px",
12+
borderStyle: "solid",
13+
margin: "3px",
14+
padding: "3px",
15+
gridColumns: "24",
16+
textSize: "14px",
17+
text: "#222222",
18+
animation: "",
19+
animationDelay: "",
20+
animationDuration: "",
21+
opacity: "1",
22+
boxShadow: "",
23+
boxShadowColor: "",
24+
animationIterationCount: "",
25+
};
26+
327
const text = {
428
style: {
529
borderWidth: 0,
@@ -16,7 +40,14 @@ const input = {
1640
},
1741
inputFieldStyle: {
1842
borderWidth: '1px',
19-
border: '#D7D9E0'
43+
border: theme.border,
44+
}
45+
};
46+
47+
const select = {
48+
...input,
49+
childrenInputFieldStyle: {
50+
borderWidth: '0px',
2051
}
2152
};
2253

@@ -77,12 +108,6 @@ const step = {
77108
style: {text:'#D7D9E0'}
78109
};
79110

80-
const treeSelect = {
81-
inputFieldStyle: {
82-
borderWidth: '1px',
83-
}
84-
};
85-
86111
const pageLayout = {
87112
style: {
88113
borderWidth: '1px',
@@ -95,34 +120,45 @@ const qrCode = {
95120
}
96121
};
97122

98-
const divider = {
123+
const divider = {
99124
style: {
100125
radius: "0px"
101126
}
102127
};
103128

129+
const navigation = {
130+
style: {
131+
borderWidth: '0px',
132+
}
133+
}
134+
135+
const slider = {
136+
...input,
137+
inputFieldStyle: {
138+
...input.inputFieldStyle,
139+
track: '#D7D9E0',
140+
}
141+
}
142+
143+
const switchComp = {
144+
...input,
145+
inputFieldStyle: {
146+
...input.inputFieldStyle,
147+
unchecked: '#D7D9E0',
148+
}
149+
}
150+
151+
const checkbox = {
152+
...input,
153+
inputFieldStyle: {
154+
...input.inputFieldStyle,
155+
uncheckedBorder: '#D7D9E0',
156+
}
157+
}
158+
159+
104160
export const defaultTheme: ThemeDetail = {
105-
primary: "#3377FF",
106-
textDark: "#222222",
107-
textLight: "#FFFFFF",
108-
canvas: "#F5F5F6",
109-
primarySurface: "#FFFFFF",
110-
border: "#D7D9E0",
111-
radius: "4px",
112-
borderWidth: "1px",
113-
borderStyle: "solid",
114-
margin: "3px",
115-
padding: "3px",
116-
gridColumns: "24",
117-
textSize: "14px",
118-
text: "#222222",
119-
animation: "",
120-
animationDelay: "",
121-
animationDuration: "",
122-
opacity: "1",
123-
boxShadow: "",
124-
boxShadowColor: "",
125-
animationIterationCount: "",
161+
...theme,
126162
components: {
127163
text,
128164
input,
@@ -133,24 +169,25 @@ export const defaultTheme: ThemeDetail = {
133169
tabbedContainer,
134170
step,
135171
qrCode,
136-
treeSelect,
137172
pageLayout,
138173
divider,
174+
navigation,
175+
slider,
176+
checkbox,
139177
password: input,
140178
numberInput: input,
141179
textArea: input,
142180
autocomplete: input,
143-
switch: input,
144-
checkbox: input,
145-
radio: input,
181+
switch: switchComp,
182+
radio: checkbox,
146183
date: input,
147184
dateRange: input,
148185
time: input,
149186
timeRange: input,
150-
slider: input,
151-
rangeSlider: input,
187+
rangeSlider: slider,
152188
segmentedControl,
153-
select: input,
154-
multiSelect: input,
189+
select: select,
190+
multiSelect: select,
191+
treeSelect: select,
155192
},
156193
};

0 commit comments

Comments
 (0)