From 4cc299e4c9944f0529693136ad5e5a72b3548fe1 Mon Sep 17 00:00:00 2001 From: FARAN Date: Thu, 26 Jun 2025 16:53:42 +0500 Subject: [PATCH 01/12] fix linter errrors --- .../comps/buttonComp/buttonCompConstants.tsx | 16 +++++++++------- .../src/comps/controls/styleControlConstants.tsx | 2 +- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx index 7a54ba4280..686e12176d 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx @@ -73,13 +73,15 @@ export const ButtonCompWrapper = styled.div<{ $disabled: boolean }>` // The button component is disabled but can respond to drag & select events ${(props) => - props.$disabled && - ` - cursor: not-allowed; - button:disabled { - pointer-events: none; - } - `}; + props.$disabled + ? ` + cursor: not-allowed; + button:disabled { + pointer-events: none; + } + ` + : "" + } `; /** diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 92b64b7eb4..3025af6666 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -961,7 +961,7 @@ function replaceAndMergeMultipleStyles( export const ButtonStyle = [ getBackground('primary'), - ...STYLING_FIELDS_SEQUENCE.filter(style=>style.name!=='lineHeight'), + ...STYLING_FIELDS_SEQUENCE, ] as const; export const DropdownStyle = [ From 2e0ec4091b2cb51ecc28aed8bd51d2a5a97a4153 Mon Sep 17 00:00:00 2001 From: FARAN Date: Thu, 26 Jun 2025 17:25:28 +0500 Subject: [PATCH 02/12] add button disabled styles --- .../comps/buttonComp/buttonCompConstants.tsx | 11 +++++++ .../comps/comps/buttonComp/scannerComp.tsx | 5 ++-- .../comps/controls/styleControlConstants.tsx | 30 +++++++++++++++++++ .../packages/lowcoder/src/i18n/locales/en.ts | 3 ++ 4 files changed, 46 insertions(+), 3 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx index 686e12176d..c857a9cc10 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx @@ -48,6 +48,17 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) { : buttonStyle.border} !important; } } + + /* Disabled state styling */ + &:disabled, + &.ant-btn-disabled { + color: ${buttonStyle.disabledText || buttonStyle.text}; + background: ${buttonStyle.disabledBackground || buttonStyle.background}; + border-color: ${ + buttonStyle.disabledBorder || buttonStyle.border + } !important; + cursor: not-allowed; + } } `; } diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx index 811ed91be3..a4ecd85a6c 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx @@ -4,11 +4,10 @@ import { Button100, ButtonCompWrapper, buttonRefMethods, + ButtonStyleControl, } from "comps/comps/buttonComp/buttonCompConstants"; import { BoolCodeControl, StringControl } from "comps/controls/codeControl"; import { ScannerEventHandlerControl } from "comps/controls/eventHandlerControl"; -import { styleControl } from "comps/controls/styleControl"; -import { DropdownStyle } from "comps/controls/styleControlConstants"; import { withDefault } from "comps/generators"; import { UICompBuilder } from "comps/generators/uiCompBuilder"; import { CustomModal, Section, sectionNames } from "lowcoder-design"; @@ -127,7 +126,7 @@ const ScannerTmpComp = (function () { maskClosable: withDefault(BoolControl, true), onEvent: ScannerEventHandlerControl, disabled: BoolCodeControl, - style: styleControl(DropdownStyle, "style"), + style: ButtonStyleControl, viewRef: RefControl, }; return new UICompBuilder(childrenMap, (props) => { diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 3025af6666..d6670b6f5f 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -959,9 +959,39 @@ function replaceAndMergeMultipleStyles( return temp; } +// Add disabled style constants +const DISABLED_BACKGROUND = { + name: "disabledBackground", + label: trans("style.disabledBackground"), + color: SECOND_SURFACE_COLOR, +} as const; + +const DISABLED_BORDER = { + name: "disabledBorder", + label: trans("style.disabledBorder"), + depName: "disabledBackground", + transformer: backgroundToBorder, +} as const; + +const DISABLED_TEXT = { + name: "disabledText", + label: trans("style.disabledText"), + depName: "disabledBackground", + depType: DEP_TYPE.CONTRAST_TEXT, + transformer: contrastText, +} as const; + +// Re-export for reuse in other components if needed +export const DISABLED_STYLE_FIELDS = [ + DISABLED_BACKGROUND, + DISABLED_BORDER, + DISABLED_TEXT, +] as const; + export const ButtonStyle = [ getBackground('primary'), ...STYLING_FIELDS_SEQUENCE, + ...DISABLED_STYLE_FIELDS, ] as const; export const DropdownStyle = [ diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index 44f5f4b1dd..b8836cb4df 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -511,6 +511,9 @@ export const en = { "tabAccent": "Tab Accent", "checkedBackground": "Checked Background Color", "uncheckedBackground": "Unchecked Background Color", + "disabledBackground": "Disabled Background Color", + "disabledBorder": "Disabled Border Color", + "disabledText": "Disabled Text Color", "uncheckedBorder": "Unchecked Border Color", "indicatorBackground": "Indicator Background Color", "tableCellText": "Cell Text", From ede27eb1304d6bbb9095d1aa057d13faee3e3bfc Mon Sep 17 00:00:00 2001 From: FARAN Date: Thu, 26 Jun 2025 17:40:59 +0500 Subject: [PATCH 03/12] add disabled styles for togglebtn --- .../lowcoder/src/comps/controls/styleControlConstants.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index d6670b6f5f..6d7af22ef9 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -1013,6 +1013,7 @@ export const ToggleButtonStyle = [ ...style, }; }), + ...DISABLED_STYLE_FIELDS, ] as const; export const TextStyle = [ From 59452d208fc6b2da4878188f2a1fe92b8ddd88b8 Mon Sep 17 00:00:00 2001 From: FARAN Date: Thu, 26 Jun 2025 18:06:56 +0500 Subject: [PATCH 04/12] make a seperate section for disabled --- .../src/comps/comps/buttonComp/buttonComp.tsx | 4 ++++ .../comps/buttonComp/buttonCompConstants.tsx | 21 ++++++++++++------- .../comps/controls/styleControlConstants.tsx | 6 +++++- 3 files changed, 23 insertions(+), 8 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx index 70a8de5d83..7c2775e0ed 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx @@ -21,6 +21,7 @@ import { ButtonCompWrapper, buttonRefMethods, ButtonStyleControl, + DisabledButtonStyleControl, } from "./buttonCompConstants"; import { RefControl } from "comps/controls/refControl"; import { Tooltip } from "antd"; @@ -133,6 +134,7 @@ const childrenMap = { prefixIcon: IconControl, suffixIcon: IconControl, style: ButtonStyleControl, + disabledStyle: DisabledButtonStyleControl, animationStyle: styleControl(AnimationStyle, 'animationStyle'), viewRef: RefControl, tooltip: StringControl @@ -173,6 +175,7 @@ const ButtonPropertyView = React.memo((props: { {props.children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
{props.children.style.getPropertyView()}
+
{props.children.disabledStyle.getPropertyView()}
)} @@ -212,6 +215,7 @@ const ButtonView = React.memo((props: ToViewReturn) => { ` - ${(props) => props.$buttonStyle && getButtonStyle(props.$buttonStyle)} +export const Button100 = styled(Button)<{ + $buttonStyle?: ButtonStyleType; + $disabledStyle?: any; +}>` + ${(props) => props.$buttonStyle && getButtonStyle(props.$buttonStyle, props.$disabledStyle)} width: 100%; height: auto; display: inline-flex; @@ -116,6 +119,10 @@ function fixOldData(oldData: any) { const ButtonTmpStyleControl = styleControl(ButtonStyle, 'style'); export const ButtonStyleControl = migrateOldData(ButtonTmpStyleControl, fixOldData); +// Create disabled style control +const DisabledButtonTmpStyleControl = styleControl(DisabledButtonStyle, 'disabledStyle'); +export const DisabledButtonStyleControl = migrateOldData(DisabledButtonTmpStyleControl, fixOldData); + export const buttonRefMethods = refMethods([ focusWithOptions, blurMethod, diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 6d7af22ef9..9e808f913d 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -991,6 +991,10 @@ export const DISABLED_STYLE_FIELDS = [ export const ButtonStyle = [ getBackground('primary'), ...STYLING_FIELDS_SEQUENCE, +] as const; + +// Create separate disabled style control +export const DisabledButtonStyle = [ ...DISABLED_STYLE_FIELDS, ] as const; @@ -1013,7 +1017,6 @@ export const ToggleButtonStyle = [ ...style, }; }), - ...DISABLED_STYLE_FIELDS, ] as const; export const TextStyle = [ @@ -2321,6 +2324,7 @@ export type InputFieldStyleType = StyleConfigType; export type SignatureContainerStyleType = StyleConfigType; export type ColorPickerStyleType = StyleConfigType; export type ButtonStyleType = StyleConfigType; +export type DisabledButtonStyleType = StyleConfigType; export type ToggleButtonStyleType = StyleConfigType; export type TextStyleType = StyleConfigType; export type TextContainerStyleType = StyleConfigType; From 864a887ff3afaa15da7573e8f97886c04b3786c3 Mon Sep 17 00:00:00 2001 From: FARAN Date: Thu, 26 Jun 2025 18:26:10 +0500 Subject: [PATCH 05/12] add disabled styles for toggled button --- .../lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx index 0184fb87ac..f9ee2f089e 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx @@ -12,7 +12,7 @@ import { trans } from "i18n"; import styled from "styled-components"; import { ChangeEventHandlerControl } from "../../controls/eventHandlerControl"; import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing"; -import { Button100, ButtonCompWrapper, buttonRefMethods } from "./buttonCompConstants"; +import { Button100, ButtonCompWrapper, buttonRefMethods, DisabledButtonStyleControl } from "./buttonCompConstants"; import { IconControl } from "comps/controls/iconControl"; import { AlignWithStretchControl, LeftRightControl } from "comps/controls/dropdownControl"; import { booleanExposingStateControl } from "comps/controls/codeStateControl"; @@ -63,6 +63,7 @@ const ToggleTmpComp = (function () { iconPosition: LeftRightControl, alignment: AlignWithStretchControl, style: styleControl(ToggleButtonStyle , 'style'), + disabledStyle: DisabledButtonStyleControl, animationStyle: styleControl(AnimationStyle , 'animationStyle'), showBorder: withDefault(BoolControl, true), viewRef: RefControl, @@ -84,6 +85,7 @@ const ToggleTmpComp = (function () { { @@ -153,6 +155,7 @@ const ToggleTmpComp = (function () { )} +
{children.disabledStyle.getPropertyView()}
)) .setExposeMethodConfigs(buttonRefMethods) From 56e71f6155f5c1758629b712f76359a7ba73eea3 Mon Sep 17 00:00:00 2001 From: FARAN Date: Thu, 26 Jun 2025 19:26:18 +0500 Subject: [PATCH 06/12] add disabled input styles --- .../comps/numberInputComp/numberInputComp.tsx | 33 +++++++++++++++-- .../comps/comps/textInputComp/inputComp.tsx | 19 ++++++++-- .../comps/textInputComp/passwordComp.tsx | 15 +++++++- .../comps/textInputComp/textAreaComp.tsx | 15 +++++++- .../comps/controls/styleControlConstants.tsx | 35 +++++++++++++++++++ 5 files changed, 111 insertions(+), 6 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx index 7dbacf9005..ae81a01ce6 100644 --- a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx @@ -30,7 +30,7 @@ import { formDataChildren, FormDataPropertyView } from "../formComp/formDataCons import { withMethodExposing, refMethods } from "../../generators/withMethodExposing"; import { RefControl } from "../../controls/refControl"; import { styleControl } from "comps/controls/styleControl"; -import { AnimationStyle, InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; +import { AnimationStyle, InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle, DisabledInputStyle, DisabledInputStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; import { disabledPropertyView, hiddenPropertyView, @@ -59,7 +59,6 @@ const getStyle = (style: InputLikeStyleType) => { return css` border-radius: ${style.radius}; border-width:${style.borderWidth} !important; - // line-height: ${style.lineHeight} !important; // still use antd style when disabled &:not(.ant-input-number-disabled) { color: ${style.text}; @@ -122,11 +121,36 @@ const getStyle = (style: InputLikeStyleType) => { const InputNumber = styled(AntdInputNumber)<{ $style: InputLikeStyleType; + $disabledStyle?: DisabledInputStyleType; }>` box-shadow: ${(props) => `${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`}; width: 100%; ${(props) => props.$style && getStyle(props.$style)} + + /* Disabled state styling */ + &:disabled, + &.ant-input-number-disabled { + color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important; + background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important; + border-color: ${(props) => props.$disabledStyle?.disabledBorder || props.$style.border} !important; + cursor: not-allowed; + + .ant-input-number-input { + color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important; + background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important; + } + + .ant-input-number-handler-wrap { + background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important; + border-color: ${(props) => props.$disabledStyle?.disabledBorder || props.$style.border} !important; + + .ant-input-number-handler span { + color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important; + opacity: 0.3; + } + } + } `; const FormatterOptions = [ @@ -266,6 +290,7 @@ const childrenMap = { animationStyle: styleControl(AnimationStyle , 'animationStyle'), prefixIcon: IconControl, inputFieldStyle: styleControl(InputLikeStyle , 'inputFieldStyle'), + disabledInputStyle: styleControl(DisabledInputStyle, 'disabledInputStyle'), // validation required: BoolControl, showValidationWhenEmpty: BoolControl, @@ -382,6 +407,7 @@ const CustomInputNumber = (props: RecordConstructorToView) = stringMode={true} precision={props.precision} $style={props.inputFieldStyle} + $disabledStyle={props.disabledInputStyle} prefix={hasIcon(props.prefixIcon) ? props.prefixIcon : props.prefixText.value} tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined} onPressEnter={() => { @@ -473,6 +499,9 @@ let NumberInputTmpComp = (function () {
{children.inputFieldStyle.getPropertyView()}
+
+ {children.disabledInputStyle.getPropertyView()} +
{children.animationStyle.getPropertyView()}
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx index cfbdfe0428..2aebed4335 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx @@ -1,7 +1,7 @@ import { Input, Section, sectionNames } from "lowcoder-design"; import { BoolControl } from "comps/controls/boolControl"; import { styleControl } from "comps/controls/styleControl"; -import { AnimationStyle, InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle, LabelStyleType } from "comps/controls/styleControlConstants"; +import { AnimationStyle, InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle, LabelStyleType, DisabledInputStyle, DisabledInputStyleType } from "comps/controls/styleControlConstants"; import { NameConfig, NameConfigPlaceHolder, @@ -42,10 +42,22 @@ import { EditorContext } from "comps/editorState"; * Input Comp */ -const InputStyle = styled(Input)<{$style: InputLikeStyleType}>` +const InputStyle = styled(Input)<{ + $style: InputLikeStyleType; + $disabledStyle?: DisabledInputStyleType; +}>` box-shadow: ${(props) => `${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`}; ${(props) => props.$style && getStyle(props.$style)} + + /* Disabled state styling */ + &:disabled, + &.ant-input-disabled { + color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important; + background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important; + border-color: ${(props) => props.$disabledStyle?.disabledBorder || props.$style.border} !important; + cursor: not-allowed; + } `; const childrenMap = { @@ -59,6 +71,7 @@ const childrenMap = { suffixIcon: IconControl, inputFieldStyle: styleControl(InputLikeStyle, 'inputFieldStyle'), animationStyle: styleControl(AnimationStyle, 'animationStyle'), + disabledInputStyle: styleControl(DisabledInputStyle, 'disabledInputStyle'), tabIndex: NumberControl, }; @@ -73,6 +86,7 @@ let InputBasicComp = new UICompBuilder(childrenMap, (props) => { showCount={props.showCount} allowClear={props.allowClear} $style={props.inputFieldStyle} + $disabledStyle={props.disabledInputStyle} prefix={hasIcon(props.prefixIcon) && props.prefixIcon} suffix={hasIcon(props.suffixIcon) && props.suffixIcon} tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined} @@ -114,6 +128,7 @@ let InputBasicComp = new UICompBuilder(childrenMap, (props) => {
{children.style.getPropertyView()}
{children.labelStyle.getPropertyView()}
{children.inputFieldStyle.getPropertyView()}
+
{children.disabledInputStyle.getPropertyView()}
{children.animationStyle.getPropertyView()}
)} diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx index 4347043874..15b4352f58 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx @@ -26,7 +26,7 @@ import { import { withMethodExposing } from "../../generators/withMethodExposing"; import { styleControl } from "comps/controls/styleControl"; import styled from "styled-components"; -import { AnimationStyle, InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle } from "comps/controls/styleControlConstants"; +import { AnimationStyle, InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle, DisabledInputStyle, DisabledInputStyleType } from "comps/controls/styleControlConstants"; import { hiddenPropertyView, minLengthPropertyView, @@ -46,10 +46,20 @@ import { NumberControl } from "comps/controls/codeControl"; const PasswordStyle = styled(InputPassword)<{ $style: InputLikeStyleType; + $disabledStyle?: DisabledInputStyleType; }>` box-shadow: ${(props) => `${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`}; ${(props) => props.$style && getStyle(props.$style)} + + /* Disabled state styling */ + &:disabled, + &.ant-input-disabled { + color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important; + background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important; + border-color: ${(props) => props.$disabledStyle?.disabledBorder || props.$style.border} !important; + cursor: not-allowed; + } `; let PasswordTmpComp = (function () { @@ -64,6 +74,7 @@ let PasswordTmpComp = (function () { labelStyle: styleControl(LabelStyle,'labelStyle'), inputFieldStyle: styleControl(InputLikeStyle , 'inputFieldStyle'), animationStyle: styleControl(AnimationStyle , 'animationStyle'), + disabledInputStyle: styleControl(DisabledInputStyle, 'disabledInputStyle'), tabIndex: NumberControl, }; return new UICompBuilder(childrenMap, (props, dispatch) => { @@ -78,6 +89,7 @@ let PasswordTmpComp = (function () { ref={props.viewRef} visibilityToggle={props.visibilityToggle} $style={props.inputFieldStyle} + $disabledStyle={props.disabledInputStyle} tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined} /> ), @@ -124,6 +136,7 @@ let PasswordTmpComp = (function () {
{children.style.getPropertyView()}
{children.labelStyle.getPropertyView()}
{children.inputFieldStyle.getPropertyView()}
+
{children.disabledInputStyle.getPropertyView()}
{children.animationStyle.getPropertyView()}
)} diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx index c8a7582eb8..cf1b6575f7 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx @@ -22,7 +22,7 @@ import { import { withMethodExposing, refMethods } from "../../generators/withMethodExposing"; import { styleControl } from "comps/controls/styleControl"; import styled from "styled-components"; -import { AnimationStyle, InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle } from "comps/controls/styleControlConstants"; +import { AnimationStyle, InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle, DisabledInputStyle, DisabledInputStyleType } from "comps/controls/styleControlConstants"; import { TextArea } from "components/TextArea"; import { allowClearPropertyView, @@ -41,10 +41,20 @@ import { migrateOldData } from "comps/generators/simpleGenerators"; const TextAreaStyled = styled(TextArea)<{ $style: InputLikeStyleType; + $disabledStyle?: DisabledInputStyleType; }>` box-shadow: ${(props) => `${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`}; ${(props) => props.$style && getStyle(props.$style)} + + /* Disabled state styling */ + &:disabled, + &.ant-input-disabled { + color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important; + background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important; + border-color: ${(props) => props.$disabledStyle?.disabledBorder || props.$style.border} !important; + cursor: not-allowed; + } `; const Wrapper = styled.div<{ @@ -82,6 +92,7 @@ let TextAreaTmpComp = (function () { textAreaScrollBar: withDefault(BoolControl, false), inputFieldStyle: styleControl(InputLikeStyle , 'inputFieldStyle'), animationStyle: styleControl(AnimationStyle, 'animationStyle'), + disabledInputStyle: styleControl(DisabledInputStyle, 'disabledInputStyle'), tabIndex: NumberControl }; return new UICompBuilder(childrenMap, (props) => { @@ -98,6 +109,7 @@ let TextAreaTmpComp = (function () { allowClear={props.allowClear} style={{ height: "100% !important", resize: "vertical" }} $style={props.inputFieldStyle} + $disabledStyle={props.disabledInputStyle} tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined} /> @@ -141,6 +153,7 @@ let TextAreaTmpComp = (function () {
{children.style.getPropertyView()}
{children.labelStyle.getPropertyView()}
{children.inputFieldStyle.getPropertyView()}
+
{children.disabledInputStyle.getPropertyView()}
{children.animationStyle.getPropertyView()}
)} diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 9e808f913d..a6f4feb2a7 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -988,6 +988,35 @@ export const DISABLED_STYLE_FIELDS = [ DISABLED_TEXT, ] as const; +// Add disabled style constants specifically for text input components +const DISABLED_INPUT_BACKGROUND = { + name: "disabledBackground", + label: trans("style.disabledBackground"), + color: SECOND_SURFACE_COLOR, +} as const; + +const DISABLED_INPUT_BORDER = { + name: "disabledBorder", + label: trans("style.disabledBorder"), + depName: "disabledInputBackground", + transformer: backgroundToBorder, +} as const; + +const DISABLED_INPUT_TEXT = { + name: "disabledText", + label: trans("style.disabledText"), + depName: "disabledInputBackground", + depType: DEP_TYPE.CONTRAST_TEXT, + transformer: contrastText, +} as const; + +// Re-export for reuse in textInput components +export const DISABLED_INPUT_STYLE_FIELDS = [ + DISABLED_INPUT_BACKGROUND, + DISABLED_INPUT_BORDER, + DISABLED_INPUT_TEXT, +] as const; + export const ButtonStyle = [ getBackground('primary'), ...STYLING_FIELDS_SEQUENCE, @@ -1259,6 +1288,11 @@ export const InputLikeStyle = [ ...ACCENT_VALIDATE, ] as const; +// Create separate disabled style control for text inputs +export const DisabledInputStyle = [ + ...DISABLED_INPUT_STYLE_FIELDS, +] as const; + // added by Mousheng export const ColorPickerStyle = [ @@ -2325,6 +2359,7 @@ export type SignatureContainerStyleType = StyleConfigType; export type ButtonStyleType = StyleConfigType; export type DisabledButtonStyleType = StyleConfigType; +export type DisabledInputStyleType = StyleConfigType; export type ToggleButtonStyleType = StyleConfigType; export type TextStyleType = StyleConfigType; export type TextContainerStyleType = StyleConfigType; From 9ad28bb706d06eae0e9ef8176fa716f7e83969b9 Mon Sep 17 00:00:00 2001 From: FARAN Date: Thu, 26 Jun 2025 19:56:11 +0500 Subject: [PATCH 07/12] remove border styles from disables --- .../comps/buttonComp/buttonCompConstants.tsx | 3 --- .../comps/numberInputComp/numberInputComp.tsx | 10 ---------- .../src/comps/comps/textInputComp/inputComp.tsx | 1 - .../comps/comps/textInputComp/passwordComp.tsx | 1 - .../comps/comps/textInputComp/textAreaComp.tsx | 1 - .../src/comps/controls/styleControlConstants.tsx | 15 +-------------- 6 files changed, 1 insertion(+), 30 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx index 973f0dc62e..cc907ee1d4 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx @@ -54,9 +54,6 @@ export function getButtonStyle(buttonStyle: ButtonStyleType, disabledStyle?: any &.ant-btn-disabled { color: ${disabledStyle?.disabledText || buttonStyle.text}; background: ${disabledStyle?.disabledBackground || buttonStyle.background}; - border-color: ${ - disabledStyle?.disabledBorder || buttonStyle.border - } !important; cursor: not-allowed; } } diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx index ae81a01ce6..bd14c7f647 100644 --- a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx @@ -133,7 +133,6 @@ const InputNumber = styled(AntdInputNumber)<{ &.ant-input-number-disabled { color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important; background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important; - border-color: ${(props) => props.$disabledStyle?.disabledBorder || props.$style.border} !important; cursor: not-allowed; .ant-input-number-input { @@ -141,15 +140,6 @@ const InputNumber = styled(AntdInputNumber)<{ background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important; } - .ant-input-number-handler-wrap { - background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important; - border-color: ${(props) => props.$disabledStyle?.disabledBorder || props.$style.border} !important; - - .ant-input-number-handler span { - color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important; - opacity: 0.3; - } - } } `; diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx index 2aebed4335..a8cfd8bfb5 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx @@ -55,7 +55,6 @@ const InputStyle = styled(Input)<{ &.ant-input-disabled { color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important; background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important; - border-color: ${(props) => props.$disabledStyle?.disabledBorder || props.$style.border} !important; cursor: not-allowed; } `; diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx index 15b4352f58..62eaddd8e7 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx @@ -57,7 +57,6 @@ const PasswordStyle = styled(InputPassword)<{ &.ant-input-disabled { color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important; background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important; - border-color: ${(props) => props.$disabledStyle?.disabledBorder || props.$style.border} !important; cursor: not-allowed; } `; diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx index cf1b6575f7..a0121743c6 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx @@ -52,7 +52,6 @@ const TextAreaStyled = styled(TextArea)<{ &.ant-input-disabled { color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important; background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important; - border-color: ${(props) => props.$disabledStyle?.disabledBorder || props.$style.border} !important; cursor: not-allowed; } `; diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index a6f4feb2a7..5523755596 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -966,12 +966,7 @@ const DISABLED_BACKGROUND = { color: SECOND_SURFACE_COLOR, } as const; -const DISABLED_BORDER = { - name: "disabledBorder", - label: trans("style.disabledBorder"), - depName: "disabledBackground", - transformer: backgroundToBorder, -} as const; + const DISABLED_TEXT = { name: "disabledText", @@ -984,7 +979,6 @@ const DISABLED_TEXT = { // Re-export for reuse in other components if needed export const DISABLED_STYLE_FIELDS = [ DISABLED_BACKGROUND, - DISABLED_BORDER, DISABLED_TEXT, ] as const; @@ -995,12 +989,6 @@ const DISABLED_INPUT_BACKGROUND = { color: SECOND_SURFACE_COLOR, } as const; -const DISABLED_INPUT_BORDER = { - name: "disabledBorder", - label: trans("style.disabledBorder"), - depName: "disabledInputBackground", - transformer: backgroundToBorder, -} as const; const DISABLED_INPUT_TEXT = { name: "disabledText", @@ -1013,7 +1001,6 @@ const DISABLED_INPUT_TEXT = { // Re-export for reuse in textInput components export const DISABLED_INPUT_STYLE_FIELDS = [ DISABLED_INPUT_BACKGROUND, - DISABLED_INPUT_BORDER, DISABLED_INPUT_TEXT, ] as const; From 3f516ab8b0004704dc75fd10a6f4dc15f26efa1d Mon Sep 17 00:00:00 2001 From: FARAN Date: Thu, 26 Jun 2025 20:06:35 +0500 Subject: [PATCH 08/12] add disable styles slider --- .../comps/numberInputComp/sliderComp.tsx | 1 + .../numberInputComp/sliderCompConstants.tsx | 36 ++++++++++++++-- .../comps/controls/styleControlConstants.tsx | 43 +++++++++++++++++++ 3 files changed, 76 insertions(+), 4 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx index e31117cdf3..a1156ec690 100644 --- a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx @@ -46,6 +46,7 @@ const SliderBasicComp = (function () { {...props} value={props.value.value} $style={props.inputFieldStyle} + $disabledStyle={props.disabledSliderStyle} style={{margin: 0}} $vertical={Boolean(props.vertical) || false} tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined} diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx index ae4c5abd88..1eb0fc74c8 100644 --- a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx @@ -5,7 +5,7 @@ import { ChangeEventHandlerControl } from "../../controls/eventHandlerControl"; import { Section, lightenColor, sectionNames } from "lowcoder-design"; import { RecordConstructorToComp } from "lowcoder-core"; import { styleControl } from "comps/controls/styleControl"; -import { AnimationStyle, InputFieldStyle, LabelStyle, SliderStyle, SliderStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; +import { AnimationStyle, InputFieldStyle, LabelStyle, SliderStyle, SliderStyleType, DisabledSliderStyle, DisabledSliderStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; import styled, { css } from "styled-components"; import { default as Slider } from "antd/es/slider"; import { darkenColor, fadeColor } from "lowcoder-design"; @@ -15,7 +15,7 @@ import { trans } from "i18n"; import { memo, useCallback, useContext } from "react"; import { EditorContext } from "comps/editorState"; -const getStyle = (style: SliderStyleType, vertical: boolean) => { +const getStyle = (style: SliderStyleType, vertical: boolean, disabledStyle?: DisabledSliderStyleType) => { return css` &.ant-slider:not(.ant-slider-disabled) { &, @@ -56,11 +56,35 @@ const getStyle = (style: SliderStyleType, vertical: boolean) => { margin: ${style.margin} auto !important; `} } + + /* Disabled state styling */ + &.ant-slider-disabled { + .ant-slider-rail { + background-color: ${disabledStyle?.disabledTrack || lightenColor(style.track, 0.2)} !important; + } + .ant-slider-track { + background-color: ${disabledStyle?.disabledFill || lightenColor(style.fill, 0.3)} !important; + } + .ant-slider-handle { + background-color: ${disabledStyle?.disabledThumb || lightenColor(style.thumb, 0.25)} !important; + border-color: ${disabledStyle?.disabledThumbBorder || lightenColor(style.thumbBorder, 0.25)} !important; + cursor: not-allowed !important; + } + ${vertical && css` + width: auto; + min-height: calc(300px - ${style.margin}); + margin: ${style.margin} auto !important; + `} + } `; }; -export const SliderStyled = styled(Slider)<{ $style: SliderStyleType, $vertical: boolean }>` - ${(props) => props.$style && getStyle(props.$style, props.$vertical)} +export const SliderStyled = styled(Slider)<{ + $style: SliderStyleType, + $vertical: boolean, + $disabledStyle?: DisabledSliderStyleType +}>` + ${(props) => props.$style && getStyle(props.$style, props.$vertical, props.$disabledStyle)} `; export const SliderWrapper = styled.div<{ $vertical: boolean }>` @@ -88,6 +112,7 @@ export const SliderChildren = { prefixIcon: IconControl, suffixIcon: IconControl, inputFieldStyle: styleControl(SliderStyle, 'inputFieldStyle'), + disabledSliderStyle: styleControl(DisabledSliderStyle, 'disabledSliderStyle'), animationStyle: styleControl(AnimationStyle, 'animationStyle') }; @@ -132,6 +157,9 @@ const LayoutSection = memo(({ children }: { children: RecordConstructorToComp {children.inputFieldStyle.getPropertyView()} +
+ {children.disabledSliderStyle.getPropertyView()} +
{children.animationStyle.getPropertyView()}
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 5523755596..21a90e622e 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -1004,6 +1004,43 @@ export const DISABLED_INPUT_STYLE_FIELDS = [ DISABLED_INPUT_TEXT, ] as const; +// Add disabled style constants specifically for slider components +const DISABLED_SLIDER_FILL = { + name: "disabledFill", + label: trans("style.disabledFill"), + depName: "fill", + transformer: (color: string) => lightenColor(color, 0.3), +} as const; + +const DISABLED_SLIDER_TRACK = { + name: "disabledTrack", + label: trans("style.disabledTrack"), + depName: "track", + transformer: (color: string) => lightenColor(color, 0.2), +} as const; + +const DISABLED_SLIDER_THUMB = { + name: "disabledThumb", + label: trans("style.disabledThumb"), + depName: "thumb", + transformer: (color: string) => lightenColor(color, 0.25), +} as const; + +const DISABLED_SLIDER_THUMB_BORDER = { + name: "disabledThumbBorder", + label: trans("style.disabledThumbBorder"), + depName: "thumbBorder", + transformer: (color: string) => lightenColor(color, 0.25), +} as const; + +// Re-export for reuse in slider components +export const DISABLED_SLIDER_STYLE_FIELDS = [ + DISABLED_SLIDER_FILL, + DISABLED_SLIDER_TRACK, + DISABLED_SLIDER_THUMB, + DISABLED_SLIDER_THUMB_BORDER, +] as const; + export const ButtonStyle = [ getBackground('primary'), ...STYLING_FIELDS_SEQUENCE, @@ -1267,6 +1304,11 @@ export const SliderStyle = [ PADDING, ] as const; +// Create separate disabled style control for sliders +export const DisabledSliderStyle = [ + ...DISABLED_SLIDER_STYLE_FIELDS, +] as const; + export const InputLikeStyle = [ getStaticBackground(SURFACE_COLOR), BOXSHADOW, @@ -2362,6 +2404,7 @@ export type ContainerFooterStyleType = StyleConfigType< typeof ContainerFooterStyle >; export type SliderStyleType = StyleConfigType; +export type DisabledSliderStyleType = StyleConfigType; export type RatingStyleType = StyleConfigType; export type SwitchStyleType = StyleConfigType; export type SelectStyleType = StyleConfigType; From c9a8de4a153747c8811890aa3b261b44e7660328 Mon Sep 17 00:00:00 2001 From: FARAN Date: Thu, 26 Jun 2025 20:14:18 +0500 Subject: [PATCH 09/12] add disabled styles on range slider fix --- .../lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx index 74b32347d2..48480bacd9 100644 --- a/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx @@ -65,6 +65,7 @@ const RangeSliderBasicComp = (function () { range={true} value={[props.start.value, props.end.value]} $style={props.inputFieldStyle} + $disabledStyle={props.disabledSliderStyle} style={{ margin: 0 }} $vertical={Boolean(props.vertical) || false} tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined} From c9cdee73836193e1d2519654bfe7e0099d462c95 Mon Sep 17 00:00:00 2001 From: FARAN Date: Thu, 26 Jun 2025 21:46:53 +0500 Subject: [PATCH 10/12] add placeholder styling for input --- .../textInputComp/textInputConstants.tsx | 19 +++++++++++++++++-- .../comps/controls/styleControlConstants.tsx | 14 ++++++++++++++ 2 files changed, 31 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx index 006d263f39..bacb892bd8 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx @@ -315,8 +315,23 @@ export function getStyle(style: InputLikeStyleType, labelStyle?: LabelStyleType) } &::-webkit-input-placeholder { - color: ${style.text}; - opacity: 0.4; + color: ${style.placeholder}; + opacity: 1; + } + + &::-moz-placeholder { + color: ${style.placeholder}; + opacity: 1; + } + + &:-ms-input-placeholder { + color: ${style.placeholder}; + opacity: 1; + } + + &::placeholder { + color: ${style.placeholder}; + opacity: 1; } .ant-input-show-count-suffix, diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 21a90e622e..9633235372 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -244,9 +244,14 @@ export type DepColorConfig = CommonColorConfig & { transformer: (color: string, ...rest: string[]) => string; }; +export type PlaceholderConfig = CommonColorConfig & { + readonly placeholder?: string; +}; + export type SingleColorConfig = | SimpleColorConfig | DepColorConfig + | PlaceholderConfig | RadiusConfig | BorderWidthConfig | RotationConfig @@ -1309,11 +1314,19 @@ export const DisabledSliderStyle = [ ...DISABLED_SLIDER_STYLE_FIELDS, ] as const; +const PLACEHOLDER = { + name: "placeholder", + label: "Placeholder", + depName: "text", + transformer: (color: string) => lightenColor(color, 0.4), +} as const; + export const InputLikeStyle = [ getStaticBackground(SURFACE_COLOR), BOXSHADOW, BOXSHADOWCOLOR, ...STYLING_FIELDS_SEQUENCE.filter((style)=>style.name!=='rotation' && style.name!=='lineHeight'), + PLACEHOLDER, ...ACCENT_VALIDATE, ] as const; @@ -2536,3 +2549,4 @@ export function marginCalculator(margin: string) { } export type {ThemeDetail}; + From 54cc9b92ebfa807bf04a897ef66c31706ab4351f Mon Sep 17 00:00:00 2001 From: FARAN Date: Fri, 27 Jun 2025 19:55:56 +0500 Subject: [PATCH 11/12] [Fix]: #1466 add disabled styles for the components / refactor --- .../comps/buttonComp/buttonCompConstants.tsx | 10 ++-- .../comps/comps/meetingComp/controlButton.tsx | 7 ++- .../meetingComp/videobuttonCompConstants.tsx | 21 ++++++-- .../comps/numberInputComp/numberInputComp.tsx | 43 ++++++++++++----- .../comps/comps/textInputComp/inputComp.tsx | 11 +++-- .../comps/textInputComp/textAreaComp.tsx | 11 +++-- .../comps/controls/styleControlConstants.tsx | 48 ++++++++----------- 7 files changed, 89 insertions(+), 62 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx index cc907ee1d4..b878eabbdb 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx @@ -1,13 +1,13 @@ import { default as Button } from "antd/es/button"; import { styleControl } from "comps/controls/styleControl"; -import { ButtonStyleType, ButtonStyle, DisabledButtonStyle } from "comps/controls/styleControlConstants"; +import { ButtonStyleType, ButtonStyle, DisabledButtonStyle, DisabledButtonStyleType } from "comps/controls/styleControlConstants"; import { migrateOldData } from "comps/generators/simpleGenerators"; import styled, { css } from "styled-components"; import { genActiveColor, genHoverColor } from "lowcoder-design"; import { refMethods } from "comps/generators/withMethodExposing"; import { blurMethod, clickMethod, focusWithOptions } from "comps/utils/methodUtils"; -export function getButtonStyle(buttonStyle: ButtonStyleType, disabledStyle?: any) { +export function getButtonStyle(buttonStyle: ButtonStyleType, disabledStyle: DisabledButtonStyleType = {} as any) { const hoverColor = buttonStyle.background && genHoverColor(buttonStyle.background); const activeColor = buttonStyle.background && genActiveColor(buttonStyle.background); return css` @@ -52,8 +52,8 @@ export function getButtonStyle(buttonStyle: ButtonStyleType, disabledStyle?: any /* Disabled state styling */ &:disabled, &.ant-btn-disabled { - color: ${disabledStyle?.disabledText || buttonStyle.text}; - background: ${disabledStyle?.disabledBackground || buttonStyle.background}; + color: ${disabledStyle.disabledText}; + background: ${disabledStyle.disabledBackground}; cursor: not-allowed; } } @@ -62,7 +62,7 @@ export function getButtonStyle(buttonStyle: ButtonStyleType, disabledStyle?: any export const Button100 = styled(Button)<{ $buttonStyle?: ButtonStyleType; - $disabledStyle?: any; + $disabledStyle?: DisabledButtonStyleType; }>` ${(props) => props.$buttonStyle && getButtonStyle(props.$buttonStyle, props.$disabledStyle)} width: 100%; diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx index 0445c94039..17076f1fc9 100644 --- a/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx +++ b/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx @@ -28,7 +28,7 @@ import { } from "../../generators/withExposing"; import { IForm } from "../formComp/formDataConstants"; import { SimpleNameComp } from "../simpleNameComp"; -import { Button100, ButtonStyleControl } from "./videobuttonCompConstants"; +import { Button100, ButtonStyleControl, DisabledButtonStyleControl } from "./videobuttonCompConstants"; import { RefControl } from "comps/controls/refControl"; import { AutoHeightControl } from "comps/controls/autoHeightControl"; import { @@ -195,6 +195,7 @@ const childrenMap = { aspectRatio: withDefault(StringControl, "1 / 1"), onEvent: ButtonEventHandlerControl, disabled: BoolCodeControl, + disabledStyle: DisabledButtonStyleControl, loading: BoolCodeControl, form: SelectFormControl, sourceMode: dropdownControl(ModeOptions, "standard"), @@ -267,6 +268,7 @@ let ButtonTmpComp = (function () { {children.style.getPropertyView()} +
+ {children.disabledStyle.getPropertyView()} +
)} diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videobuttonCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videobuttonCompConstants.tsx index 9a7a0d43b0..2ffa2e6cf3 100644 --- a/client/packages/lowcoder/src/comps/comps/meetingComp/videobuttonCompConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/meetingComp/videobuttonCompConstants.tsx @@ -1,5 +1,5 @@ import { styleControl } from "@lowcoder-ee/comps/controls/styleControl"; -import { ButtonStyle } from "@lowcoder-ee/comps/controls/styleControlConstants"; +import { ButtonStyle, DisabledButtonStyle } from "@lowcoder-ee/comps/controls/styleControlConstants"; import { migrateOldData } from "@lowcoder-ee/comps/generators/simpleGenerators"; import { refMethods } from "@lowcoder-ee/comps/generators/withMethodExposing"; import { blurMethod, clickMethod, focusWithOptions } from "@lowcoder-ee/comps/utils/methodUtils"; @@ -8,7 +8,7 @@ import { genActiveColor, genHoverColor } from "components/colorSelect/colorUtils import styled, { css } from "styled-components"; // import { genActiveColor, genHoverColor } from "lowcoder-design"; -export function getButtonStyle(buttonStyle: any) { +export function getButtonStyle(buttonStyle: any, disabledStyle: any) { const hoverColor = buttonStyle.background && genHoverColor(buttonStyle.background); const activeColor = buttonStyle.background && genActiveColor(buttonStyle.background); return css` @@ -42,13 +42,20 @@ export function getButtonStyle(buttonStyle: any) { ? activeColor : buttonStyle.border}; } + + } + &:disabled, + &.ant-btn-disabled { + color: ${disabledStyle.disabledText}; + background: ${disabledStyle.disabledBackground}; + cursor: not-allowed; } } `; } -export const Button100 = styled(Button)<{ $buttonStyle?: any }>` - ${(props) => props.$buttonStyle && getButtonStyle(props.$buttonStyle)} +export const Button100 = styled(Button)<{ $buttonStyle?: any; $disabledStyle?: any }>` + ${(props) => props.$buttonStyle && getButtonStyle(props.$buttonStyle, props.$disabledStyle)} width: 100%; height: auto; display: inline-flex; @@ -98,6 +105,12 @@ export const ButtonStyleControl = migrateOldData( fixOldData ); +export const DisabledButtonTmpStyleControl = styleControl(DisabledButtonStyle); +export const DisabledButtonStyleControl = migrateOldData( + DisabledButtonTmpStyleControl, + fixOldData +); + export const buttonRefMethods = refMethods([ focusWithOptions, blurMethod, diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx index bd14c7f647..cf18eb8a50 100644 --- a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx @@ -74,11 +74,7 @@ const getStyle = (style: InputLikeStyleType) => { &:hover { border-color: ${style.accent}; } - - &::-webkit-input-placeholder { - color: ${style.text}; - opacity: 0.4; - } + .ant-input-number { margin: 0; @@ -92,6 +88,26 @@ const getStyle = (style: InputLikeStyleType) => { font-weight:${style.textWeight} !important; font-size:${style.textSize} !important; font-style:${style.fontStyle} !important; + + &::-webkit-input-placeholder { + color: ${style.placeholder}; + opacity: 1; + } + + &::-moz-placeholder { + color: ${style.placeholder}; + opacity: 1; + } + + &:-ms-input-placeholder { + color: ${style.placeholder}; + opacity: 1; + } + + &::placeholder { + color: ${style.placeholder}; + opacity: 1; + } } .ant-input-number-handler-wrap { @@ -131,13 +147,14 @@ const InputNumber = styled(AntdInputNumber)<{ /* Disabled state styling */ &:disabled, &.ant-input-number-disabled { - color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important; - background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important; + color: ${(props) => props.$disabledStyle?.disabledText}; + background: ${(props) => props.$disabledStyle?.disabledBackground}; + border-color: ${(props) => props.$disabledStyle?.disabledBorder}; cursor: not-allowed; .ant-input-number-input { - color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important; - background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important; + color: ${(props) => props.$disabledStyle?.disabledText}; + background: ${(props) => props.$disabledStyle?.disabledBackground}; } } @@ -280,7 +297,7 @@ const childrenMap = { animationStyle: styleControl(AnimationStyle , 'animationStyle'), prefixIcon: IconControl, inputFieldStyle: styleControl(InputLikeStyle , 'inputFieldStyle'), - disabledInputStyle: styleControl(DisabledInputStyle, 'disabledInputStyle'), + disabledStyle: styleControl(DisabledInputStyle, 'disabledStyle'), // validation required: BoolControl, showValidationWhenEmpty: BoolControl, @@ -397,7 +414,7 @@ const CustomInputNumber = (props: RecordConstructorToView) = stringMode={true} precision={props.precision} $style={props.inputFieldStyle} - $disabledStyle={props.disabledInputStyle} + $disabledStyle={props.disabledStyle} prefix={hasIcon(props.prefixIcon) ? props.prefixIcon : props.prefixText.value} tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined} onPressEnter={() => { @@ -489,8 +506,8 @@ let NumberInputTmpComp = (function () {
{children.inputFieldStyle.getPropertyView()}
-
- {children.disabledInputStyle.getPropertyView()} +
+ {children.disabledStyle.getPropertyView()}
{children.animationStyle.getPropertyView()} diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx index a8cfd8bfb5..265c0512d8 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx @@ -53,8 +53,9 @@ const InputStyle = styled(Input)<{ /* Disabled state styling */ &:disabled, &.ant-input-disabled { - color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important; - background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important; + color: ${(props) => props.$disabledStyle?.disabledText}; + background: ${(props) => props.$disabledStyle?.disabledBackground}; + border-color: ${(props) => props.$disabledStyle?.disabledBorder}; cursor: not-allowed; } `; @@ -70,7 +71,7 @@ const childrenMap = { suffixIcon: IconControl, inputFieldStyle: styleControl(InputLikeStyle, 'inputFieldStyle'), animationStyle: styleControl(AnimationStyle, 'animationStyle'), - disabledInputStyle: styleControl(DisabledInputStyle, 'disabledInputStyle'), + disabledStyle: styleControl(DisabledInputStyle, 'disabledStyle'), tabIndex: NumberControl, }; @@ -85,7 +86,7 @@ let InputBasicComp = new UICompBuilder(childrenMap, (props) => { showCount={props.showCount} allowClear={props.allowClear} $style={props.inputFieldStyle} - $disabledStyle={props.disabledInputStyle} + $disabledStyle={props.disabledStyle} prefix={hasIcon(props.prefixIcon) && props.prefixIcon} suffix={hasIcon(props.suffixIcon) && props.suffixIcon} tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined} @@ -127,7 +128,7 @@ let InputBasicComp = new UICompBuilder(childrenMap, (props) => {
{children.style.getPropertyView()}
{children.labelStyle.getPropertyView()}
{children.inputFieldStyle.getPropertyView()}
-
{children.disabledInputStyle.getPropertyView()}
+
{children.disabledStyle.getPropertyView()}
{children.animationStyle.getPropertyView()}
)} diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx index a0121743c6..ddc2bcc1ab 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx @@ -50,8 +50,9 @@ const TextAreaStyled = styled(TextArea)<{ /* Disabled state styling */ &:disabled, &.ant-input-disabled { - color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important; - background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important; + color: ${(props) => props.$disabledStyle?.disabledText}; + background: ${(props) => props.$disabledStyle?.disabledBackground}; + border-color: ${(props) => props.$disabledStyle?.disabledBorder}; cursor: not-allowed; } `; @@ -91,7 +92,7 @@ let TextAreaTmpComp = (function () { textAreaScrollBar: withDefault(BoolControl, false), inputFieldStyle: styleControl(InputLikeStyle , 'inputFieldStyle'), animationStyle: styleControl(AnimationStyle, 'animationStyle'), - disabledInputStyle: styleControl(DisabledInputStyle, 'disabledInputStyle'), + disabledStyle: styleControl(DisabledInputStyle, 'disabledStyle'), tabIndex: NumberControl }; return new UICompBuilder(childrenMap, (props) => { @@ -108,7 +109,7 @@ let TextAreaTmpComp = (function () { allowClear={props.allowClear} style={{ height: "100% !important", resize: "vertical" }} $style={props.inputFieldStyle} - $disabledStyle={props.disabledInputStyle} + $disabledStyle={props.disabledStyle} tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined} /> @@ -152,7 +153,7 @@ let TextAreaTmpComp = (function () {
{children.style.getPropertyView()}
{children.labelStyle.getPropertyView()}
{children.inputFieldStyle.getPropertyView()}
-
{children.disabledInputStyle.getPropertyView()}
+
{children.disabledStyle.getPropertyView()}
{children.animationStyle.getPropertyView()}
)} diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 9633235372..cd1d1150c6 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -978,37 +978,29 @@ const DISABLED_TEXT = { label: trans("style.disabledText"), depName: "disabledBackground", depType: DEP_TYPE.CONTRAST_TEXT, - transformer: contrastText, + transformer: (color: string) => lightenColor(color, 0.8), +} as const; + + +export const DISABLED_BORDER = { + name: "disabledBorder", + label: trans("style.disabledBorder"), + color: SECOND_SURFACE_COLOR, } as const; -// Re-export for reuse in other components if needed export const DISABLED_STYLE_FIELDS = [ DISABLED_BACKGROUND, DISABLED_TEXT, + DISABLED_BORDER, ] as const; -// Add disabled style constants specifically for text input components -const DISABLED_INPUT_BACKGROUND = { - name: "disabledBackground", - label: trans("style.disabledBackground"), - color: SECOND_SURFACE_COLOR, -} as const; +// Helper to quickly create a component-specific disabled style list by +// extending the two generic disabled tokens above. +export const withDisabled = ( + extra: Extra = [] as unknown as Extra, +) => [...DISABLED_STYLE_FIELDS, ...extra] as const; -const DISABLED_INPUT_TEXT = { - name: "disabledText", - label: trans("style.disabledText"), - depName: "disabledInputBackground", - depType: DEP_TYPE.CONTRAST_TEXT, - transformer: contrastText, -} as const; - -// Re-export for reuse in textInput components -export const DISABLED_INPUT_STYLE_FIELDS = [ - DISABLED_INPUT_BACKGROUND, - DISABLED_INPUT_TEXT, -] as const; - // Add disabled style constants specifically for slider components const DISABLED_SLIDER_FILL = { name: "disabledFill", @@ -1052,9 +1044,11 @@ export const ButtonStyle = [ ] as const; // Create separate disabled style control -export const DisabledButtonStyle = [ - ...DISABLED_STYLE_FIELDS, -] as const; +export const DisabledButtonStyle = withDisabled(); + + +// For input components +export const DisabledInputStyle = withDisabled(); export const DropdownStyle = [ getBackground(), @@ -1330,10 +1324,6 @@ export const InputLikeStyle = [ ...ACCENT_VALIDATE, ] as const; -// Create separate disabled style control for text inputs -export const DisabledInputStyle = [ - ...DISABLED_INPUT_STYLE_FIELDS, -] as const; // added by Mousheng From b366ecbc8bc00efeb07736c9882b8d0077ed3e41 Mon Sep 17 00:00:00 2001 From: FARAN Date: Fri, 27 Jun 2025 23:18:14 +0500 Subject: [PATCH 12/12] [Fix]: #1466 add disabled/placeholder style for components --- .../src/comps/comps/buttonComp/buttonComp.tsx | 2 +- .../comps/buttonComp/toggleButtonComp.tsx | 2 +- .../src/comps/comps/dateComp/dateComp.tsx | 15 ++++++- .../src/comps/comps/dateComp/dateCompUtil.ts | 39 +++++++++++++++++- .../comps/comps/dateComp/dateRangeUIView.tsx | 23 ++++++++++- .../src/comps/comps/dateComp/dateUIView.tsx | 24 ++++++++++- .../comps/comps/meetingComp/controlButton.tsx | 2 +- .../comps/numberInputComp/numberInputComp.tsx | 6 +-- .../numberInputComp/sliderCompConstants.tsx | 7 +--- .../comps/selectInputComp/stepControl.tsx | 34 +++++++++++++-- .../comps/comps/textInputComp/inputComp.tsx | 2 +- .../comps/textInputComp/passwordComp.tsx | 2 +- .../comps/textInputComp/textAreaComp.tsx | 2 +- .../comps/controls/styleControlConstants.tsx | 41 +++++++++++-------- .../packages/lowcoder/src/i18n/locales/en.ts | 9 ++-- 15 files changed, 165 insertions(+), 45 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx index 7c2775e0ed..a6d6f88890 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx @@ -175,7 +175,7 @@ const ButtonPropertyView = React.memo((props: { {props.children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
{props.children.style.getPropertyView()}
-
{props.children.disabledStyle.getPropertyView()}
+
{props.children.disabledStyle.getPropertyView()}
)} diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx index f9ee2f089e..654ec6659d 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx @@ -155,7 +155,7 @@ const ToggleTmpComp = (function () { )} -
{children.disabledStyle.getPropertyView()}
+
{children.disabledStyle.getPropertyView()}
)) .setExposeMethodConfigs(buttonRefMethods) diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx index 8068829d82..ea6f37f5a3 100644 --- a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx @@ -21,7 +21,7 @@ import { UICompBuilder, withDefault } from "../../generators"; import { CommonNameConfig, depsConfig, withExposingConfigs } from "../../generators/withExposing"; import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants"; import { styleControl } from "comps/controls/styleControl"; -import { AnimationStyle, ChildrenMultiSelectStyle, ChildrenMultiSelectStyleType, DateTimeStyle, DateTimeStyleType, InputFieldStyle, LabelStyle } from "comps/controls/styleControlConstants"; +import { AnimationStyle, ChildrenMultiSelectStyle, ChildrenMultiSelectStyleType, DateTimeStyle, DateTimeStyleType, InputFieldStyle, LabelStyle, DisabledInputStyle, DisabledInputStyleType } from "comps/controls/styleControlConstants"; import { withMethodExposing } from "../../generators/withMethodExposing"; import { disabledPropertyView, @@ -81,6 +81,7 @@ const commonChildren = { format: StringControl, inputFormat: withDefault(StringControl, DATE_FORMAT), disabled: BoolCodeControl, + disabledStyle: styleControl(DisabledInputStyle, 'disabledStyle'), onEvent: eventHandlerControl(EventOptions), showTime: BoolControl, use12Hours: BoolControl, @@ -179,11 +180,13 @@ export type DateCompViewProps = Pick< | "viewRef" | "timeZone" | "pickerMode" + | "disabledStyle" > & { onFocus: () => void; onBlur: () => void; $style: DateTimeStyleType; $childrenInputFieldStyle: ChildrenMultiSelectStyleType; + $disabledStyle?: DisabledInputStyleType; disabledTime: () => ReturnType; suffixIcon: ReactNode; placeholder?: string | [string, string]; @@ -264,6 +267,7 @@ const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => { disabledTime={() => disabledTime(props.minTime, props.maxTime)} $style={props.inputFieldStyle} $childrenInputFieldStyle={props.childrenInputFieldStyle} + $disabledStyle={props.disabledStyle} disabled={props.disabled} {...datePickerProps(props)} hourStep={props.hourStep} @@ -285,6 +289,7 @@ const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => { onBlur={() => props.onEvent("blur")} suffixIcon={hasIcon(props.suffixIcon) && props.suffixIcon} tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined} + disabledStyle={props.disabledStyle} /> ), showValidationWhenEmpty: props.showValidationWhenEmpty, @@ -366,6 +371,9 @@ const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
{children.animationStyle.getPropertyView()}
+
+ {children.disabledStyle.getPropertyView()} +
)} @@ -457,6 +465,7 @@ let DateRangeTmpCmp = (function () { viewRef={props.viewRef} $style={props.inputFieldStyle} $childrenInputFieldStyle={props.childrenInputFieldStyle} + $disabledStyle={props.disabledStyle} disabled={props.disabled} {...datePickerProps(props)} start={tempStartValue?.isValid() ? tempStartValue : null} @@ -482,6 +491,7 @@ let DateRangeTmpCmp = (function () { onBlur={() => props.onEvent("blur")} suffixIcon={hasIcon(props.suffixIcon) && props.suffixIcon} tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined} + disabledStyle={props.disabledStyle} /> ); @@ -579,6 +589,9 @@ let DateRangeTmpCmp = (function () {
{children.childrenInputFieldStyle.getPropertyView()}
+
+ {children.disabledStyle.getPropertyView()} +
)} diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts b/client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts index 63a030cdab..16bc634edf 100644 --- a/client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts +++ b/client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts @@ -85,8 +85,23 @@ export const getStyle = (style: DateTimeStyleType) => { color: ${style.text}; &::-webkit-input-placeholder { - color: ${style.text}; - opacity: 0.25; + color: ${style.placeholder}; + opacity: 1; + } + + &::-moz-placeholder { + color: ${style.placeholder}; + opacity: 1; + } + + &:-ms-input-placeholder { + color: ${style.placeholder}; + opacity: 1; + } + + &::placeholder { + color: ${style.placeholder}; + opacity: 1; } } @@ -132,6 +147,26 @@ export const getMobileStyle = (style: DateTimeStyleType) => background-color: ${style.background}; border-radius: ${style.radius}; border-color: ${style.border}; + + &::-webkit-input-placeholder { + color: ${style.placeholder}; + opacity: 1; + } + + &::-moz-placeholder { + color: ${style.placeholder}; + opacity: 1; + } + + &:-ms-input-placeholder { + color: ${style.placeholder}; + opacity: 1; + } + + &::placeholder { + color: ${style.placeholder}; + opacity: 1; + } `; export const dateRefMethods = refMethods([focusMethod, blurMethod]); diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx index c56ddecb6f..65677b63bb 100644 --- a/client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx +++ b/client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx @@ -5,7 +5,7 @@ import { useUIView } from "../../utils/useUIView"; import { checkIsMobile } from "util/commonUtils"; import React, { useContext } from "react"; import styled from "styled-components"; -import type { ChildrenMultiSelectStyleType, DateTimeStyleType } from "../../controls/styleControlConstants"; +import type { ChildrenMultiSelectStyleType, DateTimeStyleType, DisabledInputStyleType } from "../../controls/styleControlConstants"; import { EditorContext } from "../../editorState"; import { default as DatePicker } from "antd/es/date-picker"; import { hasIcon } from "comps/utils"; @@ -16,11 +16,28 @@ import { timeZoneOptions } from "./timeZone"; const { RangePicker } = DatePicker; -const RangePickerStyled = styled(RangePicker)<{$style: DateTimeStyleType}>` +const RangePickerStyled = styled(RangePicker)<{$style: DateTimeStyleType; $disabledStyle?: DisabledInputStyleType}>` width: 100%; box-shadow: ${(props) => `${props.$style.boxShadow} ${props.$style.boxShadowColor}`}; ${(props) => props.$style && getStyle(props.$style)} + + &.ant-picker-disabled { + cursor: not-allowed; + color: ${(props) => props.$disabledStyle?.disabledText}; + background: ${(props) => props.$disabledStyle?.disabledBackground}; + border-color: ${(props) => props.$disabledStyle?.disabledBorder}; + + .ant-picker-input > input { + color: ${(props) => props.$disabledStyle?.disabledText}; + background: ${(props) => props.$disabledStyle?.disabledBackground}; + } + .ant-picker-suffix, + .ant-picker-clear, + .ant-picker-separator { + color: ${(props) => props.$disabledStyle?.disabledText}; + } + } `; const StyledAntdSelect = styled(AntdSelect)` @@ -46,6 +63,7 @@ export interface DateRangeUIViewProps extends DateCompViewProps { onPanelChange: (value: any, mode: [string, string]) => void; onClickDateRangeTimeZone:(value:any)=>void; tabIndex?: number; + $disabledStyle?: DisabledInputStyleType; } export const DateRangeUIView = (props: DateRangeUIViewProps) => { @@ -98,6 +116,7 @@ export const DateRangeUIView = (props: DateRangeUIViewProps) => { ) )} + $disabledStyle={props.$disabledStyle} /> ); }; diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx index a98a1eaa59..c66ac2a026 100644 --- a/client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx +++ b/client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx @@ -5,7 +5,7 @@ import { useUIView } from "../../utils/useUIView"; import { checkIsMobile } from "util/commonUtils"; import React, { useContext } from "react"; import styled from "styled-components"; -import type { ChildrenMultiSelectStyleType, DateTimeStyleType } from "../../controls/styleControlConstants"; +import type { ChildrenMultiSelectStyleType, DateTimeStyleType, DisabledInputStyleType } from "../../controls/styleControlConstants"; import { EditorContext } from "../../editorState"; import { default as DatePicker } from "antd/es/date-picker"; import type { DatePickerProps } from "antd/es/date-picker"; @@ -15,10 +15,28 @@ import { timeZoneOptions } from "./timeZone"; import { default as AntdSelect } from "antd/es/select"; import { omit } from "lodash"; -const DatePickerStyled = styled(DatePicker)<{ $style: DateTimeStyleType }>` +const DatePickerStyled = styled(DatePicker)<{ $style: DateTimeStyleType; $disabledStyle?: DisabledInputStyleType; }>` width: 100%; box-shadow: ${props=>`${props.$style.boxShadow} ${props.$style.boxShadowColor}`}; ${(props) => props.$style && getStyle(props.$style)} + + /* Disabled state styling */ + &.ant-picker-disabled { + cursor: not-allowed; + color: ${(props) => props.$disabledStyle?.disabledText}; + background: ${(props) => props.$disabledStyle?.disabledBackground}; + border-color: ${(props) => props.$disabledStyle?.disabledBorder}; + + .ant-picker-input > input { + color: ${(props) => props.$disabledStyle?.disabledText}; + background: ${(props) => props.$disabledStyle?.disabledBackground}; + } + .ant-picker-suffix, + .ant-picker-clear, + .ant-picker-separator { + color: ${(props) => props.$disabledStyle?.disabledText}; + } + } `; const StyledDiv = styled.div` @@ -40,6 +58,7 @@ export interface DataUIViewProps extends DateCompViewProps { onPanelChange: () => void; onClickDateTimeZone:(value:any)=>void; tabIndex?: number; + $disabledStyle?: DisabledInputStyleType; } const DateMobileUIView = React.lazy(() => @@ -54,6 +73,7 @@ export const DateUIView = (props: DataUIViewProps) => { , {children.style.getPropertyView()}
-
+
{children.disabledStyle.getPropertyView()}
diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx index cf18eb8a50..15db21305f 100644 --- a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx @@ -506,9 +506,9 @@ let NumberInputTmpComp = (function () {
{children.inputFieldStyle.getPropertyView()}
-
- {children.disabledStyle.getPropertyView()} -
+
+ {children.disabledStyle.getPropertyView()} +
{children.animationStyle.getPropertyView()}
diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx index 1eb0fc74c8..c2a45c121a 100644 --- a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx @@ -65,11 +65,6 @@ const getStyle = (style: SliderStyleType, vertical: boolean, disabledStyle?: Dis .ant-slider-track { background-color: ${disabledStyle?.disabledFill || lightenColor(style.fill, 0.3)} !important; } - .ant-slider-handle { - background-color: ${disabledStyle?.disabledThumb || lightenColor(style.thumb, 0.25)} !important; - border-color: ${disabledStyle?.disabledThumbBorder || lightenColor(style.thumbBorder, 0.25)} !important; - cursor: not-allowed !important; - } ${vertical && css` width: auto; min-height: calc(300px - ${style.margin}); @@ -157,7 +152,7 @@ const LayoutSection = memo(({ children }: { children: RecordConstructorToComp {children.inputFieldStyle.getPropertyView()}
-
+
{children.disabledSliderStyle.getPropertyView()}
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx index ca24b74924..9fcfaa6216 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx @@ -5,7 +5,7 @@ import { stringExposingStateControl, numberExposingStateControl } from "comps/co import { ChangeEventHandlerControl } from "comps/controls/eventHandlerControl"; import { StepOptionControl } from "comps/controls/optionsControl"; import { styleControl } from "comps/controls/styleControl"; -import { StepsStyle, StepsStyleType, heightCalculator, widthCalculator, marginCalculator, AnimationStyle, AnimationStyleType } from "comps/controls/styleControlConstants"; +import { StepsStyle, StepsStyleType, heightCalculator, widthCalculator, marginCalculator, AnimationStyle, AnimationStyleType, DisabledStepStyle, DisabledStepStyleType } from "comps/controls/styleControlConstants"; import styled, { css } from "styled-components"; import { UICompBuilder, withDefault } from "../../generators"; import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing"; @@ -98,11 +98,12 @@ const StepsChildrenMap = { animationStyle: styleControl(AnimationStyle ,'animationStyle' ), showScrollBars: withDefault(BoolControl, false), minHorizontalWidth: withDefault(RadiusControl, ''), + disabledStyle: styleControl(DisabledStepStyle, 'disabledStyle'), }; let StepControlBasicComp = (function () { return new UICompBuilder(StepsChildrenMap, (props) => { - const StyledWrapper = styled.div<{ style: StepsStyleType, $animationStyle: AnimationStyleType }>` + const StyledWrapper = styled.div<{ style: StepsStyleType, $animationStyle: AnimationStyleType, $disabledStyle: DisabledStepStyleType }>` ${props=>props.$animationStyle} height: 100%; overflow-y: scroll; @@ -124,6 +125,30 @@ let StepControlBasicComp = (function () { border: ${props.style.borderWidth} solid ${props.style.border}; border-radius: ${props.style.radius}; ${getBackgroundStyle(props.style)} + /* Disabled step styles */ + .ant-steps-item-disabled { + .ant-steps-item-icon { + background: ${(props) => props.$disabledStyle?.disabledBackground}; + border-color: ${(props) => props.$disabledStyle?.disabledBorder}; + + /* When using icon as dot */ + .ant-steps-icon-dot { + background: ${(props) => props.$disabledStyle?.disabledBackground}; + } + + /* Default icon or custom icon */ + .ant-steps-icon, + > * { + color: ${(props) => props.$disabledStyle?.disabledText}; + } + } + + .ant-steps-item-title, + .ant-steps-item-subtitle, + .ant-steps-item-description { + color: ${(props) => props.$disabledStyle?.disabledText}; + } + } .ant-steps-item { padding-top: 5px !important; } .ant-steps.ant-steps-label-vertical.ant-steps-small .ant-steps-item-icon { margin-top: 17px !important; } .ant-steps.ant-steps-label-vertical.ant-steps-default .ant-steps-item-icon { margin-top: 12px !important; } @@ -172,7 +197,7 @@ let StepControlBasicComp = (function () { } }} > - + {children.animationStyle.getPropertyView()}
+
+ {children.disabledStyle.getPropertyView()} +
)} diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx index 265c0512d8..0a3ca6bf63 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx @@ -128,7 +128,7 @@ let InputBasicComp = new UICompBuilder(childrenMap, (props) => {
{children.style.getPropertyView()}
{children.labelStyle.getPropertyView()}
{children.inputFieldStyle.getPropertyView()}
-
{children.disabledStyle.getPropertyView()}
+
{children.disabledStyle.getPropertyView()}
{children.animationStyle.getPropertyView()}
)} diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx index 62eaddd8e7..4b9cf56389 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx @@ -135,7 +135,7 @@ let PasswordTmpComp = (function () {
{children.style.getPropertyView()}
{children.labelStyle.getPropertyView()}
{children.inputFieldStyle.getPropertyView()}
-
{children.disabledInputStyle.getPropertyView()}
+
{children.disabledInputStyle.getPropertyView()}
{children.animationStyle.getPropertyView()}
)} diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx index ddc2bcc1ab..049d5d88d7 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx @@ -153,7 +153,7 @@ let TextAreaTmpComp = (function () {
{children.style.getPropertyView()}
{children.labelStyle.getPropertyView()}
{children.inputFieldStyle.getPropertyView()}
-
{children.disabledStyle.getPropertyView()}
+
{children.disabledStyle.getPropertyView()}
{children.animationStyle.getPropertyView()}
)} diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index cd1d1150c6..176afbbfc9 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -994,50 +994,55 @@ export const DISABLED_STYLE_FIELDS = [ DISABLED_BORDER, ] as const; -// Helper to quickly create a component-specific disabled style list by -// extending the two generic disabled tokens above. -export const withDisabled = ( - extra: Extra = [] as unknown as Extra, -) => [...DISABLED_STYLE_FIELDS, ...extra] as const; - - // Add disabled style constants specifically for slider components const DISABLED_SLIDER_FILL = { name: "disabledFill", label: trans("style.disabledFill"), depName: "fill", - transformer: (color: string) => lightenColor(color, 0.3), + transformer: (color: string) => lightenColor(color, 0.8), } as const; const DISABLED_SLIDER_TRACK = { name: "disabledTrack", label: trans("style.disabledTrack"), depName: "track", - transformer: (color: string) => lightenColor(color, 0.2), + transformer: (color: string) => lightenColor(color, 0.8), } as const; const DISABLED_SLIDER_THUMB = { name: "disabledThumb", label: trans("style.disabledThumb"), depName: "thumb", - transformer: (color: string) => lightenColor(color, 0.25), + transformer: (color: string) => lightenColor(color, 0.8), } as const; const DISABLED_SLIDER_THUMB_BORDER = { name: "disabledThumbBorder", label: trans("style.disabledThumbBorder"), depName: "thumbBorder", - transformer: (color: string) => lightenColor(color, 0.25), + transformer: (color: string) => lightenColor(color, 0.8), } as const; // Re-export for reuse in slider components export const DISABLED_SLIDER_STYLE_FIELDS = [ DISABLED_SLIDER_FILL, DISABLED_SLIDER_TRACK, - DISABLED_SLIDER_THUMB, - DISABLED_SLIDER_THUMB_BORDER, ] as const; +// Helper to quickly create a component-specific disabled style list by +// extending the two generic disabled tokens above. +export const withDisabled = ( + extra: Extra = [] as unknown as Extra, +) => [...DISABLED_STYLE_FIELDS, ...extra] as const; + + +export const withDisabledSlider = ( + extra: Extra = [] as unknown as Extra, +) => [...DISABLED_SLIDER_STYLE_FIELDS, ...extra] as const; + + +export const DisabledSliderStyle = withDisabledSlider(); + export const ButtonStyle = [ getBackground('primary'), ...STYLING_FIELDS_SEQUENCE, @@ -1050,6 +1055,10 @@ export const DisabledButtonStyle = withDisabled(); // For input components export const DisabledInputStyle = withDisabled(); +// for step control +export const DisabledStepStyle = withDisabled(); + + export const DropdownStyle = [ getBackground(), ...STYLING_FIELDS_SEQUENCE.filter(style=>style.name!=='rotation'), @@ -1303,10 +1312,6 @@ export const SliderStyle = [ PADDING, ] as const; -// Create separate disabled style control for sliders -export const DisabledSliderStyle = [ - ...DISABLED_SLIDER_STYLE_FIELDS, -] as const; const PLACEHOLDER = { name: "placeholder", @@ -1886,6 +1891,7 @@ export const DateTimeStyle = [ ...getStaticBgBorderRadiusByBg(SURFACE_COLOR), getStaticBorder(SECOND_SURFACE_COLOR), TEXT, + PLACEHOLDER, MARGIN, PADDING, BORDER_STYLE, @@ -2392,6 +2398,7 @@ export type ColorPickerStyleType = StyleConfigType; export type ButtonStyleType = StyleConfigType; export type DisabledButtonStyleType = StyleConfigType; export type DisabledInputStyleType = StyleConfigType; +export type DisabledStepStyleType = StyleConfigType; export type ToggleButtonStyleType = StyleConfigType; export type TextStyleType = StyleConfigType; export type TextContainerStyleType = StyleConfigType; diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index b8836cb4df..c85c520a70 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -229,6 +229,7 @@ export const en = { "className": "CSS Class name", "dataTestId": "Individual ID", "preventOverwriting": "Prevent overwriting styles", + "disabledStyle": "Disabled Style", "color": "Color", "horizontalGridCells": "Horizontal Grid Cells", "verticalGridCells": "Vertical Grid Cells", @@ -511,9 +512,11 @@ export const en = { "tabAccent": "Tab Accent", "checkedBackground": "Checked Background Color", "uncheckedBackground": "Unchecked Background Color", - "disabledBackground": "Disabled Background Color", - "disabledBorder": "Disabled Border Color", - "disabledText": "Disabled Text Color", + "disabledBackground": "Background Color", + "disabledBorder": "Border Color", + "disabledText": "Text Color", + "disabledTrack": "Track Color", + "disabledFill": "Fill Color", "uncheckedBorder": "Unchecked Border Color", "indicatorBackground": "Indicator Background Color", "tableCellText": "Cell Text", 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