merge
This commit is contained in:
commit
5648eae275
|
@ -74,6 +74,7 @@ export const getStore = () => {
|
||||||
store.moveUpComponent = moveUpComponent(store)
|
store.moveUpComponent = moveUpComponent(store)
|
||||||
store.moveDownComponent = moveDownComponent(store)
|
store.moveDownComponent = moveDownComponent(store)
|
||||||
store.copyComponent = copyComponent(store)
|
store.copyComponent = copyComponent(store)
|
||||||
|
store.getPathToComponent = getPathToComponent(store)
|
||||||
store.addTemplatedComponent = addTemplatedComponent(store)
|
store.addTemplatedComponent = addTemplatedComponent(store)
|
||||||
store.setMetadataProp = setMetadataProp(store)
|
store.setMetadataProp = setMetadataProp(store)
|
||||||
return store
|
return store
|
||||||
|
@ -553,6 +554,38 @@ const copyComponent = store => component => {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const getPathToComponent = store => component => {
|
||||||
|
|
||||||
|
// Gets all the components to needed to construct a path.
|
||||||
|
const tempStore = get(store)
|
||||||
|
let pathComponents = []
|
||||||
|
let parent = component;
|
||||||
|
let root = false
|
||||||
|
while (!root) {
|
||||||
|
parent = getParent(tempStore.currentPreviewItem.props, parent)
|
||||||
|
if (!parent) {
|
||||||
|
root = true
|
||||||
|
} else {
|
||||||
|
pathComponents.push(parent)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remove root entry since it's the screen or page layout.
|
||||||
|
// Reverse array since we need the correct order of the IDs
|
||||||
|
const reversedComponents = pathComponents.reverse().slice(1)
|
||||||
|
|
||||||
|
// Add component
|
||||||
|
const allComponents = [...reversedComponents, component]
|
||||||
|
|
||||||
|
// Map IDs
|
||||||
|
const IdList = allComponents.map(c => c._id)
|
||||||
|
|
||||||
|
// Construct ID Path:
|
||||||
|
const path = IdList.join('/')
|
||||||
|
|
||||||
|
return path
|
||||||
|
}
|
||||||
|
|
||||||
const getParent = (rootProps, child) => {
|
const getParent = (rootProps, child) => {
|
||||||
let parent
|
let parent
|
||||||
walkProps(rootProps, (p, breakWalk) => {
|
walkProps(rootProps, (p, breakWalk) => {
|
||||||
|
|
|
@ -0,0 +1,71 @@
|
||||||
|
<script>
|
||||||
|
import { onMount, beforeUpdate, afterUpdate } from "svelte"
|
||||||
|
|
||||||
|
export let value = null
|
||||||
|
export let onChanged = () => {}
|
||||||
|
export let swatches = []
|
||||||
|
|
||||||
|
let picker
|
||||||
|
let cp = null
|
||||||
|
|
||||||
|
function getRecentColors() {
|
||||||
|
let colorStore = localStorage.getItem("bb:recentColors")
|
||||||
|
if (!!colorStore) {
|
||||||
|
swatches = JSON.parse(colorStore)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function setRecentColor(color) {
|
||||||
|
if (swatches.length >= 15) {
|
||||||
|
swatches.splice(0, 1)
|
||||||
|
picker.removeSwatch(0)
|
||||||
|
}
|
||||||
|
if (!swatches.includes(color)) {
|
||||||
|
swatches = [...swatches, color]
|
||||||
|
picker.addSwatch(color)
|
||||||
|
localStorage.setItem("bb:recentColors", JSON.stringify(swatches))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function createPicker() {
|
||||||
|
picker = Pickr.create({
|
||||||
|
el: cp,
|
||||||
|
theme: "nano",
|
||||||
|
default: value || "#000000",
|
||||||
|
|
||||||
|
swatches,
|
||||||
|
closeWithKey: "Escape",
|
||||||
|
|
||||||
|
components: {
|
||||||
|
preview: true,
|
||||||
|
opacity: true,
|
||||||
|
hue: true,
|
||||||
|
|
||||||
|
interaction: {
|
||||||
|
hex: true,
|
||||||
|
rgba: true,
|
||||||
|
input: true,
|
||||||
|
save: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
afterUpdate(() => {
|
||||||
|
picker.setColor(value)
|
||||||
|
})
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
getRecentColors()
|
||||||
|
createPicker()
|
||||||
|
|
||||||
|
picker.on("save", (colour, instance) => {
|
||||||
|
let color = colour.toHEXA().toString()
|
||||||
|
onChanged(color)
|
||||||
|
setRecentColor(color)
|
||||||
|
picker.hide()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div bind:this={cp} class="color-picker" />
|
|
@ -1,4 +1,5 @@
|
||||||
<script>
|
<script>
|
||||||
|
import { params, goto } from "@sveltech/routify"
|
||||||
import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"
|
import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"
|
||||||
|
|
||||||
import { last, sortBy, map, trimCharsStart, trimChars, join } from "lodash/fp"
|
import { last, sortBy, map, trimCharsStart, trimChars, join } from "lodash/fp"
|
||||||
|
@ -15,15 +16,12 @@
|
||||||
const joinPath = join("/")
|
const joinPath = join("/")
|
||||||
|
|
||||||
const normalizedName = name =>
|
const normalizedName = name =>
|
||||||
pipe(
|
pipe(name, [
|
||||||
name,
|
trimCharsStart("./"),
|
||||||
[
|
trimCharsStart("~/"),
|
||||||
trimCharsStart("./"),
|
trimCharsStart("../"),
|
||||||
trimCharsStart("~/"),
|
trimChars(" "),
|
||||||
trimCharsStart("../"),
|
])
|
||||||
trimChars(" "),
|
|
||||||
]
|
|
||||||
)
|
|
||||||
|
|
||||||
const lastPartOfName = c => {
|
const lastPartOfName = c => {
|
||||||
if (!c) return ""
|
if (!c) return ""
|
||||||
|
@ -47,6 +45,11 @@
|
||||||
componentToDelete = component
|
componentToDelete = component
|
||||||
confirmDeleteDialog.show()
|
confirmDeleteDialog.show()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const changeScreen = screen => {
|
||||||
|
store.setCurrentScreen(screen.title)
|
||||||
|
$goto(`./:page/${screen.title}`)
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="root">
|
<div class="root">
|
||||||
|
@ -55,7 +58,7 @@
|
||||||
<div
|
<div
|
||||||
class="budibase__nav-item component"
|
class="budibase__nav-item component"
|
||||||
class:selected={$store.currentComponentInfo._id === screen.component.props._id}
|
class:selected={$store.currentComponentInfo._id === screen.component.props._id}
|
||||||
on:click|stopPropagation={() => store.setCurrentScreen(screen.title)}>
|
on:click|stopPropagation={() => changeScreen(screen)}>
|
||||||
|
|
||||||
<span
|
<span
|
||||||
class="icon"
|
class="icon"
|
||||||
|
@ -76,7 +79,6 @@
|
||||||
<ComponentsHierarchyChildren
|
<ComponentsHierarchyChildren
|
||||||
components={screen.component.props._children}
|
components={screen.component.props._children}
|
||||||
currentComponent={$store.currentComponentInfo}
|
currentComponent={$store.currentComponentInfo}
|
||||||
onSelect={store.selectComponent}
|
|
||||||
onDeleteComponent={confirmDeleteComponent}
|
onDeleteComponent={confirmDeleteComponent}
|
||||||
onMoveUpComponent={store.moveUpComponent}
|
onMoveUpComponent={store.moveUpComponent}
|
||||||
onMoveDownComponent={store.moveDownComponent}
|
onMoveDownComponent={store.moveDownComponent}
|
||||||
|
|
|
@ -1,4 +1,6 @@
|
||||||
<script>
|
<script>
|
||||||
|
import { goto } from "@sveltech/routify"
|
||||||
|
import { store } from "builderStore"
|
||||||
import { last } from "lodash/fp"
|
import { last } from "lodash/fp"
|
||||||
import { pipe } from "components/common/core";
|
import { pipe } from "components/common/core";
|
||||||
import {
|
import {
|
||||||
|
@ -28,11 +30,22 @@
|
||||||
return onMoveDownComponent(c)
|
return onMoveDownComponent(c)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const selectComponent = component => {
|
||||||
|
// Set current component
|
||||||
|
store.selectComponent(component)
|
||||||
|
|
||||||
|
// Get ID path
|
||||||
|
const path = store.getPathToComponent(component)
|
||||||
|
|
||||||
|
// Go to correct URL
|
||||||
|
$goto(`./:page/:screen/${path}`)
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
{#each components as component, index (component._id)}
|
{#each components as component, index (component._id)}
|
||||||
<li on:click|stopPropagation={() => onSelect(component)}>
|
<li on:click|stopPropagation={() => selectComponent(component)}>
|
||||||
<div
|
<div
|
||||||
class="budibase__nav-item item"
|
class="budibase__nav-item item"
|
||||||
class:selected={currentComponent === component}
|
class:selected={currentComponent === component}
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
<script>
|
<script>
|
||||||
|
import { goto } from "@sveltech/routify"
|
||||||
// import { tick } from "svelte"
|
// import { tick } from "svelte"
|
||||||
import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"
|
import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"
|
||||||
|
|
||||||
|
@ -34,6 +35,11 @@
|
||||||
componentToDelete = component
|
componentToDelete = component
|
||||||
confirmDeleteDialog.show()
|
confirmDeleteDialog.show()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const setCurrentScreenToLayout = () => {
|
||||||
|
store.setScreenType("page")
|
||||||
|
$goto("./:page/page-layout")
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="pagelayoutSection">
|
<div class="pagelayoutSection">
|
||||||
|
@ -41,7 +47,7 @@
|
||||||
<div
|
<div
|
||||||
class="budibase__nav-item root"
|
class="budibase__nav-item root"
|
||||||
class:selected={$store.currentComponentInfo._id === _layout.component.props._id}
|
class:selected={$store.currentComponentInfo._id === _layout.component.props._id}
|
||||||
on:click|stopPropagation={() => store.setScreenType('page')}>
|
on:click|stopPropagation={setCurrentScreenToLayout}>
|
||||||
<span
|
<span
|
||||||
class="icon"
|
class="icon"
|
||||||
class:rotate={$store.currentPreviewItem.name !== _layout.title}>
|
class:rotate={$store.currentPreviewItem.name !== _layout.title}>
|
||||||
|
@ -57,9 +63,9 @@
|
||||||
|
|
||||||
{#if $store.currentPreviewItem.name === _layout.title && _layout.component.props._children}
|
{#if $store.currentPreviewItem.name === _layout.title && _layout.component.props._children}
|
||||||
<ComponentsHierarchyChildren
|
<ComponentsHierarchyChildren
|
||||||
|
thisComponent={_layout.component.props}
|
||||||
components={_layout.component.props._children}
|
components={_layout.component.props._children}
|
||||||
currentComponent={$store.currentComponentInfo}
|
currentComponent={$store.currentComponentInfo}
|
||||||
onSelect={store.selectComponent}
|
|
||||||
onDeleteComponent={confirmDeleteComponent}
|
onDeleteComponent={confirmDeleteComponent}
|
||||||
onMoveUpComponent={store.moveUpComponent}
|
onMoveUpComponent={store.moveUpComponent}
|
||||||
onMoveDownComponent={store.moveDownComponent}
|
onMoveDownComponent={store.moveDownComponent}
|
||||||
|
@ -75,23 +81,19 @@
|
||||||
onOk={() => store.deleteComponent(componentToDelete)} />
|
onOk={() => store.deleteComponent(componentToDelete)} />
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.components-nav-page {
|
.components-nav-page {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: #000333;
|
color: #000333;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
opacity: 0.4;
|
opacity: 0.4;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.pagelayoutSection {
|
|
||||||
margin: 20px 0px 20px 0px;
|
|
||||||
}
|
|
||||||
.root {
|
|
||||||
|
|
||||||
|
.pagelayoutSection {
|
||||||
|
margin: 20px 0px 20px 0px;
|
||||||
}
|
}
|
||||||
.title {
|
.title {
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
<script>
|
<script>
|
||||||
|
import { params, goto } from "@sveltech/routify"
|
||||||
import { store } from "builderStore"
|
import { store } from "builderStore"
|
||||||
import getIcon from "components/common/icon"
|
import getIcon from "components/common/icon"
|
||||||
import { CheckIcon } from "components/common/Icons"
|
import { CheckIcon } from "components/common/Icons"
|
||||||
|
@ -19,7 +20,12 @@
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
store.setCurrentPage("main")
|
store.setCurrentPage($params.page ? $params.page : "main")
|
||||||
|
|
||||||
|
const changePage = id => {
|
||||||
|
store.setCurrentPage(id)
|
||||||
|
$goto(`./${id}/page-layout`)
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="root">
|
<div class="root">
|
||||||
|
@ -27,14 +33,14 @@
|
||||||
{#each pages as { title, id }}
|
{#each pages as { title, id }}
|
||||||
<li>
|
<li>
|
||||||
<span class="icon">
|
<span class="icon">
|
||||||
{#if id === $store.currentPageName}
|
{#if id === $params.page}
|
||||||
<CheckIcon />
|
<CheckIcon />
|
||||||
{/if}
|
{/if}
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
class:active={id === $store.currentPageName}
|
class:active={id === $params.page}
|
||||||
on:click={() => store.setCurrentPage(id)}>
|
on:click={() => changePage(id)}>
|
||||||
{title}
|
{title}
|
||||||
</button>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
|
|
|
@ -3,6 +3,7 @@
|
||||||
import Input from "../common/Input.svelte"
|
import Input from "../common/Input.svelte"
|
||||||
import PropertyCascader from "./PropertyCascader"
|
import PropertyCascader from "./PropertyCascader"
|
||||||
import { isBinding, getBinding, setBinding } from "../common/binding"
|
import { isBinding, getBinding, setBinding } from "../common/binding"
|
||||||
|
import Colorpicker from "../common/Colorpicker.svelte"
|
||||||
|
|
||||||
export let value = ""
|
export let value = ""
|
||||||
export let onChanged = () => {}
|
export let onChanged = () => {}
|
||||||
|
@ -36,6 +37,8 @@
|
||||||
{/if}
|
{/if}
|
||||||
{/each}
|
{/each}
|
||||||
</select>
|
</select>
|
||||||
|
{:else if type === 'colour'}
|
||||||
|
<Colorpicker {onChanged} {value} />
|
||||||
{:else}
|
{:else}
|
||||||
<PropertyCascader {onChanged} {value} />
|
<PropertyCascader {onChanged} {value} />
|
||||||
{/if}
|
{/if}
|
||||||
|
|
|
@ -1,233 +0,0 @@
|
||||||
<script>
|
|
||||||
import ComponentsHierarchy from "./ComponentsHierarchy.svelte"
|
|
||||||
import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"
|
|
||||||
import PageLayout from "./PageLayout.svelte"
|
|
||||||
import PagesList from "./PagesList.svelte"
|
|
||||||
import { store } from "builderStore"
|
|
||||||
import IconButton from "components/common/IconButton.svelte"
|
|
||||||
import NewScreen from "./NewScreen.svelte"
|
|
||||||
import AppPreview from "./AppPreview"
|
|
||||||
import PageView from "./PageView.svelte"
|
|
||||||
import ComponentsPaneSwitcher from "./ComponentsPaneSwitcher.svelte"
|
|
||||||
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
|
|
||||||
import { last } from "lodash/fp"
|
|
||||||
import { AddIcon } from "components/common/Icons"
|
|
||||||
|
|
||||||
let newScreenPicker
|
|
||||||
let confirmDeleteDialog
|
|
||||||
let componentToDelete = ""
|
|
||||||
|
|
||||||
const newScreen = () => {
|
|
||||||
newScreenPicker.show()
|
|
||||||
}
|
|
||||||
|
|
||||||
const confirmDeleteComponent = component => {
|
|
||||||
componentToDelete = component
|
|
||||||
confirmDeleteDialog.show()
|
|
||||||
}
|
|
||||||
|
|
||||||
const lastPartOfName = c => (c ? last(c.split("/")) : "")
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="root">
|
|
||||||
|
|
||||||
<div class="ui-nav">
|
|
||||||
|
|
||||||
<div class="pages-list-container">
|
|
||||||
<div class="nav-header">
|
|
||||||
<span class="navigator-title">Navigator</span>
|
|
||||||
<div class="border-line" />
|
|
||||||
|
|
||||||
<span class="components-nav-page">Pages</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="nav-items-container">
|
|
||||||
<PagesList />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="border-line" />
|
|
||||||
|
|
||||||
<PageLayout layout={$store.pages[$store.currentPageName]} />
|
|
||||||
|
|
||||||
<div class="border-line" />
|
|
||||||
|
|
||||||
<div class="components-list-container">
|
|
||||||
<div class="nav-group-header">
|
|
||||||
<span class="components-nav-header" style="margin-top: 0;">
|
|
||||||
Screens
|
|
||||||
</span>
|
|
||||||
<div>
|
|
||||||
<button on:click={newScreen}>
|
|
||||||
<AddIcon />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="nav-items-container">
|
|
||||||
<ComponentsHierarchy screens={$store.screens} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="preview-pane">
|
|
||||||
<AppPreview />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{#if $store.currentFrontEndType === 'screen' || $store.currentFrontEndType === 'page'}
|
|
||||||
<div class="components-pane">
|
|
||||||
<ComponentsPaneSwitcher />
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<NewScreen bind:this={newScreenPicker} />
|
|
||||||
|
|
||||||
<ConfirmDialog
|
|
||||||
bind:this={confirmDeleteDialog}
|
|
||||||
title="Confirm Delete"
|
|
||||||
body={`Are you sure you wish to delete this '${lastPartOfName(componentToDelete)}' component`}
|
|
||||||
okText="Delete Component"
|
|
||||||
onOk={() => store.deleteComponent(componentToDelete)} />
|
|
||||||
|
|
||||||
<style>
|
|
||||||
button {
|
|
||||||
cursor: pointer;
|
|
||||||
outline: none;
|
|
||||||
border: none;
|
|
||||||
border-radius: 5px;
|
|
||||||
width: 20px;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 275px 1fr 275px;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
background: #fafafa;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (min-width: 1800px) {
|
|
||||||
.root {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 300px 1fr 300px;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
background: #fafafa;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui-nav {
|
|
||||||
grid-column: 1;
|
|
||||||
background-color: var(--white);
|
|
||||||
height: calc(100vh - 49px);
|
|
||||||
padding: 0;
|
|
||||||
overflow: scroll;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-pane {
|
|
||||||
grid-column: 2;
|
|
||||||
margin: 40px;
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 5px;
|
|
||||||
box-shadow: 0 0px 6px rgba(0, 0, 0, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.components-pane {
|
|
||||||
grid-column: 3;
|
|
||||||
background-color: var(--white);
|
|
||||||
min-height: 0px;
|
|
||||||
overflow-y: scroll;
|
|
||||||
}
|
|
||||||
|
|
||||||
.components-nav-page {
|
|
||||||
font-size: 13px;
|
|
||||||
color: #000333;
|
|
||||||
text-transform: uppercase;
|
|
||||||
padding-left: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
font-weight: 600;
|
|
||||||
opacity: 0.4;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.components-nav-header {
|
|
||||||
font-size: 13px;
|
|
||||||
color: #000333;
|
|
||||||
text-transform: uppercase;
|
|
||||||
margin-top: 20px;
|
|
||||||
font-weight: 600;
|
|
||||||
opacity: 0.4;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-header {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-items-container {
|
|
||||||
padding: 1rem 0rem 0rem 0rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-group-header {
|
|
||||||
display: flex;
|
|
||||||
padding: 0px 20px 0px 20px;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
font-weight: bold;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-group-header > div:nth-child(1) {
|
|
||||||
padding: 0rem 0.5rem 0rem 0rem;
|
|
||||||
vertical-align: bottom;
|
|
||||||
grid-column-start: icon;
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-group-header > span:nth-child(3) {
|
|
||||||
margin-left: 5px;
|
|
||||||
vertical-align: bottom;
|
|
||||||
grid-column-start: title;
|
|
||||||
margin-top: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-group-header > div:nth-child(3) {
|
|
||||||
vertical-align: bottom;
|
|
||||||
grid-column-start: button;
|
|
||||||
cursor: pointer;
|
|
||||||
color: var(--primary75);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-group-header > div:nth-child(3):hover {
|
|
||||||
color: var(--primary75);
|
|
||||||
}
|
|
||||||
|
|
||||||
.navigator-title {
|
|
||||||
font-size: 14px;
|
|
||||||
color: var(--secondary100);
|
|
||||||
font-weight: 600;
|
|
||||||
text-transform: uppercase;
|
|
||||||
padding: 0 20px 20px 20px;
|
|
||||||
line-height: 1rem !important;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.border-line {
|
|
||||||
border-bottom: 1px solid #d8d8d8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.components-list-container {
|
|
||||||
padding: 20px 0px 0 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -96,4 +96,4 @@ export const TYPE_MAP = {
|
||||||
event: {
|
event: {
|
||||||
default: [],
|
default: [],
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -15,6 +15,8 @@
|
||||||
<link rel='stylesheet' href='/_builder/bundle.css'>
|
<link rel='stylesheet' href='/_builder/bundle.css'>
|
||||||
<link rel='stylesheet' href='/_builder/fonts.css'>
|
<link rel='stylesheet' href='/_builder/fonts.css'>
|
||||||
<link rel='stylesheet' href="/_builder/uikit.min.css">
|
<link rel='stylesheet' href="/_builder/uikit.min.css">
|
||||||
|
<link rel='stylesheet' href="/_builder/nano.min.css">
|
||||||
|
<script src='/_builder/pickr.min.js'></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body id="app">
|
<body id="app">
|
||||||
|
|
|
@ -0,0 +1,51 @@
|
||||||
|
<script>
|
||||||
|
import { onMount } from "svelte"
|
||||||
|
import { params, leftover } from "@sveltech/routify"
|
||||||
|
import { store } from "builderStore"
|
||||||
|
|
||||||
|
// Get any leftover params not caught by Routifys params store.
|
||||||
|
const componentIds = $leftover.split("/").filter(id => id !== "")
|
||||||
|
|
||||||
|
// It's a screen, set it to that screen
|
||||||
|
if ($params.screen !== "page-layout") {
|
||||||
|
store.setCurrentScreen($params.screen)
|
||||||
|
|
||||||
|
// There are leftover stuff, like IDs, so navigate the components and find the ID and select it.
|
||||||
|
if ($leftover) {
|
||||||
|
// Get the correct screen children.
|
||||||
|
const screenChildren = $store.pages[$params.page]._screens.find(
|
||||||
|
screen => screen.name === $params.screen
|
||||||
|
).props._children
|
||||||
|
findComponent(componentIds, screenChildren)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// It's a page, so set the screentype to page.
|
||||||
|
store.setScreenType("page")
|
||||||
|
|
||||||
|
// There are leftover stuff, like IDs, so navigate the components and find the ID and select it.
|
||||||
|
if ($leftover) {
|
||||||
|
findComponent(componentIds, $store.pages[$params.page].props._children)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Find Component with ID and continue
|
||||||
|
function findComponent(ids, children) {
|
||||||
|
// Setup stuff
|
||||||
|
let componentToSelect
|
||||||
|
let currentChildren = children
|
||||||
|
|
||||||
|
// Loop through each ID
|
||||||
|
ids.forEach(id => {
|
||||||
|
// Find ID and select it
|
||||||
|
componentToSelect = currentChildren.find(child => child._id === id)
|
||||||
|
|
||||||
|
// Update childrens array to selected components children
|
||||||
|
currentChildren = componentToSelect._children
|
||||||
|
})
|
||||||
|
|
||||||
|
// Select Component!
|
||||||
|
store.selectComponent(componentToSelect)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<slot />
|
|
@ -0,0 +1,8 @@
|
||||||
|
<script>
|
||||||
|
import { params } from "@sveltech/routify"
|
||||||
|
import { store } from "builderStore"
|
||||||
|
|
||||||
|
store.setCurrentPage($params.page)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<slot />
|
|
@ -2,6 +2,19 @@
|
||||||
import { store, backendUiStore } from "builderStore"
|
import { store, backendUiStore } from "builderStore"
|
||||||
import { goto } from "@sveltech/routify"
|
import { goto } from "@sveltech/routify"
|
||||||
import { onMount } from "svelte"
|
import { onMount } from "svelte"
|
||||||
|
import ComponentsHierarchy from "components/userInterface/ComponentsHierarchy.svelte"
|
||||||
|
import ComponentsHierarchyChildren from "components/userInterface/ComponentsHierarchyChildren.svelte"
|
||||||
|
import PageLayout from "components/userInterface/PageLayout.svelte"
|
||||||
|
import PagesList from "components/userInterface/PagesList.svelte"
|
||||||
|
import IconButton from "components/common/IconButton.svelte"
|
||||||
|
import NewScreen from "components/userInterface/NewScreen.svelte"
|
||||||
|
import CurrentItemPreview from "components/userInterface/CurrentItemPreview.svelte"
|
||||||
|
import SettingsView from "components/userInterface/SettingsView.svelte"
|
||||||
|
import PageView from "components/userInterface/PageView.svelte"
|
||||||
|
import ComponentsPaneSwitcher from "components/userInterface/ComponentsPaneSwitcher.svelte"
|
||||||
|
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
|
||||||
|
import { last } from "lodash/fp"
|
||||||
|
import { AddIcon } from "components/common/Icons"
|
||||||
|
|
||||||
$: instances = $store.appInstances
|
$: instances = $store.appInstances
|
||||||
$: views = $store.hierarchy.indexes
|
$: views = $store.hierarchy.indexes
|
||||||
|
@ -15,6 +28,230 @@
|
||||||
await selectDatabase($store.appInstances[0])
|
await selectDatabase($store.appInstances[0])
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
let newScreenPicker
|
||||||
|
let confirmDeleteDialog
|
||||||
|
let componentToDelete = ""
|
||||||
|
|
||||||
|
const newScreen = () => {
|
||||||
|
newScreenPicker.show()
|
||||||
|
}
|
||||||
|
|
||||||
|
let settingsView
|
||||||
|
const settings = () => {
|
||||||
|
settingsView.show()
|
||||||
|
}
|
||||||
|
|
||||||
|
const confirmDeleteComponent = component => {
|
||||||
|
componentToDelete = component
|
||||||
|
confirmDeleteDialog.show()
|
||||||
|
}
|
||||||
|
|
||||||
|
const lastPartOfName = c => (c ? last(c.split("/")) : "")
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<div class="root">
|
||||||
|
|
||||||
|
<div class="ui-nav">
|
||||||
|
|
||||||
|
<div class="pages-list-container">
|
||||||
|
<div class="nav-header">
|
||||||
|
<span class="navigator-title">Navigator</span>
|
||||||
|
<div class="border-line" />
|
||||||
|
|
||||||
|
<span class="components-nav-page">Pages</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="nav-items-container">
|
||||||
|
<PagesList />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="border-line" />
|
||||||
|
|
||||||
|
<PageLayout layout={$store.pages[$store.currentPageName]} />
|
||||||
|
|
||||||
|
<div class="border-line" />
|
||||||
|
|
||||||
|
<div class="components-list-container">
|
||||||
|
<div class="nav-group-header">
|
||||||
|
<span class="components-nav-header" style="margin-top: 0;">
|
||||||
|
Screens
|
||||||
|
</span>
|
||||||
|
<div>
|
||||||
|
<button on:click={newScreen}>
|
||||||
|
<AddIcon />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="nav-items-container">
|
||||||
|
<ComponentsHierarchy screens={$store.screens} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="preview-pane">
|
||||||
|
<CurrentItemPreview />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if $store.currentFrontEndType === 'screen' || $store.currentFrontEndType === 'page'}
|
||||||
|
<div class="components-pane">
|
||||||
|
<ComponentsPaneSwitcher />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<NewScreen bind:this={newScreenPicker} />
|
||||||
|
<SettingsView bind:this={settingsView} />
|
||||||
|
|
||||||
|
<ConfirmDialog
|
||||||
|
bind:this={confirmDeleteDialog}
|
||||||
|
title="Confirm Delete"
|
||||||
|
body={`Are you sure you wish to delete this '${lastPartOfName(componentToDelete)}' component`}
|
||||||
|
okText="Delete Component"
|
||||||
|
onOk={() => store.deleteComponent(componentToDelete)} />
|
||||||
|
|
||||||
<slot />
|
<slot />
|
||||||
|
|
||||||
|
<style>
|
||||||
|
button {
|
||||||
|
cursor: pointer;
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
width: 20px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.root {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 275px 1fr 275px;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
background: #fafafa;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 1800px) {
|
||||||
|
.root {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 300px 1fr 300px;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
background: #fafafa;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-nav {
|
||||||
|
grid-column: 1;
|
||||||
|
background-color: var(--white);
|
||||||
|
height: calc(100vh - 49px);
|
||||||
|
padding: 0;
|
||||||
|
overflow: scroll;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-pane {
|
||||||
|
grid-column: 2;
|
||||||
|
margin: 40px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 5px;
|
||||||
|
box-shadow: 0 0px 6px rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.components-pane {
|
||||||
|
grid-column: 3;
|
||||||
|
background-color: var(--white);
|
||||||
|
min-height: 0px;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.components-nav-page {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #000333;
|
||||||
|
text-transform: uppercase;
|
||||||
|
padding-left: 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
opacity: 0.4;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.components-nav-header {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #000333;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-top: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
opacity: 0.4;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-header {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-items-container {
|
||||||
|
padding: 1rem 0rem 0rem 0rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-group-header {
|
||||||
|
display: flex;
|
||||||
|
padding: 0px 20px 0px 20px;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: bold;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-group-header > div:nth-child(1) {
|
||||||
|
padding: 0rem 0.5rem 0rem 0rem;
|
||||||
|
vertical-align: bottom;
|
||||||
|
grid-column-start: icon;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-group-header > span:nth-child(3) {
|
||||||
|
margin-left: 5px;
|
||||||
|
vertical-align: bottom;
|
||||||
|
grid-column-start: title;
|
||||||
|
margin-top: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-group-header > div:nth-child(3) {
|
||||||
|
vertical-align: bottom;
|
||||||
|
grid-column-start: button;
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--primary75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-group-header > div:nth-child(3):hover {
|
||||||
|
color: var(--primary75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigator-title {
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--secondary100);
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
padding: 0 20px 20px 20px;
|
||||||
|
line-height: 1rem !important;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-line {
|
||||||
|
border-bottom: 1px solid #d8d8d8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.components-list-container {
|
||||||
|
padding: 20px 0px 0 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
<script>
|
<script>
|
||||||
import UserInterfaceRoot from "components/userInterface/UserInterfaceRoot.svelte"
|
import { goto } from "@sveltech/routify"
|
||||||
|
$goto("../main")
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<UserInterfaceRoot />
|
<!-- routify:options index=false -->
|
||||||
|
|
|
@ -3,5 +3,7 @@ myapps/
|
||||||
.env
|
.env
|
||||||
/builder/*
|
/builder/*
|
||||||
!/builder/assets/
|
!/builder/assets/
|
||||||
|
!/builder/pickr.min.js
|
||||||
|
!/builder/nano.min.css
|
||||||
public/
|
public/
|
||||||
db/dev.db/
|
db/dev.db/
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -12,10 +12,10 @@
|
||||||
"props": {
|
"props": {
|
||||||
"logoUrl": "string",
|
"logoUrl": "string",
|
||||||
"title": "string",
|
"title": "string",
|
||||||
"backgroundColor": "string",
|
"backgroundColor": "colour",
|
||||||
"color": "string",
|
"color": "colour",
|
||||||
"borderWidth": "string",
|
"borderWidth": "string",
|
||||||
"borderColor": "string",
|
"borderColor": "colour",
|
||||||
"borderStyle": "string"
|
"borderStyle": "string"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -30,8 +30,8 @@
|
||||||
"className": "string",
|
"className": "string",
|
||||||
"disabled": "bool",
|
"disabled": "bool",
|
||||||
"onClick": "event",
|
"onClick": "event",
|
||||||
"background": "string",
|
"background": "colour",
|
||||||
"color": "string",
|
"color": "colour",
|
||||||
"border": "string",
|
"border": "string",
|
||||||
"padding": "string",
|
"padding": "string",
|
||||||
"hoverColor": "string",
|
"hoverColor": "string",
|
||||||
|
@ -167,6 +167,7 @@
|
||||||
"children": false,
|
"children": false,
|
||||||
"props": {
|
"props": {
|
||||||
"text": "string",
|
"text": "string",
|
||||||
|
"color": "colour",
|
||||||
"fontFamily": {
|
"fontFamily": {
|
||||||
"type": "options",
|
"type": "options",
|
||||||
"default": "initial",
|
"default": "initial",
|
||||||
|
@ -182,8 +183,7 @@
|
||||||
"Lucida Sans Unicode"
|
"Lucida Sans Unicode"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"fontSize": "string",
|
"fontSize": "string",
|
||||||
"color": "string",
|
|
||||||
"textAlign": {
|
"textAlign": {
|
||||||
"type": "options",
|
"type": "options",
|
||||||
"default": "inline",
|
"default": "inline",
|
||||||
|
@ -258,7 +258,8 @@
|
||||||
"description": "A HTML icon tag",
|
"description": "A HTML icon tag",
|
||||||
"props": {
|
"props": {
|
||||||
"icon": "string",
|
"icon": "string",
|
||||||
"fontSize": "string"
|
"fontSize": "string",
|
||||||
|
"color": "colour"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"link": {
|
"link": {
|
||||||
|
@ -267,8 +268,8 @@
|
||||||
"url": "string",
|
"url": "string",
|
||||||
"openInNewTab": "bool",
|
"openInNewTab": "bool",
|
||||||
"text": "string",
|
"text": "string",
|
||||||
"color": "string",
|
"color": "colour",
|
||||||
"hoverColor": "string",
|
"hoverColor": "colour",
|
||||||
"underline": "bool",
|
"underline": "bool",
|
||||||
"fontSize": "string",
|
"fontSize": "string",
|
||||||
"fontFamily": {
|
"fontFamily": {
|
||||||
|
@ -355,6 +356,7 @@
|
||||||
"description": "An HTML H1 - H6 tag",
|
"description": "An HTML H1 - H6 tag",
|
||||||
"props": {
|
"props": {
|
||||||
"className": "string",
|
"className": "string",
|
||||||
|
"color":"colour",
|
||||||
"text": "string",
|
"text": "string",
|
||||||
"type": {
|
"type": {
|
||||||
"type": "options",
|
"type": "options",
|
||||||
|
|
|
@ -5,11 +5,13 @@
|
||||||
export let _bb
|
export let _bb
|
||||||
export let text = ""
|
export let text = ""
|
||||||
export let fontFamily = ""
|
export let fontFamily = ""
|
||||||
|
export let color = ""
|
||||||
|
|
||||||
let containerElement
|
let containerElement
|
||||||
|
|
||||||
$: containerElement && !text && _bb.attachChildren(containerElement)
|
$: containerElement && !text && _bb.attachChildren(containerElement)
|
||||||
$: style = buildStyle({ "font-family": fontFamily })
|
$: style = buildStyle({ "font-family": fontFamily, color })
|
||||||
|
// $: console.log("HEADING", color)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if type === 'h1'}
|
{#if type === 'h1'}
|
||||||
|
|
Loading…
Reference in New Issue