ufkc7e3d
/
budibase
forked from tsai/budibase
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Improve data binding popup and finish component bindings

master
Andrew Kingston 6 years ago
parent
26067ed026
commit
ec4a4047b6
6 changed files with 73 additions and 78 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 11
      packages/builder/src/builderStore/dataBinding.js
  2. 67
      packages/builder/src/components/design/PropertiesPanel/PropertyControls/BindingDropdown.svelte
  3. 34
      packages/builder/src/components/design/temporaryPanelStructure.js
  4. 15
      packages/standard-components/components.json
  5. 22
      packages/standard-components/manifest.json
  6. 2
      packages/standard-components/src/index.js

11
packages/builder/src/builderStore/dataBinding.js
View File

@ -71,9 +71,14 @@ export const getBindableComponents = rootComponent => {
return definition.bindable return definition.bindable
} }
const components = findAllMatchingComponents(rootComponent, componentSelector) const components = findAllMatchingComponents(rootComponent, componentSelector)
console.log(components) return components.map(component => {
return {
return [] type: "instance",
providerId: component._id,
runtimeBinding: `${component._id}`,
readableBinding: `${component._instanceName}`,
}
})
} }
/** /**

67
packages/builder/src/components/design/PropertiesPanel/PropertyControls/BindingDropdown.svelte
View File

@ -21,42 +21,51 @@
} }
$: ({ instance, context } = groupBy("type", bindableProperties)) $: ({ instance, context } = groupBy("type", bindableProperties))
$: hasBindableProperties = !!bindableProperties?.length
</script> </script>
<div class="container" data-cy="binding-dropdown-modal"> <div class="container" data-cy="binding-dropdown-modal">
<div class="list"> <div class="list">
<Heading extraSmall>Objects</Heading> {#if hasBindableProperties}
<Spacer medium /> {#if context}
{#if context} <Heading extraSmall>Contexts</Heading>
<Heading extraSmall>Tables</Heading> <Spacer small />
<ul> <ul>
{#each context as { readableBinding }} {#each context as { readableBinding }}
<li on:click={() => addToText(readableBinding)}>{readableBinding}</li> <li on:click={() => addToText(readableBinding)}>
{/each} {readableBinding}
</ul> </li>
{/if} {/each}
{#if instance} </ul>
<Heading extraSmall>Components</Heading> {/if}
<ul> {#if instance}
{#each instance as { readableBinding }} <Spacer medium />
<li on:click={() => addToText(readableBinding)}>{readableBinding}</li> <Heading extraSmall>Components</Heading>
{/each} <Spacer small />
</ul> <ul>
{#each instance as { readableBinding }}
<li on:click={() => addToText(readableBinding)}>
{readableBinding}
</li>
{/each}
</ul>
{/if}
{:else}
<div class="empty">There aren't any bindable properties available.</div>
{/if} {/if}
</div> </div>
<div class="text"> <div class="text">
<Heading extraSmall>Data binding</Heading> <Heading extraSmall>Data Binding</Heading>
<Spacer small /> <Spacer small />
<Body extraSmall lh> <Body extraSmall lh>
Binding connects one piece of data to another and makes it dynamic. Click Binding connects one piece of data to another and makes it dynamic. Click
the objects on the left, to add them to the textbox. the objects on the left to add them to the extbox.
</Body> </Body>
<Spacer large /> <Spacer large />
<TextArea <TextArea
thin thin
bind:value bind:value
placeholder="Add text, or click the objects on the left to add them to the placeholder="Add text, or click the objects on the left to add them to the textbox." />
textbox." />
<div class="controls"> <div class="controls">
<a href="https://docs.budibase.com/design/binding"> <a href="https://docs.budibase.com/design/binding">
<Body small grey>Learn more about binding</Body> <Body small grey>Learn more about binding</Body>
@ -84,9 +93,11 @@
grid-template-columns: 1fr auto auto; grid-template-columns: 1fr auto auto;
} }
.list { .list {
width: 150px; width: 200px;
border-right: 1.5px solid var(--grey-4); border-right: 1.5px solid var(--grey-4);
padding: var(--spacing-xl); padding: var(--spacing-xl);
max-height: 300px;
overflow: auto;
} }
.text { .text {
width: 600px; width: 600px;
@ -96,9 +107,11 @@
.text :global(p) { .text :global(p) {
margin: 0; margin: 0;
} }
.text :global(textarea) {
min-height: 50px;
}
ul { ul {
list-style: none; list-style: none;
padding-left: 0;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
@ -108,7 +121,7 @@
font-family: var(--font-sans); font-family: var(--font-sans);
font-size: var(--font-size-xs); font-size: var(--font-size-xs);
color: var(--grey-7); color: var(--grey-7);
padding: var(--spacing-s) 0; padding: var(--spacing-xs) 0;
margin: auto 0px; margin: auto 0px;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
@ -116,10 +129,14 @@
li:hover { li:hover {
color: var(--ink); color: var(--ink);
font-weight: 500;
} }
li:active { li:active {
color: var(--blue); color: var(--blue);
} }
div.empty {
font-size: var(--font-size-xs);
color: var(--grey-5);
}
</style> </style>

34
packages/builder/src/components/design/temporaryPanelStructure.js
View File

@ -850,40 +850,6 @@ export default {
settings: [{ label: "Logo URL", key: "logoUrl", control: Input }], settings: [{ label: "Logo URL", key: "logoUrl", control: Input }],
}, },
}, },
{
name: "Login",
_component: "@budibase/standard-components/login",
description:
"A component that automatically generates a login screen for your app.",
icon: "ri-login-box-line",
children: [],
showOnAsset: ["login-screen"],
properties: {
design: { ...all },
settings: [
{
label: "Name",
key: "name",
control: Input,
},
{
label: "Logo",
key: "logo",
control: Input,
},
{
label: "Title",
key: "title",
control: Input,
},
{
label: "Button Text",
key: "buttonText",
control: Input,
},
],
},
},
{ {
name: "Row Detail", name: "Row Detail",
_component: "@budibase/standard-components/rowdetail", _component: "@budibase/standard-components/rowdetail",

15
packages/standard-components/components.json
View File

@ -21,21 +21,6 @@
"logoUrl": "string" "logoUrl": "string"
} }
}, },
"login": {
"name": "Login Control",
"description": "A control that accepts email, password an also handles password resets",
"props": {
"logo": "string",
"title": "string",
"buttonText": "string"
},
"tags": [
"login",
"credentials",
"password",
"logon"
]
},
"richtext": { "richtext": {
"name": "Rich Text", "name": "Rich Text",
"description": "A component that allows the user to enter long form text.", "description": "A component that allows the user to enter long form text.",

22
packages/standard-components/manifest.json
View File

@ -269,5 +269,27 @@
"key": "text" "key": "text"
} }
] ]
},
"login": {
"description": "A component that automatically generates a login screen for your app.",
"icon": "ri-login-box-line",
"styleable": true,
"settings": [
{
"type": "text",
"label": "Logo",
"key": "logo"
},
{
"type": "text",
"label": "Title",
"key": "title"
},
{
"type": "text",
"label": "Button Text",
"key": "buttonText"
}
]
} }
} }

2
packages/standard-components/src/index.js
View File

@ -17,9 +17,9 @@ export { default as card } from "./Card.svelte"
export { default as form } from "./DataFormWide.svelte" export { default as form } from "./DataFormWide.svelte"
export { default as datepicker } from "./DatePicker.svelte" export { default as datepicker } from "./DatePicker.svelte"
export { default as text } from "./Text.svelte" export { default as text } from "./Text.svelte"
export { default as login } from "./Login.svelte"
// export { default as heading } from "./Heading.svelte" // export { default as heading } from "./Heading.svelte"
// export { default as login } from "./Login.svelte"
// export { default as link } from "./Link.svelte" // export { default as link } from "./Link.svelte"
// export { default as image } from "./Image.svelte" // export { default as image } from "./Image.svelte"
// export { default as navigation } from "./Navigation.svelte" // export { default as navigation } from "./Navigation.svelte"

Write Preview
Loading…
Cancel
Save