Merge branch 'master' of github.com:Budibase/budibase into custom-css
This commit is contained in:
Andrew Kingston
commit
0e6c3d1aff
|
|
@ -62,7 +62,7 @@
|
|||
<TextArea
|
||||
thin
|
||||
bind:value
|
||||
placeholder="Add text, or lick the objects on the left to add them to the
|
||||
placeholder="Add text, or click the objects on the left to add them to the
|
||||
textbox." />
|
||||
<div class="controls">
|
||||
<a href="https://docs.budibase.com/design/binding">
|
||||
|
|
|
|||
|
|
@ -1,82 +0,0 @@
|
|||
<script>
|
||||
import { store, allScreens } from "builderStore"
|
||||
import { FrontendTypes } from "constants"
|
||||
import ComponentPropertiesPanel from "./ComponentPropertiesPanel.svelte"
|
||||
import ComponentSelectionList from "./ComponentSelectionList.svelte"
|
||||
|
||||
const PROPERTIES_TAB = "properties"
|
||||
const COMPONENT_SELECTION_TAB = "components"
|
||||
|
||||
let selected = PROPERTIES_TAB
|
||||
|
||||
const isSelected = tab => selected === tab
|
||||
|
||||
const selectTab = tab => (selected = tab)
|
||||
|
||||
const toggleTab = () =>
|
||||
(selected =
|
||||
selected === PROPERTIES_TAB ? COMPONENT_SELECTION_TAB : PROPERTIES_TAB)
|
||||
</script>
|
||||
|
||||
<div class="root">
|
||||
{#if $store.currentFrontEndType === FrontendTypes.LAYOUT || $allScreens.length}
|
||||
<div class="switcher">
|
||||
<button
|
||||
class:selected={selected === COMPONENT_SELECTION_TAB}
|
||||
on:click={() => selectTab(COMPONENT_SELECTION_TAB)}>
|
||||
Add
|
||||
</button>
|
||||
|
||||
<button
|
||||
class:selected={selected === PROPERTIES_TAB}
|
||||
on:click={() => selectTab(PROPERTIES_TAB)}>
|
||||
Edit
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
{#if selected === PROPERTIES_TAB}
|
||||
<ComponentPropertiesPanel {toggleTab} />
|
||||
{/if}
|
||||
|
||||
{#if selected === COMPONENT_SELECTION_TAB}
|
||||
<ComponentSelectionList {toggleTab} />
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.root {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20px 5px 20px 10px;
|
||||
border-left: solid 1px var(--grey-2);
|
||||
}
|
||||
|
||||
.switcher {
|
||||
display: flex;
|
||||
margin: 0px 20px 20px 0px;
|
||||
}
|
||||
|
||||
.switcher > button {
|
||||
display: inline-block;
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--grey-5);
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.switcher > .selected {
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.panel {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -22,17 +22,19 @@
|
|||
</script>
|
||||
|
||||
<DetailSummary name={`${name}${changed ? ' *' : ''}`} on:open show={open} thin>
|
||||
<div>
|
||||
{#each properties as prop}
|
||||
<PropertyControl
|
||||
label={`${prop.label}${hasPropChanged(prop) ? ' *' : ''}`}
|
||||
control={prop.control}
|
||||
key={prop.key}
|
||||
value={style[prop.key]}
|
||||
onChange={(key, value) => onStyleChanged(styleCategory, key, value)}
|
||||
props={{ ...excludeProps(prop, ['control', 'label']) }} />
|
||||
{/each}
|
||||
</div>
|
||||
{#if open}
|
||||
<div>
|
||||
{#each properties as prop}
|
||||
<PropertyControl
|
||||
label={`${prop.label}${hasPropChanged(prop) ? ' *' : ''}`}
|
||||
control={prop.control}
|
||||
key={prop.key}
|
||||
value={style[prop.key]}
|
||||
onChange={(key, value) => onStyleChanged(styleCategory, key, value)}
|
||||
props={{ ...excludeProps(prop, ['control', 'label']) }} />
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</DetailSummary>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
{ key: "layoutId", label: "Layout", control: LayoutSelect },
|
||||
]
|
||||
|
||||
const layoutDefinition = [{ key: "title", label: "Title", control: Input }]
|
||||
const layoutDefinition = []
|
||||
|
||||
const canRenderControl = (key, dependsOn) => {
|
||||
let test = !isEmpty(componentInstance[dependsOn])
|
||||
|
|
@ -119,7 +119,7 @@
|
|||
{/if}
|
||||
{/if}
|
||||
|
||||
{#if panelDefinition && panelDefinition.length > 0}
|
||||
{#if !isLayout && panelDefinition && panelDefinition.length > 0}
|
||||
{#each panelDefinition as definition}
|
||||
{#if canRenderControl(definition.key, definition.dependsOn)}
|
||||
<PropertyControl
|
||||
|
|
|
|||
|
|
@ -1,7 +1,11 @@
|
|||
<script>
|
||||
import { store, backendUiStore, currentAsset } from "builderStore"
|
||||
import {
|
||||
store,
|
||||
backendUiStore,
|
||||
currentAsset,
|
||||
selectedComponent,
|
||||
} from "builderStore"
|
||||
import { onMount } from "svelte"
|
||||
import { FrontendTypes } from "constants"
|
||||
import CurrentItemPreview from "components/userInterface/AppPreview"
|
||||
import ComponentPropertiesPanel from "components/userInterface/ComponentPropertiesPanel.svelte"
|
||||
import ComponentSelectionList from "components/userInterface/ComponentSelectionList.svelte"
|
||||
|
|
@ -43,7 +47,7 @@
|
|||
{/if}
|
||||
</div>
|
||||
|
||||
{#if $store.currentFrontEndType === FrontendTypes.SCREEN || $store.currentFrontEndType === FrontendTypes.LAYOUT}
|
||||
{#if $selectedComponent != null}
|
||||
<div class="components-pane">
|
||||
<ComponentPropertiesPanel />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ exports.save = async function(ctx) {
|
|||
|
||||
if (!layout.props) {
|
||||
layout = {
|
||||
...layout,
|
||||
...EMPTY_LAYOUT,
|
||||
...layout,
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -34,7 +34,7 @@ exports.destroy = async function(ctx) {
|
|||
)
|
||||
).rows.map(element => element.doc.layoutId)
|
||||
if (layoutsUsedByScreens.includes(layoutId)) {
|
||||
ctx.throw(400, "Cannot delete a base layout")
|
||||
ctx.throw(400, "Cannot delete a layout that's being used by a screen")
|
||||
}
|
||||
|
||||
await db.remove(layoutId, layoutRev)
|
||||
|
|
|
|||
|
|
@ -16,7 +16,17 @@ const EMPTY_LAYOUT = {
|
|||
_id: "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967",
|
||||
_component: "##builtin/screenslot",
|
||||
_styles: {
|
||||
normal: {},
|
||||
normal: {
|
||||
flex: "1 1 auto",
|
||||
display: "flex",
|
||||
"flex-direction": "column",
|
||||
"justify-content": "flex-start",
|
||||
"align-items": "stretch",
|
||||
"max-width": "100%",
|
||||
"margin-left": "20px",
|
||||
"margin-right": "20px",
|
||||
width: "1400px",
|
||||
},
|
||||
hover: {},
|
||||
active: {},
|
||||
selected: {},
|
||||
|
|
@ -28,7 +38,16 @@ const EMPTY_LAYOUT = {
|
|||
_styles: {
|
||||
active: {},
|
||||
hover: {},
|
||||
normal: {},
|
||||
normal: {
|
||||
display: "flex",
|
||||
"flex-direction": "column",
|
||||
"align-items": "center",
|
||||
"justify-content": "flex-start",
|
||||
"margin-right": "auto",
|
||||
"margin-left": "auto",
|
||||
"min-height": "100%",
|
||||
"background-image": "#f5f5f5",
|
||||
},
|
||||
selected: {},
|
||||
},
|
||||
className: "",
|
||||
|
|
|
|||
Loading…
Reference in a new issue