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

Commit984eaa5

Browse files
committed
[Feat]:#1837 add pagination styles for table
1 parentdd7fb61 commit984eaa5

File tree

5 files changed

+83
-8
lines changed

5 files changed

+83
-8
lines changed

‎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
exportclassColorControlextendsColorCodeControl{
@@ -134,7 +135,7 @@ function ColorItem(props: {
134135
},[containerRef]);
135136

136137
return(
137-
<ControlPropertyViewWrapperlabel={param.label}labelEllipsis>
138+
<ControlPropertyViewWrapperlabel={param.label}tooltip={param.tooltip}labelEllipsis>
138139
<ColorContainerref={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
readonlyname:string;
1111
readonlylabel:string;
1212
readonlyplatform?:SupportPlatform;// support all if undefined
13+
readonlytooltip?:string;// Tooltip text to show on hover
1314
};
1415

1516
exporttypeSimpleColorConfig=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
]asconst;
17711804

17721805
exportconstTableHeaderStyle=[
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)
[8]ページ先頭
©2009-2025 Movatter.jp