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

Multiple style improvements and pixel layout fixes

This commit is contained in:
Andrew Kingston 2024-07-31 15:03:29 +01:00
parent e385c7291c
commit de9b80e23d
No known key found for this signature in database
5 changed files with 17 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/client/src/components/ClientApp.svelte
View File

@ -356,22 +356,16 @@
} }
/* Preview styles */ /* Preview styles */
/* The additional 6px of size is to account for 4px padding and 2px border */
#clip-root.preview { #clip-root.preview {
padding: 2px; padding: 6px;
} }
#clip-root.tablet-preview { #clip-root.tablet-preview {
width: calc(1024px + 6px); width: calc(1024px + 12px);
height: calc(768px + 6px); height: calc(768px + 12px);
} }
#clip-root.mobile-preview { #clip-root.mobile-preview {
width: calc(390px + 6px); width: calc(390px + 12px);
height: calc(844px + 6px); height: calc(844px + 12px);
}
.preview #app-root {
border: 1px solid var(--spectrum-global-color-gray-300);
border-radius: 4px;
} }
/* Print styles */ /* Print styles */

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

@ -619,6 +619,7 @@
if (isBlock) { if (isBlock) {
return return
} }
console.log("select", id)
e.stopPropagation() e.stopPropagation()
builderStore.actions.selectComponent(id) builderStore.actions.selectComponent(id)
} }
@ -691,7 +692,7 @@
data-parent={$component.id} data-parent={$component.id}
style={wrapperCSS} style={wrapperCSS}
{draggable} {draggable}
on:click={handleWrapperClick} on:click|self={handleWrapperClick}
> >
{#if errorState} {#if errorState}
<ComponentErrorState <ComponentErrorState

1
packages/client/src/components/app/container/GridContainer.svelte
View File

@ -96,6 +96,7 @@
.grid :global(> .component) { .grid :global(> .component) {
display: flex; display: flex;
overflow: auto; overflow: auto;
pointer-events: all;
/* On desktop, use desktop metadata and fall back to mobile */ /* On desktop, use desktop metadata and fall back to mobile */
/* Position vars */ /* Position vars */

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

@ -69,7 +69,7 @@
z-index: var(--zIndex); z-index: var(--zIndex);
border: 2px solid var(--color); border: 2px solid var(--color);
pointer-events: none; pointer-events: none;
border-radius: 2px; border-radius: 4px;
} }
.indicator.withText { .indicator.withText {
border-top-left-radius: 0; border-top-left-radius: 0;
@ -123,7 +123,7 @@
/* Anchor */ /* Anchor */
.anchor { .anchor {
--size: 24px; --size: 20px;
position: absolute; position: absolute;
width: var(--size); width: var(--size);
height: var(--size); height: var(--size);
@ -133,11 +133,12 @@
border-radius: 50%; border-radius: 50%;
} }
.anchor-inner { .anchor-inner {
width: 12px; width: calc(var(--size) / 2);
height: 12px; height: calc(var(--size) / 2);
background: white; background: white;
border: 2px solid var(--color); border: 2px solid var(--color);
pointer-events: none; pointer-events: none;
border-radius: 2px;
} }
.anchor.right { .anchor.right {
right: calc(var(--size) / -2 - 1px); right: calc(var(--size) / -2 - 1px);

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

@ -11,6 +11,8 @@
export let prefix = null export let prefix = null
export let allowResizeAnchors = false export let allowResizeAnchors = false
// Offset = 6 (clip-root padding) - 1 (half the border thickness)
const offset = 6 - 1
const config = memo($$props) const config = memo($$props)
const errorColor = "var(--spectrum-global-color-static-red-600)" const errorColor = "var(--spectrum-global-color-static-red-600)"
const defaultState = () => ({ const defaultState = () => ({
@ -146,11 +148,10 @@
}) })
observer.observe(child) observer.observe(child)
observers.push(observer) observers.push(observer)
const elBounds = child.getBoundingClientRect() const elBounds = child.getBoundingClientRect()
nextState.indicators.push({ nextState.indicators.push({
top: Math.round(elBounds.top + scrollY - deviceBounds.top + 1), top: Math.round(elBounds.top + scrollY - deviceBounds.top + offset),
left: Math.round(elBounds.left + scrollX - deviceBounds.left + 1), left: Math.round(elBounds.left + scrollX - deviceBounds.left + offset),
width: Math.round(elBounds.width + 2), width: Math.round(elBounds.width + 2),
height: Math.round(elBounds.height + 2), height: Math.round(elBounds.height + 2),
visible: false, visible: false,