From a0304d7945826a61809c808c35d0c1d9786cd805 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 22 Apr 2021 10:10:42 +0100 Subject: [PATCH 1/2] Add dropzone component and update builder and standard components --- packages/bbui/package.json | 2 + packages/bbui/src/Dropzone/Dropzone.svelte | 295 ---------------- packages/bbui/src/Dropzone/Dropzone.svench | 17 - packages/bbui/src/Dropzone/fileTypes.js | 5 - packages/bbui/src/Form/Core/Dropzone.svelte | 334 ++++++++++++++++++ packages/bbui/src/Form/Core/index.js | 1 + packages/bbui/src/Form/Dropzone.svelte | 31 ++ packages/bbui/src/index.js | 2 +- packages/bbui/yarn.lock | 10 + .../backend/DataTable/RowFieldControl.svelte | 18 +- .../src/components/common/Dropzone.svelte | 13 +- .../src/attachments/AttachmentList.svelte | 127 ------- .../src/attachments/Dropzone.svelte | 26 -- .../src/attachments/fileTypes.js | 5 - .../src/forms/AttachmentField.svelte | 49 +-- 15 files changed, 418 insertions(+), 517 deletions(-) delete mode 100644 packages/bbui/src/Dropzone/Dropzone.svelte delete mode 100644 packages/bbui/src/Dropzone/Dropzone.svench delete mode 100644 packages/bbui/src/Dropzone/fileTypes.js create mode 100644 packages/bbui/src/Form/Core/Dropzone.svelte create mode 100644 packages/bbui/src/Form/Dropzone.svelte delete mode 100644 packages/standard-components/src/attachments/AttachmentList.svelte delete mode 100644 packages/standard-components/src/attachments/Dropzone.svelte delete mode 100644 packages/standard-components/src/attachments/fileTypes.js diff --git a/packages/bbui/package.json b/packages/bbui/package.json index 84273d00ff..b0192739be 100644 --- a/packages/bbui/package.json +++ b/packages/bbui/package.json @@ -45,9 +45,11 @@ "@spectrum-css/checkbox": "^3.0.2", "@spectrum-css/dialog": "^3.0.1", "@spectrum-css/divider": "^1.0.1", + "@spectrum-css/dropzone": "^3.0.2", "@spectrum-css/fieldgroup": "^3.0.2", "@spectrum-css/fieldlabel": "^3.0.1", "@spectrum-css/icon": "^3.0.1", + "@spectrum-css/illustratedmessage": "^3.0.2", "@spectrum-css/inputgroup": "^3.0.2", "@spectrum-css/label": "^2.0.9", "@spectrum-css/link": "^3.1.1", diff --git a/packages/bbui/src/Dropzone/Dropzone.svelte b/packages/bbui/src/Dropzone/Dropzone.svelte deleted file mode 100644 index 4f4f4bc7bf..0000000000 --- a/packages/bbui/src/Dropzone/Dropzone.svelte +++ /dev/null @@ -1,295 +0,0 @@ - - -
- {#if selectedImage} - - {/if} - - - -

Drop your files here

- -
- - diff --git a/packages/bbui/src/Dropzone/Dropzone.svench b/packages/bbui/src/Dropzone/Dropzone.svench deleted file mode 100644 index 110195ab5a..0000000000 --- a/packages/bbui/src/Dropzone/Dropzone.svench +++ /dev/null @@ -1,17 +0,0 @@ - - - - - diff --git a/packages/bbui/src/Dropzone/fileTypes.js b/packages/bbui/src/Dropzone/fileTypes.js deleted file mode 100644 index 1ebd85070b..0000000000 --- a/packages/bbui/src/Dropzone/fileTypes.js +++ /dev/null @@ -1,5 +0,0 @@ -export const FILE_TYPES = { - IMAGE: ["png", "tiff", "gif", "raw", "jpg", "jpeg", "svg"], - CODE: ["js", "rs", "py", "java", "rb", "hs", "yml"], - DOCUMENT: ["odf", "docx", "doc", "pdf", "csv"], -} diff --git a/packages/bbui/src/Form/Core/Dropzone.svelte b/packages/bbui/src/Form/Core/Dropzone.svelte new file mode 100644 index 0000000000..e6addd4e42 --- /dev/null +++ b/packages/bbui/src/Form/Core/Dropzone.svelte @@ -0,0 +1,334 @@ + + +
+ {#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 !disabled} +
+ +
+ {/if} +
+ {#if isImage} + preview + {:else} +
+
{selectedImage.extension}
+
Preview not supported
+
+ {/if} +
0} + on:click={navigateLeft}> + +
+
+ +
+
File {selectedImageIdx + 1} of {fileCount}
+
+ {/if} +
+
+ + + + + + + + + + + + + + + +

+ Drag and drop your file +

+ {#if !disabled} +

+ +
+ from your computer +

+ {/if} +
+
+
+ + diff --git a/packages/bbui/src/Form/Core/index.js b/packages/bbui/src/Form/Core/index.js index 95588458b6..a31c5941ec 100644 --- a/packages/bbui/src/Form/Core/index.js +++ b/packages/bbui/src/Form/Core/index.js @@ -8,3 +8,4 @@ export { default as CoreCombobox } from "./Combobox.svelte" export { default as CoreSwitch } from "./Switch.svelte" export { default as CoreSearch } from "./Search.svelte" export { default as CoreDatePicker } from "./DatePicker.svelte" +export { default as CoreDropzone } from "./Dropzone.svelte" diff --git a/packages/bbui/src/Form/Dropzone.svelte b/packages/bbui/src/Form/Dropzone.svelte new file mode 100644 index 0000000000..5886c58fa9 --- /dev/null +++ b/packages/bbui/src/Form/Dropzone.svelte @@ -0,0 +1,31 @@ + + + + + diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js index f72463669a..73fc8699a5 100644 --- a/packages/bbui/src/index.js +++ b/packages/bbui/src/index.js @@ -8,7 +8,7 @@ export { default as Input } from "./Form/Input.svelte" export { default as TextArea } from "./Form/TextArea.svelte" export { default as Select } from "./Form/Select.svelte" export { default as Combobox } from "./Form/Combobox.svelte" -export { default as Dropzone } from "./Dropzone/Dropzone.svelte" +export { default as Dropzone } from "./Form/Dropzone.svelte" export { default as Drawer } from "./Drawer/Drawer.svelte" export { default as ActionButton } from "./ActionButton/ActionButton.svelte" export { default as ActionGroup } from "./ActionGroup/ActionGroup.svelte" diff --git a/packages/bbui/yarn.lock b/packages/bbui/yarn.lock index 6a1f988878..c03cb4b1f5 100644 --- a/packages/bbui/yarn.lock +++ b/packages/bbui/yarn.lock @@ -106,6 +106,11 @@ dependencies: "@spectrum-css/vars" "^3.0.2" +"@spectrum-css/dropzone@^3.0.2": + version "3.0.2" + resolved "https://registry.yarnpkg.com/@spectrum-css/dropzone/-/dropzone-3.0.2.tgz#34f137851054442b219fed7f32006b93fc5e0bcf" + integrity sha512-BuBBzm5re6lM0AWgd6V+mI5eEGnnmFEtcFiJBEn9jYNEQYgflFhvnERUt89jMX5WmspiecwI2JBWJFrtFsOzug== + "@spectrum-css/fieldgroup@^3.0.2": version "3.0.2" resolved "https://registry.yarnpkg.com/@spectrum-css/fieldgroup/-/fieldgroup-3.0.2.tgz#1c1afd3c444d8650fefac275dc66a7a913933846" @@ -121,6 +126,11 @@ resolved "https://registry.yarnpkg.com/@spectrum-css/icon/-/icon-3.0.2.tgz#327dcb95ab86368a00eb5a6d898c2c02e4ae04b3" integrity sha512-BdHoO2ttrbsj1+IfHmSCGNS0oEf8i2UW3agfOVtSlYOD+iGykupWwy8ANLB6p4GvjlR7YjPRGzDRGgmDwVqR0Q== +"@spectrum-css/illustratedmessage@^3.0.2": + version "3.0.2" + resolved "https://registry.yarnpkg.com/@spectrum-css/illustratedmessage/-/illustratedmessage-3.0.2.tgz#6a480be98b027e050b086e7899e40d87adb0a8c0" + integrity sha512-dqnE8X27bGcO0HN8+dYx8O4o0dNNIAqeivOzDHhe2El+V4dTzMrNIerF6G0NLm3GjVf6XliwmitsZK+K6FmbtA== + "@spectrum-css/inputgroup@^3.0.2": version "3.0.2" resolved "https://registry.yarnpkg.com/@spectrum-css/inputgroup/-/inputgroup-3.0.2.tgz#f1b13603832cbd22394f3d898af13203961f8691" diff --git a/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte b/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte index f2568db5e6..7f160600ba 100644 --- a/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte +++ b/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte @@ -1,12 +1,5 @@ - + diff --git a/packages/standard-components/src/attachments/AttachmentList.svelte b/packages/standard-components/src/attachments/AttachmentList.svelte deleted file mode 100644 index d7bdbeb596..0000000000 --- a/packages/standard-components/src/attachments/AttachmentList.svelte +++ /dev/null @@ -1,127 +0,0 @@ - - -
- {#each files as file} -
- - {#if FILE_TYPES.IMAGE.includes(file.extension.toLowerCase())} - preview of {file.name} - {:else}{/if} - - {file.name} -
- -
-
- {/each} -
- - - Are you sure you want to delete this attachment? - - - - diff --git a/packages/standard-components/src/attachments/Dropzone.svelte b/packages/standard-components/src/attachments/Dropzone.svelte deleted file mode 100644 index 8ac3486354..0000000000 --- a/packages/standard-components/src/attachments/Dropzone.svelte +++ /dev/null @@ -1,26 +0,0 @@ - - - diff --git a/packages/standard-components/src/attachments/fileTypes.js b/packages/standard-components/src/attachments/fileTypes.js deleted file mode 100644 index 2ce6958f2d..0000000000 --- a/packages/standard-components/src/attachments/fileTypes.js +++ /dev/null @@ -1,5 +0,0 @@ -export const FILE_TYPES = { - IMAGE: ["png", "tiff", "gif", "raw", "jpg", "jpeg"], - CODE: ["js", "rs", "py", "java", "rb", "hs", "yml"], - DOCUMENT: ["odf", "docx", "doc", "pdf", "csv"], -} diff --git a/packages/standard-components/src/forms/AttachmentField.svelte b/packages/standard-components/src/forms/AttachmentField.svelte index 5df1d40eb9..fbc5ef0426 100644 --- a/packages/standard-components/src/forms/AttachmentField.svelte +++ b/packages/standard-components/src/forms/AttachmentField.svelte @@ -1,7 +1,7 @@ - {#if mounted} -
- -
+ {#if $fieldState} + fieldApi.setValue(e.detail)} + {processFiles} + {handleFileTooLarge} /> {/if} - - From 5a3a661f994057c44263efd75ea13591ba757e1d Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 22 Apr 2021 10:58:04 +0100 Subject: [PATCH 2/2] Update automation section to use spectrum --- packages/bbui/src/Icon/Icon.svelte | 20 ++++ .../FlowChart/FlowItem.svelte | 18 +--- .../CreateAutomationModal.svelte | 15 ++- .../SetupPanel/AutomationBlockSetup.svelte | 94 ++++++++++--------- .../automation/SetupPanel/RowSelector.svelte | 28 +++--- .../automation/SetupPanel/SchemaSetup.svelte | 31 ++++-- .../automation/SetupPanel/SetupPanel.svelte | 48 ++++------ .../SetupPanel/TableSelector.svelte | 13 +-- .../Shared/CreateWebhookModal.svelte | 13 +-- .../automation/Shared/WebhookDisplay.svelte | 50 +++++----- .../common/DrawerBindableInput.svelte | 7 +- .../CreateWebhookDeploymentModal.svelte | 13 +-- .../[application]/automate/_layout.svelte | 12 ++- 13 files changed, 188 insertions(+), 174 deletions(-) diff --git a/packages/bbui/src/Icon/Icon.svelte b/packages/bbui/src/Icon/Icon.svelte index a23a33c876..863c5413b7 100644 --- a/packages/bbui/src/Icon/Icon.svelte +++ b/packages/bbui/src/Icon/Icon.svelte @@ -10,6 +10,8 @@ export let m = false export let l = false export let xl = false + export let hoverable = false + export let disabled = false $: rotation = directions.indexOf(direction) * 45 $: useDefault = ![s, m, l, xl].includes(true) @@ -17,6 +19,8 @@ + + diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte index a00e65c69f..bbb2b75d63 100644 --- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte +++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte @@ -52,9 +52,9 @@ border-radius: var(--border-radius-m); transition: 0.3s all ease; box-shadow: 0 4px 30px 0 rgba(57, 60, 68, 0.08); - background-color: var(--ink); font-size: 16px; - color: var(--background); + background-color: var(--spectrum-global-color-gray-50); + color: var(--grey-9); } .block.selected, .block:hover { @@ -77,9 +77,9 @@ header .label { font-size: 14px; padding: var(--spacing-s); - color: var(--grey-8); border-radius: var(--border-radius-m); - background-color: rgba(0, 0, 0, 0.05); + background-color: var(--grey-2); + color: var(--grey-8); } header i { font-size: 20px; @@ -93,22 +93,12 @@ } .ACTION { - background-color: var(--background); - color: var(--ink); } .TRIGGER { - background-color: var(--ink); - color: var(--background); - } - .TRIGGER header .label { - background-color: var(--grey-9); - color: var(--grey-5); } .LOGIC { - background-color: var(--background); - color: var(--ink); } p { diff --git a/packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte b/packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte index f880f04f7d..45dfffbea5 100644 --- a/packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte +++ b/packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte @@ -29,14 +29,13 @@ onConfirm={createAutomation} disabled={!valid}> - + + + Learn about automations + diff --git a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte index bee56045ff..064a4665d9 100644 --- a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte +++ b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte @@ -19,30 +19,24 @@ } -
- -
+ - - {#each schema.constraints.inclusion as option} - - {/each} - + (value[field.name] = e.target.value)}> - - - - - - + on:change={e => (value[field.name] = e.target.value)} + options={typeOptions} /> removeField(field.name)} /> diff --git a/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte b/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte index 3c01b43614..9587f94697 100644 --- a/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte +++ b/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte @@ -1,9 +1,8 @@ -
- -
+ - copyToClipboard()}> - - + +
copyToClipboard()}> + +
diff --git a/packages/builder/src/components/common/DrawerBindableInput.svelte b/packages/builder/src/components/common/DrawerBindableInput.svelte index 6b4fd3365e..c04960ff60 100644 --- a/packages/builder/src/components/common/DrawerBindableInput.svelte +++ b/packages/builder/src/components/common/DrawerBindableInput.svelte @@ -6,7 +6,6 @@ } from "builderStore/dataBinding" import BindingPanel from "components/design/PropertiesPanel/BindingPanel.svelte" import { createEventDispatcher } from "svelte" - const dispatch = createEventDispatcher() export let panel = BindingPanel export let value = "" @@ -14,9 +13,10 @@ export let thin = true export let title = "Bindings" export let placeholder + export let label + const dispatch = createEventDispatcher() let bindingDrawer - $: tempValue = value $: readableValue = runtimeToReadableBinding(bindings, value) @@ -32,6 +32,7 @@
onChange(event.detail)} {placeholder} /> @@ -66,7 +67,6 @@ .icon { right: 1px; - top: 1px; bottom: 1px; position: absolute; justify-content: center; @@ -84,6 +84,7 @@ var(--spectrum-global-animation-duration-100, 130ms), box-shadow var(--spectrum-global-animation-duration-100, 130ms), border-color var(--spectrum-global-animation-duration-100, 130ms); + height: calc(var(--spectrum-alias-item-height-m) - 2px); } .icon:hover { cursor: pointer; diff --git a/packages/builder/src/components/deploy/CreateWebhookDeploymentModal.svelte b/packages/builder/src/components/deploy/CreateWebhookDeploymentModal.svelte index 01ab529432..a7f5e38bb0 100644 --- a/packages/builder/src/components/deploy/CreateWebhookDeploymentModal.svelte +++ b/packages/builder/src/components/deploy/CreateWebhookDeploymentModal.svelte @@ -37,12 +37,13 @@ {#if webhookUrls.length === 0}
No webhooks found.
{/if} - + + + Learn about webhooks +