From 956d8f1ae341448bcb3bce9e07de11fc06ae0ca2 Mon Sep 17 00:00:00 2001 From: melohagan <101575380+melohagan@users.noreply.github.com> Date: Mon, 13 Mar 2023 11:44:15 +0000 Subject: [PATCH] Background image component can have children (#9981) --- packages/client/manifest.json | 334 ++++-------------- .../src/components/app/BackgroundImage.svelte | 4 +- 2 files changed, 73 insertions(+), 265 deletions(-) diff --git a/packages/client/manifest.json b/packages/client/manifest.json index e24fa3a68a..2579cdedaa 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -17,10 +17,7 @@ "description": "This component is specific only to layouts", "icon": "Sandbox", "hasChildren": true, - "styles": [ - "padding", - "background" - ], + "styles": ["padding", "background"], "settings": [ { "type": "text", @@ -36,23 +33,14 @@ "type": "select", "label": "Navigation", "key": "navigation", - "options": [ - "Top", - "Left", - "None" - ], + "options": ["Top", "Left", "None"], "defaultValue": "Top" }, { "type": "select", "label": "Width", "key": "width", - "options": [ - "Small", - "Medium", - "Large", - "Max" - ], + "options": ["Small", "Medium", "Large", "Max"], "defaultValue": "Large" }, { @@ -89,13 +77,7 @@ "width": 400, "height": 200 }, - "styles": [ - "padding", - "size", - "background", - "border", - "shadow" - ], + "styles": ["padding", "size", "background", "border", "shadow"], "settings": [ { "type": "select", @@ -255,9 +237,7 @@ "description": "Add a section to your application", "icon": "ColumnTwoB", "hasChildren": true, - "illegalChildren": [ - "section" - ], + "illegalChildren": ["section"], "showEmptyState": false, "size": { "width": 400, @@ -376,9 +356,7 @@ "name": "Divider", "description": "A basic divider", "icon": "Separator", - "illegalChildren": [ - "section" - ], + "illegalChildren": ["section"], "size": { "width": 400, "height": 10 @@ -415,9 +393,7 @@ "name": "Repeater", "description": "A configurable data list that attaches to your backend tables.", "icon": "JourneyData", - "illegalChildren": [ - "section" - ], + "illegalChildren": ["section"], "hasChildren": true, "size": { "width": 400, @@ -574,9 +550,7 @@ "name": "Stacked List", "icon": "TaskList", "description": "A basic card component that can contain content and actions.", - "illegalChildren": [ - "section" - ], + "illegalChildren": ["section"], "settings": [ { "type": "text", @@ -606,9 +580,7 @@ "name": "Vertical Card", "description": "A basic card component that can contain content and actions.", "icon": "ViewColumn", - "illegalChildren": [ - "section" - ], + "illegalChildren": ["section"], "settings": [ { "type": "text", @@ -652,24 +624,14 @@ "type": "select", "label": "Image Height", "key": "imageHeight", - "options": [ - "auto", - "12rem", - "16rem", - "20rem", - "24rem" - ], + "options": ["auto", "12rem", "16rem", "20rem", "24rem"], "defaultValue": "auto" }, { "type": "select", "label": "Card Width", "key": "cardWidth", - "options": [ - "16rem", - "20rem", - "24rem" - ], + "options": ["16rem", "20rem", "24rem"], "defaultValue": "20rem" } ] @@ -678,9 +640,7 @@ "name": "Paragraph", "description": "A component for displaying paragraph text.", "icon": "TextParagraph", - "illegalChildren": [ - "section" - ], + "illegalChildren": ["section"], "editable": true, "size": { "width": 400, @@ -803,9 +763,7 @@ "name": "Headline", "icon": "TextBold", "description": "A component for displaying heading text", - "illegalChildren": [ - "section" - ], + "illegalChildren": ["section"], "editable": true, "size": { "width": 400, @@ -982,9 +940,7 @@ "name": "Image", "description": "A basic component for displaying images", "icon": "Image", - "styles": [ - "size" - ], + "styles": ["size"], "size": { "width": 400, "height": 300 @@ -1002,9 +958,8 @@ "name": "Background Image", "description": "A background image", "icon": "Images", - "styles": [ - "size" - ], + "hasChildren": true, + "styles": ["size"], "size": { "width": 400, "height": 300 @@ -1162,9 +1117,7 @@ "name": "Nav Bar", "description": "A component for handling the navigation within your app.", "icon": "BreadcrumbNavigation", - "illegalChildren": [ - "section" - ], + "illegalChildren": ["section"], "hasChildren": true, "settings": [ { @@ -1365,25 +1318,14 @@ "type": "select", "label": "Image Width", "key": "imageWidth", - "options": [ - "auto", - "8rem", - "12rem", - "16rem" - ], + "options": ["auto", "8rem", "12rem", "16rem"], "defaultValue": "8rem" }, { "type": "select", "label": "Image Height", "key": "imageHeight", - "options": [ - "auto", - "8rem", - "12rem", - "16rem", - "auto" - ], + "options": ["auto", "8rem", "12rem", "16rem", "auto"], "defaultValue": "auto" } ] @@ -1424,9 +1366,7 @@ "name": "Embed", "icon": "Code", "description": "Embed content from 3rd party sources", - "styles": [ - "size" - ], + "styles": ["size"], "size": { "width": 400, "height": 100 @@ -1478,11 +1418,7 @@ "type": "select", "label": "Format", "key": "yAxisUnits", - "options": [ - "Default", - "Thousands", - "Millions" - ], + "options": ["Default", "Thousands", "Millions"], "defaultValue": "Default" }, { @@ -1640,11 +1576,7 @@ "type": "select", "label": "Format", "key": "yAxisUnits", - "options": [ - "Default", - "Thousands", - "Millions" - ], + "options": ["Default", "Thousands", "Millions"], "defaultValue": "Default" }, { @@ -1736,11 +1668,7 @@ "type": "select", "label": "Curve", "key": "curve", - "options": [ - "Smooth", - "Straight", - "Stepline" - ], + "options": ["Smooth", "Straight", "Stepline"], "defaultValue": "Smooth" }, { @@ -1801,11 +1729,7 @@ "type": "select", "label": "Format", "key": "yAxisUnits", - "options": [ - "Default", - "Thousands", - "Millions" - ], + "options": ["Default", "Thousands", "Millions"], "defaultValue": "Default" }, { @@ -1897,11 +1821,7 @@ "type": "select", "label": "Curve", "key": "curve", - "options": [ - "Smooth", - "Straight", - "Stepline" - ], + "options": ["Smooth", "Straight", "Stepline"], "defaultValue": "Smooth" }, { @@ -2253,11 +2173,7 @@ "type": "select", "label": "Format", "key": "yAxisUnits", - "options": [ - "Default", - "Thousands", - "Millions" - ], + "options": ["Default", "Thousands", "Millions"], "defaultValue": "Default" }, { @@ -2293,19 +2209,14 @@ "name": "Form", "icon": "Form", "hasChildren": true, - "illegalChildren": [ - "section", - "form" - ], + "illegalChildren": ["section", "form"], "actions": [ "ValidateForm", "ClearForm", "ChangeFormStep", "UpdateFieldValue" ], - "styles": [ - "size" - ], + "styles": ["size"], "size": { "width": 400, "height": 400 @@ -2315,10 +2226,7 @@ "type": "select", "label": "Type", "key": "actionType", - "options": [ - "Create", - "Update" - ], + "options": ["Create", "Update"], "defaultValue": "Create" }, { @@ -2388,14 +2296,8 @@ "name": "Form Step", "icon": "AssetsAdded", "hasChildren": true, - "illegalChildren": [ - "section", - "form", - "form step" - ], - "styles": [ - "size" - ], + "illegalChildren": ["section", "form", "form step"], + "styles": ["size"], "size": { "width": 400, "height": 400 @@ -2413,12 +2315,8 @@ "fieldgroup": { "name": "Field Group", "icon": "Group", - "illegalChildren": [ - "section" - ], - "styles": [ - "size" - ], + "illegalChildren": ["section"], + "styles": ["size"], "hasChildren": true, "size": { "width": 400, @@ -2451,9 +2349,7 @@ "skeleton": false, "name": "Text Field", "icon": "Text", - "styles": [ - "size" - ], + "styles": ["size"], "editable": true, "size": { "width": 400, @@ -2543,9 +2439,7 @@ "skeleton": false, "name": "Number Field", "icon": "123", - "styles": [ - "size" - ], + "styles": ["size"], "editable": true, "size": { "width": 400, @@ -2601,9 +2495,7 @@ "skeleton": false, "name": "Password Field", "icon": "LockClosed", - "styles": [ - "size" - ], + "styles": ["size"], "editable": true, "size": { "width": 400, @@ -2659,9 +2551,7 @@ "skeleton": false, "name": "Options Picker", "icon": "Menu", - "styles": [ - "size" - ], + "styles": ["size"], "editable": true, "size": { "width": 400, @@ -2828,9 +2718,7 @@ "skeleton": false, "name": "Multi-select Picker", "icon": "ViewList", - "styles": [ - "size" - ], + "styles": ["size"], "editable": true, "size": { "width": 400, @@ -3070,9 +2958,7 @@ "skeleton": false, "name": "Long Form Field", "icon": "TextAlignLeft", - "styles": [ - "size" - ], + "styles": ["size"], "editable": true, "size": { "width": 400, @@ -3150,9 +3036,7 @@ "skeleton": false, "name": "Date Picker", "icon": "Date", - "styles": [ - "size" - ], + "styles": ["size"], "editable": true, "size": { "width": 400, @@ -3232,9 +3116,7 @@ "skeleton": false, "name": "Barcode/QR Scanner", "icon": "Camera", - "styles": [ - "size" - ], + "styles": ["size"], "size": { "width": 400, "height": 50 @@ -3283,9 +3165,7 @@ "embeddedmap": { "name": "Embedded Map", "icon": "Location", - "styles": [ - "size" - ], + "styles": ["size"], "draggable": false, "size": { "width": 400, @@ -3398,9 +3278,7 @@ "skeleton": false, "name": "Attachment", "icon": "Attach", - "styles": [ - "size" - ], + "styles": ["size"], "editable": true, "size": { "width": 400, @@ -3463,9 +3341,7 @@ "skeleton": false, "name": "Relationship Picker", "icon": "TaskList", - "styles": [ - "size" - ], + "styles": ["size"], "editable": true, "size": { "width": 400, @@ -3527,9 +3403,7 @@ "skeleton": false, "name": "JSON Field", "icon": "Brackets", - "styles": [ - "size" - ], + "styles": ["size"], "editable": true, "size": { "width": 400, @@ -3579,9 +3453,7 @@ "s3upload": { "name": "S3 File Upload", "icon": "UploadToCloud", - "styles": [ - "size" - ], + "styles": ["size"], "editable": true, "size": { "width": 400, @@ -3642,13 +3514,9 @@ "dataprovider": { "name": "Data Provider", "icon": "Data", - "illegalChildren": [ - "section" - ], + "illegalChildren": ["section"], "hasChildren": true, - "actions": [ - "RefreshDatasource" - ], + "actions": ["RefreshDatasource"], "size": { "width": 400, "height": 100 @@ -3674,10 +3542,7 @@ "type": "select", "label": "Sort Order", "key": "sortOrder", - "options": [ - "Ascending", - "Descending" - ], + "options": ["Ascending", "Descending"], "defaultValue": "Ascending" }, { @@ -3729,9 +3594,7 @@ "skeleton": false, "name": "Table", "icon": "Table", - "illegalChildren": [ - "section" - ], + "illegalChildren": ["section"], "hasChildren": true, "showEmptyState": false, "size": { @@ -3815,9 +3678,7 @@ "daterangepicker": { "name": "Date Range", "icon": "Calendar", - "styles": [ - "size" - ], + "styles": ["size"], "hasChildren": false, "size": { "width": 200, @@ -3856,9 +3717,7 @@ "spectrumcard": { "name": "Card", "icon": "PersonalizationField", - "styles": [ - "size" - ], + "styles": ["size"], "size": { "width": 300, "height": 120 @@ -4031,10 +3890,7 @@ "type": "select", "label": "Sort Order", "key": "sortOrder", - "options": [ - "Ascending", - "Descending" - ], + "options": ["Ascending", "Descending"], "defaultValue": "Ascending" }, { @@ -4213,11 +4069,7 @@ "type": "select", "label": "Format", "key": "yAxisUnits", - "options": [ - "Default", - "Thousands", - "Millions" - ], + "options": ["Default", "Thousands", "Millions"], "defaultValue": "Default" }, { @@ -4271,11 +4123,7 @@ "type": "select", "label": "Format", "key": "yAxisUnits", - "options": [ - "Default", - "Thousands", - "Millions" - ], + "options": ["Default", "Thousands", "Millions"], "defaultValue": "Default" }, { @@ -4292,11 +4140,7 @@ "type": "select", "label": "Curve", "key": "curve", - "options": [ - "Smooth", - "Straight", - "Stepline" - ], + "options": ["Smooth", "Straight", "Stepline"], "defaultValue": "Smooth" } ] @@ -4328,11 +4172,7 @@ "type": "select", "label": "Format", "key": "yAxisUnits", - "options": [ - "Default", - "Thousands", - "Millions" - ], + "options": ["Default", "Thousands", "Millions"], "defaultValue": "Default" }, { @@ -4349,11 +4189,7 @@ "type": "select", "label": "Curve", "key": "curve", - "options": [ - "Smooth", - "Straight", - "Stepline" - ], + "options": ["Smooth", "Straight", "Stepline"], "defaultValue": "Smooth" }, { @@ -4418,11 +4254,7 @@ "type": "select", "label": "Format", "key": "yAxisUnits", - "options": [ - "Default", - "Thousands", - "Millions" - ], + "options": ["Default", "Thousands", "Millions"], "defaultValue": "Default" }, { @@ -4443,9 +4275,7 @@ "block": true, "name": "Table block", "icon": "Table", - "styles": [ - "size" - ], + "styles": ["size"], "size": { "width": 600, "height": 400 @@ -4483,10 +4313,7 @@ "type": "select", "label": "Sort Order", "key": "sortOrder", - "options": [ - "Ascending", - "Descending" - ], + "options": ["Ascending", "Descending"], "defaultValue": "Ascending" }, { @@ -4638,9 +4465,7 @@ "block": true, "name": "Cards block", "icon": "PersonalizationField", - "styles": [ - "size" - ], + "styles": ["size"], "size": { "width": 600, "height": 400 @@ -4679,10 +4504,7 @@ "type": "select", "label": "Sort Order", "key": "sortOrder", - "options": [ - "Ascending", - "Descending" - ], + "options": ["Ascending", "Descending"], "defaultValue": "Descending" }, { @@ -4816,9 +4638,7 @@ "block": true, "name": "Repeater block", "icon": "ViewList", - "illegalChildren": [ - "section" - ], + "illegalChildren": ["section"], "hasChildren": true, "size": { "width": 400, @@ -4846,10 +4666,7 @@ "type": "select", "label": "Sort Order", "key": "sortOrder", - "options": [ - "Ascending", - "Descending" - ], + "options": ["Ascending", "Descending"], "defaultValue": "Descending" }, { @@ -5044,9 +4861,7 @@ "markdownviewer": { "name": "Markdown Viewer", "icon": "Preview", - "styles": [ - "size" - ], + "styles": ["size"], "size": { "width": 400, "height": 100 @@ -5063,9 +4878,7 @@ "formblock": { "name": "Form Block", "icon": "Form", - "styles": [ - "size" - ], + "styles": ["size"], "block": true, "info": "Form blocks are only compatible with internal or SQL tables", "size": { @@ -5077,11 +4890,7 @@ "type": "select", "label": "Type", "key": "actionType", - "options": [ - "Create", - "Update", - "View" - ], + "options": ["Create", "Update", "View"], "defaultValue": "Create" }, { @@ -5215,10 +5024,7 @@ "name": "Side Panel", "icon": "RailRight", "hasChildren": true, - "illegalChildren": [ - "section", - "sidepanel" - ], + "illegalChildren": ["section", "sidepanel"], "showEmptyState": false, "draggable": false, "info": "Side panels are hidden by default. They will only be revealed when triggered by the 'Open Side Panel' action." @@ -5307,4 +5113,4 @@ "suffix": "repeater" } } -} \ No newline at end of file +} diff --git a/packages/client/src/components/app/BackgroundImage.svelte b/packages/client/src/components/app/BackgroundImage.svelte index 909e0fd3fd..df6459c417 100644 --- a/packages/client/src/components/app/BackgroundImage.svelte +++ b/packages/client/src/components/app/BackgroundImage.svelte @@ -21,7 +21,9 @@ {#if url}
-
+
+ +
{:else if $builderStore.inBuilder}