MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

formatting and lint

This commit is contained in:
Joe 2020-07-01 14:46:22 +01:00
parent b8c0678c87
commit 6a4f47a4c8
13 changed files with 182 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
View File

@ -16,7 +16,7 @@
import Portal from "./Portal.svelte" import Portal from "./Portal.svelte"
export let value = "#3ec1d3ff" export let value = "#3ec1d3ff"
export let open = false; export let open = false
export let swatches = [] //TODO: Safe swatches - limit to 12. warn in console export let swatches = [] //TODO: Safe swatches - limit to 12. warn in console
export let disableSwatches = false export let disableSwatches = false
export let format = "hexa" export let format = "hexa"
@ -40,7 +40,7 @@
getRecentColors() getRecentColors()
} }
if(colorPicker) { if (colorPicker) {
colorPicker.focus() colorPicker.focus()
} }
@ -57,7 +57,7 @@
} }
function handleEscape(e) { function handleEscape(e) {
if(open && e.key === "Escape") { if (open && e.key === "Escape") {
open = false open = false
} }
} }
@ -159,10 +159,8 @@
$: border = v > 90 && s < 5 ? "1px dashed #dedada" : "" $: border = v > 90 && s < 5 ? "1px dashed #dedada" : ""
$: selectedColorStyle = buildStyle({ background: value, border }) $: selectedColorStyle = buildStyle({ background: value, border })
$: shrink = swatches.length > 0 $: shrink = swatches.length > 0
</script> </script>
<Portal> <Portal>
<div <div
class="colorpicker-container" class="colorpicker-container"

39
packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte
View File

@ -38,7 +38,6 @@
} }
}) })
function openColorpicker(event) { function openColorpicker(event) {
if (colorPreview) { if (colorPreview) {
open = true open = true
@ -50,7 +49,7 @@
dispatch("change", color.detail) dispatch("change", color.detail)
} }
$: if(open && colorPreview) { $: if (open && colorPreview) {
const { const {
top: spaceAbove, top: spaceAbove,
width, width,
@ -62,17 +61,17 @@
const spaceBelow = window.innerHeight - bottom const spaceBelow = window.innerHeight - bottom
const previewCenter = previewWidth / 2 const previewCenter = previewWidth / 2
let y, x; let y, x
if(spaceAbove > spaceBelow) { if (spaceAbove > spaceBelow) {
positionSide = "bottom" positionSide = "bottom"
y = (window.innerHeight - spaceAbove) y = window.innerHeight - spaceAbove
}else{ } else {
positionSide = "top" positionSide = "top"
y = bottom y = bottom
} }
x = (left + previewCenter) - (pickerWidth / 2) x = left + previewCenter - pickerWidth / 2
dimensions = { [positionSide]: y.toFixed(1), left: x.toFixed(1) } dimensions = { [positionSide]: y.toFixed(1), left: x.toFixed(1) }
} }
@ -83,7 +82,6 @@
[positionSide]: `${dimensions[positionSide]}px`, [positionSide]: `${dimensions[positionSide]}px`,
left: `${dimensions.left}px`, left: `${dimensions.left}px`,
}) })
</script> </script>
<div class="color-preview-container"> <div class="color-preview-container">
@ -99,19 +97,18 @@
</CheckedBackground> </CheckedBackground>
{#if open} {#if open}
<Colorpicker <Colorpicker
style={pickerStyle} style={pickerStyle}
on:change={onColorChange} on:change={onColorChange}
on:addswatch on:addswatch
on:removeswatch on:removeswatch
bind:format bind:format
bind:value bind:value
bind:pickerHeight bind:pickerHeight
bind:pickerWidth bind:pickerWidth
bind:open bind:open
{swatches} {swatches}
{disableSwatches} {disableSwatches} />
/>
<div on:click|self={() => (open = false)} class="overlay" /> <div on:click|self={() => (open = false)} class="overlay" />
{/if} {/if}
{:else} {:else}

30
packages/builder/src/components/userInterface/Colorpicker/Portal.svelte
View File

@ -1,35 +1,35 @@
<script> <script>
import { onMount } from "svelte"; import { onMount } from "svelte"
export let target = document.body; export let target = document.body
let targetEl; let targetEl
let portal; let portal
let componentInstance; let componentInstance
onMount(() => { onMount(() => {
if (typeof target === "string") { if (typeof target === "string") {
targetEl = document.querySelector(target); targetEl = document.querySelector(target)
// Force exit // Force exit
if (targetEl === null) { if (targetEl === null) {
return () => {}; return () => {}
} }
} else if (target instanceof HTMLElement) { } else if (target instanceof HTMLElement) {
targetEl = target; targetEl = target
} else { } else {
throw new TypeError( throw new TypeError(
`Unknown target type: ${typeof target}. Allowed types: String (CSS selector), HTMLElement.` `Unknown target type: ${typeof target}. Allowed types: String (CSS selector), HTMLElement.`
); )
} }
portal = document.createElement("div"); portal = document.createElement("div")
targetEl.appendChild(portal); targetEl.appendChild(portal)
portal.appendChild(componentInstance); portal.appendChild(componentInstance)
return () => { return () => {
targetEl.removeChild(portal); targetEl.removeChild(portal)
}; }
}); })
</script> </script>
<div bind:this={componentInstance}> <div bind:this={componentInstance}>

4
packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
View File

@ -99,9 +99,7 @@
{selectedCategory} /> {selectedCategory} />
{#if displayName} {#if displayName}
<div class="instance-name"> <div class="instance-name">{componentInstance._instanceName}</div>
{componentInstance._instanceName}
</div>
{/if} {/if}
<div class="component-props-container"> <div class="component-props-container">

6
packages/builder/src/components/userInterface/DesignView.svelte
View File

@ -1,9 +1,8 @@
<script> <script>
import {onMount} from "svelte" import { onMount } from "svelte"
import PropertyGroup from "./PropertyGroup.svelte" import PropertyGroup from "./PropertyGroup.svelte"
import FlatButtonGroup from "./FlatButtonGroup.svelte" import FlatButtonGroup from "./FlatButtonGroup.svelte"
export let panelDefinition = {} export let panelDefinition = {}
export let componentInstance = {} export let componentInstance = {}
export let componentDefinition = {} export let componentDefinition = {}
@ -34,7 +33,6 @@
] ]
$: propertyGroupNames = Object.keys(panelDefinition) $: propertyGroupNames = Object.keys(panelDefinition)
</script> </script>
<div class="design-view-container"> <div class="design-view-container">
@ -55,7 +53,7 @@
{componentDefinition} {componentDefinition}
{componentInstance} {componentInstance}
open={currentGroup === groupName} open={currentGroup === groupName}
on:open={() => currentGroup = groupName} /> on:open={() => (currentGroup = groupName)} />
{/each} {/each}
{:else} {:else}
<div class="no-design"> <div class="no-design">

102
packages/builder/src/components/userInterface/OptionSelect.svelte
View File

@ -13,13 +13,13 @@
let selectMenu let selectMenu
let icon let icon
let selectAnchor = null; let selectAnchor = null
let dimensions = {top: 0, bottom: 0, left: 0} let dimensions = { top: 0, bottom: 0, left: 0 }
let positionSide = "top" let positionSide = "top"
let maxHeight = 0 let maxHeight = 0
let scrollTop = 0; let scrollTop = 0
let containerEl = null; let containerEl = null
const handleStyleBind = value => const handleStyleBind = value =>
!!styleBindingProperty ? { style: `${styleBindingProperty}: ${value}` } : {} !!styleBindingProperty ? { style: `${styleBindingProperty}: ${value}` } : {}
@ -32,51 +32,53 @@
return () => { return () => {
select.removeEventListener("keydown", handleEnter) select.removeEventListener("keydown", handleEnter)
} }
}) })
function handleEscape(e) { function handleEscape(e) {
if(open && e.key === "Escape") { if (open && e.key === "Escape") {
toggleSelect(false) toggleSelect(false)
} }
} }
function getDimensions() { function getDimensions() {
const { bottom, top: spaceAbove, left } = selectAnchor.getBoundingClientRect() const {
bottom,
top: spaceAbove,
left,
} = selectAnchor.getBoundingClientRect()
const spaceBelow = window.innerHeight - bottom const spaceBelow = window.innerHeight - bottom
let y; let y
if (spaceAbove > spaceBelow) { if (spaceAbove > spaceBelow) {
positionSide = "bottom" positionSide = "bottom"
maxHeight = spaceAbove - 20 maxHeight = spaceAbove - 20
y = (window.innerHeight - spaceAbove) y = window.innerHeight - spaceAbove
} else { } else {
positionSide = "top" positionSide = "top"
y = bottom y = bottom
maxHeight = spaceBelow - 20 maxHeight = spaceBelow - 20
} }
dimensions = {[positionSide]: y, left} dimensions = { [positionSide]: y, left }
} }
function handleEnter(e) { function handleEnter(e) {
if (!open && e.key === "Enter") { if (!open && e.key === "Enter") {
toggleSelect(true) toggleSelect(true)
} }
} }
function toggleSelect(isOpen) { function toggleSelect(isOpen) {
getDimensions() getDimensions()
if (isOpen) { if (isOpen) {
icon.style.transform = "rotate(180deg)" icon.style.transform = "rotate(180deg)"
} else { } else {
icon.style.transform = "rotate(0deg)" icon.style.transform = "rotate(0deg)"
} }
open = isOpen open = isOpen
} }
function handleClick(val) { function handleClick(val) {
value = val value = val
onChange(value) onChange(value)
@ -86,7 +88,7 @@
"max-height": `${maxHeight.toFixed(0)}px`, "max-height": `${maxHeight.toFixed(0)}px`,
"transform-origin": `center ${positionSide}`, "transform-origin": `center ${positionSide}`,
[positionSide]: `${dimensions[positionSide]}px`, [positionSide]: `${dimensions[positionSide]}px`,
"left": `${dimensions.left.toFixed(0)}px`, left: `${dimensions.left.toFixed(0)}px`,
}) })
$: isOptionsObject = options.every(o => typeof o === "object") $: isOptionsObject = options.every(o => typeof o === "object")
@ -95,7 +97,7 @@
? options.find(o => o.value === value) ? options.find(o => o.value === value)
: {} : {}
$: if(open && selectMenu) { $: if (open && selectMenu) {
selectMenu.focus() selectMenu.focus()
} }
@ -113,38 +115,38 @@
<i bind:this={icon} class="ri-arrow-down-s-fill" /> <i bind:this={icon} class="ri-arrow-down-s-fill" />
</div> </div>
{#if open} {#if open}
<Portal> <Portal>
<div <div
tabindex="0" tabindex="0"
class:open class:open
bind:this={selectMenu} bind:this={selectMenu}
style={menuStyle} style={menuStyle}
on:keydown={handleEscape} on:keydown={handleEscape}
class="bb-select-menu"> class="bb-select-menu">
<ul> <ul>
{#if isOptionsObject} {#if isOptionsObject}
{#each options as { value: v, label }} {#each options as { value: v, label }}
<li <li
{...handleStyleBind(v)} {...handleStyleBind(v)}
on:click|self={handleClick(v)} on:click|self={handleClick(v)}
class:selected={value === v}> class:selected={value === v}>
{label} {label}
</li> </li>
{/each} {/each}
{:else} {:else}
{#each options as v} {#each options as v}
<li <li
{...handleStyleBind(v)} {...handleStyleBind(v)}
on:click|self={handleClick(v)} on:click|self={handleClick(v)}
class:selected={value === v}> class:selected={value === v}>
{v} {v}
</li> </li>
{/each} {/each}
{/if} {/if}
</ul> </ul>
</div> </div>
<div on:click|self={() => toggleSelect(false)} class="overlay" /> <div on:click|self={() => toggleSelect(false)} class="overlay" />
</Portal> </Portal>
{/if} {/if}
</div> </div>

2
packages/builder/src/components/userInterface/PropertyGroup.svelte
View File

@ -13,7 +13,7 @@
$: style = componentInstance["_styles"][styleCategory] || {} $: style = componentInstance["_styles"][styleCategory] || {}
</script> </script>
<DetailSummary {name} on:open show={open} > <DetailSummary {name} on:open show={open}>
{#each properties as props} {#each properties as props}
<PropertyControl <PropertyControl
label={props.label} label={props.label}

4
packages/builder/src/components/userInterface/temporaryPanelStructure.js
View File

@ -318,7 +318,7 @@ export default {
{ label: "Stripe Color", key: "stripeColor", control: Input }, { label: "Stripe Color", key: "stripeColor", control: Input },
{ label: "Border Color", key: "borderColor", control: Input }, { label: "Border Color", key: "borderColor", control: Input },
{ label: "TH Color", key: "backgroundColor", control: Input }, { label: "TH Color", key: "backgroundColor", control: Input },
{ label: "TH Font Color", key: "color", control: Input } { label: "TH Font Color", key: "color", control: Input },
], ],
}, },
children: [], children: [],
@ -336,7 +336,7 @@ export default {
properties: { properties: {
design: { ...all }, design: { ...all },
settings: [ settings: [
{ label: "Model", key: "model", control: ModelSelect,}, { label: "Model", key: "model", control: ModelSelect },
], ],
}, },
template: { template: {

4
packages/builder/src/pages/[application]/_reset.svelte
View File

@ -38,7 +38,9 @@
if (!activeTopNav) return if (!activeTopNav) return
store.update(state => { store.update(state => {
if (!state.previousTopNavPath) state.previousTopNavPath = {} if (!state.previousTopNavPath) state.previousTopNavPath = {}
state.previousTopNavPath[activeTopNav.path] = window.location.pathname.replace("/_builder", "") state.previousTopNavPath[
activeTopNav.path
] = window.location.pathname.replace("/_builder", "")
$goto(state.previousTopNavPath[path] || path) $goto(state.previousTopNavPath[path] || path)
return state return state
}) })

17
packages/builder/src/pages/[application]/backend/model/[selectedModel]/_layout.svelte
View File

@ -1,14 +1,15 @@
<script> <script>
import { params } from "@sveltech/routify" import { params } from "@sveltech/routify"
import { backendUiStore } from "builderStore" import { backendUiStore } from "builderStore"
if ($params.selectedModel) { if ($params.selectedModel) {
const model = $backendUiStore.models.find(m => m._id === $params.selectedModel) const model = $backendUiStore.models.find(
if (model) { m => m._id === $params.selectedModel
backendUiStore.actions.models.select(model) )
if (model) {
backendUiStore.actions.models.select(model)
}
} }
}
</script> </script>
<slot /> <slot />

6
packages/builder/src/pages/[application]/backend/model/_layout.svelte
View File

@ -10,7 +10,11 @@
onMount(async () => { onMount(async () => {
// navigate to first model in list, if not already selected // navigate to first model in list, if not already selected
// and this is the final url (i.e. no selectedModel) // and this is the final url (i.e. no selectedModel)
if (!$leftover && $backendUiStore.models.length > 0 && (!$backendUiStore.selectedModel || !$backendUiStore.selectedModel._id)) { if (
!$leftover &&
$backendUiStore.models.length > 0 &&
(!$backendUiStore.selectedModel || !$backendUiStore.selectedModel._id)
) {
$goto(`./${$backendUiStore.models[0]._id}`) $goto(`./${$backendUiStore.models[0]._id}`)
} }
}) })

14
packages/builder/src/pages/[application]/backend/model/index.svelte
View File

@ -8,9 +8,13 @@
} }
onMount(async () => { onMount(async () => {
// navigate to first model in list, if not already selected // navigate to first model in list, if not already selected
// and this is the final url (i.e. no selectedModel) // and this is the final url (i.e. no selectedModel)
if (!$leftover && $backendUiStore.models.length > 0 && (!$backendUiStore.selectedModel || !$backendUiStore.selectedModel._id)) { if (
!$leftover &&
$backendUiStore.models.length > 0 &&
(!$backendUiStore.selectedModel || !$backendUiStore.selectedModel._id)
) {
// this file routes as .../models/index, so, go up one. // this file routes as .../models/index, so, go up one.
$goto(`../${$backendUiStore.models[0]._id}`) $goto(`../${$backendUiStore.models[0]._id}`)
} }
@ -18,7 +22,5 @@
</script> </script>
{#if $backendUiStore.models.length === 0} {#if $backendUiStore.models.length === 0}
Please create a model Please create a model
{:else} {:else}Please select a model{/if}
Please select a model
{/if}

121
packages/standard-components/src/DataTable.svelte
View File

@ -68,71 +68,76 @@
</table> </table>
<style> <style>
table { table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
} }
/* Zebra striping */ /* Zebra striping */
tr:nth-of-type(odd) { tr:nth-of-type(odd) {
background: var(--stripeColor); background: var(--stripeColor);
} }
th { th {
background-color: var(--backgroundColor); background-color: var(--backgroundColor);
color: var(--color); color: var(--color);
font-weight: bold; font-weight: bold;
text-transform: capitalize; text-transform: capitalize;
} }
td, th { td,
padding: 16px; th {
border: 1px solid var(--borderColor); padding: 16px;
text-align: left; border: 1px solid var(--borderColor);
} text-align: left;
}
@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
table {
width: 100%;
}
@media /* Force table to not be like tables anymore */
only screen and (max-width: 760px), table,
(min-device-width: 768px) and (max-device-width: 1024px) { thead,
tbody,
th,
td,
tr {
display: block;
}
table { /* Hide table headers (but not display: none;, for accessibility) */
width: 100%; thead tr {
} position: absolute;
top: -9999px;
left: -9999px;
}
/* Force table to not be like tables anymore */ tr {
table, thead, tbody, th, td, tr { border: 1px solid var(--borderColor);
display: block; }
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr { border: 1px solid var(--borderColor); }
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 10%;
}
td:before { td {
/* Now like a table header */ /* Behave like a "row" */
position: absolute; border: none;
/* Top/left values mimic padding */ border-bottom: 1px solid #eee;
top: 6px; position: relative;
left: 6px; padding-left: 10%;
width: 45%; }
padding-right: 10px;
white-space: nowrap; td:before {
/* Label the data */ /* Now like a table header */
content: attr(data-column); position: absolute;
} /* Top/left values mimic padding */
} top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
/* Label the data */
content: attr(data-column);
}
}
</style> </style>