Skip to content

Commit 7e3b1a9

Browse files
raheeliftikhar5raheeliftikhar5
authored
Merge pull request #1069 from MenamAfzal/add/lineHeight
Add/line-height
2 parents f8f2872 + 3e4fa6f commit 7e3b1a9

File tree

15 files changed

+104
-25
lines changed

15 files changed

+104
-25
lines changed

‎client/packages/lowcoder-design/src/icons/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -216,6 +216,7 @@ export { ReactComponent as BorderRadiusIcon } from "./remix/rounded-corner.svg";
216216
export { ReactComponent as ShadowIcon } from "./remix/shadow-line.svg";
217217
export { ReactComponent as OpacityIcon } from "./remix/contrast-drop-2-line.svg";
218218
export { ReactComponent as AnimationIcon } from "./remix/loader-line.svg";
219+
export { ReactComponent as LineHeightIcon } from "./remix/line-height.svg";
219220

220221

221222
export { ReactComponent as LeftInfoLine } from "./remix/information-line.svg";

‎client/packages/lowcoder/src/api/commonSettingApi.ts

+3
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ export interface ThemeDetail {
6262
animationDuration?: string;
6363
opacity?: string;
6464
boxShadow?: string;
65+
lineHeight?: string;
6566
boxShadowColor?: string;
6667
animationIterationCount?: string;
6768
components?: Record<string, JSONObject>;
@@ -83,6 +84,7 @@ export function getThemeDetailName(key: keyof ThemeDetail) {
8384
case "padding": return trans("style.padding");
8485
case "gridColumns": return trans("themeDetail.gridColumns");
8586
case "textSize": return trans("style.textSize");
87+
case "lineHeight": return trans("themeDetail.lineHeight");
8688
}
8789
return "";
8890
}
@@ -105,6 +107,7 @@ export function isThemeColorKey(key: string) {
105107
case "padding":
106108
case "gridColumns":
107109
case "textSize":
110+
case "lineHeight":
108111
return true;
109112
}
110113
return false;

‎client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import {
2525
TextStyleIcon,
2626
ImageCompIconSmall,
2727
RotationIcon,
28+
LineHeightIcon
2829
} from "lowcoder-design/src/icons";
2930
import { trans } from "i18n";
3031
import { debounce } from "lodash";
@@ -375,6 +376,10 @@ export default function ThemeSettingsCompStyles(props: CompStyleProps) {
375376
icon = <RotationIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
376377
break;
377378
}
379+
case 'lineHeight': {
380+
icon = <LineHeightIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
381+
break;
382+
}
378383
}
379384
return icon;
380385
}

‎client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ export const Button100 = styled(Button)<{ $buttonStyle?: ButtonStyleType }>`
6565
overflow: hidden;
6666
text-overflow: ellipsis;
6767
}
68+
line-height:${(props) => props.$buttonStyle?.lineHeight};
6869
`;
6970

7071
export const ButtonCompWrapper = styled.div<{ disabled: boolean }>`

‎client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ const LeftButtonWrapper = styled.div<{ $buttonStyle: DropdownStyleType }>`
6060
${(props) => `font-style: ${props.$buttonStyle.fontStyle};`}
6161
6262
width: 100%;
63+
line-height:${(props) => props.$buttonStyle.lineHeight};
6364
}
6465
6566
`;

‎client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ const getStyle = (style: InputLikeStyleType) => {
6060
return css`
6161
border-radius: ${style.radius};
6262
border-width:${style.borderWidth} !important;
63+
line-height: ${style.lineHeight} !important;
6364
// still use antd style when disabled
6465
&:not(.ant-input-number-disabled) {
6566
color: ${style.text};

‎client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,7 @@ let CheckboxBasicComp = (function () {
150150
options: SelectInputOptionControl,
151151
style: styleControl(InputFieldStyle , 'style'),
152152
labelStyle: styleControl(
153-
LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false),
153+
LabelStyle.filter((style) => ['accent', 'validate', 'lineheight'].includes(style.name) === false),
154154
'labelStyle',
155155
),
156156
layout: dropdownControl(RadioLayoutOptions, "horizontal"),

‎client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -204,6 +204,7 @@ const DropdownStyled = styled.div<{ $style: ChildrenMultiSelectStyleType }>`
204204
font-weight: ${props => props.$style?.textWeight};
205205
text-transform: ${props => props.$style?.textTransform};
206206
color: ${props => props.$style?.text};
207+
line-height: ${props => props.$style?.lineHeight};
207208
}
208209
.option-label{
209210
text-decoration: ${props => props.$style?.textDecoration} !important;

‎client/packages/lowcoder/src/comps/comps/textComp.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ const getStyle = (style: TextStyleType) => {
6464
h6 {
6565
color: ${style.text};
6666
font-weight: ${style.textWeight} !important;
67+
line-height:${style.lineHeight};
6768
}
6869
img,
6970
pre {

‎client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -252,6 +252,7 @@ export function getStyle(style: InputLikeStyleType, labelStyle?: LabelStyleType)
252252
text-decoration:${style.textDecoration};
253253
background-color: ${style.background};
254254
border-color: ${style.border};
255+
line-height: ${style.lineHeight};
255256
256257
&:focus,
257258
&.ant-input-affix-wrapper-focused {

‎client/packages/lowcoder/src/comps/controls/labelControl.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,7 @@ const Label = styled.span<{ $border: boolean, $labelStyle: LabelStyleType, $vali
108108
border-radius:${(props) => props.$labelStyle.radius};
109109
padding:${(props) => props.$labelStyle.padding};
110110
margin:${(props) => props.$labelStyle.margin};
111+
line-height:${(props) => props.$labelStyle.lineHeight};
111112
width: fit-content;
112113
user-select: text;
113114
white-space: nowrap;

‎client/packages/lowcoder/src/comps/controls/styleControl.tsx

+46-13
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import {
2929
RefreshLineIcon,
3030
ShadowIcon,
3131
OpacityIcon,
32+
LineHeightIcon
3233
} from 'lowcoder-design';
3334
import { useContext } from "react";
3435
import styled from "styled-components";
@@ -74,6 +75,7 @@ import {
7475
AnimationConfig,
7576
AnimationDelayConfig,
7677
AnimationDurationConfig,
78+
LineHeightConfig,
7779

7880

7981
} from "./styleControlConstants";
@@ -89,6 +91,12 @@ import { inputFieldComps } from "@lowcoder-ee/constants/compConstants";
8991
function isSimpleColorConfig(config: SingleColorConfig): config is SimpleColorConfig {
9092
return config.hasOwnProperty("color");
9193
}
94+
function isLineHeightConfig(config: SingleColorConfig): config is LineHeightConfig {
95+
return config.hasOwnProperty("lineHeight");
96+
}
97+
function isTextSizeConfig(config: SingleColorConfig): config is TextSizeConfig {
98+
return config.hasOwnProperty("textSize");
99+
}
92100

93101
function isDepColorConfig(config: SingleColorConfig): config is DepColorConfig {
94102
return config.hasOwnProperty("depName") || config.hasOwnProperty("depTheme");
@@ -157,9 +165,6 @@ function isFooterBackgroundImageOriginConfig(config: SingleColorConfig): config
157165
return config.hasOwnProperty("footerBackgroundImageOrigin");
158166
}
159167

160-
function isTextSizeConfig(config: SingleColorConfig): config is TextSizeConfig {
161-
return config.hasOwnProperty("textSize");
162-
}
163168

164169
function isTextWeightConfig(config: SingleColorConfig): config is TextWeightConfig {
165170
return config.hasOwnProperty("textWeight");
@@ -237,7 +242,12 @@ export type StyleConfigType<T extends readonly SingleColorConfig[]> = { [K in Na
237242
function isEmptyColor(color: string) {
238243
return _.isEmpty(color);
239244
}
240-
245+
function isEmptyLineHeight(lineHeight: string) {
246+
return _.isEmpty(lineHeight);
247+
}
248+
function isEmptyTextSize(textSize: string) {
249+
return _.isEmpty(textSize);
250+
}
241251
function isEmptyRadius(radius: string) {
242252
return _.isEmpty(radius);
243253
}
@@ -293,9 +303,7 @@ function isEmptyFooterBackgroundImageOriginConfig(footerBackgroundImageOrigin: s
293303
return _.isEmpty(footerBackgroundImageOrigin);
294304
}
295305

296-
function isEmptyTextSize(textSize: string) {
297-
return _.isEmpty(textSize);
298-
}
306+
299307
function isEmptyTextWeight(textWeight: string) {
300308
return _.isEmpty(textWeight);
301309
}
@@ -375,6 +383,14 @@ function calcColors<ColorMap extends Record<string, string>>(
375383
let res: Record<string, string> = {};
376384
colorConfigs.forEach((config) => {
377385
const name = config.name;
386+
if (!isEmptyLineHeight(props[name]) && isLineHeightConfig(config)) {
387+
res[name] = props[name];
388+
return;
389+
}
390+
if (!isEmptyTextSize(props[name]) && isTextSizeConfig(config)) {
391+
res[name] = props[name];
392+
return;
393+
}
378394
if (!isEmptyRadius(props[name]) && isRadiusConfig(config)) {
379395
res[name] = props[name];
380396
return;
@@ -448,10 +464,7 @@ function calcColors<ColorMap extends Record<string, string>>(
448464
res[name] = props[name];
449465
return;
450466
}
451-
if (!isEmptyTextSize(props[name]) && isTextSizeConfig(config)) {
452-
res[name] = props[name];
453-
return;
454-
}
467+
455468
if (!isEmptyTextWeight(props[name]) && isTextWeightConfig(config)) {
456469
res[name] = props[name];
457470
return;
@@ -633,6 +646,10 @@ function calcColors<ColorMap extends Record<string, string>>(
633646
if (isAnimationDurationConfig(config)) {
634647
res[name] = themeWithDefault[config.animationDuration] || '0s';
635648
}
649+
if (isLineHeightConfig(config)) {
650+
651+
res[name] = themeWithDefault[config.lineHeight] || '20px';
652+
}
636653
});
637654
// The second pass calculates dep
638655
colorConfigs.forEach((config) => {
@@ -743,6 +760,11 @@ const StyleContent = styled.div`
743760
border-radius: 0 0 6px 6px;
744761
}
745762
`;
763+
const LineHeightPropIcon = styled(LineHeightIcon)`
764+
margin: 0 8px 0 -3px;
765+
padding: 3px;
766+
color: #888;
767+
`;
746768

747769
const MarginIcon = styled(ExpandIcon)` margin: 0 8px 0 2px; color: #888`;
748770
const PaddingIcon = styled(CompressIcon)` margin: 0 8px 0 2px; color: #888`;
@@ -853,7 +875,8 @@ export function styleControl<T extends readonly SingleColorConfig[]>(
853875
name === 'containerHeaderPadding' ||
854876
name === 'containerSiderPadding' ||
855877
name === 'containerFooterPadding' ||
856-
name === 'containerBodyPadding'
878+
name === 'containerBodyPadding' ||
879+
name === 'lineHeight'
857880
) {
858881
childrenMap[name] = StringControl;
859882
} else {
@@ -966,7 +989,8 @@ export function styleControl<T extends readonly SingleColorConfig[]>(
966989
name === 'footerBackgroundImageRepeat' ||
967990
name === 'footerBackgroundImageSize' ||
968991
name === 'footerBackgroundImagePosition' ||
969-
name === 'footerBackgroundImageOrigin'
992+
name === 'footerBackgroundImageOrigin' ||
993+
name === 'lineHeight'
970994
) {
971995
children[name]?.dispatchChangeValueAction('');
972996
} else {
@@ -1299,6 +1323,14 @@ export function styleControl<T extends readonly SingleColorConfig[]>(
12991323
placeholder:
13001324
props[name],
13011325
})
1326+
: name === 'lineHeight' // Added lineHeight here
1327+
? (
1328+
children[name] as InstanceType<typeof StringControl>
1329+
).propertyView({
1330+
label: config.label,
1331+
preInputNode: <LineHeightPropIcon title="Line Height" />,
1332+
placeholder: props[name],
1333+
})
13021334
: children[
13031335
name
13041336
].propertyView({
@@ -1330,4 +1362,5 @@ export function useStyle<T extends readonly SingleColorConfig[]>(colorConfigs: T
13301362
props[config.name as Names<T>] = "";
13311363
});
13321364
return calcColors(props, colorConfigs, theme?.theme, bgColor);
1365+
13331366
}

0 commit comments

Comments
 (0)