lowcoder-org · FalkWolsky · Jul 12, 2023 · Jul 10, 2023 · Jul 10, 2023 · Jul 12, 2023
diff --git a/client/packages/lowcoder-design/src/icons/icon-compress.svg b/client/packages/lowcoder-design/src/icons/icon-compress.svg
diff --git a/client/packages/lowcoder-design/src/icons/icon-expand.svg b/client/packages/lowcoder-design/src/icons/icon-expand.svg
diff --git a/client/packages/lowcoder-design/src/icons/index.ts b/client/packages/lowcoder-design/src/icons/index.ts
@@ -284,4 +284,6 @@ export { ReactComponent as CalendarDeleteIcon } from "icons/icon-calendar-delete
 export { ReactComponent as TableCheckedIcon } from "icons/icon-table-checked.svg";
 export { ReactComponent as TableUnCheckedIcon } from "icons/icon-table-boolean-false.svg";
 export { ReactComponent as FileFolderIcon } from "icons/icon-editor-folder.svg";
+export { ReactComponent as ExpandIcon } from "icons/icon-expand.svg";
+export { ReactComponent as CompressIcon } from "icons/icon-compress.svg"
 export { ReactComponent as TableCellsIcon } from "icons/icon-table-cells.svg" // Added By Aqib Mirza
diff --git a/client/packages/lowcoder/src/api/commonSettingApi.ts b/client/packages/lowcoder/src/api/commonSettingApi.ts
@@ -44,6 +44,8 @@ export interface ThemeDetail {
   primarySurface: string; // comp bg-color
   borderRadius: string;
   chart?: string;
+  margin?: string;	
+  padding?: string;
   gridColumns?: string; //Added By Aqib Mirza
 }
 
@@ -61,6 +63,10 @@ export function getThemeDetailName(key: keyof ThemeDetail) {
       return trans("themeDetail.primarySurface");
     case "borderRadius":
       return trans("themeDetail.borderRadius");
+    case "margin":	
+      return trans("style.margin");	
+    case "padding":	
+      return trans("style.padding");
     //Added By Aqib Mirza
     case "gridColumns":
       return trans("themeDetail.gridColumns");
@@ -75,6 +81,8 @@ export function isThemeColorKey(key: string) {
     case "textLight":
     case "canvas":
     case "primarySurface":
+    case "margin":	
+    case "padding":
     case "gridColumns": //Added By Aqib Mirza
       return true;
   }

diff --git a/client/packages/lowcoder/src/components/ColorPicker.tsx b/client/packages/lowcoder/src/components/ColorPicker.tsx
@@ -1,16 +1,20 @@
 import _ from "lodash";
 import { useEffect, useState } from "react";
-import { ConfigItem, Radius, GridColumns } from "../pages/setting/theme/styledComponents";
+import { ConfigItem, Radius, Margin, Padding, GridColumns } from "../pages/setting/theme/styledComponents";
 import { isValidColor, toHex } from "components/colorSelect/colorUtils";
 import { ColorSelect } from "components/colorSelect";
 import { TacoInput } from "components/tacoInput";
 import { TableCellsIcon as GridIcon } from "lowcoder-design"; //Added By Aqib Mirza
 
+import { ExpandIcon, CompressIcon } from "lowcoder-design";
+
 export type configChangeParams = {
   colorKey: string;
   color?: string;
   radius?: string;
   chart?: string;
+  margin?: string;	
+  padding?: string;
   gridColumns?: string; //Added By Aqib Mirza
 };
 
@@ -23,6 +27,8 @@ type ColorConfigProps = {
   radius?: string;
   configChange: (params: configChangeParams) => void;
   showVarName?: boolean;
+  margin?: string;	
+  padding?: string;
   gridColumns?: string; //Added By Aqib Mirza
 };
 
@@ -35,12 +41,16 @@ export default function ColorPicker(props: ColorConfigProps) {
     radius: defaultRadius,
     configChange,
     showVarName = true,
+    margin: defaultMargin,	
+    padding: defaultPadding,
     gridColumns: defaultGridColumns, //Added By Aqib Mirza
   } = props;
   const configChangeWithDebounce = _.debounce(configChange, 0);
   const [color, setColor] = useState(defaultColor);
   const [radius, setRadius] = useState(defaultRadius);
 
+  const [margin, setMargin] = useState(defaultMargin);	
+  const [padding, setPadding] = useState(defaultPadding);
   const [gridColumns, setGridColumns] = useState(defaultGridColumns); //Added By Aqib Mirza
 
   const varName = `(${colorKey})`;
@@ -69,6 +79,35 @@ export default function ColorPicker(props: ColorConfigProps) {
     configChange({ colorKey, radius: result });
   };
 
+  const marginInputBlur = (margin: string) => {	
+    let result = "";	
+    if (!margin || Number(margin) === 0) {	
+      result = "0";	
+    } else if (/^[0-9]+$/.test(margin)) {	
+      result = Number(margin) + "px";	
+    } else if (/^[0-9]+(px|%)$/.test(margin)) {	
+      result = margin;	
+    } else {	
+      result = "3px";	
+    }	
+    setMargin(result);	
+    configChange({ colorKey, margin: result });	
+  };	
+  const paddingInputBlur = (padding: string) => {	
+    let result = "";	
+    if (!padding || Number(padding) === 0) {	
+      result = "0";	
+    } else if (/^[0-9]+$/.test(padding)) {	
+      result = Number(padding) + "px";	
+    } else if (/^[0-9]+(px|%)$/.test(padding)) {	
+      result = padding;	
+    } else {	
+      result = "3px";	
+    }	
+    setPadding(result);	
+    configChange({ colorKey, padding: result });	
+  };
+
   //Added By Aqib Mirza
 
   const gridColumnsInputBlur = (gridColumns: string) => {
@@ -99,6 +138,13 @@ export default function ColorPicker(props: ColorConfigProps) {
     setRadius(defaultRadius);
   }, [defaultRadius]);
 
+  useEffect(() => {	
+    setMargin(defaultMargin);	
+  }, [defaultMargin]);	
+
+  useEffect(() => {	
+    setPadding(defaultPadding);	
+  }, [defaultPadding]);
   // Added By Aqib Mirza
   useEffect(() => {
     setGridColumns(defaultGridColumns);
@@ -113,7 +159,9 @@ export default function ColorPicker(props: ColorConfigProps) {
         </div>
         <div className="desc">{desc}</div>
       </div>
-      {colorKey !== "borderRadius" &&
+      {colorKey !== "borderRadius" &&	
+        colorKey !== "margin" &&	
+        colorKey !== "padding" && 
       colorKey !== "gridColumns" && (
         <div className="config-input">
           <ColorSelect
@@ -147,6 +195,42 @@ export default function ColorPicker(props: ColorConfigProps) {
           />
         </div>
       )}
+      {colorKey === "margin" && (	
+        <div className="config-input">	
+          <Margin margin={defaultMargin || "3px"}>	
+            <div>	
+              <ExpandIcon title="" />	
+            </div>	
+          </Margin>	
+          <TacoInput	
+            value={margin}	
+            onChange={(e) => setMargin(e.target.value)}	
+            onBlur={(e) => marginInputBlur(e.target.value)}	
+            onKeyUp={(e) =>	
+              e.nativeEvent.key === "Enter" &&	
+              marginInputBlur(e.currentTarget.value)	
+            }	
+          />	
+        </div>	
+      )}	
+      {colorKey === "padding" && (	
+        <div className="config-input">	
+          <Padding padding={defaultPadding || "3px"}>	
+            <div>	
+              <CompressIcon title="" />	
+            </div>	
+          </Padding>	
+          <TacoInput	
+            value={padding}	
+            onChange={(e) => setPadding(e.target.value)}	
+            onBlur={(e) => paddingInputBlur(e.target.value)}	
+            onKeyUp={(e) =>	
+              e.nativeEvent.key === "Enter" &&	
+              paddingInputBlur(e.currentTarget.value)	
+            }	
+          />	
+        </div>
+        )}
       {colorKey === "gridColumns" && (
         <div className="config-input">
           <GridColumns gridColumns={defaultGridColumns || "24"}>

diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx
@@ -12,13 +12,17 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
   const activeColor = genActiveColor(buttonStyle.background);
   return css`
     border-radius: ${buttonStyle.radius};
+    margin: ${buttonStyle.margin};	
+    padding: ${buttonStyle.padding};
     &:not(:disabled) {
       // click animation color
       --antd-wave-shadow-color: ${buttonStyle.border};
       border-color: ${buttonStyle.border};
       color: ${buttonStyle.text};
       background-color: ${buttonStyle.background};
       border-radius: ${buttonStyle.radius};
+      margin: ${buttonStyle.margin};	
+      padding: ${buttonStyle.padding};
 
       :hover,
       :focus {
@@ -37,12 +41,14 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
           : buttonStyle.border};
       }
     }
+
   `;
 }
 
 export const Button100 = styled(Button)<{ $buttonStyle?: ButtonStyleType }>`
   ${(props) => props.$buttonStyle && getButtonStyle(props.$buttonStyle)}
-  width: 100%;
+  width: -webkit-fill-available;	
+  height: auto;
   display: inline-flex;
   justify-content: center;
   align-items: center;

diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx
@@ -29,23 +29,30 @@ const DropdownButton = styled(Dropdown.Button)`
 
 const LeftButtonWrapper = styled.div<{ $buttonStyle: ButtonStyleType }>`
   width: calc(100% - 32px);
-
+  ${(props) => `margin: ${props.$buttonStyle.margin};`}
+  margin-right: 0;
   .ant-btn {
     ${(props) => getButtonStyle(props.$buttonStyle)}
+    margin: 0 !important;
+    height: 100%;
     &.ant-btn-default {
+      margin: 0 !important;
       ${(props) => `border-radius: ${props.$buttonStyle.radius} 0 0 ${props.$buttonStyle.radius};`}
     }
     width: 100%;
   }
 `;
 
 const RightButtonWrapper = styled.div<{ $buttonStyle: ButtonStyleType }>`
-  width: 32px;
+  // width: 32px;
+  ${(props) => `margin: ${props.$buttonStyle.margin};`}
   margin-left: -1px;
-
   .ant-btn {
     ${(props) => getButtonStyle(props.$buttonStyle)}
+    margin: 0 !important;
+    height: 100%;
     &.ant-btn-default {
+      margin: 0 !important;
       ${(props) => `border-radius: 0 ${props.$buttonStyle.radius} ${props.$buttonStyle.radius} 0;`}
     }
     width: 100%;
@@ -69,6 +76,7 @@ const DropdownTmpComp = (function () {
       .map((option, index) => ({
         title: option.label,
         label: option.label,
+        style: {padding: props.style.padding},
         key: option.label + " - " + index,
         disabled: option.disabled,
         icon: hasIcon && <span>{option.prefixIcon}</span>,
@@ -83,6 +91,7 @@ const DropdownTmpComp = (function () {
 
     return (
       <ButtonCompWrapper disabled={props.disabled}>
+        {console.log("props,", props)}
         {props.onlyMenu ? (
           <Dropdown disabled={props.disabled} overlay={menu}>
             <Button100 $buttonStyle={props.style} disabled={props.disabled}>

diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx
@@ -21,7 +21,7 @@ import { hasIcon } from "comps/utils";
 import { RefControl } from "comps/controls/refControl";
 
 const Link = styled(Button)<{ $style: LinkStyleType }>`
-  ${(props) => `color: ${props.$style.text};`}
+  ${(props) => `color: ${props.$style.text};margin: ${props.$style.margin}; padding: ${props.$style.padding};`}
   &.ant-btn {
     display: inline-flex;
     align-items: center;

diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts b/client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts
@@ -63,7 +63,7 @@ export const disabledTime = (min: string, max: string) => {
 export const getStyle = (style: DateTimeStyleType) => {
   return css`
     border-radius: ${style.radius};
-
+    padding: ${style.padding};
     &:not(.ant-picker-disabled) {
       border-color: ${style.border};
       background-color: ${style.background};

diff --git a/client/packages/lowcoder/src/comps/comps/dividerComp.tsx b/client/packages/lowcoder/src/comps/comps/dividerComp.tsx
@@ -8,7 +8,7 @@ import { Section, sectionNames } from "lowcoder-design";
 import _ from "lodash";
 import styled from "styled-components";
 import { styleControl } from "comps/controls/styleControl";
-import { DividerStyle, DividerStyleType } from "comps/controls/styleControlConstants";
+import { DividerStyle, DividerStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
 import { migrateOldData } from "comps/generators/simpleGenerators";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
@@ -22,6 +22,17 @@ const StyledDivider = styled(Divider)<IProps>`
     display: flex;
     align-items: center;
   }
+  min-width: 0;	
+  width: ${(props) => {	
+    return widthCalculator(props.$style.margin);	
+  }};	
+  min-height: ${(props) => {	
+    return heightCalculator(props.$style.margin);	
+  }};	
+  margin: ${(props) => {	
+    return props.$style.margin;	
+  }};	
+  padding: ${(props) => props.$style.padding};
   border-top: 1px ${(props) => (props.dashed ? "dashed" : "solid")} ${(props) => props.$style.color};
 
   &.ant-divider-horizontal.ant-divider-with-text {

diff --git a/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx b/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx
@@ -6,7 +6,7 @@ import { darkenColor } from "components/colorSelect/colorUtils";
 import { Section, sectionNames } from "components/Section";
 import { IconControl } from "comps/controls/iconControl";
 import { styleControl } from "comps/controls/styleControl";
-import { FileStyle, FileStyleType } from "comps/controls/styleControlConstants";
+import { FileStyle, FileStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
 import { withMethodExposing } from "comps/generators/withMethodExposing";
 import { hasIcon } from "comps/utils";
 import { getComponentDocUrl } from "comps/utils/compDocUtil";
@@ -133,6 +133,10 @@ const getStyle = (style: FileStyleType) => {
   return css`
     .ant-btn {
       border-radius: ${style.radius};
+      margin: ${style.margin};	
+      padding: ${style.padding};	
+      width: ${widthCalculator(style.margin)};	
+      height: ${heightCalculator(style.margin)};
     }
 
     .ant-btn:not(:disabled) {

diff --git a/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx b/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx
@@ -1,5 +1,5 @@
 import { styleControl } from "comps/controls/styleControl";
-import { FileViewerStyle, FileViewerStyleType } from "comps/controls/styleControlConstants";
+import { FileViewerStyle, FileViewerStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
 import { isEmpty } from "lodash";
 import { useState } from "react";
 import { DocumentViewer } from "react-documents";
@@ -13,6 +13,11 @@ import { trans } from "i18n";
 
 const getStyle = (style: FileViewerStyleType) => {
   return css`
+    width: ${widthCalculator(style.margin)};	
+    height: ${heightCalculator(style.margin)};	
+    margin: ${style.margin};	
+    padding: ${style.padding};
+
     overflow: hidden;
     background-color: ${style.background};
     border: 1px solid ${style.border};

diff --git a/client/packages/lowcoder/src/comps/comps/imageComp.tsx b/client/packages/lowcoder/src/comps/comps/imageComp.tsx
@@ -9,7 +9,7 @@ import { useEffect, useRef, useState } from "react";
 import _ from "lodash";
 import ReactResizeDetector from "react-resize-detector";
 import { styleControl } from "comps/controls/styleControl";
-import { ImageStyle, ImageStyleType } from "comps/controls/styleControlConstants";
+import { ImageStyle, ImageStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { AutoHeightControl } from "comps/controls/autoHeightControl";
@@ -23,7 +23,6 @@ const Container = styled.div<{ $style: ImageStyleType | undefined }>`
   display: flex;
   align-items: center;
   justify-content: center;
-
   .ant-image,
   img {
     width: 100%;
@@ -43,6 +42,10 @@ const getStyle = (style: ImageStyleType) => {
     img {
       border: 1px solid ${style.border};
       border-radius: ${style.radius};
+      margin: ${style.margin};	
+      padding: ${style.padding};	
+      max-width: ${widthCalculator(style.margin)};	
+      max-height: ${heightCalculator(style.margin)};
     }
 
     .ant-image-mask {