Merge pull request #686 from imtananikhwa/imtanan-task1

FalkWolsky · web-flow · commit 5c6a0e1ea171 · 2024-02-18T11:25:14.000+01:00
Add properties and CSS controls to components
diff --git 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
@@ -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
@@ -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
@@ -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)<IProps>`
+const StyledDivider = styled(Divider) <IProps>`
   margin-top: 3.5px;
   .ant-divider-inner-text {
     height: 32px;
@@ -30,16 +30,17 @@ const StyledDivider = styled(Divider)<IProps>`
     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
@@ -23,17 +23,18 @@ type IProps = {
   $justify: boolean;
   $bgColor: string;
   $borderColor: string;
+  $borderWidth: string;
 };
 
-const Wrapper = styled("div")<Pick<IProps, "$bgColor" | "$borderColor">>`
+const Wrapper = styled("div") <Pick<IProps, "$bgColor" | "$borderColor" | "$borderWidth">>`
   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")<Pick<IProps, "$justify">>`
+const NavInner = styled("div") <Pick<IProps, "$justify">>`
   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)<MenuProps>`
+const StyledMenu = styled(Menu) <MenuProps>`
   &.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 (
-    <Wrapper $borderColor={props.style.border} $bgColor={props.style.background}>
+    <Wrapper
+      $borderColor={props.style.border}
+      $bgColor={props.style.background}
+      $borderWidth={props.style.borderWidth}
+    >
       <NavInner $justify={justify}>
         {props.logoUrl && (
           <LogoWrapper onClick={() => props.logoEvent("click")}>
@@ -220,7 +237,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
           </Section>
         )}
 
-        {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (  
+        {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
           <Section name={sectionNames.style}>
             {children.style.getPropertyView()}
           </Section>
diff --git 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<PrefixType>("@");
     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}
             />
           </ConfigProvider>
@@ -222,12 +222,12 @@ let MentionTmpComp = (function () {
         )}
 
         {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
-        <><Section name={sectionNames.interaction}>
+          <><Section name={sectionNames.interaction}>
             {children.onEvent.getPropertyView()}
             {disabledPropertyView(children)}
           </Section>
-          <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
-          <Section name={sectionNames.advanced}>
+            <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
+            <Section name={sectionNames.advanced}>
               {readOnlyPropertyView(children)}
             </Section><Section name={sectionNames.validation}>
               {requiredPropertyView(children)}
@@ -241,9 +241,9 @@ let MentionTmpComp = (function () {
         )}
 
         {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
-        <><Section name={sectionNames.style}>
-              {children.style.getPropertyView()}
-            </Section></>
+          <><Section name={sectionNames.style}>
+            {children.style.getPropertyView()}
+          </Section></>
         )}
       </>
     ))
diff --git 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;

Original file line number	Diff line number	Diff line change
@@ -42,6 +42,11 @@ const LeftButtonWrapper = styled.div<{ $buttonStyle: ButtonStyleType }>`
`42`	`42`	`margin: 0 !important;`
`43`	`43`	${(props) => `border-radius: ${props.$buttonStyle.radius} 0 0 ${props.$buttonStyle.radius};`}
`44`	`44`	`}`
	`45`	+ ${(props) => `background-color: ${props.$buttonStyle.background};`}
	`46`	+ ${(props) => `color: ${props.$buttonStyle.text};`}
	`47`	+ ${(props) => `padding: ${props.$buttonStyle.padding};`}
	`48`	+ ${(props) => `font-size: ${props.$buttonStyle.textSize};`}
	`49`	+ ${(props) => `font-style: ${props.$buttonStyle.fontStyle};`}
`45`	`50`	`width: 100%;`
`46`	`51`	`}`
`47`	`52`	`;