From f80bc3e5353b46ffab782f9c1c5009d1d206fcef Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Tue, 7 May 2024 20:39:36 +0500 Subject: [PATCH 01/23] translations added --- client/packages/lowcoder-design/src/i18n/design/locales/en.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) 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 b2bd85625..86a7c2af1 100644 --- a/client/packages/lowcoder-design/src/i18n/design/locales/en.ts +++ b/client/packages/lowcoder-design/src/i18n/design/locales/en.ts @@ -28,7 +28,9 @@ export const en = { meetings: "Meeting Settings", data: "Data", field: 'Field', - inputFieldStyle:'Input Field Style' + inputFieldStyle: 'Input Field Style', + avatarStyle: 'Avatar Style', + captionStyle: 'Caption Style', }, passwordInput: { label: "Password:", From a3e93b9a9961b2a0f873c5d997c9550da56e990a Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Tue, 7 May 2024 20:40:04 +0500 Subject: [PATCH 02/23] avatar translations updated --- client/packages/lowcoder/src/i18n/locales/en.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index 4a4a0a2a1..d8fc93403 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -1495,13 +1495,14 @@ export const en = { "src": "src", "avatarCompTooltip": "The display priority is: image -> characters -> icon. Depending on what is first available.", "iconSize": "Icon Size", - "avatarBackground": "Icon Background", + "avatarBackground": "Background", "label": "Label", "caption": "Caption", "labelPosition": "Position", "alignmentPosition": "alignment", "text": "Text", - "enableDropDown": "Enable DropDown" + "enableDropDown": "Enable DropDown", + "containerBackground": "Background" }, "card": { From c0e1de9f71ba540456ca0a4ed764142cd60508bf Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Tue, 7 May 2024 20:40:16 +0500 Subject: [PATCH 03/23] avatar styles added --- .../comps/controls/styleControlConstants.tsx | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 15ffa3210..8d2972f27 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -817,16 +817,16 @@ export const AvatarStyle = [ color: '#bfbfbf', }, FILL, - { - name: "label", - label: trans("avatarComp.label"), - color: '#000000', - }, - { - name: "caption", - label: trans("avatarComp.caption"), - color: '#a5a5a5', - }, +] as const; + +export const avatarContainerStyle = [ + getStaticBackground(SURFACE_COLOR), + ...STYLING_FIELDS_CONTAINER_SEQUENCE +] as const; + +export const avatarLabelStyle = [ + getStaticBackground(SURFACE_COLOR), + ...STYLING_FIELDS_SEQUENCE ] as const; export const avatarGroupStyle = [ @@ -1578,6 +1578,8 @@ export const RichTextEditorStyle = [ export type QRCodeStyleType = StyleConfigType; export type AvatarStyleType = StyleConfigType; +export type AvatarLabelStyleType = StyleConfigType; +export type AvatarContainerStyleType = StyleConfigType; export type AvatarGroupStyleType = StyleConfigType; export type FloatButtonStyleType = StyleConfigType; export type TransferStyleType = StyleConfigType; From cf0a209925a2256026587e5e2ba3ff176a80535d Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Tue, 7 May 2024 20:40:31 +0500 Subject: [PATCH 04/23] section updated --- client/packages/lowcoder-design/src/components/Section.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/client/packages/lowcoder-design/src/components/Section.tsx b/client/packages/lowcoder-design/src/components/Section.tsx index f0d2d14d8..a76581294 100644 --- a/client/packages/lowcoder-design/src/components/Section.tsx +++ b/client/packages/lowcoder-design/src/components/Section.tsx @@ -149,5 +149,7 @@ export const sectionNames = { data: trans("prop.data"), meetings: trans("prop.meetings"), // added by Falk Wolsky field: trans("prop.field"), - inputFieldStyle:trans("prop.inputFieldStyle") + inputFieldStyle:trans("prop.inputFieldStyle"), + avatarStyle:trans("prop.avatarStyle"), + captionStyle:trans("prop.captionStyle"), }; From e9235901670591e8cd860fcac0a1ff5f27e283a0 Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Tue, 7 May 2024 20:40:46 +0500 Subject: [PATCH 05/23] styles added to avatar --- .../lowcoder/src/comps/comps/avatar.tsx | 74 ++++++++++++++++--- 1 file changed, 62 insertions(+), 12 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/avatar.tsx b/client/packages/lowcoder/src/comps/comps/avatar.tsx index ddead0e52..61779a1c7 100644 --- a/client/packages/lowcoder/src/comps/comps/avatar.tsx +++ b/client/packages/lowcoder/src/comps/comps/avatar.tsx @@ -3,6 +3,10 @@ import { RecordConstructorToView } from "lowcoder-core"; import { styleControl } from "comps/controls/styleControl"; import _ from "lodash"; import { + avatarContainerStyle, + AvatarContainerStyleType, + avatarLabelStyle, + AvatarLabelStyleType, AvatarStyle, AvatarStyleType, } from "comps/controls/styleControlConstants"; @@ -37,13 +41,20 @@ const AvatarWrapper = styled(Avatar) props.$cursorPointer ? 'pointer' : ''}; `; -const Wrapper = styled.div <{ iconSize: number, labelPosition: string }>` +const Wrapper = styled.div <{ iconSize: number, labelPosition: string,$style: AvatarContainerStyleType}>` display: flex; width: 100%; height: 100%; -padding: 0px; align-items: center; flex-direction: ${(props) => props.labelPosition === 'left' ? 'row' : 'row-reverse'}; +${(props) => { + return ( + props.$style && { + ...props.$style, + borderRadius: props.$style.radius, + } + ); + }} ` const LabelWrapper = styled.div<{ iconSize: number, alignmentPosition: string }>` @@ -55,20 +66,47 @@ flex-direction: column; justify-content: flex-end; align-items: ${(props) => props.alignmentPosition === 'left' ? 'flex-start' : 'flex-end'}; ` -const LabelSpan = styled.span<{ color: string }>` +const LabelSpan = styled.span<{ $style:AvatarLabelStyleType }>` max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -font-weight: bold; -color: ${(props) => props.color}; +font-weight: ${props=>props.$style.textWeight}; +border-radius: ${props=>props.$style.radius}; +font-size: ${props=>props.$style.textSize}; +rotate: ${props=>props.$style.rotation}; +text-transform: ${props=>props.$style.textTransform}; +color: ${props=>props.$style.text}; +border: ${props => props.$style.border}; +border-style: ${props=>props.$style.borderStyle}; +border-width: ${props=>props.$style.borderWidth}; +font-family: ${props=>props.$style.fontFamily}; +font-style: ${props=>props.$style.fontStyle}; +margin: ${props=>props.$style.margin}; +padding: ${props=>props.$style.padding}; +background: ${props=>props.$style.background}; +text-decoration: ${props=>props.$style.textDecoration}; ` -const CaptionSpan = styled.span<{ color: string }>` +const CaptionSpan = styled.span<{ $style:AvatarLabelStyleType }>` max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -color: ${(props) => props.color}; +font-weight: ${props=>props.$style.textWeight}; +border-radius: ${props=>props.$style.radius}; +font-size: ${props=>props.$style.textSize}; +rotate: ${props=>props.$style.rotation}; +text-transform: ${props=>props.$style.textTransform}; +color: ${props=>props.$style.text}; +border: ${props => props.$style.border}; +border-style: ${props=>props.$style.borderStyle}; +border-width: ${props=>props.$style.borderWidth}; +font-family: ${props=>props.$style.fontFamily}; +font-style: ${props=>props.$style.fontStyle}; +margin: ${props=>props.$style.margin}; +padding: ${props=>props.$style.padding}; +background: ${props=>props.$style.background}; +text-decoration: ${props => props.$style.textDecoration}; ` const EventOptions = [clickEvent] as const; const sharpOptions = [ @@ -82,7 +120,10 @@ const sideOptions = [ ] as const; const childrenMap = { - style: styleControl(AvatarStyle), + style: styleControl(avatarContainerStyle), + avatarStyle: styleControl(AvatarStyle), + labelStyle: styleControl(avatarLabelStyle), + captionStyle: styleControl(avatarLabelStyle), icon: withDefault(IconControl, "/icon:solid/user"), iconSize: withDefault(NumberControl, 40), onEvent: eventHandlerControl(EventOptions), @@ -127,7 +168,7 @@ const AvatarView = (props: RecordConstructorToView) => { disabled={!props.enableDropdownMenu} dropdownRender={() => menu} > - + ) => { size={iconSize} icon={title.value !== '' ? null : props.icon} shape={shape} - $style={props.style} + $style={props.avatarStyle} src={src.value} // $cursorPointer={eventsCount > 0} onClick={() => props.onEvent("click")} @@ -149,8 +190,8 @@ const AvatarView = (props: RecordConstructorToView) => { - {props.avatarLabel.value} - {props.avatarCatption.value} + {props.avatarLabel.value} + {props.avatarCatption.value} @@ -220,6 +261,15 @@ let AvatarBasicComp = (function () {
{children.style.getPropertyView()}
+
+ {children.avatarStyle.getPropertyView()} +
+
+ {children.labelStyle.getPropertyView()} +
+
+ {children.captionStyle.getPropertyView()} +
)) .build(); From 9e553b03883702f787fa7b0a9d3b0714a06fe6a1 Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Wed, 8 May 2024 00:17:08 +0500 Subject: [PATCH 06/23] avatar group styles added --- .../lowcoder/src/comps/comps/avatarGroup.tsx | 23 +++++++++++++++---- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx b/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx index d3b2b5602..3e2e5d258 100644 --- a/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx +++ b/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx @@ -1,6 +1,6 @@ import { CompAction, RecordConstructorToView, changeChildAction } from "lowcoder-core"; import { styleControl } from "comps/controls/styleControl"; -import { QRCodeStyle, QRCodeStyleType, avatarGroupStyle, AvatarGroupStyleType } from "comps/controls/styleControlConstants"; +import { QRCodeStyle, QRCodeStyleType, avatarGroupStyle, AvatarGroupStyleType, avatarContainerStyle, AvatarContainerStyleType } from "comps/controls/styleControlConstants"; import { UICompBuilder } from "comps/generators/uiCompBuilder"; import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing"; import { AlignCenter, AlignLeft, AlignRight, Section, sectionNames } from "lowcoder-design"; @@ -31,13 +31,20 @@ const MacaroneList = [ '#fcd6bb', ] -const Container = styled.div<{ $style: AvatarGroupStyleType | undefined, alignment: string }>` +const Container = styled.div<{ $style: AvatarContainerStyleType | undefined, alignment: string }>` height: 100%; width: 100%; display: flex; align-items: center; justify-content: ${props => props.alignment}; cursor: pointer; + background: ${props => props?.$style?.background}; + margin: ${props => props?.$style?.margin}; + padding: ${props => props?.$style?.padding}; + border: ${props => props?.$style?.border}; + border-style: ${props => props?.$style?.borderStyle}; + border-radius: ${props => props?.$style?.radius}; + border-width: ${props => props?.$style?.borderWidth}; `; const DropdownOption = new MultiCompBuilder( @@ -79,7 +86,8 @@ export const alignOptions = [ ] as const; const childrenMap = { - style: styleControl(avatarGroupStyle), + avatar: styleControl(avatarGroupStyle), + style: styleControl(avatarContainerStyle), maxCount: withDefault(NumberControl, 3), avatarSize: withDefault(NumberControl, 40), alignment: dropdownControl(alignOptions, "center"), @@ -112,8 +120,8 @@ const AvatarGroupView = (props: RecordConstructorToView & { src={item.src ?? undefined} icon={(item.AvatarIcon as ReactElement)?.props.value === '' || item.label.trim() !== '' ? undefined : item.AvatarIcon} style={{ - color: item.color ? item.color : (props.style.fill !== '#FFFFFF' ? props.style.fill : '#FFFFFF'), - backgroundColor: item.backgroundColor ? item.backgroundColor : (props.autoColor ? MacaroneList[index % MacaroneList.length] : props.style.background), + color: item.color ? item.color : (props.avatar.fill !== '#FFFFFF' ? props.avatar.fill : '#FFFFFF'), + backgroundColor: item.backgroundColor ? item.backgroundColor : (props.autoColor ? MacaroneList[index % MacaroneList.length] : props.avatar.background), }} size={props.avatarSize} onClick={() => { @@ -163,9 +171,14 @@ let AvatarGroupBasicComp = (function () { )} {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + <> +
+ {children.avatar.getPropertyView()} +
{children.style.getPropertyView()}
+ )} )) From bb2359a94551cc9021ce010c0f04eeac905cf83e Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Wed, 8 May 2024 01:13:09 +0500 Subject: [PATCH 07/23] section names added --- client/packages/lowcoder-design/src/i18n/design/locales/en.ts | 2 ++ 1 file changed, 2 insertions(+) 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 86a7c2af1..f74efb1fb 100644 --- a/client/packages/lowcoder-design/src/i18n/design/locales/en.ts +++ b/client/packages/lowcoder-design/src/i18n/design/locales/en.ts @@ -31,6 +31,8 @@ export const en = { inputFieldStyle: 'Input Field Style', avatarStyle: 'Avatar Style', captionStyle: 'Caption Style', + startButtonStyle: 'Start Button Style', + resetButtonStyle: 'Reset Button Style', }, passwordInput: { label: "Password:", From ca1ce642bb46c0ab8d88849e0835996c8be00f75 Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Wed, 8 May 2024 01:13:23 +0500 Subject: [PATCH 08/23] sections updated --- client/packages/lowcoder-design/src/components/Section.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/client/packages/lowcoder-design/src/components/Section.tsx b/client/packages/lowcoder-design/src/components/Section.tsx index a76581294..acbf38a12 100644 --- a/client/packages/lowcoder-design/src/components/Section.tsx +++ b/client/packages/lowcoder-design/src/components/Section.tsx @@ -152,4 +152,6 @@ export const sectionNames = { inputFieldStyle:trans("prop.inputFieldStyle"), avatarStyle:trans("prop.avatarStyle"), captionStyle:trans("prop.captionStyle"), + startButtonStyle:trans("prop.startButtonStyle"), + resetButtonStyle:trans("prop.resetButtonStyle"), }; From ab8db5c11026af88e97f78b52646cda405165a3a Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Wed, 8 May 2024 01:13:43 +0500 Subject: [PATCH 09/23] timer styles created --- .../src/comps/controls/styleControlConstants.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 8d2972f27..f25af2a8a 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -870,15 +870,14 @@ export const CardStyle = [ export const timerStyle = [ getBackground("primarySurface"), - BORDER, - RADIUS, - { - name: "fontColor", - label: trans("timer.fontColor"), - color: "#000000", - }, + ...STYLING_FIELDS_SEQUENCE ] as const; +export const startButtonStyle = [ + getBackground("primarySurface"), + ...STYLING_FIELDS_SEQUENCE +] as const + // end export const LabelStyle = [ @@ -1585,6 +1584,7 @@ export type FloatButtonStyleType = StyleConfigType; export type TransferStyleType = StyleConfigType; export type CardStyleType = StyleConfigType; export type timerStyleType = StyleConfigType; +export type StartButtonStyleType = StyleConfigType; export type LabelStyleType = StyleConfigType; export type InputLikeStyleType = StyleConfigType; From 00371a935b8c61924ea60635b2691e58036ed429 Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Wed, 8 May 2024 01:14:05 +0500 Subject: [PATCH 10/23] timer styles updated --- .../lowcoder/src/comps/comps/timerComp.tsx | 67 ++++++++++++++++--- 1 file changed, 56 insertions(+), 11 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/timerComp.tsx b/client/packages/lowcoder/src/comps/comps/timerComp.tsx index cf515b20a..ef8575e53 100644 --- a/client/packages/lowcoder/src/comps/comps/timerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/timerComp.tsx @@ -1,6 +1,6 @@ import { CompAction, RecordConstructorToView, changeChildAction } from "lowcoder-core"; import { styleControl } from "comps/controls/styleControl"; -import { timerStyle, timerStyleType } from "comps/controls/styleControlConstants"; +import { startButtonStyle, StartButtonStyleType, timerStyle, timerStyleType } from "comps/controls/styleControlConstants"; import { UICompBuilder } from "comps/generators/uiCompBuilder"; import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing"; import { Section, sectionNames } from "lowcoder-design"; @@ -24,21 +24,54 @@ const Container = styled.div<{ $style: timerStyleType | undefined }>` word-wrap: break-word; line-height: initial; background-color: ${props => props.$style?.background}; - border: 1px solid ${props => props.$style?.border}; - border-radius: ${props => props.$style?.radius}; - color: ${props => props.$style?.fontColor}; + font-weight: ${props=>props?.$style?.textWeight}; +border-radius: ${props=>props?.$style?.radius}; +font-size: ${props=>props?.$style?.textSize}; +rotate: ${props=>props?.$style?.rotation}; +text-transform: ${props=>props?.$style?.textTransform}; +color: ${props=>props?.$style?.text}; +border: ${props => props?.$style?.border}; +border-style: ${props=>props?.$style?.borderStyle}; +border-width: ${props=>props?.$style?.borderWidth}; +font-family: ${props=>props?.$style?.fontFamily}; +font-style: ${props=>props?.$style?.fontStyle}; +margin: ${props=>props?.$style?.margin}; +padding: ${props=>props?.$style?.padding}; +background: ${props=>props?.$style?.background}; +text-decoration: ${props=>props?.$style?.textDecoration}; `; const ButtonWarrper = styled.div` width: 100%; min-height: 35px; display: flex; - justify-content: flex-end; + justify-content: center; padding-right: 15px; padding-bottom: 10px; - margin-top: -10px; + margin-top: 10px; `; +const StyledButton = styled(Button)<{ $style: StartButtonStyleType }>` +background-color: ${props=>props.$style.background}; +font-weight: ${props=>props.$style.textWeight}; +border-radius: ${props=>props.$style.radius}; +font-size: ${props=>props.$style.textSize}; +rotate: ${props=>props.$style.rotation}; +text-transform: ${props=>props.$style.textTransform}; +color: ${props=>props.$style.text}; +border: ${props => props.$style.border}; +border-style: ${props=>props.$style.borderStyle}; +border-width: ${props=>props.$style.borderWidth}; +font-family: ${props=>props.$style.fontFamily}; +font-style: ${props=>props.$style.fontStyle}; +margin: ${props=>props.$style.margin}; +padding: ${props=>props.$style.padding}; +background: ${props=>props.$style.background}; +text-decoration: ${props=>props.$style.textDecoration}; +`; + + + function formatTimeDifference(timeDifference: number) { // 计算时、分、秒、毫秒 const hours = Math.floor(timeDifference / (1000 * 60 * 60)); @@ -64,6 +97,8 @@ const timerTypeOptions = [ const childrenMap = { style: styleControl(timerStyle), + startButtonStyle: styleControl(startButtonStyle), + resetButtonStyle: styleControl(startButtonStyle), onEvent: eventHandlerControl(EventOptions), defaultValue: stringExposingStateControl("defaultValue", '00:00:00:000'), timerType: dropdownControl(timerTypeOptions, 'timer'), @@ -162,7 +197,8 @@ const AvatarGroupView = (props: RecordConstructorToView & { {formatTimeDifference(elapsedTime)} @@ -206,9 +243,17 @@ let AvatarGroupBasicComp = (function () { )} {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + <>
{children.style.getPropertyView()}
+
+ {children.startButtonStyle.getPropertyView()} +
+
+ {children.resetButtonStyle.getPropertyView()} +
+ )} )) From 59a67df785657794d6d1b6ac9c549ff6d4d3c4a8 Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Wed, 8 May 2024 12:31:09 +0500 Subject: [PATCH 11/23] new translations added --- client/packages/lowcoder-design/src/i18n/design/locales/en.ts | 2 ++ 1 file changed, 2 insertions(+) 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 f74efb1fb..32d6c8f23 100644 --- a/client/packages/lowcoder-design/src/i18n/design/locales/en.ts +++ b/client/packages/lowcoder-design/src/i18n/design/locales/en.ts @@ -33,6 +33,8 @@ export const en = { captionStyle: 'Caption Style', startButtonStyle: 'Start Button Style', resetButtonStyle: 'Reset Button Style', + headerStyle: 'Header Style', + bodyStyle: 'Body Style', }, passwordInput: { label: "Password:", From 7004e459ea97e5ab07b5ab7103442b07201fe6b3 Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Wed, 8 May 2024 12:31:21 +0500 Subject: [PATCH 12/23] new section names added --- client/packages/lowcoder-design/src/components/Section.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/client/packages/lowcoder-design/src/components/Section.tsx b/client/packages/lowcoder-design/src/components/Section.tsx index acbf38a12..355e0d0d1 100644 --- a/client/packages/lowcoder-design/src/components/Section.tsx +++ b/client/packages/lowcoder-design/src/components/Section.tsx @@ -154,4 +154,6 @@ export const sectionNames = { captionStyle:trans("prop.captionStyle"), startButtonStyle:trans("prop.startButtonStyle"), resetButtonStyle:trans("prop.resetButtonStyle"), + headerStyle:trans("prop.headerStyle"), + bodyStyle:trans("prop.bodyStyle"), }; From c9f73e76aff2461ed8884bca85961f2fd4ea5466 Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Wed, 8 May 2024 12:31:46 +0500 Subject: [PATCH 13/23] new styles added --- .../lowcoder/src/comps/controls/styleControlConstants.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index f25af2a8a..d61bfd937 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -852,7 +852,6 @@ export const TransferStyle = [ export const CardStyle = [ getStaticBackground("#ffffff"), - BORDER, { name: "IconColor", label: trans("card.IconColor"), @@ -866,6 +865,12 @@ export const CardStyle = [ transformer: toSelf, }, CONTAINER_BODY_PADDING, + ...STYLING_FIELDS_CONTAINER_SEQUENCE +] as const; + +export const CardHeaderStyle = [ + getStaticBackground(SURFACE_COLOR), + ...STYLING_FIELDS_SEQUENCE, ] as const; export const timerStyle = [ @@ -1583,6 +1588,7 @@ export type AvatarGroupStyleType = StyleConfigType; export type FloatButtonStyleType = StyleConfigType; export type TransferStyleType = StyleConfigType; export type CardStyleType = StyleConfigType; +export type CardHeaderStyleType = StyleConfigType; export type timerStyleType = StyleConfigType; export type StartButtonStyleType = StyleConfigType; From f7a2500555b6353c695fba8c4da43cc39ffd8549 Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Wed, 8 May 2024 12:32:08 +0500 Subject: [PATCH 14/23] styles added to card --- .../comps/comps/containerComp/cardComp.tsx | 73 +++++++++++++++---- 1 file changed, 57 insertions(+), 16 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx index 0239042f4..d8784192c 100644 --- a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx @@ -13,7 +13,7 @@ import { useContext, useEffect, useRef, useState } from "react"; import { EditorContext } from "comps/editorState"; import { Card } from "antd"; import styled from "styled-components"; -import { CardStyle, CardStyleType } from "comps/controls/styleControlConstants"; +import { CardHeaderStyle, CardHeaderStyleType, CardStyle, CardStyleType } from "comps/controls/styleControlConstants"; import { MultiCompBuilder, withDefault } from "comps/generators"; import { IconControl } from "comps/controls/iconControl"; import { ButtonEventHandlerControl, CardEventHandlerControl, clickEvent, refreshEvent } from "comps/controls/eventHandlerControl"; @@ -22,13 +22,25 @@ import { dropdownControl } from "comps/controls/dropdownControl"; import { styleControl } from "comps/controls/styleControl"; const { Meta } = Card; -const Warpper = styled.div<{ $style: CardStyleType | undefined, $showMate: boolean, $cardType: string }>` +const Warpper = styled.div<{ $style: CardStyleType | undefined, $showMate: boolean, $cardType: string, $headerStyle:CardHeaderStyleType, $bodyStyle:CardHeaderStyleType }>` height: 100%; width: 100%; .ant-card-small >.ant-card-head { - background-color: ${props => props.$style?.background}; - margin-bottom: 0px; - border-bottom: 1px solid ${props => props.$style?.border}; + background-color: ${props => props.$headerStyle?.background} !important; + border: ${props => props.$headerStyle?.border}; + border-style: ${props => props.$headerStyle?.borderStyle}; + border-width: ${props => props.$headerStyle?.borderWidth}; + border-radius: ${props => props.$headerStyle?.radius}; + font-size: ${props => props.$headerStyle?.textSize}; + font-style: ${props => props.$headerStyle?.fontStyle}; + font-family: ${props => props.$headerStyle?.fontFamily}; + font-weight: ${props => props.$headerStyle?.textWeight}; + text-transform: ${props => props.$headerStyle?.textTransform}; + text-decoration: ${props => props.$headerStyle?.textDecoration}; + color: ${props => props.$headerStyle?.text}; + rotate: ${props => props.$headerStyle?.rotation}; + margin: ${props => props.$headerStyle?.margin}; + padding: ${props => props.$headerStyle?.padding}; } .ant-card .ant-card-actions { border-top: 1px solid ${props => props.$style?.border}; @@ -36,32 +48,51 @@ const Warpper = styled.div<{ $style: CardStyleType | undefined, $showMate: boole .ant-card .ant-card-actions>li:not(:last-child) { border-inline-end: 1px solid ${props => props.$style?.border}; } - .ant-card-small >.ant-card-body { - padding: ${props => props.$cardType == 'custom' ? '0px' : '10px'}; - } - .ant-card .ant-card-head { - background-color: ${props => props.$style?.background}; - border-bottom: 1px solid ${props => props.$style?.border}; - } - .ant-card-small >.ant-card-body { - background-color: ${props => props.$style?.background}; - } .ant-card .ant-card-actions { background-color: ${props => props.$style?.background}; } .ant-card .ant-card-body { - padding: ${props => props.$cardType == 'custom' ? '0px' : '10px'}; + background-color: ${props => props.$bodyStyle?.background} !important; + border: ${props => props.$bodyStyle?.border}; + border-style: ${props => props.$bodyStyle?.borderStyle}; + border-width: ${props => props.$bodyStyle?.borderWidth}; + border-radius: ${props => props.$bodyStyle?.radius}; + rotate: ${props => props.$bodyStyle?.rotation}; + margin: ${props => props.$bodyStyle?.margin}; + padding: ${props => props.$bodyStyle?.padding}; } .ant-card { display: flex; flex-direction: column; justify-content: space-between; background-color: ${props => props.$style?.background}; + border: ${props => props.$style?.border}; + border-style: ${props => props.$style?.borderStyle}; + border-radius: ${props => props.$style?.radius}; + border-width: ${props => props.$style?.borderWidth}; } .ant-card-body { display: ${props => props.$showMate ? '' : 'none'}; height: ${props => props.$cardType == 'custom' ? '100%' : 'auto'}; } + .ant-card-body .ant-card-meta .ant-card-meta-title{ + color: ${props => props.$bodyStyle?.text} !important; + font-size: ${props => props.$bodyStyle?.textSize}; + font-style: ${props => props.$bodyStyle?.fontStyle}; + font-family: ${props => props.$bodyStyle?.fontFamily}; + font-weight: ${props => props.$bodyStyle?.textWeight}; + text-transform: ${props => props.$bodyStyle?.textTransform}; + text-decoration: ${props => props.$bodyStyle?.textDecoration}; + } + .ant-card-body .ant-card-meta .ant-card-meta-description{ + color: ${props => props.$bodyStyle?.text} !important; + font-size: ${props => props.$bodyStyle?.textSize}; + font-style: ${props => props.$bodyStyle?.fontStyle}; + font-family: ${props => props.$bodyStyle?.fontFamily}; + font-weight: ${props => props.$bodyStyle?.textWeight}; + text-transform: ${props => props.$bodyStyle?.textTransform}; + text-decoration: ${props => props.$bodyStyle?.textDecoration}; + } `; const ContainWarpper = styled.div` @@ -140,6 +171,8 @@ export const ContainerBaseComp = (function () { onEvent: CardEventHandlerControl, style: styleControl(CardStyle), + headerStyle: styleControl(CardHeaderStyle), + bodyStyle: styleControl(CardHeaderStyle), }; return new ContainerCompBuilder(childrenMap, (props, dispatch) => { @@ -169,6 +202,8 @@ export const ContainerBaseComp = (function () { props.onEvent('focus')} @@ -280,6 +315,12 @@ export const ContainerBaseComp = (function () {
{children.style.getPropertyView()}
+
+ {children.headerStyle.getPropertyView()} +
+
+ {children.bodyStyle.getPropertyView()} +
)} From 8ffd9717282ad80da7451764730ef601b320c8ff Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Wed, 8 May 2024 18:43:46 +0500 Subject: [PATCH 15/23] new translations added --- client/packages/lowcoder-design/src/i18n/design/locales/en.ts | 1 + 1 file changed, 1 insertion(+) 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 32d6c8f23..acd565c68 100644 --- a/client/packages/lowcoder-design/src/i18n/design/locales/en.ts +++ b/client/packages/lowcoder-design/src/i18n/design/locales/en.ts @@ -35,6 +35,7 @@ export const en = { resetButtonStyle: 'Reset Button Style', headerStyle: 'Header Style', bodyStyle: 'Body Style', + badgeStyle: 'Badge Style', }, passwordInput: { label: "Password:", From 4a9d17206f00d9aeba15718ef2e9251ec0fddee6 Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Wed, 8 May 2024 18:43:56 +0500 Subject: [PATCH 16/23] new section names added --- client/packages/lowcoder-design/src/components/Section.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/client/packages/lowcoder-design/src/components/Section.tsx b/client/packages/lowcoder-design/src/components/Section.tsx index 355e0d0d1..cad6e8bf0 100644 --- a/client/packages/lowcoder-design/src/components/Section.tsx +++ b/client/packages/lowcoder-design/src/components/Section.tsx @@ -156,4 +156,5 @@ export const sectionNames = { resetButtonStyle:trans("prop.resetButtonStyle"), headerStyle:trans("prop.headerStyle"), bodyStyle:trans("prop.bodyStyle"), + badgeStyle:trans("prop.badgeStyle"), }; From 68ea6967d7cc9201a9f825661349b0a2a697d8aa Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Wed, 8 May 2024 18:44:05 +0500 Subject: [PATCH 17/23] new styles added --- .../src/comps/controls/styleControlConstants.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index d61bfd937..54e829062 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -838,7 +838,7 @@ export const avatarGroupStyle = [ getBackground("primary"), ] as const; -export const FloatButtonStyle = [ +export const BadgeStyle = [ { name: "badgeColor", label: trans("floatButton.badgeColor"), @@ -846,6 +846,13 @@ export const FloatButtonStyle = [ }, ] as const; +export const FloatButtonStyle = [ + getStaticBackground(SURFACE_COLOR), + BORDER, + BORDER_STYLE, + BORDER_WIDTH, +] as const; + export const TransferStyle = [ MARGIN, ] as const; @@ -1586,6 +1593,7 @@ export type AvatarLabelStyleType = StyleConfigType; export type AvatarContainerStyleType = StyleConfigType; export type AvatarGroupStyleType = StyleConfigType; export type FloatButtonStyleType = StyleConfigType; +export type BadgeStyleType = StyleConfigType; export type TransferStyleType = StyleConfigType; export type CardStyleType = StyleConfigType; export type CardHeaderStyleType = StyleConfigType; From 180e77a64c26a011e589baf43954484744247ec4 Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Wed, 8 May 2024 18:44:26 +0500 Subject: [PATCH 18/23] styles added to float button --- .../comps/comps/buttonComp/floatButtonComp.tsx | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx index 23b86b231..01ec6226d 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx @@ -3,7 +3,7 @@ import { BoolControl } from "comps/controls/boolControl"; import { stringExposingStateControl } from "comps/controls/codeStateControl"; import { dropdownControl } from "comps/controls/dropdownControl"; import { styleControl } from "comps/controls/styleControl"; -import { FloatButtonStyle, FloatButtonStyleType } from "comps/controls/styleControlConstants"; +import { BadgeStyle, BadgeStyleType, FloatButtonStyle, FloatButtonStyleType } from "comps/controls/styleControlConstants"; import { UICompBuilder } from "comps/generators/uiCompBuilder"; import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing"; import { Section, sectionNames } from "lowcoder-design"; @@ -17,7 +17,7 @@ import styled from "styled-components"; import { ButtonEventHandlerControl } from "comps/controls/eventHandlerControl"; import { manualOptionsControl } from "comps/controls/optionsControl"; -const Wrapper = styled.div<{ $style: FloatButtonStyleType }>` +const Wrapper = styled.div<{ $badgeStyle: BadgeStyleType, $style: FloatButtonStyleType}>` width: 0px; height: 0px; overflow: hidden; @@ -29,6 +29,12 @@ const Wrapper = styled.div<{ $style: FloatButtonStyleType }>` right: 0px; inset-block-end: -8px; } + .ant-float-btn-primary .ant-float-btn-body { + background-color: ${(props) => props.$style.background}; + border: ${(props) => props.$style.border}; + border-style: ${(props) => props.$style.borderStyle}; + border-width: ${(props) => props.$style.borderWidth}; + } ` const buttonShapeOption = [ @@ -70,6 +76,7 @@ const childrenMap = { includeMargin: BoolControl.DEFAULT_TRUE, image: StringControl, icon: withDefault(IconControl, '/icon:antd/questioncircleoutlined'), + badgeStyle: styleControl(BadgeStyle), style: styleControl(FloatButtonStyle), buttons: manualOptionsControl(buttonGroupOption, { initOptions: [ @@ -92,20 +99,20 @@ const FloatButtonView = (props: RecordConstructorToView) => onClick={() => button.onEvent("click")} tooltip={button?.label} description={button?.description} - badge={{ count: button?.badge, color: props.style.badgeColor, dot: props?.dot }} + badge={{ count: button?.badge, color: props.badgeStyle.badgeColor, dot: props?.dot }} type={onlyOne ? props.buttonTheme : 'default'} shape={props.shape} />) : '' } return ( - + {props.buttons.length === 1 ? (renderButton(props.buttons[0], true)) : ( sum + (i.buttonType === 'custom' && !i.hidden ? i.badge : 0), 0), color: props.style.badgeColor, dot: props.dot }} + badge={{ count: props.buttons.reduce((sum, i) => sum + (i.buttonType === 'custom' && !i.hidden ? i.badge : 0), 0), color: props.badgeStyle.badgeColor, dot: props.dot }} type={props.buttonTheme} > {props.buttons.map((button: any) => renderButton(button))} @@ -129,6 +136,7 @@ let FloatButtonBasicComp = (function () {
{hiddenPropertyView(children)}
+
{children.badgeStyle.getPropertyView()}
{children.style.getPropertyView()}
)) From 5a1bede929671fa36023de39285878a5933f4c26 Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Wed, 8 May 2024 19:27:19 +0500 Subject: [PATCH 19/23] css updated --- .../lowcoder/src/comps/comps/selectInputComp/stepControl.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx index 5ea219698..76dfd10fc 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx @@ -112,6 +112,7 @@ let StepControlBasicComp = (function () { font-size: ${props.style.textSize}; text-transform: ${props.style.textTransform}; margin: ${props.style.margin}; + rotate: ${props.style.rotation}; padding: ${props.style.padding}; background-color: ${props.style.background}; border: ${props.style.borderWidth} solid ${props.style.border}; From 826b16168c209613dad8b3f2e38ccf015d88c2a7 Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Wed, 8 May 2024 19:41:06 +0500 Subject: [PATCH 20/23] transfer styles updated --- .../lowcoder/src/comps/controls/styleControlConstants.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 54e829062..47e1dbdb6 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -854,7 +854,8 @@ export const FloatButtonStyle = [ ] as const; export const TransferStyle = [ - MARGIN, + getStaticBackground(SURFACE_COLOR), + ...STYLING_FIELDS_CONTAINER_SEQUENCE ] as const; export const CardStyle = [ From f760ba6e2be35f2d31117d92cdc7eb7f9d09f202 Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Wed, 8 May 2024 19:41:17 +0500 Subject: [PATCH 21/23] styles added to transfer --- client/packages/lowcoder/src/comps/comps/transferComp.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/client/packages/lowcoder/src/comps/comps/transferComp.tsx b/client/packages/lowcoder/src/comps/comps/transferComp.tsx index b3abb9dc3..1edaff06e 100644 --- a/client/packages/lowcoder/src/comps/comps/transferComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/transferComp.tsx @@ -28,6 +28,12 @@ const Container = styled.div<{ $style: TransferStyleType }>` const getStyle = (style: TransferStyleType) => { return css` margin: ${style.margin}; + padding: ${style.padding}; + border-style: ${style.borderStyle}; + border-width: ${style.borderWidth}; + border-color: ${style.border}; + background: ${style.background}; + border-radius: ${style.radius}; max-width: ${widthCalculator(style.margin)}; max-height: ${heightCalculator(style.margin)}; `; From 25f955c47dd16c514b5f920d7dd26e4a4c5ca823 Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Thu, 9 May 2024 03:43:14 +0500 Subject: [PATCH 22/23] select and cascader style updated --- .../comps/selectInputComp/cascaderComp.tsx | 34 +++++++++++++++--- .../selectInputComp/cascaderContants.tsx | 8 +++-- .../comps/selectInputComp/multiSelectComp.tsx | 4 ++- .../comps/selectInputComp/selectComp.tsx | 6 ++-- .../selectInputComp/selectCompConstants.tsx | 35 +++++++++++++++---- .../src/comps/controls/labelControl.tsx | 10 +++--- .../comps/controls/styleControlConstants.tsx | 13 +++++++ 7 files changed, 90 insertions(+), 20 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx index dc4d83d35..d6503d4fd 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx @@ -1,20 +1,39 @@ import { default as Cascader } from "antd/es/cascader"; -import { CascaderStyleType } from "comps/controls/styleControlConstants"; +import { CascaderStyleType, ChildrenMultiSelectStyleType } from "comps/controls/styleControlConstants"; import { blurMethod, focusMethod } from "comps/utils/methodUtils"; import { trans } from "i18n"; import styled from "styled-components"; import { UICompBuilder, withDefault } from "../../generators"; import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing"; import { CascaderChildren, CascaderPropertyView, defaultDataSource } from "./cascaderContants"; -import { getStyle } from "./selectCompConstants"; import { refMethods } from "comps/generators/withMethodExposing"; -const CascaderStyle = styled(Cascader)<{ $style: CascaderStyleType }>` +const CascaderStyle = styled(Cascader)<{ $style: CascaderStyleType,$childrenInputFieldStyle:ChildrenMultiSelectStyleType }>` width: 100%; font-family:"Montserrat"; - ${(props) => props.$style && getStyle(props.$style)} + ${(props) => { return props.$style && { ...props.$style, 'border-radius': props.$style.radius } }} `; +const DropdownRenderStyle = styled.div<{ $childrenInputFieldStyle: ChildrenMultiSelectStyleType }>` + background-color: ${props => props.$childrenInputFieldStyle?.background}; + border: ${props => props.$childrenInputFieldStyle?.border}; + border-style: ${props => props.$childrenInputFieldStyle?.borderStyle}; + border-width: ${props => props.$childrenInputFieldStyle?.borderWidth}; + border-radius: ${props => props.$childrenInputFieldStyle?.radius}; + rotate: ${props => props.$childrenInputFieldStyle?.rotation}; + margin: ${props => props.$childrenInputFieldStyle?.margin}; + padding: ${props => props.$childrenInputFieldStyle?.padding}; + .ant-cascader-menu-item-content{ + font-size: ${props => props.$childrenInputFieldStyle?.textSize}; + font-style: ${props => props.$childrenInputFieldStyle?.fontStyle}; + font-family: ${props => props.$childrenInputFieldStyle?.fontFamily}; + font-weight: ${props => props.$childrenInputFieldStyle?.textWeight}; + text-transform: ${props => props.$childrenInputFieldStyle?.textTransform}; + text-decoration: ${props => props.$childrenInputFieldStyle?.textDecoration}; + color: ${props => props.$childrenInputFieldStyle?.text}; + } +` + let CascaderBasicComp = (function () { const childrenMap = CascaderChildren; @@ -23,6 +42,7 @@ let CascaderBasicComp = (function () { style: props.style, labelStyle: props.labelStyle, inputFieldStyle:props.inputFieldStyle, + childrenInputFieldStyle:props.childrenInputFieldStyle, children: ( props.onEvent("focus")} onBlur={() => props.onEvent("blur")} + dropdownRender={(menus: React.ReactNode) => ( + + {menus} + + )} onChange={(value: (string | number)[]) => { props.value.onChange(value as string[]); props.onEvent("change"); diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx index f93d44ff7..4222ce0a8 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx @@ -6,7 +6,7 @@ import { arrayStringExposingStateControl } from "comps/controls/codeStateControl import { BoolControl } from "comps/controls/boolControl"; import { LabelControl } from "comps/controls/labelControl"; import { styleControl } from "comps/controls/styleControl"; -import { CascaderStyle, InputFieldStyle, LabelStyle } from "comps/controls/styleControlConstants"; +import { CascaderStyle, ChildrenMultiSelectStyle, InputFieldStyle, LabelStyle } from "comps/controls/styleControlConstants"; import { allowClearPropertyView, disabledPropertyView, @@ -40,7 +40,8 @@ export const CascaderChildren = { viewRef: RefControl, margin: MarginControl, padding: PaddingControl, - inputFieldStyle:styleControl(CascaderStyle) + inputFieldStyle:styleControl(CascaderStyle), + childrenInputFieldStyle:styleControl(ChildrenMultiSelectStyle) }; export const CascaderPropertyView = ( @@ -83,6 +84,9 @@ export const CascaderPropertyView = (
{children.inputFieldStyle.getPropertyView()}
+
+ {children.childrenInputFieldStyle.getPropertyView()} +
)} diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx index 94b7b0fd9..b08a8276a 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx @@ -1,5 +1,5 @@ import { styleControl } from "comps/controls/styleControl"; -import { InputFieldStyle, LabelStyle, MultiSelectStyle } from "comps/controls/styleControlConstants"; +import { ChildrenMultiSelectStyle, InputFieldStyle, LabelStyle, MultiSelectStyle } from "comps/controls/styleControlConstants"; import { trans } from "i18n"; import { arrayStringExposingStateControl } from "../../controls/codeStateControl"; import { UICompBuilder } from "../../generators"; @@ -25,6 +25,7 @@ let MultiSelectBasicComp = (function () { style: styleControl(InputFieldStyle), labelStyle:styleControl(LabelStyle), inputFieldStyle:styleControl(MultiSelectStyle), + childrenInputFieldStyle:styleControl(ChildrenMultiSelectStyle), margin: MarginControl, padding: PaddingControl, }; @@ -40,6 +41,7 @@ let MultiSelectBasicComp = (function () { style: props.style, labelStyle: props.labelStyle, inputFieldStyle:props.inputFieldStyle, + childrenInputFieldStyle:props.childrenInputFieldStyle, children: ( { const [ @@ -45,6 +46,7 @@ let SelectBasicComp = (function () { style: props.style, labelStyle: props.labelStyle, inputFieldStyle:props.inputFieldStyle, + childrenInputFieldStyle:props.childrenInputFieldStyle, children: ( props.$style && getStyle(props.$style)} `; -const DropdownStyled = styled.div<{ $style: MultiSelectStyleType }>` - ${(props) => props.$style && getDropdownStyle(props.$style)} +const DropdownStyled = styled.div<{ $style: ChildrenMultiSelectStyleType }>` + background-color: ${props => props.$style?.background}; + border: ${props => props.$style?.border}; + border-style: ${props => props.$style?.borderStyle}; + border-width: ${props => props.$style?.borderWidth}; + border-radius: ${props => props.$style?.radius}; + rotate: ${props => props.$style?.rotation}; + margin: ${props => props.$style?.margin}; + padding: ${props => props.$style?.padding}; .ant-select-item-option-content { - ${(props) => `padding: ${props.$style.padding}`}; + font-size: ${props => props.$style?.textSize}; + font-style: ${props => props.$style?.fontStyle}; + font-family: ${props => props.$style?.fontFamily}; + font-weight: ${props => props.$style?.textWeight}; + text-transform: ${props => props.$style?.textTransform}; + color: ${props => props.$style?.text}; + } + .option-label{ + text-decoration: ${props => props.$style?.textDecoration} !important; } .option-label img { min-width: 14px; @@ -229,11 +245,12 @@ export const SelectUIView = ( mode?: "multiple" | "tags"; value: any; style: SelectStyleType | MultiSelectStyleType; + childrenInputFieldStyle: ChildrenMultiSelectStyleType; onChange: (value: any) => void; dispatch: DispatchType; } -) => ( - ( - + {originNode} )} @@ -282,7 +299,7 @@ export const SelectUIView = ( ))} -); +} export const SelectPropertyView = ( children: RecordConstructorToComp< @@ -295,6 +312,7 @@ export const SelectPropertyView = ( style: { getPropertyView: () => ControlNode }; labelStyle: { getPropertyView: () => ControlNode }; inputFieldStyle: { getPropertyView: () => ControlNode }; + childrenInputFieldStyle: { getPropertyView: () => ControlNode }; } ) => ( <> @@ -343,6 +361,9 @@ export const SelectPropertyView = (
{children.inputFieldStyle.getPropertyView()}
+
+ {children.childrenInputFieldStyle.getPropertyView()} +
)} diff --git a/client/packages/lowcoder/src/comps/controls/labelControl.tsx b/client/packages/lowcoder/src/comps/controls/labelControl.tsx index bdbe6a0ed..86e32ce77 100644 --- a/client/packages/lowcoder/src/comps/controls/labelControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/labelControl.tsx @@ -23,6 +23,7 @@ type LabelViewProps = Pick; field?: Record; inputFieldStyle?: Record; + childrenInputFieldStyle?: Record; }; const StyledStarIcon = styled(StarIcon)` @@ -168,8 +169,9 @@ export const LabelControl = (function () { align: dropdownControl(AlignOptions, "left"), }; - return new MultiCompBuilder(childrenMap, (props) => (args: LabelViewProps) => ( - + return new MultiCompBuilder(childrenMap, (props) => (args: LabelViewProps) => + { + return )} - -)) + } +) .setPropertyViewFn((children) => (
{children.text.propertyView({ label: trans("labelProp.text") })} diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 47e1dbdb6..701de6a8b 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -976,6 +976,18 @@ export const MultiSelectStyle = [ ...ACCENT_VALIDATE, ] as const; +export const ChildrenMultiSelectStyle = [ + ...multiSelectCommon, + { + name: "multiIcon", + label: trans("style.multiIcon"), + depTheme: "primary", + depType: DEP_TYPE.SELF, + transformer: toSelf, + platform: "pc", + }, +] as const; + 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', [{ @@ -1618,6 +1630,7 @@ export type RatingStyleType = StyleConfigType; export type SwitchStyleType = StyleConfigType; export type SelectStyleType = StyleConfigType; export type MultiSelectStyleType = StyleConfigType; +export type ChildrenMultiSelectStyleType = StyleConfigType; export type TabContainerStyleType = StyleConfigType; export type ModalStyleType = StyleConfigType; export type CascaderStyleType = StyleConfigType; From ffc3fa880d9761643fde64a89c05c228eb576236 Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Thu, 9 May 2024 03:47:15 +0500 Subject: [PATCH 23/23] children style updated --- .../src/comps/controls/styleControlConstants.tsx | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 701de6a8b..0ebd9c8de 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -977,15 +977,8 @@ export const MultiSelectStyle = [ ] as const; export const ChildrenMultiSelectStyle = [ - ...multiSelectCommon, - { - name: "multiIcon", - label: trans("style.multiIcon"), - depTheme: "primary", - depType: DEP_TYPE.SELF, - transformer: toSelf, - platform: "pc", - }, + ...STYLING_FIELDS_SEQUENCE, + getStaticBackground(SURFACE_COLOR) ] as const; export const TabContainerStyle = [