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

Updating fancy forms to be usable for data table fetching designs.

This commit is contained in:
mike12345567 2023-06-05 18:36:50 +01:00
parent 96f44c0a86
commit b57557760d
5 changed files with 51 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/bbui/src/FancyForm/FancyCheckbox.svelte
View File

@ -8,6 +8,8 @@
export let disabled = false export let disabled = false
export let error = null export let error = null
export let validate = null export let validate = null
export let compact = false
export let noMaxWidth
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
@ -21,7 +23,16 @@
} }
</script> </script>
<FancyField {error} {value} {validate} {disabled} clickable on:click={onChange}> <FancyField
{error}
{value}
{validate}
{disabled}
{compact}
{noMaxWidth}
clickable
on:click={onChange}
>
<span> <span>
<Checkbox {disabled} {value} /> <Checkbox {disabled} {value} />
</span> </span>
@ -39,7 +50,6 @@
} }
.text { .text {
font-size: 15px; font-size: 15px;
line-height: 17px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;

4
packages/bbui/src/FancyForm/FancyField.svelte
View File

@ -61,7 +61,7 @@
<style> <style>
.fancy-field { .fancy-field {
max-width: 400px; max-width: var(--fancy-field-max-width);
background: var(--spectrum-global-color-gray-75); background: var(--spectrum-global-color-gray-75);
border: 1px solid var(--spectrum-global-color-gray-300); border: 1px solid var(--spectrum-global-color-gray-300);
border-radius: 4px; border-radius: 4px;
@ -91,7 +91,7 @@
} }
.content { .content {
position: relative; position: relative;
height: 64px; height: var(--fancy-field-height);
padding: 0 16px; padding: 0 16px;
} }
.fancy-field.auto-height .content { .fancy-field.auto-height .content {

12
packages/bbui/src/FancyForm/FancyForm.svelte
View File

@ -1,6 +1,9 @@
<script> <script>
import { setContext } from "svelte" import { setContext } from "svelte"
export let noMaxWidth
export let compact
let fields = {} let fields = {}
setContext("fancy-form", { setContext("fancy-form", {
@ -22,9 +25,16 @@
}) })
return valid return valid
} }
const styles = () => {
let styleString = ""
styleString += `--fancy-field-max-width: ${noMaxWidth ? "auto" : "400px"}`
styleString += `; --fancy-field-height: ${compact ? "40px" : "64px"}`
return styleString
}
</script> </script>
<div class="fancy-form"> <div class="fancy-form" style={styles()}>
<slot /> <slot />
</div> </div>

3
packages/builder/src/components/backend/DatasourceNavigator/icons/index.js
View File

@ -44,6 +44,9 @@ export default ICONS
export function getIcon(integrationType, schema) { export function getIcon(integrationType, schema) {
const integrationList = get(integrations) const integrationList = get(integrations)
if (!integrationList) {
return
}
if (integrationList[integrationType]?.iconUrl) { if (integrationList[integrationType]?.iconUrl) {
return { url: integrationList[integrationType].iconUrl } return { url: integrationList[integrationType].iconUrl }
} else if (schema?.custom || !ICONS[integrationType]) { } else if (schema?.custom || !ICONS[integrationType]) {

25
packages/builder/src/components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte
View File

@ -1,6 +1,13 @@
<script> <script>
import { goto } from "@roxi/routify" import { goto } from "@roxi/routify"
import { ModalContent, notifications, Body, Layout } from "@budibase/bbui" import {
ModalContent,
notifications,
Body,
Layout,
FancyForm,
FancyCheckbox,
} from "@budibase/bbui"
import IntegrationConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte" import IntegrationConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte"
import { IntegrationNames } from "constants/backend" import { IntegrationNames } from "constants/backend"
import cloneDeep from "lodash/cloneDeepWith" import cloneDeep from "lodash/cloneDeepWith"
@ -103,6 +110,20 @@
on:valid={e => (isValid = e.detail)} on:valid={e => (isValid = e.detail)}
/> />
{:else} {:else}
<Body>Some stuff here</Body> <div class="table-checkboxes">
<FancyForm compact noMaxWidth>
<FancyCheckbox value="table a" text="table a" />
<FancyCheckbox value="table a" text="table a" />
<FancyCheckbox value="table a" text="table a" />
<FancyCheckbox value="table a" text="table a" />
<FancyCheckbox value="table a" text="table a" />
</FancyForm>
</div>
{/if} {/if}
</ModalContent> </ModalContent>
<style>
.table-checkboxes {
width: 100%;
}
</style>