Skip to content

Commit c84c902

Browse files
iamfaraniamfaran
committed
add styling structure / refactor styles
1 parent b8c7586 commit c84c902

File tree

7 files changed

+472
-28
lines changed

7 files changed

+472
-28
lines changed

‎client/packages/lowcoder/src/comps/comps/tableLiteComp/styles/TableWrapper.tsx

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import styled from "styled-components";
2+
import {
3+
TableStyleType,
4+
TableHeaderStyleType,
5+
TableRowStyleType,
6+
TableToolbarStyleType,
7+
} from "comps/controls/styleControlConstants";
8+
9+
import { getTableBaseStyles } from "./tableBaseStyles";
10+
import { getTableHeaderStyles } from "./tableHeaderStyles";
11+
import { getTableRowStyles } from "./tableRowStyles";
12+
import { getTableToolbarStyles } from "./tableToolbarStyles";
13+
14+
interface TableWrapperProps {
15+
$style: TableStyleType;
16+
$headerStyle: TableHeaderStyleType;
17+
$rowStyle: TableRowStyleType;
18+
$toolbarStyle: TableToolbarStyleType;
19+
$visibleResizables: boolean;
20+
$showHRowGridBorder?: boolean;
21+
}
22+
23+
export const TableWrapper = styled.div<TableWrapperProps>`
24+
/* Base table styles */
25+
${(props) => getTableBaseStyles(props.$style)}
26+
27+
/* Header styles */
28+
${(props) => getTableHeaderStyles(props.$headerStyle, props.$visibleResizables)}
29+
30+
/* Row styles */
31+
${(props) => getTableRowStyles(props.$rowStyle)}
32+
33+
/* Toolbar styles */
34+
${(props) => getTableToolbarStyles(props.$toolbarStyle)}
35+
36+
/* Additional table specific styles */
37+
${(props) => !props.$showHRowGridBorder && `
38+
.ant-table thead > tr > th,
39+
.ant-table tbody > tr > td {
40+
border-bottom: 0px;
41+
}
42+
`}
43+
`;

‎client/packages/lowcoder/src/comps/comps/tableLiteComp/styles/index.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
// Export the main TableWrapper
2+
export { TableWrapper } from "./TableWrapper";
3+
4+
// Export individual style functions
5+
export { getTableBaseStyles } from "./tableBaseStyles";
6+
export { getTableHeaderStyles } from "./tableHeaderStyles";
7+
export { getTableRowStyles } from "./tableRowStyles";
8+
export { getTableToolbarStyles } from "./tableToolbarStyles";

‎client/packages/lowcoder/src/comps/comps/tableLiteComp/styles/tableBaseStyles.ts

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import { css } from "styled-components";
2+
import { TableStyleType } from "comps/controls/styleControlConstants";
3+
import { PrimaryColor } from "constants/style";
4+
5+
export const getTableBaseStyles = (
6+
style: TableStyleType
7+
) => css`
8+
.ant-table-wrapper {
9+
border-top: unset;
10+
border-color: inherit;
11+
}
12+
13+
.ant-table-row-expand-icon {
14+
color: ${PrimaryColor};
15+
}
16+
17+
.ant-table .ant-table-cell-with-append .ant-table-row-expand-icon {
18+
margin: 0;
19+
top: 18px;
20+
left: 4px;
21+
}
22+
23+
.ant-table.ant-table-small .ant-table-cell-with-append .ant-table-row-expand-icon {
24+
top: 10px;
25+
}
26+
27+
.ant-table.ant-table-middle .ant-table-cell-with-append .ant-table-row-expand-icon {
28+
top: 14px;
29+
margin-right: 5px;
30+
}
31+
32+
.ant-table {
33+
background: ${style.background};
34+
35+
.ant-table-container {
36+
border-left: unset;
37+
border-top: none !important;
38+
border-inline-start: none !important;
39+
40+
&::after {
41+
box-shadow: none !important;
42+
}
43+
44+
.ant-table-content {
45+
overflow: unset !important;
46+
}
47+
48+
.ant-table-tbody .ant-table-wrapper:only-child .ant-table {
49+
margin: 0;
50+
}
51+
52+
table {
53+
border-top: unset;
54+
55+
tbody > tr > td:last-child {
56+
border-right: unset !important;
57+
}
58+
59+
.ant-empty-img-simple-g {
60+
fill: #fff;
61+
}
62+
}
63+
64+
.ant-table-expanded-row-fixed:after {
65+
border-right: unset !important;
66+
}
67+
}
68+
}
69+
`;

‎client/packages/lowcoder/src/comps/comps/tableLiteComp/styles/tableHeaderStyles.ts

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import { css } from "styled-components";
2+
import { darkenColor } from "lowcoder-design";
3+
import { TableHeaderStyleType } from "comps/controls/styleControlConstants";
4+
import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
5+
6+
export const getTableHeaderStyles = (
7+
headerStyle: TableHeaderStyleType,
8+
visibleResizables: boolean
9+
) => css`
10+
.ant-table {
11+
> .ant-table-container {
12+
table {
13+
> .ant-table-thead {
14+
> tr {
15+
background: ${headerStyle.headerBackground};
16+
}
17+
> tr > th {
18+
background: transparent;
19+
border-color: ${headerStyle.border};
20+
border-width: ${headerStyle.borderWidth};
21+
color: ${headerStyle.headerText};
22+
23+
/* Proper styling for fixed header cells */
24+
&.ant-table-cell-fix-left, &.ant-table-cell-fix-right {
25+
z-index: 1;
26+
background: ${headerStyle.headerBackground};
27+
}
28+
29+
> div {
30+
margin: ${headerStyle.margin};
31+
32+
&, .ant-table-column-title > div {
33+
font-size: ${headerStyle.textSize};
34+
font-weight: ${headerStyle.textWeight};
35+
font-family: ${headerStyle.fontFamily};
36+
font-style: ${headerStyle.fontStyle};
37+
color: ${headerStyle.headerText};
38+
}
39+
}
40+
41+
&:last-child {
42+
border-inline-end: none !important;
43+
}
44+
45+
&.ant-table-column-has-sorters:hover {
46+
background-color: ${darkenColor(headerStyle.headerBackground, 0.05)};
47+
}
48+
49+
> .ant-table-column-sorters > .ant-table-column-sorter {
50+
color: ${headerStyle.headerText === defaultTheme.textDark ? "#bfbfbf" : headerStyle.headerText};
51+
}
52+
53+
&::before {
54+
background-color: ${headerStyle.border};
55+
width: ${visibleResizables ? "1px" : "0px"} !important;
56+
}
57+
}
58+
}
59+
60+
> thead > tr > th,
61+
> tbody > tr > td {
62+
border-color: ${headerStyle.border};
63+
}
64+
65+
thead > tr:first-child {
66+
th:last-child {
67+
border-right: unset;
68+
}
69+
}
70+
71+
> thead > tr:first-child {
72+
th:first-child {
73+
border-top-left-radius: 0px;
74+
}
75+
76+
th:last-child {
77+
border-top-right-radius: 0px;
78+
}
79+
}
80+
}
81+
}
82+
}
83+
`;

‎client/packages/lowcoder/src/comps/comps/tableLiteComp/styles/tableRowStyles.ts

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
import { css } from "styled-components";
2+
import { TableRowStyleType } from "comps/controls/styleControlConstants";
3+
import { darkenColor } from "lowcoder-design";
4+
5+
export const getTableRowStyles = (
6+
rowStyle: TableRowStyleType
7+
) => css`
8+
.ant-table {
9+
> .ant-table-container {
10+
.ant-table-body {
11+
background: ${rowStyle.background};
12+
}
13+
14+
.ant-table-tbody {
15+
/* Regular row (odd rows - 1st, 3rd, 5th, etc.) */
16+
> tr:nth-of-type(2n + 1) {
17+
background: ${rowStyle.background};
18+
19+
> td.ant-table-cell {
20+
background: transparent;
21+
border-color: ${rowStyle.border};
22+
border-width: ${rowStyle.borderWidth};
23+
border-style: ${rowStyle.borderStyle};
24+
border-radius: ${rowStyle.radius};
25+
}
26+
}
27+
28+
/* Alternate row (even rows - 2nd, 4th, 6th, etc.) */
29+
> tr:nth-of-type(2n) {
30+
background: ${rowStyle.alternateBackground};
31+
32+
> td.ant-table-cell {
33+
background: transparent;
34+
border-color: ${rowStyle.border};
35+
border-width: ${rowStyle.borderWidth};
36+
border-style: ${rowStyle.borderStyle};
37+
border-radius: ${rowStyle.radius};
38+
}
39+
}
40+
41+
/* Selected row states */
42+
> tr:nth-of-type(2n + 1).ant-table-row-selected {
43+
background: ${rowStyle.selectedRowBackground} !important;
44+
45+
> td.ant-table-cell {
46+
background: transparent !important;
47+
}
48+
49+
&:hover {
50+
background: ${darkenColor(rowStyle.selectedRowBackground, 0.05)} !important;
51+
}
52+
}
53+
54+
> tr:nth-of-type(2n).ant-table-row-selected {
55+
background: ${rowStyle.selectedRowBackground} !important;
56+
57+
> td.ant-table-cell {
58+
background: transparent !important;
59+
}
60+
61+
&:hover {
62+
background: ${darkenColor(rowStyle.selectedRowBackground, 0.05)} !important;
63+
}
64+
}
65+
66+
/* Hover row states for non-selected rows */
67+
> tr:nth-of-type(2n + 1):hover:not(.ant-table-row-selected) {
68+
background: ${rowStyle.hoverRowBackground} !important;
69+
70+
> td.ant-table-cell-row-hover {
71+
background: transparent;
72+
}
73+
}
74+
75+
> tr:nth-of-type(2n):hover:not(.ant-table-row-selected) {
76+
background: ${rowStyle.hoverRowBackground} !important;
77+
78+
> td.ant-table-cell-row-hover {
79+
background: transparent;
80+
}
81+
}
82+
83+
/* Fixed column support for row backgrounds */
84+
tr td.ant-table-cell-fix-left,
85+
tr td.ant-table-cell-fix-right {
86+
z-index: 1;
87+
background: inherit;
88+
transition: background-color 0.3s;
89+
}
90+
91+
/* Selected row fixed columns */
92+
tr.ant-table-row-selected td.ant-table-cell-fix-left,
93+
tr.ant-table-row-selected td.ant-table-cell-fix-right {
94+
background-color: ${rowStyle.selectedRowBackground} !important;
95+
}
96+
97+
/* Hover row fixed columns */
98+
tr:hover:not(.ant-table-row-selected) td.ant-table-cell-fix-left,
99+
tr:hover:not(.ant-table-row-selected) td.ant-table-cell-fix-right {
100+
background-color: ${rowStyle.hoverRowBackground} !important;
101+
}
102+
103+
/* Selected and hovered row fixed columns */
104+
tr.ant-table-row-selected:hover td.ant-table-cell-fix-left,
105+
tr.ant-table-row-selected:hover td.ant-table-cell-fix-right {
106+
background-color: ${darkenColor(rowStyle.selectedRowBackground, 0.05)} !important;
107+
}
108+
}
109+
110+
/* Last cell border removal */
111+
table tbody > tr > td:last-child {
112+
border-right: unset !important;
113+
}
114+
}
115+
}
116+
`;

0 commit comments

Comments
 (0)