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

refactor stuff

This commit is contained in:
Gerard Burns 2024-04-08 23:09:28 +01:00
parent 82294c55ce
commit b0bc5ff64b
8 changed files with 137 additions and 183 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

179
packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
View File

@ -1,13 +1,7 @@
<script> <script>
import { Icon, Heading, Multiselect, ContextTooltip } from "@budibase/bbui"
import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
import { selectedScreen } from "stores/builder"
import { createEventDispatcher } from "svelte"
import Property from './Property.svelte'
import InfoWord from './InfoWord.svelte'
import DocumentationLink from './DocumentationLink.svelte'
import ExplanationModal from './ExplanationModal/index.svelte' import ExplanationModal from './ExplanationModal/index.svelte'
import { warnings, errors } from "../../fieldValidator"; import { warnings, errors } from "../../fieldValidator";
import { Column, Support, NotRequired, StringNumber } from "./lines"
export let support = {} export let support = {}
@ -22,45 +16,12 @@
let root = null; let root = null;
const getDocLink = (columnType) => {
if (columnType === "Number") {
return "https://docs.budibase.com/docs/number"
}
if (columnType === "Text") {
return "https://docs.budibase.com/docs/text"
}
if (columnType === "Attachment") {
return "https://docs.budibase.com/docs/attachments"
}
if (columnType === "Multi-select") {
return "https://docs.budibase.com/docs/multi-select"
}
if (columnType === "JSON") {
return "https://docs.budibase.com/docs/json"
}
if (columnType === "Date/Time") {
return "https://docs.budibase.com/docs/datetime"
}
if (columnType === "User") {
return "https://docs.budibase.com/docs/user"
}
return ""
}
$: docLink = getDocLink(columnType);
let explanationModalSubject = null let explanationModalSubject = null
const handleMouseenter = (option) => { const setExplanationSubject = (option) => {
explanationModalSubject = option; explanationModalSubject = option;
root = root root = root
} }
const handleMouseleave = () => {
explanationModalSubject = null;
}
</script> </script>
<div <div
@ -68,83 +29,26 @@
class="tooltipContents" class="tooltipContents"
> >
<div class="line"> <Column
<span class="bullet">•</span> {columnName}
<InfoWord {columnIcon}
on:mouseenter={() => handleMouseenter("column")} {columnType}
on:mouseleave={handleMouseleave} {tableHref}
href={tableHref} {setExplanationSubject}
text={columnName} />
/> <Support
<span class="space" /> {support}
<span class="text"> is a </span> {setExplanationSubject}
<span class="space" /> />
<DocumentationLink
href={docLink}
icon={columnIcon}
text={`${columnType} column`}
/>
<span class="period">.</span>
</div>
<div class="line">
<span class="bullet">•</span>
<InfoWord
on:mouseenter={() => handleMouseenter("support")}
on:mouseleave={handleMouseleave}
href={tableHref}
icon={support.icon}
color={support.iconColor}
text={support.text}
/>
<span class="space" />
<span class="text">with</span>
<span class="space" />
<DocumentationLink
href="https://docs.budibase.com/docs/chart"
icon="GraphPie"
text="Chart components"
/>
<span class="period">.</span>
</div>
{#if support?.warnings?.includes(warnings.stringAsNumber)} {#if support?.warnings?.includes(warnings.stringAsNumber)}
<div class={`line`}> <StringNumber
<span class="bullet">•</span> {setExplanationSubject}
<span class="text">Any</span>
<span class="space" />
<InfoWord
on:mouseenter={() => handleMouseenter("stringsAndNumbers")}
on:mouseleave={handleMouseleave}
text="non-number values"
/> />
<span class="space" />
<span class="text">
will be ignored
</span>
<span class="period">.</span>
</div>
{/if} {/if}
{#if support?.warnings?.includes(warnings.notRequired)} {#if support?.warnings?.includes(warnings.notRequired)}
<div class={`line`}> <NotRequired
<span class="bullet">•</span> {setExplanationSubject}
<span class="text">No</span>
<span class="space" />
<InfoWord
on:mouseenter={() => handleMouseenter("required")}
on:mouseleave={handleMouseleave}
text="required"
/> />
<span class="space" />
<DocumentationLink
icon="DataUnavailable"
href="https://docs.budibase.com/docs/budibasedb#constraints"
text="Constraint"
/>
<span class="comma">,</span>
<span class="text">
so values may be missing
</span>
<span class="period">.</span>
</div>
{/if} {/if}
</div> </div>
@ -158,10 +62,6 @@
{/if} {/if}
<style> <style>
.text {
flex-shrink: 0;
}
.tooltipContents { .tooltipContents {
max-width: 450px; max-width: 450px;
background-color: var(--background-alt); background-color: var(--background-alt);
@ -170,49 +70,4 @@
border-radius: 5px; border-radius: 5px;
box-sizing: border-box; box-sizing: border-box;
} }
.bullet {
color: var(--grey-6);
font-size: 17px;
display: inline block;
margin-right: 10px;
}
.period {
color: var(--grey-6);
font-size: 20px;
display: inline block;
margin-left: 3px;
}
.comma {
margin-left: 2px;
color: var(--grey-6);
font-size: 17px;
display: inline block;
margin-right: 5px;
}
.semiColon {
color: var(--grey-5);
font-size: 16px;
display: inline block;
}
.space {
margin-right: 5px;
}
.line {
background-color: var(--background-alt);
color: var(--ink);
align-items: center;
display: flex;
margin-bottom: 10px;
}
.line:last-child {
margin-bottom: 0px;
}
</style> </style>

2
packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte
View File

@ -4,7 +4,7 @@
import { selectedScreen } from "stores/builder" import { selectedScreen } from "stores/builder"
import { createEventDispatcher } from "svelte" import { createEventDispatcher } from "svelte"
import Property from './Property.svelte' import Property from './Property.svelte'
import InfoWord from '../InfoWord.svelte' import { InfoWord } from '../typography'
export let anchor export let anchor
export let schema export let schema

56
packages/builder/src/components/design/settings/controls/FieldContext/lines/Column.svelte
View File

@ -1,9 +1,53 @@
<script> <script>
import { Line, InfoWord, DocumentationLink, Space, Text, Period } from "../typography"
export let columnName
export let columnIcon
export let columnType
export let tableHref
export let setExplanationSubject
const getDocLink = (columnType) => {
if (columnType === "Number") {
return "https://docs.budibase.com/docs/number"
}
if (columnType === "Text") {
return "https://docs.budibase.com/docs/text"
}
if (columnType === "Attachment") {
return "https://docs.budibase.com/docs/attachments"
}
if (columnType === "Multi-select") {
return "https://docs.budibase.com/docs/multi-select"
}
if (columnType === "JSON") {
return "https://docs.budibase.com/docs/json"
}
if (columnType === "Date/Time") {
return "https://docs.budibase.com/docs/datetime"
}
if (columnType === "User") {
return "https://docs.budibase.com/docs/user"
}
return ""
}
</script> </script>
<div> <Line>
</div> <InfoWord
on:mouseenter={() => setExplanationSubject("column")}
<style> on:mouseleave={() => setExplanationSubject(null)}
</style> href={tableHref}
text={columnName}
/>
<Space />
<Text>is a</Text>
<Space />
<DocumentationLink
href={getDocLink(columnType)}
icon={columnIcon}
text={`${columnType} column`}
/>
<Period />
</Line>

27
packages/builder/src/components/design/settings/controls/FieldContext/lines/NotRequired.svelte
View File

@ -1,9 +1,30 @@
<script> <script>
import { Line, InfoWord, DocumentationLink, Space, Text, Period, Comma } from "../typography"
export let setExplanationSubject
</script> </script>
<div>
</div> <Line>
<Text>No</Text>
<Space />
<InfoWord
on:mouseenter={() => setExplanationSubject("required")}
on:mouseleave={() => setExplanationSubject(null)}
text="required"
/>
<Space />
<DocumentationLink
icon="DataUnavailable"
href="https://docs.budibase.com/docs/budibasedb#constraints"
text="Constraint"
/>
<Comma />
<Text>
so values may be missing
</Text>
<Period />
</Line>
<style> <style>
</style> </style>

20
packages/builder/src/components/design/settings/controls/FieldContext/lines/StringNumber.svelte
View File

@ -1,9 +1,17 @@
<script> <script>
import { Line, InfoWord, DocumentationLink, Space, Text, Period } from "../typography"
export let setExplanationSubject
</script> </script>
<div> <Line>
</div> <Text>Any</Text>
<Space />
<style> <InfoWord
</style> on:mouseenter={() => setExplanationSubject("stringsAndNumbers")}
on:mouseleave={() => setExplanationSubject(null)}
text="non-number values"
/>
<Space />
<Text>will be ignored</Text>
<Period />
</Line>

27
packages/builder/src/components/design/settings/controls/FieldContext/lines/Support.svelte
View File

@ -1,8 +1,25 @@
<script> <script>
import { Line, InfoWord, DocumentationLink, Space, Text, Period } from "../typography"
export let setExplanationSubject
export let support
</script> </script>
<div> <Line>
</div> <InfoWord
on:mouseenter={() => setExplanationSubject("support")}
<style> on:mouseleave={() => setExplanationSubject(null)}
</style> icon={support.icon}
color={support.iconColor}
text={support.text}
/>
<Space />
<Text>with</Text>
<Space />
<DocumentationLink
href="https://docs.budibase.com/docs/chart"
icon="GraphPie"
text="Chart components"
/>
<Period />
</Line>

7
packages/builder/src/components/design/settings/controls/FieldContext/typography/Text.svelte Normal file
View File

@ -0,0 +1,7 @@
<span class="text"><slot /></span>
<style>
.text {
flex-shrink: 0;
}
</style>

2
packages/builder/src/components/design/settings/controls/FieldContext/typography/index.js
View File

@ -1,5 +1,7 @@
export { default as Space } from "./Space.svelte" export { default as Space } from "./Space.svelte"
export { default as Comma } from "./Comma.svelte" export { default as Comma } from "./Comma.svelte"
export { default as Period } from "./Period.svelte" export { default as Period } from "./Period.svelte"
export { default as Text } from "./Text.svelte"
export { default as InfoWord } from "./InfoWord.svelte" export { default as InfoWord } from "./InfoWord.svelte"
export { default as DocumentationLink } from "./DocumentationLink.svelte" export { default as DocumentationLink } from "./DocumentationLink.svelte"
export { default as Line } from "./Line.svelte"