lowcoder-org · FalkWolsky · Feb 22, 2024 · Feb 22, 2024 · Feb 22, 2024 · Feb 22, 2024
diff --git a/client/packages/lowcoder/index.html b/client/packages/lowcoder/index.html
@@ -7,6 +7,10 @@
     <meta name="theme-color" content="#000000" />
     <meta property="iframely:title" content="Lowcoder" />
     <meta property="iframely:description" content="Lowcoder | rapid App & VideoMeeting builder for everyone." />
+    <!-- Added Montserrat google font link to test font family style property for components -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
     <style>
       html,
       body {

diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx
@@ -13,6 +13,7 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
   return css`
     &&& {
       border-radius: ${buttonStyle.radius};
+      border-width:${buttonStyle.borderWidth};
       margin: ${buttonStyle.margin};	
       padding: ${buttonStyle.padding};
       &:not(:disabled) {

diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx
@@ -33,6 +33,7 @@ const Link = styled(Button) <{ $style: LinkStyleType }>`
     font-family:${props.$style.fontFamily};
     font-weight:${props.$style.textWeight};
     border: ${props.$style.borderWidth} solid ${props.$style.border};
+    border-radius:${props.$style.radius ? props.$style.radius:'0px'};
     background-color: ${props.$style.background};
     &:hover {
       color: ${props.$style.hoverText} !important;
@@ -41,7 +42,8 @@ const Link = styled(Button) <{ $style: LinkStyleType }>`
       color: ${props.$style.activeText} !important;
     }
   `}
-  &.ant-btn {
+
+  &.ant-btn { 
     display: inline-flex;
     align-items: center;
     > span {

diff --git a/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx b/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx
@@ -141,6 +141,11 @@ const getStyle = (style: FileStyleType) => {
       padding: ${style.padding};	
       width: ${widthCalculator(style.margin)};	
       height: ${heightCalculator(style.margin)};
+      font-family:${style.fontFamily};
+      font-size:${style.textSize};
+      font-weight:${style.textWeight};
+      font-style:${style.fontStyle};
+      border-width:${style.borderWidth};
     }
 
     .ant-btn:not(:disabled) {

diff --git a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx
@@ -24,18 +24,19 @@ type IProps = {
   $bgColor: string;
   $borderColor: string;
   $borderWidth: string;
+  $borderRadius: string;
 };
 
-const Wrapper = styled("div") <Pick<IProps, "$bgColor" | "$borderColor" | "$borderWidth">>`
+const Wrapper = styled("div") <Pick<IProps, "$bgColor" | "$borderColor" | "$borderWidth" | "$borderRadius">>`
   height: 100%;
-  border-radius: 2px;
+  border-radius: ${(props) => props.$borderRadius ? props.$borderRadius : '2px'};
   box-sizing: border-box;
   border: ${(props) => props.$borderWidth ? `${props.$borderWidth}` : '1px'} solid ${(props) => props.$borderColor};
   background-color: ${(props) => props.$bgColor};
 `;
 
 const NavInner = styled("div") <Pick<IProps, "$justify">>`
-  margin: 0 -16px;
+  // margin: 0 -16px;
   height: 100%;
   display: flex;
   justify-content: ${(props) => (props.$justify ? "space-between" : "left")};
@@ -49,17 +50,19 @@ const Item = styled.div<{
   $fontStyle: string;
   $textWeight: string;
   $textSize: string;
+  $margin: string;
+  $padding: string;
 }>`
   height: 30px;
   line-height: 30px;
-  padding: 0 16px;
+  padding: ${(props) => props.$padding ? props.$padding : '0 16px'};
   color: ${(props) => (props.$active ? props.$activeColor : props.$color)};
   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')}
-
-
+  font-size:${(props) => (props.$textSize ? props.$textSize : '14px')};
+  margin:${(props) => props.$margin ? props.$margin : '0px'};
+  
   &:hover {
     color: ${(props) => props.$activeColor};
     cursor: pointer;
@@ -157,6 +160,8 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
             $fontStyle={props.style.fontStyle}
             $textWeight={props.style.textWeight}
             $textSize={props.style.textSize}
+            $padding={props.style.padding}
+            $margin={props.style.margin}
             onClick={() => onEvent("click")}
           >
             {label}
@@ -195,6 +200,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
       $borderColor={props.style.border}
       $bgColor={props.style.background}
       $borderWidth={props.style.borderWidth}
+      $borderRadius={props.style.borderRadius}
     >
       <NavInner $justify={justify}>
         {props.logoUrl && (

diff --git a/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx b/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx
@@ -1,6 +1,6 @@
 import { default as Progress } from "antd/es/progress";
 import { styleControl } from "comps/controls/styleControl";
-import { ProgressStyle, ProgressStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
+import { CircleProgressStyle, CircleProgressType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
 import styled, { css } from "styled-components";
 import { Section, sectionNames } from "lowcoder-design";
 import { numberExposingStateControl } from "../controls/codeStateControl";
@@ -14,33 +14,38 @@ import { EditorContext } from "comps/editorState";
 
 // TODO: after Update of ANTd, introduce Size attribute to ProgressCircle
 
-const getStyle = (style: ProgressStyleType) => {
+const getStyle = (style: CircleProgressType) => {
   return css`
     width: ${widthCalculator(style.margin)};	
     height: ${heightCalculator(style.margin)};	
     margin: ${style.margin};	
     padding: ${style.padding};
+    border-radius:${style.radius};
     .ant-progress-text {
-      color: ${style.text};
+      color: ${style.text} !important;
+      font-family:${style.fontFamily};
+      font-style:${style.fontStyle};
+      font-size:${style.textSize} !important;
+      font-weight:${style.textWeight};
     }
     .ant-progress-circle-trail {
       stroke: ${style.track};
     }
     .ant-progress-inner .ant-progress-circle-path {
-      stroke: ${style.fill};
+      stroke: ${style.fill} !important;
     }
     &.ant-progress-status-success {
       .ant-progress-inner .ant-progress-circle-path {
-        stroke: ${style.success};
+        stroke: ${style.success} !important;
       }
       .ant-progress-text {
-        color: ${style.success};
+        color: ${style.success} !important;
       }
     }
   `;
 };
 
-export const StyledProgressCircle = styled(Progress)<{ $style: ProgressStyleType }>`
+export const StyledProgressCircle = styled(Progress) <{ $style: CircleProgressType }>`
   width: 100%;
   height: 100%;
   padding: 2px;
@@ -59,7 +64,8 @@ export const StyledProgressCircle = styled(Progress)<{ $style: ProgressStyleType
 let ProgressCircleTmpComp = (function () {
   const childrenMap = {
     value: numberExposingStateControl("value", 60),
-    style: styleControl(ProgressStyle),
+    // borderRadius property hidden as it's not valid for progress circle
+    style: styleControl(CircleProgressStyle),
   };
   return new UICompBuilder(childrenMap, (props) => {
     return (

diff --git a/client/packages/lowcoder/src/comps/comps/progressComp.tsx b/client/packages/lowcoder/src/comps/comps/progressComp.tsx
@@ -21,6 +21,7 @@ const getStyle = (style: ProgressStyleType) => {
       font-style:${style.fontStyle};
         font-family:${style.fontFamily};
         font-weight:${style.textWeight};
+        font-size:${style.textSize};
     }
     width: ${widthCalculator(style.margin)};	
     height: ${heightCalculator(style.margin)};	

diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx
@@ -192,7 +192,17 @@ let MentionTmpComp = (function () {
                 label: value,
               }))}
               autoSize={props.autoHeight}
-              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 }}
+              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,
+                fontSize: props.style.textSize
+              }}
               readOnly={props.readOnly}
             />
           </ConfigProvider>

diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -476,7 +476,8 @@ function replaceAndMergeMultipleStyles(originalArray: any[], styleToReplace: str
 }
 
 export const ButtonStyle = [
-  ...getBgBorderRadiusByBg("primary"),
+  // ...getBgBorderRadiusByBg("primary"),
+  getBackground('primary'),
   ...STYLING_FIELDS_SEQUENCE
 ] as const;
 
@@ -1015,7 +1016,12 @@ export const TableColumnLinkStyle = [
   ...LinkTextStyle,
 ] as const;
 
-export const FileStyle = [...getStaticBgBorderRadiusByBg(SURFACE_COLOR), TEXT, ACCENT, MARGIN, PADDING] as const;
+export const FileStyle = [
+  // ...getStaticBgBorderRadiusByBg(SURFACE_COLOR), 
+  getStaticBackground(SURFACE_COLOR),
+  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE,'border',[getStaticBorder('#00000000')]),
+  // TEXT, ACCENT, MARGIN, PADDING
+] as const;
 
 export const FileViewerStyle = [
   getStaticBackground("#FFFFFF"),
@@ -1084,30 +1090,43 @@ export const ProgressStyle = [
     depTheme: "canvas",
     depType: DEP_TYPE.CONTRAST_TEXT,
     transformer: contrastText,
-  }]).filter((style)=> ['border','borderWidth'].includes(style.name) === false),
+  }]).filter((style) => ['border', 'borderWidth'].includes(style.name) === false),
   TRACK,
   FILL,
   SUCCESS,
 ] as const;
 
+export const CircleProgressStyle = [...ProgressStyle.filter((style) => style.name !== 'radius')]
+
 export const NavigationStyle = [
-  {
-    name: "text",
-    label: trans("text"),
-    depName: "background",
-    depType: DEP_TYPE.CONTRAST_TEXT,
-    transformer: contrastText,
-  },
-  ACCENT,
-  getStaticBackground("#FFFFFF00"),
-  getStaticBorder("#FFFFFF00"),
-  MARGIN,
-  PADDING,
-  FONT_FAMILY,
-  FONT_STYLE,
-  TEXT_WEIGHT,
-  TEXT_SIZE,
-  BORDER_WIDTH
+  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [
+    {
+      name: "text",
+      label: trans("text"),
+      depName: "background",
+      depType: DEP_TYPE.CONTRAST_TEXT,
+      transformer: contrastText,
+    },
+    ACCENT,
+    getStaticBackground("#FFFFFF00")
+  ])
+  // {
+  //   name: "text",
+  //   label: trans("text"),
+  //   depName: "background",
+  //   depType: DEP_TYPE.CONTRAST_TEXT,
+  //   transformer: contrastText,
+  // },
+  // ACCENT,
+  // getStaticBackground("#FFFFFF00"),
+  // 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;
@@ -1363,6 +1382,7 @@ export type DateTimeStyleType = StyleConfigType<typeof DateTimeStyle>;
 export type LinkStyleType = StyleConfigType<typeof LinkStyle>;
 export type DividerStyleType = StyleConfigType<typeof DividerStyle>;
 export type ProgressStyleType = StyleConfigType<typeof ProgressStyle>;
+export type CircleProgressType = StyleConfigType<typeof CircleProgressStyle>;
 export type NavigationStyleType = StyleConfigType<typeof NavigationStyle>;
 export type ImageStyleType = StyleConfigType<typeof ImageStyle>;
 export type ListViewStyleType = StyleConfigType<typeof ListViewStyle>;