Update automation code editors to work with new components
This commit is contained in:
parent
10b5ab34cf
commit
d2cdee13ae
4 changed files with 17 additions and 37 deletions
|
@ -547,7 +547,7 @@
|
||||||
{:else if value.customType === "code"}
|
{:else if value.customType === "code"}
|
||||||
<CodeEditorModal>
|
<CodeEditorModal>
|
||||||
<div class:js-editor={editingJs}>
|
<div class:js-editor={editingJs}>
|
||||||
<div class:js-code={editingJs} style="width: 100%">
|
<div class:js-code={editingJs} style="width:100%;height:500px;">
|
||||||
<CodeEditor
|
<CodeEditor
|
||||||
value={inputData[key]}
|
value={inputData[key]}
|
||||||
on:change={e => {
|
on:change={e => {
|
||||||
|
@ -560,20 +560,10 @@
|
||||||
autocompleteEnabled={codeMode !== EditorModes.JS}
|
autocompleteEnabled={codeMode !== EditorModes.JS}
|
||||||
bind:getCaretPosition
|
bind:getCaretPosition
|
||||||
bind:insertAtPos
|
bind:insertAtPos
|
||||||
height={500}
|
placeholder={codeMode === EditorModes.Handlebars
|
||||||
|
? "Add bindings by typing {{"
|
||||||
|
: null}
|
||||||
/>
|
/>
|
||||||
<div class="messaging">
|
|
||||||
{#if codeMode === EditorModes.Handlebars}
|
|
||||||
<Icon name="FlashOn" />
|
|
||||||
<div class="messaging-wrap">
|
|
||||||
<div>
|
|
||||||
Add available bindings by typing <strong>
|
|
||||||
}}
|
|
||||||
</strong>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
{#if editingJs}
|
{#if editingJs}
|
||||||
<div class="js-binding-picker">
|
<div class="js-binding-picker">
|
||||||
|
@ -650,11 +640,6 @@
|
||||||
width: 320px;
|
width: 320px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.messaging {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: var(--spacing-xl);
|
|
||||||
}
|
|
||||||
.fields {
|
.fields {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
@ -666,7 +651,6 @@
|
||||||
.block-field {
|
.block-field {
|
||||||
display: flex; /* Use Flexbox */
|
display: flex; /* Use Flexbox */
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
|
||||||
flex-direction: row; /* Arrange label and field side by side */
|
flex-direction: row; /* Arrange label and field side by side */
|
||||||
align-items: center; /* Align vertically in the center */
|
align-items: center; /* Align vertically in the center */
|
||||||
gap: 10px; /* Add some space between label and field */
|
gap: 10px; /* Add some space between label and field */
|
||||||
|
|
|
@ -47,7 +47,6 @@
|
||||||
|
|
||||||
export let label
|
export let label
|
||||||
export let completions = []
|
export let completions = []
|
||||||
export let height = 200
|
|
||||||
export let resize = "none"
|
export let resize = "none"
|
||||||
export let mode = EditorModes.Handlebars
|
export let mode = EditorModes.Handlebars
|
||||||
export let value = ""
|
export let value = ""
|
||||||
|
@ -241,8 +240,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$: editorHeight = typeof height === "number" ? `${height}px` : height
|
|
||||||
|
|
||||||
// Init when all elements are ready
|
// Init when all elements are ready
|
||||||
$: if (mounted && !isEditorInitialised) {
|
$: if (mounted && !isEditorInitialised) {
|
||||||
isEditorInitialised = true
|
isEditorInitialised = true
|
||||||
|
@ -284,14 +281,22 @@
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
/* Editor */
|
/* Editor */
|
||||||
|
.code-editor {
|
||||||
|
font-size: 12px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
.code-editor :global(.cm-editor) {
|
.code-editor :global(.cm-editor) {
|
||||||
|
height: 100%;
|
||||||
background: var(--spectrum-global-color-gray-50) !important;
|
background: var(--spectrum-global-color-gray-50) !important;
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
.code-editor :global(.cm-content) {
|
.code-editor :global(.cm-content) {
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
}
|
}
|
||||||
.code-editor {
|
.code-editor > div {
|
||||||
font-size: 12px;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Active line */
|
/* Active line */
|
||||||
|
|
|
@ -344,15 +344,6 @@
|
||||||
height: 0;
|
height: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
.editor :global(.code-editor),
|
|
||||||
.editor :global(.code-editor > div),
|
|
||||||
.editor :global(.cm-editor) {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.editor :global(.cm-editor) {
|
|
||||||
border: none;
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Overlay */
|
/* Overlay */
|
||||||
.mode-overlay {
|
.mode-overlay {
|
||||||
|
|
|
@ -362,15 +362,15 @@
|
||||||
padding: var(--spacing-m);
|
padding: var(--spacing-m);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background-color: var(--spectrum-global-color-gray-200);
|
background-color: var(--spectrum-global-color-gray-200);
|
||||||
transition: background-color 130ms ease-in-out, color 130ms ease-in-out,
|
transition: background-color 130ms ease-out, color 130ms ease-out,
|
||||||
border-color 130ms ease-in-out;
|
border-color 130ms ease-out;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
}
|
}
|
||||||
li:not(:last-of-type) {
|
li:not(:last-of-type) {
|
||||||
margin-bottom: var(--spacing-s);
|
margin-bottom: var(--spacing-s);
|
||||||
}
|
}
|
||||||
li :global(*) {
|
li :global(*) {
|
||||||
transition: color 130ms ease-in-out;
|
transition: color 130ms ease-out;
|
||||||
}
|
}
|
||||||
li:hover {
|
li:hover {
|
||||||
color: var(--spectrum-global-color-gray-900);
|
color: var(--spectrum-global-color-gray-900);
|
||||||
|
|
Loading…
Reference in a new issue