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

Commitdb45999

Browse files
Merge pull request#2054 from iamfaran/feat/1837-table-styles
[Feat]:#1837 fix header table styles + add pagination styles
2 parents013cd90 +984eaa5 commitdb45999

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
constshowVerticalScrollbar=compChildren.showVerticalScrollbar.getView();
8282
constvisibleResizables=compChildren.visibleResizables.getView();
8383
constshowHRowGridBorder=compChildren.showHRowGridBorder.getView();
84+
constshowRowGridBorder=compChildren.showRowGridBorder.getView();
8485
constcolumnsStyle=compChildren.columnsStyle.getView();
8586
constsummaryRowStyle=compChildren.summaryRowStyle.getView();
8687
constchangeSet=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
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