Skip to content

Commit 683c87e

Browse files
author
FalkWolsky
committed
Margins, Header, Borders 2
1 parent 4d6f8da commit 683c87e

File tree

7 files changed

+122
-90
lines changed

7 files changed

+122
-90
lines changed

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

Lines changed: 105 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import {
2121
TableHeaderStyleType,
2222
TableRowStyleType,
2323
TableStyleType,
24+
ThemeDetail,
2425
TableToolbarStyleType,
2526
} from "comps/controls/styleControlConstants";
2627
import { CompNameContext, EditorContext } from "comps/editorState";
@@ -29,7 +30,7 @@ import { PrimaryColor } from "constants/style";
2930
import { trans } from "i18n";
3031
import _ from "lodash";
3132
import { darkenColor, isDarkColor } from "lowcoder-design";
32-
import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
33+
import React, { Children, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
3334
import { Resizable } from "react-resizable";
3435
import styled, { css } from "styled-components";
3536
import { useUserViewMode } from "util/hooks";
@@ -41,15 +42,6 @@ import { messageInstance } from "lowcoder-design";
4142
import { ReactRef, ResizeHandleAxis } from "layout/gridLayoutPropTypes";
4243
import { CellColorViewType } from "./column/tableColumnComp";
4344

44-
const TitleResizeHandle = styled.span`
45-
position: absolute;
46-
top: 0;
47-
right: -5px;
48-
width: 10px;
49-
height: 100%;
50-
cursor: col-resize;
51-
z-index: 1;
52-
`;
5345

5446
function genLinerGradient(color: string) {
5547
return `linear-gradient(${color}, ${color})`;
@@ -65,10 +57,11 @@ const getStyle = (
6557
const selectedRowBackground = genLinerGradient(rowStyle.selectedRowBackground);
6658
const hoverRowBackground = genLinerGradient(rowStyle.hoverRowBackground);
6759
const alternateBackground = genLinerGradient(rowStyle.alternateBackground);
60+
// const tableAutoHeight =
6861

6962
return css`
7063
.ant-table-body {
71-
background: white;
64+
background: ${genLinerGradient(style.background)};
7265
}
7366
.ant-table-tbody {
7467
> tr:nth-of-type(2n + 1) {
@@ -130,6 +123,32 @@ const getStyle = (
130123
`;
131124
};
132125

126+
const TitleResizeHandle = styled.span`
127+
position: absolute;
128+
top: 0;
129+
right: -5px;
130+
width: 10px;
131+
height: 100%;
132+
cursor: col-resize;
133+
z-index: 1;
134+
`;
135+
136+
const BackgroundWrapper = styled.div<{
137+
$style: TableStyleType;
138+
$tableAutoHeight?: boolean;
139+
}>`
140+
${(props) => !props.$tableAutoHeight && ` height: calc(100% - ${props.$style.margin} - ${props.$style.margin}) !important`};
141+
${(props) => props.$tableAutoHeight && ` height: calc(100% + ${props.$style.margin}`};
142+
background: ${(props) => props.$style.background} !important;
143+
border: ${(props) => `${props.$style.borderWidth} solid ${props.$style.border} !important`};
144+
border-radius: ${(props) => props.$style.radius} !important;
145+
padding: unset !important;
146+
margin: ${(props) => props.$style.margin} !important;
147+
overflow: scroll !important;
148+
${(props) => props.$style}
149+
`;
150+
151+
// TODO: find a way to limit the calc function for max-height only to first Margin value
133152
const TableWrapper = styled.div<{
134153
$style: TableStyleType;
135154
$headerStyle: TableHeaderStyleType;
@@ -139,16 +158,10 @@ const TableWrapper = styled.div<{
139158
$fixedHeader: boolean;
140159
$fixedToolbar: boolean;
141160
}>`
142-
max-height: 100%;
143-
overflow-y: auto;
144-
background: ${(props) => props.$style.background};
145-
border: ${(props) => `${props.$style.borderWidth} solid ${props.$style.border}`};
146-
border-radius: ${(props) => props.$style.radius};
147-
padding: ${(props) => props.$style.padding};
148-
margin: ${(props) => props.$style.margin};
161+
overflow: unset !important;
149162
150163
.ant-table-wrapper {
151-
border-top: ${(props) => (props.$toolbarPosition === "above" ? "1px solid" : "unset")};
164+
border-top: unset;
152165
border-color: inherit;
153166
}
154167
@@ -299,6 +312,7 @@ const TableTh = styled.th<{ width?: number }>`
299312
const TableTd = styled.td<{
300313
$background: string;
301314
$style: TableColumnStyleType & {rowHeight?: string};
315+
$defaultThemeDetail: ThemeDetail;
302316
$linkStyle?: TableColumnLinkStyleType;
303317
$isEditing: boolean;
304318
$tableSize?: string;
@@ -316,40 +330,42 @@ const TableTd = styled.td<{
316330
border-color: ${(props) => props.$style.border} !important;
317331
border-width: ${(props) => props.$style.borderWidth} !important;
318332
border-radius: ${(props) => props.$style.radius};
319-
margin: ${(props) => props.$style.margin};
320333
321334
padding: 0 !important;
322335
323336
> div {
337+
margin: ${(props) => props.$style.margin};
324338
color: ${(props) => props.$style.text};
325-
font-size: ${(props) => props.$style.textSize};
326-
line-height: 21px;
327-
339+
328340
${(props) => props.$tableSize === 'small' && `
329-
padding: 8.5px 8px;
330-
min-height: ${props.$style.rowHeight || '39px'};
341+
padding: 1px 8px;
342+
font-size: ${props.$defaultThemeDetail.textSize == props.$style.textSize ? '14px !important' : props.$style.textSize + ' !important' };
343+
min-height: ${props.$style.rowHeight || '14px'};
344+
line-height: 20px;
331345
${!props.$autoHeight && `
332346
overflow-y: auto;
333-
max-height: ${props.$style.rowHeight || '39px'};
347+
max-height: ${props.$style.rowHeight || '28px'};
334348
`};
335349
`};
336350
${(props) => props.$tableSize === 'middle' && `
337-
padding: 12.5px 8px;
338-
min-height: ${props.$style.rowHeight || '47px'};
351+
padding: 8px 8px;
352+
font-size: ${props.$defaultThemeDetail.textSize == props.$style.textSize ? '16px !important' : props.$style.textSize + ' !important' };
353+
min-height: ${props.$style.rowHeight || '24px'};
354+
line-height: 24px;
339355
${!props.$autoHeight && `
340356
overflow-y: auto;
341-
max-height: ${props.$style.rowHeight || '47px'};
357+
max-height: ${props.$style.rowHeight || '48px'};
342358
`};
343359
`};
344360
${(props) => props.$tableSize === 'large' && `
345-
padding: 16.5px 16px;
346-
min-height: ${props.$style.rowHeight || '55px'};
361+
padding: 16px 16px;
362+
font-size: ${props.$defaultThemeDetail.textSize == props.$style.textSize ? '18px !important' : props.$style.textSize + ' !important' };
363+
min-height: ${props.$style.rowHeight || '48px'};
347364
${!props.$autoHeight && `
348365
overflow-y: auto;
349-
max-height: ${props.$style.rowHeight || '55px'};
366+
max-height: ${props.$style.rowHeight || '96px'};
350367
`};
351368
`};
352-
353369
354370
> div > .ant-badge > .ant-badge-status-text,
355371
> div > div > .markdown-body {
@@ -516,6 +532,7 @@ function TableCellView(props: {
516532
{...restProps}
517533
$background={background}
518534
$style={style}
535+
$defaultThemeDetail={defaultTheme}
519536
$linkStyle={linkStyle}
520537
$isEditing={editing}
521538
$tableSize={tableSize}
@@ -656,6 +673,7 @@ export function TableCompView(props: {
656673
const [loading, setLoading] = useState(false);
657674
const { comp, onDownload, onRefresh } = props;
658675
const compChildren = comp.children;
676+
const tableAutoHeight = compChildren.autoHeight.getView();
659677
const style = compChildren.style.getView();
660678
const rowStyle = compChildren.rowStyle.getView();
661679
const headerStyle = compChildren.headerStyle.getView();
@@ -768,57 +786,64 @@ export function TableCompView(props: {
768786

769787
return (
770788
<BackgroundColorContext.Provider value={style.background}>
771-
<div ref={ref} style={{height: '100%'}}>
772-
<TableWrapper
773-
$style={style}
774-
$rowStyle={rowStyle}
775-
$headerStyle={headerStyle}
776-
$toolbarStyle={toolbarStyle}
777-
$toolbarPosition={toolbar.position}
778-
$fixedHeader={compChildren.fixedHeader.getView()}
779-
$fixedToolbar={toolbar.fixedToolbar && toolbar.position === 'above'}
789+
790+
<BackgroundWrapper ref={ref} $style={style}
791+
$tableAutoHeight={compChildren.autoHeight.getView()}
780792
>
781793
{toolbar.position === "above" && toolbarView}
782-
<ResizeableTable<RecordType>
783-
expandable={{
784-
...expansion.expandableConfig,
785-
childrenColumnName: supportChildren
786-
? COLUMN_CHILDREN_KEY
787-
: "OB_CHILDREN_KEY_PLACEHOLDER",
788-
fixed: "left",
789-
onExpand: (expanded) => {
790-
if(expanded) handleChangeEvent('rowExpand')
794+
<TableWrapper
795+
$style={style}
796+
$rowStyle={rowStyle}
797+
$headerStyle={headerStyle}
798+
$toolbarStyle={toolbarStyle}
799+
$toolbarPosition={toolbar.position}
800+
$fixedHeader={compChildren.fixedHeader.getView()}
801+
$fixedToolbar={toolbar.fixedToolbar && toolbar.position === 'above'}
802+
>
803+
804+
805+
<ResizeableTable<RecordType>
806+
expandable={{
807+
...expansion.expandableConfig,
808+
childrenColumnName: supportChildren
809+
? COLUMN_CHILDREN_KEY
810+
: "OB_CHILDREN_KEY_PLACEHOLDER",
811+
fixed: "left",
812+
onExpand: (expanded) => {
813+
if(expanded) handleChangeEvent('rowExpand')
814+
}
815+
}}
816+
rowColorFn={compChildren.rowColor.getView() as any}
817+
rowHeightFn={compChildren.rowHeight.getView() as any}
818+
{...compChildren.selection.getView()(onEvent)}
819+
bordered={compChildren.showHeaderGridBorder.getView()}
820+
onChange={(pagination, filters, sorter, extra) => {
821+
onTableChange(pagination, filters, sorter, extra, comp.dispatch, onEvent);
822+
}}
823+
showHeader={!compChildren.hideHeader.getView()}
824+
columns={antdColumns}
825+
columnsStyle={columnsStyle}
826+
viewModeResizable={compChildren.viewModeResizable.getView()}
827+
dataSource={pageDataInfo.data}
828+
size={compChildren.size.getView()}
829+
rowAutoHeight={rowAutoHeight}
830+
tableLayout="fixed"
831+
loading={
832+
loading ||
833+
// fixme isLoading type
834+
(compChildren.showDataLoadSpinner.getView() &&
835+
(compChildren.data as any).isLoading()) ||
836+
compChildren.loading.getView()
791837
}
792-
}}
793-
rowColorFn={compChildren.rowColor.getView() as any}
794-
rowHeightFn={compChildren.rowHeight.getView() as any}
795-
{...compChildren.selection.getView()(onEvent)}
796-
bordered={!compChildren.hideBordered.getView()}
797-
onChange={(pagination, filters, sorter, extra) => {
798-
onTableChange(pagination, filters, sorter, extra, comp.dispatch, onEvent);
799-
}}
800-
showHeader={!compChildren.hideHeader.getView()}
801-
columns={antdColumns}
802-
columnsStyle={columnsStyle}
803-
viewModeResizable={compChildren.viewModeResizable.getView()}
804-
dataSource={pageDataInfo.data}
805-
size={compChildren.size.getView()}
806-
rowAutoHeight={rowAutoHeight}
807-
tableLayout="fixed"
808-
loading={
809-
loading ||
810-
// fixme isLoading type
811-
(compChildren.showDataLoadSpinner.getView() &&
812-
(compChildren.data as any).isLoading()) ||
813-
compChildren.loading.getView()
814-
}
815-
/>
838+
/>
839+
840+
<SlotConfigContext.Provider value={{ modalWidth: width && Math.max(width, 300) }}>
841+
{expansion.expandModalView}
842+
</SlotConfigContext.Provider>
843+
</TableWrapper>
816844
{toolbar.position === "below" && toolbarView}
817-
<SlotConfigContext.Provider value={{ modalWidth: width && Math.max(width, 300) }}>
818-
{expansion.expandModalView}
819-
</SlotConfigContext.Provider>
820-
</TableWrapper>
821-
</div>
845+
</BackgroundWrapper>
846+
822847
</BackgroundColorContext.Provider>
823848
);
824849
}

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -469,9 +469,6 @@ export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType>
469469
{comp.children.hideHeader.propertyView({
470470
label: trans("table.hideHeader"),
471471
})}
472-
{comp.children.hideBordered.propertyView({
473-
label: trans("table.hideBordered"),
474-
})}
475472
{comp.children.viewModeResizable.propertyView({
476473
label: trans("table.viewModeResizable"),
477474
tooltip: trans("table.viewModeResizableTooltip"),
@@ -510,14 +507,19 @@ export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType>
510507
{comp.children.style.getPropertyView()}
511508
</Section>
512509
<Section name={"Header Style"}>
510+
{comp.children.showHeaderGridBorder.propertyView({
511+
label: trans("table.showHeaderGridBorder"),
512+
})}
513513
{comp.children.headerStyle.getPropertyView()}
514514
</Section>
515515
<Section name={"Toolbar Style"}>
516516
{comp.children.toolbarStyle.getPropertyView()}
517517
</Section>
518518
<Section name={"Row Style"}>
519+
{comp.children.showRowGridBorder.propertyView({
520+
label: trans("table.showRowGridBorder"),
521+
})}
519522
{comp.children.rowStyle.getPropertyView()}
520-
521523
{comp.children.rowAutoHeight.getPropertyView()}
522524
{comp.children.rowHeight.getPropertyView()}
523525
{comp.children.rowColor.getPropertyView()}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ const getStyle = (
5858
padding: 13px 12px;
5959
position: sticky;
6060
postion: -webkit-sticky;
61-
left: 0;
61+
left: 0px !important;
6262
6363
${fixedToolbar && `z-index: 99;`};
6464
${fixedToolbar && position === 'below' && `bottom: 0;`};

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,9 @@ export type RowHeightViewType = (param: {
170170
}) => string;
171171

172172
const tableChildrenMap = {
173-
hideBordered: BoolControl,
173+
// hideBordered: BoolControl,
174+
showHeaderGridBorder: BoolControl,
175+
showRowGridBorder: BoolControl,
174176
hideHeader: BoolControl,
175177
fixedHeader: BoolControl,
176178
autoHeight: withDefault(AutoHeightControl, "auto"),

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -684,7 +684,6 @@ const LinkTextStyle = [
684684

685685
export const TableStyle = [
686686
MARGIN,
687-
PADDING,
688687
...BG_STATIC_BORDER_RADIUS,
689688
{
690689
name: "borderWidth",
@@ -721,8 +720,6 @@ export const TableStyle = [
721720
] as const;
722721

723722
export const TableToolbarStyle = [
724-
MARGIN,
725-
PADDING,
726723
{
727724
name: "toolbarBackground",
728725
label: trans("style.toolbarBackground"),
@@ -1205,3 +1202,5 @@ export function marginCalculator(margin: string) {
12051202
return parseInt(marginArr[0]?.replace(/[^\d.]/g, "") || "0") + parseInt(marginArr[2]?.replace(/[^\d.]/g, "") || "0")
12061203
}
12071204
}
1205+
export type { ThemeDetail };
1206+

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1270,7 +1270,9 @@ export const en = {
12701270
"fixedHeaderTooltip": "Header Will Be Fixed for Vertically Scrollable Table",
12711271
"fixedToolbar": "Fixed Toolbar",
12721272
"fixedToolbarTooltip": "Toolbar Will Be Fixed for Vertically Scrollable Table Based on Position",
1273-
"hideBordered": "Hide Column Border",
1273+
"hideBordered": "Show Resize Handles",
1274+
"showHeaderGridBorder": "Show Header Grid Border",
1275+
"showRowGridBorder": "Show Row Grid Border",
12741276
"deleteColumn": "Delete Column",
12751277
"confirmDeleteColumn": "Confirm Delete Column: ",
12761278
"small": "S",

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1239,6 +1239,8 @@ table: {
12391239
fixedHeader: "固定表头",
12401240
fixedHeaderTooltip: "垂直滚动表格的标题将被固定",
12411241
hideBordered: "隐藏列边框",
1242+
"showHeaderGridBorder": "显示标题网格边框",
1243+
"showRowGridBorder": "显示行网格边框",
12421244
deleteColumn: "删除列",
12431245
confirmDeleteColumn: "确认删除列:",
12441246
small: "小",

0 commit comments

Comments
 (0)