diff --git a/packages/builder/src/components/design/AppPreview/DevicePreviewSelect.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/DevicePreviewSelect.svelte
similarity index 100%
rename from packages/builder/src/components/design/AppPreview/DevicePreviewSelect.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/DevicePreviewSelect.svelte
diff --git a/packages/builder/src/components/design/AppPreview/iframeTemplate.js b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/iframeTemplate.js
similarity index 97%
rename from packages/builder/src/components/design/AppPreview/iframeTemplate.js
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/iframeTemplate.js
index c265a64d53..def32dd45f 100644
--- a/packages/builder/src/components/design/AppPreview/iframeTemplate.js
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/iframeTemplate.js
@@ -61,11 +61,11 @@ export default `
selectedComponentId,
layout,
screen,
- previewType,
appId,
theme,
customTheme,
previewDevice,
+ navigation
} = parsed
// Set some flags so the app knows we're in the builder
@@ -75,10 +75,10 @@ export default `
window["##BUDIBASE_PREVIEW_SCREEN##"] = screen
window["##BUDIBASE_SELECTED_COMPONENT_ID##"] = selectedComponentId
window["##BUDIBASE_PREVIEW_ID##"] = Math.random()
- window["##BUDIBASE_PREVIEW_TYPE##"] = previewType
window["##BUDIBASE_PREVIEW_THEME##"] = theme
window["##BUDIBASE_PREVIEW_CUSTOM_THEME##"] = customTheme
window["##BUDIBASE_PREVIEW_DEVICE##"] = previewDevice
+ window["##BUDIBASE_PREVIEW_NAVIGATION##"] = navigation
// Initialise app
try {
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_fallback.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_fallback.svelte
new file mode 100644
index 0000000000..00165e4ee9
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_fallback.svelte
@@ -0,0 +1,5 @@
+
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
new file mode 100644
index 0000000000..d0eb93466d
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
@@ -0,0 +1,102 @@
+
+
+
+
+
+ $goto("./screens")}
+ />
+ $goto("./components")}
+ />
+ $goto("./theme")}
+ />
+ $goto("./navigation")}
+ />
+ {#if $store.layouts?.length}
+ $goto("./layouts")}
+ />
+ {/if}
+
+
+
+
+ {#if $selectedScreen}
+
+
+ {/if}
+
+
+
+
diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentDropdownMenu.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentDropdownMenu.svelte
similarity index 100%
rename from packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentDropdownMenu.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentDropdownMenu.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
new file mode 100644
index 0000000000..5b86d4da29
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
@@ -0,0 +1,129 @@
+
+
+
$goto("../new")}
+ showExpandIcon
+ borderRight
+>
+
+
+ - {
+ $store.selectedComponentId = $selectedScreen?.props._id
+ }}
+ id={`component-${$selectedScreen?.props._id}`}
+ >
+
+
+
+
+
+
+ {#if $dndStore.dragging && $dndStore.valid}
+
+ {#if $dndStore.dropPosition !== DropPosition.INSIDE}
+
+ {/if}
+ {/if}
+
+
+
+
+
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte
new file mode 100644
index 0000000000..cc7f70f2c5
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte
@@ -0,0 +1,148 @@
+
+
+
+ {#each components || [] as component, index (component._id)}
+ {@const opened = isOpen(component, $selectedComponentPath, closedNodes)}
+ - {
+ $store.selectedComponentId = component._id
+ }}
+ id={`component-${component._id}`}
+ >
+ dndStore.actions.dragstart(component)}
+ on:dragover={dragover(component, index)}
+ on:iconClick={() => toggleNodeOpen(component._id)}
+ on:drop={onDrop}
+ text={getComponentText(component)}
+ icon={getComponentIcon(component)}
+ withArrow={componentHasChildren(component)}
+ indentLevel={level + 1}
+ selected={$store.selectedComponentId === component._id}
+ {opened}
+ highlighted={isChildOfSelectedComponent(component)}
+ >
+
+
+ {#if opened}
+
+ {/if}
+
+ {/each}
+
+
+
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/DNDPositionIndicator.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/DNDPositionIndicator.svelte
new file mode 100644
index 0000000000..c01bcaf36f
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/DNDPositionIndicator.svelte
@@ -0,0 +1,67 @@
+
+
+{#if component && position}
+
+{/if}
+
+
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ScreenslotDropdownMenu.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ScreenslotDropdownMenu.svelte
new file mode 100644
index 0000000000..7ec7b0821c
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ScreenslotDropdownMenu.svelte
@@ -0,0 +1,52 @@
+
+
+{#if showMenu}
+
+
+
+
+
+
+
+{/if}
+
+
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/dndStore.js b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/dndStore.js
new file mode 100644
index 0000000000..8a9e7ed915
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/dndStore.js
@@ -0,0 +1,129 @@
+import { writable, get } from "svelte/store"
+import { store as frontendStore, selectedScreen } from "builderStore"
+import {
+ findComponentParent,
+ findComponentPath,
+} from "builderStore/componentUtils"
+
+export const DropPosition = {
+ ABOVE: "above",
+ BELOW: "below",
+ INSIDE: "inside",
+}
+
+const initialState = {
+ source: null,
+ target: null,
+ targetParent: null,
+ dropPosition: null,
+ dragging: false,
+ valid: false,
+}
+
+const createDNDStore = () => {
+ const store = writable(initialState)
+ const actions = {
+ dragstart: component => {
+ if (!component) {
+ return
+ }
+ store.set({
+ source: component,
+ target: null,
+ dropPosition: null,
+ dragging: true,
+ valid: false,
+ })
+ },
+ dragover: ({ component, mousePosition }) => {
+ const definition = frontendStore.actions.components.getDefinition(
+ component._component
+ )
+ const canHaveChildren = definition?.hasChildren
+ const hasChildren = component._children?.length > 0
+
+ let dropPosition
+ let target
+ let targetParent
+
+ // If it can have children then it can be any position
+ if (canHaveChildren) {
+ if (mousePosition <= 0.33) {
+ dropPosition = DropPosition.ABOVE
+ } else if (mousePosition >= 0.66) {
+ dropPosition = DropPosition.BELOW
+ } else {
+ dropPosition = DropPosition.INSIDE
+ }
+ }
+
+ // Otherwise drop either above or below
+ else {
+ dropPosition =
+ mousePosition > 0.5 ? DropPosition.BELOW : DropPosition.ABOVE
+ }
+
+ // If hovering over a component with children and attempting to drop
+ // below, we need to change this to be above the first child instead
+ if (dropPosition === DropPosition.BELOW && hasChildren) {
+ target = component._children[0]
+ dropPosition = DropPosition.ABOVE
+ } else {
+ target = component
+ }
+
+ // If drop position and target are the same then we can skip this update
+ const state = get(store)
+ if (
+ dropPosition === state.dropPosition &&
+ target?._id === state.target?._id
+ ) {
+ return
+ }
+
+ // Find the parent of the target component
+ if (target) {
+ targetParent = findComponentParent(
+ get(selectedScreen).props,
+ target._id
+ )
+ }
+
+ store.update(state => {
+ return {
+ ...state,
+ dropPosition,
+ target,
+ targetParent,
+
+ /// Mark as invalid if the target is a child of the source
+ valid: findComponentPath(state.source, target._id)?.length === 0,
+ }
+ })
+ },
+ reset: () => {
+ store.set(initialState)
+ },
+ drop: async () => {
+ const state = get(store)
+ if (!state.valid || !state.source || !state.target) {
+ return
+ }
+ actions.reset()
+
+ // Cut and paste the component
+ frontendStore.actions.components.copy(state.source, true, false)
+ await frontendStore.actions.components.paste(
+ state.target,
+ state.dropPosition
+ )
+ },
+ }
+
+ return {
+ subscribe: store.subscribe,
+ actions,
+ }
+}
+
+export const dndStore = createDNDStore()
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsPanel.svelte
new file mode 100644
index 0000000000..ff0c53e7ab
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsPanel.svelte
@@ -0,0 +1,46 @@
+
+
+{#if $selectedComponent}
+
+
+
+
+
+
+{/if}
diff --git a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte
similarity index 86%
rename from packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte
index 14e4f74bcb..ba16c705f6 100644
--- a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte
@@ -2,15 +2,16 @@
import { isEmpty } from "lodash/fp"
import { Input, DetailSummary, notifications } from "@budibase/bbui"
import { store } from "builderStore"
- import PropertyControl from "./PropertyControls/PropertyControl.svelte"
- import ResetFieldsButton from "./PropertyControls/ResetFieldsButton.svelte"
- import { getComponentForSettingType } from "./PropertyControls/componentSettings"
+ import PropertyControl from "components/design/settings/controls/PropertyControl.svelte"
+ import ResetFieldsButton from "components/design/settings/controls/ResetFieldsButton.svelte"
+ import { getComponentForSetting } from "components/design/settings/componentSettings"
import { Utils } from "@budibase/frontend-core"
export let componentDefinition
export let componentInstance
export let bindings
export let componentBindings
+ export let isScreen = false
$: sections = getSections(componentDefinition)
@@ -20,7 +21,7 @@
const customSections = settings.filter(setting => setting.section)
return [
{
- name: componentDefinition?.name || "General",
+ name: "General",
info: componentDefinition?.info,
settings: generalSettings,
},
@@ -37,7 +38,7 @@
})
const canRenderControl = setting => {
- const control = getComponentForSettingType(setting?.type)
+ const control = getComponentForSetting(setting)
if (!control) {
return false
}
@@ -77,7 +78,7 @@
{#each sections as section, idx (section.name)}
- {#if idx === 0 && !componentInstance._component.endsWith("/layout")}
+ {#if idx === 0 && !componentInstance._component.endsWith("/layout") && !isScreen}
updateProp(setting.key, val)}
highlighted={$store.highlightedSettingKey === setting.key}
props={{
- options: setting.options || [],
+ // Generic settings
placeholder: setting.placeholder || null,
+
+ // Select settings
+ options: setting.options || [],
+
+ // Number fields
min: setting.min || null,
max: setting.max || null,
}}
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ConditionalUIDrawer.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUIDrawer.svelte
similarity index 91%
rename from packages/builder/src/components/design/PropertiesPanel/PropertyControls/ConditionalUIDrawer.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUIDrawer.svelte
index 11d19edf7c..b40b33744f 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ConditionalUIDrawer.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUIDrawer.svelte
@@ -14,8 +14,8 @@
import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
import { LuceneUtils, Constants } from "@budibase/frontend-core"
import { selectedComponent } from "builderStore"
- import { getComponentForSettingType } from "./componentSettings"
- import PropertyControl from "./PropertyControl.svelte"
+ import { getComponentForSetting } from "components/design/settings/componentSettings"
+ import PropertyControl from "components/design/settings/controls/PropertyControl.svelte"
import { getComponentSettings } from "builderStore/componentUtils"
export let conditions = []
@@ -71,11 +71,6 @@
return settings.find(setting => setting.key === key)
}
- const getComponentForSetting = key => {
- const settingDefinition = getSettingDefinition(key)
- return getComponentForSettingType(settingDefinition?.type || "text")
- }
-
const addCondition = () => {
conditions = [
...conditions,
@@ -154,6 +149,7 @@
on:consider={updateConditions}
>
{#each conditions as condition (condition.id)}
+ {@const definition = getSettingDefinition(condition.setting)}
TO
- {#if getSettingDefinition(condition.setting)}
+ {#if definition}
(condition.settingValue = val)}
props={{
- options: getSettingDefinition(condition.setting).options,
- placeholder: getSettingDefinition(condition.setting)
- .placeholder,
+ options: definition.options,
+ placeholder: definition.placeholder,
}}
{bindings}
/>
diff --git a/packages/builder/src/components/design/PropertiesPanel/ConditionalUISection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUISection.svelte
similarity index 93%
rename from packages/builder/src/components/design/PropertiesPanel/ConditionalUISection.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUISection.svelte
index b0863dce83..ba84b67622 100644
--- a/packages/builder/src/components/design/PropertiesPanel/ConditionalUISection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUISection.svelte
@@ -7,7 +7,7 @@
notifications,
} from "@budibase/bbui"
import { store } from "builderStore"
- import ConditionalUIDrawer from "./PropertyControls/ConditionalUIDrawer.svelte"
+ import ConditionalUIDrawer from "./ConditionalUIDrawer.svelte"
export let componentInstance
export let bindings
diff --git a/packages/builder/src/components/design/PropertiesPanel/CustomStylesSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/CustomStylesSection.svelte
similarity index 100%
rename from packages/builder/src/components/design/PropertiesPanel/CustomStylesSection.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/CustomStylesSection.svelte
diff --git a/packages/builder/src/components/design/PropertiesPanel/DesignSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/DesignSection.svelte
similarity index 100%
rename from packages/builder/src/components/design/PropertiesPanel/DesignSection.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/DesignSection.svelte
diff --git a/packages/builder/src/components/design/PropertiesPanel/StyleSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/StyleSection.svelte
similarity index 94%
rename from packages/builder/src/components/design/PropertiesPanel/StyleSection.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/StyleSection.svelte
index aa5147fa62..e34ea1019a 100644
--- a/packages/builder/src/components/design/PropertiesPanel/StyleSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/StyleSection.svelte
@@ -1,5 +1,5 @@
+
+
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/index.svelte
new file mode 100644
index 0000000000..a8e1e3e630
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/index.svelte
@@ -0,0 +1,7 @@
+
+
+
+
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/index.svelte
new file mode 100644
index 0000000000..f8c4cc0868
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/index.svelte
@@ -0,0 +1,18 @@
+
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/NewComponentPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/NewComponentPanel.svelte
new file mode 100644
index 0000000000..7f841e09ea
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/NewComponentPanel.svelte
@@ -0,0 +1,263 @@
+
+
+ $goto("../slot")}
+ borderRight
+>
+
+ (searchString = e.detail)}
+ bind:inputRef={searchRef}
+ />
+ {#if !searchString}
+
+ (section = "components")}>Components
+ (section = "blocks")}>Blocks
+
+ {/if}
+
+
+ {#if searchString || section === "components"}
+ {#each filteredStructure as category}
+
+
+ {#each category.children as component}
+
15}
+ class:selected={selectedIndex === orderMap[component.component]}
+ on:click={() => addComponent(component.component)}
+ on:mouseover={() => (selectedIndex = null)}
+ >
+
+ {component.name}
+
+ {/each}
+
addComponent(block.component)}
+ >
+
+ {block.name}
+
+ {/each}
+
+
+ {/if}
+
+
+
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/NewComponentTargetPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/NewComponentTargetPanel.svelte
new file mode 100644
index 0000000000..af44934526
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/NewComponentTargetPanel.svelte
@@ -0,0 +1,21 @@
+
+
+
+
+
+ Components that you add will be placed {position}
+ {title}
+
+
+
diff --git a/packages/builder/src/components/design/AppPreview/componentStructure.json b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/componentStructure.json
similarity index 89%
rename from packages/builder/src/components/design/AppPreview/componentStructure.json
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/componentStructure.json
index 6873ae547d..acd28c6a41 100644
--- a/packages/builder/src/components/design/AppPreview/componentStructure.json
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/componentStructure.json
@@ -26,6 +26,26 @@
"dynamicfilter"
]
},
+ {
+ "name": "Basic",
+ "icon": "TextParagraph",
+ "children": [
+ "heading",
+ "text",
+ "button",
+ "tag",
+ "spectrumcard",
+ "cardstat",
+ "divider",
+ "image",
+ "link",
+ "icon",
+ "embed",
+ "markdownviewer",
+ "backgroundimage",
+ "embeddedmap"
+ ]
+ },
{
"name": "Form",
"icon": "Form",
@@ -39,23 +59,15 @@
"optionsfield",
"booleanfield",
"longformfield",
- "datetimefield",
"attachmentfield",
- "relationshipfield",
"daterangepicker",
- "multifieldselect",
"jsonfield",
+ "relationshipfield",
+ "datetimefield",
+ "multifieldselect",
"s3upload"
]
},
- {
- "name": "Card",
- "icon": "Card",
- "children": [
- "spectrumcard",
- "cardstat"
- ]
- },
{
"name": "Chart",
"icon": "GraphBarVertical",
@@ -63,27 +75,9 @@
"bar",
"line",
"area",
+ "candlestick",
"pie",
- "donut",
- "candlestick"
- ]
- },
- {
- "name": "Elements",
- "icon": "TextParagraph",
- "children": [
- "heading",
- "text",
- "button",
- "tag",
- "divider",
- "image",
- "backgroundimage",
- "link",
- "icon",
- "embed",
- "markdownviewer",
- "embeddedmap"
+ "donut"
]
}
]
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/index.svelte
new file mode 100644
index 0000000000..8f2042671b
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/index.svelte
@@ -0,0 +1,26 @@
+
+
+
+
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/index.svelte
new file mode 100644
index 0000000000..f5e3806bd6
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/index.svelte
@@ -0,0 +1,5 @@
+
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutDropdownMenu.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutDropdownMenu.svelte
new file mode 100644
index 0000000000..cba68f899d
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutDropdownMenu.svelte
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutListPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutListPanel.svelte
new file mode 100644
index 0000000000..fd38f08ceb
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutListPanel.svelte
@@ -0,0 +1,29 @@
+
+
+
+
+ {#each $store.layouts as layout (layout._id)}
+ ($store.selectedLayoutId = layout._id)}
+ >
+
+
+ {/each}
+
+
+
+
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutSettingsPanel.svelte
new file mode 100644
index 0000000000..8e6ac603e7
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutSettingsPanel.svelte
@@ -0,0 +1,53 @@
+
+
+
+
+
+ Custom layouts are being deprecated. They will be removed in a future
+ release.
+
+
+ You can save the content of this layout by pressing the button below.
+
+
+ This will copy all components inside your layout, which you can then paste
+ into a screen.
+
+
+
+
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_layout.svelte
new file mode 100644
index 0000000000..c82fefab3e
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_layout.svelte
@@ -0,0 +1,20 @@
+
+
+
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/index.svelte
new file mode 100644
index 0000000000..4d39403bc3
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/index.svelte
@@ -0,0 +1,7 @@
+
+
+
+
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/_layout.svelte
new file mode 100644
index 0000000000..1333c6afe3
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/_layout.svelte
@@ -0,0 +1,12 @@
+
+
+
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/index.svelte
new file mode 100644
index 0000000000..09d45f8fde
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/index.svelte
@@ -0,0 +1,12 @@
+
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel.svelte
new file mode 100644
index 0000000000..dbd23c462f
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel.svelte
@@ -0,0 +1,33 @@
+
+
+
+
+ {#if $selectedScreen.layoutId}
+
+ You can't preview your navigation settings using this screen as it uses
+ a custom layout, which is deprecated
+
+ {/if}
+
+ Your navigation is configured for all the screens within your app.
+
+
+ You can hide and show your navigation for each screen in the screen
+ settings.
+
+
+
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/NavigationEditor/NavigationDrawer.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationLinksDrawer.svelte
similarity index 94%
rename from packages/builder/src/components/design/PropertiesPanel/PropertyControls/NavigationEditor/NavigationDrawer.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationLinksDrawer.svelte
index 4d1823108c..5ffccc5800 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/NavigationEditor/NavigationDrawer.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationLinksDrawer.svelte
@@ -11,6 +11,7 @@
import { dndzone } from "svelte-dnd-action"
import { generate } from "shortid"
import { store } from "builderStore"
+ import RoleSelect from "components/design/settings/controls/RoleSelect.svelte"
export let links = []
@@ -75,6 +76,7 @@
placeholder="URL"
options={urlOptions}
/>
+
.container {
width: 100%;
- max-width: 600px;
+ max-width: 800px;
margin: 0 auto;
}
.links {
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationLinksEditor.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationLinksEditor.svelte
new file mode 100644
index 0000000000..895c82495d
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationLinksEditor.svelte
@@ -0,0 +1,34 @@
+
+
+
+
+
+ Configure the links in your navigation bar.
+
+
+
+
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationSettingsPanel.svelte
new file mode 100644
index 0000000000..c6d43984b2
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationSettingsPanel.svelte
@@ -0,0 +1,110 @@
+
+
+
+
+
+
+
+
+ update("navigation", "Top")}
+ />
+ update("navigation", "Left")}
+ />
+
+
+ {#if $store.navigation.navigation === "Top"}
+ update("sticky", e.detail)}
+ />
+
+
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/index.svelte
new file mode 100644
index 0000000000..fc2e03d8e8
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/index.svelte
@@ -0,0 +1,7 @@
+
+
+
+
diff --git a/packages/builder/src/components/design/NavigationPanel/DatasourceModal.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/DatasourceModal.svelte
similarity index 90%
rename from packages/builder/src/components/design/NavigationPanel/DatasourceModal.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/DatasourceModal.svelte
index bd9b6a1741..523e3d9da9 100644
--- a/packages/builder/src/components/design/NavigationPanel/DatasourceModal.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/DatasourceModal.svelte
@@ -1,9 +1,15 @@
-
+
@@ -90,8 +90,8 @@
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte
new file mode 100644
index 0000000000..40d9ab273d
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte
@@ -0,0 +1,78 @@
+
+
+
+
+ (searchString = e.detail)}
+ />
+
+ {#each filteredScreens as screen (screen._id)}
+ ($store.selectedScreenId = screen._id)}
+ color={RoleUtils.getRoleColour(screen.routing.roleId)}
+ >
+
+
+ {/each}
+ {#if !filteredScreens?.length}
+
+
+ There aren't any screens matching the current filters
+
+
+ {/if}
+
+
+
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenRoleModal.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenRoleModal.svelte
new file mode 100644
index 0000000000..8334673261
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenRoleModal.svelte
@@ -0,0 +1,62 @@
+
+
+
+ Select which level of access you want your screens to have
+
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte
new file mode 100644
index 0000000000..0d861d1cd8
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte
@@ -0,0 +1,197 @@
+
+
+
+
+ {#if $selectedScreen.layoutId}
+
+ This screen uses a custom layout, which is deprecated
+
+ {/if}
+ {#each screenSettings as setting (setting.key)}
+ setScreenSetting(setting, val)}
+ props={{ ...setting.props, error: errors[setting.key] }}
+ {bindings}
+ />
+ {/each}
+
+
+
diff --git a/packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenWizard.svelte
similarity index 81%
rename from packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenWizard.svelte
index 5f36034b93..6485e7a13f 100644
--- a/packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenWizard.svelte
@@ -1,13 +1,16 @@
+
+
+{#key $selectedScreen?._id}
+
+{/key}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/AppThemeSelect.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/AppThemeSelect.svelte
new file mode 100644
index 0000000000..accd156c29
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/AppThemeSelect.svelte
@@ -0,0 +1,47 @@
+
+
+
+
+
+
+
+
+
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeInfoPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeInfoPanel.svelte
new file mode 100644
index 0000000000..9593f0bff5
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeInfoPanel.svelte
@@ -0,0 +1,12 @@
+
+
+
+
+
+ Your theme is set across all the screens within your app.
+
+
+
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeSettingsPanel.svelte
new file mode 100644
index 0000000000..4bad3b7bc4
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeSettingsPanel.svelte
@@ -0,0 +1,116 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ update("primaryColor", e.detail)}
+ />
+
+
+
+ update("primaryColorHover", e.detail)}
+ />
+
+
+
+
+
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/index.svelte
new file mode 100644
index 0000000000..013257d8e1
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/index.svelte
@@ -0,0 +1,7 @@
+
+
+
+
diff --git a/packages/builder/src/pages/builder/app/[application]/design/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/_layout.svelte
index d41fc0ee34..ec21d909aa 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/_layout.svelte
@@ -1,2 +1,2 @@
-
+
diff --git a/packages/builder/src/pages/builder/app/[application]/design/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/index.svelte
index 1a454df4db..6490000b35 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/index.svelte
@@ -1,8 +1,67 @@
-
+{#if loaded}
+
+
+ 
+
+ LET’S BRING THIS APP TO LIFE
+
+
+
+