Merge branch 'master' of https://github.com/Budibase/budibase into property-panel/screen-page-testing
This commit is contained in:
Conor_Mack
commit
d7734fc0a4
|
|
@ -0,0 +1,44 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 24.1.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 115 40" style="enable-background:new 0 0 115 40;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#393C44;}
|
||||
.st1{fill:#FFFFFF;}
|
||||
</style>
|
||||
<path class="st0" d="M111.16,40H3.91c-2.15,0-3.89-1.74-3.89-3.89V4.04c0-2.15,1.74-3.89,3.89-3.89h107.25
|
||||
c2.15,0,3.89,1.74,3.89,3.89v32.07C115.05,38.26,113.31,40,111.16,40z"/>
|
||||
<path class="st1" d="M10.37,10.03v8.57c0.93-1.26,2.33-1.67,3.61-1.67c1.58,0,3.01,0.59,4.02,1.54c1.12,1.05,1.82,2.62,1.82,4.53
|
||||
c0,1.78-0.62,3.42-1.82,4.61c-1.01,1.03-2.26,1.57-3.97,1.57c-2.05,0-3.09-0.95-3.66-1.78v1.39H6.63V10.03H10.37z M10.97,20.98
|
||||
c-0.44,0.46-0.82,1.13-0.82,2.11c0,0.95,0.41,1.64,0.85,2.05c0.59,0.57,1.41,0.85,2.11,0.85c0.64,0,1.36-0.26,1.93-0.8
|
||||
c0.54-0.51,0.9-1.26,0.9-2.11c0-0.92-0.36-1.67-0.9-2.18c-0.59-0.57-1.23-0.77-1.98-0.77C12.26,20.14,11.56,20.37,10.97,20.98z"/>
|
||||
<path class="st1" d="M25.08,17.35v6.32c0,0.51,0.05,1.31,0.64,1.85c0.26,0.23,0.72,0.54,1.54,0.54c0.69,0,1.23-0.23,1.56-0.54
|
||||
c0.54-0.51,0.62-1.28,0.62-1.85v-6.32h3.74v6.68c0,1.31-0.13,2.54-1.28,3.67c-1.31,1.28-3.23,1.49-4.59,1.49
|
||||
c-1.41,0-3.31-0.21-4.62-1.49c-1.05-1.03-1.26-2.18-1.26-3.44v-6.91H25.08z"/>
|
||||
<path class="st1" d="M47.88,28.79h-3.74V27.4c-0.57,0.82-1.61,1.78-3.66,1.78c-1.71,0-2.96-0.54-3.97-1.57
|
||||
c-1.19-1.18-1.82-2.83-1.82-4.61c0-1.9,0.7-3.47,1.82-4.53c1.01-0.95,2.44-1.54,4.02-1.54c1.27,0,2.67,0.41,3.61,1.67v-8.57h3.74
|
||||
V28.79z M39.53,20.91c-0.54,0.51-0.9,1.26-0.9,2.18c0,0.85,0.36,1.59,0.9,2.11c0.57,0.54,1.28,0.8,1.93,0.8
|
||||
c0.69,0,1.52-0.28,2.11-0.85c0.44-0.41,0.85-1.1,0.85-2.05c0-0.98-0.39-1.64-0.82-2.11c-0.59-0.62-1.28-0.85-2.08-0.85
|
||||
C40.77,20.14,40.12,20.34,39.53,20.91z"/>
|
||||
<path class="st1" d="M52.32,10.3c1.21,0,2.16,0.95,2.16,2.16c0,1.21-0.95,2.16-2.16,2.16c-1.21,0-2.16-0.95-2.16-2.16
|
||||
C50.17,11.25,51.12,10.3,52.32,10.3z M54.19,17.35v11.44h-3.74V17.35H54.19z"/>
|
||||
<path class="st1" d="M60.49,10.03v8.57c0.93-1.26,2.33-1.67,3.61-1.67c1.58,0,3.01,0.59,4.02,1.54c1.12,1.05,1.82,2.62,1.82,4.53
|
||||
c0,1.78-0.62,3.42-1.82,4.61c-1.01,1.03-2.26,1.57-3.97,1.57c-2.05,0-3.09-0.95-3.66-1.78v1.39h-3.74V10.03H60.49z M61.06,20.98
|
||||
c-0.44,0.46-0.82,1.13-0.82,2.11c0,0.95,0.41,1.64,0.85,2.05c0.59,0.57,1.41,0.85,2.11,0.85c0.64,0,1.36-0.26,1.93-0.8
|
||||
c0.54-0.51,0.9-1.26,0.9-2.11c0-0.92-0.36-1.67-0.9-2.18c-0.59-0.57-1.23-0.77-1.98-0.77C62.34,20.14,61.65,20.37,61.06,20.98z"/>
|
||||
<path class="st1" d="M80.26,17.35H84v11.44h-3.74v-1.39c-1.01,1.54-2.46,1.77-3.42,1.77c-1.66,0-3.06-0.41-4.33-1.74
|
||||
c-1.22-1.28-1.69-2.77-1.69-4.28c0-1.92,0.73-3.57,1.79-4.62c1.01-1,2.41-1.56,4.02-1.56c0.99,0,2.57,0.23,3.63,1.67V17.35z
|
||||
M75.57,20.96c-0.39,0.39-0.85,1.05-0.85,2.08c0,1.03,0.44,1.7,0.77,2.05c0.51,0.54,1.31,0.9,2.18,0.9c0.74,0,1.44-0.31,1.93-0.8
|
||||
c0.49-0.46,0.9-1.18,0.9-2.16c0-0.82-0.31-1.59-0.85-2.11c-0.57-0.54-1.39-0.8-2.05-0.8C76.8,20.14,76.06,20.47,75.57,20.96z"/>
|
||||
<path class="st1" d="M93.21,20.26c-0.57-0.33-1.31-0.64-2.03-0.64c-0.39,0-0.82,0.1-1.05,0.33c-0.13,0.13-0.23,0.33-0.23,0.51
|
||||
c0,0.26,0.18,0.41,0.36,0.51c0.26,0.15,0.64,0.23,1.1,0.39l0.98,0.31c0.64,0.21,1.31,0.46,1.9,1c0.67,0.62,0.9,1.31,0.9,2.18
|
||||
c0,1.52-0.67,2.49-1.18,3.01c-1.13,1.13-2.52,1.31-3.72,1.31c-1.54,0-3.21-0.33-4.7-1.64l1.57-2.49c0.36,0.31,0.87,0.67,1.26,0.85
|
||||
c0.51,0.26,1.05,0.36,1.54,0.36c0.23,0,0.82,0,1.16-0.26c0.23-0.18,0.39-0.46,0.39-0.74c0-0.21-0.08-0.46-0.41-0.67
|
||||
c-0.26-0.15-0.59-0.26-1.13-0.41l-0.92-0.28c-0.67-0.21-1.36-0.57-1.85-1.05c-0.54-0.57-0.82-1.21-0.82-2.08
|
||||
c0-1.1,0.44-2.03,1.1-2.65c1.03-0.95,2.41-1.16,3.47-1.16c1.7,0,2.88,0.44,3.8,0.98L93.21,20.26z"/>
|
||||
<path class="st1" d="M108.43,23.73h-8.55c0,0.62,0.23,1.44,0.69,1.95c0.57,0.62,1.34,0.72,1.9,0.72c0.54,0,1.1-0.1,1.49-0.33
|
||||
c0.05-0.03,0.49-0.31,0.8-0.95l3.49,0.36c-0.51,1.62-1.54,2.47-2.21,2.88c-1.1,0.67-2.34,0.85-3.62,0.85
|
||||
c-1.72,0-3.24-0.31-4.57-1.64c-1-1-1.72-2.52-1.72-4.42c0-1.64,0.59-3.34,1.75-4.52c1.39-1.39,3.11-1.64,4.39-1.64
|
||||
c1.28,0,3.13,0.23,4.55,1.72c1.36,1.44,1.62,3.24,1.62,4.65V23.73z M105.03,21.48c-0.03-0.1-0.21-0.82-0.74-1.34
|
||||
c-0.41-0.39-1-0.64-1.75-0.64c-0.95,0-1.52,0.39-1.87,0.74c-0.28,0.31-0.54,0.72-0.64,1.23H105.03z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 201 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
|
|
@ -76,15 +76,14 @@
|
|||
}
|
||||
|
||||
.budibase__input {
|
||||
width: 100%;
|
||||
max-width: 250px;
|
||||
height: 35px;
|
||||
width: 220px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid var(--grey-dark);
|
||||
text-align: left;
|
||||
color: var(--ink);
|
||||
font-size: 16px;
|
||||
padding-left: 5px;
|
||||
font-size: 14px;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.uk-text-right {
|
||||
|
|
|
|||
|
|
@ -22,7 +22,6 @@
|
|||
font-size: 14px;
|
||||
position: relative;
|
||||
border: var(--grey-dark) 1px solid;
|
||||
max-width: 256px;
|
||||
}
|
||||
|
||||
.adjusted {
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
<h3 class="app-title">{name}</h3>
|
||||
<p class="app-desc">{description}</p>
|
||||
<div class="card-footer">
|
||||
<div class="modified-date">Last Edited - 25th May 2020</div>
|
||||
<a href={`/_builder/${_id}`} class="app-button">Open Web App</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -18,7 +17,7 @@
|
|||
<style>
|
||||
.apps-card {
|
||||
background-color: var(--white);
|
||||
padding: 20px;
|
||||
padding: 20px 20px 30px 20px;
|
||||
max-width: 400px;
|
||||
max-height: 150px;
|
||||
border-radius: 5px;
|
||||
|
|
@ -48,14 +47,13 @@
|
|||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.modified-date {
|
||||
font-size: 14px;
|
||||
color: var(--ink-light);
|
||||
}
|
||||
|
||||
.app-button {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
background-color: var(--white);
|
||||
color: var(--ink);
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
padding: 12px 20px;
|
||||
border-radius: 5px;
|
||||
border: 1px var(--grey) solid;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@
|
|||
<div class="inner">
|
||||
<div>
|
||||
<div>
|
||||
<div class="app-section-title">Your Web Apps</div>
|
||||
<div class="apps">
|
||||
{#each apps as app}
|
||||
<AppCard {...app} />
|
||||
|
|
@ -26,18 +25,12 @@
|
|||
<style>
|
||||
.apps {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 400px);
|
||||
grid-gap: 40px 85px;
|
||||
grid-template-columns: repeat(auto-fill, 380px);
|
||||
grid-gap: 20px 40px;
|
||||
justify-content: start;
|
||||
}
|
||||
.root {
|
||||
margin: 40px 80px;
|
||||
}
|
||||
|
||||
.app-section-title {
|
||||
font-size: 20px;
|
||||
color: var(--ink);
|
||||
font-weight: 700;
|
||||
margin-bottom: 20px;
|
||||
.root {
|
||||
margin: 20px 80px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<script>
|
||||
import { store } from "builderStore"
|
||||
import { Button } from "@budibase/bbui"
|
||||
import Modal from "../../common/Modal.svelte"
|
||||
import HandlerSelector from "./HandlerSelector.svelte"
|
||||
import IconButton from "../../common/IconButton.svelte"
|
||||
|
|
@ -8,12 +9,12 @@
|
|||
import Select from "../../common/Select.svelte"
|
||||
import Input from "../../common/Input.svelte"
|
||||
import getIcon from "../../common/icon"
|
||||
import { CloseIcon } from "components/common/Icons/"
|
||||
|
||||
import { EVENT_TYPE_MEMBER_NAME } from "../../common/eventHandlers"
|
||||
|
||||
export let event
|
||||
export let eventOptions = []
|
||||
export let open
|
||||
export let onClose
|
||||
|
||||
let eventType = ""
|
||||
|
|
@ -62,105 +63,111 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<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="container">
|
||||
<div class="body">
|
||||
<div class="heading">
|
||||
<h3>
|
||||
{eventData.name ? `${eventData.name} Event` : 'Create a New Component Event'}
|
||||
</h3>
|
||||
</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>
|
||||
<header>
|
||||
<h5>Event Type</h5>
|
||||
{@html getIcon('info', 20)}
|
||||
</header>
|
||||
<Select bind:value={eventType}>
|
||||
{#each eventOptions as option}
|
||||
<option value={option.name}>{option.name}</option>
|
||||
{/each}
|
||||
</Select>
|
||||
<div class="section">
|
||||
<h4>Event Action(s)</h4>
|
||||
<HandlerSelector
|
||||
newHandler
|
||||
onChanged={updateDraftEventHandler}
|
||||
onCreate={() => {
|
||||
createNewEventHandler(draftEventHandler)
|
||||
draftEventHandler = { parameters: [] }
|
||||
}}
|
||||
handler={draftEventHandler} />
|
||||
</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>
|
||||
|
||||
<header>
|
||||
<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 class="close-button" on:click={closeModal}>
|
||||
<CloseIcon />
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
h2 {
|
||||
color: var(--primary100);
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0;
|
||||
.container {
|
||||
position: relative;
|
||||
}
|
||||
.heading {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
color: rgba(22, 48, 87, 0.6);
|
||||
font-size: 15px;
|
||||
margin: 0;
|
||||
.close-button {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
.close-button :global(svg) {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.event-options {
|
||||
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;
|
||||
h4 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgba(22, 48, 87, 0.6);
|
||||
font-size: 13px;
|
||||
margin-top: 0;
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<script>
|
||||
import { getContext } from "svelte"
|
||||
import {
|
||||
keys,
|
||||
map,
|
||||
|
|
@ -17,7 +18,6 @@
|
|||
import PlusButton from "components/common/PlusButton.svelte"
|
||||
import IconButton from "components/common/IconButton.svelte"
|
||||
import EventEditorModal from "./EventEditorModal.svelte"
|
||||
import HandlerSelector from "./HandlerSelector.svelte"
|
||||
|
||||
import { PencilIcon } from "components/common/Icons"
|
||||
import { EVENT_TYPE_MEMBER_NAME } from "components/common/eventHandlers"
|
||||
|
|
@ -26,7 +26,6 @@
|
|||
|
||||
export let component
|
||||
|
||||
let modalOpen = false
|
||||
let events = []
|
||||
let selectedEvent = null
|
||||
|
||||
|
|
@ -40,21 +39,35 @@
|
|||
}))
|
||||
}
|
||||
|
||||
// Handle create app modal
|
||||
const { open, close } = getContext("simple-modal")
|
||||
|
||||
const openModal = event => {
|
||||
selectedEvent = event
|
||||
modalOpen = true
|
||||
}
|
||||
|
||||
const closeModal = () => {
|
||||
selectedEvent = null
|
||||
modalOpen = false
|
||||
open(
|
||||
EventEditorModal,
|
||||
{
|
||||
eventOptions: events,
|
||||
event: selectedEvent,
|
||||
onClose: () => {
|
||||
close()
|
||||
selectedEvent = null
|
||||
},
|
||||
},
|
||||
{
|
||||
closeButton: false,
|
||||
closeOnEsc: false,
|
||||
styleContent: { padding: 0 },
|
||||
closeOnOuterClick: true,
|
||||
}
|
||||
)
|
||||
}
|
||||
</script>
|
||||
|
||||
<header>
|
||||
<h3>Events</h3>
|
||||
<PlusButton on:click={() => openModal()} />
|
||||
</header>
|
||||
<button class="newevent" on:click={() => openModal()}>
|
||||
<i class="icon ri-add-circle-fill" />
|
||||
Create New Event
|
||||
</button>
|
||||
|
||||
<div class="root">
|
||||
<form on:submit|preventDefault class="uk-form-stacked form-root">
|
||||
|
|
@ -71,26 +84,40 @@
|
|||
{/each}
|
||||
</form>
|
||||
</div>
|
||||
<EventEditorModal
|
||||
open={modalOpen}
|
||||
onClose={closeModal}
|
||||
eventOptions={events}
|
||||
event={selectedEvent} />
|
||||
|
||||
<style>
|
||||
h3 {
|
||||
text-transform: uppercase;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #8997ab;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.root {
|
||||
font-size: 10pt;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.newevent {
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--grey-dark);
|
||||
border-radius: 3px;
|
||||
width: 100%;
|
||||
padding: 8px 16px;
|
||||
margin: 0px 0px 12px 0px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: white;
|
||||
color: var(--ink);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: all 2ms;
|
||||
}
|
||||
|
||||
.newevent:hover {
|
||||
background: var(--grey-light);
|
||||
}
|
||||
|
||||
.icon {
|
||||
color: var(--ink);
|
||||
font-size: 16px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.form-root {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<script>
|
||||
import { Button } from "@budibase/bbui"
|
||||
import IconButton from "components/common/IconButton.svelte"
|
||||
import PlusButton from "components/common/PlusButton.svelte"
|
||||
import Select from "components/common/Select.svelte"
|
||||
|
|
@ -85,27 +86,28 @@
|
|||
</Select>
|
||||
</div>
|
||||
{#if parameters}
|
||||
<br />
|
||||
{#each parameters as parameter, idx}
|
||||
<StateBindingCascader onChange={onParameterChanged(idx)} {parameter} />
|
||||
<StateBindingCascader on:change={onParameterChanged(idx)} {parameter} />
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
<div class="event-action-button">
|
||||
{#if parameters.length > 0}
|
||||
{#if newHandler}
|
||||
<PlusButton on:click={onCreate} />
|
||||
{:else}
|
||||
<IconButton icon="x" on:click={onRemoved} />
|
||||
{/if}
|
||||
<div class="button-container">
|
||||
{#if newHandler}
|
||||
<Button primary thin on:click={onCreate}>Add Action</Button>
|
||||
{:else}
|
||||
<Button outline thin on:click={onRemoved}>Remove Action</Button>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.type-selector-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
display: grid;
|
||||
grid-gap: 20px;
|
||||
width: 100%;
|
||||
background: rgba(223, 223, 223, 0.5);
|
||||
border: 1px solid #dfdfdf;
|
||||
margin-bottom: 18px;
|
||||
|
|
@ -122,17 +124,19 @@
|
|||
|
||||
.handler-controls {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-gap: 10px;
|
||||
grid-template-columns: 1fr;
|
||||
grid-gap: 20px;
|
||||
padding: 22px;
|
||||
}
|
||||
|
||||
.event-action-button {
|
||||
margin-right: 20px;
|
||||
.button-container {
|
||||
display: grid;
|
||||
justify-items: end;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 13px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<script>
|
||||
import { Input } from "@budibase/bbui"
|
||||
import IconButton from "components/common/IconButton.svelte"
|
||||
import PlusButton from "components/common/PlusButton.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 { pipe } from "components/common/core"
|
||||
import { EVENT_TYPE_MEMBER_NAME } from "components/common/eventHandlers"
|
||||
|
|
@ -10,64 +10,43 @@
|
|||
import { ArrowDownIcon } from "components/common/Icons/"
|
||||
|
||||
export let parameter
|
||||
export let onChange
|
||||
|
||||
let isOpen = false
|
||||
|
||||
const capitalize = s => {
|
||||
if (typeof s !== "string") return ""
|
||||
return s.charAt(0).toUpperCase() + s.slice(1)
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="handler-option">
|
||||
<span>{parameter.name}</span>
|
||||
<div class="handler-input">
|
||||
{#if parameter.name === 'workflow'}
|
||||
<select
|
||||
class="budibase__input"
|
||||
on:change={onChange}
|
||||
bind:value={parameter.value}>
|
||||
{#each $workflowStore.workflows.filter(wf => wf.live) as workflow}
|
||||
<option value={workflow._id}>{workflow.name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
{:else}
|
||||
<Input {onChange} value={parameter.value} />
|
||||
<button on:click={() => (isOpen = !isOpen)}>
|
||||
<div class="icon" style={`transform: rotate(${isOpen ? 0 : 90}deg);`}>
|
||||
<ArrowDownIcon size={36} />
|
||||
</div>
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
{#if parameter.name === 'workflow'}
|
||||
<span>{parameter.name}</span>
|
||||
{/if}
|
||||
{#if parameter.name === 'workflow'}
|
||||
<Select on:change bind:value={parameter.value}>
|
||||
{#each $workflowStore.workflows.filter(wf => wf.live) as workflow}
|
||||
<option value={workflow._id}>{workflow.name}</option>
|
||||
{/each}
|
||||
</Select>
|
||||
{:else}
|
||||
<Input
|
||||
name={parameter.name}
|
||||
label={capitalize(parameter.name)}
|
||||
on:change
|
||||
value={parameter.value} />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.handler-input {
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 13px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -299,7 +299,19 @@ export const typography = [
|
|||
},
|
||||
],
|
||||
},
|
||||
{ label: "style", key: "font-style", control: Input },
|
||||
{
|
||||
label: "Decoration",
|
||||
key: "text-decoration-line",
|
||||
control: OptionSelect,
|
||||
defaultValue: "Underline",
|
||||
options: [
|
||||
{ label: "Underline", value: "underline" },
|
||||
{ label: "None", value: "none" },
|
||||
{ label: "Overline", value: "overline" },
|
||||
{ label: "Line-through", value: "line-through" },
|
||||
{ label: "Under Over", value: "underline overline" },
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
export const background = [
|
||||
|
|
@ -405,7 +417,7 @@ export const transitions = [
|
|||
},
|
||||
{
|
||||
label: "Duration",
|
||||
key: "transition-timing-function",
|
||||
key: "transition-duration",
|
||||
control: Input,
|
||||
width: "48px",
|
||||
textAlign: "center",
|
||||
|
|
@ -413,7 +425,7 @@ export const transitions = [
|
|||
},
|
||||
{
|
||||
label: "Ease",
|
||||
key: "transition-ease",
|
||||
key: "transition-timing-function:",
|
||||
control: OptionSelect,
|
||||
options: ["linear", "ease", "ease-in", "ease-out", "ease-in-out"],
|
||||
},
|
||||
|
|
|
|||
|
|
@ -343,7 +343,7 @@ export default {
|
|||
children: [],
|
||||
},
|
||||
{
|
||||
name: "List",
|
||||
name: "Data List",
|
||||
_component: "@budibase/standard-components/datalist",
|
||||
description: "Shiny list",
|
||||
icon: "ri-file-list-fill",
|
||||
|
|
@ -353,6 +353,17 @@ export default {
|
|||
},
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
name: "List",
|
||||
_component: "@budibase/standard-components/list",
|
||||
description: "Shiny list",
|
||||
icon: "ri-file-list-fill",
|
||||
properties: {
|
||||
design: { ...all },
|
||||
settings: [{ label: "Model", key: "model", control: ModelSelect }],
|
||||
},
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
name: "Map",
|
||||
_component: "@budibase/standard-components/datamap",
|
||||
|
|
|
|||
|
|
@ -45,6 +45,15 @@
|
|||
function testWorkflow() {
|
||||
testResult = "PASSED"
|
||||
}
|
||||
|
||||
async function saveWorkflow() {
|
||||
const workflow = $workflowStore.currentWorkflow.workflow
|
||||
await workflowStore.actions.save({
|
||||
instanceId: $backendUiStore.selectedDatabase._id,
|
||||
workflow,
|
||||
})
|
||||
notifier.success(`Workflow ${workflow.name} saved.`)
|
||||
}
|
||||
</script>
|
||||
|
||||
<section>
|
||||
|
|
@ -60,7 +69,7 @@
|
|||
</span>
|
||||
{#if !workflowBlock}
|
||||
<span
|
||||
class="hoverable"
|
||||
class="test-tab"
|
||||
class:selected={selectedTab === 'TEST'}
|
||||
on:click={() => (selectedTab = 'TEST')}>
|
||||
Test
|
||||
|
|
@ -86,36 +95,47 @@
|
|||
{#if selectedTab === 'SETUP'}
|
||||
{#if workflowBlock}
|
||||
<WorkflowBlockSetup {workflowBlock} />
|
||||
<button class="workflow-button hoverable" on:click={deleteWorkflowBlock}>
|
||||
Delete Block
|
||||
</button>
|
||||
<div class="buttons">
|
||||
<button class="workflow-button hoverable" on:click={saveWorkflow}>
|
||||
Save Workflow
|
||||
</button>
|
||||
<button
|
||||
class="delete-workflow-button hoverable"
|
||||
on:click={deleteWorkflowBlock}>
|
||||
Delete Block
|
||||
</button>
|
||||
</div>
|
||||
{:else if $workflowStore.currentWorkflow}
|
||||
<div class="panel-body">
|
||||
<label class="uk-form-label">Workflow: {workflow.name}</label>
|
||||
<div class="uk-margin config-item">
|
||||
<label class="uk-form-label">Name</label>
|
||||
<div class="uk-form-controls">
|
||||
<input
|
||||
type="text"
|
||||
class="budibase__input"
|
||||
bind:value={workflow.name} />
|
||||
<div class="panel">
|
||||
<div class="panel-body">
|
||||
<div class="block-label">Workflow: {workflow.name}</div>
|
||||
<div class="config-item">
|
||||
<label>Name</label>
|
||||
<div class="form">
|
||||
<input
|
||||
type="text"
|
||||
class="budibase_input"
|
||||
bind:value={workflow.name} />
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-item">
|
||||
<label class="uk-form-label">User Access</label>
|
||||
<div class="access-levels">
|
||||
{#each ACCESS_LEVELS as { name, key }}
|
||||
<span class="access-level">
|
||||
<label>{name}</label>
|
||||
<input class="uk-checkbox" type="checkbox" />
|
||||
</span>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-margin config-item">
|
||||
<label class="uk-form-label">User Access</label>
|
||||
<div class="access-levels">
|
||||
{#each ACCESS_LEVELS as { name, key }}
|
||||
<span class="access-level">
|
||||
<label>{name}</label>
|
||||
<input class="uk-checkbox" type="checkbox" />
|
||||
</span>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<button class="delete-workflow-button" on:click={deleteWorkflow}>
|
||||
Delete Workflow
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="workflow-button hoverable" on:click={deleteWorkflow}>
|
||||
Delete Workflow
|
||||
</button>
|
||||
{/if}
|
||||
{/if}
|
||||
</section>
|
||||
|
|
@ -125,53 +145,119 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
header {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 18px;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.selected {
|
||||
color: var(--font);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.block-label {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: var(--ink);
|
||||
margin: 0px 0px 16px 0px;
|
||||
}
|
||||
|
||||
.config-item {
|
||||
padding: 20px;
|
||||
margin: 0px 0px 4px 0px;
|
||||
padding: 12px;
|
||||
background: var(--light-grey);
|
||||
}
|
||||
|
||||
.budibase_input {
|
||||
height: 35px;
|
||||
width: 220px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid var(--grey-dark);
|
||||
text-align: left;
|
||||
color: var(--ink);
|
||||
font-size: 14px;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
header > span {
|
||||
color: var(--dark-grey);
|
||||
color: var(--ink-lighter);
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.form {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: var(--font);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.buttons {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
.delete-workflow-button {
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--red);
|
||||
border-radius: 3px;
|
||||
width: 260px;
|
||||
padding: 8px 16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: var(--white);
|
||||
color: var(--red);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: all 2ms;
|
||||
align-self: flex-end;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.delete-workflow-button:hover {
|
||||
background: var(--red);
|
||||
border: 1px solid var(--red);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.workflow-button {
|
||||
font-family: Roboto;
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--grey-dark);
|
||||
border-radius: 3px;
|
||||
width: 100%;
|
||||
border: solid 1px #f2f2f2;
|
||||
border-radius: 2px;
|
||||
background: var(--white);
|
||||
height: 32px;
|
||||
font-size: 12px;
|
||||
padding: 8px 16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: white;
|
||||
color: var(--ink);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: all 2ms;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.workflow-button:hover {
|
||||
background: var(--light-grey);
|
||||
background: var(--grey-light);
|
||||
}
|
||||
|
||||
.access-level {
|
||||
|
|
@ -183,14 +269,15 @@
|
|||
|
||||
.access-level label {
|
||||
font-weight: normal;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.test-result {
|
||||
border: none;
|
||||
width: 100%;
|
||||
border-radius: 2px;
|
||||
border-radius: 3px;
|
||||
height: 32px;
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--white);
|
||||
text-align: center;
|
||||
|
|
@ -202,6 +289,6 @@
|
|||
}
|
||||
|
||||
.failed {
|
||||
background: var(--coral);
|
||||
background: var(--red);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -15,12 +15,12 @@
|
|||
|
||||
<label class="uk-form-label">{workflowBlock.type}: {workflowBlock.name}</label>
|
||||
{#each workflowParams as [parameter, type]}
|
||||
<div class="uk-margin block-field">
|
||||
<div class="block-field">
|
||||
<label class="uk-form-label">{parameter}</label>
|
||||
<div class="uk-form-controls">
|
||||
{#if Array.isArray(type)}
|
||||
<select
|
||||
class="budibase__input"
|
||||
class="budibase_input"
|
||||
bind:value={workflowBlock.args[parameter]}>
|
||||
{#each type as option}
|
||||
<option value={option}>{option}</option>
|
||||
|
|
@ -67,8 +67,20 @@
|
|||
<style>
|
||||
.block-field {
|
||||
border-radius: 3px;
|
||||
background: var(--light-grey);
|
||||
padding: 20px;
|
||||
background: var(--grey-light);
|
||||
padding: 12px;
|
||||
margin: 0px 0px 4px 0px;
|
||||
}
|
||||
|
||||
.budibase_input {
|
||||
height: 35px;
|
||||
width: 220px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid var(--grey-dark);
|
||||
text-align: left;
|
||||
color: var(--ink);
|
||||
font-size: 14px;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
label {
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
<i class="ri-information-line" />
|
||||
Learn about workflows
|
||||
</a>
|
||||
<ActionButton alert on:click={onClosed}>Cancel</ActionButton>
|
||||
<ActionButton secondary on:click={onClosed}>Cancel</ActionButton>
|
||||
<ActionButton disabled={!valid} on:click={createWorkflow}>Save</ActionButton>
|
||||
</footer>
|
||||
|
||||
|
|
|
|||
|
|
@ -25,19 +25,11 @@
|
|||
onMount(() => {
|
||||
workflowStore.actions.fetch($backendUiStore.selectedDatabase._id)
|
||||
})
|
||||
|
||||
async function saveWorkflow() {
|
||||
const workflow = $workflowStore.currentWorkflow.workflow
|
||||
await workflowStore.actions.save({
|
||||
instanceId: $backendUiStore.selectedDatabase._id,
|
||||
workflow,
|
||||
})
|
||||
notifier.success(`Workflow ${workflow.name} saved.`)
|
||||
}
|
||||
</script>
|
||||
|
||||
<section>
|
||||
<button class="new-workflow-button hoverable" on:click={newWorkflow}>
|
||||
<i class="icon ri-add-circle-fill" />
|
||||
Create New Workflow
|
||||
</button>
|
||||
<ul>
|
||||
|
|
@ -51,11 +43,6 @@
|
|||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{#if $workflowStore.currentWorkflow}
|
||||
<button class="new-workflow-button hoverable" on:click={saveWorkflow}>
|
||||
Save Workflow
|
||||
</button>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<style>
|
||||
|
|
@ -87,12 +74,13 @@
|
|||
}
|
||||
|
||||
.workflow-item {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 3px;
|
||||
height: 32px;
|
||||
font-weight: 500;
|
||||
padding-left: 12px;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
margin-bottom: 4px;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.workflow-item i {
|
||||
|
|
@ -102,25 +90,36 @@
|
|||
|
||||
.workflow-item:hover {
|
||||
cursor: pointer;
|
||||
background: var(--secondary);
|
||||
background: var(--grey-light);
|
||||
}
|
||||
|
||||
.workflow-item.selected {
|
||||
background: var(--secondary);
|
||||
background: var(--blue-light);
|
||||
}
|
||||
|
||||
.new-workflow-button {
|
||||
font-family: Roboto;
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--grey-dark);
|
||||
border-radius: 3px;
|
||||
width: 100%;
|
||||
border: solid 1px #f2f2f2;
|
||||
border-radius: 2px;
|
||||
background: var(--white);
|
||||
height: 32px;
|
||||
font-size: 12px;
|
||||
padding: 8px 16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: white;
|
||||
color: var(--ink);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: all 2ms;
|
||||
}
|
||||
|
||||
.new-workflow-button:hover {
|
||||
background: var(--light-grey);
|
||||
background: var(--grey-light);
|
||||
}
|
||||
|
||||
.icon {
|
||||
color: var(--ink);
|
||||
font-size: 16px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -33,8 +33,9 @@
|
|||
|
||||
<style>
|
||||
header {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
background: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
|
@ -45,6 +46,10 @@
|
|||
}
|
||||
|
||||
span:not(.selected) {
|
||||
color: var(--dark-grey);
|
||||
color: var(--ink-lighter);
|
||||
}
|
||||
|
||||
span:not(.selected):hover {
|
||||
color: var(--ink);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,10 @@
|
|||
--grey-medium: #e8e8ef;
|
||||
--grey-dark: #E6E6E6;
|
||||
|
||||
--red: #E26D69;
|
||||
--red-light:#FFE6E6;
|
||||
--red-dark: #800400;
|
||||
|
||||
--primary100: #0055ff;
|
||||
--primary80: rgba(0, 85, 255, 0.8);
|
||||
--primary60: #rgba(0, 85, 255, 0.6);
|
||||
|
|
|
|||
|
|
@ -106,45 +106,6 @@
|
|||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.components-nav-page {
|
||||
font-size: 13px;
|
||||
color: var(--ink);
|
||||
padding-left: 20px;
|
||||
margin-top: 20px;
|
||||
font-weight: 600;
|
||||
opacity: 0.4;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.components-nav-header {
|
||||
font-size: 13px;
|
||||
color: var(--ink);
|
||||
margin-top: 20px;
|
||||
font-weight: 600;
|
||||
opacity: 0.4;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.nav-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.nav-items-container {
|
||||
padding: 1rem 0rem 0rem 0rem;
|
||||
}
|
||||
|
||||
.nav-group-header {
|
||||
display: flex;
|
||||
padding: 0px 20px 0px 20px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: bold;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.nav-group-header > div:nth-child(1) {
|
||||
padding: 0rem 0.5rem 0rem 0rem;
|
||||
vertical-align: bottom;
|
||||
|
|
|
|||
|
|
@ -5,13 +5,17 @@
|
|||
|
||||
<div class="root">
|
||||
<div class="nav">
|
||||
<WorkflowPanel />
|
||||
<div class="inner">
|
||||
<WorkflowPanel />
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<slot />
|
||||
</div>
|
||||
<div class="nav">
|
||||
<SetupPanel />
|
||||
<div class="inner">
|
||||
<SetupPanel />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -24,7 +28,7 @@
|
|||
.root {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
background: #fafafa;
|
||||
background: var(--grey-light);
|
||||
}
|
||||
|
||||
.content {
|
||||
|
|
@ -33,10 +37,13 @@
|
|||
}
|
||||
|
||||
.nav {
|
||||
padding: 20px;
|
||||
overflow: auto;
|
||||
width: 275px;
|
||||
border: 1px solid var(--medium-grey);
|
||||
width: 300px;
|
||||
border-right: 1px solid var(--grey);
|
||||
background: var(--white);
|
||||
}
|
||||
|
||||
.inner {
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
<div class="root">
|
||||
<div class="ui-nav">
|
||||
<div class="home-logo">
|
||||
<img src="/_builder/assets/bb-logo.svg" alt="Budibase icon" />
|
||||
<img src="/_builder/assets/budibase-logo.svg" alt="Budibase icon" />
|
||||
</div>
|
||||
|
||||
<div class="nav-section">
|
||||
|
|
|
|||
|
|
@ -44,20 +44,21 @@
|
|||
</script>
|
||||
|
||||
<div class="welcome">Welcome to Budibase</div>
|
||||
|
||||
<div class="banner">
|
||||
<img src="/_builder/assets/rocket.jpg" alt="rocket" />
|
||||
<div class="banner-content">
|
||||
<div class="banner-header">
|
||||
Every accomplishment starts with a decision to try.
|
||||
</div>
|
||||
<button class="banner-button" type="button" on:click={showCreateAppModal}>
|
||||
<i class="ri-add-circle-fill" />
|
||||
Create New Web App
|
||||
</button>
|
||||
</div>
|
||||
<div class="banner-image">
|
||||
<img src="/_builder/assets/banner-image.png" alt="Bannerimage" />
|
||||
Every accomplishment starts with a decision to try.
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-section-header">
|
||||
<div class="app-section-title">Your Web Apps</div>
|
||||
<button class="banner-button" type="button" on:click={showCreateAppModal}>
|
||||
<i class="ri-add-circle-fill" />
|
||||
Create New Web App
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#await promise}
|
||||
<div class="spinner-container">
|
||||
<Spinner />
|
||||
|
|
@ -70,53 +71,34 @@
|
|||
|
||||
<style>
|
||||
.welcome {
|
||||
margin: 60px 80px 0px 80px;
|
||||
font-size: 42px;
|
||||
color: var(--ink);
|
||||
font-weight: 900;
|
||||
margin: 40px 0px 0px 80px;
|
||||
}
|
||||
|
||||
.banner {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
color: white;
|
||||
margin: 20px 80px 40px 80px;
|
||||
background-image: linear-gradient(-45deg, #7f9ceb, #1d2f77);
|
||||
border-radius: 10px;
|
||||
max-height: 280px;
|
||||
}
|
||||
|
||||
.banner img {
|
||||
height: 250px;
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.banner-content {
|
||||
padding: 60px;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1800px) {
|
||||
.banner-content {
|
||||
padding: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.banner-header {
|
||||
position: absolute;
|
||||
font-size: 24px;
|
||||
color: var(--white);
|
||||
font-weight: 500;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1800px) {
|
||||
.banner-header {
|
||||
font-size: 36px;
|
||||
color: var(--white);
|
||||
font-weight: 500;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.banner-image {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.banner-image img {
|
||||
max-height: 400px;
|
||||
}
|
||||
|
||||
.spinner-container {
|
||||
|
|
@ -128,18 +110,22 @@
|
|||
}
|
||||
|
||||
.banner-button {
|
||||
background-color: var(--white);
|
||||
color: var(--ink);
|
||||
padding: 12px 20px;
|
||||
background-color: var(--ink);
|
||||
color: var(--white);
|
||||
padding: 12px 24px;
|
||||
border-radius: 5px;
|
||||
border: 0px transparent solid;
|
||||
border: var(--ink) 1px solid;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease 0s;
|
||||
overflow: hidden;
|
||||
outline: none;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ri-add-circle-fill {
|
||||
|
|
@ -148,6 +134,22 @@
|
|||
}
|
||||
|
||||
.banner-button:hover {
|
||||
background-color: var(--grey);
|
||||
background-color: var(--white);
|
||||
color: var(--ink);
|
||||
border: var(--grey-dark) 1px solid;
|
||||
}
|
||||
|
||||
.app-section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 40px 80px 0px 80px;
|
||||
}
|
||||
|
||||
.app-section-title {
|
||||
font-size: 20px;
|
||||
color: var(--ink);
|
||||
font-weight: 700;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ export const attachChildren = initialiseOpts => (htmlElement, options) => {
|
|||
const anchor = options && options.anchor ? options.anchor : null
|
||||
const force = options ? options.force : false
|
||||
const hydrate = options ? options.hydrate : true
|
||||
const context = options && options.context
|
||||
|
||||
if (!force && treeNode.children.length > 0) return treeNode.children
|
||||
|
||||
|
|
@ -37,16 +38,27 @@ export const attachChildren = initialiseOpts => (htmlElement, options) => {
|
|||
|
||||
const ComponentConstructor = componentLibraries[libName][componentName]
|
||||
|
||||
const childNodesThisIteration = prepareRenderComponent({
|
||||
props: childProps,
|
||||
parentNode: treeNode,
|
||||
ComponentConstructor,
|
||||
htmlElement,
|
||||
anchor,
|
||||
})
|
||||
const prepareNodes = ctx => {
|
||||
const childNodesThisIteration = prepareRenderComponent({
|
||||
props: childProps,
|
||||
parentNode: treeNode,
|
||||
ComponentConstructor,
|
||||
htmlElement,
|
||||
anchor,
|
||||
context: ctx,
|
||||
})
|
||||
|
||||
for (let childNode of childNodesThisIteration) {
|
||||
childNodes.push(childNode)
|
||||
for (let childNode of childNodesThisIteration) {
|
||||
childNodes.push(childNode)
|
||||
}
|
||||
}
|
||||
|
||||
if (Array.isArray(context)) {
|
||||
for (let singleCtx of context) {
|
||||
prepareNodes(singleCtx)
|
||||
}
|
||||
} else {
|
||||
prepareNodes(context)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,11 +7,12 @@ export const prepareRenderComponent = ({
|
|||
anchor,
|
||||
props,
|
||||
parentNode,
|
||||
context,
|
||||
}) => {
|
||||
const parentContext = (parentNode && parentNode.context) || {}
|
||||
|
||||
let nodesToRender = []
|
||||
const createNodeAndRender = context => {
|
||||
const createNodeAndRender = () => {
|
||||
let componentContext = parentContext
|
||||
if (context) {
|
||||
componentContext = { ...context }
|
||||
|
|
@ -48,6 +49,7 @@ export const prepareRenderComponent = ({
|
|||
if (typeof propValue === "string") {
|
||||
storeBoundProps[prop] = mustache.render(propValue, {
|
||||
state,
|
||||
context: componentContext,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -56,8 +56,30 @@ export const screenRouter = ({ screens, onScreenSelected, appRootPath }) => {
|
|||
}
|
||||
}
|
||||
|
||||
function click(e) {
|
||||
const x = e.target.closest("a")
|
||||
const y = x && x.getAttribute("href")
|
||||
|
||||
if (
|
||||
e.ctrlKey ||
|
||||
e.metaKey ||
|
||||
e.altKey ||
|
||||
e.shiftKey ||
|
||||
e.button ||
|
||||
e.defaultPrevented
|
||||
)
|
||||
return
|
||||
|
||||
const target = x.target || "_self"
|
||||
if (!y || target !== "_self" || x.host !== location.host) return
|
||||
|
||||
e.preventDefault()
|
||||
route(y)
|
||||
}
|
||||
|
||||
addEventListener("popstate", route)
|
||||
addEventListener("pushstate", route)
|
||||
addEventListener("click", click)
|
||||
|
||||
return route
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ export const bbFactory = ({
|
|||
}
|
||||
|
||||
const apiCall = method => (url, body) =>
|
||||
fetch(relativeUrl(url), {
|
||||
fetch(url, {
|
||||
method: method,
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
|
|
|
|||
|
|
@ -15,7 +15,4 @@ JWT_SECRET={{cookieKey1}}
|
|||
PORT=4001
|
||||
|
||||
# error level for koa-pino
|
||||
LOG_LEVEL=error
|
||||
|
||||
# Budibase app directory
|
||||
BUDIBASE_DIR=~/.budibase
|
||||
LOG_LEVEL=error
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 24.1.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 115 40" style="enable-background:new 0 0 115 40;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#393C44;}
|
||||
.st1{fill:#FFFFFF;}
|
||||
</style>
|
||||
<path class="st0" d="M111.16,40H3.91c-2.15,0-3.89-1.74-3.89-3.89V4.04c0-2.15,1.74-3.89,3.89-3.89h107.25
|
||||
c2.15,0,3.89,1.74,3.89,3.89v32.07C115.05,38.26,113.31,40,111.16,40z"/>
|
||||
<path class="st1" d="M10.37,10.03v8.57c0.93-1.26,2.33-1.67,3.61-1.67c1.58,0,3.01,0.59,4.02,1.54c1.12,1.05,1.82,2.62,1.82,4.53
|
||||
c0,1.78-0.62,3.42-1.82,4.61c-1.01,1.03-2.26,1.57-3.97,1.57c-2.05,0-3.09-0.95-3.66-1.78v1.39H6.63V10.03H10.37z M10.97,20.98
|
||||
c-0.44,0.46-0.82,1.13-0.82,2.11c0,0.95,0.41,1.64,0.85,2.05c0.59,0.57,1.41,0.85,2.11,0.85c0.64,0,1.36-0.26,1.93-0.8
|
||||
c0.54-0.51,0.9-1.26,0.9-2.11c0-0.92-0.36-1.67-0.9-2.18c-0.59-0.57-1.23-0.77-1.98-0.77C12.26,20.14,11.56,20.37,10.97,20.98z"/>
|
||||
<path class="st1" d="M25.08,17.35v6.32c0,0.51,0.05,1.31,0.64,1.85c0.26,0.23,0.72,0.54,1.54,0.54c0.69,0,1.23-0.23,1.56-0.54
|
||||
c0.54-0.51,0.62-1.28,0.62-1.85v-6.32h3.74v6.68c0,1.31-0.13,2.54-1.28,3.67c-1.31,1.28-3.23,1.49-4.59,1.49
|
||||
c-1.41,0-3.31-0.21-4.62-1.49c-1.05-1.03-1.26-2.18-1.26-3.44v-6.91H25.08z"/>
|
||||
<path class="st1" d="M47.88,28.79h-3.74V27.4c-0.57,0.82-1.61,1.78-3.66,1.78c-1.71,0-2.96-0.54-3.97-1.57
|
||||
c-1.19-1.18-1.82-2.83-1.82-4.61c0-1.9,0.7-3.47,1.82-4.53c1.01-0.95,2.44-1.54,4.02-1.54c1.27,0,2.67,0.41,3.61,1.67v-8.57h3.74
|
||||
V28.79z M39.53,20.91c-0.54,0.51-0.9,1.26-0.9,2.18c0,0.85,0.36,1.59,0.9,2.11c0.57,0.54,1.28,0.8,1.93,0.8
|
||||
c0.69,0,1.52-0.28,2.11-0.85c0.44-0.41,0.85-1.1,0.85-2.05c0-0.98-0.39-1.64-0.82-2.11c-0.59-0.62-1.28-0.85-2.08-0.85
|
||||
C40.77,20.14,40.12,20.34,39.53,20.91z"/>
|
||||
<path class="st1" d="M52.32,10.3c1.21,0,2.16,0.95,2.16,2.16c0,1.21-0.95,2.16-2.16,2.16c-1.21,0-2.16-0.95-2.16-2.16
|
||||
C50.17,11.25,51.12,10.3,52.32,10.3z M54.19,17.35v11.44h-3.74V17.35H54.19z"/>
|
||||
<path class="st1" d="M60.49,10.03v8.57c0.93-1.26,2.33-1.67,3.61-1.67c1.58,0,3.01,0.59,4.02,1.54c1.12,1.05,1.82,2.62,1.82,4.53
|
||||
c0,1.78-0.62,3.42-1.82,4.61c-1.01,1.03-2.26,1.57-3.97,1.57c-2.05,0-3.09-0.95-3.66-1.78v1.39h-3.74V10.03H60.49z M61.06,20.98
|
||||
c-0.44,0.46-0.82,1.13-0.82,2.11c0,0.95,0.41,1.64,0.85,2.05c0.59,0.57,1.41,0.85,2.11,0.85c0.64,0,1.36-0.26,1.93-0.8
|
||||
c0.54-0.51,0.9-1.26,0.9-2.11c0-0.92-0.36-1.67-0.9-2.18c-0.59-0.57-1.23-0.77-1.98-0.77C62.34,20.14,61.65,20.37,61.06,20.98z"/>
|
||||
<path class="st1" d="M80.26,17.35H84v11.44h-3.74v-1.39c-1.01,1.54-2.46,1.77-3.42,1.77c-1.66,0-3.06-0.41-4.33-1.74
|
||||
c-1.22-1.28-1.69-2.77-1.69-4.28c0-1.92,0.73-3.57,1.79-4.62c1.01-1,2.41-1.56,4.02-1.56c0.99,0,2.57,0.23,3.63,1.67V17.35z
|
||||
M75.57,20.96c-0.39,0.39-0.85,1.05-0.85,2.08c0,1.03,0.44,1.7,0.77,2.05c0.51,0.54,1.31,0.9,2.18,0.9c0.74,0,1.44-0.31,1.93-0.8
|
||||
c0.49-0.46,0.9-1.18,0.9-2.16c0-0.82-0.31-1.59-0.85-2.11c-0.57-0.54-1.39-0.8-2.05-0.8C76.8,20.14,76.06,20.47,75.57,20.96z"/>
|
||||
<path class="st1" d="M93.21,20.26c-0.57-0.33-1.31-0.64-2.03-0.64c-0.39,0-0.82,0.1-1.05,0.33c-0.13,0.13-0.23,0.33-0.23,0.51
|
||||
c0,0.26,0.18,0.41,0.36,0.51c0.26,0.15,0.64,0.23,1.1,0.39l0.98,0.31c0.64,0.21,1.31,0.46,1.9,1c0.67,0.62,0.9,1.31,0.9,2.18
|
||||
c0,1.52-0.67,2.49-1.18,3.01c-1.13,1.13-2.52,1.31-3.72,1.31c-1.54,0-3.21-0.33-4.7-1.64l1.57-2.49c0.36,0.31,0.87,0.67,1.26,0.85
|
||||
c0.51,0.26,1.05,0.36,1.54,0.36c0.23,0,0.82,0,1.16-0.26c0.23-0.18,0.39-0.46,0.39-0.74c0-0.21-0.08-0.46-0.41-0.67
|
||||
c-0.26-0.15-0.59-0.26-1.13-0.41l-0.92-0.28c-0.67-0.21-1.36-0.57-1.85-1.05c-0.54-0.57-0.82-1.21-0.82-2.08
|
||||
c0-1.1,0.44-2.03,1.1-2.65c1.03-0.95,2.41-1.16,3.47-1.16c1.7,0,2.88,0.44,3.8,0.98L93.21,20.26z"/>
|
||||
<path class="st1" d="M108.43,23.73h-8.55c0,0.62,0.23,1.44,0.69,1.95c0.57,0.62,1.34,0.72,1.9,0.72c0.54,0,1.1-0.1,1.49-0.33
|
||||
c0.05-0.03,0.49-0.31,0.8-0.95l3.49,0.36c-0.51,1.62-1.54,2.47-2.21,2.88c-1.1,0.67-2.34,0.85-3.62,0.85
|
||||
c-1.72,0-3.24-0.31-4.57-1.64c-1-1-1.72-2.52-1.72-4.42c0-1.64,0.59-3.34,1.75-4.52c1.39-1.39,3.11-1.64,4.39-1.64
|
||||
c1.28,0,3.13,0.23,4.55,1.72c1.36,1.44,1.62,3.24,1.62,4.65V23.73z M105.03,21.48c-0.03-0.1-0.21-0.82-0.74-1.34
|
||||
c-0.41-0.39-1-0.64-1.75-0.64c-0.95,0-1.52,0.39-1.87,0.74c-0.28,0.31-0.54,0.72-0.64,1.23H105.03z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 201 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
|
|
@ -6,6 +6,7 @@ const env = require("../../environment")
|
|||
const instanceController = require("./instance")
|
||||
const { resolve, join } = require("path")
|
||||
const { copy, exists, readFile, writeFile } = require("fs-extra")
|
||||
const { budibaseAppsDir } = require("../../utilities/budibaseDir")
|
||||
const { exec } = require("child_process")
|
||||
const sqrl = require("squirrelly")
|
||||
|
||||
|
|
@ -73,7 +74,7 @@ const createEmptyAppPackage = async (ctx, app) => {
|
|||
"appDirectoryTemplate"
|
||||
)
|
||||
|
||||
const appsFolder = env.BUDIBASE_DIR
|
||||
const appsFolder = budibaseAppsDir()
|
||||
const newAppFolder = resolve(appsFolder, app._id)
|
||||
|
||||
if (await exists(newAppFolder)) {
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ async function executeRelevantWorkflows(event, eventType) {
|
|||
}
|
||||
}
|
||||
|
||||
emitter.on("action", async function(event) {
|
||||
emitter.on("record:save", async function(event) {
|
||||
await executeRelevantWorkflows(event, "record:save")
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ exports.serverStrategy = () => ({
|
|||
if (block.type === "CLIENT") continue
|
||||
|
||||
const action = require(`../api/controllers/workflow/actions/${block.actionId}`)
|
||||
const response = await action(this.bindContextArgs(block.args))
|
||||
const response = await action({ args: this.bindContextArgs(block.args) })
|
||||
|
||||
this.context = {
|
||||
...this.context,
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ const copyClientLib = async (appPath, pageName) => {
|
|||
|
||||
const buildIndexHtml = async (config, appId, pageName, appPath, pkg) => {
|
||||
const appPublicPath = publicPath(appPath, pageName)
|
||||
const appRootPath = appId
|
||||
const appRootPath = rootPath(config, appId)
|
||||
|
||||
const stylesheetUrl = s =>
|
||||
s.startsWith("http") ? s : `/${rootPath(config, appId)}/${s}`
|
||||
|
|
|
|||
|
|
@ -217,6 +217,21 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"list": {
|
||||
"description": "A configurable data list that attaches to your backend models.",
|
||||
"data": true,
|
||||
"props": {
|
||||
"model": "models",
|
||||
"layout": {
|
||||
"type": "options",
|
||||
"default": "list",
|
||||
"options": [
|
||||
"list",
|
||||
"grid"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"datamap": {
|
||||
"description": "shiny chart",
|
||||
"data": true,
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
<button
|
||||
bind:this={theButton}
|
||||
class={className}
|
||||
class="default"
|
||||
disabled={disabled || false}
|
||||
on:click={clickHandler}>
|
||||
{#if !_bb.props._children || _bb.props._children.length === 0}{text}{/if}
|
||||
|
|
@ -25,23 +25,21 @@
|
|||
|
||||
<style>
|
||||
.default {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
padding: 0.4em;
|
||||
margin: 0 0 0.5em 0;
|
||||
align-items: center;
|
||||
font-family: Inter;
|
||||
font-size: 16px;
|
||||
padding: 0px 16px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 2px;
|
||||
color: #000333;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.default:active {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.default:focus {
|
||||
border-color: #666;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease 0s;
|
||||
overflow: hidden;
|
||||
outline: none;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.border {
|
||||
|
|
|
|||
|
|
@ -58,24 +58,96 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<form class="uk-form" on:submit|preventDefault>
|
||||
<h4>{modelDef.name}</h4>
|
||||
<div>
|
||||
<form class="form" on:submit|preventDefault>
|
||||
<h1>{modelDef.name} Form</h1>
|
||||
<div class="form-content">
|
||||
{#each fields as field}
|
||||
<div class="uk-margin">
|
||||
<div class="form-item">
|
||||
<label class="form-label" for="form-stacked-text">{field}</label>
|
||||
<input
|
||||
class="uk-input"
|
||||
class="input"
|
||||
placeholder={field}
|
||||
type={schema[field].type === 'string' ? 'text' : schema[field].type}
|
||||
on:change={handleInput(field)} />
|
||||
</div>
|
||||
<hr />
|
||||
{/each}
|
||||
<div class="button-block">
|
||||
<button on:click={save}>Submit Form</button>
|
||||
</div>
|
||||
</div>
|
||||
<button on:click={save}>SAVE</button>
|
||||
</form>
|
||||
|
||||
<style>
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.form-content {
|
||||
margin-bottom: 20px;
|
||||
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 600px;
|
||||
height: 40px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #e6e6e6;
|
||||
padding: 6px 12px 6px 12px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-weight: bold;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 1px solid #fafafa;
|
||||
margin: 20px 0px;
|
||||
}
|
||||
|
||||
hr:nth-last-child(2) {
|
||||
border: 1px solid #fff;
|
||||
margin: 20px 0px;
|
||||
}
|
||||
|
||||
.button-block {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: roboto;
|
||||
font-size: 16px;
|
||||
padding: 0.4em;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
background-color: #393c44;
|
||||
outline: none;
|
||||
width: 300px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease 0s;
|
||||
overflow: hidden;
|
||||
outline: none;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: white;
|
||||
border-color: #393c44;
|
||||
color: #393c44;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -65,24 +65,31 @@
|
|||
}
|
||||
|
||||
thead {
|
||||
background: #f9f9f9;
|
||||
background: #393C44;
|
||||
border: 1px solid #ccc;
|
||||
height: 40px;
|
||||
text-align: left;
|
||||
margin-right: 60px;
|
||||
}
|
||||
|
||||
thead th {
|
||||
color: var(--button-text);
|
||||
color: #ffffff;
|
||||
text-transform: capitalize;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
text-rendering: optimizeLegibility;
|
||||
letter-spacing: 1px;
|
||||
justify-content: left;
|
||||
padding: 16px 20px 16px 8px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
border-bottom: 1px solid #ccc;
|
||||
transition: 0.3s background-color;
|
||||
color: var(--secondary100);
|
||||
color: #393C44;
|
||||
font-size: 14px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
tbody tr:hover {
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
$: target = openInNewTab ? "_blank" : "_self"
|
||||
</script>
|
||||
|
||||
<a href={_bb.relativeUrl(url)} bind:this={anchorElement} {target}>{text}</a>
|
||||
<a href={url} bind:this={anchorElement} {target}>{text}</a>
|
||||
|
||||
<style>
|
||||
.textDecoration {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,72 @@
|
|||
<script>
|
||||
import { onMount } from "svelte"
|
||||
|
||||
export let _bb
|
||||
export let _instanceId
|
||||
export let model
|
||||
export let layout = "list"
|
||||
|
||||
let headers = []
|
||||
let store = _bb.store
|
||||
let target
|
||||
|
||||
async function fetchData() {
|
||||
if (!model || !model.length) return
|
||||
|
||||
const FETCH_RECORDS_URL = `/api/${_instanceId}/views/all_${model}`
|
||||
const response = await _bb.api.get(FETCH_RECORDS_URL)
|
||||
if (response.status === 200) {
|
||||
const json = await response.json()
|
||||
|
||||
_bb.attachChildren(target, {
|
||||
hydrate: false,
|
||||
context: json,
|
||||
})
|
||||
} else {
|
||||
throw new Error("Failed to fetch records.", response)
|
||||
}
|
||||
}
|
||||
|
||||
$: if (model) fetchData()
|
||||
|
||||
onMount(async () => {
|
||||
await fetchData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<section class:grid={layout === 'grid'} class:list={layout === 'list'}>
|
||||
<div class="data-card" bind:this={target} />
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: Roboto;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 5px 0 5px 0;
|
||||
}
|
||||
|
||||
.data-card {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.data-key {
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -25,9 +25,16 @@
|
|||
|
||||
const login = async () => {
|
||||
loading = true
|
||||
const response = await _bb.api.post("/api/authenticate", {
|
||||
username,
|
||||
password,
|
||||
const response = await fetch(_bb.relativeUrl("/api/authenticate"), {
|
||||
body: JSON.stringify({
|
||||
username,
|
||||
password,
|
||||
}),
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"x-user-agent": "Budibase Builder",
|
||||
},
|
||||
method: "POST",
|
||||
})
|
||||
|
||||
if (response.status === 200) {
|
||||
|
|
@ -72,7 +79,7 @@
|
|||
|
||||
<div class="login-button-container">
|
||||
<button disabled={loading} on:click={login} class={_buttonClass}>
|
||||
{loginButtonLabel}
|
||||
Log in to {name}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -18,5 +18,6 @@ export { default as datatable } from "./DataTable.svelte"
|
|||
export { default as dataform } from "./DataForm.svelte"
|
||||
export { default as datachart } from "./DataChart.svelte"
|
||||
export { default as datalist } from "./DataList.svelte"
|
||||
export { default as list } from "./List.svelte"
|
||||
export { default as datasearch } from "./DataSearch.svelte"
|
||||
export { default as datamap } from "./DataMap.svelte"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
## Description
|
||||
_Describe the problem or feature in addition to a link to the relevant github issues._
|
||||
|
||||
## Screenshots
|
||||
_If a UI facing feature, some screenshots of the new functionality._
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue