From baaeee8d9a4db887c79a438711a5102eddb75255 Mon Sep 17 00:00:00 2001 From: FalkWolsky Date: Wed, 10 Jan 2024 20:09:57 +0100 Subject: [PATCH 1/5] Fallback for missing Translation fields --- client/packages/lowcoder-core/lib/index.cjs | 224 +++++++++--------- client/packages/lowcoder-core/lib/index.d.ts | 1 + client/packages/lowcoder-core/lib/index.js | 83 ++++--- .../packages/lowcoder-core/src/i18n/index.tsx | 23 +- 4 files changed, 181 insertions(+), 150 deletions(-) diff --git a/client/packages/lowcoder-core/lib/index.cjs b/client/packages/lowcoder-core/lib/index.cjs index b97a5b422..5522eabf9 100644 --- a/client/packages/lowcoder-core/lib/index.cjs +++ b/client/packages/lowcoder-core/lib/index.cjs @@ -9,118 +9,118 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau var ___default = /*#__PURE__*/_interopDefaultLegacy(_); -/****************************************************************************** -Copyright (c) Microsoft Corporation. - -Permission to use, copy, modify, and/or distribute this software for any -purpose with or without fee is hereby granted. - -THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH -REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY -AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, -INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM -LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR -OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR -PERFORMANCE OF THIS SOFTWARE. -***************************************************************************** */ -/* global Reflect, Promise, SuppressedError, Symbol */ - -var extendStatics = function(d, b) { - extendStatics = Object.setPrototypeOf || - ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || - function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; }; - return extendStatics(d, b); -}; - -function __extends(d, b) { - if (typeof b !== "function" && b !== null) - throw new TypeError("Class extends value " + String(b) + " is not a constructor or null"); - extendStatics(d, b); - function __() { this.constructor = d; } - d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); -} - -var __assign = function() { - __assign = Object.assign || function __assign(t) { - for (var s, i = 1, n = arguments.length; i < n; i++) { - s = arguments[i]; - for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; - } - return t; - }; - return __assign.apply(this, arguments); -}; - -function __rest(s, e) { - var t = {}; - for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) - t[p] = s[p]; - if (s != null && typeof Object.getOwnPropertySymbols === "function") - for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { - if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) - t[p[i]] = s[p[i]]; - } - return t; -} - -function __decorate(decorators, target, key, desc) { - var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; - if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); - else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; - return c > 3 && r && Object.defineProperty(target, key, r), r; -} - -function __awaiter(thisArg, _arguments, P, generator) { - function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } - return new (P || (P = Promise))(function (resolve, reject) { - function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } - function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } - function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } - step((generator = generator.apply(thisArg, _arguments || [])).next()); - }); -} - -function __generator(thisArg, body) { - var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g; - return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; - function verb(n) { return function (v) { return step([n, v]); }; } - function step(op) { - if (f) throw new TypeError("Generator is already executing."); - while (g && (g = 0, op[0] && (_ = 0)), _) try { - if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; - if (y = 0, t) op = [op[0] & 2, t.value]; - switch (op[0]) { - case 0: case 1: t = op; break; - case 4: _.label++; return { value: op[1], done: false }; - case 5: _.label++; y = op[1]; op = [0]; continue; - case 7: op = _.ops.pop(); _.trys.pop(); continue; - default: - if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } - if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } - if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } - if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } - if (t[2]) _.ops.pop(); - _.trys.pop(); continue; - } - op = body.call(thisArg, _); - } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } - if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; - } -} - -function __spreadArray(to, from, pack) { - if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) { - if (ar || !(i in from)) { - if (!ar) ar = Array.prototype.slice.call(from, 0, i); - ar[i] = from[i]; - } - } - return to.concat(ar || Array.prototype.slice.call(from)); -} - -typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) { - var e = new Error(message); - return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e; +/****************************************************************************** +Copyright (c) Microsoft Corporation. + +Permission to use, copy, modify, and/or distribute this software for any +purpose with or without fee is hereby granted. + +THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH +REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY +AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, +INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM +LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR +OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR +PERFORMANCE OF THIS SOFTWARE. +***************************************************************************** */ +/* global Reflect, Promise, SuppressedError, Symbol */ + +var extendStatics = function(d, b) { + extendStatics = Object.setPrototypeOf || + ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || + function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; }; + return extendStatics(d, b); +}; + +function __extends(d, b) { + if (typeof b !== "function" && b !== null) + throw new TypeError("Class extends value " + String(b) + " is not a constructor or null"); + extendStatics(d, b); + function __() { this.constructor = d; } + d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); +} + +var __assign = function() { + __assign = Object.assign || function __assign(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; + +function __rest(s, e) { + var t = {}; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) + t[p] = s[p]; + if (s != null && typeof Object.getOwnPropertySymbols === "function") + for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { + if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) + t[p[i]] = s[p[i]]; + } + return t; +} + +function __decorate(decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +} + +function __awaiter(thisArg, _arguments, P, generator) { + function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } + return new (P || (P = Promise))(function (resolve, reject) { + function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } + function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } + function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } + step((generator = generator.apply(thisArg, _arguments || [])).next()); + }); +} + +function __generator(thisArg, body) { + var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g; + return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; + function verb(n) { return function (v) { return step([n, v]); }; } + function step(op) { + if (f) throw new TypeError("Generator is already executing."); + while (g && (g = 0, op[0] && (_ = 0)), _) try { + if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; + if (y = 0, t) op = [op[0] & 2, t.value]; + switch (op[0]) { + case 0: case 1: t = op; break; + case 4: _.label++; return { value: op[1], done: false }; + case 5: _.label++; y = op[1]; op = [0]; continue; + case 7: op = _.ops.pop(); _.trys.pop(); continue; + default: + if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } + if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } + if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } + if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } + if (t[2]) _.ops.pop(); + _.trys.pop(); continue; + } + op = body.call(thisArg, _); + } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } + if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; + } +} + +function __spreadArray(to, from, pack) { + if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) { + if (ar || !(i in from)) { + if (!ar) ar = Array.prototype.slice.call(from, 0, i); + ar[i] = from[i]; + } + } + return to.concat(ar || Array.prototype.slice.call(from)); +} + +typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) { + var e = new Error(message); + return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e; }; function isEqualArgs(args, cacheArgs, equals) { diff --git a/client/packages/lowcoder-core/lib/index.d.ts b/client/packages/lowcoder-core/lib/index.d.ts index da0b0a4ae..d0db17798 100644 --- a/client/packages/lowcoder-core/lib/index.d.ts +++ b/client/packages/lowcoder-core/lib/index.d.ts @@ -659,6 +659,7 @@ type AddPrefix = { declare const globalMessages: AddPrefix<{}, "@">; type GlobalMessageKey = NestedKey; type VariableValue = string | number | boolean | Date | React.ReactNode; + declare class Translator { private readonly messages; readonly language: string; diff --git a/client/packages/lowcoder-core/lib/index.js b/client/packages/lowcoder-core/lib/index.js index 89a3c783b..ab547694d 100644 --- a/client/packages/lowcoder-core/lib/index.js +++ b/client/packages/lowcoder-core/lib/index.js @@ -11583,40 +11583,57 @@ var globalMessages = Object.fromEntries(Object.entries(getDataByLocale(localeDat ]; })); var Translator = /** @class */ (function () { - function Translator(fileData, filterLocales, locales) { - var _a = getDataByLocale(fileData, "", filterLocales, locales), data = _a.data, language = _a.language; - this.messages = Object.assign({}, data, globalMessages); - this.language = language; - this.trans = this.trans.bind(this); - this.transToNode = this.transToNode.bind(this); - } - Translator.prototype.trans = function (key, variables) { - return this.transToNode(key, variables).toString(); - }; - Translator.prototype.transToNode = function (key, variables) { - var message = this.getMessage(key); - var node = new IntlMessageFormat(message, i18n.locale).format(variables); - if (Array.isArray(node)) { - return node.map(function (n, i) { return jsxRuntimeExports.jsx(reactExports.Fragment, { children: n }, i); }); - } - return node; - }; - Translator.prototype.getMessage = function (key) { - var value = this.messages[key]; - if (value !== undefined) { - return value; - } - var obj = this.messages; - for (var _i = 0, _a = key.split("."); _i < _a.length; _i++) { - var k = _a[_i]; - if (obj !== undefined) { - obj = obj[k]; - } - } - return obj; - }; - return Translator; + function Translator(fileData, filterLocales, locales) { + var _a = getDataByLocale(fileData, "", filterLocales, locales), data = _a.data, language = _a.language; + this.messages = Object.assign({}, data, globalMessages); + this.language = language; + this.trans = this.trans.bind(this); + this.transToNode = this.transToNode.bind(this); + } + + Translator.prototype.trans = function (key, variables) { + return this.transToNode(key, variables).toString(); + }; + + Translator.prototype.transToNode = function (key, variables) { + var message = this.getMessage(key); + var node = new IntlMessageFormat(message, i18n.locale).format(variables); + if (Array.isArray(node)) { + return node.map(function (n, i) { return jsxRuntimeExports.jsx(reactExports.Fragment, { children: n }, i); }); + } + return node; + }; + + Translator.prototype.getMessage = function (key) { + var value = this.getNestedMessage(this.messages, key); + + // Fallback to English if the message is not found + if (value === undefined) { + value = this.getNestedMessage(localeData.en, key); // Assuming localeData.en contains English translations + } + + // If still not found, return a default message or the key itself + if (value === undefined) { + console.warn(`Translation missing for key: ${key}`); + return `oups! ${key}`; // or simply return the key + } + + return value; + }; + + Translator.prototype.getNestedMessage = function (obj, key) { + for (var _i = 0, _a = key.split("."); _i < _a.length; _i++) { + var k = _a[_i]; + if (obj !== undefined) { + obj = obj[k]; + } + } + return obj; + }; + + return Translator; }()); + function getI18nObjects(fileData, filterLocales) { return getDataByLocale(fileData, "Obj", filterLocales).data; } diff --git a/client/packages/lowcoder-core/src/i18n/index.tsx b/client/packages/lowcoder-core/src/i18n/index.tsx index 39316bbcd..c12ea7ac5 100644 --- a/client/packages/lowcoder-core/src/i18n/index.tsx +++ b/client/packages/lowcoder-core/src/i18n/index.tsx @@ -159,18 +159,31 @@ export class Translator { } private getMessage(key: NestedKey | GlobalMessageKey) { - const value = this.messages[key]; - if (value !== undefined) { - return value; + let message = this.getNestedMessage(this.messages, key); + + // Fallback to English if the message is not found + if (message === undefined) { + message = this.getNestedMessage(localeData.en, key); // Assuming localeData.en contains English translations } - let obj: any = this.messages; - for (const k of (key as string).split(".")) { + + // If still not found, return a default message or the key itself + if (message === undefined) { + console.warn(`Translation missing for key: ${key}`); + `oups! ${key}`; + } + + return message; + } + + private getNestedMessage(obj: any, key: string) { + for (const k of key.split(".")) { if (obj !== undefined) { obj = obj[k]; } } return obj; } + } export function getI18nObjects(fileData: object, filterLocales?: string) { From 4d6f8da4e07d9646295840b02fb93162110e9c51 Mon Sep 17 00:00:00 2001 From: FalkWolsky Date: Fri, 12 Jan 2024 12:13:33 +0100 Subject: [PATCH 2/5] Margins, Header, Borders --- .../tableComp/column/tableColumnComp.tsx | 1 + .../comps/comps/tableComp/tableCompView.tsx | 23 +++++++++++++------ .../src/comps/comps/tableComp/tableUtils.tsx | 1 + .../comps/controls/styleControlConstants.tsx | 17 ++++++++++---- 4 files changed, 30 insertions(+), 12 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx index 8bf84e276..b455cd340 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx @@ -100,6 +100,7 @@ export const columnChildrenMap = { fixed: dropdownControl(columnFixOptions, "close"), editable: BoolControl, background: withDefault(ColorControl, ""), + margin: withDefault(RadiusControl, ""), text: withDefault(ColorControl, ""), border: withDefault(ColorControl, ""), borderWidth: withDefault(RadiusControl, ""), diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx index 92e241663..da4687c4c 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx @@ -141,9 +141,11 @@ const TableWrapper = styled.div<{ }>` max-height: 100%; overflow-y: auto; - background: white; + background: ${(props) => props.$style.background}; border: ${(props) => `${props.$style.borderWidth} solid ${props.$style.border}`}; border-radius: ${(props) => props.$style.radius}; + padding: ${(props) => props.$style.padding}; + margin: ${(props) => props.$style.margin}; .ant-table-wrapper { border-top: ${(props) => (props.$toolbarPosition === "above" ? "1px solid" : "unset")}; @@ -194,11 +196,11 @@ const TableWrapper = styled.div<{ > .ant-table-thead { > tr > th { background-color: ${(props) => props.$headerStyle.headerBackground}; - border-color: ${(props) => props.$style.border}; + border-color: ${(props) => props.$headerStyle.border}; border-width: ${(props) => props.$headerStyle.borderWidth}; - color: ${(props) => props.$style.headerText}; + color: ${(props) => props.$headerStyle.headerText}; font-size: ${(props) => props.$headerStyle.textSize}; - border-inline-end: ${(props) => `${props.$headerStyle.borderWidth} solid ${props.$style.border}`} !important; + border-inline-end: ${(props) => `${props.$headerStyle.borderWidth} solid ${props.$headerStyle.border}`} !important; ${(props) => props.$fixedHeader && ` position: sticky; @@ -208,19 +210,23 @@ const TableWrapper = styled.div<{ ` } + > div { + margin: ${(props) => props.$headerStyle.margin}; + } + &:last-child { border-inline-end: none !important; } &.ant-table-column-has-sorters:hover { - background-color: ${(props) => darkenColor(props.$style.headerBackground, 0.05)}; + background-color: ${(props) => darkenColor(props.$headerStyle.headerBackground, 0.05)}; } > .ant-table-column-sorters > .ant-table-column-sorter { - color: ${(props) => props.$style.headerText === defaultTheme.textDark ? "#bfbfbf" : props.$style.headerText}; + color: ${(props) => props.$headerStyle.headerText === defaultTheme.textDark ? "#bfbfbf" : props.$headerStyle.headerText}; } &::before { - background-color: ${(props) => props.$style.border}; + background-color: ${(props) => props.$headerStyle.border}; } } } @@ -310,6 +316,8 @@ const TableTd = styled.td<{ border-color: ${(props) => props.$style.border} !important; border-width: ${(props) => props.$style.borderWidth} !important; border-radius: ${(props) => props.$style.radius}; + margin: ${(props) => props.$style.margin}; + padding: 0 !important; > div { @@ -488,6 +496,7 @@ function TableCellView(props: { const style = { background: cellColor || rowColor || columnStyle.background || columnsStyle.background, + margin: columnStyle.margin || columnsStyle.margin, text: columnStyle.text || columnsStyle.text, border: columnStyle.border || columnsStyle.border, radius: columnStyle.radius || columnsStyle.radius, diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx index c3c6a3fa1..5bd925e5a 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx @@ -319,6 +319,7 @@ export function columnsToAntdFormat( fixed: column.fixed === "close" ? false : column.fixed, style: { background: column.background, + margin: column.margin, text: column.text, border: column.border, radius: column.radius, diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index aabce4745..b9231a536 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -683,6 +683,8 @@ const LinkTextStyle = [ ] as const; export const TableStyle = [ + MARGIN, + PADDING, ...BG_STATIC_BORDER_RADIUS, { name: "borderWidth", @@ -719,6 +721,8 @@ export const TableStyle = [ ] as const; export const TableToolbarStyle = [ + MARGIN, + PADDING, { name: "toolbarBackground", label: trans("style.toolbarBackground"), @@ -736,17 +740,19 @@ export const TableToolbarStyle = [ ] as const; export const TableHeaderStyle = [ - { - name: "borderWidth", - label: trans("style.borderWidth"), - borderWidth: "borderWidth", - }, { name: "headerBackground", label: trans("style.tableHeaderBackground"), depName: "background", transformer: handleToHeadBg, }, + MARGIN, + getStaticBorder(), + { + name: "borderWidth", + label: trans("style.borderWidth"), + borderWidth: "borderWidth", + }, { name: "headerText", label: trans("style.tableHeaderText"), @@ -784,6 +790,7 @@ export const TableRowStyle = [ export const TableColumnStyle = [ getStaticBackground("#00000000"), getStaticBorder(), + MARGIN, BORDER_WIDTH, RADIUS, TEXT, From 683c87ec034509f18d9f2db98d2e21e1acbce641 Mon Sep 17 00:00:00 2001 From: FalkWolsky Date: Sat, 13 Jan 2024 20:36:28 +0100 Subject: [PATCH 3/5] Margins, Header, Borders 2 --- .../comps/comps/tableComp/tableCompView.tsx | 185 ++++++++++-------- .../comps/tableComp/tablePropertyView.tsx | 10 +- .../comps/tableComp/tableToolbarComp.tsx | 2 +- .../src/comps/comps/tableComp/tableTypes.tsx | 4 +- .../comps/controls/styleControlConstants.tsx | 5 +- .../packages/lowcoder/src/i18n/locales/en.ts | 4 +- .../packages/lowcoder/src/i18n/locales/zh.ts | 2 + 7 files changed, 122 insertions(+), 90 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx index da4687c4c..5e2e4a274 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx @@ -21,6 +21,7 @@ import { TableHeaderStyleType, TableRowStyleType, TableStyleType, + ThemeDetail, TableToolbarStyleType, } from "comps/controls/styleControlConstants"; import { CompNameContext, EditorContext } from "comps/editorState"; @@ -29,7 +30,7 @@ import { PrimaryColor } from "constants/style"; import { trans } from "i18n"; import _ from "lodash"; import { darkenColor, isDarkColor } from "lowcoder-design"; -import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react"; +import React, { Children, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react"; import { Resizable } from "react-resizable"; import styled, { css } from "styled-components"; import { useUserViewMode } from "util/hooks"; @@ -41,15 +42,6 @@ import { messageInstance } from "lowcoder-design"; import { ReactRef, ResizeHandleAxis } from "layout/gridLayoutPropTypes"; import { CellColorViewType } from "./column/tableColumnComp"; -const TitleResizeHandle = styled.span` - position: absolute; - top: 0; - right: -5px; - width: 10px; - height: 100%; - cursor: col-resize; - z-index: 1; -`; function genLinerGradient(color: string) { return `linear-gradient(${color}, ${color})`; @@ -65,10 +57,11 @@ const getStyle = ( const selectedRowBackground = genLinerGradient(rowStyle.selectedRowBackground); const hoverRowBackground = genLinerGradient(rowStyle.hoverRowBackground); const alternateBackground = genLinerGradient(rowStyle.alternateBackground); + // const tableAutoHeight = return css` .ant-table-body { - background: white; + background: ${genLinerGradient(style.background)}; } .ant-table-tbody { > tr:nth-of-type(2n + 1) { @@ -130,6 +123,32 @@ const getStyle = ( `; }; +const TitleResizeHandle = styled.span` + position: absolute; + top: 0; + right: -5px; + width: 10px; + height: 100%; + cursor: col-resize; + z-index: 1; +`; + +const BackgroundWrapper = styled.div<{ + $style: TableStyleType; + $tableAutoHeight?: boolean; +}>` + ${(props) => !props.$tableAutoHeight && ` height: calc(100% - ${props.$style.margin} - ${props.$style.margin}) !important`}; + ${(props) => props.$tableAutoHeight && ` height: calc(100% + ${props.$style.margin}`}; + background: ${(props) => props.$style.background} !important; + border: ${(props) => `${props.$style.borderWidth} solid ${props.$style.border} !important`}; + border-radius: ${(props) => props.$style.radius} !important; + padding: unset !important; + margin: ${(props) => props.$style.margin} !important; + overflow: scroll !important; + ${(props) => props.$style} +`; + +// TODO: find a way to limit the calc function for max-height only to first Margin value const TableWrapper = styled.div<{ $style: TableStyleType; $headerStyle: TableHeaderStyleType; @@ -139,16 +158,10 @@ const TableWrapper = styled.div<{ $fixedHeader: boolean; $fixedToolbar: boolean; }>` - max-height: 100%; - overflow-y: auto; - background: ${(props) => props.$style.background}; - border: ${(props) => `${props.$style.borderWidth} solid ${props.$style.border}`}; - border-radius: ${(props) => props.$style.radius}; - padding: ${(props) => props.$style.padding}; - margin: ${(props) => props.$style.margin}; + overflow: unset !important; .ant-table-wrapper { - border-top: ${(props) => (props.$toolbarPosition === "above" ? "1px solid" : "unset")}; + border-top: unset; border-color: inherit; } @@ -299,6 +312,7 @@ const TableTh = styled.th<{ width?: number }>` const TableTd = styled.td<{ $background: string; $style: TableColumnStyleType & {rowHeight?: string}; + $defaultThemeDetail: ThemeDetail; $linkStyle?: TableColumnLinkStyleType; $isEditing: boolean; $tableSize?: string; @@ -316,40 +330,42 @@ const TableTd = styled.td<{ border-color: ${(props) => props.$style.border} !important; border-width: ${(props) => props.$style.borderWidth} !important; border-radius: ${(props) => props.$style.radius}; - margin: ${(props) => props.$style.margin}; padding: 0 !important; > div { + margin: ${(props) => props.$style.margin}; color: ${(props) => props.$style.text}; - font-size: ${(props) => props.$style.textSize}; - line-height: 21px; - + ${(props) => props.$tableSize === 'small' && ` - padding: 8.5px 8px; - min-height: ${props.$style.rowHeight || '39px'}; + padding: 1px 8px; + font-size: ${props.$defaultThemeDetail.textSize == props.$style.textSize ? '14px !important' : props.$style.textSize + ' !important' }; + min-height: ${props.$style.rowHeight || '14px'}; + line-height: 20px; ${!props.$autoHeight && ` overflow-y: auto; - max-height: ${props.$style.rowHeight || '39px'}; + max-height: ${props.$style.rowHeight || '28px'}; `}; `}; ${(props) => props.$tableSize === 'middle' && ` - padding: 12.5px 8px; - min-height: ${props.$style.rowHeight || '47px'}; + padding: 8px 8px; + font-size: ${props.$defaultThemeDetail.textSize == props.$style.textSize ? '16px !important' : props.$style.textSize + ' !important' }; + min-height: ${props.$style.rowHeight || '24px'}; + line-height: 24px; ${!props.$autoHeight && ` overflow-y: auto; - max-height: ${props.$style.rowHeight || '47px'}; + max-height: ${props.$style.rowHeight || '48px'}; `}; `}; ${(props) => props.$tableSize === 'large' && ` - padding: 16.5px 16px; - min-height: ${props.$style.rowHeight || '55px'}; + padding: 16px 16px; + font-size: ${props.$defaultThemeDetail.textSize == props.$style.textSize ? '18px !important' : props.$style.textSize + ' !important' }; + min-height: ${props.$style.rowHeight || '48px'}; ${!props.$autoHeight && ` overflow-y: auto; - max-height: ${props.$style.rowHeight || '55px'}; + max-height: ${props.$style.rowHeight || '96px'}; `}; `}; - > div > .ant-badge > .ant-badge-status-text, > div > div > .markdown-body { @@ -516,6 +532,7 @@ function TableCellView(props: { {...restProps} $background={background} $style={style} + $defaultThemeDetail={defaultTheme} $linkStyle={linkStyle} $isEditing={editing} $tableSize={tableSize} @@ -656,6 +673,7 @@ export function TableCompView(props: { const [loading, setLoading] = useState(false); const { comp, onDownload, onRefresh } = props; const compChildren = comp.children; + const tableAutoHeight = compChildren.autoHeight.getView(); const style = compChildren.style.getView(); const rowStyle = compChildren.rowStyle.getView(); const headerStyle = compChildren.headerStyle.getView(); @@ -768,57 +786,64 @@ export function TableCompView(props: { return ( -
- {toolbar.position === "above" && toolbarView} - - expandable={{ - ...expansion.expandableConfig, - childrenColumnName: supportChildren - ? COLUMN_CHILDREN_KEY - : "OB_CHILDREN_KEY_PLACEHOLDER", - fixed: "left", - onExpand: (expanded) => { - if(expanded) handleChangeEvent('rowExpand') + + + + + expandable={{ + ...expansion.expandableConfig, + childrenColumnName: supportChildren + ? COLUMN_CHILDREN_KEY + : "OB_CHILDREN_KEY_PLACEHOLDER", + fixed: "left", + onExpand: (expanded) => { + if(expanded) handleChangeEvent('rowExpand') + } + }} + rowColorFn={compChildren.rowColor.getView() as any} + rowHeightFn={compChildren.rowHeight.getView() as any} + {...compChildren.selection.getView()(onEvent)} + bordered={compChildren.showHeaderGridBorder.getView()} + onChange={(pagination, filters, sorter, extra) => { + onTableChange(pagination, filters, sorter, extra, comp.dispatch, onEvent); + }} + showHeader={!compChildren.hideHeader.getView()} + columns={antdColumns} + columnsStyle={columnsStyle} + viewModeResizable={compChildren.viewModeResizable.getView()} + dataSource={pageDataInfo.data} + size={compChildren.size.getView()} + rowAutoHeight={rowAutoHeight} + tableLayout="fixed" + loading={ + loading || + // fixme isLoading type + (compChildren.showDataLoadSpinner.getView() && + (compChildren.data as any).isLoading()) || + compChildren.loading.getView() } - }} - rowColorFn={compChildren.rowColor.getView() as any} - rowHeightFn={compChildren.rowHeight.getView() as any} - {...compChildren.selection.getView()(onEvent)} - bordered={!compChildren.hideBordered.getView()} - onChange={(pagination, filters, sorter, extra) => { - onTableChange(pagination, filters, sorter, extra, comp.dispatch, onEvent); - }} - showHeader={!compChildren.hideHeader.getView()} - columns={antdColumns} - columnsStyle={columnsStyle} - viewModeResizable={compChildren.viewModeResizable.getView()} - dataSource={pageDataInfo.data} - size={compChildren.size.getView()} - rowAutoHeight={rowAutoHeight} - tableLayout="fixed" - loading={ - loading || - // fixme isLoading type - (compChildren.showDataLoadSpinner.getView() && - (compChildren.data as any).isLoading()) || - compChildren.loading.getView() - } - /> + /> + + + {expansion.expandModalView} + + {toolbar.position === "below" && toolbarView} - - {expansion.expandModalView} - - -
+ + ); } diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx index 334c59639..f282cbec9 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx @@ -469,9 +469,6 @@ export function compTablePropertyView {comp.children.hideHeader.propertyView({ label: trans("table.hideHeader"), })} - {comp.children.hideBordered.propertyView({ - label: trans("table.hideBordered"), - })} {comp.children.viewModeResizable.propertyView({ label: trans("table.viewModeResizable"), tooltip: trans("table.viewModeResizableTooltip"), @@ -510,14 +507,19 @@ export function compTablePropertyView {comp.children.style.getPropertyView()}
+ {comp.children.showHeaderGridBorder.propertyView({ + label: trans("table.showHeaderGridBorder"), + })} {comp.children.headerStyle.getPropertyView()}
{comp.children.toolbarStyle.getPropertyView()}
+ {comp.children.showRowGridBorder.propertyView({ + label: trans("table.showRowGridBorder"), + })} {comp.children.rowStyle.getPropertyView()} - {comp.children.rowAutoHeight.getPropertyView()} {comp.children.rowHeight.getPropertyView()} {comp.children.rowColor.getPropertyView()} diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx index 3509ce4af..d11f8f55f 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx @@ -58,7 +58,7 @@ const getStyle = ( padding: 13px 12px; position: sticky; postion: -webkit-sticky; - left: 0; + left: 0px !important; ${fixedToolbar && `z-index: 99;`}; ${fixedToolbar && position === 'below' && `bottom: 0;`}; diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx index d4cc986b8..b0195d81c 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx @@ -170,7 +170,9 @@ export type RowHeightViewType = (param: { }) => string; const tableChildrenMap = { - hideBordered: BoolControl, + // hideBordered: BoolControl, + showHeaderGridBorder: BoolControl, + showRowGridBorder: BoolControl, hideHeader: BoolControl, fixedHeader: BoolControl, autoHeight: withDefault(AutoHeightControl, "auto"), diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index b9231a536..17a6a5f47 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -684,7 +684,6 @@ const LinkTextStyle = [ export const TableStyle = [ MARGIN, - PADDING, ...BG_STATIC_BORDER_RADIUS, { name: "borderWidth", @@ -721,8 +720,6 @@ export const TableStyle = [ ] as const; export const TableToolbarStyle = [ - MARGIN, - PADDING, { name: "toolbarBackground", label: trans("style.toolbarBackground"), @@ -1205,3 +1202,5 @@ export function marginCalculator(margin: string) { return parseInt(marginArr[0]?.replace(/[^\d.]/g, "") || "0") + parseInt(marginArr[2]?.replace(/[^\d.]/g, "") || "0") } } +export type { ThemeDetail }; + diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index ef8d3d165..83fe90c45 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -1270,7 +1270,9 @@ export const en = { "fixedHeaderTooltip": "Header Will Be Fixed for Vertically Scrollable Table", "fixedToolbar": "Fixed Toolbar", "fixedToolbarTooltip": "Toolbar Will Be Fixed for Vertically Scrollable Table Based on Position", - "hideBordered": "Hide Column Border", + "hideBordered": "Show Resize Handles", + "showHeaderGridBorder": "Show Header Grid Border", + "showRowGridBorder": "Show Row Grid Border", "deleteColumn": "Delete Column", "confirmDeleteColumn": "Confirm Delete Column: ", "small": "S", diff --git a/client/packages/lowcoder/src/i18n/locales/zh.ts b/client/packages/lowcoder/src/i18n/locales/zh.ts index fe235979e..30ebc9393 100644 --- a/client/packages/lowcoder/src/i18n/locales/zh.ts +++ b/client/packages/lowcoder/src/i18n/locales/zh.ts @@ -1239,6 +1239,8 @@ table: { fixedHeader: "固定表头", fixedHeaderTooltip: "垂直滚动表格的标题将被固定", hideBordered: "隐藏列边框", + "showHeaderGridBorder": "显示标题网格边框", + "showRowGridBorder": "显示行网格边框", deleteColumn: "删除列", confirmDeleteColumn: "确认删除列:", small: "小", From 1be2fc58f4346625ff1c094d95eada8f1708e8c3 Mon Sep 17 00:00:00 2001 From: FalkWolsky Date: Sun, 14 Jan 2024 12:14:22 +0100 Subject: [PATCH 4/5] Resize handles --- .../src/comps/comps/tableComp/tableComp.tsx | 4 +++ .../comps/comps/tableComp/tableCompView.tsx | 26 +++++++++---------- .../comps/tableComp/tablePropertyView.tsx | 4 +++ .../src/comps/comps/tableComp/tableTypes.tsx | 2 ++ .../packages/lowcoder/src/i18n/locales/en.ts | 2 ++ .../packages/lowcoder/src/i18n/locales/zh.ts | 3 +++ 6 files changed, 28 insertions(+), 13 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx index 65555c29f..031e1c4a5 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx @@ -64,6 +64,10 @@ export class TableImplComp extends TableInitComp implements IContainer { override autoHeight(): boolean { return this.children.autoHeight.getView(); } + + getTableAutoHeight() { + return this.children.autoHeight.getView(); + } private getSlotContainer() { return this.children.expansion.children.slot.getSelectedComp().getComp().children.container; diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx index 5e2e4a274..3ca24a609 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx @@ -57,7 +57,6 @@ const getStyle = ( const selectedRowBackground = genLinerGradient(rowStyle.selectedRowBackground); const hoverRowBackground = genLinerGradient(rowStyle.hoverRowBackground); const alternateBackground = genLinerGradient(rowStyle.alternateBackground); - // const tableAutoHeight = return css` .ant-table-body { @@ -123,7 +122,9 @@ const getStyle = ( `; }; -const TitleResizeHandle = styled.span` +const TitleResizeHandle = styled.span<{ + $visibleResizables: boolean; +}>` position: absolute; top: 0; right: -5px; @@ -135,10 +136,9 @@ const TitleResizeHandle = styled.span` const BackgroundWrapper = styled.div<{ $style: TableStyleType; - $tableAutoHeight?: boolean; + $tableAutoHeight: boolean; }>` - ${(props) => !props.$tableAutoHeight && ` height: calc(100% - ${props.$style.margin} - ${props.$style.margin}) !important`}; - ${(props) => props.$tableAutoHeight && ` height: calc(100% + ${props.$style.margin}`}; + ${(props) => !props.$tableAutoHeight && `height: calc(100% - ${props.$style.margin} - ${props.$style.margin});`} background: ${(props) => props.$style.background} !important; border: ${(props) => `${props.$style.borderWidth} solid ${props.$style.border} !important`}; border-radius: ${(props) => props.$style.radius} !important; @@ -435,7 +435,8 @@ const ResizeableTitle = (props: any) => { draggableOpts={{ enableUserSelectHack: false }} handle={(axis: ResizeHandleAxis, ref: ReactRef) => ( { e.preventDefault(); e.stopPropagation(); @@ -451,6 +452,7 @@ const ResizeableTitle = (props: any) => { type CustomTableProps = Omit, "components" | "columns"> & { columns: CustomColumnType[]; viewModeResizable: boolean; + visibleResizables: boolean; rowColorFn: RowColorViewType; rowHeightFn: RowHeightViewType; columnsStyle: TableColumnStyleType; @@ -673,12 +675,13 @@ export function TableCompView(props: { const [loading, setLoading] = useState(false); const { comp, onDownload, onRefresh } = props; const compChildren = comp.children; - const tableAutoHeight = compChildren.autoHeight.getView(); const style = compChildren.style.getView(); const rowStyle = compChildren.rowStyle.getView(); const headerStyle = compChildren.headerStyle.getView(); const toolbarStyle = compChildren.toolbarStyle.getView(); const rowAutoHeight = compChildren.rowAutoHeight.getView(); + const tableAutoHeight = comp.getTableAutoHeight(); + const visibleResizables = compChildren.visibleResizables.getView(); const columnsStyle = compChildren.columnsStyle.getView(); const changeSet = useMemo(() => compChildren.columns.getChangeSet(), [compChildren.columns]); const hasChange = useMemo(() => !_.isEmpty(changeSet), [changeSet]); @@ -785,11 +788,9 @@ export function TableCompView(props: { } return ( - + - + {toolbar.position === "above" && toolbarView} - - expandable={{ ...expansion.expandableConfig, @@ -824,6 +823,7 @@ export function TableCompView(props: { columns={antdColumns} columnsStyle={columnsStyle} viewModeResizable={compChildren.viewModeResizable.getView()} + visibleResizables={compChildren.visibleResizables.getView()} dataSource={pageDataInfo.data} size={compChildren.size.getView()} rowAutoHeight={rowAutoHeight} diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx index f282cbec9..7a7f1bff7 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx @@ -473,6 +473,10 @@ export function compTablePropertyView label: trans("table.viewModeResizable"), tooltip: trans("table.viewModeResizableTooltip"), })} + {comp.children.visibleResizables.propertyView({ + label: trans("table.visibleResizables"), + tooltip: trans("table.visibleResizablesTooltip"), + })}
{comp.children.pagination.getPropertyView()} diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx index b0195d81c..a3333a845 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx @@ -191,12 +191,14 @@ const tableChildrenMap = { searchText: StringControl, columnsStyle: withDefault(styleControl(TableColumnStyle), {borderWidth: '1px', radius: '0px'}), viewModeResizable: BoolControl, + visibleResizables: BoolControl, // sample data for regenerating columns dataRowExample: stateComp(null), onEvent: TableEventControl, loading: BoolCodeControl, rowColor: RowColorComp, rowAutoHeight: withDefault(AutoHeightControl, "auto"), + tableAutoHeight: withDefault(AutoHeightControl, "auto"), rowHeight: RowHeightComp, dynamicColumn: BoolPureControl, // todo: support object config diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index 83fe90c45..286836752 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -1191,6 +1191,8 @@ export const en = { "columnNum": "Columns", "viewModeResizable": "Column Width Adjusted by User", "viewModeResizableTooltip": "Whether Users Can Adjust Column Width.", + "visibleResizables": "Show Resize Handles", + "visibleResizablesTooltip": "Display visible Resize Handles in the Table Header.", "showFilter": "Show Filter Button", "showRefresh": "Show Refresh Button", "showDownload": "Show Download Button", diff --git a/client/packages/lowcoder/src/i18n/locales/zh.ts b/client/packages/lowcoder/src/i18n/locales/zh.ts index 30ebc9393..b7f24765e 100644 --- a/client/packages/lowcoder/src/i18n/locales/zh.ts +++ b/client/packages/lowcoder/src/i18n/locales/zh.ts @@ -1157,6 +1157,8 @@ table: { columnNum: "列数", viewModeResizable: "用户调整列宽", viewModeResizableTooltip: "是否允许调整列宽.", + "visibleResizables": "Show Resize Handles", + "visibleResizablesTooltip": "Display visible Resize Handles in the Table Header.", showFilter: "显示筛选按钮", showRefresh: "显示刷新按钮", showDownload: "显示下载按钮", @@ -1218,6 +1220,7 @@ table: { link: "链接", links: "多链接", tag: "标签", + select: "下拉单选", date: "日期", dateTime: "日期时间", badgeStatus: "状态", From 73715650b75831a0cca0c44b3e4804a3626da0f1 Mon Sep 17 00:00:00 2001 From: FalkWolsky Date: Sun, 14 Jan 2024 13:46:27 +0100 Subject: [PATCH 5/5] Color settings --- .../comps/comps/tableComp/tableCompView.tsx | 18 ++++--- .../comps/tableComp/tablePropertyView.tsx | 8 ++-- .../comps/tableComp/tableToolbarComp.tsx | 15 +++--- .../src/comps/comps/tableComp/tableTypes.tsx | 1 + .../comps/controls/styleControlConstants.tsx | 48 ++++--------------- .../packages/lowcoder/src/i18n/locales/en.ts | 4 +- 6 files changed, 36 insertions(+), 58 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx index 3ca24a609..3dad97666 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx @@ -122,9 +122,7 @@ const getStyle = ( `; }; -const TitleResizeHandle = styled.span<{ - $visibleResizables: boolean; -}>` +const TitleResizeHandle = styled.span` position: absolute; top: 0; right: -5px; @@ -157,6 +155,8 @@ const TableWrapper = styled.div<{ $toolbarPosition: "above" | "below" | "close"; $fixedHeader: boolean; $fixedToolbar: boolean; + $visibleResizables: boolean; + $showHRowGridBorder?: boolean; }>` overflow: unset !important; @@ -240,13 +240,15 @@ const TableWrapper = styled.div<{ &::before { background-color: ${(props) => props.$headerStyle.border}; + width: ${(props) => (props.$visibleResizables ? "1px" : "0px")} !important; } } } > thead > tr > th, > tbody > tr > td { - border-color: ${(props) => props.$style.border}; + border-color: ${(props) => props.$headerStyle.border}; + ${(props) => !props.$showHRowGridBorder && `border-bottom: 0px;`} } td { @@ -436,7 +438,6 @@ const ResizeableTitle = (props: any) => { handle={(axis: ResizeHandleAxis, ref: ReactRef) => ( { e.preventDefault(); e.stopPropagation(); @@ -682,6 +683,7 @@ export function TableCompView(props: { const rowAutoHeight = compChildren.rowAutoHeight.getView(); const tableAutoHeight = comp.getTableAutoHeight(); const visibleResizables = compChildren.visibleResizables.getView(); + const showHRowGridBorder = compChildren.showHRowGridBorder.getView(); const columnsStyle = compChildren.columnsStyle.getView(); const changeSet = useMemo(() => compChildren.columns.getChangeSet(), [compChildren.columns]); const hasChange = useMemo(() => !_.isEmpty(changeSet), [changeSet]); @@ -762,7 +764,7 @@ export function TableCompView(props: { const toolbarView = ( expandable={{ @@ -815,7 +819,7 @@ export function TableCompView(props: { rowColorFn={compChildren.rowColor.getView() as any} rowHeightFn={compChildren.rowHeight.getView() as any} {...compChildren.selection.getView()(onEvent)} - bordered={compChildren.showHeaderGridBorder.getView()} + bordered={compChildren.showRowGridBorder.getView()} onChange={(pagination, filters, sorter, extra) => { onTableChange(pagination, filters, sorter, extra, comp.dispatch, onEvent); }} diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx index 7a7f1bff7..58f8145c0 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx @@ -511,9 +511,6 @@ export function compTablePropertyView {comp.children.style.getPropertyView()}
- {comp.children.showHeaderGridBorder.propertyView({ - label: trans("table.showHeaderGridBorder"), - })} {comp.children.headerStyle.getPropertyView()}
@@ -521,7 +518,10 @@ export function compTablePropertyView
{comp.children.showRowGridBorder.propertyView({ - label: trans("table.showRowGridBorder"), + label: trans("table.showVerticalRowGridBorder"), + })} + {comp.children.showHRowGridBorder.propertyView({ + label: trans("table.showHorizontalRowGridBorder"), })} {comp.children.rowStyle.getPropertyView()} {comp.children.rowAutoHeight.getPropertyView()} diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx index d11f8f55f..d64ffc8b1 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx @@ -7,7 +7,7 @@ import { TableOnEventView } from "comps/comps/tableComp/tableTypes"; import { BoolControl } from "comps/controls/boolControl"; import { StringControl } from "comps/controls/codeControl"; import { dropdownControl } from "comps/controls/dropdownControl"; -import { defaultTheme, TableStyleType } from "comps/controls/styleControlConstants"; +import { defaultTheme, TableToolbarStyleType } from "comps/controls/styleControlConstants"; import { stateComp } from "comps/generators"; import { genRandomKey } from "comps/utils/idGenerator"; import { ThemeContext } from "comps/utils/themeContext"; @@ -46,19 +46,20 @@ const SaveChangeButtons = styled.div` `; const getStyle = ( - style: TableStyleType, + style: TableToolbarStyleType, filtered: boolean, theme: ThemeDetail, position: ToolbarRowType["position"], fixedToolbar: boolean, ) => { return css` - background-color: ${style.toolbarBackground}; + background-color: ${style.background}; // Implement horizontal scrollbar and vertical page number selection is not blocked padding: 13px 12px; position: sticky; postion: -webkit-sticky; left: 0px !important; + margin: ${style.margin} !important; ${fixedToolbar && `z-index: 99;`}; ${fixedToolbar && position === 'below' && `bottom: 0;`}; @@ -125,7 +126,7 @@ const getStyle = ( } .ant-pagination-item-active { - border-color: ${theme?.primary}; + border-color: ${style.border || theme?.primary}; a { color: ${theme?.textDark}; @@ -145,13 +146,13 @@ const getStyle = ( .ant-select-selector, .ant-pagination-options-quick-jumper input:hover, .ant-pagination-options-quick-jumper input:focus { - border-color: ${theme?.primary}; + border-color: ${style.border || theme?.primary}; } `; }; const ToolbarWrapper = styled.div<{ - $style: TableStyleType; + $style: TableToolbarStyleType; $filtered: boolean; $theme: ThemeDetail; $position: ToolbarRowType["position"]; @@ -711,7 +712,7 @@ type ToolbarRowType = ConstructorToView; export function TableToolbar(props: { toolbar: ToolbarRowType; - $style: TableStyleType; + $style: TableToolbarStyleType; pagination: PaginationProps; columns: Array; onRefresh: () => void; diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx index a3333a845..3b8458741 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx @@ -173,6 +173,7 @@ const tableChildrenMap = { // hideBordered: BoolControl, showHeaderGridBorder: BoolControl, showRowGridBorder: BoolControl, + showHRowGridBorder: BoolControl, hideHeader: BoolControl, fixedHeader: BoolControl, autoHeight: withDefault(AutoHeightControl, "auto"), diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 17a6a5f47..cd39479fe 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -157,7 +157,10 @@ export function handleToSelectedRow(color: string, primary: string = defaultThem // return table header background color export function handleToHeadBg(color: string) { if (toHex(color) === SURFACE_COLOR) { - return "#FAFAFA"; + return darkenColor(color, 0.06); + } + if (toHex(color) === "#000000") { + return SECOND_SURFACE_COLOR; } if (isDarkColor(color)) { return darkenColor(color, 0.06); @@ -690,60 +693,29 @@ export const TableStyle = [ label: trans("style.borderWidth"), borderWidth: "borderWidth", }, - { - name: "headerBackground", - label: trans("style.tableHeaderBackground"), - depName: "background", - transformer: handleToHeadBg, - }, - { - name: "headerText", - label: trans("style.tableHeaderText"), - depName: "headerBackground", - depType: DEP_TYPE.CONTRAST_TEXT, - transformer: contrastText, - }, - { - name: "toolbarBackground", - label: trans("style.toolbarBackground"), - depName: "background", - depType: DEP_TYPE.SELF, - transformer: toSelf, - }, - { - name: "toolbarText", - label: trans("style.toolbarText"), - depName: "toolbarBackground", - depType: DEP_TYPE.CONTRAST_TEXT, - transformer: contrastText, - }, ] as const; export const TableToolbarStyle = [ - { - name: "toolbarBackground", - label: trans("style.toolbarBackground"), - depName: "background", - depType: DEP_TYPE.SELF, - transformer: toSelf, - }, + MARGIN, + getBackground(), + getStaticBorder(), { name: "toolbarText", label: trans("style.toolbarText"), depName: "toolbarBackground", depType: DEP_TYPE.CONTRAST_TEXT, - transformer: contrastText, + transformer: toSelf, }, ] as const; export const TableHeaderStyle = [ + MARGIN, { name: "headerBackground", label: trans("style.tableHeaderBackground"), - depName: "background", + depName: "headerBackground", transformer: handleToHeadBg, }, - MARGIN, getStaticBorder(), { name: "borderWidth", diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index 286836752..53d461ed4 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -1273,8 +1273,8 @@ export const en = { "fixedToolbar": "Fixed Toolbar", "fixedToolbarTooltip": "Toolbar Will Be Fixed for Vertically Scrollable Table Based on Position", "hideBordered": "Show Resize Handles", - "showHeaderGridBorder": "Show Header Grid Border", - "showRowGridBorder": "Show Row Grid Border", + "showVerticalRowGridBorder": "Show vertical Row Grid Border", + "showHorizontalRowGridBorder": "Show horizontal Row Grid Border", "deleteColumn": "Delete Column", "confirmDeleteColumn": "Confirm Delete Column: ", "small": "S",