Formatting

This commit is contained in:
Joe 2020-06-25 16:02:30 +01:00
parent 7c98a466e4
commit 919412df8c
11 changed files with 52 additions and 39 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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