From a3d1b959fc61872a8a4a72fc4f47f5899f4c7c21 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 5 Jul 2021 10:20:20 +0100 Subject: [PATCH] Update list and detail autoscreens to be theme aware and use new designs --- .../store/screenTemplates/newRowScreen.js | 2 - .../store/screenTemplates/rowDetailScreen.js | 45 +++++-------- .../store/screenTemplates/rowListScreen.js | 3 - .../screenTemplates/utils/commonComponents.js | 66 +++---------------- 4 files changed, 27 insertions(+), 89 deletions(-) diff --git a/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js b/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js index 23f2fd846..b890d42d5 100644 --- a/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js +++ b/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js @@ -38,8 +38,6 @@ const createScreen = table => { .instanceName("Form") .customProps({ actionType: "Create", - theme: "spectrum--lightest", - size: "spectrum--medium", dataSource: { label: table.name, tableId: table._id, diff --git a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js index b41b4085a..4afcb9aa6 100644 --- a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js +++ b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js @@ -26,36 +26,13 @@ export const ROW_DETAIL_TEMPLATE = "ROW_DETAIL_TEMPLATE" export const rowDetailUrl = table => sanitizeUrl(`/${table.name}/:id`) function generateTitleContainer(table, title, formId, repeaterId) { - // have to override style for this, its missing margin - const saveButton = makeSaveButton(table, formId).normalStyle({ - background: "#000000", - "border-width": "0", - "border-style": "None", - color: "#fff", - "font-weight": "600", - "font-size": "14px", - }) - + const saveButton = makeSaveButton(table, formId) const deleteButton = new Component("@budibase/standard-components/button") - .normalStyle({ - background: "transparent", - "border-width": "0", - "border-style": "None", - color: "#9e9e9e", - "font-weight": "600", - "font-size": "14px", - "margin-right": "8px", - "margin-left": "16px", - }) - .hoverStyle({ - background: "transparent", - color: "#4285f4", - }) - .customStyle(spectrumColor(700)) .text("Delete") .customProps({ - className: "", - disabled: false, + type: "secondary", + quiet: true, + size: "M", onClick: [ { parameters: { @@ -76,7 +53,19 @@ function generateTitleContainer(table, title, formId, repeaterId) { }) .instanceName("Delete Button") - return makeTitleContainer(title).addChild(deleteButton).addChild(saveButton) + const buttons = new Component("@budibase/standard-components/container") + .instanceName("Button Container") + .customProps({ + direction: "row", + hAlign: "right", + vAlign: "middle", + size: "shrink", + gap: "M", + }) + .addChild(deleteButton) + .addChild(saveButton) + + return makeTitleContainer(title).addChild(buttons) } const createScreen = table => { diff --git a/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js b/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js index bcdfb3a7d..ccf1fceb2 100644 --- a/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js +++ b/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js @@ -100,9 +100,6 @@ const createScreen = table => { return new Screen() .route(rowListUrl(table)) .instanceName(`${table.name} - List`) - .normalStyle({ - ["padding-top"]: "32px", - }) .addChild(generateTitleContainer(table)) .addChild(provider) .json() diff --git a/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js b/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js index 93361e6c1..aaf25f6d0 100644 --- a/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js +++ b/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js @@ -8,23 +8,16 @@ export function spectrumColor(number) { // God knows why. It seems to think optional chaining further down the // file is invalid if the word g-l-o-b-a-l is found - hence the reason this // statement is split into parts. - return "color: var(--spectrum-glo" + `bal-color-gray-${number});` + return "var(--spectrum-glo" + `bal-color-gray-${number})` } export function makeLinkComponent(tableName) { return new Component("@budibase/standard-components/link") - .normalStyle({ - color: "#757575", - "text-transform": "capitalize", - }) - .hoverStyle({ - color: "#4285f4", - }) - .customStyle(spectrumColor(700)) .text(tableName) .customProps({ url: `/${tableName.toLowerCase()}`, openInNewTab: false, + color: spectrumColor(700), size: "S", align: "left", }) @@ -33,19 +26,12 @@ export function makeLinkComponent(tableName) { export function makeMainForm() { return new Component("@budibase/standard-components/form") .normalStyle({ - width: "700px", - padding: "0px", - "border-radius": "0.5rem", - "box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)", - "padding-top": "48px", - "padding-bottom": "48px", - "padding-right": "48px", - "padding-left": "48px", + width: "600px", }) .instanceName("Form") } -export function makeBreadcrumbContainer(tableName, text, capitalise = false) { +export function makeBreadcrumbContainer(tableName, text) { const link = makeLinkComponent(tableName).instanceName("Back Link") const arrowText = new Component("@budibase/standard-components/text") @@ -53,42 +39,27 @@ export function makeBreadcrumbContainer(tableName, text, capitalise = false) { .normalStyle({ "margin-right": "4px", "margin-left": "4px", - "margin-top": "0px", - "margin-bottom": "0px", }) - .customStyle(spectrumColor(700)) .text(">") .instanceName("Arrow") .customProps({ + color: spectrumColor(700), size: "S", align: "left", }) - const textStyling = { - color: "#000000", - "margin-top": "0px", - "margin-bottom": "0px", - } - if (capitalise) { - textStyling["text-transform"] = "capitalize" - } const identifierText = new Component("@budibase/standard-components/text") - .type("none") - .normalStyle(textStyling) - .customStyle(spectrumColor(700)) .text(text) .instanceName("Identifier") .customProps({ + color: spectrumColor(700), size: "S", align: "left", }) return new Component("@budibase/standard-components/container") - .normalStyle({ - "font-size": "14px", - color: "#757575", - }) .customProps({ + gap: "N", direction: "row", hAlign: "left", vAlign: "middle", @@ -102,22 +73,10 @@ export function makeBreadcrumbContainer(tableName, text, capitalise = false) { export function makeSaveButton(table, formId) { return new Component("@budibase/standard-components/button") - .normalStyle({ - background: "#000000", - "border-width": "0", - "border-style": "None", - color: "#fff", - "font-weight": "600", - "font-size": "14px", - "margin-left": "16px", - }) - .hoverStyle({ - background: "#4285f4", - }) .text("Save") .customProps({ - className: "", - disabled: false, + type: "primary", + size: "M", onClick: [ { "##eventHandlerType": "Validate Form", @@ -145,12 +104,6 @@ export function makeSaveButton(table, formId) { export function makeTitleContainer(title) { const heading = new Component("@budibase/standard-components/heading") - .normalStyle({ - margin: "0px", - flex: "1 1 auto", - }) - .customStyle(spectrumColor(900)) - .type("h2") .instanceName("Title") .text(title) .customProps({ @@ -168,6 +121,7 @@ export function makeTitleContainer(title) { hAlign: "stretch", vAlign: "middle", size: "shrink", + gap: "M", }) .instanceName("Title Container") .addChild(heading)