diff --git a/packages/builder/src/templates/Component.js b/packages/builder/src/templates/Component.js index ccd075161f..8f70cbe92b 100644 --- a/packages/builder/src/templates/Component.js +++ b/packages/builder/src/templates/Component.js @@ -54,4 +54,28 @@ export class Component extends BaseStructure { getId() { return this._json._id } + + gridDesktopColSpan(start, end) { + this._json._styles.normal["--grid-desktop-col-start"] = start + this._json._styles.normal["--grid-desktop-col-end"] = end + return this + } + + gridDesktopRowSpan(start, end) { + this._json._styles.normal["--grid-desktop-row-start"] = start + this._json._styles.normal["--grid-desktop-row-end"] = end + return this + } + + gridMobileColSpan(start, end) { + this._json._styles.normal["--grid-mobile-col-start"] = start + this._json._styles.normal["--grid-mobile-col-end"] = end + return this + } + + gridMobileRowSpan(start, end) { + this._json._styles.normal["--grid-mobile-row-start"] = start + this._json._styles.normal["--grid-mobile-row-end"] = end + return this + } } diff --git a/packages/builder/src/templates/screenTemplating/table/inline.js b/packages/builder/src/templates/screenTemplating/table/inline.js index a11409c5c3..d218aa998a 100644 --- a/packages/builder/src/templates/screenTemplating/table/inline.js +++ b/packages/builder/src/templates/screenTemplating/table/inline.js @@ -9,16 +9,21 @@ const inline = ({ tableOrView, permissions, screens }) => { .customProps({ text: tableOrView.name, }) + .gridDesktopColSpan(1, 13) + .gridDesktopRowSpan(1, 3) const tableBlock = new Component("@budibase/standard-components/gridblock") .instanceName(`${tableOrView.name} - Table`) .customProps({ table: tableOrView.datasourceSelectFormat, }) + .gridDesktopColSpan(1, 13) + .gridDesktopRowSpan(3, 21) const screenTemplate = new Screen() .route(getValidRoute(screens, tableOrView.name, permissions.write)) .instanceName(`${tableOrView.name} - List`) + .customProps({ layout: "grid" }) .role(permissions.write) .autoTableId(tableOrView.id) .addChild(heading) diff --git a/packages/builder/src/templates/screenTemplating/table/modal.js b/packages/builder/src/templates/screenTemplating/table/modal.js index 078bb646fa..0dede08711 100644 --- a/packages/builder/src/templates/screenTemplating/table/modal.js +++ b/packages/builder/src/templates/screenTemplating/table/modal.js @@ -33,26 +33,22 @@ const modal = ({ tableOrView, permissions, screens }) => { type: "cta", }) - buttonGroup.instanceName(`${tableOrView.name} - Create`).customProps({ - hAlign: "right", - buttons: [createButton.json()], - }) - - const tableHeader = new Component("@budibase/standard-components/container") - .instanceName("Heading container") + buttonGroup + .instanceName(`${tableOrView.name} - Create`) .customProps({ - direction: "row", - hAlign: "stretch", + hAlign: "right", + buttons: [createButton.json()], }) + .gridDesktopColSpan(7, 13) + .gridDesktopRowSpan(1, 3) const heading = new Component("@budibase/standard-components/heading") .instanceName("Table heading") .customProps({ text: tableOrView.name, }) - - tableHeader.addChild(heading) - tableHeader.addChild(buttonGroup) + .gridDesktopColSpan(1, 7) + .gridDesktopRowSpan(1, 3) const createFormBlock = new Component( "@budibase/standard-components/formblock" @@ -134,13 +130,17 @@ const modal = ({ tableOrView, permissions, screens }) => { ], }) .instanceName(`${tableOrView.name} - Table`) + .gridDesktopColSpan(1, 13) + .gridDesktopRowSpan(3, 21) const template = new Screen() .route(getValidRoute(screens, tableOrView.name, permissions.write)) .instanceName(`${tableOrView.name} - List and details`) + .customProps({ layout: "grid" }) .role(permissions.write) .autoTableId(tableOrView.id) - .addChild(tableHeader) + .addChild(buttonGroup) + .addChild(heading) .addChild(tableBlock) .addChild(createRowModal) .addChild(detailsModal) diff --git a/packages/builder/src/templates/screenTemplating/table/newScreen.js b/packages/builder/src/templates/screenTemplating/table/newScreen.js index 4774d8e54c..956a325133 100644 --- a/packages/builder/src/templates/screenTemplating/table/newScreen.js +++ b/packages/builder/src/templates/screenTemplating/table/newScreen.js @@ -4,6 +4,7 @@ import { capitalise } from "helpers" import { makePropSafe as safe } from "@budibase/string-templates" import getValidRoute from "../getValidRoute" import { Helpers } from "@budibase/bbui" +import { head } from "lodash" const getTableScreenTemplate = ({ route, @@ -11,36 +12,41 @@ const getTableScreenTemplate = ({ createScreenRoute, tableOrView, permissions, + gridLayout, }) => { - const newButton = new Component("@budibase/standard-components/button") - .instanceName("New button") - .customProps({ - text: "Create row", - onClick: [ - { - "##eventHandlerType": "Navigate To", - parameters: { - type: "url", - url: createScreenRoute, - }, + const buttonGroup = new Component("@budibase/standard-components/buttongroup") + const createButton = new Component("@budibase/standard-components/button") + + createButton.customProps({ + onClick: [ + { + "##eventHandlerType": "Navigate To", + parameters: { + type: "url", + url: createScreenRoute, }, - ], + }, + ], + text: "Create row", + type: "cta", + }) + + buttonGroup + .instanceName(`${tableOrView.name} - Create`) + .customProps({ + hAlign: "right", + buttons: [createButton.json()], }) + .gridDesktopColSpan(7, 13) + .gridDesktopRowSpan(1, 3) const heading = new Component("@budibase/standard-components/heading") .instanceName("Table heading") .customProps({ text: tableOrView.name, }) - - const tableHeader = new Component("@budibase/standard-components/container") - .instanceName("Heading container") - .customProps({ - direction: "row", - hAlign: "stretch", - }) - .addChild(heading) - .addChild(newButton) + .gridDesktopColSpan(1, 7) + .gridDesktopRowSpan(1, 3) const updateScreenRouteSegments = updateScreenRoute.split(":id") if (updateScreenRouteSegments.length !== 2) { @@ -67,14 +73,18 @@ const getTableScreenTemplate = ({ }, ], }) + .gridDesktopColSpan(1, 13) + .gridDesktopRowSpan(3, 21) const template = new Screen() .route(route) .instanceName(`${tableOrView.name} - List`) + .customProps({ layout: gridLayout ? "grid" : "flex" }) .role(permissions.write) .autoTableId(tableOrView.id) - .addChild(tableHeader) .addChild(tableBlock) + .addChild(heading) + .addChild(buttonGroup) .json() return { @@ -300,6 +310,7 @@ const newScreen = ({ tableOrView, permissions, screens }) => { createScreenRoute, permissions, tableOrView, + gridLayout: true, }) const updateScreenTemplate = getUpdateScreenTemplate({ @@ -307,6 +318,7 @@ const newScreen = ({ tableOrView, permissions, screens }) => { tableScreenRoute, tableOrView, permissions, + gridLayout: false, }) const createScreenTemplate = getCreateScreenTemplate({ @@ -314,6 +326,7 @@ const newScreen = ({ tableOrView, permissions, screens }) => { tableScreenRoute, tableOrView, permissions, + gridLayout: false, }) return [tableScreenTemplate, updateScreenTemplate, createScreenTemplate] diff --git a/packages/builder/src/templates/screenTemplating/table/sidePanel.js b/packages/builder/src/templates/screenTemplating/table/sidePanel.js index 61b69117ce..ef88597733 100644 --- a/packages/builder/src/templates/screenTemplating/table/sidePanel.js +++ b/packages/builder/src/templates/screenTemplating/table/sidePanel.js @@ -31,27 +31,22 @@ const sidePanel = ({ tableOrView, permissions, screens }) => { type: "cta", }) - buttonGroup.instanceName(`${tableOrView.name} - Create`).customProps({ - hAlign: "right", - buttons: [createButton.json()], - }) - - const tableHeader = new Component("@budibase/standard-components/container") - .instanceName("Heading container") + buttonGroup + .instanceName(`${tableOrView.name} - Create`) .customProps({ - layout: "flex", - direction: "row", - hAlign: "stretch", + hAlign: "right", + buttons: [createButton.json()], }) + .gridDesktopColSpan(7, 13) + .gridDesktopRowSpan(1, 3) const heading = new Component("@budibase/standard-components/heading") .instanceName("Table heading") .customProps({ text: tableOrView.name, }) - - tableHeader.addChild(heading) - tableHeader.addChild(buttonGroup) + .gridDesktopColSpan(1, 7) + .gridDesktopRowSpan(1, 3) const createFormBlock = new Component( "@budibase/standard-components/formblock" @@ -131,13 +126,17 @@ const sidePanel = ({ tableOrView, permissions, screens }) => { ], }) .instanceName(`${tableOrView.name} - Table`) + .gridDesktopColSpan(1, 13) + .gridDesktopRowSpan(3, 21) const template = new Screen() .route(getValidRoute(screens, tableOrView.name, permissions.write)) .instanceName(`${tableOrView.name} - List and details`) + .customProps({ layout: "grid" }) .role(permissions.write) .autoTableId(tableOrView.id) - .addChild(tableHeader) + .addChild(heading) + .addChild(buttonGroup) .addChild(tableBlock) .addChild(createRowSidePanel) .addChild(detailsSidePanel)