CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-17 17:57:47 +12:00
Code Issues Projects Releases Wiki Activity

Working after breakout

Browse source
This commit is contained in:
Gerard Burns 2024-04-04 08:56:46 +01:00
parent 5e87f1dcd4
commit aa8795bc83
2 changed files with 146 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

124
packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte Normal file
View file

@ -0,0 +1,124 @@
<script>
import { Icon, Heading, Multiselect, ContextTooltip } from "@budibase/bbui"
import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
import { selectedScreen } from "stores/builder"
import { createEventDispatcher } from "svelte"
export let supportLevelClass = ''
export let supportLevelIcon = ""
export let supportLevelIconTooltip = ""
export let supportLevelText = ""
export let columnIcon
export let columnName
export let errors = []
export let warnings = []
</script>
<div
class={`tooltipContents ${supportLevelClass}`}
>
<div class={`supportLevel ${supportLevelClass}`}>
<Icon tooltip={supportLevelIconTooltip} name={supportLevelIcon} />
<p>{supportLevelText}</p>
</div>
<div class="contextTooltipContent">
<div class="contextTooltipHeader">
<Icon name={columnIcon} />
<span>{columnName}</span>
</div>
{#if errors.length > 0}
{#each errors as datum}
<p>{datum}</p>
{/each}
{:else if warnings.length > 0}
{#each warnings as datum}
<p>{datum}</p>
{/each}
{/if}
</div>
</div>
<style>
.tooltipContents {
max-width: 400px;
background-color: var(--spectrum-global-color-gray-200);
display: block;
padding: 0 0 12px 0 ;
border-radius: 5px;
box-sizing: border-box;
}
.tooltipContents.supportLevelUnsupported {
background-color: var(--red);
color: var(--ink)
}
.tooltipContents.supportLevelPartialSupport {
background-color: var(--yellow);
color: var(--ink)
}
.tooltipContents.supportLevelSupported {
background-color: var(--green);
color: var(--ink)
}
.contextTooltipHeader {
background-color: var(--background-alt);
color: var(--ink);
display: flex;
align-items: center;
height: var(--spectrum-alias-item-height-m);
padding: 0px var(--spectrum-alias-item-padding-m);
border-width: var(--spectrum-actionbutton-border-size);
border-radius: var(--spectrum-alias-border-radius-regular);
border: 1px solid
var(
--spectrum-actionbutton-m-border-color,
var(--spectrum-alias-border-color)
);
}
.contextTooltipContent {
padding: 0px 12px;
color: black;
}
.contextTooltipHeader :global(svg) {
margin-right: 5px;
}
.contextTooltipHeader :global(span) {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.supportLevel {
display: flex;
align-items: center;
height: var(--spectrum-alias-item-height-m);
padding: 0px var(--spectrum-alias-item-padding-m);
margin-bottom: 12px;
color: black;
}
.supportLevel :global(svg) {
margin-right: 5px;
}
.supportLevel.supportLevelUnsupported {
background-color: var(--red-light)
}
.supportLevel.supportLevelPartialSupport {
background-color: var(--yellow-light)
}
.supportLevel.supportLevelSupported {
background-color: var(--green-light)
}
</style>

70
packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
View file

@ -4,6 +4,7 @@
import { selectedScreen } from "stores/builder"
import { createEventDispatcher } from "svelte"
import { validators, constants as validatorConstants } from "../fieldValidator";
import ChartFieldContext from './FieldContext/Chart.svelte'
export let componentInstance = {}
export let value = ""
@ -197,54 +198,27 @@
anchor={contextTooltipAnchor}
offset={20}
>
<div
class={`tooltipContents ${currentOptionSupport.class}`}
>
<div class={`supportLevel ${currentOptionSupport.class}`}>
<Icon tooltip={currentOptionSupport.iconTooltip} name={currentOptionSupport.icon} />
<p>{currentOptionSupport.text}</p>
</div>
<div class="contextTooltipContent">
<div class="contextTooltipHeader">
<Icon name={getOptionIcon(currentOption)} />
<span>{getOptionIconTooltip(currentOption)}</span>
</div>
{#if fieldSupport[currentOption]?.errors?.length > 0}
{#each (fieldSupport[currentOption].errors) as datum}
<p>{datum}</p>
{/each}
{:else if fieldSupport[currentOption]?.warnings?.length > 0}
{#each (fieldSupport[currentOption].warnings) as datum}
<p>{datum}</p>
{/each}
{/if}
</div>
</div>
<div slot="previous"
class={`tooltipContents ${previousOptionSupport.class}`}
>
<div class={`supportLevel ${previousOptionSupport.class}`}>
<Icon tooltip={previousOptionSupport.iconTooltip} name={previousOptionSupport.icon} />
<p>{previousOptionSupport.text}</p>
</div>
<div class="contextTooltipContent">
<div class="contextTooltipHeader">
<Icon name={getOptionIcon(previousOption)} />
<span>{getOptionIconTooltip(previousOption)}</span>
</div>
{#if fieldSupport[previousOption]?.errors?.length > 0}
{#each (fieldSupport[previousOption].errors) as datum}
<p>{datum}</p>
{/each}
{:else if fieldSupport[previousOption]?.warnings?.length > 0}
{#each (fieldSupport[previousOption].warnings) as datum}
<p>{datum}</p>
{/each}
{/if}
</div>
</div>
<ChartFieldContext
supportLevelClass={currentOptionSupport.class}
supportLevelIcon={currentOptionSupport.icon}
supportLevelIconTooltip={currentOptionSupport.iconTooltip}
supportLevelText={currentOptionSupport.text}
columnIcon={getOptionIcon(currentOption)}
columnName={getOptionIconTooltip(currentOption)}
errors={fieldSupport[currentOption]?.errors}
warnings={fieldSupport[currentOption]?.warnings}
/>
<ChartFieldContext
slot="previous"
supportLevelClass={previousOptionSupport.class}
supportLevelIcon={previousOptionSupport.icon}
supportLevelIconTooltip={previousOptionSupport.iconTooltip}
supportLevelText={previousOptionSupport.text}
columnIcon={getOptionIcon(previousOption)}
columnName={getOptionIconTooltip(previousOption)}
errors={fieldSupport[previousOption]?.errors}
warnings={fieldSupport[previousOption]?.warnings}
/>
</ContextTooltip>
<style>