Merge branch 'master' of github.com:Budibase/budibase into custom-css

This commit is contained in:
Andrew Kingston 2021-01-05 12:02:08 +00:00
commit 0e6c3d1aff
7 changed files with 46 additions and 103 deletions

View File

@ -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">

View File

@ -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>

View File

@ -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>

View File

@ -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

View File

@ -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>

View File

@ -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)

View File

@ -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: "",