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

wip

This commit is contained in:
Gerard Burns 2023-11-23 14:09:14 +00:00
parent 5824425020
commit e0e27aa3c9
3 changed files with 55 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
View File

@ -3,42 +3,28 @@
import AppPreview from "./AppPreview.svelte" import AppPreview from "./AppPreview.svelte"
import { store, screenHistoryStore } from "builderStore" import { store, screenHistoryStore } from "builderStore"
import UndoRedoControl from "components/common/UndoRedoControl.svelte" import UndoRedoControl from "components/common/UndoRedoControl.svelte"
import { getHorizontalResizeActions } from './resizable';
const [resizable, resizableHandle] = getHorizontalResizeActions();
</script> </script>
<div class="app-panel"> <div class="app-panel">
<div class="content"> <div class="header">
<div class="header"> <div class="header-left">
<div class="header-left"> <UndoRedoControl store={screenHistoryStore} />
<UndoRedoControl store={screenHistoryStore} />
</div>
<div class="header-right">
{#if $store.clientFeatures.devicePreview}
<DevicePreviewSelect />
{/if}
</div>
</div> </div>
<div class="content"> <div class="header-right">
{#key $store.version} {#if $store.clientFeatures.devicePreview}
<AppPreview /> <DevicePreviewSelect />
{/key} {/if}
</div> </div>
</div> </div>
<div <div class="content">
role="separator" {#key $store.version}
class="divider" <AppPreview />
use:resizableHandle {/key}
/> </div>
</div> </div>
<style> <style>
.app-panel { .app-panel {
display: flex;
}
.content {
flex: 1 1 auto; flex: 1 1 auto;
overflow-y: auto; overflow-y: auto;
display: flex; display: flex;
@ -66,8 +52,4 @@
.content { .content {
flex: 1 1 auto; flex: 1 1 auto;
} }
.divider {
g
}
</style> </style>

46
packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
View File

@ -1,21 +1,59 @@
<script> <script>
import ScreenList from "./ScreenList/index.svelte" import ScreenList from "./ScreenList/index.svelte"
import ComponentList from "./ComponentList/index.svelte" import ComponentList from "./ComponentList/index.svelte"
import { getHorizontalResizeActions } from './ScreenList/resizable';
const [resizable, resizableHandle] = getHorizontalResizeActions();
</script> </script>
<div class="panel"> <div class="panel" use:resizable>
<ScreenList /> <div class="content">
<ComponentList /> <ScreenList />
<ComponentList />
</div>
<div
class="divider"
>
<div class="dividerClickExtender"
role="separator"
use:resizableHandle
/>
</div>
</div> </div>
<style> <style>
.panel { .panel {
display: flex;
min-width: 250px;
width: 310px; width: 310px;
height: 100%; height: 100%;
border-right: var(--border-light); }
.content {
flex-grow: 1;
height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: var(--background); background: var(--background);
position: relative; position: relative;
} }
.divider {
position: relative;
height: 100%;
width: 2px;
background: var(--spectrum-global-color-gray-200);
transition: background 130ms ease-out;
}
.divider:hover {
background: var(--spectrum-global-color-gray-300);
cursor: row-resize;
}
.dividerClickExtender {
position: absolute;
cursor: row-resize;
height: 100%;
width: 12px;
}
</style> </style>

1
packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/resizable.js
View File

@ -20,6 +20,7 @@ const getResizeActions = (cssProperty, mouseMoveEventProperty, elementProperty,
let startPosition = null; let startPosition = null;
const handleMouseMove = (e) => { const handleMouseMove = (e) => {
e.preventDefault(); // Prevent highlighting while dragging
const change = e[mouseMoveEventProperty] - startPosition; const change = e[mouseMoveEventProperty] - startPosition;
element.style[cssProperty] = `${startProperty + change}px` element.style[cssProperty] = `${startProperty + change}px`
} }