Formatting
This commit is contained in:
parent
7c98a466e4
commit
919412df8c
|
@ -32,6 +32,6 @@
|
||||||
label {
|
label {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
margin-bottom: 8px
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -23,7 +23,6 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
||||||
.margin {
|
.margin {
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
display: grid;
|
display: grid;
|
||||||
|
@ -31,7 +30,7 @@
|
||||||
.label {
|
.label {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
margin-bottom: 8px
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
textarea {
|
textarea {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
@ -42,8 +41,8 @@
|
||||||
cursor: text;
|
cursor: text;
|
||||||
background: var(--grey-2);
|
background: var(--grey-2);
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
-moz-box-sizing: border-box;
|
-moz-box-sizing: border-box;
|
||||||
-webkit-box-sizing: border-box;
|
-webkit-box-sizing: border-box;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -86,9 +86,7 @@
|
||||||
<div class="table-controls">
|
<div class="table-controls">
|
||||||
<h2 class="title">{$backendUiStore.selectedModel.name}</h2>
|
<h2 class="title">{$backendUiStore.selectedModel.name}</h2>
|
||||||
<Button primary on:click={createNewRecord}>
|
<Button primary on:click={createNewRecord}>
|
||||||
<span class="button-inner">
|
<span class="button-inner">Create New Record</span>
|
||||||
Create New Record
|
|
||||||
</span>
|
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<table class="uk-table">
|
<table class="uk-table">
|
||||||
|
@ -206,5 +204,4 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -142,7 +142,6 @@
|
||||||
background: var(--grey-1);
|
background: var(--grey-1);
|
||||||
border-bottom-left-radius: 0.5rem;
|
border-bottom-left-radius: 0.5rem;
|
||||||
border-bottom-left-radius: 0.5rem;
|
border-bottom-left-radius: 0.5rem;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-margin-3 {
|
.button-margin-3 {
|
||||||
|
|
|
@ -30,7 +30,10 @@
|
||||||
let selectedCategory = categories[0]
|
let selectedCategory = categories[0]
|
||||||
|
|
||||||
$: components = $store.components
|
$: components = $store.components
|
||||||
$: componentInstance = $store.currentView !== "component" ? {...$store.currentPreviewItem, ...$store.currentComponentInfo} : $store.currentComponentInfo
|
$: componentInstance =
|
||||||
|
$store.currentView !== "component"
|
||||||
|
? { ...$store.currentPreviewItem, ...$store.currentComponentInfo }
|
||||||
|
: $store.currentComponentInfo
|
||||||
$: componentDefinition = $store.components[componentInstance._component]
|
$: componentDefinition = $store.components[componentInstance._component]
|
||||||
$: componentPropDefinition =
|
$: componentPropDefinition =
|
||||||
flattenedPanel.find(
|
flattenedPanel.find(
|
||||||
|
@ -46,18 +49,21 @@
|
||||||
|
|
||||||
const onStyleChanged = store.setComponentStyle
|
const onStyleChanged = store.setComponentStyle
|
||||||
|
|
||||||
function onPropChanged(key, value) {
|
function onPropChanged(key, value) {
|
||||||
if($store.currentView !== "component") {
|
if ($store.currentView !== "component") {
|
||||||
store.setPageOrScreenProp(key, value)
|
store.setPageOrScreenProp(key, value)
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
store.setComponentProp(key, value)
|
store.setComponentProp(key, value)
|
||||||
}
|
}
|
||||||
|
|
||||||
$: isComponentOrScreen = $store.currentView === "component" || $store.currentFrontEndType === "screen"
|
$: isComponentOrScreen =
|
||||||
|
$store.currentView === "component" ||
|
||||||
|
$store.currentFrontEndType === "screen"
|
||||||
$: isNotScreenslot = componentInstance._component !== "##builtin/screenslot"
|
$: isNotScreenslot = componentInstance._component !== "##builtin/screenslot"
|
||||||
|
|
||||||
$: displayName = isComponentOrScreen && componentInstance._instanceName && isNotScreenslot
|
$: displayName =
|
||||||
|
isComponentOrScreen && componentInstance._instanceName && isNotScreenslot
|
||||||
|
|
||||||
function walkProps(component, action) {
|
function walkProps(component, action) {
|
||||||
action(component)
|
action(component)
|
||||||
|
@ -92,11 +98,11 @@
|
||||||
{categories}
|
{categories}
|
||||||
{selectedCategory} />
|
{selectedCategory} />
|
||||||
|
|
||||||
{#if displayName}
|
{#if displayName}
|
||||||
<div class="instance-name">
|
<div class="instance-name">
|
||||||
<strong>{componentInstance._instanceName}</strong>
|
<strong>{componentInstance._instanceName}</strong>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<div class="component-props-container">
|
<div class="component-props-container">
|
||||||
{#if selectedCategory.value === 'design'}
|
{#if selectedCategory.value === 'design'}
|
||||||
|
@ -108,8 +114,7 @@
|
||||||
{panelDefinition}
|
{panelDefinition}
|
||||||
displayNameField={displayName}
|
displayNameField={displayName}
|
||||||
onChange={onPropChanged}
|
onChange={onPropChanged}
|
||||||
screenOrPageInstance={$store.currentView !== "component" && $store.currentPreviewItem} />
|
screenOrPageInstance={$store.currentView !== 'component' && $store.currentPreviewItem} />
|
||||||
|
|
||||||
{:else if selectedCategory.value === 'events'}
|
{:else if selectedCategory.value === 'events'}
|
||||||
<EventsEditor component={componentInstance} />
|
<EventsEditor component={componentInstance} />
|
||||||
{/if}
|
{/if}
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
import { store } from "builderStore"
|
import { store } from "builderStore"
|
||||||
import { ArrowDownIcon, ShapeIcon } from "components/common/Icons/"
|
import { ArrowDownIcon, ShapeIcon } from "components/common/Icons/"
|
||||||
|
|
||||||
export let screens = []
|
export let screens = []
|
||||||
|
|
||||||
let confirmDeleteDialog
|
let confirmDeleteDialog
|
||||||
let componentToDelete = ""
|
let componentToDelete = ""
|
||||||
|
|
|
@ -43,7 +43,7 @@
|
||||||
style="padding-left: {level * 20 + 40}px">
|
style="padding-left: {level * 20 + 40}px">
|
||||||
<div class="nav-item">
|
<div class="nav-item">
|
||||||
<i class="icon ri-arrow-right-circle-fill" />
|
<i class="icon ri-arrow-right-circle-fill" />
|
||||||
{isScreenslot(component._component) ? "Screenslot" : component._instanceName}
|
{isScreenslot(component._component) ? 'Screenslot' : component._instanceName}
|
||||||
</div>
|
</div>
|
||||||
<div class="actions">
|
<div class="actions">
|
||||||
<ComponentDropdownMenu {component} />
|
<ComponentDropdownMenu {component} />
|
||||||
|
|
|
@ -8,7 +8,7 @@
|
||||||
import { EVENT_TYPE_MEMBER_NAME } from "components/common/eventHandlers"
|
import { EVENT_TYPE_MEMBER_NAME } from "components/common/eventHandlers"
|
||||||
import { store, workflowStore } from "builderStore"
|
import { store, workflowStore } from "builderStore"
|
||||||
import { ArrowDownIcon } from "components/common/Icons/"
|
import { ArrowDownIcon } from "components/common/Icons/"
|
||||||
import { createEventDispatcher } from 'svelte'
|
import { createEventDispatcher } from "svelte"
|
||||||
|
|
||||||
export let parameter
|
export let parameter
|
||||||
|
|
||||||
|
@ -26,7 +26,7 @@
|
||||||
{/if}
|
{/if}
|
||||||
{#if parameter.name === 'workflow'}
|
{#if parameter.name === 'workflow'}
|
||||||
<Select on:change bind:value={parameter.value}>
|
<Select on:change bind:value={parameter.value}>
|
||||||
<option value=""></option>
|
<option value="" />
|
||||||
{#each $workflowStore.workflows.filter(wf => wf.live) as workflow}
|
{#each $workflowStore.workflows.filter(wf => wf.live) as workflow}
|
||||||
<option value={workflow._id}>{workflow.name}</option>
|
<option value={workflow._id}>{workflow.name}</option>
|
||||||
{/each}
|
{/each}
|
||||||
|
|
|
@ -13,9 +13,10 @@
|
||||||
export let displayNameField = false
|
export let displayNameField = false
|
||||||
export let screenOrPageInstance
|
export let screenOrPageInstance
|
||||||
|
|
||||||
let pageScreenProps = ["title","favicon", "description", "route"]
|
let pageScreenProps = ["title", "favicon", "description", "route"]
|
||||||
|
|
||||||
const propExistsOnComponentDef = prop => pageScreenProps.includes(prop) || prop in componentDefinition.props
|
const propExistsOnComponentDef = prop =>
|
||||||
|
pageScreenProps.includes(prop) || prop in componentDefinition.props
|
||||||
|
|
||||||
function handleChange(key, data) {
|
function handleChange(key, data) {
|
||||||
data.target ? onChange(key, data.target.value) : onChange(key, data)
|
data.target ? onChange(key, data.target.value) : onChange(key, data)
|
||||||
|
@ -38,18 +39,23 @@
|
||||||
{#if screenOrPageInstance}
|
{#if screenOrPageInstance}
|
||||||
{#each screenOrPageDefinition as def}
|
{#each screenOrPageDefinition as def}
|
||||||
<PropertyControl
|
<PropertyControl
|
||||||
control={def.control}
|
control={def.control}
|
||||||
label={def.label}
|
label={def.label}
|
||||||
key={def.key}
|
key={def.key}
|
||||||
value={screenOrPageInstance[def.key]}
|
value={screenOrPageInstance[def.key]}
|
||||||
{onChange}
|
{onChange}
|
||||||
props={{ ...excludeProps(def, ['control', 'label']) }} />
|
props={{ ...excludeProps(def, ['control', 'label']) }} />
|
||||||
{/each}
|
{/each}
|
||||||
<hr />
|
<hr />
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if displayNameField}
|
{#if displayNameField}
|
||||||
<PropertyControl control={Input} label="Name" key="_instanceName" value={componentInstance._instanceName} {onChange} />
|
<PropertyControl
|
||||||
|
control={Input}
|
||||||
|
label="Name"
|
||||||
|
key="_instanceName"
|
||||||
|
value={componentInstance._instanceName}
|
||||||
|
{onChange} />
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if panelDefinition && panelDefinition.length > 0}
|
{#if panelDefinition && panelDefinition.length > 0}
|
||||||
|
|
|
@ -130,7 +130,11 @@
|
||||||
{#each ACCESS_LEVELS as level}
|
{#each ACCESS_LEVELS as level}
|
||||||
<span class="access-level">
|
<span class="access-level">
|
||||||
<label>{level.name}</label>
|
<label>{level.name}</label>
|
||||||
<input class="uk-checkbox" type="checkbox" disabled={!level.editable} bind:checked={level.canExecute}/>
|
<input
|
||||||
|
class="uk-checkbox"
|
||||||
|
type="checkbox"
|
||||||
|
disabled={!level.editable}
|
||||||
|
bind:checked={level.canExecute} />
|
||||||
</span>
|
</span>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -23,7 +23,10 @@
|
||||||
|
|
||||||
const login = async () => {
|
const login = async () => {
|
||||||
loading = true
|
loading = true
|
||||||
const response = await _bb.api.post("/api/authenticate", { username, password })
|
const response = await _bb.api.post("/api/authenticate", {
|
||||||
|
username,
|
||||||
|
password,
|
||||||
|
})
|
||||||
if (response.status === 200) {
|
if (response.status === 200) {
|
||||||
const json = await response.json()
|
const json = await response.json()
|
||||||
localStorage.setItem("budibase:token", json.token)
|
localStorage.setItem("budibase:token", json.token)
|
||||||
|
|
Loading…
Reference in New Issue