Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

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.

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

Already on GitHub?Sign in to your account

Merged
raheeliftikhar5 merged 9 commits intolowcoder-org:devfromMenamAfzal:add/lineHeight
Jul 29, 2024
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
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
1 change: 1 addition & 0 deletionsclient/packages/lowcoder-design/src/icons/index.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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";
Expand Down
3 changes: 3 additions & 0 deletionsclient/packages/lowcoder/src/api/commonSettingApi.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -62,6 +62,7 @@ export interface ThemeDetail {
animationDuration?: string;
opacity?: string;
boxShadow?: string;
lineHeight?: string;
boxShadowColor?: string;
animationIterationCount?: string;
components?: Record<string, JSONObject>;
Expand All@@ -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 "";
}
Expand All@@ -105,6 +107,7 @@ export function isThemeColorKey(key: string) {
case "padding":
case "gridColumns":
case "textSize":
case "lineHeight":
return true;
}
return false;
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -25,6 +25,7 @@ import {
TextStyleIcon,
ImageCompIconSmall,
RotationIcon,
LineHeightIcon
} from "lowcoder-design/src/icons";
import { trans } from "i18n";
import { debounce } from "lodash";
Expand DownExpand Up@@ -375,6 +376,10 @@ export default function ThemeSettingsCompStyles(props: CompStyleProps) {
icon = <RotationIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
break;
}
case 'lineHeight': {
icon = <LineHeightIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
break;
}
}
return icon;
}
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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 }>`
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -60,6 +60,7 @@ const LeftButtonWrapper = styled.div<{ $buttonStyle: DropdownStyleType }>`
${(props) => `font-style: ${props.$buttonStyle.fontStyle};`}

width: 100%;
line-height:${(props) => props.$buttonStyle.lineHeight};
}

`;
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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};
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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"),
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -204,6 +204,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;
Expand Down
1 change: 1 addition & 0 deletionsclient/packages/lowcoder/src/comps/comps/textComp.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -64,6 +64,7 @@ const getStyle = (style: TextStyleType) => {
h6 {
color: ${style.text};
font-weight: ${style.textWeight} !important;
line-height:${style.lineHeight};
}
img,
pre {
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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 {
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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;
Expand Down
59 changes: 46 additions & 13 deletionsclient/packages/lowcoder/src/comps/controls/styleControl.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -29,6 +29,7 @@ import {
RefreshLineIcon,
ShadowIcon,
OpacityIcon,
LineHeightIcon
} from 'lowcoder-design';
import { useContext } from "react";
import styled from "styled-components";
Expand DownExpand Up@@ -74,6 +75,7 @@ import {
AnimationConfig,
AnimationDelayConfig,
AnimationDurationConfig,
LineHeightConfig,


} from "./styleControlConstants";
Expand All@@ -89,6 +91,12 @@ import { inputFieldComps } from "@lowcoder-ee/constants/compConstants";
function isSimpleColorConfig(config: SingleColorConfig): config is SimpleColorConfig {
return config.hasOwnProperty("color");
}
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 {
return config.hasOwnProperty("depName") || config.hasOwnProperty("depTheme");
Expand DownExpand Up@@ -157,9 +165,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 DownExpand Up@@ -237,7 +242,12 @@ export type StyleConfigType<T extends readonly SingleColorConfig[]> = { [K in Na
function isEmptyColor(color: string) {
return _.isEmpty(color);
}

function isEmptyLineHeight(lineHeight: string) {
return _.isEmpty(lineHeight);
}
function isEmptyTextSize(textSize: string) {
return _.isEmpty(textSize);
}
function isEmptyRadius(radius: string) {
return _.isEmpty(radius);
}
Expand DownExpand Up@@ -293,9 +303,7 @@ function isEmptyFooterBackgroundImageOriginConfig(footerBackgroundImageOrigin: s
return _.isEmpty(footerBackgroundImageOrigin);
}

function isEmptyTextSize(textSize: string) {
return _.isEmpty(textSize);
}

function isEmptyTextWeight(textWeight: string) {
return _.isEmpty(textWeight);
}
Expand DownExpand Up@@ -375,6 +383,14 @@ function calcColors<ColorMap extends Record<string, string>>(
let res: Record<string, string> = {};
colorConfigs.forEach((config) => {
const name = config.name;
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 DownExpand Up@@ -448,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 DownExpand Up@@ -633,6 +646,10 @@ 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';
}
});
// The second pass calculates dep
colorConfigs.forEach((config) => {
Expand DownExpand Up@@ -743,6 +760,11 @@ const StyleContent = styled.div`
border-radius: 0 0 6px 6px;
}
`;
const LineHeightPropIcon = styled(LineHeightIcon)`
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`;
Expand DownExpand Up@@ -853,7 +875,8 @@ export function styleControl<T extends readonly SingleColorConfig[]>(
name === 'containerHeaderPadding' ||
name === 'containerSiderPadding' ||
name === 'containerFooterPadding' ||
name === 'containerBodyPadding'
name === 'containerBodyPadding' ||
name === 'lineHeight'
) {
childrenMap[name] = StringControl;
} else {
Expand DownExpand Up@@ -966,7 +989,8 @@ export function styleControl<T extends readonly SingleColorConfig[]>(
name === 'footerBackgroundImageRepeat' ||
name === 'footerBackgroundImageSize' ||
name === 'footerBackgroundImagePosition' ||
name === 'footerBackgroundImageOrigin'
name === 'footerBackgroundImageOrigin' ||
name === 'lineHeight'
) {
children[name]?.dispatchChangeValueAction('');
} else {
Expand DownExpand Up@@ -1299,6 +1323,14 @@ export function styleControl<T extends readonly SingleColorConfig[]>(
placeholder:
props[name],
})
: name === 'lineHeight' // Added lineHeight here
? (
children[name] as InstanceType<typeof StringControl>
).propertyView({
label: config.label,
preInputNode: <LineHeightPropIcon title="Line Height" />,
placeholder: props[name],
})
: children[
name
].propertyView({
Expand DownExpand Up@@ -1330,4 +1362,5 @@ export function useStyle<T extends readonly SingleColorConfig[]>(colorConfigs: T
props[config.name as Names<T>] = "";
});
return calcColors(props, colorConfigs, theme?.theme, bgColor);

}
Loading
[8]ページ先頭
©2009-2025 Movatter.jp