Button Hover fix, Text Weight

lowcoder-org · FalkWolsky · Jan 16, 2024 · Jan 14, 2024 · Jan 14, 2024 · Jan 15, 2024
commit e1e8b3b825b55bb30efe519dba38d6eb9dabcffe
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx
@@ -16,10 +16,11 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
       margin: ${buttonStyle.margin};	
       padding: ${buttonStyle.padding};
       &:not(:disabled) {
-        // click animation color
         --antd-wave-shadow-color: ${buttonStyle.border};
         border-color: ${buttonStyle.border};
         color: ${buttonStyle.text};
+        font-size: ${buttonStyle.textSize};
+        font-weight: ${buttonStyle.textWeight};
         background-color: ${buttonStyle.background};
         border-radius: ${buttonStyle.radius};
         margin: ${buttonStyle.margin};	
@@ -31,15 +32,14 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
           background-color: ${hoverColor};
           border-color: ${buttonStyle.border === buttonStyle.background
             ? hoverColor
-            : buttonStyle.border};
+            : buttonStyle.border} !important;
         }
-
         :active {
           color: ${buttonStyle.text};
           background-color: ${activeColor};
           border-color: ${buttonStyle.border === buttonStyle.background
             ? activeColor
-            : buttonStyle.border};
+            : buttonStyle.border} !important;
         }
       }
     }
@@ -54,11 +54,20 @@ export const Button100 = styled(Button)<{ $buttonStyle?: ButtonStyleType }>`
   justify-content: center;
   align-items: center;
   overflow: hidden;
+  gap: 6px; 
+  &:not(:disabled) {
+    &:hover,
+    &:focus {
+      background-color: ${(props) => props.$buttonStyle ? genHoverColor(props.$buttonStyle.background) : ''} !important;
+    }
+    :active {
+      background-color: ${(props) => props.$buttonStyle ? genActiveColor(props.$buttonStyle.background) : ''} !important;
+    }
+  }
   span {
     overflow: hidden;
     text-overflow: ellipsis;
   }
-  gap: 6px;
 `;
 
 export const ButtonCompWrapper = styled.div<{ disabled: boolean }>`

diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx
@@ -13,7 +13,7 @@ import {
   ExpandIcon,
   CompressIcon,
   TextSizeIcon,
-  PencilIcon,
+  TypographyIcon,
   ShowBorderIcon,
 } from "lowcoder-design";
 import { useContext } from "react";
@@ -31,8 +31,10 @@ import {
   MarginConfig,
   PaddingConfig,
   TextSizeConfig,
+  TextWeightConfig,
   BorderWidthConfig,
 } from "./styleControlConstants";
+import { faTextWidth } from "@fortawesome/free-solid-svg-icons";
 
 function isSimpleColorConfig(config: SingleColorConfig): config is SimpleColorConfig {
   return config.hasOwnProperty("color");
@@ -54,6 +56,10 @@ function isTextSizeConfig(config: SingleColorConfig): config is TextSizeConfig {
   return config.hasOwnProperty("textSize");
 }
 
+function isTextWeightConfig(config: SingleColorConfig): config is TextWeightConfig {
+  return config.hasOwnProperty("textWeight");
+}
+
 function isMarginConfig(config: SingleColorConfig): config is MarginConfig {	
   return config.hasOwnProperty("margin");	
 }	
@@ -80,6 +86,9 @@ function isEmptyBorderWidth(borderWidth: string) {
 function isEmptyTextSize(textSize: string) {
   return _.isEmpty(textSize);
 }
+function isEmptyTextWeight(textWeight: string) {
+  return _.isEmpty(textWeight);
+}
 
 function isEmptyMargin(margin: string) {	
   return _.isEmpty(margin);	
@@ -114,6 +123,10 @@ function calcColors<ColorMap extends Record<string, string>>(
       res[name] = props[name];	
       return;	
     }	
+    if (!isEmptyTextWeight(props[name]) && isTextWeightConfig(config)) {	
+      res[name] = props[name];	
+      return;	
+    }	
     if (!isEmptyMargin(props[name]) && isMarginConfig(config)) {	
       res[name] = props[name];	
       return;	
@@ -143,6 +156,10 @@ function calcColors<ColorMap extends Record<string, string>>(
       // TODO: remove default textSize after added in theme in backend.
       res[name] = themeWithDefault[config.textSize] || '14px';
     }
+    if (isTextWeightConfig(config)) {
+      // TODO: remove default textWeight after added in theme in backend.
+      res[name] = themeWithDefault[config.textWeight] || 'regular';
+    }
     if (isMarginConfig(config)) {	
       res[name] = themeWithDefault[config.margin];	
     }	
@@ -257,6 +274,8 @@ const BorderIcon = styled(ShowBorderIcon)` margin: 0px 10px 0 3px;`;
 const MarginIcon = styled(ExpandIcon)` margin: 0 8px 0 2px;`;	
 const PaddingIcon = styled(CompressIcon)`	margin: 0 8px 0 2px;`;
 const StyledTextSizeIcon = styled(TextSizeIcon)` margin: 0 8px 0 0px;`;
+const StyledTextWeightIcon = styled(TypographyIcon)` margin: 0 8px 0 0px;`;
+
 const ResetIcon = styled(IconReset)`
   &:hover g g {
     stroke: #315efb;
@@ -272,7 +291,8 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
       name === "radius" ||
       name === "borderWidth" ||
       name === "cardRadius" ||
-      name === "textSize"
+      name === "textSize" || 
+      name === "textWeight"
     ) {	
       childrenMap[name] = StringControl;	
     } else if (name === "margin" || name === "padding" || name==="containerheaderpadding" || name==="containerfooterpadding" || name==="containerbodypadding") {	
@@ -401,9 +421,17 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
                           children[name] as InstanceType<typeof StringControl>	
                         ).propertyView({	
                           label: config.label,	
-                          preInputNode: <StyledTextSizeIcon title="" />,	
+                          preInputNode: <StyledTextSizeIcon title="Font Size" />,	
                           placeholder: props[name],	
                         })
+                        : name === "textWeight"
+                        ? (	
+                            children[name] as InstanceType<typeof StringControl>	
+                          ).propertyView({	
+                            label: config.label,	
+                            preInputNode: <StyledTextWeightIcon title="Font Weight" />,	
+                            placeholder: props[name],	
+                          })
                       : children[name].propertyView({	
                           label: config.label,	
                           panelDefaultColor: props[name],	

diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -1,7 +1,7 @@
 import { ThemeDetail } from "api/commonSettingApi";
 import { darkenColor, isDarkColor, lightenColor, toHex } from "lowcoder-design";
 import { trans } from "i18n";
-import { StyleConfigType } from "./styleControl";
+import { StyleConfigType } from "./styleControl"; 
 
 type SupportPlatform = "pc" | "mobile";
 
@@ -25,6 +25,10 @@ export type TextSizeConfig = CommonColorConfig & {
   readonly textSize: string;
 };
 
+export type TextWeightConfig = CommonColorConfig & {
+  readonly textWeight: string;
+};
+
 export type ContainerHeaderPaddigConfig = CommonColorConfig & {
   readonly containerheaderpadding: string;
 };
@@ -50,7 +54,7 @@ export type DepColorConfig = CommonColorConfig & {
   readonly depType?: DEP_TYPE;
   transformer: (color: string, ...rest: string[]) => string;
 };
-export type SingleColorConfig = SimpleColorConfig | DepColorConfig | RadiusConfig | BorderWidthConfig | TextSizeConfig | MarginConfig | PaddingConfig | ContainerHeaderPaddigConfig | ContainerFooterPaddigConfig | ContainerBodyPaddigConfig;
+export type SingleColorConfig = SimpleColorConfig | DepColorConfig | RadiusConfig | BorderWidthConfig | TextSizeConfig | TextWeightConfig | MarginConfig | PaddingConfig | ContainerHeaderPaddigConfig | ContainerFooterPaddigConfig | ContainerBodyPaddigConfig;
 
 export const defaultTheme: ThemeDetail = {
   primary: "#3377FF",
@@ -284,6 +288,12 @@ const TEXT_SIZE = {
   textSize: "textSize",	
 } as const;
 
+const TEXT_WEIGHT = {	
+  name: "textWeight",
+  label: trans("style.textWeight"),	
+  textWeight: "textWeight",	
+} as const;
+
 const CONTAINERHEADERPADDING = {	
   name: "containerheaderpadding",	
   label: trans("style.containerheaderpadding"),	
@@ -370,11 +380,20 @@ function getStaticBackground(color: string) {
   } as const;
 }
 
-export const ButtonStyle = [...getBgBorderRadiusByBg("primary"), TEXT, MARGIN, PADDING] as const;
+export const ButtonStyle = [
+  ...getBgBorderRadiusByBg("primary"), 
+  TEXT, 
+  TEXT_SIZE,
+  TEXT_WEIGHT,
+  MARGIN, 
+  PADDING
+] as const;
 
 export const ToggleButtonStyle = [
   getBackground("canvas"),
   TEXT,
+  TEXT_SIZE,
+  TEXT_WEIGHT,
   {
     name: "border",
     label: trans("style.border"),

diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -358,7 +358,8 @@ export const en = {
     "containerbodypadding": "Body Padding",
     "minWidth": "Minimum Width",
     "aspectRatio": "Aspect Ratio",
-    "textSize": "Text Size"
+    "textSize": "Text Size",
+    "textWeight": "Text Weight",
   },
   "export": {
     "hiddenDesc": "If true, the component is hidden",

diff --git a/client/packages/lowcoder/src/i18n/locales/zh.ts b/client/packages/lowcoder/src/i18n/locales/zh.ts
@@ -349,6 +349,7 @@ style: {
     containerbodypadding: "内边距",
     minWidth: "最小宽度",
     textSize: "字体大小",
+    textWeight: "字体粗细",
 },
 export: {
     hiddenDesc: "如果为true,则隐藏组件",