8a80d8801a
* refactoring server for screens & page layout restructure * Disable API calls, UI placeholders. * buildPropsHierarchy is gone & screen has url * Recent changes. * router * router * updated git-ignore to reinclude server/utilities/builder * modified cli - budi new create new file structure * Fix uuid import. * prettier fixes * prettier fixes * prettier fixes * page/screen restructure.. broken tests * all tests passing at last * screen routing tests * Working screen editor and preview. * Render page previews to the screen. * Key input lists to ensure new array references when updating styles. * Ensure the iframe html and body fills the container. * Save screens via the API. * Get all save APIs almost working. * Write pages.json to disk. * Use correct API endpoint for saving styles. * Differentiate between saving properties of screens and pages. * Add required fields to default pages layouts. * Add _css default property to newly created screens. * Add default code property. * page layout / screens - app output Co-authored-by: pngwn <pnda007@gmail.com>
142 lines
3 KiB
Svelte
142 lines
3 KiB
Svelte
<script>
|
|
import InputGroup from "../common/Inputs/InputGroup.svelte"
|
|
|
|
export let onStyleChanged = () => {}
|
|
export let component
|
|
|
|
const tbrl = [
|
|
{ placeholder: "T" },
|
|
{ placeholder: "R" },
|
|
{ placeholder: "B" },
|
|
{ placeholder: "L" },
|
|
]
|
|
|
|
const se = [{ placeholder: "START" }, { placeholder: "END" }]
|
|
|
|
const single = [{ placeholder: "" }]
|
|
|
|
$: layout = {
|
|
...component._styles.position,
|
|
...component._styles.layout,
|
|
}
|
|
|
|
$: layouts = {
|
|
templaterows: ["Grid Rows", single],
|
|
templatecolumns: ["Grid Columns", single],
|
|
}
|
|
|
|
$: positions = {
|
|
column: ["Column", se],
|
|
row: ["Row", se],
|
|
}
|
|
|
|
$: spacing = {
|
|
margin: ["Margin", tbrl, "small"],
|
|
padding: ["Padding", tbrl, "small"],
|
|
}
|
|
|
|
$: zindex = {
|
|
zindex: ["Z-Index", single],
|
|
}
|
|
|
|
const newValue = n => Array(n).fill("")
|
|
</script>
|
|
|
|
<h3>Styles</h3>
|
|
|
|
<h4>Positioning</h4>
|
|
<div class="layout-pos">
|
|
{#each Object.entries(layouts) as [key, [name, meta, size]] (component._id + key)}
|
|
<div class="grid">
|
|
<h5>{name}:</h5>
|
|
<InputGroup
|
|
onStyleChanged={_value => onStyleChanged('layout', key, _value)}
|
|
values={layout[key] || newValue(meta.length)}
|
|
{meta}
|
|
{size}
|
|
type="text" />
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
|
|
<h4>Positioning</h4>
|
|
<div class="layout-pos">
|
|
{#each Object.entries(positions) as [key, [name, meta, size]] (component._id + key)}
|
|
<div class="grid">
|
|
<h5>{name}:</h5>
|
|
<InputGroup
|
|
onStyleChanged={_value => onStyleChanged('position', key, _value)}
|
|
values={layout[key] || newValue(meta.length)}
|
|
{meta}
|
|
{size} />
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
|
|
<h4>Spacing</h4>
|
|
<div class="layout-spacing">
|
|
{#each Object.entries(spacing) as [key, [name, meta, size]] (component._id + key)}
|
|
<div class="grid">
|
|
<h5>{name}:</h5>
|
|
<InputGroup
|
|
onStyleChanged={_value => onStyleChanged('position', key, _value)}
|
|
values={layout[key] || newValue(meta.length)}
|
|
{meta}
|
|
{size} />
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
|
|
<h4>Z-Index</h4>
|
|
<div class="layout-layer">
|
|
{#each Object.entries(zindex) as [key, [name, meta, size]] (component._id + key)}
|
|
<div class="grid">
|
|
<h5>{name}:</h5>
|
|
<InputGroup
|
|
onStyleChanged={_value => onStyleChanged('position', key, _value)}
|
|
values={layout[key] || newValue(meta.length)}
|
|
{meta}
|
|
{size} />
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
|
|
<style>
|
|
h3 {
|
|
text-transform: uppercase;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: #8997ab;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
h4 {
|
|
text-transform: uppercase;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
color: #163057;
|
|
opacity: 0.3;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
h5 {
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: #163057;
|
|
opacity: 0.6;
|
|
padding-top: 12px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
div > div {
|
|
display: grid;
|
|
grid-template-rows: 1fr;
|
|
grid-gap: 10px;
|
|
height: 40px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.grid {
|
|
grid-template-columns: 70px 1fr;
|
|
}
|
|
</style>
|