Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 5da6e7a

Browse files
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);

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /