Skip to content

Commit f30fd26

Browse files
raheeliftikhar5raheeliftikhar5
committed
style fixes for input components
1 parent cef4df9 commit f30fd26

File tree

10 files changed

+92
-30
lines changed

10 files changed

+92
-30
lines changed

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

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { BoolCodeControl, NumberControl } from "../../controls/codeControl";
22
import { LabelControl } from "../../controls/labelControl";
33
import { withDefault } from "../../generators";
44
import { ChangeEventHandlerControl } from "../../controls/eventHandlerControl";
5-
import { Section, sectionNames } from "lowcoder-design";
5+
import { Section, lightenColor, sectionNames } from "lowcoder-design";
66
import { RecordConstructorToComp } from "lowcoder-core";
77
import { styleControl } from "comps/controls/styleControl";
88
import { AnimationStyle, InputFieldStyle, LabelStyle, SliderStyle, SliderStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
@@ -41,6 +41,16 @@ const getStyle = (style: SliderStyleType, vertical: boolean) => {
4141
.ant-slider-handle:focus {
4242
box-shadow: 0 0 0 5px ${fadeColor(darkenColor(style.thumbBorder, 0.08), 0.12)};
4343
}
44+
.ant-slider-handle::after {
45+
box-shadow: 0 0 0 2px ${lightenColor(style.thumbBorder, 0.1)};
46+
}
47+
.ant-slider-handle:hover,
48+
.ant-slider-handle:active,
49+
.ant-slider-handle:focus {
50+
&::after {
51+
box-shadow: 0 0 0 5px ${style.thumbBorder};
52+
}
53+
}
4454
${vertical && css`
4555
width: auto;
4656
min-height: calc(300px - ${style.margin});

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

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import { styleControl } from "comps/controls/styleControl";
1818
import { AnimationStyle, CheckboxStyle, CheckboxStyleType, InputFieldStyle, LabelStyle } from "comps/controls/styleControlConstants";
1919
import { RadioLayoutOptions, RadioPropertyView } from "./radioCompConstants";
2020
import { dropdownControl } from "../../controls/dropdownControl";
21-
import { ValueFromOption } from "lowcoder-design";
21+
import { ValueFromOption, lightenColor } from "lowcoder-design";
2222
import { EllipsisTextCss } from "lowcoder-design";
2323
import { trans } from "i18n";
2424
import { RefControl } from "comps/controls/refControl";
@@ -28,7 +28,6 @@ import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
2828

2929
export const getStyle = (style: CheckboxStyleType) => {
3030
return css`
31-
&,
3231
.ant-checkbox-wrapper:not(.ant-checkbox-wrapper-disabled) {
3332
color: ${style.staticText};
3433
max-width: calc(100% - 8px);
@@ -47,7 +46,7 @@ export const getStyle = (style: CheckboxStyleType) => {
4746
border-width:${!!style.borderWidth ? style.borderWidth : '2px'};
4847
}
4948
50-
.ant-checkbox-checked {
49+
.ant-checkbox-checked:not(.ant-checkbox-disabled) {
5150
.ant-checkbox-inner {
5251
background-color: ${style.checkedBackground};
5352
border-color: ${style.checkedBorder};
@@ -65,7 +64,7 @@ export const getStyle = (style: CheckboxStyleType) => {
6564
}
6665
}
6766
68-
.ant-checkbox-inner {
67+
.ant-checkbox-inner) {
6968
background-color: ${style.uncheckedBackground};
7069
border-radius: ${style.radius};
7170
border-color: ${style.checkedBorder};
@@ -76,6 +75,7 @@ export const getStyle = (style: CheckboxStyleType) => {
7675
.ant-checkbox:hover .ant-checkbox-inner,
7776
.ant-checkbox-input + ant-checkbox-inner {
7877
${style.hoverBackground && `background-color: ${style.hoverBackground}`};
78+
${style.hoverBackground && `border-color: ${style.hoverBackground}`};
7979
}
8080
8181
@@ -86,6 +86,11 @@ export const getStyle = (style: CheckboxStyleType) => {
8686
border-color: ${style.checkedBorder};
8787
border-width:${!!style.borderWidth ? style.borderWidth : '2px'};
8888
}
89+
90+
&:hover .ant-checkbox-checked:not(.ant-checkbox-disabled) .ant-checkbox-inner {
91+
background-color: ${style.hoverBackground || lightenColor(style.checkedBackground, 0.1)};
92+
border-color: ${style.hoverBackground || lightenColor(style.checkedBackground, 0.1)};
93+
}
8994
}
9095
9196

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ const getStyle = (style: RadioStyleType, inputFieldStyle?:RadioStyleType ) => {
5555
&:hover .ant-radio-inner,
5656
.ant-radio:hover .ant-radio-inner,
5757
.ant-radio-input + ant-radio-inner {
58-
background-color:${inputFieldStyle?.hoverBackground ? inputFieldStyle?.hoverBackground:'#ffff'};
58+
${inputFieldStyle?.hoverBackground && `background-color: ${style.hoverBackground}`};
5959
}
6060
6161
&:hover .ant-radio-inner,

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ export const getStyle = (
115115
&.ant-select-focused,
116116
&:hover {
117117
.ant-select-selector {
118-
border-color: ${style.accent};
118+
border-color: ${style.accent} !important;
119119
}
120120
}
121121

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

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { LabelControl } from "comps/controls/labelControl";
66
import { styleControl } from "comps/controls/styleControl";
77
import { SwitchStyle, SwitchStyleType, LabelStyle, InputFieldStyle, AnimationStyle } from "comps/controls/styleControlConstants";
88
import { migrateOldData } from "comps/generators/simpleGenerators";
9-
import { Section, sectionNames } from "lowcoder-design";
9+
import { Section, lightenColor, sectionNames } from "lowcoder-design";
1010
import styled, { css } from "styled-components";
1111
import { UICompBuilder } from "../generators";
1212
import { CommonNameConfig, NameConfig, withExposingConfigs } from "../generators/withExposing";
@@ -38,13 +38,16 @@ const EventOptions = [
3838
const getStyle = (style: SwitchStyleType) => {
3939
return css`
4040
.ant-switch-handle::before {
41-
background-color: ${style.handle};
41+
background: ${style.handle};
4242
}
4343
button {
4444
background-image: none;
45-
background-color: ${style.unchecked};
45+
background: ${style.unchecked};
4646
&.ant-switch-checked {
47-
background-color: ${style.checked};
47+
background: ${style.checked};
48+
&:hover:not(.ant-switch-disabled) {
49+
background: ${lightenColor(style.checked, 0.2)}
50+
}
4851
}
4952
}
5053
`;

‎client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@ const BackgroundWrapper = styled.div<{
149149
padding: ${(props) => props.$style.padding} !important;
150150
margin: ${(props) => props.$style.margin} !important;
151151
overflow: scroll !important;
152-
border-style:${(props) => props.$style.borderStyle} !important;
152+
border-style: ${(props) => props.$style.borderStyle} !important;
153153
border-width: ${(props) => `${props.$style.borderWidth} !important`};
154154
${(props) => props.$style}
155155
`;

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

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { childrenToProps, ToConstructor } from "comps/generators/multi";
55
import { BackgroundColorContext } from "comps/utils/backgroundColorContext";
66
import { ThemeContext } from "comps/utils/themeContext";
77
import { trans } from "i18n";
8-
import _, { values } from "lodash";
8+
import _, { omit, values } from "lodash";
99
import {
1010
controlItem,
1111
IconReset,
@@ -84,6 +84,7 @@ import { CompTypeContext } from "../utils/compTypeContext";
8484
import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
8585
import { CompContext } from "../utils/compContext";
8686
import { EditorContext } from "../editorState";
87+
import { inputFieldComps } from "@lowcoder-ee/constants/compConstants";
8788

8889
function isSimpleColorConfig(config: SingleColorConfig): config is SimpleColorConfig {
8990
return config.hasOwnProperty("color");
@@ -356,13 +357,19 @@ function calcColors<ColorMap extends Record<string, string>>(
356357
theme?: ThemeDetail,
357358
bgColor?: string,
358359
compTheme?: Record<string, string>,
360+
compType?: string,
361+
styleKey?: string,
359362
) {
360363
// let themeWithDefault = (theme || defaultTheme) as unknown as Record<string, string>;
361364
let themeWithDefault = {
362365
// ...defaultTheme,
363366
...(theme || {}),
364367
...(compTheme || {}),
365368
} as unknown as Record<string, string>;
369+
if (compType && styleKey && inputFieldComps.includes(compType) && styleKey !== 'inputFieldStyle') {
370+
const style = theme?.components?.[compType]?.[styleKey] as Record<string, string>;
371+
themeWithDefault['borderWidth'] = style?.['borderWidth'] || '0px';
372+
}
366373

367374
// Cover what is not there for the first pass
368375
let res: Record<string, string> = {};
@@ -876,10 +883,14 @@ export function styleControl<T extends readonly SingleColorConfig[]>(
876883
: defaultTheme;
877884
const compTheme = isPreviewTheme || isDefaultTheme || (compType && !preventStyleOverwriting && !preventAppStylesOverwriting)
878885
? {
879-
...(
880-
theme?.theme?.components?.[compType]?.[styleKey]
881-
|| defaultTheme.components?.[compType]?.[styleKey]
882-
) as unknown as Record<string, string>
886+
...(omit(defaultTheme, 'components', 'chart')),
887+
...defaultTheme.components?.[compType]?.[styleKey] as unknown as Record<string, string>,
888+
...(omit(theme?.theme, 'components', 'chart')),
889+
...theme?.theme?.components?.[compType]?.[styleKey] as unknown as Record<string, string>,
890+
// ...(
891+
// theme?.theme?.components?.[compType]?.[styleKey]
892+
// // || defaultTheme.components?.[compType]?.[styleKey]
893+
// ) as unknown as Record<string, string>
883894
}
884895
: defaultTheme.components?.[compType]?.[styleKey];
885896
const styleProps = (!comp && !compType) || preventStyleOverwriting || preventAppStylesOverwriting || appliedThemeId === themeId
@@ -892,6 +903,8 @@ export function styleControl<T extends readonly SingleColorConfig[]>(
892903
appTheme,
893904
bgColor,
894905
compTheme as Record<string, string> | undefined,
906+
compType,
907+
styleKey,
895908
);
896909
}
897910
)

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

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -540,11 +540,11 @@ const TEXT_WEIGHT = {
540540
textWeight: "textWeight",
541541
} as const;
542542

543-
const HOVER_BACKGROUND_COLOR = {
543+
const CHECKBOX_HOVER_BACKGROUND_COLOR = {
544544
name: "hoverBackground",
545545
label: trans("style.hoverBackground"),
546546
hoverBackground: "hoverBackground",
547-
color: SECOND_SURFACE_COLOR,
547+
// color: SECOND_SURFACE_COLOR,
548548
}
549549

550550
const FONT_FAMILY = {
@@ -1297,13 +1297,15 @@ export const CheckboxStyle = [
12971297
]).filter((style) => style.name !== "border"),
12981298
...checkAndUncheck(),
12991299
{
1300-
name: "checked",
1300+
name: "checkedBorder",
13011301
label: trans("style.checked"),
13021302
depName: "checkedBackground",
1303-
depType: DEP_TYPE.CONTRAST_TEXT,
1304-
transformer: contrastText,
1303+
// depType: DEP_TYPE.CONTRAST_TEXT,
1304+
// transformer: contrastText,
1305+
depType: DEP_TYPE.SELF,
1306+
transformer: toSelf,
13051307
},
1306-
HOVER_BACKGROUND_COLOR,
1308+
CHECKBOX_HOVER_BACKGROUND_COLOR,
13071309
] as const;
13081310

13091311
export const RadioStyle = [
@@ -1313,13 +1315,13 @@ export const RadioStyle = [
13131315
]).filter((style) => style.name !== "border" && style.name !== "radius"),
13141316
...checkAndUncheck(),
13151317
{
1316-
name: "checked",
1318+
name: "checkedBorder",
13171319
label: trans("style.checked"),
13181320
depName: "checkedBackground",
13191321
depType: DEP_TYPE.CONTRAST_TEXT,
13201322
transformer: toSelf,
13211323
},
1322-
HOVER_BACKGROUND_COLOR,
1324+
CHECKBOX_HOVER_BACKGROUND_COLOR,
13231325
] as const;
13241326

13251327
export const SegmentStyle = [

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,24 @@
11
export const ModuleLayoutCompName = "@module_layout_comp";
2+
3+
export const inputFieldComps = [
4+
'input',
5+
'password',
6+
'numberInput',
7+
'textArea',
8+
'autocomplete',
9+
'switch',
10+
'checkbox',
11+
'radio',
12+
'date',
13+
'dateRange',
14+
'time',
15+
'timeRange',
16+
'slider',
17+
'rangeSlider',
18+
'rating',
19+
'select',
20+
'multiSelect',
21+
'treeSelect',
22+
'cascader',
23+
'segmentedControl',
24+
]

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

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const theme = {
1414
padding: "3px",
1515
gridColumns: "24",
1616
textSize: "14px",
17-
text: "#222222",
17+
// text: "#222222",
1818
animation: "",
1919
animationDelay: "",
2020
animationDuration: "",
@@ -39,7 +39,7 @@ const input = {
3939
borderWidth: '0px',
4040
},
4141
inputFieldStyle: {
42-
borderWidth: '1px',
42+
// borderWidth: '1px',
4343
border: theme.border,
4444
}
4545
};
@@ -53,13 +53,19 @@ const select = {
5353

5454
const table = {
5555
style: {
56-
borderWidth: '1px'
56+
borderWidth: '1px',
57+
borderStyle: 'solid',
58+
border: '#D7D9E0',
5759
},
5860
rowStyle: {
59-
borderWidth: '1px'
61+
borderWidth: '1px',
62+
borderStyle: 'solid',
63+
border: '#D7D9E0',
6064
},
6165
headerStyle: {
62-
borderWidth: '1px'
66+
borderWidth: '1px',
67+
borderStyle: 'solid',
68+
border: '#D7D9E0',
6369
},
6470
columnsStyle: {
6571
radius: '0px'

0 commit comments

Comments
 (0)