mirror of https://github.com/Budibase/budibase.git
Kevin Åberg Kultalahti
6 years ago
committed by
GitHub
GitHub
9 changed files with 161 additions and 446 deletions
@ -1,52 +0,0 @@ |
|||
<script> |
|||
import { slide } from "svelte/transition" |
|||
import Portal from "svelte-portal" |
|||
|
|||
export let title |
|||
export let onClose = () => {} |
|||
</script> |
|||
|
|||
<Portal> |
|||
<section class="drawer" transition:slide> |
|||
<header> |
|||
{title} |
|||
<div class="controls"> |
|||
<slot name="buttons" /> |
|||
<i class="ri-close-fill close" on:click={onClose} /> |
|||
</div> |
|||
</header> |
|||
<slot name="body" /> |
|||
</section> |
|||
</Portal> |
|||
|
|||
<style> |
|||
.drawer { |
|||
height: 50vh; |
|||
position: absolute; |
|||
bottom: 0; |
|||
width: 100vw; |
|||
background: var(--background); |
|||
border-top: var(--border-light); |
|||
z-index: 2; |
|||
} |
|||
|
|||
header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
border: var(--border-light); |
|||
padding: var(--spacing-m); |
|||
} |
|||
|
|||
.controls { |
|||
display: grid; |
|||
grid-auto-flow: column; |
|||
grid-gap: var(--spacing-m); |
|||
align-items: center; |
|||
} |
|||
|
|||
.close { |
|||
font-size: var(--font-size-xl); |
|||
cursor: pointer; |
|||
} |
|||
</style> |
|||
@ -1,132 +0,0 @@ |
|||
<script> |
|||
import groupBy from "lodash/fp/groupBy" |
|||
import { |
|||
Button, |
|||
TextArea, |
|||
Label, |
|||
Body, |
|||
Heading, |
|||
Spacer, |
|||
} from "@budibase/bbui" |
|||
import { createEventDispatcher } from "svelte" |
|||
|
|||
const dispatch = createEventDispatcher() |
|||
export let bindableProperties |
|||
export let value = "" |
|||
export let close |
|||
|
|||
function addToText(readableBinding) { |
|||
value = value + `{{ ${readableBinding} }}` |
|||
} |
|||
let originalValue = value |
|||
|
|||
$: dispatch("update", value) |
|||
|
|||
function cancel() { |
|||
dispatch("update", originalValue) |
|||
close() |
|||
} |
|||
|
|||
$: ({ instance, context } = groupBy("type", bindableProperties)) |
|||
</script> |
|||
|
|||
<div class="container" data-cy="binding-dropdown-modal"> |
|||
<div class="list"> |
|||
<Heading extraSmall>Objects</Heading> |
|||
<Spacer medium /> |
|||
{#if context} |
|||
<Heading extraSmall>Tables</Heading> |
|||
<ul> |
|||
{#each context as { readableBinding }} |
|||
<li on:click={() => addToText(readableBinding)}>{readableBinding}</li> |
|||
{/each} |
|||
</ul> |
|||
{/if} |
|||
{#if instance} |
|||
<Heading extraSmall>Components</Heading> |
|||
<ul> |
|||
{#each instance as { readableBinding }} |
|||
<li on:click={() => addToText(readableBinding)}>{readableBinding}</li> |
|||
{/each} |
|||
</ul> |
|||
{/if} |
|||
</div> |
|||
<div class="text"> |
|||
<Heading extraSmall>Data binding</Heading> |
|||
<Spacer small /> |
|||
<Body extraSmall lh> |
|||
Binding connects one piece of data to another and makes it dynamic. Click |
|||
the objects on the left, to add them to the textbox. |
|||
</Body> |
|||
<Spacer large /> |
|||
<TextArea |
|||
thin |
|||
bind:value |
|||
placeholder="Add text, or click the objects on the left to add them to the |
|||
textbox." /> |
|||
<div class="controls"> |
|||
<a href="https://docs.budibase.com/design/binding"> |
|||
<Body small grey>Learn more about binding</Body> |
|||
</a> |
|||
<Button on:click={cancel} secondary>Cancel</Button> |
|||
<Button on:click={close} primary>Done</Button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<style> |
|||
.container { |
|||
display: grid; |
|||
grid-template-columns: auto auto; |
|||
} |
|||
.list, |
|||
.text { |
|||
padding: var(--spacing-m); |
|||
} |
|||
.controls { |
|||
margin-top: var(--spacing-m); |
|||
display: grid; |
|||
align-items: center; |
|||
grid-gap: var(--spacing-l); |
|||
grid-template-columns: 1fr auto auto; |
|||
} |
|||
.list { |
|||
width: 150px; |
|||
border-right: 1.5px solid var(--grey-4); |
|||
padding: var(--spacing-xl); |
|||
} |
|||
.text { |
|||
width: 600px; |
|||
padding: var(--spacing-xl); |
|||
font-family: var(--font-sans); |
|||
} |
|||
.text :global(p) { |
|||
margin: 0; |
|||
} |
|||
ul { |
|||
list-style: none; |
|||
padding-left: 0; |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
li { |
|||
display: flex; |
|||
font-family: var(--font-sans); |
|||
font-size: var(--font-size-xs); |
|||
color: var(--grey-7); |
|||
padding: var(--spacing-s) 0; |
|||
margin: auto 0px; |
|||
align-items: center; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
li:hover { |
|||
color: var(--ink); |
|||
font-weight: 500; |
|||
} |
|||
|
|||
li:active { |
|||
color: var(--blue); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,113 @@ |
|||
<script> |
|||
import groupBy from "lodash/fp/groupBy" |
|||
import { |
|||
Button, |
|||
TextArea, |
|||
Drawer, |
|||
Heading, |
|||
Spacer, |
|||
} from "@budibase/bbui" |
|||
import { createEventDispatcher } from "svelte" |
|||
|
|||
const dispatch = createEventDispatcher() |
|||
export let bindableProperties |
|||
export let value = "" |
|||
export let bindingDrawer |
|||
|
|||
function addToText(readableBinding) { |
|||
value = value + `{{ ${readableBinding} }}` |
|||
} |
|||
let originalValue = value |
|||
|
|||
$: dispatch("update", value) |
|||
|
|||
export function cancel() { |
|||
dispatch("update", originalValue) |
|||
bindingDrawer.close() |
|||
} |
|||
|
|||
$: ({ instance, context } = groupBy("type", bindableProperties)) |
|||
</script> |
|||
|
|||
<div class="drawer-contents"> |
|||
<div class="container" data-cy="binding-dropdown-modal"> |
|||
<div class="list"> |
|||
<Heading extraSmall>Objects</Heading> |
|||
<Spacer medium /> |
|||
{#if context} |
|||
<Heading extraSmall>Tables</Heading> |
|||
<ul> |
|||
{#each context as { readableBinding }} |
|||
<li on:click={() => addToText(readableBinding)}>{readableBinding}</li> |
|||
{/each} |
|||
</ul> |
|||
{/if} |
|||
{#if instance} |
|||
<Heading extraSmall>Components</Heading> |
|||
<ul> |
|||
{#each instance as { readableBinding }} |
|||
<li on:click={() => addToText(readableBinding)}>{readableBinding}</li> |
|||
{/each} |
|||
</ul> |
|||
{/if} |
|||
</div> |
|||
<div class="text"> |
|||
<TextArea |
|||
thin |
|||
bind:value |
|||
placeholder="Add text, or click the objects on the left to add them to the |
|||
textbox." /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<style> |
|||
.container { |
|||
height: 100%; |
|||
display: grid; |
|||
grid-template-columns: auto 1fr; |
|||
} |
|||
.list { |
|||
width: 150px; |
|||
border-right: 1.5px solid var(--grey-4); |
|||
padding: var(--spacing-s); |
|||
} |
|||
.text { |
|||
padding: var(--spacing-s); |
|||
font-family: var(--font-sans); |
|||
} |
|||
.text :global(p) { |
|||
margin: 0; |
|||
} |
|||
ul { |
|||
list-style: none; |
|||
padding-left: 0; |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
li { |
|||
display: flex; |
|||
font-family: var(--font-sans); |
|||
font-size: var(--font-size-xs); |
|||
color: var(--grey-7); |
|||
padding: var(--spacing-s) 0; |
|||
margin: auto 0px; |
|||
align-items: center; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
li:hover { |
|||
color: var(--ink); |
|||
font-weight: 500; |
|||
} |
|||
|
|||
li:active { |
|||
color: var(--blue); |
|||
} |
|||
|
|||
.drawer-contents { |
|||
height: 40vh; |
|||
overflow-y: auto; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue