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

Commit db45999

Browse files
Merge pull request #2054 from iamfaran/feat/1837-table-styles
[Feat]: #1837 fix header table styles + add pagination styles
2 parents 013cd90 + 984eaa5 commit db45999

File tree

7 files changed

+90
-9
lines changed

7 files changed

+90
-9
lines changed

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@ export const TableCompView = React.memo((props: {
8181
const showVerticalScrollbar = compChildren.showVerticalScrollbar.getView();
8282
const visibleResizables = compChildren.visibleResizables.getView();
8383
const showHRowGridBorder = compChildren.showHRowGridBorder.getView();
84+
const showRowGridBorder = compChildren.showRowGridBorder.getView();
8485
const columnsStyle = compChildren.columnsStyle.getView();
8586
const summaryRowStyle = compChildren.summaryRowStyle.getView();
8687
const changeSet = useMemo(() => compChildren.columns.getChangeSet(), [compChildren.columns]);
@@ -373,6 +374,7 @@ export const TableCompView = React.memo((props: {
373374
$fixedToolbar={toolbar.fixedToolbar && toolbar.position === 'above'}
374375
$visibleResizables={visibleResizables}
375376
$showHRowGridBorder={showHRowGridBorder}
377+
$showRowGridBorder={showRowGridBorder}
376378
$isVirtual={scrollConfig.virtual}
377379
$showHorizontalScrollbar={showHorizontalScrollbar}
378380
$showVerticalScrollbar={showVerticalScrollbar}

‎client/packages/lowcoder/src/comps/comps/tableComp/tableStyles.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,7 @@ export const TableWrapper = styled.div.attrs<{
138138
$fixedToolbar: boolean;
139139
$visibleResizables: boolean;
140140
$showHRowGridBorder?: boolean;
141+
$showRowGridBorder?: boolean;
141142
$isVirtual?: boolean;
142143
$showHorizontalScrollbar?: boolean;
143144
$showVerticalScrollbar?: boolean;
@@ -207,7 +208,10 @@ export const TableWrapper = styled.div.attrs<{
207208
border-color: ${(props) => props.$headerStyle.border};
208209
border-width: ${(props) => props.$headerStyle.borderWidth};
209210
color: ${(props) => props.$headerStyle.headerText};
210-
// border-inline-end: ${(props) => `${props.$headerStyle.borderWidth} solid ${props.$headerStyle.border}`} !important;
211+
${(props) => props.$showRowGridBorder
212+
? `border-inline-end: ${props.$headerStyle.borderWidth} solid ${props.$headerStyle.border} !important;`
213+
: `border-inline-end: none !important;`
214+
}
211215
212216
/* Proper styling for fixed header cells */
213217
&.ant-table-cell-fix-left, &.ant-table-cell-fix-right {

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

Lines changed: 38 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ const getStyle = (
6161
// Implement horizontal scrollbar and vertical page number selection is not blocked
6262
padding: 13px 12px;
6363
position: sticky;
64-
postion: -webkit-sticky;
64+
position: -webkit-sticky;
6565
left: 0px !important;
6666
margin: ${style.margin} !important;
6767
z-index: 999;
@@ -116,7 +116,7 @@ const getStyle = (
116116
.ant-pagination-prev,
117117
.ant-pagination-next {
118118
path {
119-
${style.toolbarText !== defaultTheme.textDark ? `fill: ${style.toolbarText}` : null};
119+
${style.paginationText||style.toolbarText !== defaultTheme.textDark ? `fill: ${style.paginationText||style.toolbarText}` : null};
120120
}
121121
122122
svg:hover {
@@ -127,32 +127,65 @@ const getStyle = (
127127
}
128128
129129
.ant-pagination {
130-
color: ${style.toolbarText};
130+
color: ${style.paginationText || style.toolbarText};
131+
}
132+
133+
// number items
134+
.ant-pagination-item {
135+
background: ${style.paginationBackground || 'transparent'};
136+
border-color: ${style.border || 'transparent'};
137+
a {
138+
color: ${style.paginationText || style.toolbarText};
139+
}
140+
&:hover a {
141+
color: ${theme?.primary};
142+
}
131143
}
132144
133145
.ant-pagination-item-active {
146+
background: ${style.paginationActiveBackground || style.paginationBackground || 'transparent'};
134147
border-color: ${style.border || theme?.primary};
135148
136149
a {
137-
color: ${theme?.textDark};
150+
color: ${style.paginationActiveText||theme?.textDark};
138151
}
139152
}
140153
141154
.ant-pagination-item:not(.ant-pagination-item-active) a {
142-
color: ${style.toolbarText};
155+
color: ${style.paginationText||style.toolbarText};
143156
144157
&:hover {
145158
color: ${theme?.primary};
146159
}
147160
}
148161
162+
// size changer select
163+
.ant-pagination-options {
164+
.ant-select-selector {
165+
background: ${style.paginationBackground || 'transparent'};
166+
color: ${style.paginationText || style.toolbarText};
167+
border-color: ${style.border || theme?.primary};
168+
}
169+
.ant-select-selection-item {
170+
color: ${style.paginationText || style.toolbarText};
171+
}
172+
.ant-select-arrow {
173+
color: ${style.paginationText || style.toolbarText};
174+
}
175+
}
176+
149177
.ant-select:not(.ant-select-disabled):hover .ant-select-selector,
150178
.ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input)
151179
.ant-select-selector,
152180
.ant-pagination-options-quick-jumper input:hover,
153181
.ant-pagination-options-quick-jumper input:focus {
154182
border-color: ${style.border || theme?.primary};
155183
}
184+
185+
.ant-pagination-options-quick-jumper input {
186+
background: ${style.paginationBackground || 'transparent'};
187+
color: ${style.paginationText || style.toolbarText};
188+
}
156189
`;
157190
};
158191

‎client/packages/lowcoder/src/comps/controls/colorControl.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ type PropertyViewParam = {
7474
// auto-generated message?
7575
depMsg?: string;
7676
allowGradient?: boolean;
77+
tooltip?: React.ReactNode;
7778
};
7879

7980
export class ColorControl extends ColorCodeControl {
@@ -134,7 +135,7 @@ function ColorItem(props: {
134135
}, [containerRef]);
135136

136137
return (
137-
<ControlPropertyViewWrapper label={param.label} labelEllipsis>
138+
<ControlPropertyViewWrapper label={param.label} tooltip={param.tooltip}labelEllipsis>
138139
<ColorContainer ref={containerRef}>
139140
<ColorSelect
140141
dispatch={controlThis.dispatch}

‎client/packages/lowcoder/src/comps/controls/styleControl.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1903,6 +1903,7 @@ export function styleControl<T extends readonly SingleColorConfig[]>(
19031903
depMsg:
19041904
depMsg,
19051905
allowGradient: config.name.includes('background'),
1906+
tooltip: config.tooltip || getTooltip(name),
19061907
})}
19071908
</div>
19081909
);

‎client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx‎

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ type CommonColorConfig = {
1010
readonly name: string;
1111
readonly label: string;
1212
readonly platform?: SupportPlatform; // support all if undefined
13+
readonly tooltip?: string; // Tooltip text to show on hover
1314
};
1415

1516
export type SimpleColorConfig = CommonColorConfig & {
@@ -1767,14 +1768,45 @@ export const TableToolbarStyle = [
17671768
depType: DEP_TYPE.CONTRAST_TEXT,
17681769
transformer: toSelf,
17691770
},
1771+
// Pagination specific styling
1772+
{
1773+
name: "paginationBackground",
1774+
label: trans("style.paginationBackground"),
1775+
tooltip: trans("style.paginationBackgroundTooltip"),
1776+
depName: "background",
1777+
depType: DEP_TYPE.SELF,
1778+
transformer: toSelf,
1779+
},
1780+
{
1781+
name: "paginationText",
1782+
label: trans("style.paginationText"),
1783+
tooltip: trans("style.paginationTextTooltip"),
1784+
depName: "paginationBackground",
1785+
depType: DEP_TYPE.CONTRAST_TEXT,
1786+
transformer: contrastText,
1787+
},
1788+
{
1789+
name: "paginationActiveBackground",
1790+
label: trans("style.paginationActiveBackground"),
1791+
tooltip: trans("style.paginationActiveBackgroundTooltip"),
1792+
depName: "paginationBackground",
1793+
transformer: contrastBackground,
1794+
},
1795+
{
1796+
name: "paginationActiveText",
1797+
label: trans("style.paginationActiveText"),
1798+
tooltip: trans("style.paginationActiveTextTooltip"),
1799+
depName: "paginationActiveBackground",
1800+
depType: DEP_TYPE.CONTRAST_TEXT,
1801+
transformer: contrastText,
1802+
},
17701803
] as const;
17711804

17721805
export const TableHeaderStyle = [
17731806
MARGIN,
17741807
PADDING,
17751808
FONT_FAMILY,
17761809
FONT_STYLE,
1777-
TEXT,
17781810
// getStaticBackground(SURFACE_COLOR),
17791811
// getBackground("primarySurface"),
17801812
{

‎client/packages/lowcoder/src/i18n/locales/en.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -669,7 +669,15 @@ export const en = {
669669
"headerBackgroundImageOriginTip": "Specifies the positioning area of the header's background image. Example: padding-box, border-box, content-box.",
670670
"footerBackgroundImageOriginTip": "Specifies the positioning area of the footer's background image. Example: padding-box, border-box, content-box.",
671671
"rotationTip": "Specifies the rotation angle of the element. Example: 45deg, 90deg, -180deg.",
672-
"lineHeightTip": "Sets the height of a line of text. Example: 1.5, 2, 120%."
672+
"lineHeightTip": "Sets the height of a line of text. Example: 1.5, 2, 120%.",
673+
"paginationBackground": "Pagination Background",
674+
"paginationBackgroundTooltip": "Background color for pagination controls",
675+
"paginationText": "Pagination Text",
676+
"paginationTextTooltip": "Text color for pagination numbers and controls",
677+
"paginationActiveBackground": "Pagination Active Background",
678+
"paginationActiveBackgroundTooltip": "Background color for the active/selected page number",
679+
"paginationActiveText": "Pagination Active Text",
680+
"paginationActiveTextTooltip": "Text color for the active/selected page number",
673681
},
674682
"export": {
675683
"hiddenDesc": "If true, the component is hidden",

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /