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

Improve performance when determining client component icons and update layout to allow for a better visual selection of the navigation section

This commit is contained in:
Andrew Kingston 2022-05-23 12:22:42 +01:00
parent 123f091730
commit d4a551f80a
5 changed files with 12 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/client/src/components/Component.svelte
View File

@ -88,6 +88,7 @@
$: children = instance._children || [] $: children = instance._children || []
$: id = instance._id $: id = instance._id
$: name = isScreen ? "Screen" : instance._instanceName $: name = isScreen ? "Screen" : instance._instanceName
$: icon = definition?.icon
// Determine if the component is selected or is part of the critical path // Determine if the component is selected or is part of the critical path
// leading to the selected component // leading to the selected component
@ -419,6 +420,7 @@
class:block={isBlock} class:block={isBlock}
data-id={id} data-id={id}
data-name={name} data-name={name}
data-icon={icon}
> >
<svelte:component this={constructor} bind:this={ref} {...initialSettings}> <svelte:component this={constructor} bind:this={ref} {...initialSettings}>
{#if children.length} {#if children.length}

7
packages/client/src/components/app/Layout.svelte
View File

@ -69,7 +69,6 @@
) { ) {
const node = document.getElementsByClassName("nav-wrapper")?.[0] const node = document.getElementsByClassName("nav-wrapper")?.[0]
if (node) { if (node) {
console.log("scroll")
node.style.scrollMargin = "100px" node.style.scrollMargin = "100px"
node.scrollIntoView({ node.scrollIntoView({
behavior: "smooth", behavior: "smooth",
@ -245,8 +244,6 @@
align-items: stretch; align-items: stretch;
background: var(--navBackground); background: var(--navBackground);
z-index: 2; z-index: 2;
border-bottom: 1px solid var(--spectrum-global-color-gray-300);
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
} }
.nav-wrapper.clickable { .nav-wrapper.clickable {
cursor: pointer; cursor: pointer;
@ -299,6 +296,10 @@
align-items: stretch; align-items: stretch;
flex: 1 1 auto; flex: 1 1 auto;
z-index: 1; z-index: 1;
border-top: 1px solid var(--spectrum-global-color-gray-300);
}
.layout--none .main-wrapper {
border-top: none;
} }
.main { .main {
display: flex; display: flex;

1
packages/client/src/components/preview/DNDHandler.svelte
View File

@ -175,6 +175,7 @@
dropInfo = { dropInfo = {
target, target,
name: element.dataset.name, name: element.dataset.name,
icon: element.dataset.icon,
droppableInside: element.classList.contains("empty"), droppableInside: element.classList.contains("empty"),
bounds, bounds,
} }

2
packages/client/src/components/preview/DNDPositionIndicator.svelte
View File

@ -10,6 +10,7 @@
$: dimensions = getDimensions(dropInfo) $: dimensions = getDimensions(dropInfo)
$: prefix = dropInfo?.mode === "above" ? "Before" : "After" $: prefix = dropInfo?.mode === "above" ? "Before" : "After"
$: text = `${prefix} ${dropInfo?.name}` $: text = `${prefix} ${dropInfo?.name}`
$: icon = dropInfo?.icon
$: renderKey = `${dropInfo?.target}-${dropInfo?.side}` $: renderKey = `${dropInfo?.target}-${dropInfo?.side}`
const getDimensions = info => { const getDimensions = info => {
@ -54,6 +55,7 @@
width={dimensions.width} width={dimensions.width}
height={dimensions.height} height={dimensions.height}
{text} {text}
{icon}
{zIndex} {zIndex}
{color} {color}
{transition} {transition}

13
packages/client/src/components/preview/IndicatorSet.svelte
View File

@ -17,25 +17,12 @@
$: visibleIndicators = indicators.filter(x => x.visible) $: visibleIndicators = indicators.filter(x => x.visible)
$: offset = $builderStore.inBuilder ? 0 : 2 $: offset = $builderStore.inBuilder ? 0 : 2
$: getComponentIcon(componentId)
let updating = false let updating = false
let observers = [] let observers = []
let callbackCount = 0 let callbackCount = 0
let nextIndicators = [] let nextIndicators = []
const getComponentIcon = id => {
if (!id) {
return
}
const component = componentStore.actions.getComponentById(id)
const type = component?._component
const definition = componentStore.actions.getComponentDefinition(type)
if (definition?.icon) {
icon = definition.icon
}
}
const createIntersectionCallback = idx => entries => { const createIntersectionCallback = idx => entries => {
if (callbackCount >= observers.length) { if (callbackCount >= observers.length) {
return return