From 8ee130662bffbf4f66585212c38abbcd4dc5d9d2 Mon Sep 17 00:00:00 2001 From: FalkWolsky Date: Sun, 14 Jan 2024 17:44:29 +0100 Subject: [PATCH 01/16] adapted Chinese language file --- client/packages/lowcoder/src/i18n/locales/zh.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/client/packages/lowcoder/src/i18n/locales/zh.ts b/client/packages/lowcoder/src/i18n/locales/zh.ts index 9d80b50d3..44e245746 100644 --- a/client/packages/lowcoder/src/i18n/locales/zh.ts +++ b/client/packages/lowcoder/src/i18n/locales/zh.ts @@ -137,7 +137,7 @@ prop: { expand: "展开", columns: "列", rowSelection: "行选择", - toolbar: "工具栏", + toolbar: "工具栏", pagination: "分页", logo: "标志", style: "样式", @@ -1157,8 +1157,10 @@ table: { columnNum: "列数", viewModeResizable: "用户调整列宽", viewModeResizableTooltip: "是否允许调整列宽.", - "visibleResizables": "Show Resize Handles", - "visibleResizablesTooltip": "Display visible Resize Handles in the Table Header.", + "visibleResizables": "显示调整大小句柄", + "visibleResizablesTooltip": "在表头显示可见的调整大小句柄", + showVerticalRowGridBorder: "显示垂直行网格边框", + showHorizontalRowGridBorder: "显示水平行网格边框", showFilter: "显示筛选按钮", showRefresh: "显示刷新按钮", showDownload: "显示下载按钮", @@ -1244,6 +1246,8 @@ table: { hideHeader: "隐藏表头", fixedHeader: "固定表头", fixedHeaderTooltip: "垂直滚动表格的标题将被固定", + fixedToolbar: "固定工具栏", + fixedToolbarTooltip: "工具栏将根据位置固定在可垂直滚动的表格上", hideBordered: "隐藏列边框", "showHeaderGridBorder": "显示标题网格边框", "showRowGridBorder": "显示行网格边框", From 067ded9dfee63c21cf276f5644aabbadeecbcea0 Mon Sep 17 00:00:00 2001 From: FalkWolsky Date: Sun, 14 Jan 2024 18:33:02 +0100 Subject: [PATCH 02/16] Style Icons --- .../src/components/colorSelect/index.tsx | 2 +- .../lowcoder/src/components/ColorPicker.tsx | 4 +- .../src/comps/controls/styleControl.tsx | 37 ++++++++++--------- 3 files changed, 22 insertions(+), 21 deletions(-) diff --git a/client/packages/lowcoder-design/src/components/colorSelect/index.tsx b/client/packages/lowcoder-design/src/components/colorSelect/index.tsx index 8e4415676..a27733419 100644 --- a/client/packages/lowcoder-design/src/components/colorSelect/index.tsx +++ b/client/packages/lowcoder-design/src/components/colorSelect/index.tsx @@ -178,4 +178,4 @@ const ColorBlock = styled.div<{ $color: string }>` cursor: pointer; background-clip: content-box; overflow: hidden; -`; +`; \ No newline at end of file diff --git a/client/packages/lowcoder/src/components/ColorPicker.tsx b/client/packages/lowcoder/src/components/ColorPicker.tsx index a64765738..603776420 100644 --- a/client/packages/lowcoder/src/components/ColorPicker.tsx +++ b/client/packages/lowcoder/src/components/ColorPicker.tsx @@ -197,7 +197,7 @@ export default function ColorPicker(props: ColorConfigProps) { )} {colorKey === "margin" && (
- +
@@ -215,7 +215,7 @@ export default function ColorPicker(props: ColorConfigProps) { )} {colorKey === "padding" && (
- +
diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx index a91429492..701f25d5d 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControl.tsx @@ -13,6 +13,8 @@ import { ExpandIcon, CompressIcon, TextSizeIcon, + PencilIcon, + ShowBorderIcon, } from "lowcoder-design"; import { useContext } from "react"; import styled from "styled-components"; @@ -250,19 +252,11 @@ const StyleContent = styled.div` } `; -const RadiusIcon = styled(IconRadius)` - margin: 0 8px 0 -2px; -`; - -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 -2px; -`; +const RadiusIcon = styled(IconRadius)` margin: 0 8px 0 -2px;`; +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 ResetIcon = styled(IconReset)` &:hover g g { stroke: #315efb; @@ -366,22 +360,29 @@ export function styleControl(colorConfig { filterText: config.label },
{(name === "radius" || - name === "borderWidth" || name === "gap" || name === "cardRadius") ? ( children[name] as InstanceType ).propertyView({ label: config.label, - preInputNode: , + preInputNode: , placeholder: props[name], - }) + }) + : name === "borderWidth" + ? ( + children[name] as InstanceType + ).propertyView({ + label: config.label, + preInputNode: , + placeholder: props[name], + }) : name === "margin" ? ( children[name] as InstanceType ).propertyView({ label: config.label, - preInputNode: , + preInputNode: , placeholder: props[name], }) : (name === "padding" || @@ -392,7 +393,7 @@ export function styleControl(colorConfig children[name] as InstanceType ).propertyView({ label: config.label, - preInputNode: , + preInputNode: , placeholder: props[name], }) : name === "textSize" From e1e8b3b825b55bb30efe519dba38d6eb9dabcffe Mon Sep 17 00:00:00 2001 From: FalkWolsky Date: Sun, 14 Jan 2024 21:56:58 +0100 Subject: [PATCH 03/16] Button Hover fix, Text Weight --- .../comps/buttonComp/buttonCompConstants.tsx | 19 ++++++++--- .../src/comps/controls/styleControl.tsx | 34 +++++++++++++++++-- .../comps/controls/styleControlConstants.tsx | 25 ++++++++++++-- .../packages/lowcoder/src/i18n/locales/en.ts | 3 +- .../packages/lowcoder/src/i18n/locales/zh.ts | 1 + 5 files changed, 70 insertions(+), 12 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx index 86fa9cb2f..79167b4e9 100644 --- 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 index 701f25d5d..4eff65357 100644 --- 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>( 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>( // 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(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(colorConfig children[name] as InstanceType ).propertyView({ label: config.label, - preInputNode: , + preInputNode: , placeholder: props[name], }) + : name === "textWeight" + ? ( + children[name] as InstanceType + ).propertyView({ + label: config.label, + preInputNode: , + 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 index cd39479fe..00148b45e 100644 --- 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 index c4f32115a..e2fecc802 100644 --- 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 index 44e245746..57c7f9a79 100644 --- 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,则隐藏组件", From 6e1ba9098aa908fc1f97bf4df62073bf714aa819 Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Mon, 15 Jan 2024 16:05:15 +0500 Subject: [PATCH 04/16] fix for color picker to show selected color --- .../lowcoder-design/src/components/colorSelect/index.tsx | 3 +-- .../packages/lowcoder/src/comps/queries/resourceDropdown.tsx | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/client/packages/lowcoder-design/src/components/colorSelect/index.tsx b/client/packages/lowcoder-design/src/components/colorSelect/index.tsx index 8e4415676..dec5f83cb 100644 --- a/client/packages/lowcoder-design/src/components/colorSelect/index.tsx +++ b/client/packages/lowcoder-design/src/components/colorSelect/index.tsx @@ -31,7 +31,6 @@ export const ColorSelect = (props: ColorSelectProps) => { }, 200), [dispatch] ); - return ( ((props: { $color: string }) `; // main block const ColorBlock = styled.div<{ $color: string }>` - background-color: ${(props) => (isValidColor(props.$color) ? props.color : "#FFFFFF")}; + background-color: ${(props) => (isValidColor(props.$color) ? props.$color : "#FFFFFF")}; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 4px; height: 24px; diff --git a/client/packages/lowcoder/src/comps/queries/resourceDropdown.tsx b/client/packages/lowcoder/src/comps/queries/resourceDropdown.tsx index 037b50f49..8c2acca21 100644 --- a/client/packages/lowcoder/src/comps/queries/resourceDropdown.tsx +++ b/client/packages/lowcoder/src/comps/queries/resourceDropdown.tsx @@ -39,7 +39,7 @@ const SelectOptionContains = styled.div` align-items: center; width: 99%; `; -const SelectOption = styled((props: OptionProps) =>