added hover and active color options in link styles (#585)

Author: raheeliftikhar5

client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx

@@ -24,7 +24,18 @@ import { EditorContext } from "comps/editorState";
 import React, { useContext } from "react";
 
 const Link = styled(Button)<{ $style: LinkStyleType }>`
-  ${(props) => `color: ${props.$style.text}; margin: ${props.$style.margin}; padding: ${props.$style.padding}; font-size: ${props.$style.textSize};`}
+  ${(props) => `
+    color: ${props.$style.text};
+    margin: ${props.$style.margin};
+    padding: ${props.$style.padding};
+    font-size: ${props.$style.textSize};
+    &:hover {
+      color: ${props.$style.hoverText} !important;
+    }
+    &:active {
+      color: ${props.$style.activeText} !important;
+    }
+  `}
   &.ant-btn {
     display: inline-flex;
     align-items: center;

client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeCompBuilder.tsx

@@ -50,6 +50,9 @@ export class ColumnTypeCompBuilder<
   private propertyViewFn?: PropertyViewFnTypeForComp<
     RecordConstructorToComp<NewChildrenCtorMap<ChildrenCtorMap, T>>
   >;
+  private stylePropertyViewFn?: PropertyViewFnTypeForComp<
+    RecordConstructorToComp<NewChildrenCtorMap<ChildrenCtorMap, T>>
+  >;
   private editViewFn?: EditViewFn<T>;
 
   constructor(
@@ -77,6 +80,15 @@ export class ColumnTypeCompBuilder<
     return this;
   }
 
+  setStylePropertyViewFn(
+    stylePropertyViewFn: PropertyViewFnTypeForComp<
+      RecordConstructorToComp<NewChildrenCtorMap<ChildrenCtorMap, T>>
+    >
+  ) {
+    this.stylePropertyViewFn = stylePropertyViewFn;
+    return this;
+  }
+
   build() {
     if (!this.propertyViewFn) {
       throw new Error("need property view fn");

client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinkComp.tsx

@@ -8,13 +8,16 @@ import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
 import { trans } from "i18n";
 import { disabledPropertyView } from "comps/utils/propertyUtils";
 import styled, { css } from "styled-components";
+import { styleControl } from "comps/controls/styleControl";
+import { TableColumnLinkStyle } from "comps/controls/styleControlConstants";
 
 export const ColumnValueTooltip = trans("table.columnValueTooltip");
 
 const childrenMap = {
   text: StringControl,
   onClick: ActionSelectorControlInContext,
   disabled: BoolCodeControl,
+  style: styleControl(TableColumnLinkStyle),
 };
 
 const disableCss = css`
@@ -78,5 +81,10 @@ export const LinkComp = (function () {
         })}
       </>
     ))
+    .setStylePropertyViewFn((children) => (
+      <>
+        {children.style.getPropertyView()}
+      </>
+    ))
     .build();
 })();

client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx

@@ -27,6 +27,8 @@ import { ColorControl } from "comps/controls/colorControl";
 import { JSONValue } from "util/jsonTypes";
 import styled from "styled-components";
 import { TextOverflowControl } from "comps/controls/textOverflowControl";
+import { TableColumnLinkStyle, styleControl } from "@lowcoder-ee/index.sdk";
+import { Divider } from "antd";
 
 export type Render = ReturnType<ConstructorToComp<typeof RenderComp>["getOriginalComp"]>;
 export const RenderComp = withSelectedMultiContext(ColumnTypeComp);
@@ -106,6 +108,9 @@ export const columnChildrenMap = {
   textSize: withDefault(RadiusControl, ""),
   cellColor: CellColorComp,
   textOverflow: withDefault(TextOverflowControl, "ellipsis"),
+  linkColor: withDefault(ColorControl, "#3377ff"),
+  linkHoverColor: withDefault(ColorControl, ""),
+  linkActiveColor: withDefault(ColorControl, ""),
 };
 
 const StyledIcon = styled.span`
@@ -201,15 +206,36 @@ export class ColumnComp extends ColumnInitComp {
         })}
         {this.children.autoWidth.getView() === "fixed" &&
           this.children.width.propertyView({ label: trans("prop.width") })}
+        
+        {(columnType === 'link' || columnType === 'links') && (
+          <>
+            <Divider style={{margin: '12px 0'}} />
+            {controlItem({}, (
+              <div>
+                <b>{"Link Style"}</b>
+              </div>
+            ))}
+            {this.children.linkColor.propertyView({
+              label: trans('text') // trans('style.background'),
+            })}
+            {this.children.linkHoverColor.propertyView({
+              label: "Hover text", // trans('style.background'),
+            })}
+            {this.children.linkActiveColor.propertyView({
+              label: "Active text", // trans('style.background'),
+            })}
+          </>
+        )}
+        <Divider style={{margin: '12px 0'}} />
         {controlItem({}, (
-          <div style={{marginTop: '8px'}}>
-            <b>{"Style"}</b>
+          <div>
+             <b>{"Column Style"}</b>
           </div>
         ))}
         {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({

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<RecordType extends object>(props: CustomTableProps<Reco
   });
   let allColumnFixed = true;
   const columns = props.columns.map((col, index) => {
-    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<RecordType extends object>(props: CustomTableProps<Reco
         rowIndex: rowIndex,
         columnsStyle: props.columnsStyle,
         columnStyle: style,
+        linkStyle,
         tableSize: props.size,
         autoHeight: props.rowAutoHeight,
       }),

client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx

@@ -17,7 +17,7 @@ import { tryToNumber } from "util/convertUtils";
 import { JSONObject, JSONValue } from "util/jsonTypes";
 import { StatusType } from "./column/columnTypeComps/columnStatusComp";
 import { ColumnListComp, tableDataRowExample } from "./column/tableColumnListComp";
-import { TableColumnStyleType } from "comps/controls/styleControlConstants";
+import { TableColumnLinkStyleType, TableColumnStyleType } from "comps/controls/styleControlConstants";
 
 export const COLUMN_CHILDREN_KEY = "children";
 export const OB_ROW_ORI_INDEX = "__ob_origin_index";
@@ -254,6 +254,7 @@ export type CustomColumnType<RecordType> = ColumnType<RecordType> & {
   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) => {

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<typeof SegmentStyle>;
 export type TableStyleType = StyleConfigType<typeof TableStyle>;
 export type TableRowStyleType = StyleConfigType<typeof TableRowStyle>;
 export type TableColumnStyleType = StyleConfigType<typeof TableColumnStyle>;
+export type TableColumnLinkStyleType = StyleConfigType<typeof TableColumnLinkStyle>;
 export type FileStyleType = StyleConfigType<typeof FileStyle>;
 export type FileViewerStyleType = StyleConfigType<typeof FileViewerStyle>;
 export type IframeStyleType = StyleConfigType<typeof IframeStyle>;