draft handler

packages/builder/src/common/ActionButton.svelte

@@ -1,4 +1,5 @@
 <script>
+  export let visible = true;
   export let disabled = false;
 </script>
 
@@ -19,12 +20,16 @@
   }
 
   .action-button:disabled {
-    color:#163057;
+    color: #163057;
     cursor: default;
     background: transparent;
   }
+
+  .hidden {
+    visibility: hidden;
+  }
 </style>
 
-<button on:click class="action-button" {disabled}>
+<button on:click class="action-button {!visible && 'hidden'}" {disabled}>
   <slot />
 </button>

packages/builder/src/common/PlusButton.svelte

@@ -4,7 +4,7 @@
     outline: none;
     border: none;
     border-radius: 5px;
-    background: var(--background-button);
+    background: rgba(249, 249, 249, 1);
 
     width: 1.8rem;
     height: 1.8rem;
@@ -16,7 +16,7 @@
 
     font-size: 1.2rem;
     font-weight: 700;
-    color: var(--button-text);
+    color: rgba(22, 48, 87, 1);
   }
 </style>
 

packages/builder/src/userInterface/EventsEditor/EventEditorModal.svelte

@@ -10,15 +10,20 @@
   import { EVENT_TYPE_MEMBER_NAME } from "../../common/eventHandlers";
 
   export let event;
-
+  export let eventOptions;
-  export let events;
   export let open;
   export let onClose;
   export let onPropChanged;
 
   let eventType = "onClick";
   let newEventHandler = { parameters: [] };
-  let eventData = event || { handlers: [] };
+
+  $: eventData = event || { handlers: [] };
+
+  const resetModalState = () => {
+    newEventHandler = { parameters: [] };
+    eventData = { handlers: [] };
+  };
 
   const changeEventHandler = (updatedHandler, index) => {
     eventData.handlers[index] = updatedHandler;
@@ -44,13 +49,13 @@
 
   const deleteEvent = () => {
     onPropChanged(eventType, []);
-    eventData = { handlers: [] };
+    resetModalState();
     onClose();
   };
 
   const saveEventData = () => {
     onPropChanged(eventType, eventData.handlers);
-    eventData = { handlers: [] };
+    resetModalState();
     onClose();
   };
 </script>
@@ -79,18 +84,24 @@
     display: flex;
     justify-content: space-between;
   }
+
+  p {
+    color: rgba(22, 48, 87, 0.6);
+    font-size: 12px;
+    margin-top: 0;
+  }
 </style>
 
 <Modal bind:isOpen={open} onClosed={onClose}>
-  <h2>{eventData.name || "Create a New Component Event"}</h2>
+  <h2>{eventData.name || 'Create a New Component Event'}</h2>
   <p>Click here to learn more about component events</p>
 
   <div class="event-options">
     <div>
       <h5>Event Type</h5>
       <Select bind:value={eventType}>
-        {#each events as event}
+        {#each eventOptions as option}
-          <option value={event.name}>{event.name}</option>
+          <option value={option.name}>{option.name}</option>
         {/each}
       </Select>
     </div>
@@ -100,8 +111,8 @@
   <HandlerSelector
     newHandler
     onChanged={changeNewEventHandler}
-    onCreate={() => { 
+    onCreate={() => {
-      createNewEventHandler(newEventHandler)
+      createNewEventHandler(newEventHandler);
       newEventHandler = { parameters: [] };
     }}
     handler={newEventHandler} />
@@ -116,7 +127,16 @@
   {/if}
 
   <div class="actions">
-    <ActionButton on:click={deleteEvent}>Delete</ActionButton>
+    <ActionButton
-    <ActionButton disabled={eventData.handlers.length === 0} on:click={saveEventData}>Save</ActionButton>
+      disabled={eventData.handlers.length === 0}
+      visible={eventData.name}
+      on:click={deleteEvent}>
+      Delete
+    </ActionButton>
+    <ActionButton
+      disabled={eventData.handlers.length === 0}
+      on:click={saveEventData}>
+      Save
+    </ActionButton>
   </div>
 </Modal>

packages/builder/src/userInterface/EventsEditor/EventsEditor.svelte

@@ -35,7 +35,7 @@
 
   $: { 
     events = Object.keys(componentInfo)
-    .filter(key => componentInfo[key].length && findType(key) === EVENT_TYPE)
+    .filter(key => findType(key) === EVENT_TYPE)
     .map(key => ({ name: key, handlers: componentInfo[key] }));
   }
 
@@ -85,6 +85,7 @@
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     border: 2px solid #f9f9f9;
+    height: 80px;
   }
 
   .hierarchy-item {
@@ -101,16 +102,11 @@
   }
 
   .event-name {
-    font-size: 12px;
-    color: rgba(35, 65, 105, 0.4);
-    grid-column: 1 / span 2;
-  }
-
-  .event-identifier {
     margin-top: 5px;
     font-weight: bold;
     font-size: 16px;
-    color: rgba(22, 48, 87, 0.6)
+    color: rgba(22, 48, 87, 0.6);
+    align-self: end;
   }
 
   .edit-text {
@@ -141,7 +137,6 @@
           class="handler-container hierarchy-item {selectedEvent && selectedEvent.index === index ? 'selected' : ''}"
           on:click={() => openModal({ ...event, index })}>
           <span class="event-name">{event.name}</span>
-          <span class="event-identifier">{event.name}</span>
           <span class="edit-text">EDIT</span>
         </div>
       {/if}
@@ -150,8 +145,8 @@
 </div>
 <EventEditorModal
   {onPropChanged}
-  events={events}
   open={modalOpen}
   onClose={closeModal}
+  eventOptions={events}
   event={selectedEvent}
   />

packages/builder/src/userInterface/EventsEditor/HandlerSelector.svelte

@@ -107,12 +107,20 @@
     grid-gap: 10px;
     padding: 22px;
   }
+
+  .event-action-button {
+    margin-right: 20px;
+  }
+
+  span {
+    margin-bottom: 5px;
+  }
 </style>
 
 <div class="type-selector-container {newHandler && 'new-handler'}">
   <div class="handler-controls">
     <div class="handler-option">
-      Action
+      <span>Action</span>
       <Select value={handlerType} on:change={handlerTypeChanged}>
         <option />
         {#each eventOptions as option}
@@ -131,9 +139,11 @@
       {/each}
     {/if}
   </div>
-  {#if newHandler}
+  <div class="event-action-button">
-    <PlusButton on:click={onCreate} />
+    {#if newHandler}
-  {:else}
+      <PlusButton on:click={onCreate} />
-    <IconButton icon="x" on:click={onRemoved} />
+    {:else}
-  {/if}
+      <IconButton icon="x" on:click={onRemoved} />
+    {/if}
+  </div>
 </div>

packages/builder/src/userInterface/StateBindingControl.svelte

@@ -82,13 +82,13 @@
         {#if isExpanded}
             <div>
                 <div class="binding-prop-label">Binding Path</div>
-                <Input
+                <input class="uk-input uk-form-small"
                     value={bindingPath}
-                    on:change={setBindingPath} />
+                    on:change={setBindingPath} >
                 <div class="binding-prop-label">Fallback Value</div>
-                <Input
+                <input class="uk-input uk-form-small"
                     value={bindingFallbackValue}
-                    on:change={setBindingFallback} />
+                    on:change={setBindingFallback} >
                 <div class="binding-prop-label">Binding Source</div>
                 <select class="uk-select uk-form-small"
                     value={bindingSource}
@@ -120,9 +120,9 @@
                 {/each}
             </select>
         {:else}
-            <Input on:change={ev => onChanged(ev.target.value)}
+            <Input 
-                bind:value={value}
+                on:change={ev => onChanged(ev.target.value)}
-                style="flex: 1 0 auto;" />
+                bind:value={value} />
         {/if}
 
     </div>