CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-06 15:00:49 +12:00
Code Issues Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/Budibase/budibase into welcome-screen-ui-fix

Browse source
This commit is contained in:
Joe 2020-07-02 11:30:10 +01:00
parent 4ba3095c2c cd0a58f89f
commit a0a2e7a734
31 changed files with 327 additions and 116 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/builder/src/builderStore/store/index.js
View file

@ -29,7 +29,8 @@ import {
export const getStore = () => {
const initial = {
apps: [],
appname: "",
name: "",
description: "",
pages: DEFAULT_PAGES_OBJECT,
mainUi: {},
unauthenticatedUi: {},
@ -101,7 +102,8 @@ const setPackage = (store, initial) => async pkg => {
initial.libraries = pkg.application.componentLibraries
initial.components = await fetchComponentLibDefinitions(pkg.application._id)
initial.appname = pkg.application.name
initial.name = pkg.application.name
initial.description = pkg.application.description
initial.appId = pkg.application._id
initial.pages = pkg.pages
initial.hasAppPackage = true

1
packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte
View file

@ -36,6 +36,7 @@
class={determineClassName(type)}
bind:value
class:uk-form-danger={errors.length > 0}>
<option></option>
{#each options as opt}
<option value={opt}>{opt}</option>
{/each}

2
packages/builder/src/components/nav/UsersList.svelte
View file

@ -11,7 +11,7 @@
}
$: currentAppInfo = {
appname: $store.appname,
name: $store.name,
}
async function fetchUsers() {

28
packages/builder/src/components/settings/tabs/General.svelte
View file

@ -1,15 +1,39 @@
<script>
import { Input, TextArea, Button } from "@budibase/bbui"
import { store } from "builderStore"
import api from "builderStore/api"
import Title from "../TabTitle.svelte"
async function updateApplication(data) {
const response = await api.put(`/api/${$store.appId}`, data)
const app = await response.json()
store.update(state => {
state = {
...state,
...data,
}
return state
})
}
</script>
<Title>General</Title>
<div class="container">
<div class="background">
<Input thin edit placeholder="Enter your name" label="Name" />
<Input
on:save={e => updateApplication({ name: e.detail })}
thin
edit
value={$store.name}
label="Name" />
</div>
<div class="background">
<TextArea thin edit placeholder="Enter your name" label="Name" />
<TextArea
on:save={e => updateApplication({ description: e.detail })}
thin
edit
value={$store.description}
label="Name" />
</div>
</div>

91
packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
View file

@ -25,38 +25,69 @@
name: "Screen Placeholder",
route: "*",
props: {
_component: "@budibase/standard-components/container",
type: "div",
_children: [
{
_component: "@budibase/standard-components/container",
_styles: { normal: {}, hover: {}, active: {}, selected: {} },
_id: "__screenslot__text",
_code: "",
className: "",
onLoad: [],
type: "div",
_children: [
{
_component: "@budibase/standard-components/text",
_styles: {
normal: {},
hover: {},
active: {},
selected: {},
},
_id: "__screenslot__text_2",
_code: "",
text: "content",
font: "",
color: "",
textAlign: "inline",
verticalAlign: "inline",
formattingTag: "none",
},
],
"_id": "49c3d0a2-7028-46f0-b004-7eddf62ad01c",
"_component": "@budibase/standard-components/container",
"_styles": {
"normal": {
"padding": "0px",
"font-family": "Roboto",
"border-width": "0",
"border-style": "None",
"text-align": "center"
},
"hover": {},
"active": {},
"selected": {}
},
"_code": "",
"className": "",
"onLoad": [],
"type": "div",
"_children": [
{
"_id": "335428f7-f9ca-4acd-9e76-71bc8ad27324",
"_component": "@budibase/standard-components/container",
"_styles": {
"normal": {
"padding": "16px",
"border-style": "Dashed",
"border-width": "2px",
"border-color": "#8a8989fa"
},
"hover": {},
"active": {},
"selected": {}
},
"_code": "",
"className": "",
"onLoad": [],
"type": "div",
"_instanceId": "inst_b3b4e95_ab0df02dda3f4d8eb4b35eea2968bad3",
"_instanceName": "Container",
"_children": [
{
"_id": "ddb6a225-33ba-4ba8-91da-bc6a2697ebf9",
"_component": "@budibase/standard-components/heading",
"_styles": {
"normal": {
"font-family": "Roboto"
},
"hover": {},
"active": {},
"selected": {}
},
"_code": "",
"className": "",
"text": "Your screens go here",
"type": "h1",
"_instanceId": "inst_b3b4e95_ab0df02dda3f4d8eb4b35eea2968bad3",
"_instanceName": "Heading",
"_children": []
}
]
}
],
"_instanceName": "Content Placeholder"
},
}

3
packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
View file

@ -7,6 +7,9 @@ export default `<html>
height: 100%!important;
font-family: Roboto !important;
}
*, *:before, *:after {
box-sizing: border-box;
}
.lay-__screenslot__text {
width: 100%;
height: 100%;

0
packages/builder/src/components/userInterface/Colorpicker/drag.js → packages/builder/src/components/userInterface/Colorpicker/actions/drag.js
View file

2
packages/builder/src/components/userInterface/Colorpicker/actions/index.js Normal file
View file

@ -0,0 +1,2 @@
export { default as drag } from "./drag.js"
export { default as keyevents } from "./key-events.js"

41
packages/builder/src/components/userInterface/Colorpicker/actions/key-events.js Normal file
View file

@ -0,0 +1,41 @@
//events: Array<{trigger: fn}>
export default function(node, events = []) {
const ev = Object.entries(events)
let fns = []
for (let [trigger, fn] of ev) {
let f = addEvent(trigger, fn)
fns = [...fns, f]
}
function _scaffold(trigger, fn) {
return () => {
let trig = parseInt(trigger)
if (trig) {
if (event.keyCode === trig) {
fn(event)
}
} else {
if (event.key === trigger) {
fn(event)
}
}
}
}
function addEvent(trigger, fn) {
let f = _scaffold(trigger, fn)
node.addEventListener("keydown", f)
return f
}
function removeEvents() {
fns.forEach(f => node.removeEventListener("keypress", f))
}
return {
destroy() {
removeEvents()
},
}
}

0
packages/builder/src/components/userInterface/Colorpicker/ButtonGroup.svelte → packages/builder/src/components/userInterface/Colorpicker/components/ButtonGroup.svelte
View file

2
packages/builder/src/components/userInterface/Colorpicker/CheckedBackground.svelte → packages/builder/src/components/userInterface/Colorpicker/components/CheckedBackground.svelte
View file

@ -1,5 +1,5 @@
<script>
import { buildStyle } from "./helpers.js"
import {buildStyle} from "../helpers.js"
import { fade } from "svelte/transition"
export let backgroundSize = "10px"

32
packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte → packages/builder/src/components/userInterface/Colorpicker/components/Colorpicker.svelte
View file

@ -3,17 +3,18 @@
import { fade } from "svelte/transition"
import Swatch from "./Swatch.svelte"
import CheckedBackground from "./CheckedBackground.svelte"
import { buildStyle } from "./helpers.js"
import {buildStyle} from "../helpers.js"
import {
getColorFormat,
convertToHSVA,
convertHsvaToFormat,
} from "./utils.js"
} from "../utils.js"
import Slider from "./Slider.svelte"
import Palette from "./Palette.svelte"
import ButtonGroup from "./ButtonGroup.svelte"
import Input from "./Input.svelte"
import Portal from "./Portal.svelte"
import {keyevents} from "../actions"
export let value = "#3ec1d3ff"
export let open = false
@ -27,10 +28,10 @@
let colorPicker = null
let adder = null
let h = null
let s = null
let v = null
let a = null
let h = 0
let s = 0
let v = 0
let a = 0
const dispatch = createEventDispatcher()
@ -56,9 +57,9 @@
}
}
function handleEscape(e) {
if (open && e.key === "Escape") {
open = false
function handleEscape() {
if(open) {
open = false;
}
}
@ -164,11 +165,11 @@
<Portal>
<div
class="colorpicker-container"
use:keyevents={{"Escape": handleEscape}}
transition:fade
bind:this={colorPicker}
{style}
tabindex="0"
on:keydown={handleEscape}
bind:clientHeight={pickerHeight}
bind:clientWidth={pickerWidth}>
@ -213,11 +214,13 @@
{/if}
{#if swatches.length !== 12}
<div
tabindex="0"
use:keyevents={{"Enter": addSwatch}}
bind:this={adder}
transition:fade
class="adder"
on:click={addSwatch}
class:shrink>
class:shrink
on:click={addSwatch}>
<span>&plus;</span>
</div>
{/if}
@ -244,6 +247,7 @@
display: flex;
font-size: 11px;
font-weight: 400;
transition: top 0.1s, left 0.1s;
flex-direction: column;
margin: 5px 0px;
height: auto;
@ -295,7 +299,7 @@
flex: 1;
height: 20px;
display: flex;
transition: flex 0.5s;
transition: flex 0.3s;
justify-content: center;
align-items: center;
background: #f1f3f4;
@ -305,6 +309,8 @@
margin-left: 5px;
margin-top: 3px;
font-weight: 500;
outline-color: #003cb0;
outline-width: thin;
}
.shrink {

20
packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte → packages/builder/src/components/userInterface/Colorpicker/components/Colorpreview.svelte
View file

@ -1,11 +1,11 @@
<script>
import Colorpicker from "./Colorpicker.svelte"
import CheckedBackground from "./CheckedBackground.svelte"
import { createEventDispatcher, beforeUpdate } from "svelte"
import { createEventDispatcher, beforeUpdate, onMount } from "svelte"
import { buildStyle } from "./helpers.js"
import {buildStyle, debounce} from "../helpers.js"
import { fade } from "svelte/transition"
import { getColorFormat } from "./utils.js"
import { getColorFormat } from "../utils.js"
export let value = "#3ec1d3ff"
export let swatches = []
@ -49,8 +49,8 @@
dispatch("change", color.detail)
}
$: if (open && colorPreview) {
const {
function calculateDimensions() {
const {
top: spaceAbove,
width,
bottom,
@ -71,9 +71,13 @@
y = bottom
}
x = left + previewCenter - pickerWidth / 2
x = (left + previewCenter) - (220 / 2)
dimensions = { [positionSide]: y.toFixed(1), left: x.toFixed(1) }
dimensions = { [positionSide]: y.toFixed(1), left: x.toFixed(1) }
}
$: if(open && colorPreview) {
calculateDimensions()
}
$: previewStyle = buildStyle({ width, height, background: value })
@ -84,6 +88,8 @@
})
</script>
<svelte:window on:resize={debounce(calculateDimensions, 200)} />
<div class="color-preview-container">
{#if !errorMsg}
<CheckedBackground borderRadius="3px" backgroundSize="8px">

10
packages/builder/src/components/userInterface/Colorpicker/FlatButton.svelte → packages/builder/src/components/userInterface/Colorpicker/components/FlatButton.svelte
View file

@ -1,9 +1,14 @@
<script>
import {createEventDispatcher} from "svelte"
import {keyevents} from "../actions"
export let text = ""
export let selected = false
const dispatch = createEventDispatcher()
</script>
<div class="flatbutton" class:selected on:click>{text}</div>
<div class="flatbutton" tabindex="0" use:keyevents={{"Enter": () => dispatch("click")}} class:selected on:click>{text}</div>
<style>
.flatbutton {
@ -19,11 +24,14 @@
justify-content: center;
align-items: center;
background: #f1f3f4;
outline-color: #003cb0;
outline-width: thin;
}
.selected {
color: #ffffff;
background-color: #003cb0;
border: none;
outline: none;
}
</style>

0
packages/builder/src/components/userInterface/Colorpicker/Input.svelte → packages/builder/src/components/userInterface/Colorpicker/components/Input.svelte
View file

0
packages/builder/src/components/userInterface/Colorpicker/Palette.svelte → packages/builder/src/components/userInterface/Colorpicker/components/Palette.svelte
View file

0
packages/builder/src/components/userInterface/Colorpicker/Portal.svelte → packages/builder/src/components/userInterface/Colorpicker/components/Portal.svelte
View file

31
packages/builder/src/components/userInterface/Colorpicker/Slider.svelte → packages/builder/src/components/userInterface/Colorpicker/components/Slider.svelte
View file

@ -1,6 +1,6 @@
<script>
import { onMount, createEventDispatcher } from "svelte"
import dragable from "./drag.js"
import {drag, keyevents} from "../actions"
export let value = 1
export let type = "hue"
@ -9,6 +9,10 @@
let slider
let sliderWidth = 0
let upperLimit = type === "hue" ? 360 : 1
let incrementFactor = type === "hue" ? 1 : 0.01
const isWithinLimit = value => value >= 0 && value <= upperLimit
function onSliderChange(mouseX, isDrag = false) {
const { left, width } = slider.getBoundingClientRect()
@ -17,12 +21,29 @@
let percentageClick = (clickPosition / sliderWidth).toFixed(2)
if (percentageClick >= 0 && percentageClick <= 1) {
let value = type === "hue" ? 360 * percentageClick : percentageClick
dispatch("change", { color: value, isDrag })
}
}
function handleLeftKey() {
let v = value - incrementFactor
if(isWithinLimit(v)) {
value = v
dispatch("change", { color: value })
}
}
function handleRightKey() {
let v = value + incrementFactor
if(isWithinLimit(v)) {
value = v
dispatch("change", { color: value })
}
}
$: thumbPosition =
type === "hue" ? sliderWidth * (value / 360) : sliderWidth * value
@ -30,14 +51,16 @@
</script>
<div
tabindex="0"
bind:this={slider}
use:keyevents={{37: handleLeftKey, 39: handleRightKey}}
bind:clientWidth={sliderWidth}
on:click={event => onSliderChange(event.clientX)}
class="color-format-slider"
class:hue={type === 'hue'}
class:alpha={type === 'alpha'}>
<div
use:dragable
use:drag
on:drag={e => onSliderChange(e.detail, true)}
on:dragend
class="slider-thumb"
@ -54,6 +77,8 @@
margin: 10px 0px;
border: 1px solid #e8e8ef;
cursor: pointer;
outline-color: #003cb0;
outline-width: thin;
}
.hue {

5
packages/builder/src/components/userInterface/Colorpicker/Swatch.svelte → packages/builder/src/components/userInterface/Colorpicker/components/Swatch.svelte
View file

@ -2,6 +2,7 @@
import { createEventDispatcher } from "svelte"
import { fade } from "svelte/transition"
import CheckedBackground from "./CheckedBackground.svelte"
import {keyevents} from "../actions"
export let hovered = false
export let color = "#fff"
@ -12,6 +13,8 @@
<div class="space">
<CheckedBackground borderRadius="6px">
<div
tabindex="0"
use:keyevents={{"Enter": () => dispatch("click")}}
in:fade
class="swatch"
style={`background: ${color};`}
@ -38,6 +41,8 @@
border: 1px solid #dedada;
height: 20px;
width: 20px;
outline-color: #003cb0;
outline-width: thin;
}
.space {

8
packages/builder/src/components/userInterface/Colorpicker/helpers.js
View file

@ -1,4 +1,4 @@
export const buildStyle = styles => {
export function buildStyle(styles) {
let str = ""
for (let s in styles) {
if (styles[s]) {
@ -12,3 +12,9 @@ export const buildStyle = styles => {
export const convertCamel = str => {
return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)
}
export const debounce = (fn, milliseconds) => {
return () => {
setTimeout(fn, milliseconds)
}
}

2
packages/builder/src/components/userInterface/Colorpicker/index.js
View file

@ -1,2 +1,2 @@
import Colorpreview from "./Colorpreview.svelte"
import Colorpreview from "./components/Colorpreview.svelte"
export default Colorpreview

14
packages/builder/src/components/userInterface/Colorpicker/utils.js
View file

@ -144,13 +144,15 @@ export const hslaToHSVA = ([h, s, l, a = 1]) => {
export const hsvaToHexa = (hsva, asString = false) => {
const [r, g, b, a] = hsvaToRgba(hsva)
const padSingle = hex => (hex.length === 1 ? `0${hex}` : hex)
const hexa = [r, g, b]
.map(v => {
let hex = Math.round(v).toString(16)
return hex.length === 1 ? `0${hex}` : hex
})
.concat(Math.round(a * 255).toString(16))
let hexa = [r, g, b].map(v => {
let hex = Math.round(v).toString(16)
return padSingle(hex)
})
let alpha = padSingle(Math.round(a * 255).toString(16))
hexa = [...hexa, alpha]
return asString ? `#${hexa.join("")}` : hexa
}

14
packages/builder/src/components/userInterface/temporaryPanelStructure.js
View file

@ -406,7 +406,7 @@ export default {
{
name: "List",
_component: "@budibase/standard-components/list",
description: "Shiny list",
description: "Renders all children once per record, of a given model",
icon: "ri-file-list-fill",
properties: {
design: { ...all },
@ -414,6 +414,18 @@ export default {
},
children: [],
},
{
name: "Record Detail",
_component: "@budibase/standard-components/recorddetail",
description:
"Loads a record, using an id from the URL, which can be used with {{ context }}, in children",
icon: "ri-profile-line",
properties: {
design: { ...all },
settings: [{ label: "Model", key: "model", control: ModelSelect }],
},
children: [],
},
{
name: "Map",
_component: "@budibase/standard-components/datamap",

4
packages/client/src/render/screenRouter.js
View file

@ -56,13 +56,13 @@ export const screenRouter = ({ screens, onScreenSelected, window }) => {
const screenIndex = current !== -1 ? current : fallback
onScreenSelected(screens[screenIndex], _url)
try {
!url.state && history.pushState(_url, null, _url)
} catch (_) {
// ignoring an exception here as the builder runs an iframe, which does not like this
}
onScreenSelected(screens[screenIndex], _url)
}
function click(e) {

16
packages/server/src/api/controllers/application.js
View file

@ -90,6 +90,22 @@ exports.create = async function(ctx) {
ctx.message = `Application ${ctx.request.body.name} created successfully`
}
exports.update = async function(ctx) {
const clientId = await lookupClientId(ctx.params.applicationId)
const db = new CouchDB(ClientDb.name(clientId))
const application = await db.get(ctx.params.applicationId)
const data = ctx.request.body
const newData = { ...application, ...data }
const response = await db.put(newData)
data._rev = response.rev
ctx.status = 200
ctx.message = `Application ${application.name} updated successfully.`
ctx.body = response
}
const createEmptyAppPackage = async (ctx, app) => {
const templateFolder = resolve(
__dirname,

1
packages/server/src/api/routes/application.js
View file

@ -12,6 +12,7 @@ router
authorized(BUILDER),
controller.fetchAppPackage
)
.put("/api/:applicationId", authorized(BUILDER), controller.update)
.post("/api/applications", authorized(BUILDER), controller.create)
module.exports = router

3
packages/server/src/utilities/builder/index.template.html
View file

@ -17,6 +17,9 @@
margin: 0px;
padding: 0px;
}
*, *:before, *:after {
box-sizing: border-box;
}
</style>
{{ each(options.stylesheets) }}

17
packages/standard-components/components.json
View file

@ -235,15 +235,14 @@
"description": "A configurable data list that attaches to your backend models.",
"data": true,
"props": {
"model": "models",
"layout": {
"type": "options",
"default": "list",
"options": [
"list",
"grid"
]
}
"model": "models"
}
},
"recorddetail": {
"description": "Loads a record, using an ID in the url",
"data": true,
"props": {
"model": "models"
}
},
"datamap": {

37
packages/standard-components/src/List.svelte
View file

@ -3,7 +3,6 @@
export let _bb
export let model
export let layout = "list"
let headers = []
let store = _bb.store
@ -33,39 +32,5 @@
})
</script>
<section class:grid={layout === 'grid'} class:list={layout === 'list'}>
<div class="data-card" bind:this={target} />
<section bind:this={target}>
</section>
<style>
.list {
display: flex;
flex-direction: column;
font-family: Inter;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
ul {
list-style-type: none;
}
li {
margin: 5px 0 5px 0;
}
.data-card {
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
}
.data-key {
font-weight: bold;
font-size: 20px;
text-transform: capitalize;
}
</style>

52
packages/standard-components/src/RecordDetail.svelte Normal file
View file

@ -0,0 +1,52 @@
<script>
import { onMount } from "svelte"
export let _bb
export let model
let headers = []
let store = _bb.store
let target
async function fetchFirstRecord() {
const FETCH_RECORDS_URL = `/api/views/all_${model}`
const response = await _bb.api.get(FETCH_RECORDS_URL)
if (response.status === 200) {
const allRecords = await response.json()
if (allRecords.length > 0) return allRecords[0]
}
}
async function fetchData() {
const pathParts = window.location.pathname.split("/")
let record
// if srcdoc, then we assume this is the builder preview
if(pathParts.length === 0 || pathParts[0] === "srcdoc") {
record = await fetchFirstRecord()
} else {
const id = pathParts[pathParts.length - 1]
const GET_RECORD_URL = `/api/${model}/records/${id}`
const response = await _bb.api.get(GET_RECORD_URL)
if (response.status === 200) {
record = await response.json()
}
}
if (record) {
_bb.attachChildren(target, {
hydrate: false,
context: record,
})
} else {
throw new Error("Failed to fetch record.", response)
}
}
onMount(async () => {
await fetchData()
})
</script>
<section bind:this={target}>
</section>

1
packages/standard-components/src/index.js
View file

@ -23,3 +23,4 @@ export { default as list } from "./List.svelte"
export { default as datasearch } from "./DataSearch.svelte"
export { default as datamap } from "./DataMap.svelte"
export { default as embed } from "./Embed.svelte"
export { default as recorddetail } from "./RecordDetail.svelte"