Skip to content

Commit ce067ec

Browse files
raheeliftikhar5raheeliftikhar5
authored
Merge pull request #891 from MenamAfzal/theme/setting
Theme/setting
2 parents 0864182 + 03b6355 commit ce067ec

File tree

11 files changed

+49
-43
lines changed

11 files changed

+49
-43
lines changed

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -257,10 +257,11 @@ const childrenMap = {
257257
allowNull: BoolControl,
258258
onEvent: InputEventHandlerControl,
259259
viewRef: RefControl<HTMLInputElement>,
260-
style: withDefault(styleControl(InputFieldStyle), {borderWidth: '1px'}),
261-
labelStyle: styleControl(LabelStyle),
260+
style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}) ,
261+
labelStyle:styleControl(LabelStyle),
262+
prefixText : stringExposingStateControl("defaultValue"),
262263
animationStyle: styleControl(AnimationStyle),
263-
prefixText: stringExposingStateControl('defaultValue'),
264+
264265
prefixIcon: IconControl,
265266
inputFieldStyle: withDefault(styleControl(InputLikeStyle), {borderWidth: '1px'}) ,
266267
// validation

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ export const SliderChildren = {
7171
label: LabelControl,
7272
disabled: BoolCodeControl,
7373
onEvent: ChangeEventHandlerControl,
74-
style: withDefault(styleControl(InputFieldStyle), {borderWidth: '1px'}),
74+
style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}) ,
7575
labelStyle:styleControl(LabelStyle.filter((style)=> ['accent','validate'].includes(style.name) === false)),
7676
prefixIcon: IconControl,
7777
suffixIcon: IconControl,

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ const RatingBasicComp = (function () {
4343
allowHalf: BoolControl,
4444
disabled: BoolCodeControl,
4545
onEvent: eventHandlerControl(EventOptions),
46-
style: withDefault(styleControl(InputFieldStyle), {borderWidth: '1px'}),
46+
style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}) ,
4747
animationStyle: styleControl(AnimationStyle),
4848
labelStyle: styleControl(
4949
LabelStyle.filter(

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

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -14,53 +14,53 @@ import { trans } from "i18n";
1414
import { fixOldInputCompData } from "../textInputComp/textInputConstants";
1515
import { migrateOldData } from "comps/generators/simpleGenerators";
1616

17-
const getStyle = (style: RadioStyleType) => {
17+
const getStyle = (style: RadioStyleType, inputFieldStyle?:RadioStyleType ) => {
1818
return css`
1919
.ant-radio-wrapper:not(.ant-radio-wrapper-disabled) {
20-
color: ${style.staticText};
20+
color: ${inputFieldStyle?.staticText};
2121
// height: 22px;
2222
max-width: calc(100% - 8px);
23-
padding: ${style.padding};
23+
padding: ${inputFieldStyle?.padding};
2424
span:not(.ant-radio) {
2525
${EllipsisTextCss};
26-
font-family:${style.fontFamily};
27-
font-size:${style.textSize};
28-
font-weight:${style.textWeight};
29-
font-style:${style.fontStyle};
30-
text-transform:${style.textTransform};
31-
text-decoration:${style.textDecoration};
26+
font-family:${inputFieldStyle?.fontFamily};
27+
font-size:${inputFieldStyle?.textSize};
28+
font-weight:${inputFieldStyle?.textWeight};
29+
font-style:${inputFieldStyle?.fontStyle};
30+
text-transform:${inputFieldStyle?.textTransform};
31+
text-decoration:${inputFieldStyle?.textDecoration};
3232
}
3333
3434
.ant-radio-checked {
3535
.ant-radio-inner {
36-
background-color: ${style.checkedBackground};
37-
border-color: ${style.checkedBackground};
36+
background-color: ${inputFieldStyle?.checkedBackground};
37+
border-color: ${inputFieldStyle?.uncheckedBorder};
3838
}
3939
4040
&::after {
41-
border-color: ${style.checkedBackground};
41+
border-color: ${inputFieldStyle?.uncheckedBorder};
4242
}
4343
}
4444
4545
.ant-radio-inner {
46-
background-color: ${style.uncheckedBackground};
47-
border-color: ${style.uncheckedBorder};
48-
border-width:${style.borderWidth};
46+
background-color: ${inputFieldStyle?.uncheckedBackground};
47+
border-color: ${inputFieldStyle?.uncheckedBorder};
48+
border-width:${inputFieldStyle?.borderWidth};
4949
&::after {
50-
background-color: ${style.checked};
50+
background-color: ${inputFieldStyle?.checked};
5151
}
5252
}
5353
5454
&:hover .ant-radio-inner,
5555
.ant-radio:hover .ant-radio-inner,
5656
.ant-radio-input + ant-radio-inner {
57-
background-color:${style.hoverBackground ? style.hoverBackground:'#ffff'};
57+
background-color:${inputFieldStyle?.hoverBackground ? inputFieldStyle?.hoverBackground:'#ffff'};
5858
}
5959
6060
&:hover .ant-radio-inner,
6161
.ant-radio:hover .ant-radio-inner,
6262
.ant-radio-input:focus + .ant-radio-inner {
63-
border-color: ${style.checkedBackground};
63+
border-color: ${inputFieldStyle?.uncheckedBorder};
6464
}
6565
}
6666
`;
@@ -69,11 +69,12 @@ const getStyle = (style: RadioStyleType) => {
6969
const Radio = styled(AntdRadioGroup)<{
7070
$style: RadioStyleType;
7171
$layout: ValueFromOption<typeof RadioLayoutOptions>;
72+
$inputFieldStyle:RadioStyleType
7273
}>`
7374
width: 100%;
7475
min-height: 32px;
7576
76-
${(props) => props.$style && getStyle(props.$style)}
77+
${(props) => props.$style && getStyle(props.$style, props.$inputFieldStyle)}
7778
${(props) => {
7879
if (props.$layout === "horizontal") {
7980
return css`
@@ -113,6 +114,7 @@ let RadioBasicComp = (function () {
113114
disabled={props.disabled}
114115
value={props.value.value}
115116
$style={props.style}
117+
$inputFieldStyle={props.inputFieldStyle}
116118
$layout={props.layout}
117119
onChange={(e) => {
118120
handleChange(e.target.value);

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import { RefControl } from "comps/controls/refControl";
2222

2323
import { useContext } from "react";
2424
import { EditorContext } from "comps/editorState";
25+
import { withDefault } from "@lowcoder-ee/index.sdk";
2526

2627
export const RadioLayoutOptions = [
2728
{ label: trans("radio.horizontal"), value: "horizontal" },
@@ -40,7 +41,7 @@ export const RadioChildrenMap = {
4041
labelStyle:styleControl(LabelStyle),
4142
layout: dropdownControl(RadioLayoutOptions, "horizontal"),
4243
viewRef: RefControl<HTMLDivElement>,
43-
inputFieldStyle: styleControl(RadioStyle),
44+
inputFieldStyle:withDefault(styleControl(RadioStyle),{borderWidth: '1px'}),
4445
animationStyle: styleControl(AnimationStyle),
4546
...SelectInputValidationChildren,
4647
...formDataChildren,

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,6 @@ 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;
31-
font-family: ${style.fontFamily} !important;
32-
font-style:${style.fontStyle} !important;
3329
text-transform:${style.textTransform} !important;
3430
text-decoration:${style.textDecoration} !important;
3531
background-color: ${style.background};
@@ -40,6 +36,9 @@ const getStyle = (style: TextStyleType) => {
4036
margin: ${style.margin} !important;
4137
padding: ${style.padding};
4238
width: ${widthCalculator(style.margin)};
39+
font-family: ${style.fontFamily} !important;
40+
font-style:${style.fontStyle} !important;
41+
font-size: ${style.textSize} !important;
4342
// height: ${heightCalculator(style.margin)};
4443
h1 {
4544
line-height: 1.5;
@@ -60,6 +59,7 @@ const getStyle = (style: TextStyleType) => {
6059
h5,
6160
h6 {
6261
color: ${style.text};
62+
font-weight: ${style.textWeight} !important;
6363
}
6464
img,
6565
pre {

‎client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,11 +49,11 @@ const childrenMap = {
4949
viewRef: RefControl<InputRef>,
5050
showCount: BoolControl,
5151
allowClear: BoolControl,
52-
style: withDefault(styleControl(InputFieldStyle), {borderWidth: '1px'}),
53-
labelStyle: styleControl(LabelStyle),
52+
style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}) ,
53+
labelStyle:styleControl(LabelStyle),
5454
prefixIcon: IconControl,
5555
suffixIcon: IconControl,
56-
inputFieldStyle: styleControl(InputLikeStyle),
56+
inputFieldStyle:withDefault(styleControl(InputLikeStyle),{borderWidth: '1px'}) ,
5757
animationStyle: styleControl(AnimationStyle),
5858
};
5959

‎client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -57,10 +57,10 @@ let PasswordTmpComp = (function () {
5757
validationType: dropdownControl(TextInputValidationOptions, "Regex"),
5858
visibilityToggle: BoolControl.DEFAULT_TRUE,
5959
prefixIcon: IconControl,
60-
style: withDefault(styleControl(InputFieldStyle), {borderWidth: '1px'}),
60+
style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}) ,
6161
labelStyle: styleControl(LabelStyle),
62-
inputFieldStyle: styleControl(InputLikeStyle),
63-
animationStyle: styleControl(AnimationStyle),
62+
inputFieldStyle: withDefault(styleControl(InputLikeStyle),{borderWidth: '1px'}),
63+
animationStyle: styleControl(AnimationStyle),
6464
};
6565
return new UICompBuilder(childrenMap, (props) => {
6666
const [inputProps, validateState] = useTextInputProps(props);

‎client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,9 +71,9 @@ let TextAreaTmpComp = (function () {
7171
viewRef: RefControl<TextAreaRef>,
7272
allowClear: BoolControl,
7373
autoHeight: withDefault(AutoHeightControl, "fixed"),
74-
style: withDefault(styleControl(InputFieldStyle), {borderWidth: '1px'}),
74+
style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}) ,
7575
labelStyle: styleControl(LabelStyle),
76-
inputFieldStyle: styleControl(InputLikeStyle),
76+
inputFieldStyle: withDefault(styleControl(InputLikeStyle), {borderWidth: '1px'}),
7777
animationStyle: styleControl(AnimationStyle)
7878
};
7979
return new UICompBuilder(childrenMap, (props) => {

‎client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ const childrenMap = {
6565
allowClear: BoolControl,
6666
showSearch: BoolControl.DEFAULT_TRUE,
6767
inputValue: stateComp<string>(""), // search value
68-
style: withDefault(styleControl(InputFieldStyle), {borderWidth: '1px'}),
68+
style:styleControl(InputFieldStyle),
6969
labelStyle:styleControl(LabelStyle),
7070
inputFieldStyle: withDefault(styleControl(TreeSelectStyle), {borderWidth: '1px'}),
7171
viewRef: RefControl<BaseSelectRef>,

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -563,7 +563,8 @@ const HOVER_BACKGROUND_COLOR = {
563563
name: "hoverBackground",
564564
label: trans("style.hoverBackground"),
565565
hoverBackground: "hoverBackground",
566-
};
566+
color: SECOND_SURFACE_COLOR,
567+
}
567568

568569
const FONT_FAMILY = {
569570
name: "fontFamily",
@@ -768,8 +769,8 @@ function replaceAndMergeMultipleStyles(
768769
}
769770

770771
export const ButtonStyle = [
771-
getBackground(),
772-
...STYLING_FIELDS_SEQUENCE,
772+
getBackground('primary'),
773+
...STYLING_FIELDS_SEQUENCE
773774
] as const;
774775

775776
export const ToggleButtonStyle = [
@@ -1111,7 +1112,7 @@ export const LabelStyle = [
11111112
];
11121113

11131114
export const InputFieldStyle = [
1114-
getStaticBackground(SURFACE_COLOR),
1115+
getBackground(),
11151116
getStaticBorder(),
11161117
...STYLING_FIELDS_CONTAINER_SEQUENCE.filter(
11171118
(style) => ["border"].includes(style.name) === false
@@ -1199,7 +1200,7 @@ export const MultiSelectStyle = [
11991200

12001201
export const ChildrenMultiSelectStyle = [
12011202
...STYLING_FIELDS_SEQUENCE,
1202-
getStaticBackground(SURFACE_COLOR),
1203+
getBackground()
12031204
] as const;
12041205

12051206
export const TabContainerStyle = [
@@ -1266,6 +1267,7 @@ function checkAndUncheck() {
12661267
name: "uncheckedBorder",
12671268
label: trans("style.uncheckedBorder"),
12681269
depName: "uncheckedBackground",
1270+
color:SECOND_SURFACE_COLOR,
12691271
transformer: backgroundToBorder,
12701272
},
12711273
] as const;

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy