draft handler
This commit is contained in:
parent
977a609230
commit
7baa9d443d
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -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>
|
||||||
|
<div class="event-action-button">
|
||||||
{#if newHandler}
|
{#if newHandler}
|
||||||
<PlusButton on:click={onCreate} />
|
<PlusButton on:click={onCreate} />
|
||||||
{:else}
|
{:else}
|
||||||
<IconButton icon="x" on:click={onRemoved} />
|
<IconButton icon="x" on:click={onRemoved} />
|
||||||
{/if}
|
{/if}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue