diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte index ce8f28b50f..6de45c1aee 100644 --- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte +++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte @@ -25,13 +25,13 @@ name: "Screen Placeholder", route: "*", props: { - "_id": "screenslot-placeholder", - "_component": "@budibase/standard-components/container", - "_styles": { - "normal": {}, - "hover": {}, - "active": {}, - "selected": {} + _id: "screenslot-placeholder", + _component: "@budibase/standard-components/container", + _styles: { + normal: {}, + hover: {}, + active: {}, + selected: {}, }, _code: "", className: "", @@ -39,87 +39,89 @@ type: "div", _children: [ { - "_id": "51a1b494-0fa4-49c3-90cc-c2a6c7a3f888", - "_component": "@budibase/standard-components/container", - "_styles": { - "normal": { - "display": "flex", - "flex-direction": "column", - "align-items": "center" + _id: "51a1b494-0fa4-49c3-90cc-c2a6c7a3f888", + _component: "@budibase/standard-components/container", + _styles: { + normal: { + display: "flex", + "flex-direction": "column", + "align-items": "center", + }, + hover: {}, + active: {}, + selected: {}, }, - "hover": {}, - "active": {}, - "selected": {} + _code: "", + className: "", + onLoad: [], + type: "div", + _instanceId: "inst_40d9036_4c81114e2bf145ab8721978c66e09a10", + _instanceName: "Container", + _children: [ + { + _id: "90a52cd0-f215-46c1-b29b-e28f9e7edf72", + _component: "@budibase/standard-components/heading", + _styles: { + normal: { + width: "500px", + padding: "8px", + }, + hover: {}, + active: {}, + selected: {}, + }, + _code: "", + className: "", + text: "Screenslot", + type: "h1", + _instanceId: "inst_40d9036_4c81114e2bf145ab8721978c66e09a10", + _instanceName: "Heading", + _children: [], + }, + { + _id: "71a3da65-72c6-4c43-8c6a-49871c07b77d", + _component: "@budibase/standard-components/text", + _styles: { + normal: { + "max-width": "", + "text-align": "left", + width: "500px", + padding: "8px", + }, + hover: {}, + active: {}, + selected: {}, + }, + _code: "", + text: + "The screens that you create will be displayed inside this box.", + type: "none", + _instanceId: "inst_40d9036_4c81114e2bf145ab8721978c66e09a10", + _instanceName: "Text", + }, + { + _id: "8af80374-460d-497b-a5d8-7dd2ec4a7bbc", + _component: "@budibase/standard-components/text", + _styles: { + normal: { + "max-width": "", + "text-align": "left", + width: "500px", + padding: "8px", + }, + hover: {}, + active: {}, + selected: {}, + }, + _code: "", + text: + "This box is just a placeholder, to show you the position of screens.", + type: "none", + _instanceId: "inst_40d9036_4c81114e2bf145ab8721978c66e09a10", + _instanceName: "Text", + }, + ], }, - "_code": "", - "className": "", - "onLoad": [], - "type": "div", - "_instanceId": "inst_40d9036_4c81114e2bf145ab8721978c66e09a10", - "_instanceName": "Container", - "_children": [ - { - "_id": "90a52cd0-f215-46c1-b29b-e28f9e7edf72", - "_component": "@budibase/standard-components/heading", - "_styles": { - "normal": { - "width": "500px", - "padding": "8px" - }, - "hover": {}, - "active": {}, - "selected": {} - }, - "_code": "", - "className": "", - "text": "Screenslot", - "type": "h1", - "_instanceId": "inst_40d9036_4c81114e2bf145ab8721978c66e09a10", - "_instanceName": "Heading", - "_children": [] - }, - { - "_id": "71a3da65-72c6-4c43-8c6a-49871c07b77d", - "_component": "@budibase/standard-components/text", - "_styles": { - "normal": { - "max-width": "", - "text-align": "left", - "width": "500px", - "padding": "8px" - }, - "hover": {}, - "active": {}, - "selected": {} - }, - "_code": "", - "text": "The screens that you create will be displayed inside this box.", - "type": "none", - "_instanceId": "inst_40d9036_4c81114e2bf145ab8721978c66e09a10", - "_instanceName": "Text" - }, - { - "_id": "8af80374-460d-497b-a5d8-7dd2ec4a7bbc", - "_component": "@budibase/standard-components/text", - "_styles": { - "normal": { - "max-width": "", - "text-align": "left", - "width": "500px", - "padding": "8px" - }, - "hover": {}, - "active": {}, - "selected": {} - }, - "_code": "", - "text": "This box is just a placeholder, to show you the position of screens.", - "type": "none", - "_instanceId": "inst_40d9036_4c81114e2bf145ab8721978c66e09a10", - "_instanceName": "Text" - } - ] - } ], _instanceName: "Content Placeholder", }, diff --git a/packages/builder/src/components/userInterface/Colorpicker/components/Colorpicker.svelte b/packages/builder/src/components/userInterface/Colorpicker/components/Colorpicker.svelte index 7fa536a474..1a1196dd14 100644 --- a/packages/builder/src/components/userInterface/Colorpicker/components/Colorpicker.svelte +++ b/packages/builder/src/components/userInterface/Colorpicker/components/Colorpicker.svelte @@ -1,184 +1,267 @@ + +
+ +
+ +
+ +
+
+
+ +
+ +
+
+ setHue(hue.detail)} + on:dragend={dispatchValue} /> + + + setAlpha(alpha.detail, isDrag)} + on:dragend={dispatchValue} /> + + +
+
+ + {#if !disableSwatches} +
+ {#if hasSwatches} + {#each swatches as color, idx} + {#if idx < 12} + applySwatch(color)} + on:removeswatch={() => removeSwatch(idx)} /> + {/if} + {/each} + {/if} + {#if swatches.length < 12} +
+ + +
+ {/if} +
+ {/if} + +
+ + handleColorInput(event.target.value)} + on:change={dispatchInputChange} /> +
+
+ +
+ + - - -
- -
- -
- -
-
-
- -
- -
-
- setHue(hue.detail)} - on:dragend={dispatchValue} /> - - - setAlpha(alpha.detail, isDrag)} - on:dragend={dispatchValue} /> - - -
-
- - {#if !disableSwatches} -
- {#if hasSwatches} - {#each swatches as color, idx} - {#if idx < 12} - applySwatch(color)} - on:removeswatch={() => removeSwatch(idx)} /> - {/if} - {/each} - {/if} - {#if swatches.length < 12} -
- + -
- {/if} -
- {/if} - -
- - handleColorInput(event.target.value)} - on:change={dispatchInputChange} /> -
-
- -
- diff --git a/packages/builder/src/components/userInterface/Colorpicker/components/Colorpreview.svelte b/packages/builder/src/components/userInterface/Colorpicker/components/Colorpreview.svelte index 2d9426fbae..474b287934 100644 --- a/packages/builder/src/components/userInterface/Colorpicker/components/Colorpreview.svelte +++ b/packages/builder/src/components/userInterface/Colorpicker/components/Colorpreview.svelte @@ -1,53 +1,53 @@ - -
@@ -173,3 +142,34 @@
{/if}
+ + diff --git a/packages/builder/src/components/userInterface/Colorpicker/components/Swatch.svelte b/packages/builder/src/components/userInterface/Colorpicker/components/Swatch.svelte index e56e6d0b6f..fe71e949cd 100644 --- a/packages/builder/src/components/userInterface/Colorpicker/components/Swatch.svelte +++ b/packages/builder/src/components/userInterface/Colorpicker/components/Swatch.svelte @@ -1,15 +1,34 @@ +
+ +
dispatch('click') }} + in:fade + title={color} + class="swatch" + style={`background: ${color};`} + on:mouseover={() => (hovered = true)} + on:mouseleave={() => (hovered = false)} + on:click|self> + {#if hovered} + dispatch('removeswatch')} /> + {/if} +
+
+
+ - -
- -
dispatch('click') }} - in:fade - title={color} - class="swatch" - style={`background: ${color};`} - on:mouseover={() => (hovered = true)} - on:mouseleave={() => (hovered = false)} - on:click|self> - {#if hovered} - dispatch('removeswatch')} /> - {/if} -
-
-
diff --git a/packages/builder/src/pages/[application]/deploy/index.svelte b/packages/builder/src/pages/[application]/deploy/index.svelte index 1d82b56110..5c1b491935 100644 --- a/packages/builder/src/pages/[application]/deploy/index.svelte +++ b/packages/builder/src/pages/[application]/deploy/index.svelte @@ -52,6 +52,11 @@