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

Add component icon to custom css (#12741) 

* Add component icon to custom css

* Remove span

* Refactor
This commit is contained in:
melohagan 2024-01-10 12:22:42 +00:00 committed by GitHub
parent ba96b5695e
commit 4ea1e598a4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 33 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
View File

@ -108,6 +108,8 @@
{componentInstance} {componentInstance}
{componentDefinition} {componentDefinition}
{bindings} {bindings}
iconTooltip={componentName}
componentTitle={title}
/> />
{/if} {/if}
{#if section == "conditions"} {#if section == "conditions"}

32
packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte
View File

@ -5,6 +5,9 @@
Drawer, Drawer,
Button, Button,
notifications, notifications,
AbsTooltip,
Icon,
Body,
} from "@budibase/bbui" } from "@budibase/bbui"
import { selectedScreen, store } from "builderStore" import { selectedScreen, store } from "builderStore"
import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte" import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte"
@ -15,6 +18,9 @@
} from "builderStore/dataBinding" } from "builderStore/dataBinding"
export let componentInstance export let componentInstance
export let componentDefinition
export let iconTooltip
export let componentTitle
let tempValue let tempValue
let drawer let drawer
@ -24,6 +30,8 @@
$store.selectedComponentId $store.selectedComponentId
) )
$: icon = componentDefinition?.icon
const openDrawer = () => { const openDrawer = () => {
tempValue = runtimeToReadableBinding( tempValue = runtimeToReadableBinding(
bindings, bindings,
@ -54,7 +62,19 @@
{#key componentInstance?._id} {#key componentInstance?._id}
<Drawer bind:this={drawer} title="Custom CSS"> <Drawer bind:this={drawer} title="Custom CSS">
<svelte:fragment slot="description"> <svelte:fragment slot="description">
Custom CSS overrides all other component styles. <div class="header">
Your CSS will overwrite styles for:
{#if icon}
<AbsTooltip type="info" text={iconTooltip}>
<Icon
color={`var(--spectrum-global-color-gray-600)`}
size="S"
name={icon}
/>
</AbsTooltip>
<Body size="S"><b>{componentTitle || ""}</b></Body>
{/if}
</div>
</svelte:fragment> </svelte:fragment>
<Button cta slot="buttons" on:click={save}>Save</Button> <Button cta slot="buttons" on:click={save}>Save</Button>
<svelte:component <svelte:component
@ -68,3 +88,13 @@
/> />
</Drawer> </Drawer>
{/key} {/key}
<style>
.header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: var(--spacing-m);
}
</style>