Skip to content

Commit e1e8b3b

Browse files
author
FalkWolsky
committed
Button Hover fix, Text Weight
1 parent 067ded9 commit e1e8b3b

File tree

5 files changed

+70
-12
lines changed

5 files changed

+70
-12
lines changed

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

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,11 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
1616
margin: ${buttonStyle.margin};
1717
padding: ${buttonStyle.padding};
1818
&:not(:disabled) {
19-
// click animation color
2019
--antd-wave-shadow-color: ${buttonStyle.border};
2120
border-color: ${buttonStyle.border};
2221
color: ${buttonStyle.text};
22+
font-size: ${buttonStyle.textSize};
23+
font-weight: ${buttonStyle.textWeight};
2324
background-color: ${buttonStyle.background};
2425
border-radius: ${buttonStyle.radius};
2526
margin: ${buttonStyle.margin};
@@ -31,15 +32,14 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
3132
background-color: ${hoverColor};
3233
border-color: ${buttonStyle.border === buttonStyle.background
3334
? hoverColor
34-
: buttonStyle.border};
35+
: buttonStyle.border} !important;
3536
}
36-
3737
:active {
3838
color: ${buttonStyle.text};
3939
background-color: ${activeColor};
4040
border-color: ${buttonStyle.border === buttonStyle.background
4141
? activeColor
42-
: buttonStyle.border};
42+
: buttonStyle.border} !important;
4343
}
4444
}
4545
}
@@ -54,11 +54,20 @@ export const Button100 = styled(Button)<{ $buttonStyle?: ButtonStyleType }>`
5454
justify-content: center;
5555
align-items: center;
5656
overflow: hidden;
57+
gap: 6px;
58+
&:not(:disabled) {
59+
&:hover,
60+
&:focus {
61+
background-color: ${(props) => props.$buttonStyle ? genHoverColor(props.$buttonStyle.background) : ''} !important;
62+
}
63+
:active {
64+
background-color: ${(props) => props.$buttonStyle ? genActiveColor(props.$buttonStyle.background) : ''} !important;
65+
}
66+
}
5767
span {
5868
overflow: hidden;
5969
text-overflow: ellipsis;
6070
}
61-
gap: 6px;
6271
`;
6372

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

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

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
ExpandIcon,
1414
CompressIcon,
1515
TextSizeIcon,
16-
PencilIcon,
16+
TypographyIcon,
1717
ShowBorderIcon,
1818
} from "lowcoder-design";
1919
import { useContext } from "react";
@@ -31,8 +31,10 @@ import {
3131
MarginConfig,
3232
PaddingConfig,
3333
TextSizeConfig,
34+
TextWeightConfig,
3435
BorderWidthConfig,
3536
} from "./styleControlConstants";
37+
import { faTextWidth } from "@fortawesome/free-solid-svg-icons";
3638

3739
function isSimpleColorConfig(config: SingleColorConfig): config is SimpleColorConfig {
3840
return config.hasOwnProperty("color");
@@ -54,6 +56,10 @@ function isTextSizeConfig(config: SingleColorConfig): config is TextSizeConfig {
5456
return config.hasOwnProperty("textSize");
5557
}
5658

59+
function isTextWeightConfig(config: SingleColorConfig): config is TextWeightConfig {
60+
return config.hasOwnProperty("textWeight");
61+
}
62+
5763
function isMarginConfig(config: SingleColorConfig): config is MarginConfig {
5864
return config.hasOwnProperty("margin");
5965
}
@@ -80,6 +86,9 @@ function isEmptyBorderWidth(borderWidth: string) {
8086
function isEmptyTextSize(textSize: string) {
8187
return _.isEmpty(textSize);
8288
}
89+
function isEmptyTextWeight(textWeight: string) {
90+
return _.isEmpty(textWeight);
91+
}
8392

8493
function isEmptyMargin(margin: string) {
8594
return _.isEmpty(margin);
@@ -114,6 +123,10 @@ function calcColors<ColorMap extends Record<string, string>>(
114123
res[name] = props[name];
115124
return;
116125
}
126+
if (!isEmptyTextWeight(props[name]) && isTextWeightConfig(config)) {
127+
res[name] = props[name];
128+
return;
129+
}
117130
if (!isEmptyMargin(props[name]) && isMarginConfig(config)) {
118131
res[name] = props[name];
119132
return;
@@ -143,6 +156,10 @@ function calcColors<ColorMap extends Record<string, string>>(
143156
// TODO: remove default textSize after added in theme in backend.
144157
res[name] = themeWithDefault[config.textSize] || '14px';
145158
}
159+
if (isTextWeightConfig(config)) {
160+
// TODO: remove default textWeight after added in theme in backend.
161+
res[name] = themeWithDefault[config.textWeight] || 'regular';
162+
}
146163
if (isMarginConfig(config)) {
147164
res[name] = themeWithDefault[config.margin];
148165
}
@@ -257,6 +274,8 @@ const BorderIcon = styled(ShowBorderIcon)` margin: 0px 10px 0 3px;`;
257274
const MarginIcon = styled(ExpandIcon)` margin: 0 8px 0 2px;`;
258275
const PaddingIcon = styled(CompressIcon)` margin: 0 8px 0 2px;`;
259276
const StyledTextSizeIcon = styled(TextSizeIcon)` margin: 0 8px 0 0px;`;
277+
const StyledTextWeightIcon = styled(TypographyIcon)` margin: 0 8px 0 0px;`;
278+
260279
const ResetIcon = styled(IconReset)`
261280
&:hover g g {
262281
stroke: #315efb;
@@ -272,7 +291,8 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
272291
name === "radius" ||
273292
name === "borderWidth" ||
274293
name === "cardRadius" ||
275-
name === "textSize"
294+
name === "textSize" ||
295+
name === "textWeight"
276296
) {
277297
childrenMap[name] = StringControl;
278298
} else if (name === "margin" || name === "padding" || name==="containerheaderpadding" || name==="containerfooterpadding" || name==="containerbodypadding") {
@@ -401,9 +421,17 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
401421
children[name] as InstanceType<typeof StringControl>
402422
).propertyView({
403423
label: config.label,
404-
preInputNode: <StyledTextSizeIcon title="" />,
424+
preInputNode: <StyledTextSizeIcon title="Font Size" />,
405425
placeholder: props[name],
406426
})
427+
: name === "textWeight"
428+
? (
429+
children[name] as InstanceType<typeof StringControl>
430+
).propertyView({
431+
label: config.label,
432+
preInputNode: <StyledTextWeightIcon title="Font Weight" />,
433+
placeholder: props[name],
434+
})
407435
: children[name].propertyView({
408436
label: config.label,
409437
panelDefaultColor: props[name],

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

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { ThemeDetail } from "api/commonSettingApi";
22
import { darkenColor, isDarkColor, lightenColor, toHex } from "lowcoder-design";
33
import { trans } from "i18n";
4-
import { StyleConfigType } from "./styleControl";
4+
import { StyleConfigType } from "./styleControl";
55

66
type SupportPlatform = "pc" | "mobile";
77

@@ -25,6 +25,10 @@ export type TextSizeConfig = CommonColorConfig & {
2525
readonly textSize: string;
2626
};
2727

28+
export type TextWeightConfig = CommonColorConfig & {
29+
readonly textWeight: string;
30+
};
31+
2832
export type ContainerHeaderPaddigConfig = CommonColorConfig & {
2933
readonly containerheaderpadding: string;
3034
};
@@ -50,7 +54,7 @@ export type DepColorConfig = CommonColorConfig & {
5054
readonly depType?: DEP_TYPE;
5155
transformer: (color: string, ...rest: string[]) => string;
5256
};
53-
export type SingleColorConfig = SimpleColorConfig | DepColorConfig | RadiusConfig | BorderWidthConfig | TextSizeConfig | MarginConfig | PaddingConfig | ContainerHeaderPaddigConfig | ContainerFooterPaddigConfig | ContainerBodyPaddigConfig;
57+
export type SingleColorConfig = SimpleColorConfig | DepColorConfig | RadiusConfig | BorderWidthConfig | TextSizeConfig | TextWeightConfig | MarginConfig | PaddingConfig | ContainerHeaderPaddigConfig | ContainerFooterPaddigConfig | ContainerBodyPaddigConfig;
5458

5559
export const defaultTheme: ThemeDetail = {
5660
primary: "#3377FF",
@@ -284,6 +288,12 @@ const TEXT_SIZE = {
284288
textSize: "textSize",
285289
} as const;
286290

291+
const TEXT_WEIGHT = {
292+
name: "textWeight",
293+
label: trans("style.textWeight"),
294+
textWeight: "textWeight",
295+
} as const;
296+
287297
const CONTAINERHEADERPADDING = {
288298
name: "containerheaderpadding",
289299
label: trans("style.containerheaderpadding"),
@@ -370,11 +380,20 @@ function getStaticBackground(color: string) {
370380
} as const;
371381
}
372382

373-
export const ButtonStyle = [...getBgBorderRadiusByBg("primary"), TEXT, MARGIN, PADDING] as const;
383+
export const ButtonStyle = [
384+
...getBgBorderRadiusByBg("primary"),
385+
TEXT,
386+
TEXT_SIZE,
387+
TEXT_WEIGHT,
388+
MARGIN,
389+
PADDING
390+
] as const;
374391

375392
export const ToggleButtonStyle = [
376393
getBackground("canvas"),
377394
TEXT,
395+
TEXT_SIZE,
396+
TEXT_WEIGHT,
378397
{
379398
name: "border",
380399
label: trans("style.border"),

‎client/packages/lowcoder/src/i18n/locales/en.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -358,7 +358,8 @@ export const en = {
358358
"containerbodypadding": "Body Padding",
359359
"minWidth": "Minimum Width",
360360
"aspectRatio": "Aspect Ratio",
361-
"textSize": "Text Size"
361+
"textSize": "Text Size",
362+
"textWeight": "Text Weight",
362363
},
363364
"export": {
364365
"hiddenDesc": "If true, the component is hidden",

‎client/packages/lowcoder/src/i18n/locales/zh.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -349,6 +349,7 @@ style: {
349349
containerbodypadding: "内边距",
350350
minWidth: "最小宽度",
351351
textSize: "字体大小",
352+
textWeight: "字体粗细",
352353
},
353354
export: {
354355
hiddenDesc: "如果为true,则隐藏组件",

0 commit comments

Comments
 (0)