From fd31266c7250ad34a43acade358bf0146ef26ef4 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Mon, 3 Jun 2024 16:15:35 +0500 Subject: [PATCH 1/3] box shadow added on input --- client/packages/lowcoder/src/comps/controls/labelControl.tsx | 5 +++-- .../lowcoder/src/comps/controls/styleControlConstants.tsx | 2 ++ 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder/src/comps/controls/labelControl.tsx b/client/packages/lowcoder/src/comps/controls/labelControl.tsx index 1c8e395c2..3b780fc0a 100644 --- a/client/packages/lowcoder/src/comps/controls/labelControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/labelControl.tsx @@ -46,7 +46,7 @@ function getStyle(style: any) { } const LabelViewWrapper = styled.div<{ $style: any, inputFieldStyle: any,$animationStyle:any }>` -${(props) => { + ${(props) => { return ( props.$style && { ...props.$style, @@ -230,7 +230,8 @@ export const LabelControl = (function () { ? `calc(100% - ${getLabelWidth(props.width, props.widthUnit)} - 8px)` : "100%", height: props.position === "column" && !!props.text ? "calc(100% - 22px)" : "100%", - rotate:args?.inputFieldStyle?.rotation + rotate:args?.inputFieldStyle?.rotation, + boxShadow:`${args?.inputFieldStyle?.boxShadow} ${args?.inputFieldStyle?.boxShadowColor}` }} > {args.children} diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index b867bbe9a..ab419c8a3 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -1028,6 +1028,8 @@ export const SliderStyle = [ export const InputLikeStyle = [ getStaticBackground(SURFACE_COLOR), + BOXSHADOW, + BOXSHADOWCOLOR, ...STYLING_FIELDS_SEQUENCE.filter(style=>style.name!=='rotation'), ...ACCENT_VALIDATE, ] as const; From 45835f4800820ed1944d490af49a34d19765a1f0 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Tue, 4 Jun 2024 02:55:08 +0500 Subject: [PATCH 2/3] box shadow improved --- .../comps/comps/autoCompleteComp/autoCompleteComp.tsx | 9 +++++---- .../src/comps/comps/numberInputComp/numberInputComp.tsx | 4 +++- .../lowcoder/src/comps/comps/textInputComp/inputComp.tsx | 4 +++- .../src/comps/comps/textInputComp/passwordComp.tsx | 4 +++- .../src/comps/comps/textInputComp/textAreaComp.tsx | 4 +++- .../lowcoder/src/comps/controls/labelControl.tsx | 1 - 6 files changed, 17 insertions(+), 9 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx index 5b7d697eb..7ffce6416 100644 --- a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx @@ -16,7 +16,7 @@ import { withExposingConfigs, } from "comps/generators/withExposing"; import styled, { css } from "styled-components"; -import { UICompBuilder } from "../../generators"; +import { UICompBuilder, withDefault } from "../../generators"; import { FormDataPropertyView } from "../formComp/formDataConstants"; import { jsonControl } from "comps/controls/codeControl"; import { dropdownControl } from "comps/controls/dropdownControl"; @@ -58,7 +58,8 @@ import { -const InputStyle = styled(Input)<{ $style: InputLikeStyleType }>` +const InputStyle = styled(Input) <{ $style: InputLikeStyleType }>` +box-shadow: ${props=>`${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`}; ${(props) => css` ${getStyle(props.$style)} input { @@ -75,7 +76,7 @@ const childrenMap = { ...textInputChildren, viewRef: RefControl, allowClear: BoolControl.DEFAULT_TRUE, - style: styleControl(InputFieldStyle), + style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}), labelStyle:styleControl(LabelStyle), prefixIcon: IconControl, suffixIcon: IconControl, @@ -89,7 +90,7 @@ const childrenMap = { autocompleteIconColor: dropdownControl(autocompleteIconColor, "blue"), componentSize: dropdownControl(componentSize, "small"), valueInItems: booleanExposingStateControl("valueInItems"), - inputFieldStyle: styleControl(InputLikeStyle), + inputFieldStyle: withDefault(styleControl(InputLikeStyle),{borderWidth:'1px'}), animationStyle: styleControl(AnimationStyle), }; diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx index 7b570ec64..c86a2104d 100644 --- a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx @@ -119,9 +119,11 @@ const getStyle = (style: InputLikeStyleType) => { `; }; -const InputNumber = styled(AntdInputNumber) <{ +const InputNumber = styled(AntdInputNumber)<{ $style: InputLikeStyleType; }>` + box-shadow: ${(props) => + `${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`}; width: 100%; ${(props) => props.$style && getStyle(props.$style)} `; diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx index 349e30e67..62c8beec7 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx @@ -40,7 +40,9 @@ import { EditorContext } from "comps/editorState"; * Input Comp */ -const InputStyle = styled(Input) <{ $style: InputLikeStyleType }>` +const InputStyle = styled(Input)<{$style: InputLikeStyleType}>` + box-shadow: ${(props) => + `${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`}; ${(props) => props.$style && getStyle(props.$style)} `; diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx index 94b63ab77..bc2e4dc63 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx @@ -43,9 +43,11 @@ import React, { useContext } from "react"; import { EditorContext } from "comps/editorState"; import { migrateOldData } from "comps/generators/simpleGenerators"; -const PasswordStyle = styled(InputPassword) <{ +const PasswordStyle = styled(InputPassword)<{ $style: InputLikeStyleType; }>` + box-shadow: ${(props) => + `${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`}; ${(props) => props.$style && getStyle(props.$style)} `; diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx index 6171aeae4..76b808464 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx @@ -38,9 +38,11 @@ import React, { useContext } from "react"; import { EditorContext } from "comps/editorState"; import { migrateOldData } from "comps/generators/simpleGenerators"; -const TextAreaStyled = styled(TextArea) <{ +const TextAreaStyled = styled(TextArea)<{ $style: InputLikeStyleType; }>` + box-shadow: ${(props) => + `${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`}; ${(props) => props.$style && getStyle(props.$style)} `; diff --git a/client/packages/lowcoder/src/comps/controls/labelControl.tsx b/client/packages/lowcoder/src/comps/controls/labelControl.tsx index 3b780fc0a..1217631aa 100644 --- a/client/packages/lowcoder/src/comps/controls/labelControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/labelControl.tsx @@ -231,7 +231,6 @@ export const LabelControl = (function () { : "100%", height: props.position === "column" && !!props.text ? "calc(100% - 22px)" : "100%", rotate:args?.inputFieldStyle?.rotation, - boxShadow:`${args?.inputFieldStyle?.boxShadow} ${args?.inputFieldStyle?.boxShadowColor}` }} > {args.children} From e47d7fdb197fb256adc60f98012fabc4974bce2d Mon Sep 17 00:00:00 2001 From: Mac Date: Tue, 4 Jun 2024 12:22:55 +0500 Subject: [PATCH 3/3] minor fix --- .../lowcoder/src/comps/controls/styleControlConstants.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index ab419c8a3..85b4f3b71 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -1128,7 +1128,7 @@ export const startButtonStyle = [ export const LabelStyle = [ ...replaceAndMergeMultipleStyles([...InputLikeStyle], "text", [LABEL]).filter( - (style) => style.name !== "radius" && style.name !== "background"&&style.name!=='rotation' + (style) => style.name !== "radius" && style.name !== "background" && style.name!=='rotation' && style.name !== "boxShadow"&&style.name!=='boxShadowColor' ), ];