Merge pull request #48 from aam-git/master

Reactive Colours and Modal tweaks

src/helpers/EditorColorPicker.svelte

@@ -8,7 +8,7 @@
 </div>
 
 <script>
-    import {onMount, createEventDispatcher } from "svelte";
+    import { createEventDispatcher } from "svelte";
 
     const dispatcher = new createEventDispatcher();
 
@@ -17,15 +17,9 @@
     export let event = '';
     export let colors = [];
 
-    const getBtns = () => {
-      const btns = colors.map((color) => ({ color }));
-      btns.push({ text: '#', modal: true });
-      return btns;
-    }
-
-    onMount(() => {
-        btns = getBtns();
-    });
+    $: btns = colors
+            .map((color) => ({ color }))
+            .concat([{ text: '#', modal: true }]);
 
     function close() {
         show = false;

src/helpers/EditorModal.svelte

@@ -1,12 +1,12 @@
 <svelte:options accessors={true}></svelte:options>
-<div style="display: {show ? 'block' : 'none'}">
+{#if show}
   <div class="cl-editor-overlay" on:click="{cancel}"></div>
   <div class="cl-editor-modal">
     <div class="modal-box">
       <span class="modal-title">{title}</span>
       <form on:submit|preventDefault="{event=>confirm()}">
         <label class="modal-label" class:input-error={error}>
-          <input bind:this={refs.text} on:keyup="{hideError}" type="text" name="text" bind:value="{text}">
+          <input bind:this={refs.text} on:keyup="{hideError}" use:inputType name="text" bind:value="{text}">
           <span class="input-info">
             <span>{label}</span>
             {#if error}
@@ -19,10 +19,10 @@
       </form>
     </div>
   </div>
-</div>
+{/if}
 
 <script>
-  import {onMount, createEventDispatcher } from "svelte";
+  import { createEventDispatcher } from "svelte";
 
   let dispatcher = new createEventDispatcher();
 
@@ -34,6 +34,10 @@
   export let error = false;
 
   let refs = {}
+  
+  const inputType = (e) => {
+    e.type = event === 'colorHref' ? 'color' : 'text';
+  };
 
   $:{
     if(show){
@@ -43,7 +47,6 @@
     }
   }
 
-
   function confirm() {
     if (text) {
       console.log('dispatcher',text,event)
@@ -132,7 +135,7 @@
   position: absolute;
   top: 0;
   right: 0;
-  height: 27px;
+  height: 29px;
   line-height: 25px;
   border: 1px solid #DEDEDE;
   background: #fff;