CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-29 16:51:33 +13:00
Code Issues Projects Releases Wiki Activity

add setup to go to page-layout screen

Browse source
This commit is contained in:
kevmodrome 2020-04-28 15:28:31 +02:00
parent 6cc8d7982e
commit eb1d2dc337
4 changed files with 47 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
View file

@ -1,4 +1,5 @@
<script>
import { params, goto } from "@sveltech/routify"
import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"
import { last, sortBy, map, trimCharsStart, trimChars, join } from "lodash/fp"
@ -15,15 +16,12 @@
const joinPath = join("/")
const normalizedName = name =>
pipe(
name,
[
trimCharsStart("./"),
trimCharsStart("~/"),
trimCharsStart("../"),
trimChars(" "),
]
)
pipe(name, [
trimCharsStart("./"),
trimCharsStart("~/"),
trimCharsStart("../"),
trimChars(" "),
])
const lastPartOfName = c => {
if (!c) return ""
@ -35,10 +33,10 @@
const isFolderSelected = (current, folder) => isInSubfolder(current, folder)
$: _screens = pipe(
screens,
[map(c => ({ component: c, title: lastPartOfName(c) })), sortBy("title")]
)
$: _screens = pipe(screens, [
map(c => ({ component: c, title: lastPartOfName(c) })),
sortBy("title"),
])
const isScreenSelected = component =>
component.component &&
@ -49,6 +47,14 @@
componentToDelete = component
confirmDeleteDialog.show()
}
const changeScreen = screen => {
console.log("Screen: ", screen)
store.setCurrentScreen(screen.title)
$goto(`./:page/${screen.title}`)
}
$: console.log("Params: ", $params)
</script>
<div class="root">
@ -57,7 +63,7 @@
<div
class="budibase__nav-item component"
class:selected={$store.currentComponentInfo._id === screen.component.props._id}
on:click|stopPropagation={() => store.setCurrentScreen(screen.title)}>
on:click|stopPropagation={() => changeScreen(screen)}>
<span
class="icon"

56
packages/builder/src/components/userInterface/PageLayout.svelte
View file

@ -1,4 +1,5 @@
<script>
import { goto } from "@sveltech/routify"
// import { tick } from "svelte"
import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"
@ -16,15 +17,12 @@
const joinPath = join("/")
const normalizedName = name =>
pipe(
name,
[
trimCharsStart("./"),
trimCharsStart("~/"),
trimCharsStart("../"),
trimChars(" "),
]
)
pipe(name, [
trimCharsStart("./"),
trimCharsStart("~/"),
trimCharsStart("../"),
trimChars(" "),
])
const lastPartOfName = c =>
c && last(c.name ? c.name.split("/") : c._component.split("/"))
@ -33,10 +31,7 @@
const isFolderSelected = (current, folder) => isInSubfolder(current, folder)
$: _layout = pipe(
layout,
[c => ({ component: c, title: lastPartOfName(c) })]
)
$: _layout = pipe(layout, [c => ({ component: c, title: lastPartOfName(c) })])
const isScreenSelected = component =>
component.component &&
@ -48,6 +43,11 @@
// await tick()
confirmDeleteDialog.show()
}
const setCurrentScreenToLayout = () => {
store.setScreenType("page")
$goto("./:page/page-layout")
}
</script>
<div class="pagelayoutSection">
@ -55,7 +55,7 @@
<div
class="budibase__nav-item root"
class:selected={$store.currentComponentInfo._id === _layout.component.props._id}
on:click|stopPropagation={() => store.setScreenType('page')}>
on:click|stopPropagation={setCurrentScreenToLayout}>
<span
class="icon"
class:rotate={$store.currentPreviewItem.name !== _layout.title}>
@ -89,23 +89,21 @@
onOk={() => store.deleteComponent(componentToDelete)} />
<style>
.components-nav-page {
font-size: 13px;
color: #000333;
text-transform: uppercase;
margin-bottom: 10px;
padding-left: 20px;
font-weight: 600;
opacity: 0.4;
letter-spacing: 1px;
}
.components-nav-page {
font-size: 13px;
color: #000333;
text-transform: uppercase;
margin-bottom: 10px;
padding-left: 20px;
font-weight: 600;
opacity: 0.4;
letter-spacing: 1px;
}
.pagelayoutSection {
margin: 20px 0px 20px 0px;
}
.pagelayoutSection {
margin: 20px 0px 20px 0px;
}
.root {
}
.title {
margin-left: 10px;

9
packages/builder/src/pages/[application]/frontend/[page]/[screen]/_fallback.svelte
View file

@ -1,9 +0,0 @@
<script>
import { leftover } from "@sveltech/routify"
const structure = $leftover.split("/")
console.log(structure)
</script>
CREEN FALLBACK THINGIE!

7
packages/builder/src/pages/[application]/frontend/[page]/_layout.svelte
View file

@ -1,7 +0,0 @@
<script>
import { params } from "@sveltech/routify"
console.log($params)
</script>
<slot />