From 98ac9239cfa72ca0be1887552779af9f10401735 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Wed, 12 Jun 2024 21:40:18 +0500 Subject: [PATCH 1/2] condition updated --- .../lowcoder/src/comps/generators/uiCompBuilder.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx index da84424de..64be29b6e 100644 --- a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx +++ b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx @@ -287,7 +287,11 @@ function UIView(props: { } else { return '0px'; // Both rotation and box-shadow are empty or restricted } - } else if (rotationVal !== '' && rotationVal !== '0deg') { + }else if ( + rotationVal === null || + rotationVal === undefined || + rotationVal === '0px' + ){return '0px'} else if (rotationVal !== '' && rotationVal !== '0deg') { // Rotation applied if ( boxShadowVal === null || From aeaa42f7ae262e5d60c01adb3a4359f062a978f1 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Thu, 13 Jun 2024 03:20:53 +0500 Subject: [PATCH 2/2] styling updated --- .../lowcoder/src/comps/comps/buttonComp/linkComp.tsx | 2 +- .../src/comps/comps/containerComp/cardComp.tsx | 6 ++++++ .../lowcoder/src/comps/comps/dividerComp.tsx | 5 +++-- .../lowcoder/src/comps/comps/fileComp/fileComp.tsx | 4 ++++ .../packages/lowcoder/src/comps/comps/iframeComp.tsx | 4 +++- .../src/comps/comps/mediaComp/colorPickerComp.tsx | 3 +++ .../src/comps/comps/meetingComp/controlButton.tsx | 2 +- .../lowcoder/src/comps/comps/navComp/navComp.tsx | 12 +++++++----- .../comps/responsiveLayout/responsiveLayout.tsx | 2 +- .../src/comps/comps/tabs/tabbedContainerComp.tsx | 5 ++++- .../comps/comps/triContainerComp/triContainer.tsx | 1 + 11 files changed, 34 insertions(+), 12 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx index b9e1a7031..bd3765681 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx @@ -37,7 +37,7 @@ const Link = styled(Button)<{ font-style:${props.$style.fontStyle}; font-family:${props.$style.fontFamily}; font-weight:${props.$style.textWeight}; - border: ${props.$style.borderWidth} solid ${props.$style.border}; + border: ${props.$style.borderWidth} ${props.$style.borderStyle} ${props.$style.border}; border-radius:${props.$style.radius ? props.$style.radius:'0px'}; text-transform:${props.$style.textTransform ? props.$style.textTransform:''}; text-decoration:${props.$style.textDecoration ? props.$style.textDecoration:''} !important; diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx index 43fc1bcb7..7c8bea425 100644 --- a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx @@ -49,6 +49,10 @@ const Wrapper = styled.div<{ margin: ${props => props.$headerStyle?.margin}; padding: ${props => props.$headerStyle?.padding}; } + .ant-card-head-title{ + font-size: ${props => props.$headerStyle?.textSize}; + font-family: ${props => props.$headerStyle?.fontFamily}; + } .ant-card .ant-card-actions { border-top: 1px solid ${props => props.$style?.border}; } @@ -72,6 +76,8 @@ const Wrapper = styled.div<{ display: flex; flex-direction: column; justify-content: space-between; + margin: ${props => props.$style?.margin}; + padding: ${props => props.$style?.padding}; background-color: ${props => props.$style?.background}; border: ${props => props.$style?.border}; rotate: ${props => props.$style?.rotation}; diff --git a/client/packages/lowcoder/src/comps/comps/dividerComp.tsx b/client/packages/lowcoder/src/comps/comps/dividerComp.tsx index 3baf6b53d..53f5a3eb9 100644 --- a/client/packages/lowcoder/src/comps/comps/dividerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/dividerComp.tsx @@ -27,6 +27,7 @@ type IProps = DividerProps & { const StyledDivider = styled(Divider) ` margin-top: 3.5px; + rotate:${props=>props.$style.rotation}; .ant-divider-inner-text { height: 32px; display: flex; @@ -50,8 +51,8 @@ const StyledDivider = styled(Divider) ` return props.$style.margin; }}; padding: ${(props) => props.$style.padding}; - - border-top: ${(props) => (props.$style.borderWidth && props.$style.borderWidth != "0px" ? props.$style.borderWidth : "1px")} ${(props) => (props.dashed ? "dashed" : "solid")} ${(props) => props.$style.border}; + border-radius:${props=>props.$style.radius}; + border-top: ${(props) => (props.$style.borderWidth && props.$style.borderWidth != "0px" ? props.$style.borderWidth : "1px")} ${(props) => props.$style.borderStyle} ${(props) => props.$style.border}; "" .ant-divider-inner-text::before, .ant-divider-inner-text::after { border-block-start: ${(props) => (props.$style.borderWidth && props.$style.borderWidth != "0px" ? props.$style.borderWidth : "1px")} ${(props) => (props.dashed ? "dashed" : "solid")} ${(props) => props.$style.border} !important; diff --git a/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx b/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx index fa1e4a080..a44895642 100644 --- a/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx @@ -148,6 +148,10 @@ const getStyle = (style: FileStyleType) => { font-weight:${style.textWeight}; font-style:${style.fontStyle}; border-width:${style.borderWidth}; + border-style:${style.borderStyle}; + text-decoration:${style.textDecoration}; + text-transform:${style.textTransform}; + text-transform:${style.textTransform}; } .ant-btn:not(:disabled) { diff --git a/client/packages/lowcoder/src/comps/comps/iframeComp.tsx b/client/packages/lowcoder/src/comps/comps/iframeComp.tsx index b0e7dd64f..db65a1057 100644 --- a/client/packages/lowcoder/src/comps/comps/iframeComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/iframeComp.tsx @@ -21,7 +21,9 @@ const Wrapper = styled.div<{$style: IframeStyleType; $animationStyle:AnimationSt props.$style.borderWidth ? props.$style.borderWidth : '1px'} solid ${(props) => props.$style.border}; border-radius: calc(min(${(props) => props.$style.radius}, 20px)); -rotate:${props => props.$style.rotation} +rotate:${props => props.$style.rotation}; +margin:${props => props.$style.margin}; +padding:${props => props.$style.padding}; ${props=>props.$animationStyle} iframe { border: 0; diff --git a/client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx b/client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx index f7ccaf662..cbe6cf749 100644 --- a/client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx @@ -23,6 +23,9 @@ export function getStyle(style: ColorPickerStyleType) { &:not(.ant-input-disabled, .ant-input-affix-wrapper-disabled), input { background-color: ${style.background}; + color:${style.text}; + font-weight:${style.textWeight}; + font-family:${style.fontFamily}; border-color: ${style.border}; &:focus, &.ant-input-affix-wrapper-focused { diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx index 07a3ab216..6b5df1cb0 100644 --- a/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx +++ b/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx @@ -53,7 +53,7 @@ const Container = styled.div<{ $style: any }>` const getStyle = (style: any) => { return css` button { - border: 1px solid ${style.border}; + border: ${style.borderWidth} ${style.borderStyle} ${style.border}; border-radius: ${style.radius}; margin: ${style.margin}; rotate: ${style.rotation}; diff --git a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx index 124829fb2..b09e5928b 100644 --- a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx @@ -29,17 +29,18 @@ type IProps = { $borderColor: string; $borderWidth: string; $borderRadius: string; - $animationStyle:AnimationStyleType; + $borderStyle: string; + $animationStyle: AnimationStyleType; }; const Wrapper = styled("div")< - Pick + Pick >` ${props=>props.$animationStyle} height: 100%; - border-radius: ${(props) => props.$borderRadius ? props.$borderRadius : '2px'}; + border-radius: ${(props) =>props.$borderRadius ? props.$borderRadius : '2px'}; box-sizing: border-box; - border: ${(props) => props.$borderWidth ? `${props.$borderWidth}` : '1px'} solid ${(props) => props.$borderColor}; + border: ${(props) => props.$borderWidth ? `${props.$borderWidth}` : '1px'} ${props=>props.$borderStyle} ${(props) => props.$borderColor}; background-color: ${(props) => props.$bgColor}; `; @@ -212,11 +213,12 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { return ( {props.logoUrl && ( diff --git a/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx b/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx index a5e131248..fe3509aba 100644 --- a/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx +++ b/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx @@ -50,7 +50,7 @@ const RowWrapper = styled(Row)<{ ${(props) => props.$animationStyle} height: 100%; border-radius: ${(props) => props.$style?.radius}; - border-width: ${(props) => props.$style?.borderWidth}px; + border-width: ${(props) => props.$style?.borderWidth}; border-color: ${(props) => props.$style?.border}; border-style: ${(props) => props.$style?.borderStyle}; padding: ${(props) => props.$style.padding}; diff --git a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx index dbfaf6755..613032f90 100644 --- a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx @@ -76,7 +76,7 @@ const getStyle = ( return css` &.ant-tabs { overflow: hidden; - border: ${style.borderWidth} solid ${style.border}; + border: ${style.borderWidth} ${style.borderStyle} ${style.border}; border-radius: ${style.radius}; padding: ${style.padding}; background-color: ${style.background}; @@ -91,11 +91,13 @@ const getStyle = ( .react-grid-layout { border-radius: 0; background-color: ${bodyStyle.background || 'transparent'}; + padding: ${bodyStyle.containerBodyPadding}; } } > .ant-tabs-nav { background-color: ${headerStyle.headerBackground || 'transparent'}; + padding: ${headerStyle.containerHeaderPadding}; .ant-tabs-tab { div { @@ -108,6 +110,7 @@ const getStyle = ( } .ant-tabs-tab-btn { + color: ${style.tabText} !important; font-size: ${style.textSize}; font-family:${style.fontFamily}; font-weight:${style.textWeight}; diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx index b1cedc8cc..4f78b5079 100644 --- a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx +++ b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx @@ -13,6 +13,7 @@ const getStyle = (style: ContainerStyleType) => { border-color: ${style.border}; border-width: ${style.borderWidth}; border-radius: ${style.radius}; + border-style: ${style.borderStyle}; overflow: hidden; padding: ${style.padding}; ${style.background && `background-color: ${style.background};`}