From 345c18af60653a23b290039929d11f9543832d9e Mon Sep 17 00:00:00 2001 From: Imtanan Aziz Toor Date: Thu, 29 Feb 2024 22:39:25 +0500 Subject: [PATCH 1/4] Label style work in progress --- .../src/components/Section.tsx | 1 + .../src/i18n/design/locales/en.ts | 1 + .../src/i18n/design/locales/zh.ts | 1 + .../comps/comps/textInputComp/inputComp.tsx | 32 ++++++----- .../textInputComp/textInputConstants.tsx | 4 +- .../src/comps/controls/labelControl.tsx | 55 ++++++++++++------- .../src/comps/controls/styleControl.tsx | 22 ++++++++ .../comps/controls/styleControlConstants.tsx | 28 ++++++++-- .../packages/lowcoder/src/i18n/locales/de.ts | 1 + .../packages/lowcoder/src/i18n/locales/en.ts | 1 + .../packages/lowcoder/src/i18n/locales/zh.ts | 1 + 11 files changed, 105 insertions(+), 42 deletions(-) diff --git a/client/packages/lowcoder-design/src/components/Section.tsx b/client/packages/lowcoder-design/src/components/Section.tsx index 869c0eabf..5b2d70b12 100644 --- a/client/packages/lowcoder-design/src/components/Section.tsx +++ b/client/packages/lowcoder-design/src/components/Section.tsx @@ -142,6 +142,7 @@ export const sectionNames = { validation: trans("prop.validation"), layout: trans("prop.layout"), style: trans("prop.style"), + labelStyle:trans("prop.labelStyle"), data: trans("prop.data"), meetings : trans("prop.meetings"), // added by Falk Wolsky }; diff --git a/client/packages/lowcoder-design/src/i18n/design/locales/en.ts b/client/packages/lowcoder-design/src/i18n/design/locales/en.ts index c6fa81f69..543bb813a 100644 --- a/client/packages/lowcoder-design/src/i18n/design/locales/en.ts +++ b/client/packages/lowcoder-design/src/i18n/design/locales/en.ts @@ -22,6 +22,7 @@ export const en = { advanced: "Advanced", validation: "Validation", layout: "Layout", + labelStyle:"Label Style", style: "Style", meetings : "Meeting Settings", data: "Data", diff --git a/client/packages/lowcoder-design/src/i18n/design/locales/zh.ts b/client/packages/lowcoder-design/src/i18n/design/locales/zh.ts index 3fe60174b..a3622dca0 100644 --- a/client/packages/lowcoder-design/src/i18n/design/locales/zh.ts +++ b/client/packages/lowcoder-design/src/i18n/design/locales/zh.ts @@ -22,6 +22,7 @@ export const zh = { advanced: "高级", validation: "验证", layout: "布局", + labelStyle:"标签样式", style: "样式", meetings: "会议", data: "数据", diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx index fc34bc723..7c89af87f 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 { InputLikeStyle, InputLikeStyleType } from "comps/controls/styleControlConstants"; +import { InputLikeStyle, InputLikeStyleType, LabelStyle, LabelStyleType } from "comps/controls/styleControlConstants"; import { NameConfig, NameConfigPlaceHolder, @@ -38,7 +38,7 @@ import { EditorContext } from "comps/editorState"; * Input Comp */ -const InputStyle = styled(Input)<{ $style: InputLikeStyleType }>` +const InputStyle = styled(Input) <{ $style: InputLikeStyleType}>` ${(props) => props.$style && getStyle(props.$style)} `; @@ -48,6 +48,7 @@ const childrenMap = { showCount: BoolControl, allowClear: BoolControl, style: styleControl(InputLikeStyle), + labelStyle: styleControl(LabelStyle), prefixIcon: IconControl, suffixIcon: IconControl, }; @@ -67,7 +68,7 @@ export const InputComp = new UICompBuilder(childrenMap, (props) => { suffix={hasIcon(props.suffixIcon) && props.suffixIcon} /> ), - style: props.style, + style: props.labelStyle, ...validateState, }); }) @@ -80,22 +81,25 @@ export const InputComp = new UICompBuilder(childrenMap, (props) => { {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( children.label.getPropertyView() )} - + {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && ( <> -
{hiddenPropertyView(children)}
-
- {children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })} - {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })} - {children.showCount.propertyView({ label: trans("prop.showCount") })} - {allowClearPropertyView(children)} - {readOnlyPropertyView(children)} -
- +
{hiddenPropertyView(children)}
+
+ {children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })} + {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })} + {children.showCount.propertyView({ label: trans("prop.showCount") })} + {allowClearPropertyView(children)} + {readOnlyPropertyView(children)} +
+ )} {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( - <>
{children.style.getPropertyView()}
+ <> +
{children.style.getPropertyView()}
+
{children.labelStyle.getPropertyView()}
+ )} ); diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx index 772cbdc51..6773a23f4 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx @@ -9,7 +9,7 @@ import { } from "comps/controls/codeControl"; import { stringExposingStateControl } from "comps/controls/codeStateControl"; import { LabelControl } from "comps/controls/labelControl"; -import { InputLikeStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; +import { InputLikeStyleType, LabelStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; import { Section, sectionNames, ValueFromOption } from "lowcoder-design"; import _ from "lodash"; import { css } from "styled-components"; @@ -217,7 +217,7 @@ export const TextInputValidationSection = (children: TextInputComp) => ( ); -export function getStyle(style: InputLikeStyleType) { +export function getStyle(style: InputLikeStyleType, labelStyle?: LabelStyleType) { return css` border-radius: ${style.radius}; border-width: ${style.borderWidth}; diff --git a/client/packages/lowcoder/src/comps/controls/labelControl.tsx b/client/packages/lowcoder/src/comps/controls/labelControl.tsx index 74a4f26ac..a2fe0947e 100644 --- a/client/packages/lowcoder/src/comps/controls/labelControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/labelControl.tsx @@ -9,13 +9,13 @@ import { MultiCompBuilder } from "comps/generators/multi"; import { labelCss, Section, Tooltip, UnderlineCss } from "lowcoder-design"; import { ValueFromOption } from "lowcoder-design"; import { isEmpty } from "lodash"; -import { ReactNode } from "react"; +import { Fragment, ReactNode } from "react"; import styled, { css } from "styled-components"; import { AlignLeft } from "lowcoder-design"; import { AlignRight } from "lowcoder-design"; import { StarIcon } from "lowcoder-design"; -import { heightCalculator, widthCalculator } from "./styleControlConstants"; +import { LabelStyleType, heightCalculator, widthCalculator } from "./styleControlConstants"; type LabelViewProps = Pick & { children: ReactNode; @@ -75,10 +75,20 @@ const LabelWrapper = styled.div<{ max-width: ${(props) => (props.$position === "row" ? "80%" : "100%")}; flex-shrink: 0; `; - -const Label = styled.span<{ $border: boolean }>` +// ${(props) => props.$border && UnderlineCss}; +const Label = styled.span<{ $border: boolean, $labelStyle: LabelStyleType }>` ${labelCss}; - ${(props) => props.$border && UnderlineCss}; + + font-family:${(props) => props.$labelStyle.fontFamily}; + font-weight:${(props) => props.$labelStyle.fontWeight}; + font-style:${(props) => props.$labelStyle.fontStyle}; + text-transform:${(props) => props.$labelStyle.textTransform}; + text-decoration:${(props) => props.$labelStyle.textDecoration}; + font-size:${(props) => props.$labelStyle.textSize}; + color:${(props) => props.$labelStyle.text}; + ${(props) => props.$border && `border-bottom:${props.$labelStyle.borderWidth} ${props.$labelStyle.borderStyle} ${props.$labelStyle.border};`} + border-radius:${(props) => props.$labelStyle.radius}; + padding:${(props) => props.$labelStyle.padding}; width: fit-content; user-select: text; white-space: nowrap; @@ -144,21 +154,22 @@ export const LabelControl = (function () { position: dropdownControl(PositionOptions, "row"), align: dropdownControl(AlignOptions, "left"), }; + return new MultiCompBuilder(childrenMap, (props) => (args: LabelViewProps) => ( - {!props.hidden && !isEmpty(props.text) && ( node.closest(".react-grid-item")} > - + {args.required && } @@ -210,8 +225,8 @@ export const LabelControl = (function () { args.validateStatus === "error" ? red.primary : args.validateStatus === "warning" - ? yellow.primary - : green.primary + ? yellow.primary + : green.primary } > {args.help} diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx index 109801a97..e9ad4b6d9 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControl.tsx @@ -550,6 +550,7 @@ export function styleControl(colorConfig name === "textTransform" || name === "textDecoration" || name === "fontFamily" || + name === "borderStyle" || name === "fontStyle" || name === "backgroundImage" || name === "backgroundImageRepeat" || @@ -688,6 +689,13 @@ export function styleControl(colorConfig label: config.label, preInputNode: , placeholder: props[name], + }): name === "borderStyle" + ? ( + children[name] as InstanceType + ).propertyView({ + label: config.label, + preInputNode: , + placeholder: props[name], }) : name === "margin" ? ( @@ -731,6 +739,20 @@ export function styleControl(colorConfig label: config.label, preInputNode: , placeholder: props[name], + }): name === "textDecoration" + ? ( + children[name] as InstanceType + ).propertyView({ + label: config.label, + preInputNode: , + placeholder: props[name], + }): name === "textTransform" + ? ( + children[name] as InstanceType + ).propertyView({ + label: config.label, + preInputNode: , + placeholder: props[name], }) : name === "fontStyle" ? ( diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index e36cd9d9b..334270500 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -55,6 +55,10 @@ export type FontStyleConfig = CommonColorConfig & { readonly fontStyle: string; } +export type borderStyleConfig = CommonColorConfig & { + readonly borderStyle: string; +} + export type ContainerHeaderPaddigConfig = CommonColorConfig & { readonly containerheaderpadding: string; }; @@ -88,7 +92,7 @@ export type DepColorConfig = CommonColorConfig & { readonly depType?: DEP_TYPE; transformer: (color: string, ...rest: string[]) => string; }; -export type SingleColorConfig = SimpleColorConfig | DepColorConfig | RadiusConfig | BorderWidthConfig | BackgroundImageConfig | BackgroundImageRepeatConfig | BackgroundImageSizeConfig | BackgroundImagePositionConfig | BackgroundImageOriginConfig | TextSizeConfig | TextWeightConfig | TextTransformConfig | TextDecorationConfig | FontFamilyConfig | FontStyleConfig | MarginConfig | PaddingConfig | ContainerHeaderPaddigConfig | ContainerFooterPaddigConfig | ContainerBodyPaddigConfig | HeaderBackgroundImageConfig | HeaderBackgroundImageRepeatConfig | HeaderBackgroundImageSizeConfig | HeaderBackgroundImagePositionConfig | HeaderBackgroundImageOriginConfig | FooterBackgroundImageConfig | FooterBackgroundImageRepeatConfig | FooterBackgroundImageSizeConfig | FooterBackgroundImagePositionConfig | FooterBackgroundImageOriginConfig; +export type SingleColorConfig = SimpleColorConfig | DepColorConfig | RadiusConfig | BorderWidthConfig | borderStyleConfig | BackgroundImageConfig | BackgroundImageRepeatConfig | BackgroundImageSizeConfig | BackgroundImagePositionConfig | BackgroundImageOriginConfig | TextSizeConfig | TextWeightConfig | TextTransformConfig | TextDecorationConfig | FontFamilyConfig | FontStyleConfig | MarginConfig | PaddingConfig | ContainerHeaderPaddigConfig | ContainerFooterPaddigConfig | ContainerBodyPaddigConfig | HeaderBackgroundImageConfig | HeaderBackgroundImageRepeatConfig | HeaderBackgroundImageSizeConfig | HeaderBackgroundImagePositionConfig | HeaderBackgroundImageOriginConfig | FooterBackgroundImageConfig | FooterBackgroundImageRepeatConfig | FooterBackgroundImageSizeConfig | FooterBackgroundImagePositionConfig | FooterBackgroundImageOriginConfig; export const defaultTheme: ThemeDetail = { primary: "#3377FF", @@ -399,13 +403,19 @@ const TEXT_TRANSFORM = { name: "textTransform", label: trans("style.textTransform"), textTransform: "textTransform" -} +} as const; const TEXT_DECORATION = { name: "textDecoration", label: trans("style.textDecoration"), textDecoration: "textDecoration" -} +} as const; + +const BORDER_STYLE = { + name: "borderStyle", + label: trans("style.borderStyle"), + borderStyle: "borderStyle" +} as const; const getStaticBorder = (color: string = SECOND_SURFACE_COLOR) => ({ @@ -432,6 +442,7 @@ const STYLING_FIELDS_SEQUENCE = [ FONT_FAMILY, FONT_STYLE, BORDER, + BORDER_STYLE, MARGIN, PADDING, RADIUS, @@ -716,12 +727,16 @@ export const SliderStyle = [ ] as const; export const InputLikeStyle = [ - LABEL, + // LABEL, getStaticBackground(SURFACE_COLOR), ...STYLING_FIELDS_SEQUENCE, ...ACCENT_VALIDATE, ] as const; +export const LabelStyle = [ + ...replaceAndMergeMultipleStyles([...InputLikeStyle], 'text', [LABEL]).filter((style) => style.name !== 'radius') +] + export const RatingStyle = [ LABEL, { @@ -800,7 +815,7 @@ export const MultiSelectStyle = [ export const TabContainerStyle = [ // Keep background related properties of container as STYLING_FIELDS_SEQUENCE has rest of the properties - ...replaceAndMergeMultipleStyles([...ContainerStyle.filter((style)=> ['border','radius','borderWidth','margin','padding'].includes(style.name) === false),...STYLING_FIELDS_SEQUENCE], 'text', [{ + ...replaceAndMergeMultipleStyles([...ContainerStyle.filter((style) => ['border', 'radius', 'borderWidth', 'margin', 'padding'].includes(style.name) === false), ...STYLING_FIELDS_SEQUENCE], 'text', [{ name: "tabText", label: trans("style.tabText"), depName: "headerBackground", @@ -888,7 +903,7 @@ export const RadioStyle = [ export const SegmentStyle = [ LABEL, - ...STYLING_FIELDS_SEQUENCE.filter((style)=> ['border','borderWidth'].includes(style.name) === false), + ...STYLING_FIELDS_SEQUENCE.filter((style) => ['border', 'borderWidth'].includes(style.name) === false), { name: "indicatorBackground", label: trans("style.indicatorBackground"), @@ -1361,6 +1376,7 @@ export const RichTextEditorStyle = [ BORDER_WIDTH ] as const; +export type LabelStyleType = StyleConfigType; export type InputLikeStyleType = StyleConfigType; export type ButtonStyleType = StyleConfigType; export type ToggleButtonStyleType = StyleConfigType; diff --git a/client/packages/lowcoder/src/i18n/locales/de.ts b/client/packages/lowcoder/src/i18n/locales/de.ts index 404520788..dbe3f32e4 100644 --- a/client/packages/lowcoder/src/i18n/locales/de.ts +++ b/client/packages/lowcoder/src/i18n/locales/de.ts @@ -301,6 +301,7 @@ export const de = { "border": "Farbe der Umrandung", "borderRadius": "Radius der Grenze", "borderWidth": "Breite des Randes", + "borderStyle":"Grenzstil", "background": "Hintergrund", "headerBackground": "Kopfzeile Hintergrund", "footerBackground": "Fußzeilen-Hintergrund", diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index a01b2c5e9..75985f8c7 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -316,6 +316,7 @@ export const en = { "border": "Border Color", "borderRadius": "Border Radius", "borderWidth": "Border Width", + "borderStyle":"Border Style", "background": "Background", "headerBackground": "Header Background", "footerBackground": "Footer Background", diff --git a/client/packages/lowcoder/src/i18n/locales/zh.ts b/client/packages/lowcoder/src/i18n/locales/zh.ts index ca3e99f49..d40474c2a 100644 --- a/client/packages/lowcoder/src/i18n/locales/zh.ts +++ b/client/packages/lowcoder/src/i18n/locales/zh.ts @@ -307,6 +307,7 @@ style: { border: "边框颜色", borderRadius: "边框半径", borderWidth: "边框宽度", + borderStyle:"边框样式", background: "背景", headerBackground: "头部背景", footerBackground: "底部背景", From 1f164533ea486e9128094289b9dcb0f4a72b4f23 Mon Sep 17 00:00:00 2001 From: Imtanan Aziz Toor Date: Fri, 1 Mar 2024 22:56:13 +0500 Subject: [PATCH 2/4] Label style w.i.p --- .../autoCompleteComp/autoCompleteComp.tsx | 9 ++++-- .../comps/numberInputComp/numberInputComp.tsx | 10 ++++-- .../comps/numberInputComp/rangeSliderComp.tsx | 2 +- .../comps/numberInputComp/sliderComp.tsx | 2 +- .../numberInputComp/sliderCompConstants.tsx | 6 +++- .../comps/selectInputComp/cascaderComp.tsx | 2 +- .../selectInputComp/cascaderContants.tsx | 18 +++++++---- .../comps/selectInputComp/checkboxComp.tsx | 5 +-- .../comps/selectInputComp/multiSelectComp.tsx | 5 +-- .../comps/comps/selectInputComp/radioComp.tsx | 2 +- .../selectInputComp/radioCompConstants.tsx | 6 +++- .../comps/selectInputComp/selectComp.tsx | 7 ++-- .../selectInputComp/selectCompConstants.tsx | 14 +++++--- .../lowcoder/src/comps/comps/switchComp.tsx | 16 +++++++--- .../comps/textInputComp/passwordComp.tsx | 30 +++++++++-------- .../comps/textInputComp/textAreaComp.tsx | 32 +++++++++++-------- .../src/comps/comps/treeComp/treeComp.tsx | 16 ++++++---- .../comps/comps/treeComp/treeSelectComp.tsx | 13 ++++---- .../src/comps/controls/labelControl.tsx | 8 ++--- .../comps/controls/styleControlConstants.tsx | 6 ++-- 20 files changed, 131 insertions(+), 78 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx index 059dd3852..d052bf4cb 100644 --- a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx @@ -5,6 +5,7 @@ import { styleControl } from "comps/controls/styleControl"; import { InputLikeStyle, InputLikeStyleType, + LabelStyle, } from "comps/controls/styleControlConstants"; import { NameConfig, @@ -73,6 +74,7 @@ const childrenMap = { viewRef: RefControl, allowClear: BoolControl.DEFAULT_TRUE, style: styleControl(InputLikeStyle), + labelStyle:styleControl(LabelStyle), prefixIcon: IconControl, suffixIcon: IconControl, items: jsonControl(convertAutoCompleteData, autoCompleteDate), @@ -276,8 +278,8 @@ let AutoCompleteCompBase = (function () { ), - // style: props.style, - // ...validateState, + style: props.labelStyle, + ...validateState, }); }) .setPropertyViewFn((children) => { @@ -335,6 +337,9 @@ let AutoCompleteCompBase = (function () {
{children.style.getPropertyView()}
+
+ {children.labelStyle.getPropertyView()} +
); }) diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx index cb5a7836e..4447ddf2d 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 { InputLikeStyle, InputLikeStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; +import { InputLikeStyle, InputLikeStyleType, LabelStyle, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; import { disabledPropertyView, hiddenPropertyView, @@ -256,6 +256,7 @@ const childrenMap = { onEvent: InputEventHandlerControl, viewRef: RefControl, style: styleControl(InputLikeStyle), + labelStyle:styleControl(LabelStyle), prefixIcon: IconControl, // validation @@ -377,7 +378,7 @@ const NumberInputTmpComp = (function () { return props.label({ required: props.required, children: , - style: props.style, + style: props.labelStyle, ...validate(props), }); }) @@ -425,9 +426,14 @@ const NumberInputTmpComp = (function () { )} {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( + <>
{children.style.getPropertyView()}
+
+ {children.labelStyle.getPropertyView()} +
+ )} )) diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx index bea60397c..a3ff568fe 100644 --- a/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx @@ -14,7 +14,7 @@ const RangeSliderBasicComp = (function () { }; return new UICompBuilder(childrenMap, (props) => { return props.label({ - style: props.style, + style: props.labelStyle, children: ( { diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx index b86b07ef6..4279588a8 100644 --- a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx @@ -18,7 +18,7 @@ const SliderBasicComp = (function () { }; return new UICompBuilder(childrenMap, (props) => { return props.label({ - style: props.style, + style: props.labelStyle, children: ( { diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx index 5e7760acb..601a72c0d 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, sectionNames } from "lowcoder-design"; import { RecordConstructorToComp } from "lowcoder-core"; import { styleControl } from "comps/controls/styleControl"; -import { SliderStyle, SliderStyleType } from "comps/controls/styleControlConstants"; +import { LabelStyle, SliderStyle, SliderStyleType } from "comps/controls/styleControlConstants"; import styled, { css } from "styled-components"; import { default as Slider } from "antd/es/slider"; import { darkenColor, fadeColor } from "lowcoder-design"; @@ -67,6 +67,7 @@ export const SliderChildren = { disabled: BoolCodeControl, onEvent: ChangeEventHandlerControl, style: styleControl(SliderStyle), + labelStyle:styleControl(LabelStyle.filter((style)=> ['accent','validate'].includes(style.name) === false)), prefixIcon: IconControl, suffixIcon: IconControl, }; @@ -96,6 +97,9 @@ export const SliderPropertyView = (
{children.style.getPropertyView()}
+
+ {children.labelStyle.getPropertyView()} +
)} diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx index e89c0e49f..10bc5d5b0 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx @@ -20,7 +20,7 @@ let CascaderBasicComp = (function () { return new UICompBuilder(childrenMap, (props) => { return props.label({ - style: props.style, + style: props.labelStyle, children: ( ['accent', 'validate'].includes(style.name) === false)), showSearch: BoolControl.DEFAULT_TRUE, viewRef: RefControl, - margin: MarginControl, + margin: MarginControl, padding: PaddingControl, }; @@ -71,9 +72,14 @@ export const CascaderPropertyView = ( )} {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( -
- {children.style.getPropertyView()} -
+ <> +
+ {children.style.getPropertyView()} +
+
+ {children.labelStyle.getPropertyView()} +
+ )} ); diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx index f8b154e42..c3e20a636 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx @@ -15,7 +15,7 @@ import { } from "./selectInputConstants"; import { formDataChildren } from "../formComp/formDataConstants"; import { styleControl } from "comps/controls/styleControl"; -import { CheckboxStyle, CheckboxStyleType } from "comps/controls/styleControlConstants"; +import { CheckboxStyle, CheckboxStyleType, LabelStyle } from "comps/controls/styleControlConstants"; import { RadioLayoutOptions, RadioPropertyView } from "./radioCompConstants"; import { dropdownControl } from "../../controls/dropdownControl"; import { ValueFromOption } from "lowcoder-design"; @@ -135,6 +135,7 @@ const CheckboxBasicComp = (function () { onEvent: ChangeEventHandlerControl, options: SelectInputOptionControl, style: styleControl(CheckboxStyle), + labelStyle:styleControl(LabelStyle), layout: dropdownControl(RadioLayoutOptions, "horizontal"), viewRef: RefControl, @@ -148,7 +149,7 @@ const CheckboxBasicComp = (function () { ] = useSelectInputValidate(props); return props.label({ required: props.required, - style: props.style, + style: props.labelStyle, children: ( , @@ -92,7 +93,10 @@ export const RadioPropertyView = ( )} {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + <>
{children.style.getPropertyView()}
+
{children.labelStyle.getPropertyView()}
+ )} ); diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx index 1a30f2522..644c3c958 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx @@ -1,5 +1,5 @@ import { styleControl } from "comps/controls/styleControl"; -import { SelectStyle } from "comps/controls/styleControlConstants"; +import { LabelStyle, SelectStyle } from "comps/controls/styleControlConstants"; import { trans } from "i18n"; import { stringExposingStateControl } from "../../controls/codeStateControl"; import { UICompBuilder } from "../../generators"; @@ -24,6 +24,7 @@ const SelectBasicComp = (function () { defaultValue: stringExposingStateControl("defaultValue"), value: stringExposingStateControl("value"), style: styleControl(SelectStyle), + labelStyle: styleControl(LabelStyle) }; return new UICompBuilder(childrenMap, (props, dispatch) => { const [ @@ -35,10 +36,10 @@ const SelectBasicComp = (function () { propsRef.current = props; const valueSet = new Set(props.options.map((o) => o.value)); // Filter illegal default values entered by the user - + return props.label({ required: props.required, - style: props.style, + style: props.labelStyle, children: ( ControlNode }; value: { propertyView: (params: ControlParams) => ControlNode }; style: { getPropertyView: () => ControlNode }; + labelStyle: { getPropertyView: () => ControlNode }; } ) => ( <> @@ -328,10 +329,15 @@ export const SelectPropertyView = ( {["layout", "both"].includes( useContext(EditorContext).editorModeStatus ) && ( -
- {children.style.getPropertyView()} -
- )} + <> +
+ {children.style.getPropertyView()} +
+
+ {children.labelStyle.getPropertyView()} +
+ + )} ); diff --git a/client/packages/lowcoder/src/comps/comps/switchComp.tsx b/client/packages/lowcoder/src/comps/comps/switchComp.tsx index 3a3ecf955..03e164072 100644 --- a/client/packages/lowcoder/src/comps/comps/switchComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/switchComp.tsx @@ -4,7 +4,7 @@ import { booleanExposingStateControl } from "comps/controls/codeStateControl"; import { changeEvent, eventHandlerControl } from "comps/controls/eventHandlerControl"; import { LabelControl } from "comps/controls/labelControl"; import { styleControl } from "comps/controls/styleControl"; -import { SwitchStyle, SwitchStyleType } from "comps/controls/styleControlConstants"; +import { SwitchStyle, SwitchStyleType, LabelStyle } from "comps/controls/styleControlConstants"; import { migrateOldData } from "comps/generators/simpleGenerators"; import { Section, sectionNames } from "lowcoder-design"; import styled, { css } from "styled-components"; @@ -90,13 +90,14 @@ let SwitchTmpComp = (function () { onEvent: eventHandlerControl(EventOptions), disabled: BoolCodeControl, style: migrateOldData(styleControl(SwitchStyle), fixOldData), + labelStyle: styleControl(LabelStyle), viewRef: RefControl, ...formDataChildren, }; return new UICompBuilder(childrenMap, (props) => { return props.label({ - style: props.style, + style: props.labelStyle, children: ( - {children.style.getPropertyView()} - + <> +
+ {children.style.getPropertyView()} +
+
+ {children.labelStyle.getPropertyView()} +
+ )} ); diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx index b5c3d701d..ff0ab797a 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx @@ -25,7 +25,7 @@ import { import { withMethodExposing } from "../../generators/withMethodExposing"; import { styleControl } from "comps/controls/styleControl"; import styled from "styled-components"; -import { InputLikeStyle, InputLikeStyleType } from "comps/controls/styleControlConstants"; +import { InputLikeStyle, InputLikeStyleType, LabelStyle } from "comps/controls/styleControlConstants"; import { hiddenPropertyView, minLengthPropertyView, @@ -41,7 +41,7 @@ import { RefControl } from "comps/controls/refControl"; import React, { useContext } from "react"; import { EditorContext } from "comps/editorState"; -const PasswordStyle = styled(InputPassword)<{ +const PasswordStyle = styled(InputPassword) <{ $style: InputLikeStyleType; }>` ${(props) => props.$style && getStyle(props.$style)} @@ -56,6 +56,7 @@ const PasswordTmpComp = (function () { visibilityToggle: BoolControl.DEFAULT_TRUE, prefixIcon: IconControl, style: styleControl(InputLikeStyle), + labelStyle: styleControl(LabelStyle) }; return new UICompBuilder(childrenMap, (props) => { const [inputProps, validateState] = useTextInputProps(props); @@ -70,7 +71,7 @@ const PasswordTmpComp = (function () { $style={props.style} /> ), - style: props.style, + style: props.labelStyle, ...validateState, }); }) @@ -86,24 +87,27 @@ const PasswordTmpComp = (function () { {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && ( <> -
{hiddenPropertyView(children)}
-
- {children.visibilityToggle.propertyView({ - label: trans("password.visibilityToggle"), - })} - {readOnlyPropertyView(children)} - {children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })} -
+
{hiddenPropertyView(children)}
+
+ {children.visibilityToggle.propertyView({ + label: trans("password.visibilityToggle"), + })} + {readOnlyPropertyView(children)} + {children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })} +
{requiredPropertyView(children)} {regexPropertyView(children)} {minLengthPropertyView(children)} {maxLengthPropertyView(children)} {children.customRule.propertyView({})} -
+
)} {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( - <>
{children.style.getPropertyView()}
+ <> +
{children.style.getPropertyView()}
+
{children.labelStyle.getPropertyView()}
+ )} ); diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx index e11027a69..a7a155e84 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx @@ -21,7 +21,7 @@ import { import { withMethodExposing, refMethods } from "../../generators/withMethodExposing"; import { styleControl } from "comps/controls/styleControl"; import styled from "styled-components"; -import { InputLikeStyle, InputLikeStyleType } from "comps/controls/styleControlConstants"; +import { InputLikeStyle, InputLikeStyleType, LabelStyle } from "comps/controls/styleControlConstants"; import { TextArea } from "components/TextArea"; import { allowClearPropertyView, @@ -36,7 +36,7 @@ import { blurMethod, focusWithOptions } from "comps/utils/methodUtils"; import React, { useContext } from "react"; import { EditorContext } from "comps/editorState"; -const TextAreaStyled = styled(TextArea)<{ +const TextAreaStyled = styled(TextArea) <{ $style: InputLikeStyleType; }>` ${(props) => props.$style && getStyle(props.$style)} @@ -70,6 +70,7 @@ let TextAreaTmpComp = (function () { allowClear: BoolControl, autoHeight: withDefault(AutoHeightControl, "fixed"), style: styleControl(InputLikeStyle), + labelStyle: styleControl(LabelStyle) }; return new UICompBuilder(childrenMap, (props) => { const [inputProps, validateState] = useTextInputProps(props); @@ -77,7 +78,7 @@ let TextAreaTmpComp = (function () { required: props.required, children: ( - ), - style: props.style, + style: props.labelStyle, ...validateState, }); }) @@ -101,19 +102,22 @@ let TextAreaTmpComp = (function () { {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && ( <> -
- {children.autoHeight.getPropertyView()} - {hiddenPropertyView(children)} -
-
- {allowClearPropertyView(children)} - {readOnlyPropertyView(children)} -
- +
+ {children.autoHeight.getPropertyView()} + {hiddenPropertyView(children)} +
+
+ {allowClearPropertyView(children)} + {readOnlyPropertyView(children)} +
+ )} {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( - <>
{children.style.getPropertyView()}
+ <> +
{children.style.getPropertyView()}
+
{children.labelStyle.getPropertyView()}
+ )} )) diff --git a/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx b/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx index 6474efa9b..06b3b9040 100644 --- a/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx @@ -7,7 +7,7 @@ import { useEffect, useState } from "react"; import styled from "styled-components"; import ReactResizeDetector from "react-resize-detector"; import { StyleConfigType, styleControl } from "comps/controls/styleControl"; -import { TreeStyle } from "comps/controls/styleControlConstants"; +import { LabelStyle, TreeStyle } from "comps/controls/styleControlConstants"; import { LabelControl } from "comps/controls/labelControl"; import { withDefault } from "comps/generators"; import { dropdownControl } from "comps/controls/dropdownControl"; @@ -77,10 +77,11 @@ const childrenMap = { // TODO: more event onEvent: SelectEventHandlerControl, style: styleControl(TreeStyle), + labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)) }; const TreeCompView = (props: RecordConstructorToView) => { - const { treeData, selectType, value, expanded, checkStrictly, style } = props; + const { treeData, selectType, value, expanded, checkStrictly, style, labelStyle } = props; const [height, setHeight] = useState(); const selectable = selectType === "single" || selectType === "multi"; const checkable = selectType === "check"; @@ -95,7 +96,7 @@ const TreeCompView = (props: RecordConstructorToView) => { return props.label({ required: props.required, ...selectInputValidate(props), - style: style, + style: labelStyle, children: ( setHeight(h)}> @@ -166,7 +167,7 @@ let TreeBasicComp = (function () { )} - + {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
{children.expanded.propertyView({ label: trans("tree.expanded") })} @@ -176,10 +177,13 @@ let TreeBasicComp = (function () {
)} - {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( children.label.getPropertyView() )} + {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (children.label.getPropertyView())} {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( -
{children.style.getPropertyView()}
+ <> +
{children.style.getPropertyView()}
+
{children.labelStyle.getPropertyView()}
+ )} )) diff --git a/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx b/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx index ea31712a3..7db2d9e4c 100644 --- a/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx @@ -6,7 +6,7 @@ import { default as TreeSelect } from "antd/es/tree-select"; import { useEffect } from "react"; import styled from "styled-components"; import { styleControl } from "comps/controls/styleControl"; -import { TreeSelectStyle, TreeSelectStyleType } from "comps/controls/styleControlConstants"; +import { LabelStyle, TreeSelectStyle, TreeSelectStyleType } from "comps/controls/styleControlConstants"; import { LabelControl } from "comps/controls/labelControl"; import { dropdownControl } from "comps/controls/dropdownControl"; import { @@ -66,6 +66,7 @@ const childrenMap = { showSearch: BoolControl.DEFAULT_TRUE, inputValue: stateComp(""), // search value style: styleControl(TreeSelectStyle), + labelStyle:styleControl(LabelStyle), viewRef: RefControl, }; @@ -83,7 +84,7 @@ function getCheckedStrategy(v: ValueFromOption) { const TreeCompView = ( props: RecordConstructorToView & { dispatch: DispatchType } ) => { - const { treeData, selectType, value, expanded, style, inputValue } = props; + const { treeData, selectType, value, expanded, style,labelStyle, inputValue } = props; const isSingle = selectType === "single"; const [ validateState, @@ -99,7 +100,7 @@ const TreeCompView = ( return props.label({ required: props.required, ...validateState, - style: style, + style: labelStyle, children: (
{children.style.getPropertyView()}
+
{children.labelStyle.getPropertyView()}
+ )} - - - )) .setExposeMethodConfigs(baseSelectRefMethods) diff --git a/client/packages/lowcoder/src/comps/controls/labelControl.tsx b/client/packages/lowcoder/src/comps/controls/labelControl.tsx index a2fe0947e..48233b318 100644 --- a/client/packages/lowcoder/src/comps/controls/labelControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/labelControl.tsx @@ -76,17 +76,16 @@ const LabelWrapper = styled.div<{ flex-shrink: 0; `; // ${(props) => props.$border && UnderlineCss}; -const Label = styled.span<{ $border: boolean, $labelStyle: LabelStyleType }>` +const Label = styled.span<{ $border: boolean, $labelStyle: LabelStyleType, $validateStatus: "success" | "warning" | "error" | "validating" | null }>` ${labelCss}; - font-family:${(props) => props.$labelStyle.fontFamily}; font-weight:${(props) => props.$labelStyle.fontWeight}; font-style:${(props) => props.$labelStyle.fontStyle}; text-transform:${(props) => props.$labelStyle.textTransform}; text-decoration:${(props) => props.$labelStyle.textDecoration}; font-size:${(props) => props.$labelStyle.textSize}; - color:${(props) => props.$labelStyle.text}; - ${(props) => props.$border && `border-bottom:${props.$labelStyle.borderWidth} ${props.$labelStyle.borderStyle} ${props.$labelStyle.border};`} + color:${(props) => !!props.$validateStatus && props?.$validateStatus === 'error' ? props.$labelStyle.validate : props.$labelStyle.text} !important; + ${(props) => props.$border && `border-bottom:${props.$labelStyle.borderWidth} ${props.$labelStyle.borderStyle} ${!!props.$validateStatus && props?.$validateStatus === 'error' ? props.$labelStyle.validate : props.$labelStyle.border};`} border-radius:${(props) => props.$labelStyle.radius}; padding:${(props) => props.$labelStyle.padding}; width: fit-content; @@ -194,6 +193,7 @@ export const LabelControl = (function () { > diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 4d6d09d0e..3ca944330 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -728,7 +728,7 @@ export const InputLikeStyle = [ ] as const; export const LabelStyle = [ - ...replaceAndMergeMultipleStyles([...InputLikeStyle], 'text', [LABEL]).filter((style) => style.name !== 'radius') + ...replaceAndMergeMultipleStyles([...InputLikeStyle], 'text', [LABEL]).filter((style) => style.name !== 'radius' && style.name !== 'background') ] export const RatingStyle = [ @@ -1153,11 +1153,11 @@ export const ImageStyle = [getStaticBorder("#00000000"), RADIUS, BORDER_WIDTH, M export const IconStyle = [ getStaticBackground("#00000000"), - getStaticBorder("#00000000"), + getStaticBorder("#00000000"), FILL, RADIUS, BORDER_WIDTH, - MARGIN, + MARGIN, PADDING] as const; From 15ee23458c7900f37b9e7c27e1d463551a7ef3c8 Mon Sep 17 00:00:00 2001 From: Imtanan Aziz Toor Date: Mon, 4 Mar 2024 20:35:37 +0500 Subject: [PATCH 3/4] Rating component, signature component ,date component label styling panel and properties added along with default values of latest add CSS properties --- .../src/comps/comps/dateComp/dateComp.tsx | 65 +++++--- .../lowcoder/src/comps/comps/ratingComp.tsx | 32 ++-- .../src/comps/comps/signatureComp.tsx | 23 ++- .../src/comps/controls/styleControl.tsx | 154 +++++++++++------- .../comps/controls/styleControlConstants.tsx | 12 +- 5 files changed, 172 insertions(+), 114 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx index ceeb9a257..2d5030132 100644 --- a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx @@ -20,7 +20,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 { DateTimeStyle, DateTimeStyleType } from "comps/controls/styleControlConstants"; +import { DateTimeStyle, DateTimeStyleType, LabelStyle } from "comps/controls/styleControlConstants"; import { withMethodExposing } from "../../generators/withMethodExposing"; import { disabledPropertyView, @@ -72,6 +72,7 @@ const commonChildren = { minuteStep: RangeControl.closed(1, 60, 1), secondStep: RangeControl.closed(1, 60, 1), style: styleControl(DateTimeStyle), + labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)), suffixIcon: withDefault(IconControl, "/icon:regular/calendar"), ...validationChildren, viewRef: RefControl, @@ -159,12 +160,12 @@ export type DateCompViewProps = Pick< export const datePickerControl = new UICompBuilder(childrenMap, (props) => { let time = dayjs(null); - if(props.value.value !== '') { + if (props.value.value !== '') { time = dayjs(props.value.value, DateParser); } return props.label({ required: props.required, - style: props.style, + style: props.labelStyle, children: ( { {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && ( <>
- {requiredPropertyView(children)} - {dateValidationFields(children)} - {timeValidationFields(children)} - {children.customRule.propertyView({})} -
+ {requiredPropertyView(children)} + {dateValidationFields(children)} + {timeValidationFields(children)} + {children.customRule.propertyView({})} +
{children.onEvent.getPropertyView()} {disabledPropertyView(children)} @@ -234,9 +235,9 @@ export const datePickerControl = new UICompBuilder(childrenMap, (props) => { {children.placeholder.propertyView({ label: trans("date.placeholderText") })}
)} - + {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && ( - <>
+ <>
{timeFields(children, isMobile)} {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
@@ -244,9 +245,14 @@ export const datePickerControl = new UICompBuilder(childrenMap, (props) => { {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && !isMobile && commonAdvanceSection(children)} {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( -
- {children.style.getPropertyView()} -
+ <> +
+ {children.style.getPropertyView()} +
+
+ {children.labelStyle.getPropertyView()} +
+ )} ); @@ -264,10 +270,10 @@ export const dateRangeControl = (function () { return new UICompBuilder(childrenMap, (props) => { let start = dayjs(null); let end = dayjs(null); - if(props.start.value !== '') { + if (props.start.value !== '') { start = dayjs(props.start.value, DateParser); } - if(props.end.value !== '') { + if (props.end.value !== '') { end = dayjs(props.end.value, DateParser); } @@ -309,13 +315,13 @@ export const dateRangeControl = (function () { return props.label({ required: props.required, - style: props.style, + style: props.labelStyle, children: children, ...(startResult.validateStatus !== "success" ? startResult : endResult.validateStatus !== "success" - ? endResult - : startResult), + ? endResult + : startResult), }); }) .setPropertyViewFn((children) => { @@ -337,11 +343,11 @@ export const dateRangeControl = (function () { {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && ( <>
- {requiredPropertyView(children)} - {dateValidationFields(children)} - {timeValidationFields(children)} - {children.customRule.propertyView({})} -
+ {requiredPropertyView(children)} + {dateValidationFields(children)} + {timeValidationFields(children)} + {children.customRule.propertyView({})} +
{children.onEvent.getPropertyView()} {disabledPropertyView(children)} @@ -358,7 +364,7 @@ export const dateRangeControl = (function () { {children.placeholder.propertyView({ label: trans("date.placeholderText") })}
)} - + {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && ( <>
{timeFields(children, isMobile)} @@ -368,9 +374,14 @@ export const dateRangeControl = (function () { {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && commonAdvanceSection(children)} {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( -
- {children.style.getPropertyView()} -
+ <> +
+ {children.style.getPropertyView()} +
+
+ {children.labelStyle.getPropertyView()} +
+ )} diff --git a/client/packages/lowcoder/src/comps/comps/ratingComp.tsx b/client/packages/lowcoder/src/comps/comps/ratingComp.tsx index 40db580ab..a0504d081 100644 --- a/client/packages/lowcoder/src/comps/comps/ratingComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/ratingComp.tsx @@ -10,7 +10,7 @@ import { UICompBuilder, withDefault } from "../generators"; import { CommonNameConfig, NameConfig, withExposingConfigs } from "../generators/withExposing"; import { formDataChildren, FormDataPropertyView } from "./formComp/formDataConstants"; import { styleControl } from "comps/controls/styleControl"; -import { RatingStyle, RatingStyleType } from "comps/controls/styleControlConstants"; +import { LabelStyle, RatingStyle, RatingStyleType } from "comps/controls/styleControlConstants"; import { migrateOldData } from "comps/generators/simpleGenerators"; import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; @@ -44,6 +44,7 @@ const RatingBasicComp = (function () { disabled: BoolCodeControl, onEvent: eventHandlerControl(EventOptions), style: migrateOldData(styleControl(RatingStyle), fixOldData), + labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)), ...formDataChildren, }; return new UICompBuilder(childrenMap, (props) => { @@ -63,7 +64,7 @@ const RatingBasicComp = (function () { }, [value]); return props.label({ - style: props.style, + style: props.labelStyle, children: (
- {children.onEvent.getPropertyView()} - {disabledPropertyView(children)} - {hiddenPropertyView(children)} -
+ {children.onEvent.getPropertyView()} + {disabledPropertyView(children)} + {hiddenPropertyView(children)} +
- {children.allowHalf.propertyView({ - label: trans("rating.allowHalf"), - })} + {children.allowHalf.propertyView({ + label: trans("rating.allowHalf"), + })}
)} @@ -110,9 +111,14 @@ const RatingBasicComp = (function () { )} {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( -
- {children.style.getPropertyView()} -
+ <> +
+ {children.style.getPropertyView()} +
+
+ {children.labelStyle.getPropertyView()} +
+ )} ); @@ -144,6 +150,6 @@ const getStyle = (style: RatingStyleType) => { `; }; -export const RateStyled = styled(Rate)<{ $style: RatingStyleType }>` +export const RateStyled = styled(Rate) <{ $style: RatingStyleType }>` ${(props) => props.$style && getStyle(props.$style)} `; diff --git a/client/packages/lowcoder/src/comps/comps/signatureComp.tsx b/client/packages/lowcoder/src/comps/comps/signatureComp.tsx index 8db397915..0f16be8df 100644 --- a/client/packages/lowcoder/src/comps/comps/signatureComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/signatureComp.tsx @@ -8,6 +8,7 @@ import { styleControl } from "comps/controls/styleControl"; import { contrastColor, SignatureStyle, + LabelStyle, SignatureStyleType, widthCalculator, heightCalculator @@ -38,11 +39,11 @@ const Wrapper = styled.div<{ $style: SignatureStyleType; $isEmpty: boolean }>` overflow: hidden; width: 100%; height: 100%; - width: ${(props) => { - return widthCalculator(props.$style.margin); + width: ${(props) => { + return widthCalculator(props.$style.margin); }}; - height: ${(props) => { - return heightCalculator(props.$style.margin); + height: ${(props) => { + return heightCalculator(props.$style.margin); }}; margin: ${(props) => props.$style.margin}; padding: ${(props) => props.$style.padding}; @@ -98,6 +99,7 @@ const childrenMap = { onEvent: ChangeEventHandlerControl, label: withDefault(LabelControl, { position: "column", text: "" }), style: styleControl(SignatureStyle), + labelStyle: styleControl(LabelStyle), showUndo: withDefault(BoolControl, true), showClear: withDefault(BoolControl, true), value: stateComp(""), @@ -125,7 +127,7 @@ let SignatureTmpComp = (function () { } }; return props.label({ - style: props.style, + style: props.labelStyle, children: ( { @@ -218,9 +220,14 @@ let SignatureTmpComp = (function () { )} {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( -
- {children.style.getPropertyView()} -
+ <> +
+ {children.style.getPropertyView()} +
+
+ {children.labelStyle.getPropertyView()} +
+ )} ); diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx index e9ad4b6d9..880b1a69d 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControl.tsx @@ -53,6 +53,9 @@ import { FooterBackgroundImageSizeConfig, FooterBackgroundImagePositionConfig, FooterBackgroundImageOriginConfig, + TextTransformConfig, + TextDecorationConfig, + borderStyleConfig, } from "./styleControlConstants"; @@ -140,6 +143,15 @@ function isFontFamilyConfig(config: SingleColorConfig): config is FontFamilyConf function isFontStyleConfig(config: SingleColorConfig): config is FontStyleConfig { return config.hasOwnProperty("fontStyle"); } +function isTextTransformConfig(config: SingleColorConfig): config is TextTransformConfig { + return config.hasOwnProperty("textTransform"); +} +function isTextDecorationConfig(config: SingleColorConfig): config is TextDecorationConfig { + return config.hasOwnProperty("textDecoration"); +} +function isBorderStyleConfig(config: SingleColorConfig): config is borderStyleConfig { + return config.hasOwnProperty("borderStyle"); +} function isMarginConfig(config: SingleColorConfig): config is MarginConfig { return config.hasOwnProperty("margin"); @@ -222,6 +234,15 @@ function isEmptyFontFamily(fontFamily: string) { function isEmptyFontStyle(fontStyle: string) { return _.isEmpty(fontStyle); } +function isEmptyTextTransform(textTransform: string) { + return _.isEmpty(textTransform); +} +function isEmptyTextDecoration(textDecoration: string) { + return _.isEmpty(textDecoration); +} +function isEmptyBorderStyle(borderStyle: string) { + return _.isEmpty(borderStyle); +} function isEmptyMargin(margin: string) { return _.isEmpty(margin); @@ -328,6 +349,18 @@ function calcColors>( res[name] = props[name]; return; } + if (!isEmptyTextTransform(props[name]) && isTextTransformConfig(config)) { + res[name] = props[name]; + return; + } + if (!isEmptyTextDecoration(props[name]) && isTextDecorationConfig(config)) { + res[name] = props[name]; + return; + } + if (!isEmptyBorderStyle(props[name]) && isBorderStyleConfig(config)) { + res[name] = props[name]; + return; + } if (!isEmptyMargin(props[name]) && isMarginConfig(config)) { res[name] = props[name]; return; @@ -412,6 +445,15 @@ function calcColors>( if (isFontStyleConfig(config)) { res[name] = themeWithDefault[config.fontStyle] || 'normal' } + if(isTextTransformConfig(config)){ + res[name] = themeWithDefault[config.textTransform] || 'none' + } + if(isTextDecorationConfig(config)){ + res[name] = themeWithDefault[config.textDecoration] || 'none' + } + if(isBorderStyleConfig(config)){ + res[name] = themeWithDefault[config.borderStyle] || 'dashed' + } if (isMarginConfig(config)) { res[name] = themeWithDefault[config.margin]; } @@ -689,126 +731,126 @@ export function styleControl(colorConfig label: config.label, preInputNode: , placeholder: props[name], - }): name === "borderStyle" - ? ( - children[name] as InstanceType - ).propertyView({ - label: config.label, - preInputNode: , - placeholder: props[name], - }) - : name === "margin" + }) : name === "borderStyle" ? ( children[name] as InstanceType ).propertyView({ label: config.label, - preInputNode: , + preInputNode: , placeholder: props[name], }) - : (name === "padding" || - name === "containerheaderpadding" || - name === "containerfooterpadding" || - name === "containerbodypadding") + : name === "margin" ? ( children[name] as InstanceType ).propertyView({ label: config.label, - preInputNode: , + preInputNode: , placeholder: props[name], }) - : name === "textSize" + : (name === "padding" || + name === "containerheaderpadding" || + name === "containerfooterpadding" || + name === "containerbodypadding") ? ( children[name] as InstanceType ).propertyView({ label: config.label, - preInputNode: , + preInputNode: , placeholder: props[name], }) - : name === "textWeight" + : name === "textSize" ? ( children[name] as InstanceType ).propertyView({ label: config.label, - preInputNode: , + preInputNode: , placeholder: props[name], }) - : name === "fontFamily" + : name === "textWeight" ? ( children[name] as InstanceType ).propertyView({ label: config.label, - preInputNode: , - placeholder: props[name], - }): name === "textDecoration" - ? ( - children[name] as InstanceType - ).propertyView({ - label: config.label, - preInputNode: , - placeholder: props[name], - }): name === "textTransform" - ? ( - children[name] as InstanceType - ).propertyView({ - label: config.label, - preInputNode: , + preInputNode: , placeholder: props[name], }) - : name === "fontStyle" + : name === "fontFamily" ? ( children[name] as InstanceType ).propertyView({ label: config.label, - preInputNode: , + preInputNode: , placeholder: props[name], - }) - : name === "backgroundImage" || name === "headerBackgroundImage" || name === "footerBackgroundImage" + }) : name === "textDecoration" ? ( children[name] as InstanceType ).propertyView({ label: config.label, - preInputNode: , + preInputNode: , placeholder: props[name], - }) - : name === "backgroundImageRepeat" || name === "headerBackgroundImageRepeat" || name === "footerBackgroundImageRepeat" + }) : name === "textTransform" ? ( children[name] as InstanceType ).propertyView({ label: config.label, - preInputNode: , + preInputNode: , placeholder: props[name], }) - : name === "backgroundImageSize" || name === "headerBackgroundImageSize" || name === "footerBackgroundImageSize" + : name === "fontStyle" ? ( children[name] as InstanceType ).propertyView({ label: config.label, - preInputNode: , + preInputNode: , placeholder: props[name], }) - : name === "backgroundImagePosition" || name === "headerBackgroundImagePosition" || name === "footerBackgroundImagePosition" + : name === "backgroundImage" || name === "headerBackgroundImage" || name === "footerBackgroundImage" ? ( children[name] as InstanceType ).propertyView({ label: config.label, - preInputNode: , + preInputNode: , placeholder: props[name], }) - : name === "backgroundImageOrigin" || name === "headerBackgroundImageOrigin" || name === "footerBackgroundImageOrigin" + : name === "backgroundImageRepeat" || name === "headerBackgroundImageRepeat" || name === "footerBackgroundImageRepeat" ? ( children[name] as InstanceType ).propertyView({ label: config.label, - preInputNode: , + preInputNode: , placeholder: props[name], }) - : children[name].propertyView({ - label: config.label, - panelDefaultColor: props[name], - // isDep: isDepColorConfig(config), - isDep: true, - depMsg: depMsg, - })} + : name === "backgroundImageSize" || name === "headerBackgroundImageSize" || name === "footerBackgroundImageSize" + ? ( + children[name] as InstanceType + ).propertyView({ + label: config.label, + preInputNode: , + placeholder: props[name], + }) + : name === "backgroundImagePosition" || name === "headerBackgroundImagePosition" || name === "footerBackgroundImagePosition" + ? ( + children[name] as InstanceType + ).propertyView({ + label: config.label, + preInputNode: , + placeholder: props[name], + }) + : name === "backgroundImageOrigin" || name === "headerBackgroundImageOrigin" || name === "footerBackgroundImageOrigin" + ? ( + children[name] as InstanceType + ).propertyView({ + label: config.label, + preInputNode: , + placeholder: props[name], + }) + : children[name].propertyView({ + label: config.label, + panelDefaultColor: props[name], + // isDep: isDepColorConfig(config), + isDep: true, + depMsg: depMsg, + })} ); })} diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 3ca944330..5aeec739c 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -701,7 +701,6 @@ export const ContainerFooterStyle = [ ] as const; export const SliderStyle = [ - LABEL, FILL, { name: "thumbBoder", @@ -721,7 +720,6 @@ export const SliderStyle = [ ] as const; export const InputLikeStyle = [ - // LABEL, getStaticBackground(SURFACE_COLOR), ...STYLING_FIELDS_SEQUENCE, ...ACCENT_VALIDATE, @@ -732,7 +730,6 @@ export const LabelStyle = [ ] export const RatingStyle = [ - LABEL, { name: "checked", label: trans("style.checked"), @@ -748,7 +745,6 @@ export const RatingStyle = [ ] as const; export const SwitchStyle = [ - LABEL, { name: "handle", label: trans("style.handle"), @@ -838,7 +834,6 @@ export const ModalStyle = [ ] as const; export const CascaderStyle = [ - LABEL, ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc"), TEXT, ACCENT, @@ -870,7 +865,7 @@ function checkAndUncheck() { } export const CheckboxStyle = [ - ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [LABEL, STATIC_TEXT, VALIDATE]).filter((style) => style.name !== 'border'), + ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [STATIC_TEXT, VALIDATE]).filter((style) => style.name !== 'border'), ...checkAndUncheck(), { name: "checked", @@ -883,7 +878,7 @@ export const CheckboxStyle = [ ] as const; export const RadioStyle = [ - ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [LABEL, STATIC_TEXT, VALIDATE]).filter((style) => style.name !== 'border' && style.name !== 'radius'), + ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [STATIC_TEXT, VALIDATE]).filter((style) => style.name !== 'border' && style.name !== 'radius'), ...checkAndUncheck(), { name: "checked", @@ -1055,7 +1050,6 @@ export const FileViewerStyle = [ export const IframeStyle = [getBackground(), getStaticBorder("#00000000"), RADIUS, BORDER_WIDTH, MARGIN, PADDING] as const; export const DateTimeStyle = [ - LABEL, ...getStaticBgBorderRadiusByBg(SURFACE_COLOR), TEXT, MARGIN, @@ -1202,7 +1196,6 @@ export const TimeLineStyle = [ ] as const; export const TreeStyle = [ - LABEL, ...getStaticBgBorderRadiusByBg(SURFACE_COLOR), TEXT, VALIDATE, @@ -1259,7 +1252,6 @@ export const CalendarStyle = [ ] as const; export const SignatureStyle = [ - LABEL, ...getBgBorderRadiusByBg(), { name: "pen", From e9a17d7735b01529065e948e679362385e3a88dd Mon Sep 17 00:00:00 2001 From: Imtanan Aziz Toor Date: Thu, 7 Mar 2024 17:33:27 +0500 Subject: [PATCH 4/4] Fixed issue when apply bulk margin and padding --- .../lowcoder-design/src/components/Label.tsx | 1 - .../comps/autoCompleteComp/autoCompleteComp.tsx | 3 ++- .../lowcoder/src/comps/comps/dateComp/dateComp.tsx | 6 ++++-- .../comps/comps/numberInputComp/numberInputComp.tsx | 3 ++- .../comps/comps/numberInputComp/rangeSliderComp.tsx | 5 +++-- .../src/comps/comps/numberInputComp/sliderComp.tsx | 3 ++- .../packages/lowcoder/src/comps/comps/ratingComp.tsx | 3 ++- .../src/comps/comps/selectInputComp/cascaderComp.tsx | 3 ++- .../src/comps/comps/selectInputComp/checkboxComp.tsx | 9 +++++---- .../comps/comps/selectInputComp/multiSelectComp.tsx | 3 ++- .../src/comps/comps/selectInputComp/radioComp.tsx | 3 ++- .../src/comps/comps/selectInputComp/selectComp.tsx | 3 ++- .../lowcoder/src/comps/comps/signatureComp.tsx | 3 ++- .../packages/lowcoder/src/comps/comps/switchComp.tsx | 5 +++-- .../src/comps/comps/textInputComp/inputComp.tsx | 5 +++-- .../src/comps/comps/textInputComp/passwordComp.tsx | 3 ++- .../src/comps/comps/textInputComp/textAreaComp.tsx | 5 +++-- .../comps/comps/textInputComp/textInputConstants.tsx | 2 +- .../lowcoder/src/comps/comps/treeComp/treeComp.tsx | 3 ++- .../src/comps/comps/treeComp/treeSelectComp.tsx | 3 ++- .../lowcoder/src/comps/controls/labelControl.tsx | 12 ++++++++---- 21 files changed, 54 insertions(+), 32 deletions(-) diff --git a/client/packages/lowcoder-design/src/components/Label.tsx b/client/packages/lowcoder-design/src/components/Label.tsx index 0ec5cce40..91b846acb 100644 --- a/client/packages/lowcoder-design/src/components/Label.tsx +++ b/client/packages/lowcoder-design/src/components/Label.tsx @@ -5,7 +5,6 @@ export const labelCss: any = css` user-select: none; font-size: 13px; - color: #222222; &:hover { cursor: default; diff --git a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx index d052bf4cb..ab1a992fa 100644 --- a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx @@ -278,7 +278,8 @@ let AutoCompleteCompBase = (function () { ), - style: props.labelStyle, + style: props.style, + labelStyle:props.labelStyle, ...validateState, }); }) diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx index 2d5030132..2977a60e2 100644 --- a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx @@ -165,7 +165,8 @@ export const datePickerControl = new UICompBuilder(childrenMap, (props) => { } return props.label({ required: props.required, - style: props.labelStyle, + style: props.style, + labelStyle:props.labelStyle, children: ( , - style: props.labelStyle, + style: props.style, + labelStyle:props.labelStyle, ...validate(props), }); }) diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx index a3ff568fe..7deb69530 100644 --- a/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx @@ -14,7 +14,8 @@ const RangeSliderBasicComp = (function () { }; return new UICompBuilder(childrenMap, (props) => { return props.label({ - style: props.labelStyle, + style: props.style, + labelStyle: props.labelStyle, children: ( { @@ -28,7 +29,7 @@ const RangeSliderBasicComp = (function () { range={true} value={[props.start.value, props.end.value]} $style={props.style} - style={{margin: 0}} + style={{ margin: 0 }} onChange={([start, end]) => { props.start.onChange(start); props.end.onChange(end); diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx index 4279588a8..23181e5d8 100644 --- a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx @@ -18,7 +18,8 @@ const SliderBasicComp = (function () { }; return new UICompBuilder(childrenMap, (props) => { return props.label({ - style: props.labelStyle, + style: props.style, + labelStyle:props.labelStyle, children: ( { diff --git a/client/packages/lowcoder/src/comps/comps/ratingComp.tsx b/client/packages/lowcoder/src/comps/comps/ratingComp.tsx index a0504d081..df93e688c 100644 --- a/client/packages/lowcoder/src/comps/comps/ratingComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/ratingComp.tsx @@ -64,7 +64,8 @@ const RatingBasicComp = (function () { }, [value]); return props.label({ - style: props.labelStyle, + style: props.style, + labelStyle: props.labelStyle, children: ( { return props.label({ - style: props.labelStyle, + style: props.style, + labelStyle:props.labelStyle, children: ( { &:hover .ant-checkbox-inner, .ant-checkbox:hover .ant-checkbox-inner, .ant-checkbox-input + ant-checkbox-inner { - background-color:${style.hoverBackground ? style.hoverBackground :'#fff'}; + background-color:${style.hoverBackground ? style.hoverBackground : '#fff'}; } &:hover .ant-checkbox-checked .ant-checkbox-inner, .ant-checkbox:hover .ant-checkbox-inner, .ant-checkbox-input + ant-checkbox-inner { - background-color:${style.hoverBackground ? style.hoverBackground:'#ffff'}; + background-color:${style.hoverBackground ? style.hoverBackground : '#ffff'}; } &:hover .ant-checkbox-inner, @@ -135,7 +135,7 @@ const CheckboxBasicComp = (function () { onEvent: ChangeEventHandlerControl, options: SelectInputOptionControl, style: styleControl(CheckboxStyle), - labelStyle:styleControl(LabelStyle), + labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)), layout: dropdownControl(RadioLayoutOptions, "horizontal"), viewRef: RefControl, @@ -149,7 +149,8 @@ const CheckboxBasicComp = (function () { ] = useSelectInputValidate(props); return props.label({ required: props.required, - style: props.labelStyle, + style: props.style, + labelStyle: props.labelStyle, children: ( { diff --git a/client/packages/lowcoder/src/comps/comps/switchComp.tsx b/client/packages/lowcoder/src/comps/comps/switchComp.tsx index 03e164072..70c6a4379 100644 --- a/client/packages/lowcoder/src/comps/comps/switchComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/switchComp.tsx @@ -90,14 +90,15 @@ let SwitchTmpComp = (function () { onEvent: eventHandlerControl(EventOptions), disabled: BoolCodeControl, style: migrateOldData(styleControl(SwitchStyle), fixOldData), - labelStyle: styleControl(LabelStyle), + labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)), viewRef: RefControl, ...formDataChildren, }; return new UICompBuilder(childrenMap, (props) => { return props.label({ - style: props.labelStyle, + style: props.style, + labelStyle:props.labelStyle, children: ( ` +const InputStyle = styled(Input) <{ $style: InputLikeStyleType }>` ${(props) => props.$style && getStyle(props.$style)} `; @@ -68,7 +68,8 @@ export const InputComp = new UICompBuilder(childrenMap, (props) => { suffix={hasIcon(props.suffixIcon) && props.suffixIcon} /> ), - style: props.labelStyle, + style: props.style, + labelStyle: props.labelStyle, ...validateState, }); }) diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx index ff0ab797a..2a3a23f67 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx @@ -71,7 +71,8 @@ const PasswordTmpComp = (function () { $style={props.style} /> ), - style: props.labelStyle, + style: props.style, + labelStyle:props.labelStyle, ...validateState, }); }) diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx index a7a155e84..a47028235 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx @@ -46,7 +46,7 @@ const Wrapper = styled.div<{ $style: InputLikeStyleType; }>` height: 100% !important; - + .ant-input { height:100% !important; } @@ -87,7 +87,8 @@ let TextAreaTmpComp = (function () { /> ), - style: props.labelStyle, + style: props.style, + labelStyle: props.labelStyle, ...validateState, }); }) diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx index 6f244ef2c..cfbe94c41 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx @@ -250,7 +250,7 @@ export function getStyle(style: InputLikeStyleType, labelStyle?: LabelStyleType) font-style:${style.fontStyle}; text-transform:${style.textTransform}; text-decoration:${style.textDecoration}; - background-color: ${style.background}; + // background-color: ${style.background}; border-color: ${style.border}; &:focus, diff --git a/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx b/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx index 06b3b9040..753df6688 100644 --- a/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx @@ -96,7 +96,8 @@ const TreeCompView = (props: RecordConstructorToView) => { return props.label({ required: props.required, ...selectInputValidate(props), - style: labelStyle, + style, + labelStyle, children: ( setHeight(h)}> diff --git a/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx b/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx index 7db2d9e4c..de15121b3 100644 --- a/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx @@ -100,7 +100,8 @@ const TreeCompView = ( return props.label({ required: props.required, ...validateState, - style: labelStyle, + style, + labelStyle, children: ( & { children: ReactNode; style?: Record; + labelStyle?: Record; }; const StyledStarIcon = styled(StarIcon)` @@ -76,18 +77,21 @@ const LabelWrapper = styled.div<{ flex-shrink: 0; `; // ${(props) => props.$border && UnderlineCss}; +// ${(props) => props.$border && `border-bottom:${props.$labelStyle.borderWidth} ${props.$labelStyle.borderStyle} ${!!props.$validateStatus && props?.$validateStatus === 'error' ? props.$labelStyle.validate : props.$labelStyle.border};`} + const Label = styled.span<{ $border: boolean, $labelStyle: LabelStyleType, $validateStatus: "success" | "warning" | "error" | "validating" | null }>` ${labelCss}; font-family:${(props) => props.$labelStyle.fontFamily}; - font-weight:${(props) => props.$labelStyle.fontWeight}; + font-weight:${(props) => props.$labelStyle.textWeight}; font-style:${(props) => props.$labelStyle.fontStyle}; text-transform:${(props) => props.$labelStyle.textTransform}; text-decoration:${(props) => props.$labelStyle.textDecoration}; font-size:${(props) => props.$labelStyle.textSize}; - color:${(props) => !!props.$validateStatus && props?.$validateStatus === 'error' ? props.$labelStyle.validate : props.$labelStyle.text} !important; - ${(props) => props.$border && `border-bottom:${props.$labelStyle.borderWidth} ${props.$labelStyle.borderStyle} ${!!props.$validateStatus && props?.$validateStatus === 'error' ? props.$labelStyle.validate : props.$labelStyle.border};`} + color:${(props) => !!props.$validateStatus && props?.$validateStatus === 'error' ? props.$labelStyle.validate : props.$labelStyle.label} !important; + ${(props) => `border-bottom:${props.$labelStyle.borderWidth} ${props.$labelStyle.borderStyle} ${!!props.$validateStatus && props?.$validateStatus === 'error' ? props.$labelStyle.validate : props.$labelStyle.border};`} border-radius:${(props) => props.$labelStyle.radius}; padding:${(props) => props.$labelStyle.padding}; + margin:${(props) => props.$labelStyle.margin}; width: fit-content; user-select: text; white-space: nowrap; @@ -194,7 +198,7 @@ export const LabelControl = (function () {