diff --git a/src/components/modals/Modal.scss b/src/components/modals/Modal.scss index f20d71e..5d284ce 100644 --- a/src/components/modals/Modal.scss +++ b/src/components/modals/Modal.scss @@ -10,6 +10,7 @@ font-family: $font-family; font-size: $font-size; + color: $black; .contents { padding: 20px; @@ -27,5 +28,5 @@ // custom styling for the modal. // FIXME: not neat to override global styles! :global(.bg .window-wrap) { - margin-top: 10rem; + margin-top: 8rem; } diff --git a/src/components/modals/TransformModal.scss b/src/components/modals/TransformModal.scss index cc4cf3a..a893221 100644 --- a/src/components/modals/TransformModal.scss +++ b/src/components/modals/TransformModal.scss @@ -4,7 +4,7 @@ .jsoneditor-modal.transform { .description { - padding-bottom: $padding; + color: $dark-gray; code { background: $background-gray; @@ -15,7 +15,8 @@ label { font-weight: bold; - padding: $padding/2 0; + padding-top: $padding * 2; + padding-bottom: $padding / 2; display: block; } @@ -31,6 +32,7 @@ padding: $padding / 2; font-family: $font-family-mono; font-size: $font-size-mono; + color: $black; } textarea.preview { diff --git a/src/components/modals/TransformModal.svelte b/src/components/modals/TransformModal.svelte index 5af48e7..0b9776f 100644 --- a/src/components/modals/TransformModal.svelte +++ b/src/components/modals/TransformModal.svelte @@ -8,6 +8,7 @@ import { transformModalState } from './transformModalState.js' import { DEBOUNCE_DELAY, MAX_PREVIEW_CHARACTERS } from '../../constants.js' import { truncate } from '../../utils/stringUtils.js' + import TransformWizard from './TransformWizard.svelte' import * as _ from 'lodash-es' import { getIn } from '../../utils/immutabilityHelpers.js' @@ -34,6 +35,11 @@ return queryFn(json) } + function updateQuery (newQuery) { + console.log('updated query by wizard', newQuery) + query = newQuery + } + function previewTransform(json, query) { try { const jsonTransformed = evalTransform(json, query) @@ -96,6 +102,13 @@ _.pick, _.uniq, _.get, etcetera. + + {#if Array.isArray(json)} + + {:else} + (Only available for arrays, not for objects) + {/if} +