From 575ea4f0f42cf5f182c284714c19230a1ce2985a Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Fri, 15 Dec 2023 19:59:56 +0500 Subject: [PATCH] added hover and active color options in link styles --- .../src/comps/comps/buttonComp/linkComp.tsx | 13 +++++- .../column/columnTypeCompBuilder.tsx | 12 ++++++ .../column/columnTypeComps/columnLinkComp.tsx | 8 ++++ .../tableComp/column/tableColumnComp.tsx | 32 ++++++++++++-- .../comps/comps/tableComp/tableCompView.tsx | 18 ++++++-- .../src/comps/comps/tableComp/tableUtils.tsx | 8 +++- .../comps/controls/styleControlConstants.tsx | 43 ++++++++++++++++--- 7 files changed, 118 insertions(+), 16 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx index 2fe5c8820..d9dceec3b 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx +++ b/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; diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeCompBuilder.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeCompBuilder.tsx index 6edda2acb..98d570378 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeCompBuilder.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeCompBuilder.tsx @@ -50,6 +50,9 @@ export class ColumnTypeCompBuilder< private propertyViewFn?: PropertyViewFnTypeForComp< RecordConstructorToComp> >; + private stylePropertyViewFn?: PropertyViewFnTypeForComp< + RecordConstructorToComp> + >; private editViewFn?: EditViewFn; constructor( @@ -77,6 +80,15 @@ export class ColumnTypeCompBuilder< return this; } + setStylePropertyViewFn( + stylePropertyViewFn: PropertyViewFnTypeForComp< + RecordConstructorToComp> + > + ) { + this.stylePropertyViewFn = stylePropertyViewFn; + return this; + } + build() { if (!this.propertyViewFn) { throw new Error("need property view fn"); diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinkComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinkComp.tsx index 64c12d91e..b7edaa593 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinkComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinkComp.tsx @@ -8,6 +8,8 @@ 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"); @@ -15,6 +17,7 @@ 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(); })(); diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx index 9587f1dba..7c462d8ee 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx +++ b/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["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') && ( + <> + + {controlItem({}, ( +
+ {"Link Style"} +
+ ))} + {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'), + })} + + )} + {controlItem({}, ( -
- {"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 IframeStyleType = StyleConfigType;