Skip to content

Commit 5da6e7a

Browse files
FalkWolskyFalkWolsky
authored
Merge pull request #814 from MenaamAfzal/fix/css-issues
Fix/css issues
2 parents f6bb40f + d137a8c commit 5da6e7a

31 files changed

+207
-89
lines changed

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import { INPUT_DEFAULT_ONCHANGE_DEBOUNCE } from "constants/perf";
88

99
export const StyledInput = styled(AntdInput)`
1010
width: ${(props) => (props.width ? props.width : "100%")};
11-
background: #fdfdfd;
1211
border: 1px solid ${BorderColor};
1312
border-radius: ${BorderRadius};
1413
padding-left: 12px;

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,21 @@ const SearchInput = styled(Input)`
1313
font-size: 13px;
1414
user-select: none;
1515
overflow: hidden;
16+
background-color: #fdfdfd;
17+
color: #000;
1618
1719
&:focus {
1820
outline: none;
1921
box-shadow: 0 0 0 3px #daecfc;
2022
}
23+
&:hover {
24+
background-color: #fdfdfd;
25+
color: #000;
26+
}
27+
&:focus-within {
28+
background-color: #fdfdfd;
29+
color: #000;
30+
}
2131
`;
2232
const SearchDiv = styled.div<{ error?: boolean }>`
2333
height: 32px;

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -147,5 +147,7 @@ export const sectionNames = {
147147
style: trans("prop.style"),
148148
labelStyle:trans("prop.labelStyle"),
149149
data: trans("prop.data"),
150-
meetings : trans("prop.meetings"), // added by Falk Wolsky
150+
meetings: trans("prop.meetings"), // added by Falk Wolsky
151+
field: trans("prop.field"),
152+
inputFieldStyle:trans("prop.inputFieldStyle")
151153
};

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ const SelectWrapper = styled.div<{ $border?: boolean }>`
2121
height: 100%;
2222
align-items: center;
2323
margin-right: 8px;
24+
background-color: #fff;
2425
2526
.ant-select-selection-item {
2627
display: flex;

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@ export const en = {
2727
style: "Style",
2828
meetings: "Meeting Settings",
2929
data: "Data",
30+
field: 'Field',
31+
inputFieldStyle:'Input Field Style'
3032
},
3133
passwordInput: {
3234
label: "Password:",

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

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Input, Section, sectionNames } from "lowcoder-design";
33
import { BoolControl } from "comps/controls/boolControl";
44
import { styleControl } from "comps/controls/styleControl";
55
import {
6+
InputFieldStyle,
67
InputLikeStyle,
78
InputLikeStyleType,
89
LabelStyle,
@@ -73,7 +74,7 @@ const childrenMap = {
7374
...textInputChildren,
7475
viewRef: RefControl<InputRef>,
7576
allowClear: BoolControl.DEFAULT_TRUE,
76-
style: styleControl(InputLikeStyle),
77+
style: styleControl(InputFieldStyle),
7778
labelStyle:styleControl(LabelStyle),
7879
prefixIcon: IconControl,
7980
suffixIcon: IconControl,
@@ -87,6 +88,7 @@ const childrenMap = {
8788
autocompleteIconColor: dropdownControl(autocompleteIconColor, "blue"),
8889
componentSize: dropdownControl(componentSize, "small"),
8990
valueInItems: booleanExposingStateControl("valueInItems"),
91+
inputFieldStyle: styleControl(InputLikeStyle),
9092
};
9193

9294
const getValidate = (value: any): "" | "warning" | "error" | undefined => {
@@ -155,11 +157,11 @@ let AutoCompleteCompBase = (function () {
155157
<ConfigProvider
156158
theme={{
157159
token: {
158-
colorBgContainer: props.style.background,
159-
colorBorder: props.style.border,
160-
borderRadius: parseInt(props.style.radius),
161-
colorText: props.style.text,
162-
colorPrimary: props.style.accent,
160+
colorBgContainer: props.inputFieldStyle.background,
161+
colorBorder: props.inputFieldStyle.border,
162+
borderRadius: parseInt(props.inputFieldStyle.radius),
163+
colorText: props.inputFieldStyle.text,
164+
colorPrimary: props.inputFieldStyle.accent,
163165
controlHeight: componentSize === "small" ? 30 : 38,
164166
},
165167
}}
@@ -268,7 +270,7 @@ let AutoCompleteCompBase = (function () {
268270
ref={props.viewRef}
269271
placeholder={placeholder}
270272
allowClear={props.allowClear}
271-
$style={props.style}
273+
$style={props.inputFieldStyle}
272274
prefix={hasIcon(props.prefixIcon) && props.prefixIcon}
273275
suffix={hasIcon(props.suffixIcon) && props.suffixIcon}
274276
status={getValidate(validateState)}
@@ -279,7 +281,8 @@ let AutoCompleteCompBase = (function () {
279281
</>
280282
),
281283
style: props.style,
282-
labelStyle:props.labelStyle,
284+
labelStyle: props.labelStyle,
285+
inputFieldStyle:props.inputFieldStyle,
283286
...validateState,
284287
});
285288
})
@@ -341,6 +344,9 @@ let AutoCompleteCompBase = (function () {
341344
<Section name={sectionNames.labelStyle}>
342345
{children.labelStyle.getPropertyView()}
343346
</Section>
347+
<Section name={sectionNames.inputFieldStyle}>
348+
{children.inputFieldStyle.getPropertyView()}
349+
</Section>
344350
</>
345351
);
346352
})

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

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { UICompBuilder, withDefault } from "../../generators";
2020
import { CommonNameConfig, depsConfig, withExposingConfigs } from "../../generators/withExposing";
2121
import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants";
2222
import { styleControl } from "comps/controls/styleControl";
23-
import { DateTimeStyle, DateTimeStyleType, LabelStyle } from "comps/controls/styleControlConstants";
23+
import { DateTimeStyle, DateTimeStyleType, InputFieldStyle, LabelStyle } from "comps/controls/styleControlConstants";
2424
import { withMethodExposing } from "../../generators/withMethodExposing";
2525
import {
2626
disabledPropertyView,
@@ -71,11 +71,12 @@ const commonChildren = {
7171
hourStep: RangeControl.closed(1, 24, 1),
7272
minuteStep: RangeControl.closed(1, 60, 1),
7373
secondStep: RangeControl.closed(1, 60, 1),
74-
style: styleControl(DateTimeStyle),
74+
style: styleControl(InputFieldStyle),
7575
labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)),
7676
suffixIcon: withDefault(IconControl, "/icon:regular/calendar"),
7777
...validationChildren,
7878
viewRef: RefControl<CommonPickerMethods>,
79+
inputFieldStyle:styleControl(DateTimeStyle)
7980
};
8081
type CommonChildrenType = RecordConstructorToComp<typeof commonChildren>;
8182

@@ -166,12 +167,13 @@ export const datePickerControl = new UICompBuilder(childrenMap, (props) => {
166167
return props.label({
167168
required: props.required,
168169
style: props.style,
169-
labelStyle:props.labelStyle,
170+
labelStyle: props.labelStyle,
171+
inputFieldStyle:props.inputFieldStyle,
170172
children: (
171173
<DateUIView
172174
viewRef={props.viewRef}
173175
disabledTime={() => disabledTime(props.minTime, props.maxTime)}
174-
$style={props.style}
176+
$style={props.inputFieldStyle}
175177
disabled={props.disabled}
176178
{...datePickerProps(props)}
177179
minDate={props.minDate}
@@ -253,6 +255,9 @@ export const datePickerControl = new UICompBuilder(childrenMap, (props) => {
253255
<Section name={sectionNames.labelStyle}>
254256
{children.labelStyle.getPropertyView()}
255257
</Section>
258+
<Section name={sectionNames.inputFieldStyle}>
259+
{children.inputFieldStyle.getPropertyView()}
260+
</Section>
256261
</>
257262
)}
258263
</>
@@ -281,7 +286,7 @@ export const dateRangeControl = (function () {
281286
const children = (
282287
<DateRangeUIView
283288
viewRef={props.viewRef}
284-
$style={props.style}
289+
$style={props.inputFieldStyle}
285290
disabled={props.disabled}
286291
{...datePickerProps(props)}
287292
start={start.isValid() ? start : null}
@@ -319,6 +324,7 @@ export const dateRangeControl = (function () {
319324
style: props.style,
320325
labelStyle:props.labelStyle,
321326
children: children,
327+
inputFieldStyle:props.inputFieldStyle,
322328
...(startResult.validateStatus !== "success"
323329
? startResult
324330
: endResult.validateStatus !== "success"
@@ -383,6 +389,9 @@ export const dateRangeControl = (function () {
383389
<Section name={sectionNames.labelStyle}>
384390
{children.labelStyle.getPropertyView()}
385391
</Section>
392+
<Section name={sectionNames.inputFieldStyle}>
393+
{children.inputFieldStyle.getPropertyView()}
394+
</Section>
386395
</>
387396
)}
388397

‎client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,8 @@ export const getStyle = (style: DateTimeStyleType) => {
7373
&:not(.ant-picker-disabled) {
7474
border-color: ${style.border};
7575
background-color: ${style.background};
76+
border-width: ${style.borderWidth};
77+
border-style: ${style.borderStyle};
7678
7779
input {
7880
color: ${style.text};

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

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ import { formDataChildren, FormDataPropertyView } from "../formComp/formDataCons
3030
import { withMethodExposing, refMethods } from "../../generators/withMethodExposing";
3131
import { RefControl } from "../../controls/refControl";
3232
import { styleControl } from "comps/controls/styleControl";
33-
import { InputLikeStyle, InputLikeStyleType, LabelStyle, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
33+
import { InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
3434
import {
3535
disabledPropertyView,
3636
hiddenPropertyView,
@@ -257,10 +257,10 @@ const childrenMap = {
257257
allowNull: BoolControl,
258258
onEvent: InputEventHandlerControl,
259259
viewRef: RefControl<HTMLInputElement>,
260-
style: styleControl(InputLikeStyle),
260+
style: styleControl(InputFieldStyle),
261261
labelStyle:styleControl(LabelStyle),
262262
prefixIcon: IconControl,
263-
263+
inputFieldStyle:styleControl(InputLikeStyle),
264264
// validation
265265
required: BoolControl,
266266
min: UndefinedNumberControl,
@@ -322,7 +322,7 @@ const CustomInputNumber = (props: RecordConstructorToView<typeof childrenMap>) =
322322
placeholder={props.placeholder}
323323
stringMode={true}
324324
precision={props.precision}
325-
$style={props.style}
325+
$style={props.inputFieldStyle}
326326
prefix={hasIcon(props.prefixIcon) && props.prefixIcon}
327327
onPressEnter={() => {
328328
handleFinish();
@@ -381,7 +381,8 @@ let NumberInputTmpComp = (function () {
381381
required: props.required,
382382
children: <CustomInputNumber {...props} />,
383383
style: props.style,
384-
labelStyle:props.labelStyle,
384+
labelStyle: props.labelStyle,
385+
inputFieldStyle:props.inputFieldStyle,
385386
...validate(props),
386387
});
387388
})
@@ -436,6 +437,9 @@ let NumberInputTmpComp = (function () {
436437
<Section name={sectionNames.labelStyle}>
437438
{children.labelStyle.getPropertyView()}
438439
</Section>
440+
<Section name={sectionNames.inputFieldStyle}>
441+
{children.inputFieldStyle.getPropertyView()}
442+
</Section>
439443
</>
440444
)}
441445
</>

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ const RangeSliderBasicComp = (function () {
1616
return props.label({
1717
style: props.style,
1818
labelStyle: props.labelStyle,
19+
inputFieldStyle:props.inputFieldStyle,
1920
children: (
2021
<SliderWrapper
2122
onMouseDown={(e: any) => {
@@ -28,7 +29,7 @@ const RangeSliderBasicComp = (function () {
2829
{...props}
2930
range={true}
3031
value={[props.start.value, props.end.value]}
31-
$style={props.style}
32+
$style={props.inputFieldStyle}
3233
style={{ margin: 0 }}
3334
onChange={([start, end]) => {
3435
props.start.onChange(start);

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@ const SliderBasicComp = (function () {
1919
return new UICompBuilder(childrenMap, (props) => {
2020
return props.label({
2121
style: props.style,
22-
labelStyle:props.labelStyle,
22+
labelStyle: props.labelStyle,
23+
inputFieldStyle:props.inputFieldStyle,
2324
children: (
2425
<SliderWrapper
2526
onMouseDown={(e: any) => {
@@ -31,7 +32,7 @@ const SliderBasicComp = (function () {
3132
<SliderStyled
3233
{...props}
3334
value={props.value.value}
34-
$style={props.style}
35+
$style={props.inputFieldStyle}
3536
style={{margin: 0}}
3637
// FALK TODO : vertical={true}
3738
onChange={(e) => {

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { ChangeEventHandlerControl } from "../../controls/eventHandlerControl";
55
import { Section, sectionNames } from "lowcoder-design";
66
import { RecordConstructorToComp } from "lowcoder-core";
77
import { styleControl } from "comps/controls/styleControl";
8-
import { LabelStyle, SliderStyle, SliderStyleType } from "comps/controls/styleControlConstants";
8+
import { InputFieldStyle, LabelStyle, SliderStyle, SliderStyleType } from "comps/controls/styleControlConstants";
99
import styled, { css } from "styled-components";
1010
import { default as Slider } from "antd/es/slider";
1111
import { darkenColor, fadeColor } from "lowcoder-design";
@@ -67,10 +67,11 @@ export const SliderChildren = {
6767
label: LabelControl,
6868
disabled: BoolCodeControl,
6969
onEvent: ChangeEventHandlerControl,
70-
style: styleControl(SliderStyle),
70+
style: styleControl(InputFieldStyle),
7171
labelStyle:styleControl(LabelStyle.filter((style)=> ['accent','validate'].includes(style.name) === false)),
7272
prefixIcon: IconControl,
7373
suffixIcon: IconControl,
74+
inputFieldStyle:styleControl(SliderStyle)
7475
};
7576

7677
export const SliderPropertyView = (
@@ -101,6 +102,9 @@ export const SliderPropertyView = (
101102
<Section name={sectionNames.labelStyle}>
102103
{children.labelStyle.getPropertyView()}
103104
</Section>
105+
<Section name={sectionNames.inputFieldStyle}>
106+
{children.inputFieldStyle.getPropertyView()}
107+
</Section>
104108
</>
105109
)}
106110
</>

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

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { UICompBuilder, withDefault } from "../generators";
1010
import { CommonNameConfig, NameConfig, withExposingConfigs } from "../generators/withExposing";
1111
import { formDataChildren, FormDataPropertyView } from "./formComp/formDataConstants";
1212
import { styleControl } from "comps/controls/styleControl";
13-
import { LabelStyle, RatingStyle, RatingStyleType } from "comps/controls/styleControlConstants";
13+
import { InputFieldStyle, LabelStyle, RatingStyle, RatingStyleType } from "comps/controls/styleControlConstants";
1414
import { migrateOldData } from "comps/generators/simpleGenerators";
1515
import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
1616
import { trans } from "i18n";
@@ -43,8 +43,9 @@ const RatingBasicComp = (function () {
4343
allowHalf: BoolControl,
4444
disabled: BoolCodeControl,
4545
onEvent: eventHandlerControl(EventOptions),
46-
style: migrateOldData(styleControl(RatingStyle), fixOldData),
46+
style: styleControl(InputFieldStyle),
4747
labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)),
48+
inputFieldStyle:migrateOldData(styleControl(RatingStyle), fixOldData),
4849
...formDataChildren,
4950
};
5051
return new UICompBuilder(childrenMap, (props) => {
@@ -66,6 +67,7 @@ const RatingBasicComp = (function () {
6667
return props.label({
6768
style: props.style,
6869
labelStyle: props.labelStyle,
70+
inputFieldStyle:props.inputFieldStyle,
6971
children: (
7072
<RateStyled
7173
count={props.max}
@@ -76,7 +78,7 @@ const RatingBasicComp = (function () {
7678
}}
7779
allowHalf={props.allowHalf}
7880
disabled={props.disabled}
79-
$style={props.style}
81+
$style={props.inputFieldStyle}
8082
/>
8183
),
8284
});
@@ -119,6 +121,9 @@ const RatingBasicComp = (function () {
119121
<Section name={sectionNames.labelStyle}>
120122
{children.labelStyle.getPropertyView()}
121123
</Section>
124+
<Section name={sectionNames.inputFieldStyle}>
125+
{children.inputFieldStyle.getPropertyView()}
126+
</Section>
122127
</>
123128
)}
124129
</>

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@ let CascaderBasicComp = (function () {
2121
return new UICompBuilder(childrenMap, (props) => {
2222
return props.label({
2323
style: props.style,
24-
labelStyle:props.labelStyle,
24+
labelStyle: props.labelStyle,
25+
inputFieldStyle:props.inputFieldStyle,
2526
children: (
2627
<CascaderStyle
2728
ref={props.viewRef}
@@ -32,7 +33,7 @@ let CascaderBasicComp = (function () {
3233
allowClear={props.allowClear}
3334
placeholder={props.placeholder}
3435
showSearch={props.showSearch}
35-
$style={props.style}
36+
$style={props.inputFieldStyle}
3637
onFocus={() => props.onEvent("focus")}
3738
onBlur={() => props.onEvent("blur")}
3839
onChange={(value: (string | number)[]) => {

0 commit comments

Comments
 (0)