Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit0d4b64d

Browse files
Table: added gradient
1 parent92292c3 commit0d4b64d

File tree

2 files changed

+33
-16
lines changed

2 files changed

+33
-16
lines changed

‎client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx

Lines changed: 32 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import { BackgroundColorContext } from "comps/utils/backgroundColorContext";
2929
import{PrimaryColor}from"constants/style";
3030
import{trans}from"i18n";
3131
import_from"lodash";
32-
import{darkenColor,isDarkColor,ScrollBar}from"lowcoder-design";
32+
import{darkenColor,isDarkColor,isValidColor,ScrollBar}from"lowcoder-design";
3333
importReact,{Children,useCallback,useContext,useEffect,useMemo,useRef,useState}from"react";
3434
import{Resizable}from"react-resizable";
3535
importstyled,{css}from"styled-components";
@@ -52,7 +52,7 @@ import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
5252
exportconstEMPTY_ROW_KEY='empty_row';
5353

5454
functiongenLinerGradient(color:string){
55-
return`linear-gradient(${color},${color})`;
55+
returnisValidColor(color) ?`linear-gradient(${color},${color})` :color;
5656
}
5757

5858
constgetStyle=(
@@ -72,64 +72,77 @@ const getStyle = (
7272
}
7373
.ant-table-tbody {
7474
> tr:nth-of-type(2n + 1) {
75+
background:${genLinerGradient(rowStyle.background)};
7576
&,
7677
> td {
77-
background:${genLinerGradient(rowStyle.background)};
7878
// border-bottom:${rowStyle.borderWidth}${rowStyle.borderStyle}${rowStyle.border} !important;
7979
// border-right:${rowStyle.borderWidth}${rowStyle.borderStyle}${rowStyle.border} !important;
8080
}
8181
}
8282
8383
> tr:nth-of-type(2n) {
84+
background:${alternateBackground};
8485
&,
8586
> td {
86-
background:${alternateBackground};
8787
// border-bottom:${rowStyle.borderWidth}${rowStyle.borderStyle}${rowStyle.border} !important;
8888
// border-right:${rowStyle.borderWidth}${rowStyle.borderStyle}${rowStyle.border} !important;
8989
}
9090
}
9191
9292
// selected row
9393
> tr:nth-of-type(2n + 1).ant-table-row-selected {
94+
background:${selectedRowBackground},${rowStyle.background} !important;
9495
> td {
95-
background:${selectedRowBackground},${rowStyle.background} !important;
9696
}
9797
98-
> td.ant-table-cell-row-hover,
99-
&:hover> td{
98+
//> td.ant-table-cell-row-hover,
99+
&:hover {
100100
background:${hoverRowBackground},${selectedRowBackground},${rowStyle.background} !important;
101101
}
102+
103+
> td {
104+
}
102105
}
103106
104107
> tr:nth-of-type(2n).ant-table-row-selected {
108+
background:${selectedRowBackground},${alternateBackground} !important;
105109
> td {
106-
background:${selectedRowBackground},${alternateBackground} !important;
107110
}
108111
109-
> td.ant-table-cell-row-hover,
110-
&:hover> td{
112+
//> td.ant-table-cell-row-hover,
113+
&:hover {
111114
background:${hoverRowBackground},${selectedRowBackground},${alternateBackground} !important;
112115
}
116+
> td {
117+
}
113118
}
114119
115120
// hover row
121+
> tr:nth-of-type(2n + 1).row-hover {
122+
background:${hoverRowBackground},${rowStyle.background} !important;
123+
}
124+
> tr:nth-of-type(2n).row-hover {
125+
background:${hoverRowBackground},${alternateBackground} !important;
126+
}
116127
> tr:nth-of-type(2n + 1) > td.ant-table-cell-row-hover {
117128
&,
118129
> div:nth-of-type(2) {
119-
background:${hoverRowBackground},${rowStyle.background} !important;
130+
//background:${hoverRowBackground},${rowStyle.background} !important;
120131
}
121132
}
122133
123134
> tr:nth-of-type(2n) > td.ant-table-cell-row-hover {
135+
// background:${hoverRowBackground},${alternateBackground} !important;
124136
&,
125137
> div:nth-of-type(2) {
126-
background:${hoverRowBackground},${alternateBackground} !important;
127138
}
128139
}
129140
130-
> tr.ant-table-expanded-row> td{
141+
> tr.ant-table-expanded-row {
131142
background:${background};
132143
}
144+
> td {
145+
}
133146
}
134147
`;
135148
};
@@ -255,9 +268,11 @@ const TableWrapper = styled.div<{
255268
z-index: 99;
256269
`
257270
}
271+
> tr {
272+
background:${(props)=>props.$headerStyle.headerBackground};
273+
}
258274
> tr > th {
259-
background-color:${(props)=>props.$headerStyle.headerBackground};
260-
275+
background: transparent;
261276
border-color:${(props)=>props.$headerStyle.border};
262277
border-width:${(props)=>props.$headerStyle.borderWidth};
263278
color:${(props)=>props.$headerStyle.headerText};
@@ -606,6 +621,7 @@ function TableCellView(props: {
606621
if(rowContext.hover){
607622
background=genLinerGradient(handleToHoverRow(background))+","+background;
608623
}
624+
609625
tdView=(
610626
<TableTd
611627
{...restProps}
@@ -639,6 +655,7 @@ function TableRowView(props: any) {
639655
<TableRowContext.Providervalue={{hover:hover,selected:selected}}>
640656
<tr
641657
{...props}
658+
className={hover ?'row-hover':''}
642659
tabIndex={-1}
643660
onMouseEnter={()=>setHover(true)}
644661
onMouseLeave={()=>setHover(false)}

‎client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ const getStyle = (
5454
fixedToolbar:boolean,
5555
)=>{
5656
returncss`
57-
background-color:${style.background};
57+
background:${style.background};
5858
// Implement horizontal scrollbar and vertical page number selection is not blocked
5959
padding: 13px 12px;
6060
position: sticky;

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp