From caa36ff25bb4817a394001cd46ca7c0912a64957 Mon Sep 17 00:00:00 2001 From: MenamAfzal Date: Thu, 25 Jul 2024 17:29:45 +0500 Subject: [PATCH 1/7] Style Control CHanges --- .../src/comps/controls/styleControl.tsx | 31 +++++++++++++++++-- 1 file changed, 29 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx index 17201277e..ee4341048 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControl.tsx @@ -74,6 +74,7 @@ import { AnimationConfig, AnimationDelayConfig, AnimationDurationConfig, + LineHeightConfig, } from "./styleControlConstants"; @@ -89,6 +90,9 @@ import { inputFieldComps } from "@lowcoder-ee/constants/compConstants"; function isSimpleColorConfig(config: SingleColorConfig): config is SimpleColorConfig { return config.hasOwnProperty("color"); } +function isSimpleLineHeightConfig(config: SingleColorConfig): config is LineHeightConfig { + return config.hasOwnProperty("lineheight"); +} function isDepColorConfig(config: SingleColorConfig): config is DepColorConfig { return config.hasOwnProperty("depName") || config.hasOwnProperty("depTheme"); @@ -237,6 +241,9 @@ export type StyleConfigType = { [K in Na function isEmptyColor(color: string) { return _.isEmpty(color); } +function isEmptyLineHeight(lineHeight: string) { + return _.isEmpty(lineHeight); +} function isEmptyRadius(radius: string) { return _.isEmpty(radius); @@ -375,6 +382,11 @@ function calcColors>( let res: Record = {}; colorConfigs.forEach((config) => { const name = config.name; + if (!isEmptyLineHeight(props[name]) && isSimpleLineHeightConfig(config)) { + res[name] = props[name]; + return; + } + if (!isEmptyRadius(props[name]) && isRadiusConfig(config)) { res[name] = props[name]; return; @@ -743,6 +755,11 @@ const StyleContent = styled.div` border-radius: 0 0 6px 6px; } `; +const LineHeightPropIcon = styled(ExpandIcon)` + margin: 0 8px 0 -3px; + padding: 3px; + color: #888; +`; const MarginIcon = styled(ExpandIcon)` margin: 0 8px 0 2px; color: #888`; const PaddingIcon = styled(CompressIcon)` margin: 0 8px 0 2px; color: #888`; @@ -853,7 +870,8 @@ export function styleControl( name === 'containerHeaderPadding' || name === 'containerSiderPadding' || name === 'containerFooterPadding' || - name === 'containerBodyPadding' + name === 'containerBodyPadding' || + name === 'lineHeight' ) { childrenMap[name] = StringControl; } else { @@ -966,7 +984,8 @@ export function styleControl( name === 'footerBackgroundImageRepeat' || name === 'footerBackgroundImageSize' || name === 'footerBackgroundImagePosition' || - name === 'footerBackgroundImageOrigin' + name === 'footerBackgroundImageOrigin' || + name === 'lineHeight' ) { children[name]?.dispatchChangeValueAction(''); } else { @@ -1299,6 +1318,14 @@ export function styleControl( placeholder: props[name], }) + : name === 'lineHeight' // Added lineHeight here + ? ( + children[name] as InstanceType + ).propertyView({ + label: config.label, + preInputNode: , + placeholder: props[name], + }) : children[ name ].propertyView({ From 3159fc03cfbe3fddcbf183722a9d5b2380ff4c30 Mon Sep 17 00:00:00 2001 From: MenamAfzal Date: Thu, 25 Jul 2024 17:40:41 +0500 Subject: [PATCH 2/7] Add line Height in Said Components --- .../lowcoder/src/api/commonSettingApi.ts | 3 ++ .../comps/selectInputComp/checkboxComp.tsx | 2 +- .../comps/controls/styleControlConstants.tsx | 47 ++++++++++++++++--- 3 files changed, 44 insertions(+), 8 deletions(-) diff --git a/client/packages/lowcoder/src/api/commonSettingApi.ts b/client/packages/lowcoder/src/api/commonSettingApi.ts index d199cd9c5..1e7d23227 100644 --- 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; @@ -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 index 0a29c71b3..90f1fbf68 100644 --- 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 index 4cadf8483..a26ceeab1 100644 --- 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 = [ From 0cf5abd3702c592afcaaf51e6e57f79a56ca062b Mon Sep 17 00:00:00 2001 From: MenamAfzal Date: Thu, 25 Jul 2024 17:48:47 +0500 Subject: [PATCH 3/7] Improved Translations --- client/packages/lowcoder/src/constants/themeConstants.ts | 4 +++- client/packages/lowcoder/src/i18n/locales/en.ts | 1 + 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/constants/themeConstants.ts b/client/packages/lowcoder/src/constants/themeConstants.ts index 977db98fd..6f1e4e7a5 100644 --- a/client/packages/lowcoder/src/constants/themeConstants.ts +++ b/client/packages/lowcoder/src/constants/themeConstants.ts @@ -12,6 +12,7 @@ const theme = { borderStyle: "solid", margin: "3px", padding: "3px", + lineHeight: "18px", gridColumns: "24", textSize: "14px", // text: "#222222", @@ -33,7 +34,7 @@ const text = { const input = { style: { borderWidth: '0px', - background: 'transparent', + background: 'transparent', }, labelStyle: { borderWidth: '0px', @@ -41,6 +42,7 @@ const input = { inputFieldStyle: { // borderWidth: '1px', border: theme.border, + lineHeight: theme.lineHeight, } }; diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index ffccf2aca..54bc4424b 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -545,6 +545,7 @@ export const en = { "headerText": "Header Text Color", "labelColor": "Label Color", "label": "Label Color", + "lineHeight":"Line Height", "subTitleColor": "SubTitle Color", "titleText": "Title Color", "success": "Success Color", From 4c8dd4e3d6134f6f72fb17c6597bf67c32e074f3 Mon Sep 17 00:00:00 2001 From: MenamAfzal Date: Fri, 26 Jul 2024 15:01:13 +0500 Subject: [PATCH 4/7] Push for debug --- .../src/comps/controls/styleControl.tsx | 39 ++++++++++++------- .../comps/controls/styleControlConstants.tsx | 8 +--- 2 files changed, 25 insertions(+), 22 deletions(-) diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx index ee4341048..680a68e93 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControl.tsx @@ -90,8 +90,11 @@ import { inputFieldComps } from "@lowcoder-ee/constants/compConstants"; function isSimpleColorConfig(config: SingleColorConfig): config is SimpleColorConfig { return config.hasOwnProperty("color"); } -function isSimpleLineHeightConfig(config: SingleColorConfig): config is LineHeightConfig { - return config.hasOwnProperty("lineheight"); +function isLineHeightConfig(config: SingleColorConfig): config is LineHeightConfig { + return config.hasOwnProperty("lineHeight"); +} +function isTextSizeConfig(config: SingleColorConfig): config is TextSizeConfig { + return config.hasOwnProperty("textSize"); } function isDepColorConfig(config: SingleColorConfig): config is DepColorConfig { @@ -161,9 +164,6 @@ function isFooterBackgroundImageOriginConfig(config: SingleColorConfig): config return config.hasOwnProperty("footerBackgroundImageOrigin"); } -function isTextSizeConfig(config: SingleColorConfig): config is TextSizeConfig { - return config.hasOwnProperty("textSize"); -} function isTextWeightConfig(config: SingleColorConfig): config is TextWeightConfig { return config.hasOwnProperty("textWeight"); @@ -244,7 +244,9 @@ function isEmptyColor(color: string) { function isEmptyLineHeight(lineHeight: string) { return _.isEmpty(lineHeight); } - +function isEmptyTextSize(textSize: string) { + return _.isEmpty(textSize); +} function isEmptyRadius(radius: string) { return _.isEmpty(radius); } @@ -300,9 +302,7 @@ function isEmptyFooterBackgroundImageOriginConfig(footerBackgroundImageOrigin: s return _.isEmpty(footerBackgroundImageOrigin); } -function isEmptyTextSize(textSize: string) { - return _.isEmpty(textSize); -} + function isEmptyTextWeight(textWeight: string) { return _.isEmpty(textWeight); } @@ -376,17 +376,21 @@ function calcColors>( if (compType && styleKey && inputFieldComps.includes(compType) && styleKey !== 'inputFieldStyle') { const style = theme?.components?.[compType]?.[styleKey] as Record; themeWithDefault['borderWidth'] = style?.['borderWidth'] || '0px'; + console.log("The values are ", themeWithDefault) } // Cover what is not there for the first pass let res: Record = {}; colorConfigs.forEach((config) => { const name = config.name; - if (!isEmptyLineHeight(props[name]) && isSimpleLineHeightConfig(config)) { + if (!isEmptyLineHeight(props[name]) && isLineHeightConfig(config)) { + res[name] = props[name]; + return; + } + if (!isEmptyTextSize(props[name]) && isTextSizeConfig(config)) { res[name] = props[name]; return; } - if (!isEmptyRadius(props[name]) && isRadiusConfig(config)) { res[name] = props[name]; return; @@ -460,10 +464,7 @@ function calcColors>( res[name] = props[name]; return; } - if (!isEmptyTextSize(props[name]) && isTextSizeConfig(config)) { - res[name] = props[name]; - return; - } + if (!isEmptyTextWeight(props[name]) && isTextWeightConfig(config)) { res[name] = props[name]; return; @@ -645,6 +646,12 @@ function calcColors>( if (isAnimationDurationConfig(config)) { res[name] = themeWithDefault[config.animationDuration] || '0s'; } + if (isLineHeightConfig(config)) { + + res[name] = themeWithDefault[config.lineHeight] || '20px'; + console.log("The 2nd Values are", themeWithDefault); + console.log("The 2nd Values are", isLineHeightConfig); + } }); // The second pass calculates dep colorConfigs.forEach((config) => { @@ -682,6 +689,7 @@ function calcColors>( res[name] = themeWithDefault[config.name] } }); + console.log("The defaults are ", themeWithDefault) return res as ColorMap; } @@ -1357,4 +1365,5 @@ export function useStyle(colorConfigs: T props[config.name as Names] = ""; }); return calcColors(props, colorConfigs, theme?.theme, bgColor); + } diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index a26ceeab1..64d807057 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -379,18 +379,12 @@ export function handleToCalendarToday(color: string) { 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 value; // default line height value } } } From c5640ada8ee0796bf19c5a77da0ea1aab41451ec Mon Sep 17 00:00:00 2001 From: MenamAfzal Date: Sat, 27 Jul 2024 12:50:12 +0500 Subject: [PATCH 5/7] added lineHeight as css property --- .../comps/buttonComp/buttonCompConstants.tsx | 1 + .../comps/comps/buttonComp/dropdownComp.tsx | 1 + .../comps/numberInputComp/numberInputComp.tsx | 1 + .../selectInputComp/selectCompConstants.tsx | 1 + .../lowcoder/src/comps/comps/textComp.tsx | 1 + .../comps/textInputComp/textInputConstants.tsx | 1 + .../src/comps/controls/labelControl.tsx | 1 + .../src/comps/controls/styleControl.tsx | 18 +++++++----------- .../comps/controls/styleControlConstants.tsx | 6 +++--- 9 files changed, 17 insertions(+), 14 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx index 377d662a9..e2517d306 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx @@ -65,6 +65,7 @@ export const Button100 = styled(Button)<{ $buttonStyle?: ButtonStyleType }>` overflow: hidden; text-overflow: ellipsis; } + line-height:${(props) => props.$buttonStyle?.lineHeight}; `; export const ButtonCompWrapper = styled.div<{ disabled: boolean }>` diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx index 629314582..1788b1143 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx @@ -60,6 +60,7 @@ const LeftButtonWrapper = styled.div<{ $buttonStyle: DropdownStyleType }>` ${(props) => `font-style: ${props.$buttonStyle.fontStyle};`} width: 100%; + line-height:${(props) => props.$buttonStyle.lineHeight}; } `; diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx index ee736cfd2..655aa8e9a 100644 --- a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx @@ -60,6 +60,7 @@ const getStyle = (style: InputLikeStyleType) => { return css` border-radius: ${style.radius}; border-width:${style.borderWidth} !important; + line-height: ${style.lineHeight} !important; // still use antd style when disabled &:not(.ant-input-number-disabled) { color: ${style.text}; diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx index 17f61762a..9341a16f0 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx @@ -203,6 +203,7 @@ const DropdownStyled = styled.div<{ $style: ChildrenMultiSelectStyleType }>` font-weight: ${props => props.$style?.textWeight}; text-transform: ${props => props.$style?.textTransform}; color: ${props => props.$style?.text}; + line-height: ${props => props.$style?.lineHeight}; } .option-label{ text-decoration: ${props => props.$style?.textDecoration} !important; diff --git a/client/packages/lowcoder/src/comps/comps/textComp.tsx b/client/packages/lowcoder/src/comps/comps/textComp.tsx index 0dd9c11c8..49e24b741 100644 --- a/client/packages/lowcoder/src/comps/comps/textComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textComp.tsx @@ -64,6 +64,7 @@ const getStyle = (style: TextStyleType) => { h6 { color: ${style.text}; font-weight: ${style.textWeight} !important; + line-height:${style.lineHeight}; } img, pre { diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx index f2212358e..2532912bc 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx @@ -252,6 +252,7 @@ export function getStyle(style: InputLikeStyleType, labelStyle?: LabelStyleType) text-decoration:${style.textDecoration}; background-color: ${style.background}; border-color: ${style.border}; + line-height: ${style.lineHeight}; &:focus, &.ant-input-affix-wrapper-focused { diff --git a/client/packages/lowcoder/src/comps/controls/labelControl.tsx b/client/packages/lowcoder/src/comps/controls/labelControl.tsx index 07a5c9ef5..ef93db58e 100644 --- a/client/packages/lowcoder/src/comps/controls/labelControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/labelControl.tsx @@ -108,6 +108,7 @@ const Label = styled.span<{ $border: boolean, $labelStyle: LabelStyleType, $vali border-radius:${(props) => props.$labelStyle.radius}; padding:${(props) => props.$labelStyle.padding}; margin:${(props) => props.$labelStyle.margin}; + line-height:${(props) => props.$labelStyle.lineHeight}; width: fit-content; user-select: text; white-space: nowrap; diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx index 680a68e93..560ef672b 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControl.tsx @@ -376,7 +376,6 @@ function calcColors>( if (compType && styleKey && inputFieldComps.includes(compType) && styleKey !== 'inputFieldStyle') { const style = theme?.components?.[compType]?.[styleKey] as Record; themeWithDefault['borderWidth'] = style?.['borderWidth'] || '0px'; - console.log("The values are ", themeWithDefault) } // Cover what is not there for the first pass @@ -649,8 +648,6 @@ function calcColors>( if (isLineHeightConfig(config)) { res[name] = themeWithDefault[config.lineHeight] || '20px'; - console.log("The 2nd Values are", themeWithDefault); - console.log("The 2nd Values are", isLineHeightConfig); } }); // The second pass calculates dep @@ -689,7 +686,6 @@ function calcColors>( res[name] = themeWithDefault[config.name] } }); - console.log("The defaults are ", themeWithDefault) return res as ColorMap; } @@ -1327,13 +1323,13 @@ export function styleControl( props[name], }) : name === 'lineHeight' // Added lineHeight here - ? ( - children[name] as InstanceType - ).propertyView({ - label: config.label, - preInputNode: , - placeholder: props[name], - }) + ? ( + children[name] as InstanceType + ).propertyView({ + label: config.label, + preInputNode: , + placeholder: props[name], + }) : children[ name ].propertyView({ diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 64d807057..47717d578 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -779,7 +779,7 @@ function replaceAndMergeMultipleStyles( export const ButtonStyle = [ getBackground('primary'), - ...STYLING_FIELDS_SEQUENCE + ...STYLING_FIELDS_SEQUENCE.filter(style=>style.name!=='lineHeight'), ] as const; export const DropdownStyle = [ @@ -1197,7 +1197,7 @@ export const SwitchStyle = [ ] as const; export const SelectStyle = [ - ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE.filter(style=>style.name!=='rotation'), "border", [ + ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE.filter(style=>style.name!=='rotation' && style.name !== 'lineHeight'), "border", [ ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc"), ]), BOXSHADOW, @@ -1206,7 +1206,7 @@ export const SelectStyle = [ ] as const; const multiSelectCommon = [ - ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE.filter(style=>style.name!=='rotation'), "border", [ + ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE.filter(style=>style.name!=='rotation' && style.name !== 'lineHeight'), "border", [ ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc"), ]), { From 0bc663b4871e1b31ff3dc27c96a2fb3e17381b3f Mon Sep 17 00:00:00 2001 From: MenamAfzal Date: Sat, 27 Jul 2024 13:28:34 +0500 Subject: [PATCH 6/7] lineHeight icon added in right panel --- .../lowcoder/src/components/ThemeSettingsCompStyles.tsx | 5 +++++ client/packages/lowcoder/src/comps/controls/styleControl.tsx | 3 ++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx b/client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx index 9f2b0abe5..c34f5e5c8 100644 --- a/client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx +++ b/client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx @@ -25,6 +25,7 @@ import { TextStyleIcon, ImageCompIconSmall, RotationIcon, + LineHeightIcon } from "lowcoder-design/src/icons"; import { trans } from "i18n"; import { debounce } from "lodash"; @@ -375,6 +376,10 @@ export default function ThemeSettingsCompStyles(props: CompStyleProps) { icon = ; break; } + case 'lineHeight': { + icon = ; + break; + } } return icon; } diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx index 560ef672b..a1fa7f993 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControl.tsx @@ -29,6 +29,7 @@ import { RefreshLineIcon, ShadowIcon, OpacityIcon, + LineHeightIcon } from 'lowcoder-design'; import { useContext } from "react"; import styled from "styled-components"; @@ -759,7 +760,7 @@ const StyleContent = styled.div` border-radius: 0 0 6px 6px; } `; -const LineHeightPropIcon = styled(ExpandIcon)` +const LineHeightPropIcon = styled(LineHeightIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888; From 7459f7899163f6c1e1ce5f1d90d4c244449725b8 Mon Sep 17 00:00:00 2001 From: MenamAfzal Date: Sat, 27 Jul 2024 13:29:07 +0500 Subject: [PATCH 7/7] lineHeight icon added in right panel --- client/packages/lowcoder-design/src/icons/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/client/packages/lowcoder-design/src/icons/index.ts b/client/packages/lowcoder-design/src/icons/index.ts index 27d9428fc..3e30692ea 100644 --- a/client/packages/lowcoder-design/src/icons/index.ts +++ b/client/packages/lowcoder-design/src/icons/index.ts @@ -216,6 +216,7 @@ export { ReactComponent as BorderRadiusIcon } from "./remix/rounded-corner.svg"; export { ReactComponent as ShadowIcon } from "./remix/shadow-line.svg"; export { ReactComponent as OpacityIcon } from "./remix/contrast-drop-2-line.svg"; export { ReactComponent as AnimationIcon } from "./remix/loader-line.svg"; +export { ReactComponent as LineHeightIcon } from "./remix/line-height.svg"; export { ReactComponent as LeftInfoLine } from "./remix/information-line.svg";