diff --git a/packages/builder/package.json b/packages/builder/package.json index 996a1f0205..0de4509698 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -79,7 +79,6 @@ "shortid": "^2.2.15", "svelte-loading-spinners": "^0.1.1", "svelte-portal": "^0.1.0", - "svelte-simple-modal": "^0.4.2", "yup": "^0.29.2" }, "devDependencies": { diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationList/AutomationList.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationList/AutomationList.svelte index ce5d4e0d16..eb1b424cb5 100644 --- a/packages/builder/src/components/automation/AutomationPanel/AutomationList/AutomationList.svelte +++ b/packages/builder/src/components/automation/AutomationPanel/AutomationList/AutomationList.svelte @@ -1,32 +1,23 @@
- +
+ + + diff --git a/packages/builder/src/components/backend/DataTable/ModelDataTable.svelte b/packages/builder/src/components/backend/DataTable/ModelDataTable.svelte index 6587451462..49659ff8d0 100644 --- a/packages/builder/src/components/backend/DataTable/ModelDataTable.svelte +++ b/packages/builder/src/components/backend/DataTable/ModelDataTable.svelte @@ -1,8 +1,9 @@ - + {#if Object.keys(schema).length > 0} - - + + + {/if}
diff --git a/packages/builder/src/components/backend/DataTable/popovers/RecordFieldControl.svelte b/packages/builder/src/components/backend/DataTable/RecordFieldControl.svelte similarity index 96% rename from packages/builder/src/components/backend/DataTable/popovers/RecordFieldControl.svelte rename to packages/builder/src/components/backend/DataTable/RecordFieldControl.svelte index 10aeb56ae8..55129b47e3 100644 --- a/packages/builder/src/components/backend/DataTable/popovers/RecordFieldControl.svelte +++ b/packages/builder/src/components/backend/DataTable/RecordFieldControl.svelte @@ -1,7 +1,7 @@ @@ -50,68 +52,68 @@

{title}

- +
- - {#if allowEditing} - - {/if} - {#each columns as header} - - {/each} - - - - {#if paginatedData.length === 0} - {#if allowEditing} - - {/if} - {#each columns as header, idx} - - {/each} - {/if} - {#each paginatedData as row} {#if allowEditing} - + {/if} {#each columns as header} - + {/each} - {/each} + + + {#if paginatedData.length === 0} + {#if allowEditing} + + {/if} + {#each columns as header, idx} + + {/each} + {/if} + {#each paginatedData as row} + + {#if allowEditing} + + {/if} + {#each columns as header} + + {/each} + + {/each}
-
Edit
-
- {#if allowEditing} - - {:else} -
{header}
- {/if} -
No data. - {#if idx === 0}No data.{/if} -
- - +
Edit
+
- {#if schema[header].type === 'link'} -
selectRelationship(row, header)}> - {row[header] ? row[header].length : 0} linked row(s) -
- {:else if schema[header].type === 'attachment'} - - {:else}{getOr('', header, row)}{/if} -
+ {#if allowEditing} + + {:else} +
{header}
+ {/if} +
No data. + {#if idx === 0 && !allowEditing}No data.{/if} +
+ + + {#if schema[header].type === 'link'} +
selectRelationship(row, header)}> + {row[header] ? row[header].length : 0} related row(s) +
+ {:else if schema[header].type === 'attachment'} + + {:else}{getOr('', header, row)}{/if} +
+ {data} + bind:currentPage + pageItemCount={paginatedData.length} + {ITEMS_PER_PAGE} /> diff --git a/packages/builder/src/components/backend/DataTable/popovers/CalculatePopover.svelte b/packages/builder/src/components/backend/DataTable/popovers/CalculatePopover.svelte new file mode 100644 index 0000000000..432009281d --- /dev/null +++ b/packages/builder/src/components/backend/DataTable/popovers/CalculatePopover.svelte @@ -0,0 +1,86 @@ + + +
+
Calculate
+
+

The

+ +

of

+ +
+ +
+ + diff --git a/packages/builder/src/components/backend/DataTable/popovers/ColumnHeader.svelte b/packages/builder/src/components/backend/DataTable/popovers/ColumnPopover.svelte similarity index 91% rename from packages/builder/src/components/backend/DataTable/popovers/ColumnHeader.svelte rename to packages/builder/src/components/backend/DataTable/popovers/ColumnPopover.svelte index e1429edb34..de431035da 100644 --- a/packages/builder/src/components/backend/DataTable/popovers/ColumnHeader.svelte +++ b/packages/builder/src/components/backend/DataTable/popovers/ColumnPopover.svelte @@ -2,7 +2,7 @@ import { backendUiStore } from "builderStore" import { DropdownMenu, Button, Icon, Input, Select } from "@budibase/bbui" import { FIELDS } from "constants/backend" - import CreateEditColumnModal from "./CreateEditColumn.svelte" + import CreateEditColumnPopover from "./CreateEditColumnPopover.svelte" import ConfirmDialog from "components/common/ConfirmDialog.svelte" import { notifier } from "../../../../builderStore/store/notifications" @@ -26,6 +26,11 @@ editing = false } + function showDelete() { + dropdown.hide() + confirmDeleteDialog.show() + } + function deleteColumn() { if (field.name === $backendUiStore.selectedModel.primaryDisplay) { notifier.danger("You cannot delete the primary display column") @@ -52,7 +57,7 @@ {#if editing}
Edit Column
- + {:else}
    {#if type !== 'link'} @@ -61,9 +66,7 @@ Edit {/if} -
  • confirmDeleteDialog.show()}> +
  • Delete
  • diff --git a/packages/builder/src/components/backend/DataTable/popovers/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/popovers/CreateEditColumnPopover.svelte similarity index 100% rename from packages/builder/src/components/backend/DataTable/popovers/CreateEditColumn.svelte rename to packages/builder/src/components/backend/DataTable/popovers/CreateEditColumnPopover.svelte diff --git a/packages/builder/src/components/backend/DataTable/popovers/CreateEditRecord.svelte b/packages/builder/src/components/backend/DataTable/popovers/CreateEditRecord.svelte deleted file mode 100644 index dda74a6ab3..0000000000 --- a/packages/builder/src/components/backend/DataTable/popovers/CreateEditRecord.svelte +++ /dev/null @@ -1,81 +0,0 @@ - - -
    - -
    - {#each modelSchema as [key, meta]} -
    - {#if meta.type === 'link'} - - {:else} - - {/if} -
    - {/each} -
    -
    - - -
    -
    - - diff --git a/packages/builder/src/components/backend/DataTable/popovers/View.svelte b/packages/builder/src/components/backend/DataTable/popovers/CreateViewPopover.svelte similarity index 62% rename from packages/builder/src/components/backend/DataTable/popovers/View.svelte rename to packages/builder/src/components/backend/DataTable/popovers/CreateViewPopover.svelte index 55c822caaa..8cd0785044 100644 --- a/packages/builder/src/components/backend/DataTable/popovers/View.svelte +++ b/packages/builder/src/components/backend/DataTable/popovers/CreateViewPopover.svelte @@ -1,20 +1,11 @@ -
    - - - Create New View - -
    - -
    -
    Create View
    - - +
    +
    Create View
    + + - +
    diff --git a/packages/builder/src/components/backend/DataTable/popovers/Filter.svelte b/packages/builder/src/components/backend/DataTable/popovers/FilterPopover.svelte similarity index 51% rename from packages/builder/src/components/backend/DataTable/popovers/Filter.svelte rename to packages/builder/src/components/backend/DataTable/popovers/FilterPopover.svelte index 4ece802a96..889fdd0726 100644 --- a/packages/builder/src/components/backend/DataTable/popovers/Filter.svelte +++ b/packages/builder/src/components/backend/DataTable/popovers/FilterPopover.svelte @@ -1,15 +1,7 @@ -
    - - - Filter - -
    - -
    -
    Filter
    - {#if view.filters.length} -
    - {#each view.filters as filter, idx} - {#if idx === 0} -

    Where

    - {:else} - - {/if} - - {#each fields as field} - + {#each CONJUNCTIONS as conjunction} + {/each} - + + {#each fields as field} + + {/each} + + + {#if filter.key && isMultipleChoice(filter.key)} + - {#if filter.key && isMultipleChoice(filter.key)} - - {:else} - - {/if} - removeFilter(idx)} /> - {/each} -
    - {/if} - + {/if} + - +
    diff --git a/packages/builder/src/components/backend/DataTable/popovers/GroupByPopover.svelte b/packages/builder/src/components/backend/DataTable/popovers/GroupByPopover.svelte new file mode 100644 index 0000000000..da5cf7b8ec --- /dev/null +++ b/packages/builder/src/components/backend/DataTable/popovers/GroupByPopover.svelte @@ -0,0 +1,66 @@ + + +
    +
    Group
    +
    +

    By

    + +
    + +
    + + diff --git a/packages/builder/src/components/backend/DataTable/popovers/Row.svelte b/packages/builder/src/components/backend/DataTable/popovers/Row.svelte deleted file mode 100644 index 38b56e83fd..0000000000 --- a/packages/builder/src/components/backend/DataTable/popovers/Row.svelte +++ /dev/null @@ -1,27 +0,0 @@ - - -
    - -
    - -
    Add New Row
    - -
    - - diff --git a/packages/builder/src/components/backend/DataTable/popovers/EditRow.svelte b/packages/builder/src/components/backend/DataTable/popovers/RowPopover.svelte similarity index 65% rename from packages/builder/src/components/backend/DataTable/popovers/EditRow.svelte rename to packages/builder/src/components/backend/DataTable/popovers/RowPopover.svelte index 8b50bf6b61..ca8488e134 100644 --- a/packages/builder/src/components/backend/DataTable/popovers/EditRow.svelte +++ b/packages/builder/src/components/backend/DataTable/popovers/RowPopover.svelte @@ -1,41 +1,33 @@ @@ -43,21 +35,16 @@
    - {#if editing} -
    Edit Row
    - - {:else} -
      -
    • - - Edit -
    • -
    • confirmDeleteDialog.show()}> - - Delete -
    • -
    - {/if} +
      +
    • + + Edit +
    • +
    • + + Delete +
    • +
    + + + diff --git a/packages/builder/src/components/common/ErrorsBox.svelte b/packages/builder/src/components/common/ErrorsBox.svelte index 0e565a4ad8..9e29784c66 100644 --- a/packages/builder/src/components/common/ErrorsBox.svelte +++ b/packages/builder/src/components/common/ErrorsBox.svelte @@ -5,9 +5,25 @@ {#if hasErrors} -
    +
    {#each errors as error} -
    {error.dataPath} {error.message}
    +
    {error.dataPath} {error.message}
    {/each}
    {/if} + + diff --git a/packages/builder/src/components/common/LinkedRecordSelector.svelte b/packages/builder/src/components/common/LinkedRecordSelector.svelte index c263332ca5..f4df3a7d1f 100644 --- a/packages/builder/src/components/common/LinkedRecordSelector.svelte +++ b/packages/builder/src/components/common/LinkedRecordSelector.svelte @@ -20,7 +20,6 @@ const FETCH_RECORDS_URL = `/api/${linkedModelId}/records` const response = await api.get(FETCH_RECORDS_URL) const result = await response.json() - console.log(result) return result } diff --git a/packages/builder/src/components/common/Modal/Modal.svelte b/packages/builder/src/components/common/Modal/Modal.svelte index 0077567100..e3bc0158e5 100644 --- a/packages/builder/src/components/common/Modal/Modal.svelte +++ b/packages/builder/src/components/common/Modal/Modal.svelte @@ -1,17 +1,26 @@ {#if visible} -
    +
    + transition:fly={{ y: 50 }}>
    -
    +
    +
    -
    + {/if} diff --git a/packages/builder/src/components/common/Modal/ModalContainer.svelte b/packages/builder/src/components/common/Modal/ModalContainer.svelte index 891df8630b..ed6d9e15ad 100644 --- a/packages/builder/src/components/common/Modal/ModalContainer.svelte +++ b/packages/builder/src/components/common/Modal/ModalContainer.svelte @@ -5,5 +5,6 @@ position: fixed; top: 0; left: 0; + z-index: 999; } diff --git a/packages/builder/src/components/common/Modal/ModalFooter.svelte b/packages/builder/src/components/common/Modal/ModalFooter.svelte new file mode 100644 index 0000000000..fb85a1cbb2 --- /dev/null +++ b/packages/builder/src/components/common/Modal/ModalFooter.svelte @@ -0,0 +1,63 @@ + + +
    +
    + +
    +
    + {#if showCancelButton} + + {/if} + {#if showConfirmButton} + + {/if} +
    +
    + + diff --git a/packages/builder/src/components/common/Modal/ModalTitle.svelte b/packages/builder/src/components/common/Modal/ModalTitle.svelte new file mode 100644 index 0000000000..0f6a4f5207 --- /dev/null +++ b/packages/builder/src/components/common/Modal/ModalTitle.svelte @@ -0,0 +1,10 @@ +
    + +
    + + diff --git a/packages/builder/src/components/common/Modal/context.js b/packages/builder/src/components/common/Modal/context.js new file mode 100644 index 0000000000..81ea1cdcf5 --- /dev/null +++ b/packages/builder/src/components/common/Modal/context.js @@ -0,0 +1 @@ +export const ContextKey = "budibase-modal" diff --git a/packages/builder/src/components/common/Modal/index.js b/packages/builder/src/components/common/Modal/index.js index bd53a1373b..8420f8416a 100644 --- a/packages/builder/src/components/common/Modal/index.js +++ b/packages/builder/src/components/common/Modal/index.js @@ -1,2 +1,5 @@ export { default as Modal } from "./Modal.svelte" export { default as ModalContainer } from "./ModalContainer.svelte" +export { default as ModalTitle } from "./ModalTitle.svelte" +export { default as ModalFooter } from "./ModalFooter.svelte" +export { ContextKey } from "./context" diff --git a/packages/builder/src/components/common/Modal/portal.js b/packages/builder/src/components/common/Modal/portal.js deleted file mode 100644 index a5070cad7d..0000000000 --- a/packages/builder/src/components/common/Modal/portal.js +++ /dev/null @@ -1,14 +0,0 @@ -export function portal(node, targetNodeOrSelector) { - const targetNode = - typeof targetNodeOrSelector == "string" - ? document.querySelector(targetNodeOrSelector) - : targetNodeOrSelector - const portalChildren = [...node.children] - targetNode.append(...portalChildren) - - return { - destroy() { - for (const portalChild of portalChildren) portalChild.remove() - }, - } -} diff --git a/packages/builder/src/components/common/MultiSelect.svelte b/packages/builder/src/components/common/MultiSelect.svelte index f000df7f41..22cc3f16be 100644 --- a/packages/builder/src/components/common/MultiSelect.svelte +++ b/packages/builder/src/components/common/MultiSelect.svelte @@ -6,83 +6,68 @@ "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" export let value = [] - export let readonly = false export let label let placeholder = "Type to search" - let input - let inputValue let options = [] - let activeOption let optionsVisible = false let selected = {} let first = true let slot onMount(() => { - slot.querySelectorAll("option").forEach(o => { - o.selected && !value.includes(o.value) && (value = [...value, o.value]) - options = [...options, { value: o.value, name: o.textContent }] - }) - value && - (selected = options.reduce( - (obj, op) => - value.includes(op.value) ? { ...obj, [op.value]: op } : obj, - {} - )) + const domOptions = Array.from(slot.querySelectorAll("option")) + options = domOptions.map(option => ({ + value: option.value, + name: option.textContent, + })) + if (value) { + options.forEach(option => { + if (value.includes(option.value)) { + selected[option.value] = option + } + }) + } first = false }) - $: if (!first) value = Object.values(selected).map(o => o.value) - $: filtered = options.filter(o => - inputValue ? o.name.toLowerCase().includes(inputValue.toLowerCase()) : o - ) - $: if ( - (activeOption && !filtered.includes(activeOption)) || - (!activeOption && inputValue) - ) - activeOption = filtered[0] + // Keep value up to date with selected options + $: { + if (!first) { + value = Object.values(selected).map(option => option.value) + } + } function add(token) { - if (!readonly) selected[token.value] = token + selected[token.value] = token } function remove(value) { - if (!readonly) { - const { [value]: val, ...rest } = selected - selected = rest - } + const { [value]: val, ...rest } = selected + selected = rest } function removeAll() { selected = [] - inputValue = "" } function showOptions(show) { optionsVisible = show - if (!show) { - activeOption = undefined - } else { - input.focus() - } } - function handleBlur() { - showOptions(false) - } - - function handleFocus() { - showOptions(true) + function handleClick() { + showOptions(!optionsVisible) } function handleOptionMousedown(e) { const value = e.target.dataset.value + if (value == null) { + return + } if (selected[value]) { remove(value) } else { add(options.filter(option => option.value === value)[0]) - input.focus() } } @@ -91,76 +76,52 @@ {#if label} {/if} -
    +
    -
    +
    {#each Object.values(selected) as option} -
    +
    {option.name} - {#if !readonly} -
    remove(option.value)}> - - - -
    - {/if} +
    remove(option.value)}> + + + +
    {/each} + {#if !value || !value.length} {/if}
    -
    - {#if !readonly} - -
    - - - -
    - {/if} -
    {#if optionsVisible} +
    showOptions(false)} />
      - {#each filtered as option} -
    • + {#each options as option} +
    • {option.name}
    • {/each} - {#if !filtered.length && inputValue.length} -
    • No results
    • + {#if !options.length} +
    • No results
    • {/if}
    {/if} @@ -175,7 +136,7 @@ justify-content: flex-start; align-items: stretch; } - .multiselect:not(.readonly):hover { + .multiselect:hover { border-bottom-color: hsl(0, 0%, 50%); } @@ -185,6 +146,7 @@ justify-content: flex-start; align-items: center; flex: 0 1 auto; + z-index: 2; } .tokens { @@ -194,6 +156,14 @@ position: relative; width: 0; flex: 1 1 auto; + background-color: var(--grey-2); + border-radius: var(--border-radius-m); + padding: 0 var(--spacing-m) calc(var(--spacing-m) - var(--spacing-xs)) + calc(var(--spacing-m) / 2); + border: var(--border-transparent); + } + .tokens:hover { + cursor: pointer; } .tokens::after { background: none repeat scroll 0 0 transparent; @@ -206,74 +176,72 @@ transition: width 0.3s ease 0s, left 0.3s ease 0s; width: 0; } - .tokens.showOptions::after { + .tokens.optionsVisible { + border: var(--border-blue); + } + .tokens.empty { + padding: var(--spacing-m); + font-size: var(--font-size-xs); + user-select: none; + } + .tokens::after { width: 100%; left: 0; } .token { font-size: var(--font-size-xs); align-items: center; - background-color: var(--grey-3); + background-color: white; border-radius: var(--border-radius-l); display: flex; - margin: 0.25rem 0.5rem 0.25rem 0; + margin: calc(var(--spacing-m) - var(--spacing-xs)) 0 0 + calc(var(--spacing-m) / 2); max-height: 1.3rem; - padding: var(--spacing-s) var(--spacing-m); + padding: var(--spacing-xs) var(--spacing-s); transition: background-color 0.3s; white-space: nowrap; } - .token:hover { - background-color: var(--grey-4); + .token span { + pointer-events: none; + user-select: none; } - .readonly .token { - color: hsl(0, 0%, 40%); - } - .token-remove, - .remove-all { + .token-remove { align-items: center; - background-color: var(--grey-5); + background-color: var(--grey-4); border-radius: 50%; color: var(--white); display: flex; justify-content: center; - height: 1.25rem; - margin-left: 0.25rem; - min-width: 1.25rem; + height: 1rem; + width: 1rem; + margin: calc(-1 * var(--spacing-xs)) 0 calc(-1 * var(--spacing-xs)) + var(--spacing-xs); } - .token-remove:hover, - .remove-all:hover { - background-color: var(--grey-6); + .token-remove:hover { + background-color: var(--grey-5); cursor: pointer; } - .actions { - align-items: center; - display: flex; - flex: 1; - } - .actions > * { - flex: 0 0 auto; - } - .actions > input { - border: none; - font-size: var(--font-size-xs); - line-height: 1.5rem; - outline: none; - background-color: transparent; - flex: 1 1 auto; - } - .icon-clear path { fill: white; } + .options-overlay { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + z-index: 1; + } + .options { + z-index: 2; left: 0; list-style: none; margin-block-end: 0; margin-block-start: 0; - max-height: 70vh; - overflow: auto; + overflow-y: auto; padding-inline-start: 0; position: absolute; top: calc(100% + 1px); @@ -283,8 +251,8 @@ box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15); margin-top: var(--spacing-xs); padding: var(--spacing-s) 0; - z-index: 1; background-color: white; + max-height: 200px; } li { background-color: white; @@ -299,6 +267,10 @@ li:not(.selected):hover { background-color: var(--grey-1); } + li.no-results:hover { + background-color: white; + cursor: initial; + } .hidden { display: none; diff --git a/packages/builder/src/components/common/Notification/NotificationDisplay.svelte b/packages/builder/src/components/common/Notification/NotificationDisplay.svelte index 425eb60fb2..b77d8fd8f2 100644 --- a/packages/builder/src/components/common/Notification/NotificationDisplay.svelte +++ b/packages/builder/src/components/common/Notification/NotificationDisplay.svelte @@ -1,7 +1,7 @@ -
      +
      {#each $notificationStore.notifications as notification (notification.id)} -
    • + transition:fly={{ y: -30 }}>
      {notification.message}
      {#if notification.icon} {/if} -
    • +
      {/each} -
    +
    diff --git a/packages/builder/src/components/database/DataTable/ViewDataTable.svelte b/packages/builder/src/components/database/DataTable/ViewDataTable.svelte deleted file mode 100644 index 0958737b59..0000000000 --- a/packages/builder/src/components/database/DataTable/ViewDataTable.svelte +++ /dev/null @@ -1,56 +0,0 @@ - - - - - - {#if view.calculation} - - {/if} - -
    diff --git a/packages/builder/src/components/database/DataTable/popovers/Export.svelte b/packages/builder/src/components/database/DataTable/popovers/Export.svelte deleted file mode 100644 index 00514edb9c..0000000000 --- a/packages/builder/src/components/database/DataTable/popovers/Export.svelte +++ /dev/null @@ -1,71 +0,0 @@ - - -
    - - - Export - -
    - -
    Export Format
    - -
    - - -
    -
    - - diff --git a/packages/builder/src/components/settings/Link.svelte b/packages/builder/src/components/settings/Link.svelte index 1d702d032b..1550815c33 100644 --- a/packages/builder/src/components/settings/Link.svelte +++ b/packages/builder/src/components/settings/Link.svelte @@ -1,31 +1,17 @@ - + + + + diff --git a/packages/builder/src/components/settings/tabs/DangerZone.svelte b/packages/builder/src/components/settings/tabs/DangerZone.svelte index e8b6706d5a..6807f4289e 100644 --- a/packages/builder/src/components/settings/tabs/DangerZone.svelte +++ b/packages/builder/src/components/settings/tabs/DangerZone.svelte @@ -2,6 +2,7 @@ import { params, goto } from "@sveltech/routify" import { Input, TextArea, Button, Body } from "@budibase/bbui" import { del } from "builderStore/api" + import { ModalFooter } from "components/common/Modal" let value = "" let loading = false @@ -9,16 +10,9 @@ async function deleteApp() { loading = true const id = $params.application - const res = await del(`/api/${id}`) - const json = await res.json() - + await del(`/api/${id}`) loading = false - if (res.ok) { - $goto("/") - return json - } else { - throw new Error(json) - } + $goto("/") } @@ -35,13 +29,12 @@ thin disabled={loading} placeholder="" /> - + showCancelButton={false} + confirmText="Delete Entire App" + onConfirm={deleteApp} />
    diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte index 84ddd9f8ec..b38fdcaa14 100644 --- a/packages/builder/src/components/start/CreateAppModal.svelte +++ b/packages/builder/src/components/start/CreateAppModal.svelte @@ -11,12 +11,10 @@ import { Input, TextArea, Button } from "@budibase/bbui" import { goto } from "@sveltech/routify" import { AppsIcon, InfoIcon, CloseIcon } from "components/common/Icons/" - import { getContext } from "svelte" import { fade } from "svelte/transition" import { post } from "builderStore/api" import analytics from "analytics" - const { open, close } = getContext("simple-modal") //Move this to context="module" once svelte-forms is updated so that it can bind to stores correctly const createAppStore = writable({ currentStep: 0, values: {} }) @@ -169,7 +167,7 @@ } const userResp = await api.post(`/api/users`, user) const json = await userResp.json() - $goto(`./${appJson._id}`) + $goto(`/${appJson._id}`) } catch (error) { console.error(error) } @@ -194,10 +192,6 @@ let onChange = () => {} - function _onCancel() { - close() - } - async function _onOkay() { await createNewApp() } @@ -249,9 +243,6 @@ {/if}
    -
    - -
    budibase icon {#if submitting}
    @@ -276,16 +267,6 @@ align-content: center; background: #f5f5f5; } - .close-button { - cursor: pointer; - position: absolute; - top: 20px; - right: 20px; - } - .close-button :global(svg) { - width: 24px; - height: 24px; - } .heading { display: flex; flex-direction: row; diff --git a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte index 7d646d22d5..ec2122d6bf 100644 --- a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte +++ b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte @@ -1,5 +1,4 @@
    {}}> - +
    + +
    • confirmDeleteDialog.show()}> - + Delete
    • - + Move up
    • - + Move down
    • - + Duplicate
    • storeComponentForCopy(true)}> - + Cut
    • storeComponentForCopy(false)}> - + Copy

    • @@ -150,21 +149,21 @@ class="item" class:disabled={noPaste} on:click={() => pasteComponent('above')}> - + Paste above
    • pasteComponent('below')}> - + Paste below
    • pasteComponent('inside')}> - + Paste inside
    @@ -181,7 +180,7 @@ ul { list-style: none; padding: 0; - margin: var(--spacing-xs) 0; + margin: var(--spacing-s) 0; } li { @@ -190,44 +189,29 @@ font-size: var(--font-size-xs); color: var(--ink); padding: var(--spacing-s) var(--spacing-m); - margin: auto 0px; + margin: auto 0; align-items: center; cursor: pointer; } - - button { - border-style: none; - border-radius: 2px; - padding: 0; - background: transparent; - cursor: pointer; - color: var(--ink); - outline: none; - } - - li:hover { + li:not(.disabled):hover { background-color: var(--grey-2); } - li:active { color: var(--blue); } - - .item { - display: flex; - align-items: center; - font-size: 14px; - } - - .icon { + li i { margin-right: 8px; + font-size: var(--font-size-s); } - - .disabled { + li.disabled { color: var(--grey-4); cursor: default; } + .icon i { + font-size: 16px; + } + .hr-style { margin: 8px 0; color: var(--grey-4); diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte index d9c619fae3..bec42b7f4f 100644 --- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte +++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte @@ -190,9 +190,9 @@ .item { display: grid; grid-template-columns: 1fr auto auto auto; - padding: 0px 5px 0px 15px; - margin: auto 0px; - border-radius: 5px; + padding: 0 var(--spacing-m); + margin: 0; + border-radius: var(--border-radius-m); height: 36px; align-items: center; } @@ -205,9 +205,6 @@ .actions { display: none; color: var(--ink); - padding: 0 5px; - width: 24px; - height: 24px; border-style: none; background: rgba(0, 0, 0, 0); cursor: pointer; diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte index 0d84a80f38..05ecd526b2 100644 --- a/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte +++ b/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte @@ -1,29 +1,14 @@ @@ -81,6 +47,13 @@
    + + (selectedEvent = null)} /> + + diff --git a/packages/builder/src/pages/[application]/_reset.svelte b/packages/builder/src/pages/[application]/_reset.svelte index ad12dd54e8..a9744b8b8c 100644 --- a/packages/builder/src/pages/[application]/_reset.svelte +++ b/packages/builder/src/pages/[application]/_reset.svelte @@ -1,13 +1,9 @@ - -
    +
    +
    +
    + -
    -
    - - - - {#each $layout.children as { path, title }} - - {title} - - {/each} -
    -
    - + + {#each $layout.children as { path, title }} window.open(`/${application}`)}> - + class:active={$isActive(path)} + class="topnavitem" + on:click={topItemNavigate(path)}> + {title} -
    + {/each} +
    +
    + + window.open(`/${application}`)}> + +
    - - {#await promise} - -
    - {:then} - - {:catch error} -

    Something went wrong: {error.message}

    - {/await} -
    - + + {#await promise} + +
    + {:then _} + + {:catch error} +

    Something went wrong: {error.message}

    + {/await} +