diff --git a/packages/bbui/src/Form/Core/Combobox.svelte b/packages/bbui/src/Form/Core/Combobox.svelte index 5ea94bf0a4..2f832ad91e 100644 --- a/packages/bbui/src/Form/Core/Combobox.svelte +++ b/packages/bbui/src/Form/Core/Combobox.svelte @@ -63,9 +63,9 @@ on:focus={() => (focus = true)} on:blur={() => (focus = false)} on:change={onChange} - {value} + value={value || ""} + placeholder={placeholder || ""} {disabled} - {placeholder} class="spectrum-Textfield-input spectrum-InputGroup-input" /> diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte index 74bbda278c..b6b61a8d04 100644 --- a/packages/bbui/src/Table/Table.svelte +++ b/packages/bbui/src/Table/Table.svelte @@ -359,7 +359,7 @@ background-color: var(--spectrum-alias-background-color-secondary); overflow: hidden; position: relative; - z-index: 1; + z-index: 0; } .container { diff --git a/packages/builder/package.json b/packages/builder/package.json index 4cebeed1c8..59af2e2e57 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -78,7 +78,7 @@ "posthog-js": "1.4.5", "remixicon": "2.5.0", "shortid": "2.2.15", - "svelte-dnd-action": "^0.8.9", + "svelte-dnd-action": "^0.9.8", "svelte-loading-spinners": "^0.1.1", "svelte-portal": "0.1.0", "uuid": "8.3.1", diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js index 5ce8e407c1..6d7cad1cd0 100644 --- a/packages/builder/src/builderStore/dataBinding.js +++ b/packages/builder/src/builderStore/dataBinding.js @@ -333,7 +333,7 @@ const buildFormSchema = component => { */ export function removeBindings(obj) { for (let [key, value] of Object.entries(obj)) { - if (typeof value === "object") { + if (value && typeof value === "object") { obj[key] = removeBindings(value) } else if (typeof value === "string") { obj[key] = value.replace(CAPTURE_HBS_TEMPLATE, "Invalid binding") diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js index 50f75d69e4..9a7e2715da 100644 --- a/packages/builder/src/builderStore/store/frontend.js +++ b/packages/builder/src/builderStore/store/frontend.js @@ -305,7 +305,6 @@ export const getFrontendStore = () => { _id: uuid(), _component: definition.component, _styles: { normal: {}, hover: {}, active: {} }, - _transition: "", _instanceName: `New ${definition.name}`, ...cloneDeep(props), ...extras, @@ -508,15 +507,6 @@ export const getFrontendStore = () => { selected._styles = { normal: {}, hover: {}, active: {} } await store.actions.preview.saveSelected() }, - updateTransition: async transition => { - const selected = get(selectedComponent) - if (transition == null || transition === "") { - selected._transition = "" - } else { - selected._transition = transition - } - await store.actions.preview.saveSelected() - }, updateProp: async (name, value) => { let component = get(selectedComponent) if (!name || !component) { @@ -536,37 +526,50 @@ export const getFrontendStore = () => { return } - // Find a nav bar in the main layout - const nav = findComponentType( - layout.props, - "@budibase/standard-components/navigation" - ) - if (!nav) { - return - } - - let newLink - if (nav._children && nav._children.length) { - // Clone an existing link if one exists - newLink = cloneDeep(nav._children[0]) - - // Set our new props - newLink._id = uuid() - newLink._instanceName = `${title} Link` - newLink.url = url - newLink.text = title - } else { - // Otherwise create vanilla new link - newLink = { - ...store.actions.components.createInstance("link"), - url, + // Add link setting to main layout + if (layout.props._component.endsWith("layout")) { + // If using a new SDK, add to the layout component settings + if (!layout.props.links) { + layout.props.links = [] + } + layout.props.links.push({ text: title, - _instanceName: `${title} Link`, + url, + }) + } else { + // If using an old SDK, add to the navigation component + // TODO: remove this when we can assume everyone has updated + const nav = findComponentType( + layout.props, + "@budibase/standard-components/navigation" + ) + if (!nav) { + return + } + + let newLink + if (nav._children && nav._children.length) { + // Clone an existing link if one exists + newLink = cloneDeep(nav._children[0]) + + // Set our new props + newLink._id = uuid() + newLink._instanceName = `${title} Link` + newLink.url = url + newLink.text = title + } else { + // Otherwise create vanilla new link + newLink = { + ...store.actions.components.createInstance("link"), + url, + text: title, + _instanceName: `${title} Link`, + } + nav._children = [...nav._children, newLink] } } // Save layout - nav._children = [...nav._children, newLink] await store.actions.layouts.save(layout) }, }, diff --git a/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js b/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js index 3cfbe8f2fe..7d7283c3d6 100644 --- a/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js +++ b/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js @@ -128,7 +128,6 @@ const createScreen = table => { background: "white", "border-radius": "0.5rem", "box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)", - "margin-top": "20px", "border-width": "2px", "border-color": "rgba(0, 0, 0, 0.1)", "border-style": "None", @@ -136,7 +135,6 @@ const createScreen = table => { "padding-bottom": "48px", "padding-right": "48px", "padding-left": "48px", - "margin-bottom": "20px", }) .customProps({ direction: "column", diff --git a/packages/builder/src/builderStore/store/screenTemplates/utils/Component.js b/packages/builder/src/builderStore/store/screenTemplates/utils/Component.js index c4085e483c..182736a1d5 100644 --- a/packages/builder/src/builderStore/store/screenTemplates/utils/Component.js +++ b/packages/builder/src/builderStore/store/screenTemplates/utils/Component.js @@ -14,7 +14,6 @@ export class Component extends BaseStructure { active: {}, selected: {}, }, - _transition: "", _instanceName: "", _children: [], } @@ -40,11 +39,6 @@ export class Component extends BaseStructure { return this } - transition(transition) { - this._json._transition = transition - return this - } - // Shorthand for custom props "type" type(type) { this._json.type = type diff --git a/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js b/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js index 3771ec21b8..4d2c13355d 100644 --- a/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js +++ b/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js @@ -40,12 +40,10 @@ export function makeMainForm() { padding: "0px", "border-radius": "0.5rem", "box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)", - "margin-top": "20px", "padding-top": "48px", "padding-bottom": "48px", "padding-right": "48px", "padding-left": "48px", - "margin-bottom": "20px", }) .instanceName("Form") } @@ -58,6 +56,8 @@ export function makeBreadcrumbContainer(tableName, text, capitalise = false) { .normalStyle({ "margin-right": "4px", "margin-left": "4px", + "margin-top": "0px", + "margin-bottom": "0px", }) .customStyle(spectrumColor(700)) .text(">") @@ -65,6 +65,8 @@ export function makeBreadcrumbContainer(tableName, text, capitalise = false) { const textStyling = { color: "#000000", + "margin-top": "0px", + "margin-bottom": "0px", } if (capitalise) { textStyling["text-transform"] = "capitalize" @@ -140,10 +142,6 @@ export function makeTitleContainer(title) { const heading = new Component("@budibase/standard-components/heading") .normalStyle({ margin: "0px", - "margin-bottom": "0px", - "margin-right": "0px", - "margin-top": "0px", - "margin-left": "0px", flex: "1 1 auto", }) .customStyle(spectrumColor(900)) diff --git a/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte b/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte index ac0e0a588a..d8881a8d96 100644 --- a/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte +++ b/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte @@ -1,10 +1,17 @@ @@ -78,18 +67,6 @@ {/if} - {#if componentDefinition?.transitionable} -
- + + removeLink(link.id)} + /> +
+ {/each} + + {/if} +
+ +
+ + + + + diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/NavigationEditor/NavigationEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/NavigationEditor/NavigationEditor.svelte new file mode 100644 index 0000000000..b7a272e608 --- /dev/null +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/NavigationEditor/NavigationEditor.svelte @@ -0,0 +1,23 @@ + + +Configure Links + + + Configure the links in your navigation bar. + + + + diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/SectionSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/SectionSelect.svelte new file mode 100644 index 0000000000..6b3cf72016 --- /dev/null +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/SectionSelect.svelte @@ -0,0 +1,75 @@ + + +{layoutMap[value].name} + + dispatch("change", selected)} + size="L" + title="Select layout" + > +
+ {#each Object.entries(layoutMap) as [key, value]} + + {/each} +
+
+
+ + diff --git a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte index 31b6c0d381..9dcd5f0daa 100644 --- a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte @@ -15,6 +15,8 @@ import FieldSelect from "./PropertyControls/FieldSelect.svelte" import MultiFieldSelect from "./PropertyControls/MultiFieldSelect.svelte" import SchemaSelect from "./PropertyControls/SchemaSelect.svelte" + import SectionSelect from "./PropertyControls/SectionSelect.svelte" + import NavigationEditor from "./PropertyControls/NavigationEditor/NavigationEditor.svelte" import EventsEditor from "./PropertyControls/EventsEditor" import FilterEditor from "./PropertyControls/FilterEditor/FilterEditor.svelte" import { IconSelect } from "./PropertyControls/IconSelect" @@ -62,6 +64,8 @@ field: FieldSelect, multifield: MultiFieldSelect, schema: SchemaSelect, + section: SectionSelect, + navigation: NavigationEditor, filter: FilterEditor, "field/string": StringFieldSelect, "field/number": NumberFieldSelect, diff --git a/packages/builder/src/components/settings/Integration.svelte b/packages/builder/src/components/settings/Integration.svelte deleted file mode 100644 index cd2a38ba1b..0000000000 --- a/packages/builder/src/components/settings/Integration.svelte +++ /dev/null @@ -1,54 +0,0 @@ - - -
-
-
zoom
-
-
Zoom
-
- Lorem, ipsum dolor sit amet consectetur adipisicing elit -
-
-
- -
- - diff --git a/packages/builder/src/components/settings/Link.svelte b/packages/builder/src/components/settings/Link.svelte deleted file mode 100644 index c8f42084f9..0000000000 --- a/packages/builder/src/components/settings/Link.svelte +++ /dev/null @@ -1,33 +0,0 @@ - - -
- -
- - - - - diff --git a/packages/builder/src/components/settings/SettingsModal.svelte b/packages/builder/src/components/settings/SettingsModal.svelte deleted file mode 100644 index f881720305..0000000000 --- a/packages/builder/src/components/settings/SettingsModal.svelte +++ /dev/null @@ -1,34 +0,0 @@ - - - -
- - - - - - - - - -
-
- - diff --git a/packages/builder/src/components/settings/tabs/APIKeys.svelte b/packages/builder/src/components/settings/tabs/APIKeys.svelte deleted file mode 100644 index 6476b91374..0000000000 --- a/packages/builder/src/components/settings/tabs/APIKeys.svelte +++ /dev/null @@ -1,62 +0,0 @@ - - -
- updateKey(["budibase", e.detail])} - value={keys.budibase} - label="Budibase Cloud API Key" - /> - - Log in to the Budibase Hosting Portal to get your API Key. → - -
- - {$database._id} -
-
- - diff --git a/packages/builder/src/components/settings/tabs/DangerZone.svelte b/packages/builder/src/components/settings/tabs/DangerZone.svelte deleted file mode 100644 index e941cfd418..0000000000 --- a/packages/builder/src/components/settings/tabs/DangerZone.svelte +++ /dev/null @@ -1,56 +0,0 @@ - - -
- - Type - DELETE - into the textbox, then click the following button to delete your entire web app. - - (value = e.detail)} - disabled={loading} - placeholder="" - /> -
- -
-
- - diff --git a/packages/builder/src/components/settings/tabs/General.svelte b/packages/builder/src/components/settings/tabs/General.svelte deleted file mode 100644 index 4a8d24ed58..0000000000 --- a/packages/builder/src/components/settings/tabs/General.svelte +++ /dev/null @@ -1,97 +0,0 @@ - - -
- updateApplication({ name: e.detail })} - value={$store.name} - error={nameError} - label="App Name" - /> - updateApplication({ url: e.detail })} - value={$store.url} - error={urlError} - label="App URL" - /> -