Skip to content

Commit 7371565

Browse files
author
FalkWolsky
committed
Color settings
1 parent f1ced9f commit 7371565

File tree

6 files changed

+36
-58
lines changed

6 files changed

+36
-58
lines changed

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

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -122,9 +122,7 @@ const getStyle = (
122122
`;
123123
};
124124

125-
const TitleResizeHandle = styled.span<{
126-
$visibleResizables: boolean;
127-
}>`
125+
const TitleResizeHandle = styled.span`
128126
position: absolute;
129127
top: 0;
130128
right: -5px;
@@ -157,6 +155,8 @@ const TableWrapper = styled.div<{
157155
$toolbarPosition: "above" | "below" | "close";
158156
$fixedHeader: boolean;
159157
$fixedToolbar: boolean;
158+
$visibleResizables: boolean;
159+
$showHRowGridBorder?: boolean;
160160
}>`
161161
overflow: unset !important;
162162
@@ -240,13 +240,15 @@ const TableWrapper = styled.div<{
240240
241241
&::before {
242242
background-color: ${(props) => props.$headerStyle.border};
243+
width: ${(props) => (props.$visibleResizables ? "1px" : "0px")} !important;
243244
}
244245
}
245246
}
246247
247248
> thead > tr > th,
248249
> tbody > tr > td {
249-
border-color: ${(props) => props.$style.border};
250+
border-color: ${(props) => props.$headerStyle.border};
251+
${(props) => !props.$showHRowGridBorder && `border-bottom: 0px;`}
250252
}
251253
252254
td {
@@ -436,7 +438,6 @@ const ResizeableTitle = (props: any) => {
436438
handle={(axis: ResizeHandleAxis, ref: ReactRef<HTMLDivElement>) => (
437439
<TitleResizeHandle
438440
ref={ref}
439-
$visibleResizables={props.visibleResizables}
440441
onClick={(e) => {
441442
e.preventDefault();
442443
e.stopPropagation();
@@ -682,6 +683,7 @@ export function TableCompView(props: {
682683
const rowAutoHeight = compChildren.rowAutoHeight.getView();
683684
const tableAutoHeight = comp.getTableAutoHeight();
684685
const visibleResizables = compChildren.visibleResizables.getView();
686+
const showHRowGridBorder = compChildren.showHRowGridBorder.getView();
685687
const columnsStyle = compChildren.columnsStyle.getView();
686688
const changeSet = useMemo(() => compChildren.columns.getChangeSet(), [compChildren.columns]);
687689
const hasChange = useMemo(() => !_.isEmpty(changeSet), [changeSet]);
@@ -762,7 +764,7 @@ export function TableCompView(props: {
762764
const toolbarView = (
763765
<TableToolbar
764766
toolbar={toolbar}
765-
$style={style}
767+
$style={toolbarStyle}
766768
pagination={{
767769
...pagination,
768770
total: pageDataInfo.total,
@@ -800,6 +802,8 @@ export function TableCompView(props: {
800802
$toolbarPosition={toolbar.position}
801803
$fixedHeader={compChildren.fixedHeader.getView()}
802804
$fixedToolbar={toolbar.fixedToolbar && toolbar.position === 'above'}
805+
$visibleResizables={visibleResizables}
806+
$showHRowGridBorder={showHRowGridBorder}
803807
>
804808
<ResizeableTable<RecordType>
805809
expandable={{
@@ -815,7 +819,7 @@ export function TableCompView(props: {
815819
rowColorFn={compChildren.rowColor.getView() as any}
816820
rowHeightFn={compChildren.rowHeight.getView() as any}
817821
{...compChildren.selection.getView()(onEvent)}
818-
bordered={compChildren.showHeaderGridBorder.getView()}
822+
bordered={compChildren.showRowGridBorder.getView()}
819823
onChange={(pagination, filters, sorter, extra) => {
820824
onTableChange(pagination, filters, sorter, extra, comp.dispatch, onEvent);
821825
}}

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -511,17 +511,17 @@ export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType>
511511
{comp.children.style.getPropertyView()}
512512
</Section>
513513
<Section name={"Header Style"}>
514-
{comp.children.showHeaderGridBorder.propertyView({
515-
label: trans("table.showHeaderGridBorder"),
516-
})}
517514
{comp.children.headerStyle.getPropertyView()}
518515
</Section>
519516
<Section name={"Toolbar Style"}>
520517
{comp.children.toolbarStyle.getPropertyView()}
521518
</Section>
522519
<Section name={"Row Style"}>
523520
{comp.children.showRowGridBorder.propertyView({
524-
label: trans("table.showRowGridBorder"),
521+
label: trans("table.showVerticalRowGridBorder"),
522+
})}
523+
{comp.children.showHRowGridBorder.propertyView({
524+
label: trans("table.showHorizontalRowGridBorder"),
525525
})}
526526
{comp.children.rowStyle.getPropertyView()}
527527
{comp.children.rowAutoHeight.getPropertyView()}

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

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { TableOnEventView } from "comps/comps/tableComp/tableTypes";
77
import { BoolControl } from "comps/controls/boolControl";
88
import { StringControl } from "comps/controls/codeControl";
99
import { dropdownControl } from "comps/controls/dropdownControl";
10-
import { defaultTheme, TableStyleType } from "comps/controls/styleControlConstants";
10+
import { defaultTheme, TableToolbarStyleType } from "comps/controls/styleControlConstants";
1111
import { stateComp } from "comps/generators";
1212
import { genRandomKey } from "comps/utils/idGenerator";
1313
import { ThemeContext } from "comps/utils/themeContext";
@@ -46,19 +46,20 @@ const SaveChangeButtons = styled.div`
4646
`;
4747

4848
const getStyle = (
49-
style: TableStyleType,
49+
style: TableToolbarStyleType,
5050
filtered: boolean,
5151
theme: ThemeDetail,
5252
position: ToolbarRowType["position"],
5353
fixedToolbar: boolean,
5454
) => {
5555
return css`
56-
background-color: ${style.toolbarBackground};
56+
background-color: ${style.background};
5757
// Implement horizontal scrollbar and vertical page number selection is not blocked
5858
padding: 13px 12px;
5959
position: sticky;
6060
postion: -webkit-sticky;
6161
left: 0px !important;
62+
margin: ${style.margin} !important;
6263
6364
${fixedToolbar && `z-index: 99;`};
6465
${fixedToolbar && position === 'below' && `bottom: 0;`};
@@ -125,7 +126,7 @@ const getStyle = (
125126
}
126127
127128
.ant-pagination-item-active {
128-
border-color: ${theme?.primary};
129+
border-color: ${style.border || theme?.primary};
129130
130131
a {
131132
color: ${theme?.textDark};
@@ -145,13 +146,13 @@ const getStyle = (
145146
.ant-select-selector,
146147
.ant-pagination-options-quick-jumper input:hover,
147148
.ant-pagination-options-quick-jumper input:focus {
148-
border-color: ${theme?.primary};
149+
border-color: ${style.border || theme?.primary};
149150
}
150151
`;
151152
};
152153

153154
const ToolbarWrapper = styled.div<{
154-
$style: TableStyleType;
155+
$style: TableToolbarStyleType;
155156
$filtered: boolean;
156157
$theme: ThemeDetail;
157158
$position: ToolbarRowType["position"];
@@ -711,7 +712,7 @@ type ToolbarRowType = ConstructorToView<typeof TableToolbarComp>;
711712

712713
export function TableToolbar(props: {
713714
toolbar: ToolbarRowType;
714-
$style: TableStyleType;
715+
$style: TableToolbarStyleType;
715716
pagination: PaginationProps;
716717
columns: Array<ColumnCompType>;
717718
onRefresh: () => void;

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -173,6 +173,7 @@ const tableChildrenMap = {
173173
// hideBordered: BoolControl,
174174
showHeaderGridBorder: BoolControl,
175175
showRowGridBorder: BoolControl,
176+
showHRowGridBorder: BoolControl,
176177
hideHeader: BoolControl,
177178
fixedHeader: BoolControl,
178179
autoHeight: withDefault(AutoHeightControl, "auto"),

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

Lines changed: 10 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,10 @@ export function handleToSelectedRow(color: string, primary: string = defaultThem
157157
// return table header background color
158158
export function handleToHeadBg(color: string) {
159159
if (toHex(color) === SURFACE_COLOR) {
160-
return "#FAFAFA";
160+
return darkenColor(color, 0.06);
161+
}
162+
if (toHex(color) === "#000000") {
163+
return SECOND_SURFACE_COLOR;
161164
}
162165
if (isDarkColor(color)) {
163166
return darkenColor(color, 0.06);
@@ -690,60 +693,29 @@ export const TableStyle = [
690693
label: trans("style.borderWidth"),
691694
borderWidth: "borderWidth",
692695
},
693-
{
694-
name: "headerBackground",
695-
label: trans("style.tableHeaderBackground"),
696-
depName: "background",
697-
transformer: handleToHeadBg,
698-
},
699-
{
700-
name: "headerText",
701-
label: trans("style.tableHeaderText"),
702-
depName: "headerBackground",
703-
depType: DEP_TYPE.CONTRAST_TEXT,
704-
transformer: contrastText,
705-
},
706-
{
707-
name: "toolbarBackground",
708-
label: trans("style.toolbarBackground"),
709-
depName: "background",
710-
depType: DEP_TYPE.SELF,
711-
transformer: toSelf,
712-
},
713-
{
714-
name: "toolbarText",
715-
label: trans("style.toolbarText"),
716-
depName: "toolbarBackground",
717-
depType: DEP_TYPE.CONTRAST_TEXT,
718-
transformer: contrastText,
719-
},
720696
] as const;
721697

722698
export const TableToolbarStyle = [
723-
{
724-
name: "toolbarBackground",
725-
label: trans("style.toolbarBackground"),
726-
depName: "background",
727-
depType: DEP_TYPE.SELF,
728-
transformer: toSelf,
729-
},
699+
MARGIN,
700+
getBackground(),
701+
getStaticBorder(),
730702
{
731703
name: "toolbarText",
732704
label: trans("style.toolbarText"),
733705
depName: "toolbarBackground",
734706
depType: DEP_TYPE.CONTRAST_TEXT,
735-
transformer: contrastText,
707+
transformer: toSelf,
736708
},
737709
] as const;
738710

739711
export const TableHeaderStyle = [
712+
MARGIN,
740713
{
741714
name: "headerBackground",
742715
label: trans("style.tableHeaderBackground"),
743-
depName: "background",
716+
depName: "headerBackground",
744717
transformer: handleToHeadBg,
745718
},
746-
MARGIN,
747719
getStaticBorder(),
748720
{
749721
name: "borderWidth",

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1273,8 +1273,8 @@ export const en = {
12731273
"fixedToolbar": "Fixed Toolbar",
12741274
"fixedToolbarTooltip": "Toolbar Will Be Fixed for Vertically Scrollable Table Based on Position",
12751275
"hideBordered": "Show Resize Handles",
1276-
"showHeaderGridBorder": "Show Header Grid Border",
1277-
"showRowGridBorder": "Show Row Grid Border",
1276+
"showVerticalRowGridBorder": "Show vertical Row Grid Border",
1277+
"showHorizontalRowGridBorder": "Show horizontal Row Grid Border",
12781278
"deleteColumn": "Delete Column",
12791279
"confirmDeleteColumn": "Confirm Delete Column: ",
12801280
"small": "S",

0 commit comments

Comments
 (0)