From 8d656596c71a9d0d00495f535d821c1615bcaeb8 Mon Sep 17 00:00:00 2001 From: Martin McKeaveney Date: Fri, 31 Jan 2020 09:45:02 +0000 Subject: [PATCH] final touches for design --- .../builder/src/common/ActionButton.svelte | 28 ++++++-- packages/builder/src/common/Modal.svelte | 61 +++++++++--------- .../EventsEditor/EventEditorModal.svelte | 64 ++++++++++++------- .../EventsEditor/EventsEditor.svelte | 6 +- 4 files changed, 97 insertions(+), 62 deletions(-) diff --git a/packages/builder/src/common/ActionButton.svelte b/packages/builder/src/common/ActionButton.svelte index dd00966c49..fca74c09ff 100644 --- a/packages/builder/src/common/ActionButton.svelte +++ b/packages/builder/src/common/ActionButton.svelte @@ -1,12 +1,23 @@ - diff --git a/packages/builder/src/common/Modal.svelte b/packages/builder/src/common/Modal.svelte index 19db3b064e..5d695d0fc1 100644 --- a/packages/builder/src/common/Modal.svelte +++ b/packages/builder/src/common/Modal.svelte @@ -1,43 +1,44 @@ -
-
- -
-
- - - \ No newline at end of file +
+
+ {#if onClosed} +
+
diff --git a/packages/builder/src/userInterface/EventsEditor/EventEditorModal.svelte b/packages/builder/src/userInterface/EventsEditor/EventEditorModal.svelte index 5c288084e6..290381c5dc 100644 --- a/packages/builder/src/userInterface/EventsEditor/EventEditorModal.svelte +++ b/packages/builder/src/userInterface/EventsEditor/EventEditorModal.svelte @@ -17,21 +17,22 @@ export let onPropChanged; let eventType = "onClick"; - let newEventHandler = { parameters: [] }; + let draftEventHandler = { parameters: [] }; $: eventData = event || { handlers: [] }; - const resetModalState = () => { - newEventHandler = { parameters: [] }; + const closeModal = () => { + onClose(); + draftEventHandler = { parameters: [] }; eventData = { handlers: [] }; }; - const changeEventHandler = (updatedHandler, index) => { + const updateEventHandler = (updatedHandler, index) => { eventData.handlers[index] = updatedHandler; }; - const changeNewEventHandler = updatedHandler => { - newEventHandler = updatedHandler; + const updateDraftEventHandler = updatedHandler => { + draftEventHandler = updatedHandler; }; const deleteEventHandler = index => { @@ -50,14 +51,12 @@ const deleteEvent = () => { onPropChanged(eventType, []); - resetModalState(); - onClose(); + closeModal(); }; const saveEventData = () => { onPropChanged(eventType, eventData.handlers); - resetModalState(); - onClose(); + closeModal(); }; @@ -72,8 +71,7 @@ h5 { color: rgba(22, 48, 87, 0.6); font-size: 15px; - margin-bottom: 5px; - margin-top: 20px; + margin: 0; } .event-options { @@ -82,12 +80,22 @@ grid-gap: 10px; } - .actions, header { + .actions, + header { display: flex; justify-content: space-between; align-items: center; } + .actions { + margin-top: auto; + } + + header { + margin-top: 30px; + margin-bottom: 10px; + } + a { color: rgba(22, 48, 87, 0.6); font-size: 12px; @@ -95,15 +103,19 @@ } - -

{eventData.name ? `${eventData.name} Event` : 'Create a New Component Event'}

- Click here to learn more about component events + +

+ {eventData.name ? `${eventData.name} Event` : 'Create a New Component Event'} +

+ + Click here to learn more about component events +
Event Type
- {@html getIcon('info')} + {@html getIcon('info', 20)}