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

Improve client app overflow and selection indicators

This commit is contained in:
Andrew Kingston 2021-06-08 15:16:37 +01:00
parent 3a6b627609
commit 4138103f68
7 changed files with 24 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/builder/src/components/design/AppPreview/iframeTemplate.js
View File

@ -18,6 +18,7 @@ export default `
padding: 0; padding: 0;
height: 100%; height: 100%;
width: 100%; width: 100%;
overflow: hidden;
} }
body { body {
padding: 2px; padding: 2px;

1
packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte
View File

@ -194,7 +194,6 @@
padding: var(--spacing-l) 40px var(--spacing-xl) 40px; padding: var(--spacing-l) 40px var(--spacing-xl) 40px;
} }
.preview-content { .preview-content {
background: var(--background);
box-shadow: 0 0 12px rgba(0, 0, 0, 0.05); box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
flex: 1 1 auto; flex: 1 1 auto;
} }

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

@ -64,7 +64,9 @@
class="spectrum spectrum--medium spectrum--light" class="spectrum spectrum--medium spectrum--light"
> >
<Provider key="user" data={$authStore} {actions}> <Provider key="user" data={$authStore} {actions}>
<Component definition={$screenStore.activeLayout.props} /> <div id="app-root">
<Component definition={$screenStore.activeLayout.props} />
</div>
<NotificationDisplay /> <NotificationDisplay />
{#key $builderStore.selectedComponentId} {#key $builderStore.selectedComponentId}
{#if $builderStore.inBuilder && $builderStore.selectedComponent} {#if $builderStore.inBuilder && $builderStore.selectedComponent}
@ -78,9 +80,16 @@
{/if} {/if}
<style> <style>
div { #spectrum-root {
background: transparent;
height: 100%; height: 100%;
width: 100%;
overflow: hidden;
}
#app-root {
height: 100%;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
position: relative; position: relative;
} }
</style> </style>

9
packages/client/src/components/HoverIndicator.svelte
View File

@ -3,7 +3,6 @@
import { builderStore } from "../store" import { builderStore } from "../store"
import Indicator from "./Indicator.svelte" import Indicator from "./Indicator.svelte"
const offset = 2
let indicators = [] let indicators = []
let interval let interval
let componentId let componentId
@ -24,10 +23,10 @@
if (child) { if (child) {
const elBounds = child.getBoundingClientRect() const elBounds = child.getBoundingClientRect()
newIndicators.push({ newIndicators.push({
top: elBounds.top + scrollY - offset * 2, top: elBounds.top + scrollY - 2,
left: elBounds.left + scrollX - offset * 2, left: elBounds.left + scrollX - 2,
width: elBounds.width + offset * 2, width: elBounds.width + 4,
height: elBounds.height + offset * 2, height: elBounds.height + 4,
}) })
} }
} }

1
packages/client/src/components/Router.svelte
View File

@ -41,5 +41,6 @@
<style> <style>
div { div {
position: relative; position: relative;
overflow-x: auto;
} }
</style> </style>

9
packages/client/src/components/SelectionIndicator.svelte
View File

@ -3,7 +3,6 @@
import { builderStore } from "../store" import { builderStore } from "../store"
import Indicator from "./Indicator.svelte" import Indicator from "./Indicator.svelte"
const offset = 2
let indicators = [] let indicators = []
let interval let interval
@ -21,10 +20,10 @@
if (child) { if (child) {
const elBounds = child.getBoundingClientRect() const elBounds = child.getBoundingClientRect()
newIndicators.push({ newIndicators.push({
top: elBounds.top + scrollY - offset * 2, top: elBounds.top + scrollY - 2,
left: elBounds.left + scrollX - offset * 2, left: elBounds.left + scrollX - 2,
width: elBounds.width + offset * 2, width: elBounds.width + 4,
height: elBounds.height + offset * 2, height: elBounds.height + 4,
}) })
} }
} }

4
packages/client/src/components/SettingsBar.svelte
View File

@ -45,9 +45,9 @@
if (newLeft < 0 || newLeft + width > innerWidth) { if (newLeft < 0 || newLeft + width > innerWidth) {
newLeft = elBounds.left + scrollX - horizontalOffset newLeft = elBounds.left + scrollX - horizontalOffset
if (newLeft < 0 || newLeft + width > innerWidth) { if (newLeft < 0 || newLeft + width > innerWidth) {
newLeft = innerWidth - width - 20 newLeft = elBounds.right + scrollX - width + horizontalOffset
if (newLeft < 0 || newLeft + width > innerWidth) { if (newLeft < 0 || newLeft + width > innerWidth) {
newLeft = 0 newLeft = horizontalOffset
} }
} }
} }