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

wip component infoword

This commit is contained in:
Gerard Burns 2024-04-08 08:14:56 +01:00
parent 203d13881d
commit 95878f445a
2 changed files with 83 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,6 +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'
export let supportLevelClass = '' export let supportLevelClass = ''
export let supportLevelIcon = "" export let supportLevelIcon = ""
@ -220,30 +221,27 @@
<span class="heading">Data/Component Compatibility</span> <span class="heading">Data/Component Compatibility</span>
<div class="divider" /> <div class="divider" />
<div class="section"> <div class="section">
<div <InfoWord
class={`chip supportChip supportLevelSupported`} icon="CheckmarkCircle"
> color="var(--green)"
<Icon size="S" name={"CheckmarkCircle"} /> text="Compatible"
<span class="text">Compatible</span> />
</div>
<span class="body">Fully compatible with the component as long as the data is present.</span> <span class="body">Fully compatible with the component as long as the data is present.</span>
</div> </div>
<div class="section"> <div class="section">
<div <InfoWord
class={`chip supportChip supportLevelPartialSupport`} icon="AlertCheck"
> color="var(--yellow)"
<Icon size="S" name={"AlertCheck"} /> text="Possibly compatible"
<span class="text">Partially compatible</span> />
</div> <span class="body">Possibly compatible with the component, but beware of other caveats mentioned in the context tooltip.</span>
<span class="body">Potentionally compatible with the component, but beware of other caveats mentioned in the context tooltip.</span>
</div> </div>
<div class="section"> <div class="section">
<div <InfoWord
class={`chip supportChip supportLevelUnsupported`} icon="Alert"
> color="var(--red)"
<Icon size="S" name={"Alert"} /> text="Not compatible"
<span class="text">Not compatible</span> />
</div>
<span class="body">Imcompatible with the component.</span> <span class="body">Imcompatible with the component.</span>
</div> </div>
@ -303,24 +301,6 @@
box-sizing: border-box; box-sizing: border-box;
} }
.chip {
box-sizing: border-box;
display: inline-flex;
padding: 3px 6px;
border-radius: 5px;
vertical-align: sub;
filter: brightness(100%);
}
.chip:hover {
filter: brightness(120%);
transition: filter 300ms
}
.chip :global(svg) {
color: var(--grey-6);
}
.columnName { .columnName {
vertical-align: baseline; vertical-align: baseline;
background-color: var(--grey-3); background-color: var(--grey-3);
@ -380,8 +360,22 @@
.topLine .space { .topLine .space {
} }
.topLine .text { .chip {
flex-shrink: 0; box-sizing: border-box;
display: inline-flex;
padding: 3px 6px;
border-radius: 5px;
vertical-align: sub;
filter: brightness(100%);
}
.chip:hover {
filter: brightness(120%);
transition: filter 300ms
}
.chip :global(svg) {
color: var(--grey-6);
} }
.topLine .period { .topLine .period {
@ -410,10 +404,6 @@
margin-bottom: 0px; margin-bottom: 0px;
} }
.line > .text {
display: inline;
}
.link { .link {
border-radius: 0; border-radius: 0;
background-color: transparent; background-color: transparent;

50
packages/builder/src/components/design/settings/controls/FieldContext/InfoWord.svelte Normal file
View File

@ -0,0 +1,50 @@
<script>
import { Icon } from "@budibase/bbui"
export let icon = ""
export let color = "initial"
export let text = ""
</script>
<div
role="tooltip"
class="chip"
style:color={color}
style:border-color={color}
on:mouseenter
on:mouseleave
>
<Icon size="S" name={icon} />
<span class="text">
<slot>
{text}
</slot>
</span>
</div>
<style>
.chip {
display: inline-flex;
box-sizing: border-box;
padding: 3px 6px;
border-radius: 5px;
vertical-align: sub;
filter: brightness(100%);
background-color: var(--grey-3);
border: 1px solid var(--grey-3);
}
.chip:hover {
filter: brightness(120%);
transition: filter 300ms
}
.chip :global(svg) {
color: inherit;
margin-right: 5px;
}
.text {
color: var(--ink);
flex-shrink: 0;
}
</style>