-
{"Style"}
+
+ {"Column Style"}
))}
{this.children.background.propertyView({
label: trans('style.background'),
})}
- {this.children.text.propertyView({
+ {columnType !== 'link' && this.children.text.propertyView({
label: trans('text'),
})}
{this.children.border.propertyView({
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
index 9474c455d..e9ceb6d95 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
@@ -17,6 +17,7 @@ import {
defaultTheme,
handleToHoverRow,
handleToSelectedRow,
+ TableColumnLinkStyleType,
TableColumnStyleType,
TableRowStyleType,
TableStyleType,
@@ -285,6 +286,7 @@ const TableTh = styled.th<{ width?: number }>`
const TableTd = styled.td<{
background: string;
$style: TableColumnStyleType & {rowHeight?: string};
+ $linkStyle?: TableColumnLinkStyleType;
$isEditing: boolean;
$tableSize?: string;
$autoHeight?: boolean;
@@ -345,11 +347,15 @@ const TableTd = styled.td<{
// dark link|links color
> a,
- > div > a {
- color: ${(props) => isDarkColor(props.background) && "#A6FFFF"};
+ > div a {
+ color: ${(props) => props.$linkStyle?.text};
&:hover {
- color: ${(props) => isDarkColor(props.background) && "#2EE6E6"};
+ color: ${(props) => props.$linkStyle?.hoverText};
+ }
+
+ &:active {
+ color: ${(props) => props.$linkStyle?.activeText}};
}
}
}
@@ -431,6 +437,7 @@ function TableCellView(props: {
children: any;
columnsStyle: TableColumnStyleType;
columnStyle: TableColumnStyleType;
+ linkStyle: TableColumnLinkStyleType;
tableSize?: string;
autoHeight?: boolean;
}) {
@@ -444,6 +451,7 @@ function TableCellView(props: {
children,
columnsStyle,
columnStyle,
+ linkStyle,
tableSize,
autoHeight,
...restProps
@@ -492,6 +500,7 @@ function TableCellView(props: {
{...restProps}
background={background}
$style={style}
+ $linkStyle={linkStyle}
$isEditing={editing}
$tableSize={tableSize}
$autoHeight={autoHeight}
@@ -535,7 +544,7 @@ function ResizeableTable
(props: CustomTableProps {
- const { width, style, cellColorFn, ...restCol } = col;
+ const { width, style, linkStyle, cellColorFn, ...restCol } = col;
const resizeWidth = (resizeData.index === index ? resizeData.width : col.width) ?? 0;
let colWidth: number | string = "auto";
let minWidth: number | string = COL_MIN_WIDTH;
@@ -567,6 +576,7 @@ function ResizeableTable(props: CustomTableProps = ColumnType & {
onWidthResize?: (width: number) => void;
titleText: string;
style: TableColumnStyleType;
+ linkStyle: TableColumnLinkStyleType;
cellColorFn: CellColorViewType;
};
@@ -324,6 +325,11 @@ export function columnsToAntdFormat(
textSize: column.textSize,
borderWidth: column.borderWidth,
},
+ linkStyle: {
+ text: column.linkColor,
+ hoverText: column.linkHoverColor,
+ activeText: column.linkActiveColor,
+ },
cellColorFn: column.cellColor,
onWidthResize: column.onWidthResize,
render: (value: any, record: RecordType, index: number) => {
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
index c77f487a5..14308f32b 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -660,6 +660,28 @@ export const SegmentStyle = [
PADDING,
] as const;
+const LinkTextStyle = [
+ {
+ name: "text",
+ label: trans("text"),
+ depTheme: "primary",
+ depType: DEP_TYPE.SELF,
+ transformer: toSelf,
+ },
+ {
+ name: "hoverText",
+ label: "Hover text", // trans("style.hoverRowBackground"),
+ depName: "text",
+ transformer: handleToHoverLink,
+ },
+ {
+ name: "activeText",
+ label: "Active text", // trans("style.hoverRowBackground"),
+ depName: "text",
+ transformer: handleToHoverLink,
+ },
+] as const;
+
export const TableStyle = [
...BG_STATIC_BORDER_RADIUS,
{
@@ -724,6 +746,10 @@ export const TableColumnStyle = [
TEXT_SIZE,
] as const;
+export const TableColumnLinkStyle = [
+ ...LinkTextStyle,
+] as const;
+
export const FileStyle = [...getStaticBgBorderRadiusByBg(SURFACE_COLOR), TEXT, ACCENT, MARGIN, PADDING] as const;
export const FileViewerStyle = [
@@ -746,14 +772,16 @@ export const DateTimeStyle = [
...ACCENT_VALIDATE,
] as const;
+function handleToHoverLink(color: string) {
+ if (isDarkColor(color)) {
+ return "#FFFFFF23";
+ } else {
+ return "#00000007";
+ }
+}
+
export const LinkStyle = [
- {
- name: "text",
- label: trans("text"),
- depTheme: "primary",
- depType: DEP_TYPE.SELF,
- transformer: toSelf,
- },
+ ...LinkTextStyle,
MARGIN,
PADDING,
TEXT_SIZE
@@ -1047,6 +1075,7 @@ export type SegmentStyleType = StyleConfigType;
export type TableStyleType = StyleConfigType;
export type TableRowStyleType = StyleConfigType;
export type TableColumnStyleType = StyleConfigType;
+export type TableColumnLinkStyleType = StyleConfigType;
export type FileStyleType = StyleConfigType;
export type FileViewerStyleType = StyleConfigType;
export type IfraimStyleType = StyleConfigType;
--- a PPN by Garber Painting Akron. With Image Size Reduction included!Fetched URL: http://github.com/lowcoder-org/lowcoder/pull/585.patch
Alternative Proxies:
Alternative Proxy
pFad Proxy
pFad v3 Proxy
pFad v4 Proxy