From 50f87fc936268ae5c860fbae0a341f4a3c604750 Mon Sep 17 00:00:00 2001 From: Imtanan Aziz Toor Date: Mon, 26 Feb 2024 20:52:51 +0500 Subject: [PATCH 1/6] Mention component height issue fix, checkbox component hover background color property added along with translations of hover background text --- .../comps/selectInputComp/checkboxComp.tsx | 16 +++++++++- .../comps/comps/textInputComp/mentionComp.tsx | 9 ++++-- .../comps/controls/styleControlConstants.tsx | 30 +++++-------------- .../packages/lowcoder/src/i18n/locales/de.ts | 1 + .../packages/lowcoder/src/i18n/locales/en.ts | 1 + .../packages/lowcoder/src/i18n/locales/zh.ts | 1 + 6 files changed, 32 insertions(+), 26 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx index 5a4a22e17..e6442b72b 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx @@ -51,13 +51,25 @@ export const getStyle = (style: CheckboxStyleType) => { border-radius: ${style.radius}; } } - + .ant-checkbox-inner { border-radius: ${style.radius}; background-color: ${style.uncheckedBackground}; border-color: ${style.uncheckedBorder}; border-width:${!!style.borderWidth ? style.borderWidth : '2px'}; } + + &:hover .ant-checkbox-inner, + .ant-checkbox:hover .ant-checkbox-inner, + .ant-checkbox-input + ant-checkbox-inner { + background-color:${style.hoverBackground ? style.hoverBackground :'#fff'}; + } + + &:hover .ant-checkbox-checked .ant-checkbox-inner, + .ant-checkbox:hover .ant-checkbox-inner, + .ant-checkbox-input + ant-checkbox-inner { + background-color:${style.hoverBackground ? style.hoverBackground:'#ffff'}; + } &:hover .ant-checkbox-inner, .ant-checkbox:hover .ant-checkbox-inner, @@ -67,6 +79,8 @@ export const getStyle = (style: CheckboxStyleType) => { } } + + .ant-checkbox-group-item { font-family:${style.fontFamily}; font-size:${style.textSize}; diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx index c760e054b..6bb38eb66 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx @@ -58,7 +58,12 @@ import { EditorContext } from "comps/editorState"; const Wrapper = styled.div<{ $style: InputLikeStyleType; }>` - height: 100%; + box-sizing:border-box; + .rc-textarea { + background-color:${(props) => props.$style.background}; + padding:${(props) => props.$style.padding}; + margin: 0px 3px 0px 3px !important; + } .ant-input-clear-icon { opacity: 0.45; @@ -196,7 +201,7 @@ let MentionTmpComp = (function () { height: "100%", maxHeight: "100%", resize: "none", - padding: props.style.padding, + // padding: props.style.padding, fontStyle: props.style.fontStyle, fontFamily: props.style.fontFamily, borderWidth: props.style.borderWidth, diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 30513a9af..df95e2826 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -350,6 +350,12 @@ const TEXT_WEIGHT = { textWeight: "textWeight", } as const; +const HOVER_BACKGROUND_COLOR = { + name: "hoverBackground", + label: trans("style.hoverBackground"), + hoverBackground: "hoverBackground" +} + const FONT_FAMILY = { name: "fontFamily", label: trans("style.fontFamily"), @@ -476,7 +482,6 @@ function replaceAndMergeMultipleStyles(originalArray: any[], styleToReplace: str } export const ButtonStyle = [ - // ...getBgBorderRadiusByBg("primary"), getBackground('primary'), ...STYLING_FIELDS_SEQUENCE ] as const; @@ -735,23 +740,12 @@ export const SwitchStyle = [ ] as const; export const SelectStyle = [ - // LABEL, ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'border', [...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc")]), - - // ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc"), - // TEXT, - // MARGIN, - // PADDING, ...ACCENT_VALIDATE, ] as const; const multiSelectCommon = [ ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'border', [...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc")]), - // LABEL, - // ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc"), - // TEXT, - // MARGIN, - // PADDING, { name: "tags", label: trans("style.tags"), @@ -844,7 +838,6 @@ function checkAndUncheck() { } export const CheckboxStyle = [ - // LABEL, ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [LABEL, STATIC_TEXT, VALIDATE]).filter((style) => style.name !== 'border'), ...checkAndUncheck(), { @@ -854,15 +847,10 @@ export const CheckboxStyle = [ depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, }, - // RADIUS, - // STATIC_TEXT, - // VALIDATE, - // MARGIN, - // PADDING, + HOVER_BACKGROUND_COLOR ] as const; export const RadioStyle = [ - // LABEL, ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [LABEL, STATIC_TEXT, VALIDATE]).filter((style) => style.name !== 'border' && style.name !== 'radius'), ...checkAndUncheck(), { @@ -872,10 +860,6 @@ export const RadioStyle = [ depType: DEP_TYPE.SELF, transformer: toSelf, }, - // STATIC_TEXT, - // VALIDATE, - // MARGIN, - // PADDING, ] as const; export const SegmentStyle = [ diff --git a/client/packages/lowcoder/src/i18n/locales/de.ts b/client/packages/lowcoder/src/i18n/locales/de.ts index 298e80ef4..b11797bc2 100644 --- a/client/packages/lowcoder/src/i18n/locales/de.ts +++ b/client/packages/lowcoder/src/i18n/locales/de.ts @@ -324,6 +324,7 @@ export const de = { "tableCellText": "Zelle Text", "selectedRowBackground": "Ausgewählter Zeilenhintergrund", "hoverRowBackground": "Hover Row Hintergrund", + "hoverBackground":"Hover-Hintergrund", "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 index fc05496d4..cbcb2f19d 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -339,6 +339,7 @@ export const en = { "tableCellText": "Cell Text", "selectedRowBackground": "Selected Row Background", "hoverRowBackground": "Hover Row Background", + "hoverBackground":"Hover Background", "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 index a91e25bff..ebfcc5ba6 100644 --- a/client/packages/lowcoder/src/i18n/locales/zh.ts +++ b/client/packages/lowcoder/src/i18n/locales/zh.ts @@ -330,6 +330,7 @@ style: { tableCellText: "单元格文本", selectedRowBackground: "选中行背景", hoverRowBackground: "悬停行背景", + hoverBackground:"悬停背景", alternateRowBackground: "交替行背景", tableHeaderBackground: "表头背景", tableHeaderText: "表头文本", From 6b8a4977b6fefa7418c56451e86ddac7a3a61774 Mon Sep 17 00:00:00 2001 From: Imtanan Aziz Toor Date: Tue, 27 Feb 2024 21:37:28 +0500 Subject: [PATCH 2/6] Fixes and introduction of text-decoration and text transform property with css control --- .../comps/buttonComp/buttonCompConstants.tsx | 2 ++ .../comps/comps/buttonComp/dropdownComp.tsx | 11 ++++++++ .../src/comps/comps/buttonComp/linkComp.tsx | 2 ++ .../lowcoder/src/comps/comps/dividerComp.tsx | 2 ++ .../src/comps/comps/navComp/navComp.tsx | 6 +++++ .../comps/selectInputComp/checkboxComp.tsx | 2 ++ .../comps/comps/selectInputComp/radioComp.tsx | 8 ++++++ .../lowcoder/src/comps/comps/textComp.tsx | 3 ++- .../comps/comps/textInputComp/mentionComp.tsx | 2 ++ .../textInputComp/textInputConstants.tsx | 2 ++ .../src/comps/controls/styleControl.tsx | 2 ++ .../comps/controls/styleControlConstants.tsx | 27 +++++++++++++++++-- .../packages/lowcoder/src/i18n/locales/de.ts | 2 ++ .../packages/lowcoder/src/i18n/locales/en.ts | 2 ++ .../packages/lowcoder/src/i18n/locales/zh.ts | 2 ++ 15 files changed, 72 insertions(+), 3 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx index e770014f7..8ebcd250c 100644 --- 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 index 7c2278d7b..93cac0fae 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx @@ -25,8 +25,10 @@ import { const StyledDropdownButton = styled(DropdownButton)` width: 100%; + .ant-btn-group { width: 100%; + } `; @@ -34,6 +36,11 @@ 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; @@ -41,14 +48,18 @@ const LeftButtonWrapper = styled.div<{ $buttonStyle: ButtonStyleType }>` &.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 index cbd5b26b2..274a29e13 100644 --- 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 index 032807de2..906db77c3 100644 --- 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) ` 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 index 44b782b47..25882da30 100644 --- 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 index e6442b72b..56182c40c 100644 --- 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 index af98eee25..a059f8c03 100644 --- 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 index 4359166dd..0798f07f2 100644 --- 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 ( <> -
{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 index 6bb38eb66..51815260f 100644 --- 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 index 5a2438245..772cbdc51 100644 --- 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 index 7295a9783..109801a97 100644 --- 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(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 index df95e2826..8a539b33d 100644 --- 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 index b11797bc2..404520788 100644 --- 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 index cbcb2f19d..a01b2c5e9 100644 --- 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 index ebfcc5ba6..ca3e99f49 100644 --- 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: "表头文本", From f50180215956ba5325613a1b1f5171057ee1e86a Mon Sep 17 00:00:00 2001 From: Imtanan Aziz Toor Date: Tue, 27 Feb 2024 22:10:46 +0500 Subject: [PATCH 3/6] CSS styles and propeties added to tabbed container while ensuring the styling rules of container component --- .../comps/comps/selectInputComp/selectCompConstants.tsx | 3 ++- .../src/comps/comps/tabs/tabbedContainerComp.tsx | 8 ++++++++ .../src/comps/controls/styleControlConstants.tsx | 9 +++++---- 3 files changed, 15 insertions(+), 5 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx index c4b0d43ae..e277751b4 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx @@ -69,6 +69,8 @@ export const getStyle = ( } .ant-select-selection-search-input { font-family:${(style as SelectStyleType).fontFamily} !important; + text-transform:${(style as SelectStyleType).textTransform} !important; + text-decoration:${(style as SelectStyleType).textDecoration} !important; font-size:${(style as SelectStyleType).textSize} !important; font-weight:${(style as SelectStyleType).textWeight}; color:${(style as SelectStyleType).text} !important; @@ -256,7 +258,6 @@ export const SelectUIView = ( label={option.label} disabled={option.disabled} key={option.value} - style={{fontFamily:"Montserrat"}} > {props.options.findIndex((option) => hasIcon(option.prefixIcon)) > -1 && diff --git a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx index 06a5ad955..1bdc2ea4e 100644 --- a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx @@ -111,6 +111,14 @@ const getStyle = ( } } + .ant-tabs-tab-btn { + font-family:${style.fontFamily}; + font-weight:${style.textWeight}; + text-transform:${style.textTransform}; + text-decoration:${style.textDecoration}; + font-style:${style.fontStyle}; + } + .ant-tabs-ink-bar { background-color: ${style.accent}; } diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 8a539b33d..1b994c062 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -554,6 +554,7 @@ export const MarginStyle = [ export const ContainerStyle = [ // ...BG_STATIC_BORDER_RADIUS, getStaticBorder(), + // ...STYLING_FIELDS_SEQUENCE.filter((style) => style.name !== 'border'), RADIUS, BORDER_WIDTH, MARGIN, @@ -798,13 +799,14 @@ export const MultiSelectStyle = [ ] as const; export const TabContainerStyle = [ - { + // Keep background related properties of container as STYLING_FIELDS_SEQUENCE has rest of the properties + ...replaceAndMergeMultipleStyles([...ContainerStyle.filter((style)=> ['border','radius','borderWidth','margin','padding'].includes(style.name) === false),...STYLING_FIELDS_SEQUENCE], 'text', [{ name: "tabText", label: trans("style.tabText"), depName: "headerBackground", depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, - }, + },]), { name: "accent", label: trans("style.tabAccent"), @@ -812,7 +814,6 @@ export const TabContainerStyle = [ depType: DEP_TYPE.SELF, transformer: toSelf, }, - ...ContainerStyle, ] as const; export const ModalStyle = [ @@ -1102,7 +1103,7 @@ export const ProgressStyle = [ depTheme: "canvas", depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, - }]).filter((style) => ['border', 'borderWidth','textTransform','textDecoration'].includes(style.name) === false), + }]).filter((style) => ['border', 'borderWidth', 'textTransform', 'textDecoration'].includes(style.name) === false), TRACK, FILL, SUCCESS, From 2c800456234ecd5375df427eb1f673be5d90d62d Mon Sep 17 00:00:00 2001 From: Imtanan Aziz Toor Date: Tue, 27 Feb 2024 22:20:41 +0500 Subject: [PATCH 4/6] CSS properties and their control added for segment control --- .../src/comps/comps/selectInputComp/segmentedControl.tsx | 8 ++++++++ .../lowcoder/src/comps/controls/styleControlConstants.tsx | 4 +--- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx index bf105982a..c3ac81937 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx @@ -52,6 +52,14 @@ const getStyle = (style: SegmentStyleType) => { .ant-segmented-item-selected { border-radius: ${style.radius}; } + &.ant-segmented, .ant-segmented-item-label { + font-family:${style.fontFamily}; + font-style:${style.fontStyle}; + font-size:${style.textSize}; + font-weight:${style.textWeight}; + text-transform:${style.textTransform}; + text-decoration:${style.textDecoration}; + } `; }; diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 1b994c062..e36cd9d9b 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -888,6 +888,7 @@ export const RadioStyle = [ export const SegmentStyle = [ LABEL, + ...STYLING_FIELDS_SEQUENCE.filter((style)=> ['border','borderWidth'].includes(style.name) === false), { name: "indicatorBackground", label: trans("style.indicatorBackground"), @@ -906,10 +907,7 @@ export const SegmentStyle = [ depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, }, - RADIUS, VALIDATE, - MARGIN, - PADDING, ] as const; const LinkTextStyle = [ From f30fdf2deee7a68e1c4fe75ace5ca8492ff202e9 Mon Sep 17 00:00:00 2001 From: Imtanan Aziz Toor Date: Wed, 28 Feb 2024 21:03:37 +0500 Subject: [PATCH 5/6] TS issue fixed --- .../lowcoder/src/comps/controls/styleControlConstants.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index e36cd9d9b..d64daa8ea 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -798,7 +798,7 @@ export const MultiSelectStyle = [ ...ACCENT_VALIDATE, ] as const; -export const TabContainerStyle = [ +export const TabContainerStyle:any[] = [ // Keep background related properties of container as STYLING_FIELDS_SEQUENCE has rest of the properties ...replaceAndMergeMultipleStyles([...ContainerStyle.filter((style)=> ['border','radius','borderWidth','margin','padding'].includes(style.name) === false),...STYLING_FIELDS_SEQUENCE], 'text', [{ name: "tabText", From 6e816675d17b58a8794e1146ce08666850dee5fb Mon Sep 17 00:00:00 2001 From: Imtanan Aziz Toor Date: Wed, 28 Feb 2024 21:14:00 +0500 Subject: [PATCH 6/6] Tab container type removal, due to compiler error --- .../lowcoder/src/comps/controls/styleControlConstants.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index d64daa8ea..e36cd9d9b 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -798,7 +798,7 @@ export const MultiSelectStyle = [ ...ACCENT_VALIDATE, ] as const; -export const TabContainerStyle:any[] = [ +export const TabContainerStyle = [ // Keep background related properties of container as STYLING_FIELDS_SEQUENCE has rest of the properties ...replaceAndMergeMultipleStyles([...ContainerStyle.filter((style)=> ['border','radius','borderWidth','margin','padding'].includes(style.name) === false),...STYLING_FIELDS_SEQUENCE], 'text', [{ name: "tabText",