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

Commit8d485a2

Browse files
author
FalkWolsky
committed
Table Styles update
1 parent89b1acd commit8d485a2

File tree

4 files changed

+73
-6
lines changed

4 files changed

+73
-6
lines changed

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

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,10 @@ import {
1818
handleToSelectedRow,
1919
TableColumnLinkStyleType,
2020
TableColumnStyleType,
21+
TableHeaderStyleType,
2122
TableRowStyleType,
2223
TableStyleType,
24+
TableToolbarStyleType,
2325
}from"comps/controls/styleControlConstants";
2426
import{CompNameContext,EditorContext}from"comps/editorState";
2527
import{BackgroundColorContext}from"comps/utils/backgroundColorContext";
@@ -56,6 +58,8 @@ function genLinerGradient(color: string) {
5658
constgetStyle=(
5759
style:TableStyleType,
5860
rowStyle:TableRowStyleType,
61+
headerStyle:TableHeaderStyleType,
62+
toolbarStyle:TableToolbarStyleType
5963
)=>{
6064
constbackground=genLinerGradient(style.background);
6165
constselectedRowBackground=genLinerGradient(rowStyle.selectedRowBackground);
@@ -128,6 +132,8 @@ const getStyle = (
128132

129133
constTableWrapper=styled.div<{
130134
$style:TableStyleType;
135+
$headerStyle:TableHeaderStyleType;
136+
$toolbarStyle:TableToolbarStyleType;
131137
$rowStyle:TableRowStyleType;
132138
$toolbarPosition:"above"|"below"|"close";
133139
$fixedHeader:boolean;
@@ -136,7 +142,7 @@ const TableWrapper = styled.div<{
136142
max-height: 100%;
137143
overflow-y: auto;
138144
background: white;
139-
border:${(props)=>`1px solid${props.$style.border}`};
145+
border:${(props)=>`${props.$style.borderWidth} solid${props.$style.border}`};
140146
border-radius:${(props)=>props.$style.radius};
141147
142148
.ant-table-wrapper {
@@ -187,10 +193,12 @@ const TableWrapper = styled.div<{
187193
188194
> .ant-table-thead {
189195
> tr > th {
190-
background-color:${(props)=>props.$style.headerBackground};
196+
background-color:${(props)=>props.$headerStyle.headerBackground};
191197
border-color:${(props)=>props.$style.border};
198+
border-width:${(props)=>props.$headerStyle.borderWidth};
192199
color:${(props)=>props.$style.headerText};
193-
border-inline-end:${(props)=>`1px solid${props.$style.border}`} !important;
200+
font-size:${(props)=>props.$headerStyle.textSize};
201+
border-inline-end:${(props)=>`${props.$headerStyle.borderWidth} solid${props.$style.border}`} !important;
194202
${(props)=>
195203
props.$fixedHeader&&`
196204
position: sticky;
@@ -267,7 +275,7 @@ const TableWrapper = styled.div<{
267275
}
268276
269277
${(props)=>
270-
props.$style&&getStyle(props.$style,props.$rowStyle)}
278+
props.$style&&getStyle(props.$style,props.$rowStyle,props.$headerStyle,props.$toolbarStyle)}
271279
`;
272280

273281
constTableTh=styled.th<{width?:number}>`
@@ -641,6 +649,8 @@ export function TableCompView(props: {
641649
constcompChildren=comp.children;
642650
conststyle=compChildren.style.getView();
643651
constrowStyle=compChildren.rowStyle.getView();
652+
constheaderStyle=compChildren.headerStyle.getView();
653+
consttoolbarStyle=compChildren.toolbarStyle.getView();
644654
constrowAutoHeight=compChildren.rowAutoHeight.getView();
645655
constcolumnsStyle=compChildren.columnsStyle.getView();
646656
constchangeSet=useMemo(()=>compChildren.columns.getChangeSet(),[compChildren.columns]);
@@ -753,6 +763,8 @@ export function TableCompView(props: {
753763
<TableWrapper
754764
$style={style}
755765
$rowStyle={rowStyle}
766+
$headerStyle={headerStyle}
767+
$toolbarStyle={toolbarStyle}
756768
$toolbarPosition={toolbar.position}
757769
$fixedHeader={compChildren.fixedHeader.getView()}
758770
$fixedToolbar={toolbar.fixedToolbar&&toolbar.position==='above'}

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -507,10 +507,17 @@ export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType>
507507

508508
{["layout","both"].includes(editorModeStatus)&&(
509509
<><Sectionname={"Table Style"}>
510-
{comp.children.style.getPropertyView()}
510+
{comp.children.style.getPropertyView()}
511+
</Section>
512+
<Sectionname={"Header Style"}>
513+
{comp.children.headerStyle.getPropertyView()}
514+
</Section>
515+
<Sectionname={"Toolbar Style"}>
516+
{comp.children.toolbarStyle.getPropertyView()}
511517
</Section>
512518
<Sectionname={"Row Style"}>
513519
{comp.children.rowStyle.getPropertyView()}
520+
514521
{comp.children.rowAutoHeight.getPropertyView()}
515522
{comp.children.rowHeight.getPropertyView()}
516523
{comp.children.rowColor.getPropertyView()}

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
import{dropdownControl}from"comps/controls/dropdownControl";
1414
import{eventHandlerControl}from"comps/controls/eventHandlerControl";
1515
import{styleControl}from"comps/controls/styleControl";
16-
import{TableColumnStyle,TableRowStyle,TableStyle}from"comps/controls/styleControlConstants";
16+
import{TableColumnStyle,TableRowStyle,TableStyle,TableToolbarStyle,TableHeaderStyle}from"comps/controls/styleControlConstants";
1717
import{
1818
MultiCompBuilder,
1919
stateComp,
@@ -184,6 +184,8 @@ const tableChildrenMap = {
184184
toolbar:TableToolbarComp,
185185
style:styleControl(TableStyle),
186186
rowStyle:styleControl(TableRowStyle),
187+
toolbarStyle:styleControl(TableToolbarStyle),
188+
headerStyle:styleControl(TableHeaderStyle),
187189
searchText:StringControl,
188190
columnsStyle:withDefault(styleControl(TableColumnStyle),{borderWidth:'1px',radius:'0px'}),
189191
viewModeResizable:BoolControl,

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

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -684,6 +684,11 @@ const LinkTextStyle = [
684684

685685
exportconstTableStyle=[
686686
...BG_STATIC_BORDER_RADIUS,
687+
{
688+
name:"borderWidth",
689+
label:trans("style.borderWidth"),
690+
borderWidth:"borderWidth",
691+
},
687692
{
688693
name:"headerBackground",
689694
label:trans("style.tableHeaderBackground"),
@@ -713,6 +718,45 @@ export const TableStyle = [
713718
},
714719
]asconst;
715720

721+
exportconstTableToolbarStyle=[
722+
{
723+
name:"toolbarBackground",
724+
label:trans("style.toolbarBackground"),
725+
depName:"background",
726+
depType:DEP_TYPE.SELF,
727+
transformer:toSelf,
728+
},
729+
{
730+
name:"toolbarText",
731+
label:trans("style.toolbarText"),
732+
depName:"toolbarBackground",
733+
depType:DEP_TYPE.CONTRAST_TEXT,
734+
transformer:contrastText,
735+
},
736+
]asconst;
737+
738+
exportconstTableHeaderStyle=[
739+
{
740+
name:"borderWidth",
741+
label:trans("style.borderWidth"),
742+
borderWidth:"borderWidth",
743+
},
744+
{
745+
name:"headerBackground",
746+
label:trans("style.tableHeaderBackground"),
747+
depName:"background",
748+
transformer:handleToHeadBg,
749+
},
750+
{
751+
name:"headerText",
752+
label:trans("style.tableHeaderText"),
753+
depName:"headerBackground",
754+
depType:DEP_TYPE.CONTRAST_TEXT,
755+
transformer:contrastText,
756+
},
757+
TEXT_SIZE,
758+
]asconst;
759+
716760
exportconstTableRowStyle=[
717761
getBackground(),
718762
{
@@ -1073,6 +1117,8 @@ export type CheckboxStyleType = StyleConfigType<typeof CheckboxStyle>;
10731117
exporttypeRadioStyleType=StyleConfigType<typeofRadioStyle>;
10741118
exporttypeSegmentStyleType=StyleConfigType<typeofSegmentStyle>;
10751119
exporttypeTableStyleType=StyleConfigType<typeofTableStyle>;
1120+
exporttypeTableHeaderStyleType=StyleConfigType<typeofTableHeaderStyle>;
1121+
exporttypeTableToolbarStyleType=StyleConfigType<typeofTableToolbarStyle>;
10761122
exporttypeTableRowStyleType=StyleConfigType<typeofTableRowStyle>;
10771123
exporttypeTableColumnStyleType=StyleConfigType<typeofTableColumnStyle>;
10781124
exporttypeTableColumnLinkStyleType=StyleConfigType<typeofTableColumnLinkStyle>;

0 commit comments

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