diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte index abf226048b..239cebdd0a 100644 --- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte +++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte @@ -25,16 +25,10 @@ name: "Screen Placeholder", route: "*", props: { - "_id": "49c3d0a2-7028-46f0-b004-7eddf62ad01c", + "_id": "screenslot-placeholder", "_component": "@budibase/standard-components/container", "_styles": { - "normal": { - "padding": "0px", - "font-family": "Roboto", - "border-width": "0", - "border-style": "None", - "text-align": "center" - }, + "normal": {}, "hover": {}, "active": {}, "selected": {} @@ -45,47 +39,87 @@ "type": "div", "_children": [ { - "_id": "335428f7-f9ca-4acd-9e76-71bc8ad27324", - "_component": "@budibase/standard-components/container", - "_styles": { - "normal": { - "padding": "16px", - "border-style": "Dashed", - "border-width": "2px", - "border-color": "#8a8989fa" - }, - "hover": {}, - "active": {}, - "selected": {} + "_id": "51a1b494-0fa4-49c3-90cc-c2a6c7a3f888", + "_component": "@budibase/standard-components/container", + "_styles": { + "normal": { + "display": "flex", + "flex-direction": "column", + "align-items": "center" }, - "_code": "", - "className": "", - "onLoad": [], - "type": "div", - "_instanceId": "inst_b3b4e95_ab0df02dda3f4d8eb4b35eea2968bad3", - "_instanceName": "Container", - "_children": [ - { - "_id": "ddb6a225-33ba-4ba8-91da-bc6a2697ebf9", - "_component": "@budibase/standard-components/heading", - "_styles": { - "normal": { - "font-family": "Roboto" - }, - "hover": {}, - "active": {}, - "selected": {} + "hover": {}, + "active": {}, + "selected": {} + }, + "_code": "", + "className": "", + "onLoad": [], + "type": "div", + "_instanceId": "inst_40d9036_4c81114e2bf145ab8721978c66e09a10", + "_instanceName": "Container", + "_children": [ + { + "_id": "90a52cd0-f215-46c1-b29b-e28f9e7edf72", + "_component": "@budibase/standard-components/heading", + "_styles": { + "normal": { + "width": "500px", + "padding": "8px" }, - "_code": "", - "className": "", - "text": "Your screens go here", - "type": "h1", - "_instanceId": "inst_b3b4e95_ab0df02dda3f4d8eb4b35eea2968bad3", - "_instanceName": "Heading", - "_children": [] - } - ] - } + "hover": {}, + "active": {}, + "selected": {} + }, + "_code": "", + "className": "", + "text": "Screenslot", + "type": "h1", + "_instanceId": "inst_40d9036_4c81114e2bf145ab8721978c66e09a10", + "_instanceName": "Heading", + "_children": [] + }, + { + "_id": "71a3da65-72c6-4c43-8c6a-49871c07b77d", + "_component": "@budibase/standard-components/text", + "_styles": { + "normal": { + "max-width": "", + "text-align": "left", + "width": "500px", + "padding": "8px" + }, + "hover": {}, + "active": {}, + "selected": {} + }, + "_code": "", + "text": "The screens that you create will be displayed inside this box.", + "type": "none", + "_instanceId": "inst_40d9036_4c81114e2bf145ab8721978c66e09a10", + "_instanceName": "Text" + }, + { + "_id": "8af80374-460d-497b-a5d8-7dd2ec4a7bbc", + "_component": "@budibase/standard-components/text", + "_styles": { + "normal": { + "max-width": "", + "text-align": "left", + "width": "500px", + "padding": "8px" + }, + "hover": {}, + "active": {}, + "selected": {} + }, + "_code": "", + "text": "This box is just a placeholder, to show you the position of screens.", + "type": "none", + "_instanceId": "inst_40d9036_4c81114e2bf145ab8721978c66e09a10", + "_instanceName": "Text" + } + ] + } ], "_instanceName": "Content Placeholder" }, diff --git a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js index b78f882fe1..e269e3166e 100644 --- a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js +++ b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js @@ -24,6 +24,16 @@ export default ` text-transform: uppercase; font-weight: bold; } + + .container-screenslot-placeholder { + padding: 20px; + text-align: center; + border-style: dashed !important; + border-width: 1px; + color: #806fde; + background: #e9e6ff44; + height: 100%; + } -{#if selectedModel.schema && Object.keys(selectedModel.schema).length === 0} - -{:else if $backendUiStore.selectedDatabase._id && selectedModel.name} +{#if $backendUiStore.selectedDatabase._id && selectedModel.name} {:else} create your first table to start building diff --git a/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json b/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json index a86d485fe5..032848e68e 100644 --- a/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json +++ b/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json @@ -5,13 +5,58 @@ "componentLibraries": ["@budibase/standard-components", "@budibase/materialdesign-components"], "props" : { "_id": "private-master-root", - "_component": "@budibase/standard-components/container", - "_children": [ + "_component": "@budibase/standard-components/container", + "_children": [ + { + "_id": "c32dd256-a61c-4c41-876e-95e91c5e3a43", + "_component": "@budibase/standard-components/container", + "_styles": { + "normal": { + "background": "#e8e8ef", + "padding": "8px", + "color": "#393C44", + "display": "N/A", + "flex-direction": "column" + }, + "hover": {}, + "active": {}, + "selected": {} + }, + "_code": "", + "className": "", + "onLoad": [], + "type": "div", + "_instanceId": "inst_1808f0d_e1277174d255421784ef2467d470abc8", + "_instanceName": "Container", + "_children": [ + { + "_id": "fbd9520f-6b34-4e3e-828d-0197144568a1", + "_component": "@budibase/standard-components/heading", + "_styles": { + "normal": {}, + "hover": {}, + "active": {}, + "selected": {} + }, + "_code": "", + "className": "", + "text": "{{ name }}", + "type": "h1", + "_instanceId": "inst_1808f0d_e1277174d255421784ef2467d470abc8", + "_instanceName": "Heading", + "_children": [] + } + ] + }, { "_id": "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967", "_component": "##builtin/screenslot", "_styles": { - "normal": {}, + "normal": { + "padding": "8px", + "align-items": "flex-start", + "height": "100vh" + }, "hover": {}, "active": {}, "selected": {} @@ -20,14 +65,22 @@ "_children": [] } ], - "type": "div", - "_styles": { - "active": {}, - "hover": {}, - "normal": {}, - "selected": {} - }, - "_code": "" + "type": "div", + "_styles": { + "active": {}, + "hover": {}, + "normal": { + "display": "flex", + "flex-direction": "column", + "align-items": "stretch", + "justify-content": "flex-start", + "height": "100vh" + }, + "selected": {} + }, + "_code": "", + "className": "", + "onLoad": [] }, "_css": "", "uiFunctions": "" diff --git a/packages/standard-components/src/DataTable.svelte b/packages/standard-components/src/DataTable.svelte index e6f097314c..6782a9925c 100644 --- a/packages/standard-components/src/DataTable.svelte +++ b/packages/standard-components/src/DataTable.svelte @@ -8,6 +8,16 @@ let headers = [] let store = _bb.store + const shouldDisplayField = name => { + if (name.startsWith("_")) return false + // always 'record' + if (name === "type") return false + // tables are always tied to a single modelId, this is irrelevant + if (name === "modelId") return false + + return true + } + async function fetchData() { const FETCH_RECORDS_URL = `/api/views/all_${model}` @@ -20,7 +30,7 @@ return state }) - headers = Object.keys(json[0]).filter(key => !key.startsWith("_")) + headers = Object.keys(json[0]).filter(shouldDisplayField) } else { throw new Error("Failed to fetch records.", response) }