From 2124c85a09a7d15a93a70269d190d8469a4cce5f Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 10 Jun 2021 09:48:08 +0100 Subject: [PATCH] Update autoscreens to have new container props --- .../createFromScratchScreen.js | 6 +----- .../store/screenTemplates/newRowScreen.js | 1 - .../store/screenTemplates/rowDetailScreen.js | 1 - .../store/screenTemplates/rowListScreen.js | 19 ++++++++++++------- .../store/screenTemplates/utils/Screen.js | 11 +++++------ .../screenTemplates/utils/commonComponents.js | 19 ++++++++++++------- packages/standard-components/manifest.json | 4 ++-- .../standard-components/src/Container.svelte | 4 ++-- 8 files changed, 34 insertions(+), 31 deletions(-) diff --git a/packages/builder/src/builderStore/store/screenTemplates/createFromScratchScreen.js b/packages/builder/src/builderStore/store/screenTemplates/createFromScratchScreen.js index 1f30d974ef..817dfeceea 100644 --- a/packages/builder/src/builderStore/store/screenTemplates/createFromScratchScreen.js +++ b/packages/builder/src/builderStore/store/screenTemplates/createFromScratchScreen.js @@ -6,9 +6,5 @@ export default { } const createScreen = () => { - return new Screen() - .mainType("div") - .component("@budibase/standard-components/container") - .instanceName("New Screen") - .json() + return new Screen().instanceName("New Screen").json() } diff --git a/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js b/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js index 980f71742b..c46564b69b 100644 --- a/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js +++ b/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js @@ -28,7 +28,6 @@ function generateTitleContainer(table, formId) { const createScreen = table => { const screen = new Screen() - .component("@budibase/standard-components/container") .instanceName(`${table.name} - New`) .route(newRowUrl(table)) diff --git a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js index f15f1de5a4..4abe664e85 100644 --- a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js +++ b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js @@ -149,7 +149,6 @@ const createScreen = table => { provider.addChild(repeater) return new Screen() - .component("@budibase/standard-components/container") .instanceName(`${table.name} - Detail`) .route(rowDetailUrl(table)) .addChild(provider) diff --git a/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js b/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js index f31c4c12d2..58931d4e0c 100644 --- a/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js +++ b/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js @@ -56,14 +56,15 @@ function generateTitleContainer(table) { .text(table.name) return new Component("@budibase/standard-components/container") - .type("div") .normalStyle({ - display: "flex", - "flex-direction": "row", - "justify-content": "space-between", - "align-items": "center", "margin-bottom": "32px", }) + .customProps({ + direction: "row", + hAlign: "stretch", + vAlign: "middle", + size: "shrink", + }) .instanceName("Title Container") .addChild(heading) .addChild(newButton) @@ -137,13 +138,17 @@ const createScreen = table => { "padding-left": "48px", "margin-bottom": "20px", }) - .type("div") + .customProps({ + direction: "column", + hAlign: "stretch", + vAlign: "top", + size: "shrink", + }) .instanceName("Container") .addChild(generateTitleContainer(table)) .addChild(provider) return new Screen() - .component("@budibase/standard-components/container") .route(rowListUrl(table)) .instanceName(`${table.name} - List`) .addChild(mainContainer) diff --git a/packages/builder/src/builderStore/store/screenTemplates/utils/Screen.js b/packages/builder/src/builderStore/store/screenTemplates/utils/Screen.js index 79e1632ad2..24c7105492 100644 --- a/packages/builder/src/builderStore/store/screenTemplates/utils/Screen.js +++ b/packages/builder/src/builderStore/store/screenTemplates/utils/Screen.js @@ -8,7 +8,7 @@ export class Screen extends BaseStructure { layoutId: "layout_private_master", props: { _id: uuid(), - _component: "", + _component: "@budibase/standard-components/container", _styles: { normal: {}, hover: {}, @@ -17,6 +17,10 @@ export class Screen extends BaseStructure { }, _children: [], _instanceName: "", + direction: "column", + hAlign: "stretch", + vAlign: "top", + size: "grow", }, routing: { route: "", @@ -41,11 +45,6 @@ export class Screen extends BaseStructure { return this } - mainType(type) { - this._json.type = type - return this - } - route(route) { this._json.routing.route = route return this diff --git a/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js b/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js index e234a1a770..579252a9dd 100644 --- a/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js +++ b/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js @@ -35,7 +35,6 @@ export function makeLinkComponent(tableName) { export function makeMainForm() { return new Component("@budibase/standard-components/form") - .type("div") .normalStyle({ width: "700px", padding: "0px", @@ -79,11 +78,16 @@ export function makeBreadcrumbContainer(tableName, text, capitalise = false) { .instanceName("Identifier") return new Component("@budibase/standard-components/container") - .type("div") .normalStyle({ "font-size": "14px", color: "#757575", }) + .customProps({ + direction: "row", + hAlign: "left", + vAlign: "middle", + size: "shrink", + }) .instanceName("Breadcrumbs") .addChild(link) .addChild(arrowText) @@ -149,15 +153,16 @@ export function makeTitleContainer(title) { .text(title) return new Component("@budibase/standard-components/container") - .type("div") .normalStyle({ - display: "flex", - "flex-direction": "row", - "justify-content": "space-between", - "align-items": "center", "margin-top": "32px", "margin-bottom": "32px", }) + .customProps({ + direction: "row", + hAlign: "stretch", + vAlign: "middle", + size: "shrink", + }) .instanceName("Title Container") .addChild(heading) } diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json index 7e974b3feb..3da3579346 100644 --- a/packages/standard-components/manifest.json +++ b/packages/standard-components/manifest.json @@ -39,8 +39,8 @@ "barIcon": "AlignLeft" }, { - "label": "Middle", - "value": "middle", + "label": "Center", + "value": "center", "barIcon": "AlignCenter" }, { diff --git a/packages/standard-components/src/Container.svelte b/packages/standard-components/src/Container.svelte index 9c7e582c71..b271be9e45 100644 --- a/packages/standard-components/src/Container.svelte +++ b/packages/standard-components/src/Container.svelte @@ -56,7 +56,7 @@ .direction-column.vAlign-top { justify-content: flex-start; } - .direction-row.hAlign-middle, + .direction-row.hAlign-center, .direction-column.vAlign-middle { justify-content: center; } @@ -74,7 +74,7 @@ align-items: flex-start; } .direction-row.vAlign-middle, - .direction-column.hAlign-middle { + .direction-column.hAlign-center { align-items: center; } .direction-row.vAlign-bottom,