diff --git a/package.json b/package.json index ac03b4493e..4d26be9941 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "prettier-plugin-svelte": "^2.2.0", "rimraf": "^3.0.2", "rollup-plugin-replace": "^2.2.0", - "svelte": "^3.37.0" + "svelte": "^3.38.2" }, "scripts": { "setup": "./hosting/scripts/setup.js && yarn && yarn bootstrap && yarn build && yarn dev", diff --git a/packages/bbui/package.json b/packages/bbui/package.json index 573e115377..056f4229cb 100644 --- a/packages/bbui/package.json +++ b/packages/bbui/package.json @@ -27,7 +27,7 @@ "rollup-plugin-postcss": "^4.0.0", "rollup-plugin-svelte": "^7.1.0", "rollup-plugin-terser": "^7.0.2", - "svelte": "^3.37.0" + "svelte": "^3.38.2" }, "keywords": [ "svelte" diff --git a/packages/bbui/src/Form/Core/Dropzone.svelte b/packages/bbui/src/Form/Core/Dropzone.svelte index 9dd2cbbc73..5b5c72b809 100644 --- a/packages/bbui/src/Form/Core/Dropzone.svelte +++ b/packages/bbui/src/Form/Core/Dropzone.svelte @@ -15,6 +15,8 @@ export let fileSizeLimit = BYTES_IN_MB * 20 export let processFiles = null export let handleFileTooLarge = null + export let gallery = true + export let error = null const dispatch = createEventDispatcher() const imageExtensions = [ @@ -52,6 +54,8 @@ const newValue = [...value, ...processedFiles] dispatch("change", newValue) selectedImageIdx = newValue.length - 1 + } else { + dispatch("change", fileList) } } @@ -94,47 +98,68 @@
{#if selectedImage} -
-
-
{selectedImage.name}
-
- {#if selectedImage.size <= BYTES_IN_MB} - {`${selectedImage.size / BYTES_IN_KB} KB`} - {:else}{`${selectedImage.size / BYTES_IN_MB} MB`}{/if} + {#if gallery} +
+
+
{selectedImage.name}
+
+ {#if selectedImage.size <= BYTES_IN_MB} + {`${selectedImage.size / BYTES_IN_KB} KB`} + {:else}{`${selectedImage.size / BYTES_IN_MB} MB`}{/if} +
+ {#if !disabled} +
+ +
+ {/if}
- {#if !disabled} -
- + {#if isImage} + preview + {:else} +
+
{selectedImage.extension}
+
Preview not supported
{/if} -
- {#if isImage} - preview - {:else} -
-
{selectedImage.extension}
-
Preview not supported
+
0} + on:click={navigateLeft} + > +
- {/if} -
0} - on:click={navigateLeft} - > - +
+ +
+
File {selectedImageIdx + 1} of {fileCount}
-
- -
-
File {selectedImageIdx + 1} of {fileCount}
-
+ {:else if value?.length} + {#each value as file} +
+
+
{file.name}
+
+ {#if file.size <= BYTES_IN_MB} + {`${file.size / BYTES_IN_KB} KB`} + {:else}{`${file.size / BYTES_IN_MB} MB`}{/if} +
+ {#if !disabled} +
+ +
+ {/if} +
+
+ {/each} + {/if} {/if}
{ diff --git a/packages/bbui/src/Form/Dropzone.svelte b/packages/bbui/src/Form/Dropzone.svelte index c8400ecc6a..76bcfd9db3 100644 --- a/packages/bbui/src/Form/Dropzone.svelte +++ b/packages/bbui/src/Form/Dropzone.svelte @@ -11,6 +11,7 @@ export let fileSizeLimit = undefined export let processFiles = undefined export let handleFileTooLarge = undefined + export let gallery = true const dispatch = createEventDispatcher() const onChange = e => { @@ -27,6 +28,7 @@ {fileSizeLimit} {processFiles} {handleFileTooLarge} + {gallery} on:change={onChange} /> diff --git a/packages/bbui/src/Form/Input.svelte b/packages/bbui/src/Form/Input.svelte index a768f16681..327fefa32c 100644 --- a/packages/bbui/src/Form/Input.svelte +++ b/packages/bbui/src/Form/Input.svelte @@ -30,5 +30,6 @@ on:change={onChange} on:click on:input + on:blur /> diff --git a/packages/bbui/src/Layout/Layout.svelte b/packages/bbui/src/Layout/Layout.svelte index bf697f8499..acd064a16a 100644 --- a/packages/bbui/src/Layout/Layout.svelte +++ b/packages/bbui/src/Layout/Layout.svelte @@ -5,9 +5,11 @@ export let noPadding = false export let gap = "M" export let noGap = false + export let alignContent = "normal"
div { - display: grid; - grid-template-columns: 1fr; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: stretch; max-width: 80ch; margin: 0 auto; padding: calc(var(--spacing-xl) * 2); @@ -18,6 +20,7 @@ .wide { max-width: none; margin: 0; - padding: var(--spacing-xl) calc(var(--spacing-xl) * 2); + padding: var(--spacing-xl) calc(var(--spacing-xl) * 2) + calc(var(--spacing-xl) * 2) calc(var(--spacing-xl) * 2); } diff --git a/packages/bbui/src/Modal/Modal.svelte b/packages/bbui/src/Modal/Modal.svelte index adc726a7ab..12c12e3717 100644 --- a/packages/bbui/src/Modal/Modal.svelte +++ b/packages/bbui/src/Modal/Modal.svelte @@ -7,9 +7,10 @@ import Context from "../context" export let fixed = false + export let inline = false const dispatch = createEventDispatcher() - let visible = !!fixed + let visible = fixed || inline $: dispatch(visible ? "show" : "hide") export function show() { @@ -20,7 +21,7 @@ } export function hide() { - if (!visible || fixed) { + if (!visible || fixed || inline) { return } visible = false @@ -45,11 +46,17 @@ -{#if visible} + + +{#if visible && inline} +
+ +
+{:else if visible}
@@ -57,7 +64,7 @@
@@ -98,6 +105,7 @@ } .spectrum-Modal { + background: var(--background); overflow: visible; max-height: none; margin: 40px 0; @@ -106,4 +114,7 @@ --spectrum-global-dimension-size-100 ); } + :global(.spectrum--lightest .spectrum-Modal.inline) { + border: var(--border-light); + } diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte index e74a3a7e7d..048ded2b5b 100644 --- a/packages/bbui/src/Table/Table.svelte +++ b/packages/bbui/src/Table/Table.svelte @@ -214,7 +214,7 @@ >
- {#if sortedRows?.length} + {#if fields.length} {#if showEditColumn} @@ -269,7 +269,7 @@ {/if} - {#if sortedRows?.length} + {#if sortedRows?.length && fields.length} {#each sortedRows as row, idx} toggleSelectRow(row)} @@ -316,15 +316,25 @@ {/each} {:else} -
- - - -
No rows found
-
+ + {#if showEditColumn} + {/if}
+ {/if} + {#each fields as field} + + {/each} +
0}> +
+ + + +
No rows found
+
+
+
@@ -347,7 +357,7 @@ overflow: auto; } .container.quiet { - border: none !important; + border: none; } table { width: 100%; @@ -381,7 +391,7 @@ z-index: 2; background-color: var(--spectrum-alias-background-color-secondary); border-bottom: 1px solid - var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important; + var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)); } .spectrum-Table-headCell-content { white-space: nowrap; @@ -396,7 +406,34 @@ text-overflow: ellipsis; } + .placeholder-row { + position: relative; + height: 150px; + } + .placeholder-row td { + border-top: none !important; + border-bottom: none !important; + } + .placeholder-offset { + width: 1px; + } .placeholder { + top: 0; + height: 100%; + left: 0; + width: 100%; + position: absolute; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + } + .placeholder.has-fields { + top: var(--header-height); + height: calc(100% - var(--header-height)); + } + + .placeholder-content { padding: 20px; display: flex; flex-direction: column; @@ -407,12 +444,13 @@ var(--spectrum-alias-text-color) ); } - .placeholder div { + .placeholder-content div { margin-top: 10px; font-size: var( --spectrum-table-cell-text-size, var(--spectrum-alias-font-size-default) ); + text-align: center; } tbody { @@ -431,17 +469,17 @@ td { padding-top: 0; padding-bottom: 0; - border-bottom: none !important; + border-bottom: none; border-top: 1px solid - var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important; - border-radius: 0 !important; + var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)); + border-radius: 0; } tr:first-child td { - border-top: none !important; + border-top: none; } tr:last-child td { border-bottom: 1px solid - var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important; + var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)); } td.spectrum-Table-cell--divider { width: 1px; diff --git a/packages/bbui/yarn.lock b/packages/bbui/yarn.lock index 5dcac027b9..e9bad2e162 100644 --- a/packages/bbui/yarn.lock +++ b/packages/bbui/yarn.lock @@ -2407,10 +2407,10 @@ svelte-portal@^1.0.0: resolved "https://registry.yarnpkg.com/svelte-portal/-/svelte-portal-1.0.0.tgz#36a47c5578b1a4d9b4dc60fa32a904640ec4cdd3" integrity sha512-nHf+DS/jZ6jjnZSleBMSaZua9JlG5rZv9lOGKgJuaZStfevtjIlUJrkLc3vbV8QdBvPPVmvcjTlazAzfKu0v3Q== -svelte@^3.37.0: - version "3.37.0" - resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.37.0.tgz#dc7cd24bcc275cdb3f8c684ada89e50489144ccd" - integrity sha512-TRF30F4W4+d+Jr2KzUUL1j8Mrpns/WM/WacxYlo5MMb2E5Qy2Pk1Guj6GylxsW9OnKQl1tnF8q3hG/hQ3h6VUA== +svelte@^3.38.2: + version "3.38.2" + resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.38.2.tgz#55e5c681f793ae349b5cc2fe58e5782af4275ef5" + integrity sha512-q5Dq0/QHh4BLJyEVWGe7Cej5NWs040LWjMbicBGZ+3qpFWJ1YObRmUDZKbbovddLC9WW7THTj3kYbTOFmU9fbg== svgo@^1.0.0: version "1.3.2" diff --git a/packages/builder/package.json b/packages/builder/package.json index f8b55a4c65..6422d8f686 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -90,7 +90,7 @@ "@babel/preset-env": "^7.13.12", "@babel/runtime": "^7.13.10", "@rollup/plugin-replace": "^2.4.2", - "@roxi/routify": "2.15.1", + "@roxi/routify": "2.18.0", "@sveltejs/vite-plugin-svelte": "^1.0.0-next.5", "@testing-library/jest-dom": "^5.11.10", "@testing-library/svelte": "^3.0.0", @@ -106,7 +106,7 @@ "rollup": "^2.44.0", "rollup-plugin-copy": "^3.4.0", "start-server-and-test": "^1.12.1", - "svelte": "^3.37.0", + "svelte": "^3.38.2", "svelte-jester": "^1.3.2", "vite": "^2.1.5" }, diff --git a/packages/builder/src/actions.js b/packages/builder/src/actions.js index f465513f21..c39f004af0 100644 --- a/packages/builder/src/actions.js +++ b/packages/builder/src/actions.js @@ -1,9 +1,10 @@ export const gradient = (node, config = {}) => { const defaultConfig = { - points: 10, - saturation: 0.8, - lightness: 0.75, - softness: 0.8, + points: 12, + saturation: 0.85, + lightness: 0.7, + softness: 0.9, + seed: null, } // Applies a gradient background @@ -13,42 +14,67 @@ export const gradient = (node, config = {}) => { ...config, } const { saturation, lightness, softness, points } = config + const seed = config.seed || Math.random().toString(32).substring(2) - // Generates a random number between min and max - const rand = (min, max) => { - return Math.round(min + Math.random() * (max - min)) + // Hash function which returns a fixed hash between specified limits + // for a given seed and a given version + const rangeHash = (seed, min = 0, max = 100, version = 0) => { + const range = max - min + let hash = range + version + for (let i = 0; i < seed.length * 2 + version; i++) { + hash = (hash << 5) - hash + seed.charCodeAt(i % seed.length) + hash = ((hash & hash) % range) + version + } + return min + (hash % range) } // Generates a random HSL colour using the options specified - const randomHSL = () => { + const randomHSL = (seed, version, alpha = 1) => { const lowerSaturation = Math.min(100, saturation * 100) const upperSaturation = Math.min(100, (saturation + 0.2) * 100) const lowerLightness = Math.min(100, lightness * 100) const upperLightness = Math.min(100, (lightness + 0.2) * 100) - const hue = rand(0, 360) - const sat = `${rand(lowerSaturation, upperSaturation)}%` - const light = `${rand(lowerLightness, upperLightness)}%` - return `hsl(${hue},${sat},${light})` + const hue = rangeHash(seed, 0, 360, version) + const sat = `${rangeHash( + seed, + lowerSaturation, + upperSaturation, + version + )}%` + const light = `${rangeHash( + seed, + lowerLightness, + upperLightness, + version + )}%` + return `hsla(${hue},${sat},${light},${alpha})` } // Generates a radial gradient stop point - const randomGradientPoint = () => { + const randomGradientPoint = (seed, version) => { const lowerTransparency = Math.min(100, softness * 100) const upperTransparency = Math.min(100, (softness + 0.2) * 100) - const transparency = rand(lowerTransparency, upperTransparency) + const transparency = rangeHash( + seed, + lowerTransparency, + upperTransparency, + version + ) return ( - `radial-gradient(` + - `at ${rand(10, 90)}% ${rand(10, 90)}%,` + - `${randomHSL()} 0,` + + `radial-gradient(at ` + + `${rangeHash(seed, 0, 100, version)}% ` + + `${rangeHash(seed, 0, 100, version + 1)}%,` + + `${randomHSL(seed, version, saturation)} 0,` + `transparent ${transparency}%)` ) } - let css = `opacity:0.9;background-color:${randomHSL()};background-image:` + let css = `opacity:0.9;background:${randomHSL(seed, 0, 0.7)};` + css += "background-image:" for (let i = 0; i < points - 1; i++) { - css += `${randomGradientPoint()},` + css += `${randomGradientPoint(seed, i)},` } - css += `${randomGradientPoint()};` + css += `${randomGradientPoint(seed, points)};` node.style = css } diff --git a/packages/builder/src/components/common/ConfirmDialog.svelte b/packages/builder/src/components/common/ConfirmDialog.svelte index 33a1d86b88..cf2bf989b9 100644 --- a/packages/builder/src/components/common/ConfirmDialog.svelte +++ b/packages/builder/src/components/common/ConfirmDialog.svelte @@ -7,6 +7,7 @@ export let cancelText = "Cancel" export let onOk = undefined export let onCancel = undefined + export let warning = true let modal @@ -19,7 +20,13 @@ - + {body} diff --git a/packages/builder/src/components/start/AppCard.svelte b/packages/builder/src/components/start/AppCard.svelte index 9a14efd81b..60f29cebae 100644 --- a/packages/builder/src/components/start/AppCard.svelte +++ b/packages/builder/src/components/start/AppCard.svelte @@ -7,56 +7,49 @@ ActionMenu, MenuItem, Link, - notifications, } from "@budibase/bbui" - import download from "downloadjs" import { gradient } from "actions" + import { url } from "@roxi/routify" - export let name - export let _id - - let appExportLoading = false - - async function exportApp() { - appExportLoading = true - try { - download( - `/api/backups/export?appId=${_id}&appname=${encodeURIComponent(name)}` - ) - notifications.success("App export complete") - } catch (err) { - console.error(err) - notifications.error("App export failed") - } finally { - appExportLoading = false - } - } + export let app + export let exportApp + export let deleteApp - -
-
- - - {name} - - - - - Export - -
-
- - Edited {Math.floor(1 + Math.random() * 10)} months ago - - {#if Math.random() > 0.5} - - {/if} -
- +
+ +
+
+ + + {app.name} + + + + + exportApp(app)} icon="Download"> + Export + + deleteApp(app)} icon="Delete"> + Delete + + +
+
+ + Edited {Math.floor(1 + Math.random() * 10)} months ago + + {#if Math.random() > 0.5} + + {/if} +
+ +
diff --git a/packages/builder/src/components/start/AppRow.svelte b/packages/builder/src/components/start/AppRow.svelte new file mode 100644 index 0000000000..ce534336ca --- /dev/null +++ b/packages/builder/src/components/start/AppRow.svelte @@ -0,0 +1,80 @@ + + +
+
+ + + {app.name} + + +
+
+ Edited {Math.round(Math.random() * 10 + 1)} months ago +
+
+ {#if Math.random() < 0.33} +
+ Open + {:else if Math.random() < 0.33} +
+ Locked by Will Wheaton + {:else} +
+ Locked by you + {/if} +
+
+ + + + exportApp(app)} icon="Download">Export + deleteApp(app)} icon="Delete">Delete + +
+ + diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte index 3cbdaa3f34..c30cdfd449 100644 --- a/packages/builder/src/components/start/CreateAppModal.svelte +++ b/packages/builder/src/components/start/CreateAppModal.svelte @@ -1,58 +1,50 @@ -
-
- budibase icon -
- {#each steps as component, i} - - {/each} -
-
-
-
- Get started with Budibase -
-
- {#each steps as component, i (i)} -
- -
- {/each} -
-
- {#if $currentStep > 0} - - {/if} - {#if $currentStep < steps.length - 1} - - {/if} - {#if $currentStep === steps.length - 1} - - {/if} -
-
- {#if submitting} - + + {#if template} + { + $values.file = e.detail?.[0] + $touched.file = true + }} + /> {/if} -
- - + + Give your new app a name, and choose which groups have access (paid plans + only). + + ($touched.name = true)} + label="Name" + /> + + diff --git a/packages/builder/src/components/start/Indicator.svelte b/packages/builder/src/components/start/Indicator.svelte deleted file mode 100644 index b77d2589fd..0000000000 --- a/packages/builder/src/components/start/Indicator.svelte +++ /dev/null @@ -1,83 +0,0 @@ - - -
-
- {#if done} - - - - {:else}{step}{/if} -
-
- - diff --git a/packages/builder/src/components/start/Steps/Info.svelte b/packages/builder/src/components/start/Steps/Info.svelte deleted file mode 100644 index 42cd5e1e2f..0000000000 --- a/packages/builder/src/components/start/Steps/Info.svelte +++ /dev/null @@ -1,121 +0,0 @@ - - -
- {#if template?.fromFile} - Import your Web App - {:else} - Create your Web App - {/if} - {#if template?.fromFile} -
- -
- - -
-
- {:else if template} -
- - {template.name} -
- {/if} - ($touched.applicationName = true)} - bind:value={$values.applicationName} - label="Web App Name" - placeholder="Enter name of your web application" - error={$touched.applicationName && $errors.applicationName} - /> -
- - diff --git a/packages/builder/src/components/start/Steps/User.svelte b/packages/builder/src/components/start/Steps/User.svelte deleted file mode 100644 index b51e5faaff..0000000000 --- a/packages/builder/src/components/start/Steps/User.svelte +++ /dev/null @@ -1,29 +0,0 @@ - - -
- What's your role for this app? - -
- - (layout = "grid")} - selected={layout === "grid"} - quiet - icon="ClassicGridView" - /> - (layout = "table")} - selected={layout === "table"} - quiet - icon="ViewRow" - /> - -
- {#if layout === "grid"} - - {:else} - Table view. + + {#if $apps.length} + +
+ Apps + + + + +
+
+
+