Andrew Kingston
GitHub
commit
5f71a7270c
|
|
@ -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")
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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 => {
|
||||
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" />
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -95,7 +95,6 @@
|
|||
onChange={onScreenPropChange}
|
||||
props={{ ...excludeProps(def, ['control', 'label']) }} />
|
||||
{/each}
|
||||
<hr />
|
||||
{/if}
|
||||
|
||||
{#if displayNameField}
|
||||
|
|
|
|||
|
|
@ -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%);",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -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 }],
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -4,10 +4,12 @@ import { parseAppIdFromCookie } from "./getAppId"
|
|||
|
||||
export const screenRouter = ({ screens, onScreenSelected, window }) => {
|
||||
const makeRootedPath = url => {
|
||||
const hostname = window.location && window.location.hostname
|
||||
if (hostname) {
|
||||
if (
|
||||
window.location &&
|
||||
(window.location.hostname === "localhost" ||
|
||||
window.location.hostname === "127.0.0.1")
|
||||
hostname === "localhost" ||
|
||||
hostname === "127.0.0.1" ||
|
||||
hostname.startsWith("192.168")
|
||||
) {
|
||||
const appId = parseAppIdFromCookie(window.document.cookie)
|
||||
if (url) {
|
||||
|
|
@ -16,6 +18,7 @@ export const screenRouter = ({ screens, onScreenSelected, window }) => {
|
|||
}
|
||||
return appId
|
||||
}
|
||||
}
|
||||
return url
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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, {
|
||||
|
|
|
|||
|
|
@ -1,23 +1,57 @@
|
|||
{
|
||||
"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",
|
||||
"className": "",
|
||||
"onLoad": [],
|
||||
"type": "div",
|
||||
"_instanceId": "inst_app_80b_f158d4057d2c4bedb0042d42fda8abaf",
|
||||
"_instanceName": "Header",
|
||||
"_children": [
|
||||
{
|
||||
"_id": "49e0e519-9e5e-4127-885a-ee6a0a49e2c1",
|
||||
"_component": "@budibase/standard-components/Navigation",
|
||||
"_styles": {
|
||||
"normal": {
|
||||
"max-width": "1400px",
|
||||
"margin-left": "auto",
|
||||
"margin-right": "auto",
|
||||
"padding": "20px",
|
||||
"color": "#757575",
|
||||
"font-weight": "400",
|
||||
"font-size": "16px",
|
||||
"flex": "1 1 auto"
|
||||
},
|
||||
"hover": {},
|
||||
"active": {},
|
||||
"selected": {}
|
||||
},
|
||||
"_code": "",
|
||||
"logoUrl": "https://d33wubrfki0l68.cloudfront.net/aac32159d7207b5085e74a7ef67afbb7027786c5/2b1fd/img/logo/bb-emblem.svg",
|
||||
"title": "",
|
||||
"backgroundColor": "",
|
||||
"color": "",
|
||||
|
|
@ -38,7 +72,9 @@
|
|||
"text-decoration-line": "none",
|
||||
"font-size": "16px"
|
||||
},
|
||||
"hover": {},
|
||||
"hover": {
|
||||
"color": "#4285f4"
|
||||
},
|
||||
"active": {},
|
||||
"selected": {}
|
||||
},
|
||||
|
|
@ -56,6 +92,8 @@
|
|||
"_children": []
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"_id": "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967",
|
||||
|
|
@ -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": ""
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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": {}
|
||||
|
|
@ -19,40 +25,75 @@
|
|||
"_id": "ef60083f-4a02-4df3-80f3-a0d3d16847e7",
|
||||
"_component": "@budibase/standard-components/heading",
|
||||
"_styles": {
|
||||
"normal": {},
|
||||
"normal": {
|
||||
"text-align": "left"
|
||||
},
|
||||
"hover": {},
|
||||
"active": {},
|
||||
"selected": {}
|
||||
},
|
||||
"_code": "",
|
||||
"className": "",
|
||||
"text": "Home",
|
||||
"type": "h1",
|
||||
"text": "Welcome to your Budibase App 👋",
|
||||
"type": "h2",
|
||||
"_instanceId": "inst_cf8ace4_69efc0d72e6f443db2d4c902c14d9394",
|
||||
"_instanceName": "Heading",
|
||||
"_children": []
|
||||
},
|
||||
{
|
||||
"_id": "6c256e06-784c-4ac0-a644-ed2f9b91d459",
|
||||
"_component": "@budibase/standard-components/image",
|
||||
"_id": "cbbf41b27c2b44d1abba38bb694880c6a",
|
||||
"_component": "@budibase/standard-components/container",
|
||||
"_styles": {
|
||||
"normal": {
|
||||
"width": "100%"
|
||||
"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": "",
|
||||
"url": "https://source.unsplash.com/Vun-71Vy2hc",
|
||||
"className": "",
|
||||
"description": "",
|
||||
"height": "",
|
||||
"width": "",
|
||||
"_instanceId": "inst_cf8ace4_69efc0d72e6f443db2d4c902c14d9394",
|
||||
"_instanceName": "Image",
|
||||
"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"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -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": {}
|
||||
|
|
@ -26,19 +40,29 @@
|
|||
"inputClass": "",
|
||||
"_children": [],
|
||||
"title": "Log in to {{ name }}",
|
||||
"buttonText": "Login",
|
||||
"logo": ""
|
||||
"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": ""
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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="/">
|
||||
{#if logoUrl}
|
||||
<img class="logo" alt="logo" src={logoUrl} height="48" />
|
||||
<span>{title}</span>
|
||||
</a>
|
||||
{:else}
|
||||
<div />
|
||||
{/if}
|
||||
<div class="menu-items" bind:this={itemContainer} />
|
||||
</nav>
|
||||
{#if title}<span>{title}</span>{/if}
|
||||
</a>
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue