diff --git a/frontend-svelte/public/index.html b/frontend-svelte/public/index.html index 52368f0d..d682c4bb 100644 --- a/frontend-svelte/public/index.html +++ b/frontend-svelte/public/index.html @@ -52,22 +52,26 @@ // Display an error if the browser is incompatible with a required API // This is run outside the JS code bundle in case unsupported features cause a syntax error when parsing the bundle, preventing the any bundle code from running - // TODO: Svelte: reenable this - let error; + let incompatibility; if (!("BigUint64Array" in window)) { - error = ` - -

This browser is too old to run Graphite

-

Please upgrade to a modern web browser such as the latest Firefox, Chrome, Edge, or Safari version 15 or newer.

-

(The BigInt64Array -JavaScript API must be supported by the browser for Graphite to function.)

- `.trim(); + incompatibility = ` + +

This browser is too old to run Graphite

+

Please upgrade to a modern web browser such as the latest Firefox, Chrome, Edge, or Safari version 15 or newer.

+

(The BigInt64Array + JavaScript API must be supported by the browser for Graphite to function.)

+ `.trim(); + } + + // Load the editor application or display the incompatibility message + if (!incompatibility) { + import("/build/bundle.js"); + } else { + document.body.innerHTML += incompatibility; } - if (error) document.body.innerHTML = error; - diff --git a/frontend-svelte/src/components/panels/LayerTree.svelte b/frontend-svelte/src/components/panels/LayerTree.svelte index 0284e683..475d6936 100644 --- a/frontend-svelte/src/components/panels/LayerTree.svelte +++ b/frontend-svelte/src/components/panels/LayerTree.svelte @@ -66,6 +66,7 @@ editor.subscriptions.subscribeJsMessage(UpdateLayerTreeOptionsLayout, (updateLayerTreeOptionsLayout) => { patchWidgetLayout(layerTreeOptionsLayout, updateLayerTreeOptionsLayout); + layerTreeOptionsLayout = layerTreeOptionsLayout; }); editor.subscriptions.subscribeJsMessage(UpdateDocumentLayerDetails, (updateDocumentLayerDetails) => { diff --git a/frontend-svelte/src/components/panels/Properties.svelte b/frontend-svelte/src/components/panels/Properties.svelte index dd76889e..3088b073 100644 --- a/frontend-svelte/src/components/panels/Properties.svelte +++ b/frontend-svelte/src/components/panels/Properties.svelte @@ -16,10 +16,12 @@ onMount(() => { editor.subscriptions.subscribeJsMessage(UpdatePropertyPanelOptionsLayout, (updatePropertyPanelOptionsLayout) => { patchWidgetLayout(propertiesOptionsLayout, updatePropertyPanelOptionsLayout); + propertiesOptionsLayout = propertiesOptionsLayout; }); editor.subscriptions.subscribeJsMessage(UpdatePropertyPanelSectionsLayout, (updatePropertyPanelSectionsLayout) => { patchWidgetLayout(propertiesSectionsLayout, updatePropertyPanelSectionsLayout); + propertiesSectionsLayout = propertiesSectionsLayout; }); }); diff --git a/frontend-svelte/src/components/widgets/inputs/OptionalInput.svelte b/frontend-svelte/src/components/widgets/inputs/OptionalInput.svelte index d2ea98b8..f0518e98 100644 --- a/frontend-svelte/src/components/widgets/inputs/OptionalInput.svelte +++ b/frontend-svelte/src/components/widgets/inputs/OptionalInput.svelte @@ -18,7 +18,7 @@ .optional-input { flex-grow: 0; - label { + .checkbox-input label { align-items: center; justify-content: center; white-space: nowrap; @@ -29,7 +29,7 @@ box-sizing: border-box; } - &.disabled label { + &.disabled .checkbox-input label { border: 1px solid var(--color-4-dimgray); } }