From 5a4e1c4f22c8312db7ada1ebbfb7fae290510d1a Mon Sep 17 00:00:00 2001 From: Imtanan Aziz Toor Date: Tue, 20 Feb 2024 17:50:59 +0500 Subject: [PATCH 1/2] Common style config added, number input component updated, link component fixes --- .../src/comps/comps/buttonComp/linkComp.tsx | 17 +-- .../comps/numberInputComp/numberInputComp.tsx | 25 ++-- .../comps/controls/styleControlConstants.tsx | 114 ++++++++---------- 3 files changed, 75 insertions(+), 81 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx index 65b288bac..1d41ad334 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx @@ -23,7 +23,7 @@ import { RefControl } from "comps/controls/refControl"; import { EditorContext } from "comps/editorState"; import React, { useContext } from "react"; -const Link = styled(Button)<{ $style: LinkStyleType }>` +const Link = styled(Button) <{ $style: LinkStyleType }>` ${(props) => ` color: ${props.$style.text}; margin: ${props.$style.margin}; @@ -31,6 +31,7 @@ const Link = styled(Button)<{ $style: LinkStyleType }>` font-size: ${props.$style.textSize}; font-style:${props.$style.fontStyle}; font-family:${props.$style.fontFamily}; + font-weight:${props.$style.textWeight}; border: ${props.$style.borderWidth} solid ${props.$style.border}; background-color: ${props.$style.background}; &:hover { @@ -118,15 +119,15 @@ const LinkTmpComp = (function () { {hiddenPropertyView(children)} {loadingPropertyView(children)} -
- {children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })} - {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })} -
+
+ {children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })} + {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })} +
)} - {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( - <>
{children.style.getPropertyView()}
- )} + {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( + <>
{children.style.getPropertyView()}
+ )} ); }) diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx index f1c917521..26fb58169 100644 --- a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx @@ -56,6 +56,7 @@ import { EditorContext } from "comps/editorState"; const getStyle = (style: InputLikeStyleType) => { return css` border-radius: ${style.radius}; + border-width:${style.borderWidth} !important; // still use antd style when disabled &:not(.ant-input-number-disabled) { color: ${style.text}; @@ -78,11 +79,17 @@ const getStyle = (style: InputLikeStyleType) => { } .ant-input-number { margin: 0; + } - .ant-input-number input { + .ant-input-number-input { margin: 0; padding: ${style.padding}; height: ${heightCalculator(style.margin)}; + color:${style.text}; + font-family:${style.fontFamily} !important; + font-weight:${style.textWeight} !important; + font-size:${style.textSize} !important; + font-style:${style.fontStyle} !important; } .ant-input-number-handler-wrap { @@ -110,7 +117,7 @@ const getStyle = (style: InputLikeStyleType) => { `; }; -const InputNumber = styled(AntdInputNumber)<{ +const InputNumber = styled(AntdInputNumber) <{ $style: InputLikeStyleType; }>` width: 100%; @@ -377,15 +384,15 @@ const NumberInputTmpComp = (function () { {children.max.propertyView({ label: trans("prop.maximum") })} {children.customRule.propertyView({})} -
- {children.onEvent.getPropertyView()} - {disabledPropertyView(children)} - {hiddenPropertyView(children)} -
+
+ {children.onEvent.getPropertyView()} + {disabledPropertyView(children)} + {hiddenPropertyView(children)} +
)} - - {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( + + {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( children.label.getPropertyView() )} diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 86189ba5a..347c7ede3 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -397,6 +397,18 @@ const HEADER_BACKGROUND = { } as const; const BG_STATIC_BORDER_RADIUS = [getBackground(), getStaticBorder(), RADIUS] as const; +const STYLING_FIELDS_SEQUENCE = [ + TEXT, + TEXT_SIZE, + TEXT_WEIGHT, + FONT_FAMILY, + FONT_STYLE, + BORDER, + MARGIN, + PADDING, + RADIUS, + BORDER_WIDTH, +] const FILL = { name: "fill", @@ -450,34 +462,23 @@ function getStaticBackground(color: string) { export const ButtonStyle = [ ...getBgBorderRadiusByBg("primary"), - BORDER_WIDTH, - TEXT, - TEXT_SIZE, - TEXT_WEIGHT, - FONT_FAMILY, - FONT_STYLE, - MARGIN, - PADDING + ...STYLING_FIELDS_SEQUENCE ] as const; export const ToggleButtonStyle = [ getBackground("canvas"), - { - name: "border", - label: trans("style.border"), - depName: "text", - depType: DEP_TYPE.SELF, - transformer: toSelf, - }, - RADIUS, - BORDER_WIDTH, - TEXT, - TEXT_SIZE, - TEXT_WEIGHT, - FONT_FAMILY, - FONT_STYLE, - MARGIN, - PADDING, + ...STYLING_FIELDS_SEQUENCE.map((style) => { + if (style.name === 'border') { + return { + ...style, + depType: DEP_TYPE.SELF, + transformer: toSelf + } + } + return { + ...style + } + }) ] as const; export const TextStyle = [ @@ -488,14 +489,7 @@ export const TextStyle = [ depType: DEP_TYPE.SELF, transformer: toSelf, }, - TEXT, - TEXT_SIZE, - TEXT_WEIGHT, - FONT_FAMILY, - FONT_STYLE, - BORDER, - MARGIN, - PADDING, + ...STYLING_FIELDS_SEQUENCE, { name: "links", label: trans("style.links"), @@ -503,8 +497,6 @@ export const TextStyle = [ depType: DEP_TYPE.SELF, transformer: toSelf, }, - RADIUS, - BORDER_WIDTH, ] as const; export const MarginStyle = [ @@ -681,15 +673,16 @@ export const SliderStyle = [ export const InputLikeStyle = [ LABEL, - ...getStaticBgBorderRadiusByBg(SURFACE_COLOR), - BORDER_WIDTH, - TEXT, - TEXT_SIZE, - TEXT_WEIGHT, - FONT_FAMILY, - FONT_STYLE, - MARGIN, - PADDING, + getStaticBackground(SURFACE_COLOR), + // TEXT, + // TEXT_SIZE, + // TEXT_WEIGHT, + // FONT_FAMILY, + // FONT_STYLE, + // MARGIN, + // PADDING, + // BORDER_WIDTH, + ...STYLING_FIELDS_SEQUENCE, ...ACCENT_VALIDATE, ] as const; @@ -1046,7 +1039,7 @@ function handleToHoverLink(color: string) { } export const LinkStyle = [ - ...LinkTextStyle, + { name: "background", label: trans("style.background"), @@ -1054,13 +1047,8 @@ export const LinkStyle = [ depType: DEP_TYPE.SELF, transformer: toSelf, }, - MARGIN, - PADDING, - FONT_FAMILY, - FONT_STYLE, - BORDER, - BORDER_WIDTH, - TEXT_SIZE + ...LinkTextStyle, + ...STYLING_FIELDS_SEQUENCE.filter((style) => style.name !== 'text') ] as const; export const DividerStyle = [ @@ -1069,19 +1057,17 @@ export const DividerStyle = [ label: trans("color"), color: lightenColor(SECOND_SURFACE_COLOR, 0.05), }, - BORDER_WIDTH, - MARGIN, - PADDING, - { - name: "text", - label: trans("text"), - depName: "color", - transformer: handleToDividerText, - }, - TEXT_SIZE, - TEXT_WEIGHT, - FONT_FAMILY, - FONT_STYLE + ...STYLING_FIELDS_SEQUENCE.map((style) => { + if (style.name === 'text') { + return { + name: "text", + label: trans("text"), + depName: "color", + transformer: handleToDividerText, + } + } + return style + }) ] as const; export const ProgressStyle = [ From a05565641865638af180f5ce36571dcdf86e3b43 Mon Sep 17 00:00:00 2001 From: Imtanan Aziz Toor Date: Wed, 21 Feb 2024 20:21:33 +0500 Subject: [PATCH 2/2] Creating function that helps to replace style from common style array with special array of styles, so individual styles of a component also can be handled, progress bar component updated --- .../lowcoder/src/comps/comps/progressComp.tsx | 3 ++ .../comps/controls/styleControlConstants.tsx | 33 +++++++++++-------- 2 files changed, 22 insertions(+), 14 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/progressComp.tsx b/client/packages/lowcoder/src/comps/comps/progressComp.tsx index 1acf7f2d6..76c5f4aef 100644 --- a/client/packages/lowcoder/src/comps/comps/progressComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/progressComp.tsx @@ -18,6 +18,9 @@ const getStyle = (style: ProgressStyleType) => { line-height: 2; .ant-progress-text { color: ${style.text}; + font-style:${style.fontStyle}; + font-family:${style.fontFamily}; + font-weight:${style.textWeight}; } width: ${widthCalculator(style.margin)}; height: ${heightCalculator(style.margin)}; diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 347c7ede3..9c45f893a 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -460,6 +460,21 @@ function getStaticBackground(color: string) { } as const; } + +function replaceAndMergeMultipleStyles(originalArray: any[], styleToReplace: string, replacingStyles: any[]): any[] { + let temp = [] + let foundIndex = originalArray.findIndex((element) => element.name === styleToReplace) + + if (foundIndex !== -1) { + let elementsBeforeFoundIndex = originalArray.filter((item, index) => index < foundIndex) + let elementsAfterFoundIndex = originalArray.filter((item, index) => index > foundIndex) + temp = [...elementsBeforeFoundIndex, ...replacingStyles, ...elementsAfterFoundIndex] + } else + temp = [...originalArray] + + return temp +} + export const ButtonStyle = [ ...getBgBorderRadiusByBg("primary"), ...STYLING_FIELDS_SEQUENCE @@ -674,14 +689,6 @@ export const SliderStyle = [ export const InputLikeStyle = [ LABEL, getStaticBackground(SURFACE_COLOR), - // TEXT, - // TEXT_SIZE, - // TEXT_WEIGHT, - // FONT_FAMILY, - // FONT_STYLE, - // MARGIN, - // PADDING, - // BORDER_WIDTH, ...STYLING_FIELDS_SEQUENCE, ...ACCENT_VALIDATE, ] as const; @@ -1047,8 +1054,7 @@ export const LinkStyle = [ depType: DEP_TYPE.SELF, transformer: toSelf, }, - ...LinkTextStyle, - ...STYLING_FIELDS_SEQUENCE.filter((style) => style.name !== 'text') + ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [...LinkTextStyle]) ] as const; export const DividerStyle = [ @@ -1070,19 +1076,18 @@ export const DividerStyle = [ }) ] as const; +// Hidden border and borderWidth properties as AntD doesnt allow these properties for progress bar export const ProgressStyle = [ - { + ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [{ name: "text", label: trans("text"), depTheme: "canvas", depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, - }, + }]).filter((style)=> ['border','borderWidth'].includes(style.name) === false), TRACK, FILL, SUCCESS, - MARGIN, - PADDING, ] as const; export const NavigationStyle = [