From 7baa9d443d9db4051d862b2d4adb60c4b2606a69 Mon Sep 17 00:00:00 2001 From: Martin McKeaveney Date: Thu, 30 Jan 2020 20:01:18 +0000 Subject: [PATCH] draft handler --- .../builder/src/common/ActionButton.svelte | 9 +++- packages/builder/src/common/PlusButton.svelte | 4 +- .../EventsEditor/EventEditorModal.svelte | 44 ++++++++++++++----- .../EventsEditor/EventsEditor.svelte | 15 +++---- .../EventsEditor/HandlerSelector.svelte | 22 +++++++--- .../userInterface/StateBindingControl.svelte | 14 +++--- 6 files changed, 69 insertions(+), 39 deletions(-) diff --git a/packages/builder/src/common/ActionButton.svelte b/packages/builder/src/common/ActionButton.svelte index 4a09d55943..092123b47c 100644 --- a/packages/builder/src/common/ActionButton.svelte +++ b/packages/builder/src/common/ActionButton.svelte @@ -1,4 +1,5 @@ @@ -19,12 +20,16 @@ } .action-button:disabled { - color:#163057; + color: #163057; cursor: default; background: transparent; } + + .hidden { + visibility: hidden; + } - diff --git a/packages/builder/src/common/PlusButton.svelte b/packages/builder/src/common/PlusButton.svelte index b7ae19fcbf..7424ffa66e 100644 --- a/packages/builder/src/common/PlusButton.svelte +++ b/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); } diff --git a/packages/builder/src/userInterface/EventsEditor/EventEditorModal.svelte b/packages/builder/src/userInterface/EventsEditor/EventEditorModal.svelte index 74e3e956a2..9e93be7a60 100644 --- a/packages/builder/src/userInterface/EventsEditor/EventEditorModal.svelte +++ b/packages/builder/src/userInterface/EventsEditor/EventEditorModal.svelte @@ -10,15 +10,20 @@ import { EVENT_TYPE_MEMBER_NAME } from "../../common/eventHandlers"; export let event; - - export let events; + export let eventOptions; 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(); }; @@ -79,18 +84,24 @@ display: flex; justify-content: space-between; } + + p { + color: rgba(22, 48, 87, 0.6); + font-size: 12px; + margin-top: 0; + } -

{eventData.name || "Create a New Component Event"}

+

{eventData.name || 'Create a New Component Event'}

Click here to learn more about component events

Event Type
@@ -100,8 +111,8 @@ { - createNewEventHandler(newEventHandler) + onCreate={() => { + createNewEventHandler(newEventHandler); newEventHandler = { parameters: [] }; }} handler={newEventHandler} /> @@ -116,7 +127,16 @@ {/if}
- Delete - Save + + Delete + + + Save +
diff --git a/packages/builder/src/userInterface/EventsEditor/EventsEditor.svelte b/packages/builder/src/userInterface/EventsEditor/EventsEditor.svelte index f351befc8d..01f235c016 100644 --- a/packages/builder/src/userInterface/EventsEditor/EventsEditor.svelte +++ b/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 })}> {event.name} - {event.name} EDIT
{/if} @@ -150,8 +145,8 @@ diff --git a/packages/builder/src/userInterface/EventsEditor/HandlerSelector.svelte b/packages/builder/src/userInterface/EventsEditor/HandlerSelector.svelte index b84f371f73..d3ec42557e 100644 --- a/packages/builder/src/userInterface/EventsEditor/HandlerSelector.svelte +++ b/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; + }
- Action + Action + on:change={setBindingPath} >
Fallback Value
- + on:change={setBindingFallback} >
Binding Source
onChanged(ev.target.value)} - bind:value={value} - style="flex: 1 0 auto;" /> + onChanged(ev.target.value)} + bind:value={value} /> {/if}