CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-10-03 19:43:32 +13:00
Code Issues Projects Releases Wiki Activity

Tweaks to component snippet editor.

Browse source
This commit is contained in:
pngwn 2020-01-22 09:41:19 +00:00
parent 18a436ffef
commit dba1bfce35
3 changed files with 20 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
packages/builder/src/userInterface/CodeEditor.svelte
View file

@ -30,7 +30,7 @@
<p>Use the code box below to add snippets of javascript to enhance your webapp</p> <p>Use the code box below to add snippets of javascript to enhance your webapp</p>
<div class="editor"> <div class="editor">
<textarea bind:value={snippet_text} /> <textarea class="code" bind:value={snippet_text} />
<button on:click={save_snippet}>Save</button> <button on:click={save_snippet}>Save</button>
</div> </div>
@ -38,7 +38,7 @@
<h3>Snippets added</h3> <h3>Snippets added</h3>
{#each snippets as { id, snippet } } {#each snippets as { id, snippet } }
<div class="snippet"> <div class="snippet">
<pre>{snippet}</pre> <pre class="code">{snippet}</pre>
<button on:click={() => edit_snippet(id)}>Edit</button> <button on:click={() => edit_snippet(id)}>Edit</button>
</div> </div>
{/each} {/each}
@ -63,10 +63,9 @@
position: relative; position: relative;
} }
.editor textarea { .code {
width: 100%; width: 100%;
outline: none; outline: none;
height: 150px;
border: none; border: none;
background: #173157; background: #173157;
border-radius: 5px; border-radius: 5px;
@ -75,10 +74,14 @@
color: #eee; color: #eee;
padding: 10px; padding: 10px;
font-family: monospace; font-family: monospace;
resize: none;
overflow-y: scroll; overflow-y: scroll;
} }
.editor textarea {
resize: none;
height: 150px;
}
button { button {
position: absolute; position: absolute;
box-shadow: 0 0 black; box-shadow: 0 0 black;
@ -104,20 +107,9 @@
} }
.snippet pre { .snippet pre {
width: 100%;
outline: none;
max-height: 150px;
border: none;
background: #f9f9f9; background: #f9f9f9;
border-radius: 5px;
box-sizing: border-box;
white-space: pre;
color: #333; color: #333;
padding: 10px; max-height: 150px;
font-family: monospace;
resize: none;
overflow-y: scroll;
margin: 10px;
} }
.snippet button { .snippet button {

4
packages/builder/src/userInterface/ComponentsList.svelte
View file

@ -46,10 +46,6 @@ store.subscribe(s => {
componentLibraries = newComponentLibraries; componentLibraries = newComponentLibraries;
}); });
</script> </script>
<div class="root"> <div class="root">

2
packages/builder/src/userInterface/NewComponent.svelte
View file

@ -29,7 +29,7 @@ let name="";
let saveAttempted=false; let saveAttempted=false;
store.subscribe(s => { store.subscribe(s => {
console.log(s)
layoutComponents = pipe(s.components, [ layoutComponents = pipe(s.components, [
filter(c => c.container), filter(c => c.container),
map(c => ({name:c.name, ...splitName(c.name)})) map(c => ({name:c.name, ...splitName(c.name)}))