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

Hide resize indicators when they don't fit

This commit is contained in:
Andrew Kingston 2024-08-09 19:09:32 +01:00
parent aaa33acc1c
commit 8aa0407236
No known key found for this signature in database
2 changed files with 14 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/client/src/components/preview/Indicator.svelte
View File

@ -34,6 +34,8 @@
class:line class:line
style="top: {top}px; left: {left}px; width: {width}px; height: {height}px; --color: {color}; --zIndex: {zIndex};" style="top: {top}px; left: {left}px; width: {width}px; height: {height}px; --color: {color}; --zIndex: {zIndex};"
class:withText={!!text} class:withText={!!text}
class:vCompact={height < 40}
class:hCompact={width < 40}
> >
{#if text || icon} {#if text || icon}
<div class="label" class:flipped class:line class:right={alignRight}> <div class="label" class:flipped class:line class:right={alignRight}>
@ -153,15 +155,23 @@
} }
.anchor.right .anchor-inner, .anchor.right .anchor-inner,
.anchor.left .anchor-inner { .anchor.left .anchor-inner {
height: calc(var(--size) * 1.4); height: calc(var(--size) * 1.2);
width: calc(var(--size) * 0.3); width: calc(var(--size) * 0.3);
} }
.anchor.top .anchor-inner, .anchor.top .anchor-inner,
.anchor.bottom .anchor-inner { .anchor.bottom .anchor-inner {
width: calc(var(--size) * 1.4); width: calc(var(--size) * 1.2);
height: calc(var(--size) * 0.3); height: calc(var(--size) * 0.3);
} }
/* Hide side indicators when they don't fit */
.indicator.hCompact .anchor.top,
.indicator.hCompact .anchor.bottom,
.indicator.vCompact .anchor.left,
.indicator.vCompact .anchor.right {
display: none;
}
/* Anchor positions */ /* Anchor positions */
.anchor.right { .anchor.right {
left: calc(100% + 1px); left: calc(100% + 1px);

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

@ -1,9 +1,8 @@
<script> <script>
import { onMount, onDestroy } from "svelte" import { onMount, onDestroy } from "svelte"
import Indicator from "./Indicator.svelte" import Indicator from "./Indicator.svelte"
import { componentStore, builderStore } from "stores" import { builderStore } from "stores"
import { memo, Utils } from "@budibase/frontend-core" import { memo, Utils } from "@budibase/frontend-core"
import { writable } from "svelte/store"
import { isGridChild } from "utils/grid" import { isGridChild } from "utils/grid"
export let componentId = null export let componentId = null
@ -51,15 +50,8 @@
}) })
$: $config, debouncedUpdate() $: $config, debouncedUpdate()
// Update position when component state changes
$: instance = componentStore.actions.getComponentInstance(componentId)
$: componentState = $instance?.state || writable()
$: $componentState, debouncedUpdate()
const checkInsideGrid = id => { const checkInsideGrid = id => {
const component = document.getElementsByClassName(id)[0] return isGridChild(document.getElementsByClassName(id)[0])
const domNode = component?.children[0]
return isGridChild(domNode)
} }
const createIntersectionCallback = idx => entries => { const createIntersectionCallback = idx => entries => {