MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

switch out input to use bbui

This commit is contained in:
kevmodrome 2020-06-04 09:26:50 +02:00
parent b8df2f15fb
commit cc44ca3e54
5 changed files with 162 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/builder/src/components/common/Select.svelte
View File

@ -22,7 +22,6 @@
font-size: 14px; font-size: 14px;
position: relative; position: relative;
border: var(--grey-dark) 1px solid; border: var(--grey-dark) 1px solid;
max-width: 256px;
} }
.adjusted { .adjusted {

183
packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
View File

@ -1,5 +1,6 @@
<script> <script>
import { store } from "builderStore" import { store } from "builderStore"
import { Button } from "@budibase/bbui"
import Modal from "../../common/Modal.svelte" import Modal from "../../common/Modal.svelte"
import HandlerSelector from "./HandlerSelector.svelte" import HandlerSelector from "./HandlerSelector.svelte"
import IconButton from "../../common/IconButton.svelte" import IconButton from "../../common/IconButton.svelte"
@ -8,12 +9,12 @@
import Select from "../../common/Select.svelte" import Select from "../../common/Select.svelte"
import Input from "../../common/Input.svelte" import Input from "../../common/Input.svelte"
import getIcon from "../../common/icon" import getIcon from "../../common/icon"
import { CloseIcon } from "components/common/Icons/"
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 eventOptions = []
export let open
export let onClose export let onClose
let eventType = "" let eventType = ""
@ -62,105 +63,111 @@
} }
</script> </script>
<Modal bind:isOpen={open} onClosed={closeModal}> <div class="container">
<h2> <div class="body">
{eventData.name ? `${eventData.name} Event` : 'Create a New Component Event'} <div class="heading">
</h2> <h3>
<a href="https://docs.budibase.com/" target="_blank"> {eventData.name ? `${eventData.name} Event` : 'Create a New Component Event'}
Click here to learn more about component events </h3>
</a> </div>
<div class="event-options">
<div class="section">
<h4>Event Type</h4>
<Select bind:value={eventType}>
{#each eventOptions as option}
<option value={option.name}>{option.name}</option>
{/each}
</Select>
</div>
</div>
<div class="event-options"> <div class="section">
<div> <h4>Event Action(s)</h4>
<header> <HandlerSelector
<h5>Event Type</h5> newHandler
{@html getIcon('info', 20)} onChanged={updateDraftEventHandler}
</header> onCreate={() => {
<Select bind:value={eventType}> createNewEventHandler(draftEventHandler)
{#each eventOptions as option} draftEventHandler = { parameters: [] }
<option value={option.name}>{option.name}</option> }}
{/each} handler={draftEventHandler} />
</Select> </div>
{#if eventData}
{#each eventData.handlers as handler, index}
<HandlerSelector
{index}
onChanged={updateEventHandler}
onRemoved={() => deleteEventHandler(index)}
{handler} />
{/each}
{/if}
</div>
<div class="footer">
{#if eventData.name}
<Button
outline
on:click={deleteEvent}
disabled={eventData.handlers.length === 0}>
Delete
</Button>
{/if}
<div class="save">
<Button
primary
on:click={saveEventData}
disabled={eventData.handlers.length === 0}>
Save
</Button>
</div> </div>
</div> </div>
<div class="close-button" on:click={closeModal}>
<header> <CloseIcon />
<h5>Event Action(s)</h5>
{@html getIcon('info', 20)}
</header>
<HandlerSelector
newHandler
onChanged={updateDraftEventHandler}
onCreate={() => {
createNewEventHandler(draftEventHandler)
draftEventHandler = { parameters: [] }
}}
handler={draftEventHandler} />
{#if eventData}
{#each eventData.handlers as handler, index}
<HandlerSelector
{index}
onChanged={updateEventHandler}
onRemoved={() => deleteEventHandler(index)}
{handler} />
{/each}
{/if}
<div class="actions">
<ActionButton
alert
disabled={eventData.handlers.length === 0}
hidden={!eventData.name}
on:click={deleteEvent}>
Delete
</ActionButton>
<ActionButton
disabled={eventData.handlers.length === 0}
on:click={saveEventData}>
Save
</ActionButton>
</div> </div>
</Modal> </div>
<style> <style>
h2 { .container {
color: var(--primary100); position: relative;
font-size: 20px; }
font-weight: bold; .heading {
margin-bottom: 0; margin-bottom: 20px;
} }
h5 { .close-button {
color: rgba(22, 48, 87, 0.6); cursor: pointer;
font-size: 15px; position: absolute;
margin: 0; top: 20px;
right: 20px;
}
.close-button :global(svg) {
width: 24px;
height: 24px;
} }
.event-options { h4 {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
.actions,
header {
display: flex;
justify-content: space-between;
align-items: center;
}
.actions {
margin-top: auto;
}
header {
margin-top: 30px;
margin-bottom: 10px; margin-bottom: 10px;
} }
a { h3 {
color: rgba(22, 48, 87, 0.6); margin: 0;
font-size: 13px; font-size: 24px;
margin-top: 0; font-weight: bold;
}
.body {
padding: 40px;
display: grid;
grid-gap: 20px;
}
.footer {
display: flex;
justify-content: flex-end;
padding: 30px 40px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 50px;
background-color: var(--grey-light);
}
.save {
margin-left: 20px;
} }
</style> </style>

34
packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte
View File

@ -1,4 +1,5 @@
<script> <script>
import { getContext } from "svelte"
import { import {
keys, keys,
map, map,
@ -17,7 +18,6 @@
import PlusButton from "components/common/PlusButton.svelte" import PlusButton from "components/common/PlusButton.svelte"
import IconButton from "components/common/IconButton.svelte" import IconButton from "components/common/IconButton.svelte"
import EventEditorModal from "./EventEditorModal.svelte" import EventEditorModal from "./EventEditorModal.svelte"
import HandlerSelector from "./HandlerSelector.svelte"
import { PencilIcon } from "components/common/Icons" import { PencilIcon } from "components/common/Icons"
import { EVENT_TYPE_MEMBER_NAME } from "components/common/eventHandlers" import { EVENT_TYPE_MEMBER_NAME } from "components/common/eventHandlers"
@ -26,7 +26,6 @@
export let component export let component
let modalOpen = false
let events = [] let events = []
let selectedEvent = null let selectedEvent = null
@ -40,14 +39,28 @@
})) }))
} }
// Handle create app modal
const { open, close } = getContext("simple-modal")
const openModal = event => { const openModal = event => {
selectedEvent = event selectedEvent = event
modalOpen = true open(
} EventEditorModal,
{
const closeModal = () => { eventOptions: events,
selectedEvent = null event: selectedEvent,
modalOpen = false onClose: () => {
close()
selectedEvent = null
},
},
{
closeButton: false,
closeOnEsc: false,
styleContent: { padding: 0 },
closeOnOuterClick: true,
}
)
} }
</script> </script>
@ -71,11 +84,6 @@
{/each} {/each}
</form> </form>
</div> </div>
<EventEditorModal
open={modalOpen}
onClose={closeModal}
eventOptions={events}
event={selectedEvent} />
<style> <style>
h3 { h3 {

38
packages/builder/src/components/userInterface/EventsEditor/HandlerSelector.svelte
View File

@ -1,4 +1,5 @@
<script> <script>
import { Button } from "@budibase/bbui"
import IconButton from "components/common/IconButton.svelte" import IconButton from "components/common/IconButton.svelte"
import PlusButton from "components/common/PlusButton.svelte" import PlusButton from "components/common/PlusButton.svelte"
import Select from "components/common/Select.svelte" import Select from "components/common/Select.svelte"
@ -85,27 +86,28 @@
</Select> </Select>
</div> </div>
{#if parameters} {#if parameters}
<br />
{#each parameters as parameter, idx} {#each parameters as parameter, idx}
<StateBindingCascader onChange={onParameterChanged(idx)} {parameter} /> <StateBindingCascader on:change={onParameterChanged(idx)} {parameter} />
{/each} {/each}
{/if} {/if}
</div>
<div class="event-action-button">
{#if parameters.length > 0} {#if parameters.length > 0}
{#if newHandler} <div class="button-container">
<PlusButton on:click={onCreate} /> {#if newHandler}
{:else} <Button primary thin on:click={onCreate}>Add Action</Button>
<IconButton icon="x" on:click={onRemoved} /> {:else}
{/if} <Button outline thin on:click={onRemoved}>Remove Action</Button>
{/if}
</div>
{/if} {/if}
</div> </div>
</div> </div>
<style> <style>
.type-selector-container { .type-selector-container {
display: flex; display: grid;
justify-content: space-between; grid-gap: 20px;
align-items: center; width: 100%;
background: rgba(223, 223, 223, 0.5); background: rgba(223, 223, 223, 0.5);
border: 1px solid #dfdfdf; border: 1px solid #dfdfdf;
margin-bottom: 18px; margin-bottom: 18px;
@ -122,17 +124,19 @@
.handler-controls { .handler-controls {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: 1fr;
grid-gap: 10px; grid-gap: 20px;
padding: 22px; padding: 22px;
} }
.event-action-button { .button-container {
margin-right: 20px; display: grid;
justify-items: end;
} }
span { span {
font-size: 13px; font-size: 18px;
margin-bottom: 5px; margin-bottom: 10px;
font-weight: 500;
} }
</style> </style>

71
packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte
View File

@ -1,8 +1,8 @@
<script> <script>
import { Input } from "@budibase/bbui"
import IconButton from "components/common/IconButton.svelte" import IconButton from "components/common/IconButton.svelte"
import PlusButton from "components/common/PlusButton.svelte" import PlusButton from "components/common/PlusButton.svelte"
import Select from "components/common/Select.svelte" import Select from "components/common/Select.svelte"
import Input from "components/common/Input.svelte"
import { find, map, keys, reduce, keyBy } from "lodash/fp" import { find, map, keys, reduce, keyBy } from "lodash/fp"
import { pipe } from "components/common/core" import { pipe } from "components/common/core"
import { EVENT_TYPE_MEMBER_NAME } from "components/common/eventHandlers" import { EVENT_TYPE_MEMBER_NAME } from "components/common/eventHandlers"
@ -10,64 +10,43 @@
import { ArrowDownIcon } from "components/common/Icons/" import { ArrowDownIcon } from "components/common/Icons/"
export let parameter export let parameter
export let onChange
let isOpen = false let isOpen = false
const capitalize = s => {
if (typeof s !== "string") return ""
return s.charAt(0).toUpperCase() + s.slice(1)
}
</script> </script>
<div class="handler-option"> <div class="handler-option">
<span>{parameter.name}</span> {#if parameter.name === 'workflow'}
<div class="handler-input"> <span>{parameter.name}</span>
{#if parameter.name === 'workflow'} {/if}
<select {#if parameter.name === 'workflow'}
class="budibase__input" <Select on:change bind:value={parameter.value}>
on:change={onChange} {#each $workflowStore.workflows.filter(wf => wf.live) as workflow}
bind:value={parameter.value}> <option value={workflow._id}>{workflow.name}</option>
{#each $workflowStore.workflows.filter(wf => wf.live) as workflow} {/each}
<option value={workflow._id}>{workflow.name}</option> </Select>
{/each} {:else}
</select> <Input
{:else} name={parameter.name}
<Input onChange={onChange} value={parameter.value} /> label={capitalize(parameter.name)}
<button on:click={() => (isOpen = !isOpen)}> on:change
<div class="icon" style={`transform: rotate(${isOpen ? 0 : 90}deg);`}> value={parameter.value} />
<ArrowDownIcon size={36} /> {/if}
</div>
</button>
{/if}
</div>
</div> </div>
<style> <style>
button {
cursor: pointer;
outline: none;
border: none;
border-radius: 5px;
background: rgba(249, 249, 249, 1);
font-size: 1.6rem;
font-weight: 700;
color: rgba(22, 48, 87, 1);
margin-left: 5px;
}
.icon {
width: 24px;
}
.handler-option { .handler-option {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.handler-input {
position: relative;
display: flex;
}
span { span {
font-size: 13px; font-size: 18px;
margin-bottom: 5px; margin-bottom: 10px;
font-weight: 500;
} }
</style> </style>