final touches for design
This commit is contained in:
Martin McKeaveney
parent
5325e0d0a9
commit
cd1714b1a0
|
|
@ -1,12 +1,23 @@
|
|||
<script>
|
||||
export let visible = true;
|
||||
export let disabled = false;
|
||||
export let hidden = false;
|
||||
export let primary = true;
|
||||
export let alert = false;
|
||||
export let warning = false;
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.action-button {
|
||||
.primary {
|
||||
color: #0055ff;
|
||||
background: rgb(54, 133, 249, 0.1);
|
||||
}
|
||||
|
||||
.alert {
|
||||
color: rgba(255, 0, 31, 1);
|
||||
background: rgba(255, 0, 31, 0.1);;
|
||||
}
|
||||
|
||||
.button {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
border-radius: 5px;
|
||||
|
|
@ -15,11 +26,11 @@
|
|||
height: 64px;
|
||||
}
|
||||
|
||||
.action-button:hover {
|
||||
.button:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.action-button:disabled {
|
||||
.button:disabled {
|
||||
color: rgba(22, 48, 87, 0.2);
|
||||
cursor: default;
|
||||
background: transparent;
|
||||
|
|
@ -30,6 +41,13 @@
|
|||
}
|
||||
</style>
|
||||
|
||||
<button on:click class="action-button {!visible && 'hidden'}" {disabled}>
|
||||
<button
|
||||
on:click
|
||||
class="button"
|
||||
class:hidden
|
||||
class:primary
|
||||
class:alert
|
||||
class:warning
|
||||
{disabled}>
|
||||
<slot />
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -1,43 +1,44 @@
|
|||
<script>
|
||||
import UIkit from "uikit";
|
||||
import UIkit from "uikit";
|
||||
|
||||
export let isOpen = false;
|
||||
export let onClosed = () => {};
|
||||
export let id = "";
|
||||
export let isOpen = false;
|
||||
export let onClosed = () => {};
|
||||
export let id = "";
|
||||
|
||||
let ukModal;
|
||||
let listenerAdded = false;
|
||||
let ukModal;
|
||||
let listenerAdded = false;
|
||||
|
||||
$: {
|
||||
if(ukModal && !listenerAdded) {
|
||||
listenerAdded = true;
|
||||
ukModal.addEventListener("hidden", onClosed);
|
||||
$: {
|
||||
if (ukModal && !listenerAdded) {
|
||||
listenerAdded = true;
|
||||
ukModal.addEventListener("hidden", onClosed);
|
||||
}
|
||||
|
||||
if(ukModal) {
|
||||
if(isOpen) {
|
||||
UIkit.modal(ukModal).show();
|
||||
} else {
|
||||
UIkit.modal(ukModal).hide();
|
||||
}
|
||||
if (ukModal) {
|
||||
if (isOpen) {
|
||||
UIkit.modal(ukModal).show();
|
||||
} else {
|
||||
UIkit.modal(ukModal).hide();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<div bind:this={ukModal} uk-modal {id}>
|
||||
<div class="uk-modal-dialog uk-modal-body" uk-overflow-auto>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
.uk-modal-dialog {
|
||||
border-radius: .3rem;
|
||||
.uk-modal-dialog {
|
||||
border-radius: 0.3rem;
|
||||
width: 60%;
|
||||
height: 80vh;
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
|
||||
</style>
|
||||
<div bind:this={ukModal} uk-modal {id}>
|
||||
<div class="uk-modal-dialog uk-modal-body" uk-overflow-auto>
|
||||
{#if onClosed}
|
||||
<button class="uk-modal-close-default" type="button" uk-close />
|
||||
{/if}
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -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 @@
|
|||
}
|
||||
</style>
|
||||
|
||||
<Modal bind:isOpen={open} onClosed={onClose}>
|
||||
<h2>{eventData.name ? `${eventData.name} Event` : 'Create a New Component Event'}</h2>
|
||||
<a href="https://docs.budibase.com/" target="_blank" >Click here to learn more about component events</a>
|
||||
<Modal bind:isOpen={open} onClosed={closeModal}>
|
||||
<h2>
|
||||
{eventData.name ? `${eventData.name} Event` : 'Create a New Component Event'}
|
||||
</h2>
|
||||
<a href="https://docs.budibase.com/" target="_blank">
|
||||
Click here to learn more about component events
|
||||
</a>
|
||||
|
||||
<div class="event-options">
|
||||
<div>
|
||||
<header>
|
||||
<h5>Event Type</h5>
|
||||
{@html getIcon('info')}
|
||||
{@html getIcon('info', 20)}
|
||||
</header>
|
||||
<Select :value={eventType}>
|
||||
{#each eventOptions as option}
|
||||
|
|
@ -113,20 +125,23 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Event Action(s)</h5>
|
||||
<header>
|
||||
<h5>Event Action(s)</h5>
|
||||
{@html getIcon('info', 20)}
|
||||
</header>
|
||||
<HandlerSelector
|
||||
newHandler
|
||||
onChanged={changeNewEventHandler}
|
||||
onChanged={updateDraftEventHandler}
|
||||
onCreate={() => {
|
||||
createNewEventHandler(newEventHandler);
|
||||
newEventHandler = { parameters: [] };
|
||||
createNewEventHandler(draftEventHandler);
|
||||
draftEventHandler = { parameters: [] };
|
||||
}}
|
||||
handler={newEventHandler} />
|
||||
handler={draftEventHandler} />
|
||||
{#if eventData}
|
||||
{#each eventData.handlers as handler, index}
|
||||
<HandlerSelector
|
||||
{index}
|
||||
onChanged={changeEventHandler}
|
||||
onChanged={updateEventHandler}
|
||||
onRemoved={() => deleteEventHandler(index)}
|
||||
{handler} />
|
||||
{/each}
|
||||
|
|
@ -134,8 +149,9 @@
|
|||
|
||||
<div class="actions">
|
||||
<ActionButton
|
||||
alert
|
||||
disabled={eventData.handlers.length === 0}
|
||||
visible={eventData.name}
|
||||
hidden={!eventData.name}
|
||||
on:click={deleteEvent}>
|
||||
Delete
|
||||
</ActionButton>
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@
|
|||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.heading {
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
|
@ -124,10 +124,10 @@
|
|||
}
|
||||
</style>
|
||||
|
||||
<div class="heading">
|
||||
<header>
|
||||
<h3>Events</h3>
|
||||
<PlusButton on:click={() => openModal()} />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="root">
|
||||
<form class="uk-form-stacked form-root">
|
||||
|
|
|
|||
Loading…
Reference in New Issue