Add line Height in Said Components

MenamAfzal · MenamAfzal · commit 3159fc03cfbe · 2024-07-25T17:40:41.000+05:00
diff --git a/client/packages/lowcoder/src/api/commonSettingApi.ts b/client/packages/lowcoder/src/api/commonSettingApi.ts
@@ -62,6 +62,7 @@ export interface ThemeDetail {
   animationDuration?: string;
   opacity?: string;
   boxShadow?: string;
+  lineHeight?: string;
   boxShadowColor?: string;
   animationIterationCount?: string;
   components?: Record<string, JSONObject>;
@@ -83,6 +84,7 @@ export function getThemeDetailName(key: keyof ThemeDetail) {
     case "padding":	return trans("style.padding");
     case "gridColumns": return trans("themeDetail.gridColumns");
     case "textSize": return trans("style.textSize");
+    case "lineHeight": return trans("themeDetail.lineHeight"); 
   }
   return "";
 }
@@ -105,6 +107,7 @@ export function isThemeColorKey(key: string) {
     case "padding":
     case "gridColumns":
     case "textSize":
+      case "lineHeight":
       return true;
   }
   return false;
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
@@ -150,7 +150,7 @@ let CheckboxBasicComp = (function () {
     options: SelectInputOptionControl,
     style: styleControl(InputFieldStyle , 'style'),
     labelStyle: styleControl(
-      LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false),
+      LabelStyle.filter((style) => ['accent', 'validate', 'lineheight'].includes(style.name) === false),
       'labelStyle',
     ),
     layout: dropdownControl(RadioLayoutOptions, "horizontal"),
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -16,6 +16,11 @@ export type SimpleColorConfig = CommonColorConfig & {
   readonly color: string;
 };
 
+export type LineHeightConfig = CommonColorConfig & {
+  readonly lineHeight: string; // Define the lineHeight property
+};
+
+
 export type RadiusConfig = CommonColorConfig & {
   readonly radius: string;
 };
@@ -224,7 +229,10 @@ export type SingleColorConfig =
   | OpacityConfig
   | BoxShadowConfig
   | BoxShadowColorConfig
-  | AnimationIterationCountConfig;
+  | AnimationIterationCountConfig
+  | LineHeightConfig
+  
+ 
 
 export const SURFACE_COLOR = "#FFFFFF";
 const SECOND_SURFACE_COLOR = "#D7D9E0";
@@ -368,6 +376,24 @@ export function handleToCalendarToday(color: string) {
     return "#0000000c";
   }
 }
+export function getLineHeightValue(theme: ThemeDetail, value: string | number) {
+  if (typeof value === 'number') {
+    return `${value}px`;
+  } else if (value === 'inherit') {
+    return 'inherit';
+  } else if (value === 'initial') {
+    return 'initial';
+  } else if (value === 'unset') {
+    return 'unset';
+  } else {
+    const lineHeightValue = theme.lineHeight;
+    if (lineHeightValue) {
+      return lineHeightValue;
+    } else {
+      return '1.5'; // default line height value
+    }
+  }
+}
 
 // return calendar text
 function handleCalendarText(
@@ -516,6 +542,12 @@ const BACKGROUND_IMAGE_ORIGIN = {
   backgroundImageOrigin: "backgroundImageOrigin",
 } as const;
 
+const LINE_HEIGHT = {
+  name: "lineHeight",
+  label: trans("style.lineHeight"),
+  lineHeight: "lineHeight",
+} as const;
+
 const MARGIN = {
   name: "margin",
   label: trans("style.margin"),
@@ -645,6 +677,7 @@ const STYLING_FIELDS_SEQUENCE = [
   RADIUS,
   BORDER_WIDTH,
   ROTATION,
+  LINE_HEIGHT
 ];
 
 const STYLING_FIELDS_CONTAINER_SEQUENCE = [
@@ -658,6 +691,7 @@ const STYLING_FIELDS_CONTAINER_SEQUENCE = [
   BOXSHADOW,
   BOXSHADOWCOLOR,
   ROTATION,
+  LINE_HEIGHT
 ];
 
 export const AnimationStyle = [
@@ -1116,10 +1150,9 @@ export const LabelStyle = [
 export const InputFieldStyle = [
   getBackground(),
   getStaticBorder(),
-  ...STYLING_FIELDS_CONTAINER_SEQUENCE.filter(
-    (style) => ["border"].includes(style.name) === false
+ ...STYLING_FIELDS_CONTAINER_SEQUENCE.filter(
+    (style) =>!["border", "lineHeight"].includes(style.name)
   ),
-  // ...STYLING_FIELDS_CONTAINER_SEQUENCE,
 ] as const;
 
 export const SignatureContainerStyle = [
@@ -1291,7 +1324,7 @@ function checkAndUncheck() {
 }
 
 export const CheckboxStyle = [
-  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE.filter(styles=>styles.name!=='rotation'), "text", [
+  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE.filter(styles=>styles.name!=='rotation' && styles.name !== 'lineHeight'),"text", [
     STATIC_TEXT,
     VALIDATE,
   ]).filter((style) => style.name !== "border"),
@@ -1309,7 +1342,7 @@ export const CheckboxStyle = [
 ] as const;
 
 export const RadioStyle = [
-  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE.filter(style=>style.name!=='rotation'), "text", [
+  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE.filter(style=>style.name!=='rotation'&& style.name !== 'lineHeight'), "text", [
     STATIC_TEXT,
     VALIDATE,
   ]).filter((style) => style.name !== "border" && style.name !== "radius"),
@@ -1554,7 +1587,7 @@ export const IframeStyle = [
   BORDER_WIDTH,
   MARGIN,
   PADDING,
-  ROTATION
+  ROTATION,
 ] as const;
 
 export const CustomStyle = [
