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

Merge pull request #721 from Budibase/screen-updates 

Screen updates
This commit is contained in:
Andrew Kingston 2020-10-15 08:27:06 +01:00 committed by GitHub
parent 535c9febd5 97c1f77c88
commit 5f71a7270c
20 changed files with 325 additions and 196 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/builder/cypress/integration/createTable.spec.js
View File

@ -27,6 +27,8 @@ context("Create a Table", () => {
cy.get(".actions input")
.first()
.type("updated")
// Unset table display column
cy.contains("display column").click()
cy.contains("Save Column").click()
cy.contains("nameupdated").should("have.text", "nameupdated")
})

2
packages/builder/cypress/support/commands.js
View File

@ -87,6 +87,8 @@ Cypress.Commands.add("addColumn", (tableName, columnName, type) => {
cy.get("input")
.first()
.type(columnName)
// Unset table display column
cy.contains("display column").click()
cy.get("select").select(type)
cy.contains("Save").click()
})

11
packages/builder/src/builderStore/store/backend.js
View File

@ -91,10 +91,11 @@ export const getBackendUiStore = () => {
return state
})
},
saveField: ({ originalName, field }) => {
saveField: ({ originalName, field, primaryDisplay = false }) => {
store.update(state => {
// delete the original if renaming
if (originalName) {
// need to handle if the column had no name, empty string
if (originalName || originalName === "") {
delete state.draftTable.schema[originalName]
state.draftTable._rename = {
old: originalName,
@ -102,8 +103,12 @@ export const getBackendUiStore = () => {
}
}
state.draftTable.schema[field.name] = cloneDeep(field)
// Optionally set display column
if (primaryDisplay) {
state.draftTable.primaryDisplay = field.name
}
state.draftTable.schema[field.name] = cloneDeep(field)
store.actions.tables.save(state.draftTable)
return state
})

14
packages/builder/src/components/backend/DataTable/popovers/ColumnPopover.svelte
View File

@ -33,7 +33,7 @@
function deleteColumn() {
if (field.name === $backendUiStore.selectedTable.primaryDisplay) {
notifier.danger("You cannot delete the primary display column")
notifier.danger("You cannot delete the display column")
} else {
backendUiStore.actions.tables.deleteField(field)
notifier.success("Column deleted")
@ -43,7 +43,11 @@
function sort(direction, column) {
backendUiStore.update(state => {
state.sort = { direction, column }
if (direction !== "none") {
state.sort = { direction, column }
} else {
state.sort = undefined
}
return state
})
hideEditor()
@ -70,6 +74,12 @@
<Icon name="delete" />
Delete
</li>
{#if sortDirection === 'desc' || sortDirection === 'asc'}
<li on:click={() => sort('none', field.name)}>
<Icon name="close" />
Remove sort
</li>
{/if}
{#if sortDirection === 'desc' || sortColumn !== field.name}
<li on:click={() => sort('asc', field.name)}>
<Icon name="sortascending" />

14
packages/builder/src/components/backend/DataTable/popovers/CreateEditColumnPopover.svelte
View File

@ -28,9 +28,15 @@
export let field = {
type: "string",
constraints: fieldDefinitions.STRING.constraints,
// Initial value for column name in other table for linked records
fieldName: $backendUiStore.selectedTable.name,
}
let originalName = field.name
let primaryDisplay =
$backendUiStore.selectedTable.primaryDisplay == null ||
$backendUiStore.selectedTable.primaryDisplay === field.name
$: tableOptions = $backendUiStore.tables.filter(
table => table._id !== $backendUiStore.draftTable._id
)
@ -41,6 +47,7 @@
backendUiStore.actions.tables.saveField({
originalName,
field,
primaryDisplay,
})
return state
})
@ -86,6 +93,13 @@
text="Required" />
{/if}
{#if field.type !== 'link'}
<Toggle
bind:checked={primaryDisplay}
thin
text="Use as table display column" />
{/if}
{#if field.type === 'string'}
<Input
thin

10
packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
View File

@ -78,16 +78,6 @@
bind:value={table.name}
on:input={checkValid}
{error} />
<Select
label="Primary Display Column"
thin
secondary
bind:value={table.primaryDisplay}>
<option value="">Choose an option</option>
{#each fields as field}
<option value={field}>{field}</option>
{/each}
</Select>
<footer>
<Button secondary on:click={hideEditor}>Cancel</Button>
<Button primary disabled={error} on:click={save}>Save</Button>

2
packages/builder/src/components/common/LinkedRowSelector.svelte
View File

@ -36,7 +36,7 @@
{#if linkedTable.primaryDisplay == null}
<Label extraSmall grey>{label}</Label>
<Label small black>
Please choose a primary display column for the
Please choose a display column for the
<b>{linkedTable.name}</b>
table.
</Label>

2
packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
View File

@ -20,7 +20,7 @@ export default `<html>
border-style: dashed !important;
border-width: 1px;
color: #000000;
background: #fafafa;
background-color: rgba(0, 0, 0, 0.05);
flex: 1 1 auto;
}
.container-screenslot-placeholder span {

1
packages/builder/src/components/userInterface/SettingsView.svelte
View File

@ -95,7 +95,6 @@
onChange={onScreenPropChange}
props={{ ...excludeProps(def, ['control', 'label']) }} />
{/each}
<hr />
{/if}
{#if displayNameField}

25
packages/builder/src/components/userInterface/propertyCategories.js
View File

@ -523,6 +523,31 @@ export const background = [
label: "Plum Plate",
value: "linear-gradient(135deg, #667eea 0%, #764ba2 100%);",
},
{
label: "Peach Kiss",
value:
"radial-gradient(circle farthest-corner at 50% 100%,rgba(255,173,138,.50), rgba(255,248,247,1) 100%);",
},
{
label: "Flamingo Sunrise",
value:
"-webkit-radial-gradient(center top, rgb(255, 250, 245), rgb(255, 242, 242))",
},
{
label: "Budi Mist",
value:
"radial-gradient(circle, rgba(252,215,212,1) 0%, rgba(255,227,214,1) 50%, rgba(207,218,255,1) 100%);",
},
{
label: "Ballet Slipper",
value:
"linear-gradient(135deg, rgba(252,215,212,1) 20%, rgba(207,218,255,1) 100%);",
},
{
label: "Black Noir",
value:
"linear-gradient(312deg, rgba(60,60,60,1) 0%, rgba(42,42,42,1) 100%);",
},
],
},
{

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

@ -1190,12 +1190,7 @@ export default {
children: [],
properties: {
design: { ...all },
settings: [
{ label: "Logo URL", key: "logoUrl", control: Input },
{ label: "Title", key: "title", control: Input },
{ label: "Color", key: "color", control: Input },
{ label: "Background", key: "backgroundColor", control: Input },
],
settings: [{ label: "Logo URL", key: "logoUrl", control: Input }],
},
},
{

23
packages/client/src/render/screenRouter.js
View File

@ -4,17 +4,20 @@ import { parseAppIdFromCookie } from "./getAppId"
export const screenRouter = ({ screens, onScreenSelected, window }) => {
const makeRootedPath = url => {
if (
window.location &&
(window.location.hostname === "localhost" ||
window.location.hostname === "127.0.0.1")
) {
const appId = parseAppIdFromCookie(window.document.cookie)
if (url) {
if (url.startsWith(appId)) return url
return `/${appId}${url.startsWith("/") ? "" : "/"}${url}`
const hostname = window.location && window.location.hostname
if (hostname) {
if (
hostname === "localhost" ||
hostname === "127.0.0.1" ||
hostname.startsWith("192.168")
) {
const appId = parseAppIdFromCookie(window.document.cookie)
if (url) {
if (url.startsWith(appId)) return url
return `/${appId}${url.startsWith("/") ? "" : "/"}${url}`
}
return appId
}
return appId
}
return url
}

15
packages/server/src/api/controllers/table.js
View File

@ -36,14 +36,23 @@ exports.save = async function(ctx) {
let renameDocs = []
// if the table obj had an _id then it will have been retrieved
const oldTable = ctx.preExisting
let oldTable
if (ctx.request.body && ctx.request.body._id) {
oldTable = await db.get(ctx.request.body._id)
}
// Don't rename if the name is the same
let { _rename } = tableToSave
if (_rename && _rename.old === _rename.updated) {
_rename = null
delete tableToSave._rename
}
// rename row fields when table column is renamed
const { _rename } = tableToSave
if (_rename && tableToSave.schema[_rename.updated].type === "link") {
throw "Cannot rename a linked field."
} else if (_rename && tableToSave.primaryDisplay === _rename.old) {
throw "Cannot rename the primary display field."
throw "Cannot rename the display column."
} else if (_rename) {
const rows = await db.allDocs(
getRowParams(tableToSave._id, null, {

107
packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json
View File

@ -1,59 +1,97 @@
{
"componentLibraries": [
"@budibase/standard-components"
],
"title": "{{ name }}",
"favicon": "./_shared/favicon.png",
"stylesheets": [],
"componentLibraries": ["@budibase/standard-components"],
"props": {
"_id": "private-master-root",
"_component": "@budibase/standard-components/container",
"_children": [
{
"_id": "49e0e519-9e5e-4127-885a-ee6a0a49e2c1",
"_component": "@budibase/standard-components/Navigation",
"_id": "c74f07266980c4b6eafc33e2a6caa783d",
"_component": "@budibase/standard-components/container",
"_styles": {
"normal": {},
"normal": {
"display": "flex",
"flex-direction": "row",
"justify-content": "flex-start",
"align-items": "flex-start",
"background": "#fff",
"width": "100%"
},
"hover": {},
"active": {},
"selected": {}
},
"_code": "",
"logoUrl": "http://acmelogos.com/images/logo-8.svg",
"title": "",
"backgroundColor": "",
"color": "",
"borderWidth": "",
"borderColor": "",
"borderStyle": "",
"_instanceId": "inst_cf8ace4_69efc0d72e6f443db2d4c902c14d9394",
"_instanceName": "Navigation",
"className": "",
"onLoad": [],
"type": "div",
"_instanceId": "inst_app_80b_f158d4057d2c4bedb0042d42fda8abaf",
"_instanceName": "Header",
"_children": [
{
"_id": "48b35328-4c91-4343-a6a3-1a1fd77b3386",
"_component": "@budibase/standard-components/link",
"_id": "49e0e519-9e5e-4127-885a-ee6a0a49e2c1",
"_component": "@budibase/standard-components/Navigation",
"_styles": {
"normal": {
"font-family": "Inter",
"max-width": "1400px",
"margin-left": "auto",
"margin-right": "auto",
"padding": "20px",
"color": "#757575",
"font-weight": "400",
"color": "#000000",
"text-decoration-line": "none",
"font-size": "16px"
"font-size": "16px",
"flex": "1 1 auto"
},
"hover": {},
"active": {},
"selected": {}
},
"_code": "",
"url": "/",
"openInNewTab": false,
"text": "Home",
"logoUrl": "https://d33wubrfki0l68.cloudfront.net/aac32159d7207b5085e74a7ef67afbb7027786c5/2b1fd/img/logo/bb-emblem.svg",
"title": "",
"backgroundColor": "",
"color": "",
"hoverColor": "",
"underline": false,
"fontSize": "",
"fontFamily": "initial",
"borderWidth": "",
"borderColor": "",
"borderStyle": "",
"_instanceId": "inst_cf8ace4_69efc0d72e6f443db2d4c902c14d9394",
"_instanceName": "Home Link",
"_children": []
"_instanceName": "Navigation",
"_children": [
{
"_id": "48b35328-4c91-4343-a6a3-1a1fd77b3386",
"_component": "@budibase/standard-components/link",
"_styles": {
"normal": {
"font-family": "Inter",
"font-weight": "400",
"color": "#000000",
"text-decoration-line": "none",
"font-size": "16px"
},
"hover": {
"color": "#4285f4"
},
"active": {},
"selected": {}
},
"_code": "",
"url": "/",
"openInNewTab": false,
"text": "Home",
"color": "",
"hoverColor": "",
"underline": false,
"fontSize": "",
"fontFamily": "initial",
"_instanceId": "inst_cf8ace4_69efc0d72e6f443db2d4c902c14d9394",
"_instanceName": "Home Link",
"_children": []
}
]
}
]
},
@ -66,7 +104,12 @@
"display": "flex",
"flex-direction": "column",
"justify-content": "flex-start",
"align-items": "stretch"
"align-items": "stretch",
"max-width": "100%",
"margin-left": "20px",
"margin-right": "20px",
"width": "1400px",
"padding": "20px"
},
"hover": {},
"active": {},
@ -83,11 +126,12 @@
"normal": {
"display": "flex",
"flex-direction": "column",
"align-items": "stretch",
"align-items": "center",
"justify-content": "flex-start",
"margin-right": "auto",
"margin-left": "auto",
"min-height": "100%"
"min-height": "100%",
"background-image": "linear-gradient(135deg, rgba(252,215,212,1) 20%, rgba(207,218,255,1) 100%);"
},
"selected": {}
},
@ -95,6 +139,5 @@
"className": "",
"onLoad": []
},
"_css": "",
"uiFunctions": ""
}

89
packages/server/src/utilities/appDirectoryTemplate/pages/main/screens/d834fea2-1b3e-4320-ab34-f9009f5ecc59.json
View File

@ -5,7 +5,13 @@
"_id": "d834fea2-1b3e-4320-ab34-f9009f5ecc59",
"_component": "@budibase/standard-components/container",
"_styles": {
"normal": {},
"normal": {
"flex": "1 1 auto",
"display": "flex",
"flex-direction": "column",
"justify-content": "flex-start",
"align-items": "stretch"
},
"hover": {},
"active": {},
"selected": {}
@ -18,40 +24,75 @@
{
"_id": "ef60083f-4a02-4df3-80f3-a0d3d16847e7",
"_component": "@budibase/standard-components/heading",
"_styles": {
"normal": {},
"hover": {},
"active": {},
"selected": {}
},
"_code": "",
"className": "",
"text": "Home",
"type": "h1",
"_instanceId": "inst_cf8ace4_69efc0d72e6f443db2d4c902c14d9394",
"_instanceName": "Heading",
"_children": []
},
{
"_id": "6c256e06-784c-4ac0-a644-ed2f9b91d459",
"_component": "@budibase/standard-components/image",
"_styles": {
"normal": {
"width": "100%"
"text-align": "left"
},
"hover": {},
"active": {},
"selected": {}
},
"_code": "",
"url": "https://source.unsplash.com/Vun-71Vy2hc",
"className": "",
"description": "",
"height": "",
"width": "",
"text": "Welcome to your Budibase App 👋",
"type": "h2",
"_instanceId": "inst_cf8ace4_69efc0d72e6f443db2d4c902c14d9394",
"_instanceName": "Image",
"_instanceName": "Heading",
"_children": []
},
{
"_id": "cbbf41b27c2b44d1abba38bb694880c6a",
"_component": "@budibase/standard-components/container",
"_styles": {
"normal": {
"display": "flex",
"flex-direction": "column",
"justify-content": "center",
"align-items": "stretch",
"flex": "1 1 auto",
"border-width": "4px",
"border-style": "Dashed",
"margin-bottom": "32px"
},
"hover": {},
"active": {},
"selected": {}
},
"_code": "",
"className": "",
"onLoad": [],
"type": "div",
"_instanceId": "inst_app_2cc_ca3383f896034e9295345c05f7dfca0c",
"_instanceName": "Video Container",
"_children": [
{
"_id": "c07d752cb3e544b418088fa9be84ba2e4",
"_component": "@budibase/standard-components/embed",
"_styles": {
"normal": {
"width": "100%",
"flex": "1 1 auto",
"opacity": "0",
"transition-property": "Opacity",
"transition-duration": "1s",
"transition-timing-function:": "ease-in"
},
"hover": {
"transition-property": "Opacity",
"transition-duration": "1s",
"transition-timing-function:": "ease-out",
"opacity": "1"
},
"active": {},
"selected": {}
},
"_code": "",
"embed": "<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/dQw4w9WgXcQ\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>",
"_instanceId": "inst_app_2cc_ca3383f896034e9295345c05f7dfca0c",
"_instanceName": "Rick Astley Video",
"_children": []
}
]
}
],
"_instanceName": "Home"

41
packages/server/src/utilities/appDirectoryTemplate/pages/main/screens/f684460e-1f79-42b4-8ffd-1f708bca93ed.json
View File

@ -1,41 +0,0 @@
{
"description": "",
"url": "",
"_css": "",
"props": {
"_id": "f684460e-1f79-42b4-8ffd-1f708bca93ed",
"_component": "@budibase/standard-components/container",
"_styles": {
"normal": {},
"hover": {},
"active": {},
"selected": {}
},
"_code": "",
"className": "",
"onLoad": [],
"type": "div",
"_children": [
{
"_id": "7d1d6b43-b444-46a5-a75c-267fd6b5baf6",
"_component": "@budibase/standard-components/heading",
"_styles": {
"normal": {},
"hover": {},
"active": {},
"selected": {}
},
"_code": "",
"className": "",
"text": "Screen1",
"type": "h1",
"_instanceId": "inst_cf8ace4_69efc0d72e6f443db2d4c902c14d9394",
"_instanceName": "Heading",
"_children": []
}
],
"_instanceName": "Screen 1"
},
"route": "/screen1",
"name": "f684460e-1f79-42b4-8ffd-1f708bca93ed"
}

40
packages/server/src/utilities/appDirectoryTemplate/pages/unauthenticated/page.json
View File

@ -1,5 +1,7 @@
{
"componentLibraries": ["@budibase/standard-components"],
"componentLibraries": [
"@budibase/standard-components"
],
"title": "{{ name }}",
"favicon": "./_shared/favicon.png",
"stylesheets": [],
@ -11,7 +13,19 @@
"_id": "686c252d-dbf2-4e28-9078-414ba4719759",
"_component": "@budibase/standard-components/login",
"_styles": {
"normal": {},
"normal": {
"padding": "64px",
"background": "rgba(255, 255, 255, 0.4)",
"border-radius": "0.5rem",
"margin-top": "0px",
"margin": "0px",
"line-height": "1",
"box-shadow": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
"font-size": "16px",
"font-family": "Inter",
"flex": "0 1 auto",
"transform": "0"
},
"hover": {},
"active": {},
"selected": {}
@ -25,20 +39,30 @@
"_instanceName": "Login",
"inputClass": "",
"_children": [],
"title": "Login to {{ name }}",
"buttonText": "Login",
"logo": ""
"title": "Log in to {{ name }}",
"buttonText": "Log In",
"logo": "https://d33wubrfki0l68.cloudfront.net/aac32159d7207b5085e74a7ef67afbb7027786c5/2b1fd/img/logo/bb-emblem.svg"
}
],
"type": "div",
"_styles": {
"layout": {},
"position": {}
"active": {},
"hover": {},
"normal": {
"display": "flex",
"flex-direction": "column",
"align-items": "center",
"justify-content": "center",
"margin-right": "auto",
"margin-left": "auto",
"min-height": "100%",
"background-image": "linear-gradient(135deg, rgba(252,215,212,1) 20%, rgba(207,218,255,1) 100%);"
},
"selected": {}
},
"_code": "",
"className": "",
"onLoad": []
},
"_css": "",
"uiFunctions": ""
}

2
packages/standard-components/src/LinkedRowSelector.svelte
View File

@ -45,7 +45,7 @@
<Label extraSmall grey>{label}</Label>
{/if}
<Label small black>
Please choose a primary display column for the
Please choose a display column for the
<b>{linkedTable.name}</b>
table.
</Label>

18
packages/standard-components/src/Login.svelte
View File

@ -1,7 +1,7 @@
<script>
import Button from "./Button.svelte"
export let buttonText = "Login"
export let buttonText = "Log In"
export let logo = ""
export let title = ""
export let buttonClass = ""
@ -46,7 +46,7 @@
{/if}
{#if title}
<h1 class="header-content">{title}</h1>
<h2 class="header-content">{title}</h2>
{/if}
<div class="form-root">
@ -69,7 +69,7 @@
<div class="login-button-container">
<button disabled={loading} on:click={login} class={_buttonClass}>
{buttonText || 'Login'}
{buttonText || 'Log In'}
</button>
</div>
@ -100,7 +100,9 @@
}
.logo-container > img {
height: 80px;
max-width: 200px;
margin-bottom: 20px;
}
.login-button-container {
@ -112,24 +114,24 @@
font-family: Inter;
font-weight: 700;
color: #1f1f1f;
font-size: 48px;
line-height: 72px;
margin-bottom: 30px;
font-size: 32px;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
font-feature-settings: "case" "rlig" "calt" 0;
margin: 0 0 20px 0;
}
.incorrect-details-panel {
margin-top: 30px;
margin-top: 26px;
padding: 10px;
border-style: solid;
border-width: 1px;
border-color: maroon;
border-radius: 1px;
border-radius: 4px;
text-align: center;
color: maroon;
background-color: mistyrose;
align-self: stretch;
}
.form-root {

96
packages/standard-components/src/Navigation.svelte
View File

@ -1,28 +1,11 @@
<script>
import { cssVars, createClasses } from "./cssVars"
export let className = ""
export let onLoad
export let backgroundColor
export let color
export let borderWidth
export let borderColor
export let borderStyle
export let logoUrl
export let title
export let _bb
export let title
let itemContainer
let hasLoaded
let currentChildren
$: cssVariables = {
backgroundColor,
color,
borderWidth,
borderColor,
borderStyle,
}
$: {
if (itemContainer) {
@ -33,46 +16,69 @@
}
}
}
const logOut = () => {
document.cookie =
"budibase:token=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;"
location.reload()
}
</script>
<nav use:cssVars={cssVariables}>
{#if logoUrl}
<div class="nav">
<div class="nav__top">
<a href="/">
<img class="logo" alt="logo" src={logoUrl} height="48" />
<span>{title}</span>
{#if logoUrl}
<img class="logo" alt="logo" src={logoUrl} height="48" />
{/if}
{#if title}<span>{title}</span>{/if}
</a>
{:else}
<div />
{/if}
<div class="menu-items" bind:this={itemContainer} />
</nav>
<div class="nav__controls">
<div on:click={logOut}>Log out</div>
</div>
</div>
<div class="nav__menu" bind:this={itemContainer} />
</div>
<style>
nav {
color: var(--color);
background-color: var(--backgroundColor);
align-items: center;
.nav {
display: flex;
font-weight: bold;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
}
.nav__top {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 20px 0px;
}
nav > a {
display: flex;
align-items: center;
font-size: 1.5em;
color: var(--color);
text-decoration: none;
}
nav a img {
.nav__top img {
margin-right: 16px;
}
.menu-items {
.nav__controls {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
gap: 16px;
}
.menu-items > :global(*) {
margin: 0 10px;
.nav__controls > div:hover {
cursor: pointer;
color: #4285f4;
}
.nav__menu {
display: flex;
margin-top: 40px;
gap: 16px;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.nav__menu > a {
font-size: 1.5em;
text-decoration: none;
}
</style>