From 0886f58f394e2d7c1bdd5dc8a1bf2058fff5ecfd Mon Sep 17 00:00:00 2001 From: Imtanan Aziz Toor Date: Sat, 17 Feb 2024 23:32:19 +0500 Subject: [PATCH] Controls added to divider, button comp, dropdown, nav ,link & mention componente --- .../comps/buttonComp/buttonCompConstants.tsx | 1 + .../comps/comps/buttonComp/dropdownComp.tsx | 5 +++ .../src/comps/comps/buttonComp/linkComp.tsx | 4 +++ .../lowcoder/src/comps/comps/dividerComp.tsx | 15 ++++----- .../src/comps/comps/navComp/navComp.tsx | 31 ++++++++++++++----- .../comps/comps/textInputComp/mentionComp.tsx | 16 +++++----- .../comps/controls/styleControlConstants.tsx | 21 ++++++++++++- 7 files changed, 70 insertions(+), 23 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx index 7114a019b..0f60c7a2d 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx @@ -22,6 +22,7 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) { font-size: ${buttonStyle.textSize}; font-weight: ${buttonStyle.textWeight}; font-family: ${buttonStyle.fontFamily}; + font-style: ${buttonStyle.fontStyle}; background-color: ${buttonStyle.background}; border-radius: ${buttonStyle.radius}; margin: ${buttonStyle.margin}; diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx index f58b39bd6..7c2278d7b 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx @@ -42,6 +42,11 @@ const LeftButtonWrapper = styled.div<{ $buttonStyle: ButtonStyleType }>` margin: 0 !important; ${(props) => `border-radius: ${props.$buttonStyle.radius} 0 0 ${props.$buttonStyle.radius};`} } + ${(props) => `background-color: ${props.$buttonStyle.background};`} + ${(props) => `color: ${props.$buttonStyle.text};`} + ${(props) => `padding: ${props.$buttonStyle.padding};`} + ${(props) => `font-size: ${props.$buttonStyle.textSize};`} + ${(props) => `font-style: ${props.$buttonStyle.fontStyle};`} width: 100%; } `; diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx index 275b125b3..65b288bac 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx @@ -29,6 +29,10 @@ const Link = styled(Button)<{ $style: LinkStyleType }>` margin: ${props.$style.margin}; padding: ${props.$style.padding}; font-size: ${props.$style.textSize}; + font-style:${props.$style.fontStyle}; + font-family:${props.$style.fontFamily}; + border: ${props.$style.borderWidth} solid ${props.$style.border}; + background-color: ${props.$style.background}; &:hover { color: ${props.$style.hoverText} !important; } diff --git a/client/packages/lowcoder/src/comps/comps/dividerComp.tsx b/client/packages/lowcoder/src/comps/comps/dividerComp.tsx index e830a6f41..032807de2 100644 --- a/client/packages/lowcoder/src/comps/comps/dividerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/dividerComp.tsx @@ -21,7 +21,7 @@ type IProps = DividerProps & { $style: DividerStyleType; dashed: boolean }; // TODO: find out how to set border style when text is active // TODO: enable type "vertical" https://ant.design/components/divider -const StyledDivider = styled(Divider)` +const StyledDivider = styled(Divider) ` margin-top: 3.5px; .ant-divider-inner-text { height: 32px; @@ -30,16 +30,17 @@ const StyledDivider = styled(Divider)` font-size: ${(props) => props.$style.textSize}; font-weight: ${(props) => props.$style.textWeight}; font-family: ${(props) => props.$style.fontFamily}; + font-style:${(props) => props.$style.fontStyle} } min-width: 0; - width: ${(props) => { - return widthCalculator(props.$style.margin); + width: ${(props) => { + return widthCalculator(props.$style.margin); }}; - min-height: ${(props) => { - return heightCalculator(props.$style.margin); + min-height: ${(props) => { + return heightCalculator(props.$style.margin); }}; - margin: ${(props) => { - return props.$style.margin; + margin: ${(props) => { + return props.$style.margin; }}; padding: ${(props) => props.$style.padding}; diff --git a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx index fb6d4609b..c5eedea6f 100644 --- a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx @@ -23,17 +23,18 @@ type IProps = { $justify: boolean; $bgColor: string; $borderColor: string; + $borderWidth: string; }; -const Wrapper = styled("div")>` +const Wrapper = styled("div") >` height: 100%; border-radius: 2px; box-sizing: border-box; - border: 1px solid ${(props) => props.$borderColor}; + border: ${(props) => props.$borderWidth ? `${props.$borderWidth}` : '1px'} solid ${(props) => props.$borderColor}; background-color: ${(props) => props.$bgColor}; `; -const NavInner = styled("div")>` +const NavInner = styled("div") >` margin: 0 -16px; height: 100%; display: flex; @@ -44,12 +45,20 @@ const Item = styled.div<{ $active: boolean; $activeColor: string; $color: string; + $fontFamily: string; + $fontStyle: string; + $textWeight: string; + $textSize: string; }>` height: 30px; line-height: 30px; padding: 0 16px; color: ${(props) => (props.$active ? props.$activeColor : props.$color)}; - font-weight: 500; + font-weight: ${(props) => (props.$textWeight ? props.$textWeight : 500)}; + font-family:${(props) => (props.$fontFamily ? props.$fontFamily : 'sans-serif')}; + font-style:${(props) => (props.$fontStyle ? props.$fontStyle : 'normal')}; + font-size:${(props) => (props.$textSize ? props.$textSize : '14px')} + &:hover { color: ${(props) => props.$activeColor}; @@ -79,7 +88,7 @@ const ItemList = styled.div<{ $align: string }>` justify-content: ${(props) => props.$align}; `; -const StyledMenu = styled(Menu)` +const StyledMenu = styled(Menu) ` &.ant-dropdown-menu { min-width: 160px; } @@ -144,6 +153,10 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { $active={active || subMenuSelectedKeys.length > 0} $color={props.style.text} $activeColor={props.style.accent} + $fontFamily={props.style.fontFamily} + $fontStyle={props.style.fontStyle} + $textWeight={props.style.textWeight} + $textSize={props.style.textSize} onClick={() => onEvent("click")} > {label} @@ -178,7 +191,11 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { const justify = props.horizontalAlignment === "justify"; return ( - + {props.logoUrl && ( props.logoEvent("click")}> @@ -220,7 +237,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { )} - {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( + {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
{children.style.getPropertyView()}
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx index 630f7e376..28051a067 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx @@ -101,7 +101,7 @@ let MentionTmpComp = (function () { const [activationFlag, setActivationFlag] = useState(false); const [prefix, setPrefix] = useState("@"); type PrefixType = "@" | keyof typeof mentionList; - + const onSearch = (_: string, newPrefix: PrefixType) => { setPrefix(newPrefix); }; @@ -192,7 +192,7 @@ let MentionTmpComp = (function () { label: value, }))} autoSize={props.autoHeight} - style={{ height: "100%", maxHeight: "100%", resize: "none", padding: props.style.padding }} + style={{ height: "100%", maxHeight: "100%", resize: "none", padding: props.style.padding, fontStyle: props.style.fontStyle, fontFamily: props.style.fontFamily, borderWidth: props.style.borderWidth, fontWeight: props.style.textWeight }} readOnly={props.readOnly} /> @@ -222,12 +222,12 @@ let MentionTmpComp = (function () { )} {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && ( - <>
+ <>
{children.onEvent.getPropertyView()} {disabledPropertyView(children)}
-
{hiddenPropertyView(children)}
-
+
{hiddenPropertyView(children)}
+
{readOnlyPropertyView(children)}
{requiredPropertyView(children)} @@ -241,9 +241,9 @@ let MentionTmpComp = (function () { )} {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( - <>
- {children.style.getPropertyView()} -
+ <>
+ {children.style.getPropertyView()} +
)} )) diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index c01fc0d0b..86189ba5a 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -455,6 +455,7 @@ export const ButtonStyle = [ TEXT_SIZE, TEXT_WEIGHT, FONT_FAMILY, + FONT_STYLE, MARGIN, PADDING ] as const; @@ -474,6 +475,7 @@ export const ToggleButtonStyle = [ TEXT_SIZE, TEXT_WEIGHT, FONT_FAMILY, + FONT_STYLE, MARGIN, PADDING, ] as const; @@ -1045,8 +1047,19 @@ function handleToHoverLink(color: string) { export const LinkStyle = [ ...LinkTextStyle, + { + name: "background", + label: trans("style.background"), + depTheme: "canvas", + depType: DEP_TYPE.SELF, + transformer: toSelf, + }, MARGIN, PADDING, + FONT_FAMILY, + FONT_STYLE, + BORDER, + BORDER_WIDTH, TEXT_SIZE ] as const; @@ -1067,7 +1080,8 @@ export const DividerStyle = [ }, TEXT_SIZE, TEXT_WEIGHT, - FONT_FAMILY + FONT_FAMILY, + FONT_STYLE ] as const; export const ProgressStyle = [ @@ -1098,6 +1112,11 @@ export const NavigationStyle = [ getStaticBorder("#FFFFFF00"), MARGIN, PADDING, + FONT_FAMILY, + FONT_STYLE, + TEXT_WEIGHT, + TEXT_SIZE, + BORDER_WIDTH ] as const; export const ImageStyle = [getStaticBorder("#00000000"), RADIUS, BORDER_WIDTH, MARGIN, PADDING] as const;