From 7c4f24c1b4177cfd533086c552bdc9277daddf9d Mon Sep 17 00:00:00 2001 From: Martin McKeaveney Date: Thu, 18 Jun 2020 17:17:18 +0100 Subject: [PATCH] backend v1 - styling to do --- packages/builder/package.json | 2 +- packages/builder/src/budibase.css | 1 - .../builder/src/builderStore/store/backend.js | 16 +- .../common}/Block.svelte | 9 +- .../src/components/common/Checkbox.svelte | 2 +- .../src/components/common/NumberBox.svelte | 30 +- .../src/components/common/ValuesList.svelte | 2 +- .../ModelDataTable/ModelDataTable.svelte | 39 +- .../CreateEditModel/CreateEditModel.svelte | 156 ----- .../modals/CreateEditModel/FieldView.svelte | 104 --- .../modals/CreateEditRecord.svelte | 2 + .../database/ModelDataTable/modals/index.js | 1 - .../src/components/nav/BackendNav.svelte | 87 --- .../src/components/nav/HierarchyRow.svelte | 1 - .../nav/ModelNavigator/Block.svelte | 47 -- .../nav/ModelNavigator/BlockNavigator.svelte | 15 +- .../nav/ModelNavigator/EmptyModel.svelte} | 18 +- .../nav/ModelNavigator/ListItem.svelte | 4 +- .../nav/ModelNavigator/ModelNavigator.svelte | 43 +- .../nav/ModelSetupNav/FieldView.svelte | 63 -- .../nav/ModelSetupNav/ModelFieldEditor.svelte | 101 +++ .../nav/ModelSetupNav/ModelSetupNav.svelte | 57 +- .../nav/SchemaManagementDrawer.svelte | 143 ---- .../builder/src/constants/backend/index.js | 4 +- packages/builder/src/flowy.css | 647 ------------------ .../[selectedDatabase]/_layout.svelte | 1 + .../database/[selectedDatabase]/index.svelte | 31 +- 27 files changed, 251 insertions(+), 1375 deletions(-) rename packages/builder/src/{pages/[application]/backend/database/[selectedDatabase] => components/common}/Block.svelte (88%) delete mode 100644 packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte delete mode 100644 packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte delete mode 100644 packages/builder/src/components/nav/BackendNav.svelte delete mode 100644 packages/builder/src/components/nav/ModelNavigator/Block.svelte rename packages/builder/src/{pages/[application]/backend/database/[selectedDatabase]/newmodel.svelte => components/nav/ModelNavigator/EmptyModel.svelte} (72%) delete mode 100644 packages/builder/src/components/nav/ModelSetupNav/FieldView.svelte create mode 100644 packages/builder/src/components/nav/ModelSetupNav/ModelFieldEditor.svelte delete mode 100644 packages/builder/src/components/nav/SchemaManagementDrawer.svelte delete mode 100644 packages/builder/src/flowy.css create mode 100644 packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/_layout.svelte diff --git a/packages/builder/package.json b/packages/builder/package.json index b2de1252b3..0a7cadc481 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -39,7 +39,7 @@ }, "dependencies": { "@beyonk/svelte-notifications": "^2.0.3", - "@budibase/bbui": "^1.4.1", + "@budibase/bbui": "^1.5.0", "@budibase/client": "^0.0.32", "@nx-js/compiler-util": "^2.0.0", "codemirror": "^5.51.0", diff --git a/packages/builder/src/budibase.css b/packages/builder/src/budibase.css index 14a1be3083..85425ba049 100644 --- a/packages/builder/src/budibase.css +++ b/packages/builder/src/budibase.css @@ -84,7 +84,6 @@ text-align: left; color: var(--ink); font-size: 14px; - padding-left: 12px; } .uk-text-right { diff --git a/packages/builder/src/builderStore/store/backend.js b/packages/builder/src/builderStore/store/backend.js index 2dff9db7d2..16fd12ada4 100644 --- a/packages/builder/src/builderStore/store/backend.js +++ b/packages/builder/src/builderStore/store/backend.js @@ -4,13 +4,16 @@ import api from "../api" export const getBackendUiStore = () => { const INITIAL_BACKEND_UI_STATE = { - breadcrumbs: [], models: [], views: [], users: [], selectedDatabase: {}, selectedModel: {}, - draftModel: {} + draftModel: {}, + tabs: { + SETUP_PANEL: "SETUP", + NAVIGATION_PANEL: "NAVIGATE" + } } const store = writable(INITIAL_BACKEND_UI_STATE) @@ -27,7 +30,6 @@ export const getBackendUiStore = () => { if (models && models.length > 0) { store.actions.models.select(models[0]); } - state.breadcrumbs = [db.name] state.models = models state.views = views return state @@ -40,11 +42,6 @@ export const getBackendUiStore = () => { state.selectedView = state.selectedView return state }), - view: record => - store.update(state => { - state.breadcrumbs = [state.selectedDatabase.name, record._id] - return state - }), select: record => store.update(state => { state.selectedRecord = record @@ -57,6 +54,7 @@ export const getBackendUiStore = () => { state.draftModel = cloneDeep(model); state.selectedField = "" state.selectedView = `all_${model._id}` + state.tabs.SETUP_PANEL = "SETUP" return state; }), save: async ({ instanceId, model }) => { @@ -102,6 +100,8 @@ export const getBackendUiStore = () => { state.selectedField = field.name + state.tabs.NAVIGATION_PANEL = "NAVIGATE" + return state }); }, diff --git a/packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/Block.svelte b/packages/builder/src/components/common/Block.svelte similarity index 88% rename from packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/Block.svelte rename to packages/builder/src/components/common/Block.svelte index 23dc183a27..168834b5a8 100644 --- a/packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/Block.svelte +++ b/packages/builder/src/components/common/Block.svelte @@ -7,7 +7,6 @@ export let tertiary -
{title} @@ -15,8 +14,7 @@ diff --git a/packages/builder/src/components/common/Checkbox.svelte b/packages/builder/src/components/common/Checkbox.svelte index 9f777ca704..37eb385d79 100644 --- a/packages/builder/src/components/common/Checkbox.svelte +++ b/packages/builder/src/components/common/Checkbox.svelte @@ -3,8 +3,8 @@ export let label = "" - {label} + diff --git a/packages/builder/src/components/common/ValuesList.svelte b/packages/builder/src/components/common/ValuesList.svelte index 1d1e5ce33c..53a16455cc 100644 --- a/packages/builder/src/components/common/ValuesList.svelte +++ b/packages/builder/src/components/common/ValuesList.svelte @@ -24,7 +24,7 @@ diff --git a/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte b/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte index ec2d228978..2f02db9a6d 100644 --- a/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte +++ b/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte @@ -1,18 +1,7 @@ - -
- {#if !showFieldView} - -

Create / Edit Model

- {:else} - -

Create / Edit Field

- {/if} -
-{#if !showFieldView} -
- {#if $store.errors && $store.errors.length > 0} - - {/if} -
- -
-
- Fields -
(showFieldView = true)}> - Add new field -
-
- - - - - - - - - - - {#each modelFields as [key, meta]} - - - - - - - {/each} - -
EditNameType -
- editField(meta)} /> - -
{key}
- 		{meta.type} - deleteField(meta)} /> -
-
- Save -
-
-{:else} - (showFieldView = false)} /> -{/if} - - diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte deleted file mode 100644 index fde876015d..0000000000 --- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte +++ /dev/null @@ -1,104 +0,0 @@ - - -
- - - -
- - - - - - {#if type === 'string'} - - - {:else if type === 'datetime'} - - - {:else if type === 'number'} - - - {/if} - -
-
-
- Cancel -
- Save -
- - diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte index abcc32b002..7c31ea3bf3 100644 --- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte +++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte @@ -1,6 +1,7 @@ - -
-
- {#if $backendUiStore.selectedDatabase._id} -
-
-
-
Users
- -
-
- -
- -
- -
- {/if} -
- - diff --git a/packages/builder/src/components/nav/HierarchyRow.svelte b/packages/builder/src/components/nav/HierarchyRow.svelte index d57463cc20..22bff89b80 100644 --- a/packages/builder/src/components/nav/HierarchyRow.svelte +++ b/packages/builder/src/components/nav/HierarchyRow.svelte @@ -4,7 +4,6 @@ import { cloneDeep } from "lodash/fp" import getIcon from "../common/icon" import { - CreateEditModelModal, CreateEditViewModal, } from "components/database/ModelDataTable/modals" import api from "builderStore/api" diff --git a/packages/builder/src/components/nav/ModelNavigator/Block.svelte b/packages/builder/src/components/nav/ModelNavigator/Block.svelte deleted file mode 100644 index c9e7f67623..0000000000 --- a/packages/builder/src/components/nav/ModelNavigator/Block.svelte +++ /dev/null @@ -1,47 +0,0 @@ - - -
- - {title} -
- - diff --git a/packages/builder/src/components/nav/ModelNavigator/BlockNavigator.svelte b/packages/builder/src/components/nav/ModelNavigator/BlockNavigator.svelte index 5fa886c363..7ca8d56372 100644 --- a/packages/builder/src/components/nav/ModelNavigator/BlockNavigator.svelte +++ b/packages/builder/src/components/nav/ModelNavigator/BlockNavigator.svelte @@ -1,7 +1,7 @@ -
+
-

Create New Table

-

Before you can view your table, you need to set it up.

+

Create New Model

+

Before you can view your model, you need to set it up.

Fields -

Blocks are pre-made fields and help you build your table quicker.

+

Blocks are pre-made fields and help you build your model quicker.

{#each Object.values(FIELDS) as field} addNewField(field)} /> @@ -26,17 +27,17 @@
Blocks -

Blocks are pre-made fields and help you build your table quicker.

+

Blocks are pre-made fields and help you build your model quicker.

{#each Object.values(BLOCKS) as field} - + addNewField(field)} /> {/each}
Models -

Blocks are pre-made fields and help you build your table quicker.

+

Blocks are pre-made fields and help you build your model quicker.

{#each Object.values(MODELS) as model} @@ -74,6 +75,7 @@ .block-row .blocks { display: grid; grid-auto-flow: column; + grid-auto-columns: 110px; grid-gap: 20px; } \ No newline at end of file diff --git a/packages/builder/src/components/nav/ModelNavigator/ListItem.svelte b/packages/builder/src/components/nav/ModelNavigator/ListItem.svelte index d34f761834..ae1b46a90d 100644 --- a/packages/builder/src/components/nav/ModelNavigator/ListItem.svelte +++ b/packages/builder/src/components/nav/ModelNavigator/ListItem.svelte @@ -18,7 +18,7 @@ div { padding: 0 10px 0 10px; - width: 260px; + width: 90%; height: 40px; border-radius: 3px; display: flex; @@ -27,6 +27,8 @@ color: var(--ink); font-weight: 500; font-size: 16px; + margin-top: 4px; + margin-bottom: 4px; } .selected { diff --git a/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte b/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte index ebe7372444..b0b0d9ca24 100644 --- a/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte +++ b/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte @@ -1,11 +1,10 @@ - -
- - - - - - {#if field.type === 'string'} - - - {:else if field.type === 'datetime'} - - - {:else if field.type === 'number'} - - - {:else if field.type === 'link'} - - {/if} - - - - diff --git a/packages/builder/src/components/nav/ModelSetupNav/ModelFieldEditor.svelte b/packages/builder/src/components/nav/ModelSetupNav/ModelFieldEditor.svelte new file mode 100644 index 0000000000..6e72fdb2fa --- /dev/null +++ b/packages/builder/src/components/nav/ModelSetupNav/ModelFieldEditor.svelte @@ -0,0 +1,101 @@ + + +
+
+
Name
+ +
+
+ +
+
+
Type
+ {field.type} +
+
+ +
+
+ + +
+ + {#if field.type === 'string'} + + + {:else if field.type === 'datetime'} + + + {:else if field.type === 'number'} + + + {:else if field.type === 'link'} + + {/if} +
+ + diff --git a/packages/builder/src/components/nav/ModelSetupNav/ModelSetupNav.svelte b/packages/builder/src/components/nav/ModelSetupNav/ModelSetupNav.svelte index 847c2c5a23..d82389ec66 100644 --- a/packages/builder/src/components/nav/ModelSetupNav/ModelSetupNav.svelte +++ b/packages/builder/src/components/nav/ModelSetupNav/ModelSetupNav.svelte @@ -4,7 +4,7 @@ import { notifier } from "@beyonk/svelte-notifications" import { store, backendUiStore } from "builderStore" import api from "builderStore/api" - import FieldView from "./FieldView.svelte"; + import ModelFieldEditor from "./ModelFieldEditor.svelte" const { open, close } = getContext("simple-modal") @@ -13,52 +13,57 @@ title: "Setup", key: "SETUP", }, - { - title: "Filter", - key: "FILTER", - }, { title: "Delete", key: "DELETE", }, ] - let selectedTab = "SETUP" + $: selectedTab = $backendUiStore.tabs.SETUP_PANEL - $: edited = $backendUiStore.draftModel.name !== $backendUiStore.selectedModel.name + $: edited = + $backendUiStore.draftModel.name !== $backendUiStore.selectedModel.name async function deleteModel() { - const modelToDelete = $backendUiStore.selectedModel - if ($backendUiStore.selectedField) { - delete modelToDelete[$backendUiStore.selectedField] + const model = $backendUiStore.selectedModel + const instanceId = $backendUiStore.selectedDatabase._id + const field = $backendUiStore.selectedField + + if (field) { + delete model.schema[field] + backendUiStore.actions.models.save({ model, instanceId }); + notifier.danger(`Field ${field} deleted.`); + return; } - const DELETE_MODEL_URL = `/api/${$backendUiStore.selectedDatabase._id}/models/${modelToDelete._id}/${modelToDelete._rev}` + const DELETE_MODEL_URL = `/api/${instanceId}/models/${model._id}/${model._rev}` const response = await api.delete(DELETE_MODEL_URL) backendUiStore.update(state => { state.selectedView = null state.models = state.models.filter( - model => model._id !== modelToDelete._id + ({ _id }) => _id !== model._id ) - notifier.danger(`${modelToDelete.name} deleted successfully.`) + notifier.danger(`${model.name} deleted successfully.`) return state }) } async function saveModel() { - await backendUiStore.actions.models.save({ + await backendUiStore.actions.models.save({ instanceId: $backendUiStore.selectedDatabase._id, - model: $backendUiStore.draftModel + model: $backendUiStore.draftModel, }) - notifier.success("Success! Your changes have been saved. Please continue on with your greatness."); + notifier.success( + "Success! Your changes have been saved. Please continue on with your greatness." + ) }
- + {#if selectedTab === 'SETUP'} {#if $backendUiStore.selectedField} - + {:else}
Name
@@ -71,13 +76,10 @@
Import Data
- {/if} +
+ +
{:else if selectedTab === 'DELETE'}
Danger Zone
@@ -92,6 +94,10 @@ font-weight: 500; } + footer { + width: 100%; + } + .items-root { padding: 20px; display: flex; @@ -102,9 +108,8 @@ } .titled-input { - padding: 20px; + padding: 12px; background: var(--light-grey); - margin-top: 20px; } .titled-input header { diff --git a/packages/builder/src/components/nav/SchemaManagementDrawer.svelte b/packages/builder/src/components/nav/SchemaManagementDrawer.svelte deleted file mode 100644 index cc9e5d86a7..0000000000 --- a/packages/builder/src/components/nav/SchemaManagementDrawer.svelte +++ /dev/null @@ -1,143 +0,0 @@ - - -
-
-
-
-
Models
-
- -
-
-
- -
- {#each $backendUiStore.models as model} - - {/each} -
-
- -
-
-
-
Views
-
- -
-
-
- -
- {#each $backendUiStore.views as view} - - {/each} -
-
-
- - diff --git a/packages/builder/src/constants/backend/index.js b/packages/builder/src/constants/backend/index.js index 00057a5acd..3973b09238 100644 --- a/packages/builder/src/constants/backend/index.js +++ b/packages/builder/src/constants/backend/index.js @@ -50,9 +50,9 @@ export const FIELDS = { }, }, IMAGE: { - name: "Image", + name: "File", icon: "ri-image-line", - type: "image", + type: "file", constraints: { type: "string", presence: false, diff --git a/packages/builder/src/flowy.css b/packages/builder/src/flowy.css deleted file mode 100644 index 1fc6d12b3e..0000000000 --- a/packages/builder/src/flowy.css +++ /dev/null @@ -1,647 +0,0 @@ -body, html { - margin: 0px; - padding: 0px; - overflow: hidden; - background-repeat: repeat; - background-size: 30px 30px; - background-color: #FBFBFB; - height: 100%; -} -#navigation { - height: 71px; - background-color: #FFF; - border: 1px solid #E8E8EF; - width: 100%; - display: table; - box-sizing: border-box; - position: fixed; - top: 0; - z-index: 9 -} -#back { - width: 40px; - height: 40px; - border-radius: 100px; - background-color: #F1F4FC; - text-align: center; - display: inline-block; - vertical-align: top; - margin-top: 12px; - margin-right: 10px -} -#back img { - margin-top: 13px; -} -#names { - display: inline-block; - vertical-align: top; -} -#title { - font-family: Roboto; - font-weight: 500; - font-size: 16px; - color: #393C44; - margin-bottom: 0px; -} -#subtitle { - font-family: Roboto; - color: #808292; - font-size: 14px; - margin-top: 5px; -} -#leftside { - display: inline-block; - vertical-align: middle; - margin-left: 20px; -} -#centerswitch { - position: absolute; - width: 222px; - left: 50%; - margin-left: -111px; - top: 15px; -} -#leftswitch { - border: 1px solid #E8E8EF; - background-color: #FBFBFB; - width: 111px; - height: 39px; - line-height: 39px; - border-radius: 5px 0px 0px 5px; - font-family: Roboto; - color: #393C44; - display: inline-block; - font-size: 14px; - text-align: center; -} -#rightswitch { - font-family: Roboto; - color: #808292; - border-radius: 0px 5px 5px 0px; - border: 1px solid #E8E8EF; - height: 39px; - width: 102px; - display: inline-block; - font-size: 14px; - line-height: 39px; - text-align: center; - margin-left: -5px; -} -#discard { - font-family: Roboto; - font-weight: 500; - font-size: 14px; - color: #A6A6B3; - width: 95px; - height: 38px; - border: 1px solid #E8E8EF; - border-radius: 5px; - text-align: center; - line-height: 38px; - display: inline-block; - vertical-align: top; - transition: all .2s cubic-bezier(.05,.03,.35,1); -} -#discard:hover { - cursor: pointer; - opacity: .7; -} -#publish { - font-family: Roboto; - font-weight: 500; - font-size: 14px; - color: #FFF; - background-color: #217CE8; - border-radius: 5px; - width: 143px; - height: 38px; - margin-left: 10px; - display: inline-block; - vertical-align: top; - text-align: center; - line-height: 38px; - margin-right: 20px; - transition: all .2s cubic-bezier(.05,.03,.35,1); -} -#publish:hover { - cursor: pointer; - opacity: .7; -} -#buttonsright { - float: right; - margin-top: 15px; -} -#leftcard { - width: 363px; - background-color: #FFF; - border: 1px solid #E8E8EF; - box-sizing: border-box; - padding-top: 85px; - padding-left: 20px; - height: 100%; - position: absolute; - z-index: 2; -} -#search input { - width: 318px; - height: 40px; - background-color: #FFF; - border: 1px solid #E8E8EF; - box-sizing: border-box; - box-shadow: 0px 2px 8px rgba(34,34,87,0.05); - border-radius: 5px; - text-indent: 35px; - font-family: Roboto; - font-size: 16px; -} -::-webkit-input-placeholder { /* Edge */ - color: #C9C9D5; -} - -:-ms-input-placeholder { /* Internet Explorer 10-11 */ - color: #C9C9D5 -} - -::placeholder { - color: #C9C9D5; -} -#search img { - position: absolute; - margin-top: 10px; - width: 18px; - margin-left: 12px; -} -#header { - font-size: 20px; - font-family: Roboto; - font-weight: bold; - color: #393C44; -} -#subnav { - border-bottom: 1px solid #E8E8EF; - width: calc(100% + 20px); - margin-left: -20px; - margin-top: 10px; -} -.navdisabled { - transition: all .3s cubic-bezier(.05,.03,.35,1); -} -.navdisabled:hover { - cursor: pointer; - opacity: .5; -} -.navactive { - color: #393C44!important; -} -#triggers { - margin-left: 20px; - font-family: Roboto; - font-weight: 500; - font-size: 14px; - text-align: center; - color: #808292; - width: calc(88% / 3); - height: 48px; - line-height: 48px; - display: inline-block; - float: left; -} -.navactive:after { - display: block; - content: ""; - width: 100%; - height: 4px; - background-color: #217CE8; - margin-top: -4px; -} -#actions { - display: inline-block; - font-family: Roboto; - font-weight: 500; - color: #808292; - font-size: 14px; - height: 48px; - line-height: 48px; - width: calc(88% / 3); - text-align: center; - float: left; -} -#loggers { - width: calc(88% / 3); - display: inline-block; - font-family: Roboto; - font-weight: 500; - color: #808292; - font-size: 14px; - height: 48px; - line-height: 48px; - text-align: center; -} -#footer { - position: absolute; - left: 0; - padding-left: 20px; - line-height: 40px; - bottom: 0; - width: 362px; - border: 1px solid #E8E8EF; - height: 67px; - box-sizing: border-box; - background-color: #FFF; - font-family: Roboto; - font-size: 14px; -} -#footer a { - text-decoration: none; - color: #393C44; - transition: all .2s cubic-bezier(.05,.03,.35,1); -} -#footer a:hover { - opacity: .5; -} -#footer span { - color: #808292; -} -#footer p { - display: inline-block; - color: #808292; -} -#footer img { - margin-left: 5px; - margin-right: 5px; -} -.blockelem:first-child { - margin-top: 20px -} -.blockelem { - padding-top: 10px; - width: 318px; - border: 1px solid transparent; - transition-property: box-shadow, height; - transition-duration: .2s; - transition-timing-function: cubic-bezier(.05,.03,.35,1); - border-radius: 5px; - box-shadow: 0px 0px 30px rgba(22, 33, 74, 0); - box-sizing: border-box; -} -.blockelem:hover { - box-shadow: 0px 4px 30px rgba(22, 33, 74, 0.08); - border-radius: 5px; - background-color: #FFF; - cursor: pointer; -} -.grabme, .blockico { - display: inline-block; -} - -.grabme { - margin-top: 10px; - margin-left: 10px; - margin-bottom: -14px; - width: 15px; -} -#blocklist { - height: calc(100% - 220px); - overflow: auto; -} -#proplist { - height: calc(100% - 305px); - overflow: auto; - margin-top: -30px; - padding-top: 30px; -} -.blockin { - display: inline-block; - vertical-align: top; - margin-left: 12px; -} -.blockico { - width: 36px; - height: 36px; - background-color: #F1F4FC; - border-radius: 5px; - text-align: center; - white-space: nowrap; -} - -.blockico i { - font-size: 24px; - color: var(--dark-grey); -} - -.blockico span { - height: 100%; - width: 0px; - display: inline-block; - vertical-align: middle; -} -.blockico img { - vertical-align: middle; - margin-left: auto; - margin-right: auto; - display: inline-block; -} -.blocktext { - display: inline-block; - width: 220px; - vertical-align: top; - margin-left: 12px -} -.blocktitle { - margin: 0px!important; - padding: 0px!important; - font-family: Roboto; - font-weight: 500; - font-size: 16px; - color: #393C44; -} -.blockdesc { - margin-top: 5px; - font-family: Roboto; - color: #808292; - font-size: 14px; - line-height: 21px; -} -.blockdisabled { - background-color: #F0F2F9; - opacity: .5; -} -#closecard { - position: absolute; - margin-left: 340px; - background-color: #FFF; - border-radius: 0px 5px 5px 0px; - border-bottom: 1px solid #E8E8EF; - border-right: 1px solid #E8E8EF; - border-top: 1px solid #E8E8EF; - width: 53px; - height: 53px; - text-align: center; - z-index: 10; -} -#closecard img { - margin-top: 15px -} -#canvas { - border: 1px solid green; - position: absolute; - width: calc(100% - 361px); - height: calc(100% - 71px); - top: 71px; - left: 361px; - z-index: 0; - overflow: auto; -} -#propwrap { - position: absolute; - right: 0; - top: 0; - width: 311px; - height: 100%; - padding-left: 20px; - overflow: hidden; - z-index: -2; -} -#properties { - position: absolute; - height: 100%; - width: 311px; - background-color: #FFF; - right: -150px; - opacity: 0; - z-index: 2; - top: 0px; - box-shadow: -4px 0px 40px rgba(26, 26, 73, 0); - padding-left: 20px; - transition: all .25s cubic-bezier(.05,.03,.35,1); -} -.itson { - z-index: 2!important; -} -.expanded { - right: 0!important; - opacity: 1!important; - box-shadow: -4px 0px 40px rgba(26, 26, 73, 0.05); - z-index: 2; -} -#header2 { - font-size: 20px; - font-family: Roboto; - font-weight: bold; - color: #393C44; - margin-top: 101px; -} -#close { - margin-top: 100px; - position: absolute; - right: 20px; - z-index: 9999; - transition: all .25s cubic-bezier(.05,.03,.35,1); -} -#close:hover { - cursor: pointer; - opacity: .7; -} -#propswitch { - border-bottom: 1px solid #E8E8EF; - width: 331px; - margin-top: 10px; - margin-left: -20px; - margin-bottom: 30px; -} -#dataprop { - font-family: Roboto; - font-weight: 500; - font-size: 14px; - text-align: center; - color: #393C44; - width: calc(88% / 3); - height: 48px; - line-height: 48px; - display: inline-block; - float: left; - margin-left: 20px; -} -#dataprop:after { - display: block; - content: ""; - width: 100%; - height: 4px; - background-color: #217CE8; - margin-top: -4px; -} -#alertprop { - display: inline-block; - font-family: Roboto; - font-weight: 500; - color: #808292; - font-size: 14px; - height: 48px; - line-height: 48px; - width: calc(88% / 3); - text-align: center; - float: left; -} -#logsprop { - width: calc(88% / 3); - display: inline-block; - font-family: Roboto; - font-weight: 500; - color: #808292; - font-size: 14px; - height: 48px; - line-height: 48px; - text-align: center; -} -.inputlabel { - font-family: Roboto; - font-size: 14px; - color: #253134; -} -.dropme { - background-color: #FFF; - border-radius: 5px; - border: 1px solid #E8E8EF; - box-shadow: 0px 2px 8px rgba(34, 34, 87, 0.05); - font-family: Roboto; - font-size: 14px; - color: #253134; - text-indent: 20px; - height: 40px; - line-height: 40px; - width: 287px; - margin-bottom: 25px; -} -.dropme img { - margin-top: 17px; - float: right; - margin-right: 15px; -} -.checkus { - margin-bottom: 10px; -} -.checkus img { - display: inline-block; - vertical-align: middle; -} -.checkus p { - display: inline-block; - font-family: Roboto; - font-size: 14px; - vertical-align: middle; - margin-left: 10px; -} -#divisionthing { - height: 1px; - width: 100%; - background-color: #E8E8EF; - position: absolute; - right: 0px; - bottom: 80; -} -#removeblock { - border-radius: 5px; - position: absolute; - bottom: 20px; - font-family: Roboto; - font-size: 14px; - text-align: center; - width: 287px; - height: 38px; - line-height: 38px; - color: #253134; - border: 1px solid #E8E8EF; - transition: all .3s cubic-bezier(.05,.03,.35,1); -} -#removeblock:hover { - cursor: pointer; - opacity: .5; -} -.noselect { - -webkit-touch-callout: none; /* iOS Safari */ - -webkit-user-select: none; /* Safari */ - -khtml-user-select: none; /* Konqueror HTML */ - -moz-user-select: none; /* Old versions of Firefox */ - -ms-user-select: none; /* Internet Explorer/Edge */ - user-select: none; /* Non-prefixed version, currently - supported by Chrome, Opera and Firefox */ -} -.blockyname { - font-family: Roboto; - font-weight: 500; - color: #253134; - display: inline-block; - vertical-align: middle; - margin-left: 8px; - font-size: 16px; -} -.blockyleft img { - display: inline-block; - vertical-align: middle; -} -.blockyright { - display: inline-block; - float: right; - vertical-align: middle; - margin-right: 20px; - margin-top: 10px; - width: 28px; - height: 28px; - border-radius: 5px; - text-align: center; - background-color: #FFF; - transition: all .3s cubic-bezier(.05,.03,.35,1); - z-index: 10; -} -.blockyright:hover { - background-color: #F1F4FC; - cursor: pointer; -} -.blockyright img { - margin-top: 12px; -} -.blockyleft { - display: inline-block; - margin-left: 20px; -} -.blockydiv { - width: 100%; - height: 1px; - background-color: #E9E9EF; -} -.blockyinfo { - font-family: Roboto; - font-size: 14px; - color: #808292; - margin-top: 15px; - text-indent: 20px; - margin-bottom: 20px; -} -.blockyinfo span { - color: #253134; - font-weight: 500; - display: inline-block; - border-bottom: 1px solid #D3DCEA; - line-height: 20px; - text-indent: 0px; -} -.block { - background-color: #FFF; - margin-top: 0px!important; - box-shadow: 0px 4px 30px rgba(22, 33, 74, 0.05); -} -.selectedblock { - border: 2px solid #217CE8; - box-shadow: 0px 4px 30px rgba(22, 33, 74, 0.08); -} - -@media only screen and (max-width: 832px) { - #centerswitch { - display: none; - } -} -@media only screen and (max-width: 560px) { - #names { - display: none; - } -} \ No newline at end of file diff --git a/packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/_layout.svelte b/packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/_layout.svelte new file mode 100644 index 0000000000..0385342cef --- /dev/null +++ b/packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/_layout.svelte @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/index.svelte b/packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/index.svelte index 667d3e31fe..915c355cb8 100644 --- a/packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/index.svelte +++ b/packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/index.svelte @@ -1,6 +1,7 @@ -
-
{breadcrumbs}
- {#if $backendUiStore.selectedModel._id} - - Create new record - - {/if} -
-{#if $backendUiStore.selectedModel.schema && Object.keys($backendUiStore.selectedModel.schema).length === 0} - -{:else if $backendUiStore.selectedDatabase._id && $backendUiStore.selectedModel.name} +{#if selectedModel.schema && Object.keys(selectedModel.schema).length === 0} + +{:else if $backendUiStore.selectedDatabase._id && selectedModel.name} {:else} @@ -45,8 +34,8 @@ {/if}