Skip to content

Add/line-height #1069

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Jul 29, 2024
Merged

Add/line-height #1069

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
caa36ff
Style Control CHanges
MenamAfzal Jul 25, 2024
3159fc0
Add line Height in Said Components
MenamAfzal Jul 25, 2024
0cf5abd
Improved Translations
MenamAfzal Jul 25, 2024
4c8dd4e
Push for debug
MenamAfzal Jul 26, 2024
c5640ad
added lineHeight as css property
MenamAfzal Jul 27, 2024
0bc663b
lineHeight icon added in right panel
MenamAfzal Jul 27, 2024
7459f78
lineHeight icon added in right panel
MenamAfzal Jul 27, 2024
32dc4ec
pull from origin
MenamAfzal Jul 27, 2024
3e4fa6f
Merge branch 'dev' into add/lineHeight
raheeliftikhar5 Jul 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Push for debug
  • Loading branch information
@MenamAfzal
MenamAfzal committed Jul 26, 2024
commit 4c8dd4e3d6134f6f72fb17c6597bf67c32e074f3
39 changes: 24 additions & 15 deletions client/packages/lowcoder/src/comps/controls/styleControl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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");
Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -376,17 +376,21 @@ function calcColors<ColorMap extends Record<string, string>>(
if (compType && styleKey && inputFieldComps.includes(compType) && styleKey !== 'inputFieldStyle') {
const style = theme?.components?.[compType]?.[styleKey] as Record<string, string>;
themeWithDefault['borderWidth'] = style?.['borderWidth'] || '0px';
console.log("The values are ", themeWithDefault)
}

// Cover what is not there for the first pass
let res: Record<string, string> = {};
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;
Expand Down Expand Up @@ -460,10 +464,7 @@ function calcColors<ColorMap extends Record<string, string>>(
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;
Expand Down Expand Up @@ -645,6 +646,12 @@ function calcColors<ColorMap extends Record<string, string>>(
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) => {
Expand Down Expand Up @@ -682,6 +689,7 @@ function calcColors<ColorMap extends Record<string, string>>(
res[name] = themeWithDefault[config.name]
}
});
console.log("The defaults are ", themeWithDefault)
return res as ColorMap;
}

Expand Down Expand Up @@ -1357,4 +1365,5 @@ export function useStyle<T extends readonly SingleColorConfig[]>(colorConfigs: T
props[config.name as Names<T>] = "";
});
return calcColors(props, colorConfigs, theme?.theme, bgColor);

}
8 changes: 1 addition & 7 deletions client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
}
}
Expand Down