diff --git a/packages/bbui/src/Form/Core/File.svelte b/packages/bbui/src/Form/Core/File.svelte index 3ca749e908..313ff409df 100644 --- a/packages/bbui/src/Form/Core/File.svelte +++ b/packages/bbui/src/Form/Core/File.svelte @@ -4,73 +4,35 @@ import Icon from "../../Icon/Icon.svelte" import { createEventDispatcher } from "svelte" - export let value = null //support multi? + export let value = null export let title = "Upload file" export let disabled = false - export let extensions = "*" + export let extensions = null export let handleFileTooLarge = null - export let handleTooManyFiles = null - export let fileSizeLimit = BYTES_IN_MB * 20 // Centralise + export let fileSizeLimit = BYTES_IN_MB * 20 export let id = null + export let previewUrl = null - const dispatch = createEventDispatcher() - - //Is this necessary? const fieldId = id || uuid() - - // Centralise all in new file section? const BYTES_IN_KB = 1000 const BYTES_IN_MB = 1000000 + const dispatch = createEventDispatcher() + let fileInput - // $: file = value[0] || null - // const imageExtensions = [ - // "png", - // "tiff", - // "gif", - // "raw", - // "jpg", - // "jpeg", - // "svg", - // "bmp", - // "jfif", - // ] + $: inputAccept = Array.isArray(extensions) ? extensions.join(",") : "*" - // Should support only 1 file for now. - // Files[0] - - //What is the limit? 50mb? - - async function processFileList(fileList) { - if ( - handleFileTooLarge && - Array.from(fileList).some(file => file.size >= fileSizeLimit) - ) { - handleFileTooLarge(fileSizeLimit, value) + async function processFile(targetFile) { + if (handleFileTooLarge && targetFile?.size >= fileSizeLimit) { + handleFileTooLarge(targetFile) return } - - const fileCount = fileList.length + value.length - if (handleTooManyFiles && maximum && fileCount > maximum) { - handleTooManyFiles(maximum) - return - } - - if (processFiles) { - const processedFiles = await processFiles(fileList) - const newValue = [...value, ...processedFiles] - dispatch("change", newValue) - selectedImageIdx = newValue.length - 1 - } else { - dispatch("change", fileList) - } + dispatch("change", targetFile) } function handleFile(evt) { - console.log("Hello ", evt.target.files[0]) - dispatch("change", evt.target.files[0]) - //processFileList(evt.target.files) + processFile(evt.target.files[0]) } function clearFile() { @@ -82,7 +44,7 @@ id={fieldId} {disabled} type="file" - accept={extensions} + accept={inputAccept} bind:this={fileInput} on:change={handleFile} /> @@ -90,7 +52,9 @@
{#if value}
- + {#if previewUrl} + + {/if}
{value.name}
{#if value.size}
@@ -128,6 +92,23 @@ display: none; } .delete-button { + transition: all 0.3s; + margin-left: 10px; + display: flex; + } + .delete-button:hover { cursor: pointer; + color: var(--red); + } + .filesize { + white-space: nowrap; + } + .filename { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + .preview { + height: 1.5em; } diff --git a/packages/bbui/src/Form/File.svelte b/packages/bbui/src/Form/File.svelte index edc096c902..6be47d6a69 100644 --- a/packages/bbui/src/Form/File.svelte +++ b/packages/bbui/src/Form/File.svelte @@ -6,6 +6,9 @@ export let label = null export let labelPosition = "above" export let disabled = false + export let handleFileTooLarge = () => {} + export let previewUrl = null + export let extensions = null export let error = null export let title = null export let value = null @@ -19,5 +22,14 @@ - + diff --git a/packages/builder/src/pages/builder/Branding.svelte b/packages/builder/src/pages/builder/Branding.svelte new file mode 100644 index 0000000000..c286088a6e --- /dev/null +++ b/packages/builder/src/pages/builder/Branding.svelte @@ -0,0 +1,59 @@ + + + + + + {platformTitle} + + {#if loaded && !$auth.user} + + {:else} + + + {/if} + + + + + + + + + + + + + + + diff --git a/packages/builder/src/pages/builder/auth/login.svelte b/packages/builder/src/pages/builder/auth/login.svelte index 10d01293ab..372516ebb9 100644 --- a/packages/builder/src/pages/builder/auth/login.svelte +++ b/packages/builder/src/pages/builder/auth/login.svelte @@ -147,7 +147,7 @@ {/if} - {#if cloud && $organisation.licenceAgreementEnabled} + {#if cloud && $organisation.licenseAgreementEnabled} By using Budibase Cloud
diff --git a/packages/builder/src/pages/builder/portal/settings/branding.svelte b/packages/builder/src/pages/builder/portal/settings/branding.svelte index 73569e93a3..bc6f678bc3 100644 --- a/packages/builder/src/pages/builder/portal/settings/branding.svelte +++ b/packages/builder/src/pages/builder/portal/settings/branding.svelte @@ -12,15 +12,34 @@ Toggle, Input, Label, + TextArea, } from "@budibase/bbui" import { auth, organisation, licensing, admin } from "stores/portal" import { API } from "api" import { onMount } from "svelte" + const imageExtensions = [ + ".png", + ".tiff", + ".gif", + ".raw", + ".jpg", + ".jpeg", + ".svg", + ".bmp", + ".jfif", + ] + + const faviconExtensions = [".png", ".ico", ".gif"] + let loaded = false let saving = false + let logoFile = null + let logoPreview = null + let faviconFile = null + let faviconPreview = null let config = {} let updated = false @@ -39,9 +58,45 @@ : null $: favicon = config.faviconUrl - ? { url: config.logoUrl, type: "image", name: "Favicon" } + ? { url: config.faviconUrl, type: "image", name: "Favicon" } : null + //If type of file do this IN the picker + //If string use the string + //If object?.url us that + const previewUrl = async localFile => { + if (!localFile) { + return Promise.resolve(null) + } + + return new Promise(resolve => { + let reader = new FileReader() + try { + reader.onload = e => { + resolve({ + result: e.target.result, + }) + } + reader.readAsDataURL(localFile) + } catch (error) { + console.error(error) + resolve(null) + } + }) + } + + $: previewUrl(logoFile).then(response => { + if (response) { + logoPreview = response.result + } + }) + + $: previewUrl(faviconFile).then(response => { + if (response) { + faviconPreview = response.result + } + }) + async function uploadLogo(file) { let response = {} try { @@ -54,8 +109,6 @@ return response } - // Limit file types - // PNG, GIF, or ICO? async function uploadFavicon(file) { let response = {} try { @@ -70,9 +123,7 @@ async function saveConfig() { saving = true - - console.log("Save Config") - + console.log("SAVING CONFIG ") if (logoFile) { const logoResp = await uploadLogo(logoFile) if (logoResp.url) { @@ -80,8 +131,8 @@ ...config, logoUrl: logoResp.url, } - } else { - //would have to delete + logoFile = null + logoPreview = null } } @@ -92,6 +143,8 @@ ...config, faviconUrl: faviconResp.url, } + faviconFile = null + faviconPreview = null } } console.log("SAVE CONFIG ", config) @@ -111,28 +164,19 @@ onMount(async () => { await organisation.init() - const { - faviconUrl, - logoUrl, - platformTitle, - emailBrandingEnabled, - appFooterEnabled, - loginHeading, - loginButton, - licenceAgreementEnabled, - testimonialsEnabled, - } = $organisation - config = { - faviconUrl, - logoUrl, - platformTitle, - emailBrandingEnabled, - appFooterEnabled, - loginHeading, - loginButton, - licenceAgreementEnabled, - testimonialsEnabled, + faviconUrl: $organisation.faviconUrl, + logoUrl: $organisation.logoUrl, + platformTitle: $organisation.platformTitle, + emailBrandingEnabled: $organisation.emailBrandingEnabled, + appFooterEnabled: $organisation.appFooterEnabled, + loginHeading: $organisation.loginHeading, + loginButton: $organisation.loginButton, + licenseAgreementEnabled: $organisation.licenseAgreementEnabled, + testimonialsEnabled: $organisation.testimonialsEnabled, + metaDescription: $organisation.metaDescription, + metaImageUrl: $organisation.metaImageUrl, + metaTitle: $organisation.metaTitle, } loaded = true @@ -158,17 +202,24 @@ { + notifications.warn("File too large. 20mb limit") + }} + extensions={imageExtensions} + previewUrl={logoPreview || logo?.url} on:change={e => { console.log("Updated Logo") let clone = { ...config } if (e.detail) { logoFile = e.detail + logoPreview = null } else { + logoFile = null clone.logoUrl = "" } config = clone }} - value={logo} + value={logoFile || logo} />
@@ -176,17 +227,22 @@ { + notifications.warn("File too large. 20mb limit") + }} + extensions={faviconExtensions} + previewUrl={faviconPreview || favicon?.url} on:change={e => { - console.log("Updated Favicon") let clone = { ...config } if (e.detail) { faviconFile = e.detail + faviconPreview = null } else { clone.faviconUrl = "" } config = clone }} - value={favicon} + value={faviconFile || favicon} />
@@ -197,12 +253,12 @@ clone.platformTitle = e.detail ? e.detail : "" config = clone }} - value={config.platformTitle || "Budibase"} + value={config.platformTitle || ""} />
{ let clone = { ...config } clone.emailBrandingEnabled = !e.detail @@ -222,7 +278,6 @@
- {#if !$admin.cloud} @@ -239,7 +294,7 @@ clone.loginHeading = e.detail ? e.detail : "" config = clone }} - value={config.loginHeading || "Log in to Budibase"} + value={config.loginHeading || ""} /> @@ -251,7 +306,7 @@ clone.loginButton = e.detail ? e.detail : "" config = clone }} - value={config.loginButton || "Log in to Budibase"} + value={config.loginButton || ""} />
@@ -265,13 +320,13 @@ value={!config.testimonialsEnabled} /> { let clone = { ...config } - clone.licenceAgreementEnabled = !e.detail + clone.licenseAgreementEnabled = !e.detail config = clone }} - value={!config.licenceAgreementEnabled} + value={!config.licenseAgreementEnabled} />
@@ -285,15 +340,37 @@
- + + { + let clone = { ...config } + clone.metaImageUrl = e.detail ? e.detail : "" + config = clone + }} + value={config.metaImageUrl} + /> +
+
+ + { + let clone = { ...config } + clone.metaTitle = e.detail ? e.detail : "" + config = clone + }} + value={config.metaTitle} + /> +
+
+ +