draft handler

This commit is contained in:
Martin McKeaveney 2020-01-30 20:01:18 +00:00
parent 977a609230
commit 7baa9d443d
6 changed files with 69 additions and 39 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -82,13 +82,13 @@
{#if isExpanded} {#if isExpanded}
<div> <div>
<div class="binding-prop-label">Binding Path</div> <div class="binding-prop-label">Binding Path</div>
<Input <input class="uk-input uk-form-small"
value={bindingPath} value={bindingPath}
on:change={setBindingPath} /> on:change={setBindingPath} >
<div class="binding-prop-label">Fallback Value</div> <div class="binding-prop-label">Fallback Value</div>
<Input <input class="uk-input uk-form-small"
value={bindingFallbackValue} value={bindingFallbackValue}
on:change={setBindingFallback} /> on:change={setBindingFallback} >
<div class="binding-prop-label">Binding Source</div> <div class="binding-prop-label">Binding Source</div>
<select class="uk-select uk-form-small" <select class="uk-select uk-form-small"
value={bindingSource} value={bindingSource}
@ -120,9 +120,9 @@
{/each} {/each}
</select> </select>
{:else} {: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} {/if}
</div> </div>