Fixes and introduction of text-decoration and text transform property with css control

imtananikhwa · imtananikhwa · commit 6b8a4977b6fe · 2024-02-27T21:37:28.000+05:00
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx
@@ -24,6 +24,8 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
         font-weight: ${buttonStyle.textWeight};
         font-family: ${buttonStyle.fontFamily};
         font-style: ${buttonStyle.fontStyle};
+        text-transform:${buttonStyle.textTransform};
+        text-decoration:${buttonStyle.textDecoration};
         background-color: ${buttonStyle.background};
         border-radius: ${buttonStyle.radius};
         margin: ${buttonStyle.margin};	
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx
@@ -25,30 +25,41 @@ import {
 
 const StyledDropdownButton = styled(DropdownButton)`
   width: 100%;
+  
   .ant-btn-group {
     width: 100%;
+   
   }
 `;
 
 const LeftButtonWrapper = styled.div<{ $buttonStyle: ButtonStyleType }>`
   width: calc(100%);
   ${(props) => `margin: ${props.$buttonStyle.margin};`}
   margin-right: 0;
+  .ant-btn span {
+    ${(props) => `text-decoration: ${props.$buttonStyle.textDecoration};`}
+    ${(props) => `font-family: ${props.$buttonStyle.fontFamily};`}
+  }
+  
   .ant-btn {
     ${(props) => getButtonStyle(props.$buttonStyle)}
     margin: 0 !important;
     height: 100%;
     &.ant-btn-default {
       margin: 0 !important;
       ${(props) => `border-radius: ${props.$buttonStyle.radius} 0 0 ${props.$buttonStyle.radius};`}
+      ${(props) => `text-transform: ${props.$buttonStyle.textTransform};`}
+      ${(props) => `font-weight: ${props.$buttonStyle.textWeight};`}
     }
     ${(props) => `background-color: ${props.$buttonStyle.background};`}
     ${(props) => `color: ${props.$buttonStyle.text};`}
     ${(props) => `padding: ${props.$buttonStyle.padding};`}
     ${(props) => `font-size: ${props.$buttonStyle.textSize};`}
     ${(props) => `font-style: ${props.$buttonStyle.fontStyle};`}
+
     width: 100%;
   }
+  
 `;
 
 const RightButtonWrapper = styled.div<{ $buttonStyle: ButtonStyleType }>`
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx
@@ -34,6 +34,8 @@ const Link = styled(Button) <{ $style: LinkStyleType }>`
     font-weight:${props.$style.textWeight};
     border: ${props.$style.borderWidth} solid ${props.$style.border};
     border-radius:${props.$style.radius ? props.$style.radius:'0px'};
+    text-transform:${props.$style.textTransform ? props.$style.textTransform:''};
+    text-decoration:${props.$style.textDecoration ? props.$style.textDecoration:''} !important;
     background-color: ${props.$style.background};
     &:hover {
       color: ${props.$style.hoverText} !important;
diff --git a/client/packages/lowcoder/src/comps/comps/dividerComp.tsx b/client/packages/lowcoder/src/comps/comps/dividerComp.tsx
@@ -30,6 +30,8 @@ const StyledDivider = styled(Divider) <IProps>`
     font-size: ${(props) => props.$style.textSize};
     font-weight: ${(props) => props.$style.textWeight};
     font-family: ${(props) => props.$style.fontFamily};
+    text-transform:${(props)=>props.$style.textTransform};
+    text-decoration:${(props)=>props.$style.textDecoration};
     font-style:${(props) => props.$style.fontStyle}
   }
   min-width: 0;	
diff --git a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx
@@ -52,6 +52,8 @@ const Item = styled.div<{
   $textSize: string;
   $margin: string;
   $padding: string;
+  $textTransform:string;
+  $textDecoration:string;
 }>`
   height: 30px;
   line-height: 30px;
@@ -61,6 +63,8 @@ const Item = styled.div<{
   font-family:${(props) => (props.$fontFamily ? props.$fontFamily : 'sans-serif')};
   font-style:${(props) => (props.$fontStyle ? props.$fontStyle : 'normal')};
   font-size:${(props) => (props.$textSize ? props.$textSize : '14px')};
+  text-transform:${(props) => (props.$textTransform ? props.$textTransform : '')};
+  text-decoration:${(props) => (props.$textDecoration ? props.$textDecoration : '')};
   margin:${(props) => props.$margin ? props.$margin : '0px'};
   
   &:hover {
@@ -161,6 +165,8 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
             $textWeight={props.style.textWeight}
             $textSize={props.style.textSize}
             $padding={props.style.padding}
+            $textTransform={props.style.textTransform}
+            $textDecoration={props.style.textDecoration}
             $margin={props.style.margin}
             onClick={() => onEvent("click")}
           >
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
@@ -86,6 +86,8 @@ export const getStyle = (style: CheckboxStyleType) => {
       font-size:${style.textSize};
       font-weight:${style.textWeight};
       font-style:${style.fontStyle};
+      text-transform:${style.textTransform};
+      text-decoration:${style.textDecoration};
     }
     .ant-checkbox-wrapper {
       padding: ${style.padding};
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
@@ -25,6 +25,8 @@ const getStyle = (style: RadioStyleType) => {
         font-size:${style.textSize};
         font-weight:${style.textWeight};
         font-style:${style.fontStyle};
+        text-transform:${style.textTransform};
+        text-decoration:${style.textDecoration};
       }
 
       .ant-radio-checked {
@@ -47,6 +49,12 @@ const getStyle = (style: RadioStyleType) => {
         }
       }
 
+      &:hover .ant-radio-inner, 
+      .ant-radio:hover .ant-radio-inner,
+      .ant-radio-input + ant-radio-inner {
+        background-color:${style.hoverBackground ? style.hoverBackground:'#ffff'};
+      }
+
       &:hover .ant-radio-inner,
       .ant-radio:hover .ant-radio-inner,
       .ant-radio-input:focus + .ant-radio-inner {
diff --git a/client/packages/lowcoder/src/comps/comps/textComp.tsx b/client/packages/lowcoder/src/comps/comps/textComp.tsx
@@ -30,6 +30,8 @@ const getStyle = (style: TextStyleType) => {
     font-weight: ${style.textWeight} !important;
     font-family: ${style.fontFamily} !important;
     font-style:${style.fontStyle} !important;
+    text-transform:${style.textTransform} !important;
+    text-decoration:${style.textDecoration} !important;
     background-color: ${style.background};
     .markdown-body a {
       color: ${style.links};
@@ -146,7 +148,6 @@ let TextTmpComp = (function () {
     .setPropertyViewFn((children) => {
       return (
         <>
-
           <Section name={sectionNames.basic}>
             {children.type.propertyView({
               label: trans("value"),
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx
@@ -62,6 +62,8 @@ const Wrapper = styled.div<{
   .rc-textarea {
     background-color:${(props) => props.$style.background};
     padding:${(props) => props.$style.padding};
+    text-transform:${(props)=>props.$style.textTransform};
+    text-decoration:${(props)=>props.$style.textDecoration};
     margin: 0px 3px 0px 3px !important;
   }
 
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx
@@ -230,6 +230,8 @@ export function getStyle(style: InputLikeStyleType) {
       font-weight: ${style.textWeight};
       font-family: ${style.fontFamily};
       font-style:${style.fontStyle};
+      text-transform:${style.textTransform};
+      text-decoration:${style.textDecoration};
       background-color: ${style.background};
       border-color: ${style.border};
 
diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx
@@ -547,6 +547,8 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
       name === "cardRadius" ||
       name === "textSize" ||
       name === "textWeight" ||
+      name === "textTransform" ||
+      name === "textDecoration" ||
       name === "fontFamily" ||
       name === "fontStyle" ||
       name === "backgroundImage" ||
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -74,13 +74,21 @@ export type PaddingConfig = CommonColorConfig & {
   readonly padding: string;
 };
 
+export type TextTransformConfig = CommonColorConfig & {
+  readonly textTransform: string;
+}
+
+export type TextDecorationConfig = CommonColorConfig & {
+  readonly textDecoration: string;
+}
+
 export type DepColorConfig = CommonColorConfig & {
   readonly depName?: string;
   readonly depTheme?: keyof ThemeDetail;
   readonly depType?: DEP_TYPE;
   transformer: (color: string, ...rest: string[]) => string;
 };
-export type SingleColorConfig = SimpleColorConfig | DepColorConfig | RadiusConfig | BorderWidthConfig | BackgroundImageConfig | BackgroundImageRepeatConfig | BackgroundImageSizeConfig | BackgroundImagePositionConfig | BackgroundImageOriginConfig | TextSizeConfig | TextWeightConfig | FontFamilyConfig | FontStyleConfig | MarginConfig | PaddingConfig | ContainerHeaderPaddigConfig | ContainerFooterPaddigConfig | ContainerBodyPaddigConfig | HeaderBackgroundImageConfig | HeaderBackgroundImageRepeatConfig | HeaderBackgroundImageSizeConfig | HeaderBackgroundImagePositionConfig | HeaderBackgroundImageOriginConfig | FooterBackgroundImageConfig | FooterBackgroundImageRepeatConfig | FooterBackgroundImageSizeConfig | FooterBackgroundImagePositionConfig | FooterBackgroundImageOriginConfig;
+export type SingleColorConfig = SimpleColorConfig | DepColorConfig | RadiusConfig | BorderWidthConfig | BackgroundImageConfig | BackgroundImageRepeatConfig | BackgroundImageSizeConfig | BackgroundImagePositionConfig | BackgroundImageOriginConfig | TextSizeConfig | TextWeightConfig | TextTransformConfig | TextDecorationConfig | FontFamilyConfig | FontStyleConfig | MarginConfig | PaddingConfig | ContainerHeaderPaddigConfig | ContainerFooterPaddigConfig | ContainerBodyPaddigConfig | HeaderBackgroundImageConfig | HeaderBackgroundImageRepeatConfig | HeaderBackgroundImageSizeConfig | HeaderBackgroundImagePositionConfig | HeaderBackgroundImageOriginConfig | FooterBackgroundImageConfig | FooterBackgroundImageRepeatConfig | FooterBackgroundImageSizeConfig | FooterBackgroundImagePositionConfig | FooterBackgroundImageOriginConfig;
 
 export const defaultTheme: ThemeDetail = {
   primary: "#3377FF",
@@ -387,6 +395,18 @@ const CONTAINERBODYPADDING = {
   containerbodypadding: "padding",
 } as const;
 
+const TEXT_TRANSFORM = {
+  name: "textTransform",
+  label: trans("style.textTransform"),
+  textTransform: "textTransform"
+}
+
+const TEXT_DECORATION = {
+  name: "textDecoration",
+  label: trans("style.textDecoration"),
+  textDecoration: "textDecoration"
+}
+
 const getStaticBorder = (color: string = SECOND_SURFACE_COLOR) =>
 ({
   name: "border",
@@ -405,6 +425,8 @@ const HEADER_BACKGROUND = {
 const BG_STATIC_BORDER_RADIUS = [getBackground(), getStaticBorder(), RADIUS] as const;
 const STYLING_FIELDS_SEQUENCE = [
   TEXT,
+  TEXT_TRANSFORM,
+  TEXT_DECORATION,
   TEXT_SIZE,
   TEXT_WEIGHT,
   FONT_FAMILY,
@@ -860,6 +882,7 @@ export const RadioStyle = [
     depType: DEP_TYPE.SELF,
     transformer: toSelf,
   },
+  HOVER_BACKGROUND_COLOR
 ] as const;
 
 export const SegmentStyle = [
@@ -1079,7 +1102,7 @@ export const ProgressStyle = [
     depTheme: "canvas",
     depType: DEP_TYPE.CONTRAST_TEXT,
     transformer: contrastText,
-  }]).filter((style) => ['border', 'borderWidth'].includes(style.name) === false),
+  }]).filter((style) => ['border', 'borderWidth','textTransform','textDecoration'].includes(style.name) === false),
   TRACK,
   FILL,
   SUCCESS,
diff --git a/client/packages/lowcoder/src/i18n/locales/de.ts b/client/packages/lowcoder/src/i18n/locales/de.ts
@@ -325,6 +325,8 @@ export const de = {
       "selectedRowBackground": "Ausgewählter Zeilenhintergrund",
       "hoverRowBackground": "Hover Row Hintergrund",
       "hoverBackground":"Hover-Hintergrund",
+      "textTransform":"Texttransformation",
+      "textDecoration":"Textdekoration",
       "alternateRowBackground": "Alternativer Reihenhintergrund",
       "tableHeaderBackground": "Kopfzeile Hintergrund",
       "tableHeaderText": "Überschrift Text",
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -340,6 +340,8 @@ export const en = {
     "selectedRowBackground": "Selected Row Background",
     "hoverRowBackground": "Hover Row Background",
     "hoverBackground":"Hover Background",
+    "textTransform":"Text Transform",
+    "textDecoration":"Text Decoration",
     "alternateRowBackground": "Alternate Row Background",
     "tableHeaderBackground": "Header Background",
     "tableHeaderText": "Header Text",
diff --git a/client/packages/lowcoder/src/i18n/locales/zh.ts b/client/packages/lowcoder/src/i18n/locales/zh.ts
@@ -331,6 +331,8 @@ style: {
     selectedRowBackground: "选中行背景",
     hoverRowBackground: "悬停行背景",
     hoverBackground:"悬停背景",
+    textTransform:"文本变换",
+    textDecoration:"文字装饰",
     alternateRowBackground: "交替行背景",
     tableHeaderBackground: "表头背景",
     tableHeaderText: "表头文本",

Original file line number	Diff line number	Diff line change
@@ -30,6 +30,8 @@ const StyledDivider = styled(Divider) <IProps>`
`30`	`30`	`font-size: ${(props) => props.$style.textSize};`
`31`	`31`	`font-weight: ${(props) => props.$style.textWeight};`
`32`	`32`	`font-family: ${(props) => props.$style.fontFamily};`
	`33`	`+ text-transform:${(props)=>props.$style.textTransform};`
	`34`	`+ text-decoration:${(props)=>props.$style.textDecoration};`
`33`	`35`	`font-style:${(props) => props.$style.fontStyle}`
`34`	`36`	`}`
`35`	`37`	`min-width: 0;`
Original file line number	Diff line number	Diff line change
`@@ -86,6 +86,8 @@ export const getStyle = (style: CheckboxStyleType) => {`
`86`	`86`	`font-size:${style.textSize};`
`87`	`87`	`font-weight:${style.textWeight};`
`88`	`88`	`font-style:${style.fontStyle};`
	`89`	`+ text-transform:${style.textTransform};`
	`90`	`+ text-decoration:${style.textDecoration};`
`89`	`91`	`}`
`90`	`92`	`.ant-checkbox-wrapper {`
`91`	`93`	`padding: ${style.padding};`
Original file line number	Diff line number	Diff line change
`@@ -25,6 +25,8 @@ const getStyle = (style: RadioStyleType) => {`
`25`	`25`	`font-size:${style.textSize};`
`26`	`26`	`font-weight:${style.textWeight};`
`27`	`27`	`font-style:${style.fontStyle};`
	`28`	`+ text-transform:${style.textTransform};`
	`29`	`+ text-decoration:${style.textDecoration};`
`28`	`30`	`}`
`29`	`31`
`30`	`32`	`.ant-radio-checked {`
`@@ -47,6 +49,12 @@ const getStyle = (style: RadioStyleType) => {`
`47`	`49`	`}`
`48`	`50`	`}`
`49`	`51`
	`52`	`+ &:hover .ant-radio-inner,`
	`53`	`+ .ant-radio:hover .ant-radio-inner,`
	`54`	`+ .ant-radio-input + ant-radio-inner {`
	`55`	`+ background-color:${style.hoverBackground ? style.hoverBackground:'#ffff'};`
	`56`	`+ }`
	`57`	`+`
`50`	`58`	`&:hover .ant-radio-inner,`
`51`	`59`	`.ant-radio:hover .ant-radio-inner,`
`52`	`60`	`.ant-radio-input:focus + .ant-radio-inner {`
Original file line number	Diff line number	Diff line change
`@@ -62,6 +62,8 @@ const Wrapper = styled.div<{`
`62`	`62`	`.rc-textarea {`
`63`	`63`	`background-color:${(props) => props.$style.background};`
`64`	`64`	`padding:${(props) => props.$style.padding};`
	`65`	`+ text-transform:${(props)=>props.$style.textTransform};`
	`66`	`+ text-decoration:${(props)=>props.$style.textDecoration};`
`65`	`67`	`margin: 0px 3px 0px 3px !important;`
`66`	`68`	`}`
`67`	`69`