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

Commite1e8b3b

Browse files
author
FalkWolsky
committed
Button Hover fix, Text Weight
1 parent067ded9 commite1e8b3b

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
exportconstButtonCompWrapper=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
functionisSimpleColorConfig(config:SingleColorConfig):config isSimpleColorConfig{
3840
returnconfig.hasOwnProperty("color");
@@ -54,6 +56,10 @@ function isTextSizeConfig(config: SingleColorConfig): config is TextSizeConfig {
5456
returnconfig.hasOwnProperty("textSize");
5557
}
5658

59+
functionisTextWeightConfig(config:SingleColorConfig):config isTextWeightConfig{
60+
returnconfig.hasOwnProperty("textWeight");
61+
}
62+
5763
functionisMarginConfig(config:SingleColorConfig):config isMarginConfig{
5864
returnconfig.hasOwnProperty("margin");
5965
}
@@ -80,6 +86,9 @@ function isEmptyBorderWidth(borderWidth: string) {
8086
functionisEmptyTextSize(textSize:string){
8187
return_.isEmpty(textSize);
8288
}
89+
functionisEmptyTextWeight(textWeight:string){
90+
return_.isEmpty(textWeight);
91+
}
8392

8493
functionisEmptyMargin(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
constMarginIcon=styled(ExpandIcon)` margin: 0 8px 0 2px;`;
258275
constPaddingIcon=styled(CompressIcon)`margin: 0 8px 0 2px;`;
259276
constStyledTextSizeIcon=styled(TextSizeIcon)` margin: 0 8px 0 0px;`;
277+
constStyledTextWeightIcon=styled(TypographyIcon)` margin: 0 8px 0 0px;`;
278+
260279
constResetIcon=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
}elseif(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]asInstanceType<typeofStringControl>
402422
).propertyView({
403423
label:config.label,
404-
preInputNode:<StyledTextSizeIcontitle=""/>,
424+
preInputNode:<StyledTextSizeIcontitle="Font Size"/>,
405425
placeholder:props[name],
406426
})
427+
:name==="textWeight"
428+
?(
429+
children[name]asInstanceType<typeofStringControl>
430+
).propertyView({
431+
label:config.label,
432+
preInputNode:<StyledTextWeightIcontitle="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
typeSupportPlatform="pc"|"mobile";
77

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

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

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

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

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

375392
exportconstToggleButtonStyle=[
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)
[8]ページ先頭
©2009-2025 Movatter.jp