CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-02 21:10:43 +12:00
Code Issues Projects Releases Wiki Activity

Prevent hovering over layout components when editing screens

Browse source
This commit is contained in:
Andrew Kingston 2021-06-11 13:34:37 +01:00
parent 63c3310a8f
commit 4a3c480b26
3 changed files with 9 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/client/src/components/Component.svelte
View file

@ -25,6 +25,7 @@
// Get contexts // Get contexts
const context = getContext("context") const context = getContext("context")
const insideScreenslot = !!getContext("screenslot")
// Create component context // Create component context
const componentStore = writable({}) const componentStore = writable({})
@ -45,12 +46,13 @@
$: selected = $: selected =
$builderStore.inBuilder && $builderStore.inBuilder &&
$builderStore.selectedComponentId === instance._id $builderStore.selectedComponentId === instance._id
$: interactive = $builderStore.previewType === "layout" || insideScreenslot
// Update component context // Update component context
$: componentStore.set({ $: componentStore.set({
id, id,
children: children.length, children: children.length,
styles: { ...instance._styles, id, empty }, styles: { ...instance._styles, id, empty, interactive },
empty, empty,
transition: instance._transition, transition: instance._transition,
selected, selected,
@ -116,7 +118,7 @@
<div <div
class={`component ${id}`} class={`component ${id}`}
data-type="component" data-type={interactive ? "component" : ""}
data-id={id} data-id={id}
data-name={name} data-name={name}
> >

4
packages/client/src/components/Router.svelte
View file

@ -1,12 +1,12 @@
<script> <script>
import { getContext } from "svelte" import { setContext, getContext } from "svelte"
import Router from "svelte-spa-router" import Router from "svelte-spa-router"
import { routeStore } from "../store" import { routeStore } from "../store"
import Screen from "./Screen.svelte" import Screen from "./Screen.svelte"
import { onMount } from "svelte"
const { styleable } = getContext("sdk") const { styleable } = getContext("sdk")
const component = getContext("component") const component = getContext("component")
setContext("screenslot", true)
// Only wrap this as an array to take advantage of svelte keying, // Only wrap this as an array to take advantage of svelte keying,
// to ensure the svelte-spa-router is fully remounted when route config // to ensure the svelte-spa-router is fully remounted when route config

4
packages/client/src/utils/styleable.js
View file

@ -60,7 +60,9 @@ export const styleable = (node, styles = {}) => {
// Handler to select a component in the builder when clicking it in the // Handler to select a component in the builder when clicking it in the
// builder preview // builder preview
selectComponent = event => { selectComponent = event => {
builderStore.actions.selectComponent(componentId) if (newStyles.interactive) {
builderStore.actions.selectComponent(componentId)
}
event.preventDefault() event.preventDefault()
event.stopPropagation() event.stopPropagation()
return false return false