From 6694d33cfb30737ea6ac5e4a43dfa1271e2c4620 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 16 Oct 2020 15:15:00 +0100 Subject: [PATCH] Update template auto screens --- .../store/screenTemplates/newRowScreen.js | 2 +- .../store/screenTemplates/rowDetailScreen.js | 4 +- .../store/screenTemplates/rowListScreen.js | 158 ++++++++++++------ 3 files changed, 109 insertions(+), 55 deletions(-) diff --git a/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js b/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js index 708c9d80ee..94b80c824f 100644 --- a/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js +++ b/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js @@ -197,7 +197,7 @@ const createScreen = table => ({ "margin-left": "16px", }, hover: { - background: "#9e9e9e", + background: "#4285f4", }, active: {}, selected: {}, diff --git a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js index 5e30420728..6173559fb9 100644 --- a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js +++ b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js @@ -204,7 +204,7 @@ const createScreen = (table, heading) => ({ }, hover: { background: "transparent", - color: "#000000", + color: "#4285f4", }, active: {}, selected: {}, @@ -246,7 +246,7 @@ const createScreen = (table, heading) => ({ "font-size": "14px", }, hover: { - background: "#9e9e9e", + background: "#4285f4", }, active: {}, selected: {}, diff --git a/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js b/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js index c01fc9e3ae..2935d36ce1 100644 --- a/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js +++ b/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js @@ -12,7 +12,7 @@ export const ROW_LIST_TEMPLATE = "ROW_LIST_TEMPLATE" const createScreen = table => ({ props: { - _id: "", + _id: "c7365379815e4457dbe703a886c2da43b", _component: "@budibase/standard-components/container", _styles: { normal: {}, @@ -23,14 +23,23 @@ const createScreen = table => ({ type: "div", _children: [ { - _id: "", + _id: "cf51241fc063d4d87be032dd509fe0244", _component: "@budibase/standard-components/container", _styles: { normal: { - display: "flex", - "flex-direction": "row", - "justify-content": "space-between", - "align-items": "center", + background: "white", + "border-radius": "0.5rem", + "box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)", + margin: "auto", + "margin-top": "20px", + "border-width": "2px", + "border-color": "rgba(0, 0, 0, 0.1)", + "border-style": "None", + "padding-top": "48px", + "padding-bottom": "48px", + "padding-right": "48px", + "padding-left": "48px", + "margin-bottom": "20px", }, hover: {}, active: {}, @@ -40,69 +49,114 @@ const createScreen = table => ({ className: "", onLoad: [], type: "div", - _instanceName: "Header", + _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610", + _instanceName: "Container", _children: [ { - _id: "", - _component: "@budibase/standard-components/heading", + _id: "c73294c301fd145aabe9bbbbd96a150ac", + _component: "@budibase/standard-components/container", _styles: { - normal: {}, + normal: { + display: "flex", + "flex-direction": "row", + "justify-content": "space-between", + "align-items": "center", + "margin-bottom": "32px", + }, hover: {}, active: {}, selected: {}, }, _code: "", className: "", - text: `${table.name} List`, - type: "h1", - _instanceName: "Heading 1", - _children: [], - }, - { - _id: "", - _component: "@budibase/standard-components/button", - _styles: { - normal: {}, - hover: {}, - active: {}, - selected: {}, - }, - _code: "", - text: "Create New", - className: "", - disabled: false, - onClick: [ + onLoad: [], + type: "div", + _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610", + _instanceName: "Title Container", + _children: [ { - parameters: { - url: `/${table.name}/new`, + _id: "c2b77901df95a4d1ca7204c58300bc94b", + _component: "@budibase/standard-components/heading", + _styles: { + normal: { + margin: "0px", + flex: "1 1 auto", + "text-transform": "capitalize", + }, + hover: {}, + active: {}, + selected: {}, }, - "##eventHandlerType": "Navigate To", + _code: "", + className: "", + text: table.name, + type: "h3", + _instanceName: "Title", + _children: [], + }, + { + _id: "c12a82d77baf24ca9922ea0af7cd4f723", + _component: "@budibase/standard-components/button", + _styles: { + normal: { + background: "#000000", + "border-width": "0", + "border-style": "None", + color: "#fff", + "font-family": "Inter", + "font-weight": "500", + "font-size": "14px", + }, + hover: { + background: "#4285f4", + }, + active: {}, + selected: {}, + }, + _code: "", + text: "Create New", + className: "", + disabled: false, + onClick: [ + { + parameters: { + url: `/${table.name.toLowerCase()}/new`, + }, + "##eventHandlerType": "Navigate To", + }, + ], + _instanceName: "New Button", + _children: [], }, ], - _instanceName: "Create New Button", + }, + { + _id: "ca686a2ed89c943e6bafb63fa66a3ead3", + _component: "@budibase/standard-components/datagrid", + _styles: { + normal: {}, + hover: {}, + active: {}, + selected: {}, + }, + _code: "", + datasource: { + label: table.name, + name: `all_${table._id}`, + tableId: table._id, + type: "table", + }, + editable: false, + theme: "alpine", + height: "540", + pagination: true, + _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610", + _instanceName: "Grid", _children: [], + detailUrl: `${table.name.toLowerCase()}/:id`, }, ], }, - { - _id: "", - _component: "@budibase/standard-components/datagrid", - _styles: { - normal: {}, - hover: {}, - active: {}, - selected: {}, - }, - _code: "", - datasource: { - label: "Deals", - name: `all_${table._id}`, - tableId: table._id, - type: "table", - }, - _instanceName: `${table.name} Table`, - _children: [], - }, ], _instanceName: `${table.name} - List`, _code: "",