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

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

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

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

@ -1,6 +1,9 @@
<script>
import { setContext } from "svelte"
export let noMaxWidth
export let compact
let fields = {}
setContext("fancy-form", {
@ -22,9 +25,16 @@
})
return valid
}
const styles = () => {
let styleString = ""
styleString += `--fancy-field-max-width: ${noMaxWidth ? "auto" : "400px"}`
styleString += `; --fancy-field-height: ${compact ? "40px" : "64px"}`
return styleString
}
</script>
<div class="fancy-form">
<div class="fancy-form" style={styles()}>
<slot />
</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) {
const integrationList = get(integrations)
if (!integrationList) {
return
}
if (integrationList[integrationType]?.iconUrl) {
return { url: integrationList[integrationType].iconUrl }
} else if (schema?.custom || !ICONS[integrationType]) {

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

@ -1,6 +1,13 @@
<script>
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 { IntegrationNames } from "constants/backend"
import cloneDeep from "lodash/cloneDeepWith"
@ -103,6 +110,20 @@
on:valid={e => (isValid = e.detail)}
/>
{: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}
</ModalContent>
<style>
.table-checkboxes {
width: 100%;
}
</style>