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

Update server generated layouts and improve layout styles

This commit is contained in:
Andrew Kingston 2021-06-17 12:57:36 +01:00
parent 52e544068b
commit a4d808c7f2
5 changed files with 70 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/builder/src/components/design/PropertiesPanel/PropertyControls/NavigationEditor/NavigationDrawer.svelte
View File

@ -16,12 +16,18 @@
const flipDurationMs = 150 const flipDurationMs = 150
$: links.forEach(link => {
if (!link.id) {
link.id = generate()
}
})
$: urlOptions = $store.screens $: urlOptions = $store.screens
.map(screen => screen.routing?.route) .map(screen => screen.routing?.route)
.filter(x => x != null) .filter(x => x != null)
const addLink = () => { const addLink = () => {
links = [...links, { id: generate() }] links = [...links, {}]
} }
const removeLink = id => { const removeLink = id => {

126
packages/server/src/constants/layouts.js
View File

@ -22,9 +22,7 @@ const EMPTY_LAYOUT = {
"flex-direction": "column", "flex-direction": "column",
"justify-content": "flex-start", "justify-content": "flex-start",
"align-items": "stretch", "align-items": "stretch",
"max-width": "100%", padding: "32px",
width: "1400px",
padding: "20px",
}, },
hover: {}, hover: {},
active: {}, active: {},
@ -37,15 +35,17 @@ const EMPTY_LAYOUT = {
active: {}, active: {},
hover: {}, hover: {},
normal: { normal: {
"min-height": "100%",
"background-image": "#f5f5f5", "background-image": "#f5f5f5",
}, },
selected: {}, selected: {},
}, },
direction: "column", navigation: "Top",
hAlign: "center", links: [
vAlign: "top", {
size: "grow", text: "Home",
url: "/",
},
],
}, },
} }
@ -56,83 +56,11 @@ const BASE_LAYOUTS = [
title: "{{ name }}", title: "{{ name }}",
favicon: "./_shared/favicon.png", favicon: "./_shared/favicon.png",
stylesheets: [], stylesheets: [],
name: "Top Navigation Layout", name: "Navigation Layout",
props: { props: {
_id: "4f569166-a4f3-47ea-a09e-6d218c75586f", _id: "4f569166-a4f3-47ea-a09e-6d218c75586f",
_component: "@budibase/standard-components/container", _component: "@budibase/standard-components/layout",
_children: [ _children: [
{
_id: "c74f07266980c4b6eafc33e2a6caa783d",
_component: "@budibase/standard-components/container",
_styles: {
normal: {
background: "#fff",
width: "100%",
"box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
},
hover: {},
active: {},
selected: {},
},
_instanceName: "Header",
_children: [
{
_id: "49e0e519-9e5e-4127-885a-ee6a0a49e2c1",
_component: "@budibase/standard-components/navigation",
_styles: {
normal: {
"max-width": "1400px",
padding: "20px",
"font-weight": "400",
"font-size": "16px",
flex: "1 1 auto",
},
hover: {},
active: {},
selected: {},
},
title: "",
backgroundColor: "",
color: "",
borderWidth: "",
borderColor: "",
borderStyle: "",
_instanceName: "Navigation",
_children: [
{
_id: "48b35328-4c91-4343-a6a3-1a1fd77b3386",
_component: "@budibase/standard-components/link",
_styles: {
normal: {
"font-weight": "600",
"text-decoration-line": "none",
"font-size": "16px",
},
hover: {
color: "#4285f4",
},
active: {},
selected: {},
},
url: "/",
openInNewTab: false,
text: "Home",
color: "",
hoverColor: "",
underline: false,
fontSize: "",
fontFamily: "initial",
_instanceName: "Home Link",
_children: [],
},
],
},
],
direction: "row",
hAlign: "center",
vAlign: "middle",
size: "shrink",
},
{ {
_id: "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967", _id: "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967",
_component: "@budibase/standard-components/screenslot", _component: "@budibase/standard-components/screenslot",
@ -143,9 +71,7 @@ const BASE_LAYOUTS = [
"flex-direction": "column", "flex-direction": "column",
"justify-content": "flex-start", "justify-content": "flex-start",
"align-items": "stretch", "align-items": "stretch",
"max-width": "100%", padding: "32px",
width: "1400px",
padding: "20px",
}, },
hover: {}, hover: {},
active: {}, active: {},
@ -158,15 +84,17 @@ const BASE_LAYOUTS = [
active: {}, active: {},
hover: {}, hover: {},
normal: { normal: {
"min-height": "100%",
background: "#f5f5f5", background: "#f5f5f5",
}, },
selected: {}, selected: {},
}, },
direction: "column", navigation: "Top",
hAlign: "center", links: [
vAlign: "top", {
size: "grow", text: "Home",
url: "/",
},
],
}, },
}, },
{ {
@ -178,7 +106,7 @@ const BASE_LAYOUTS = [
name: "Empty Layout", name: "Empty Layout",
props: { props: {
_id: "3723ffa1-f9e0-4c05-8013-98195c788ed6", _id: "3723ffa1-f9e0-4c05-8013-98195c788ed6",
_component: "@budibase/standard-components/container", _component: "@budibase/standard-components/layout",
_children: [ _children: [
{ {
_id: "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967", _id: "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967",
@ -190,9 +118,7 @@ const BASE_LAYOUTS = [
"flex-direction": "column", "flex-direction": "column",
"justify-content": "flex-start", "justify-content": "flex-start",
"align-items": "stretch", "align-items": "stretch",
"max-width": "100%", padding: "32px",
width: "1400px",
padding: "20px",
}, },
hover: {}, hover: {},
active: {}, active: {},
@ -205,15 +131,17 @@ const BASE_LAYOUTS = [
active: {}, active: {},
hover: {}, hover: {},
normal: { normal: {
"min-height": "100%",
background: "#f5f5f5", background: "#f5f5f5",
}, },
selected: {}, selected: {},
}, },
direction: "column", navigation: "Top",
hAlign: "center", links: [
vAlign: "top", {
size: "grow", text: "Home",
url: "/",
},
],
}, },
}, },
] ]

6
packages/standard-components/manifest.json
View File

@ -37,6 +37,12 @@
"options": ["Top", "Left", "None"], "options": ["Top", "Left", "None"],
"defaultValue": "Top" "defaultValue": "Top"
}, },
{
"type": "boolean",
"label": "Sticky header",
"key": "sticky",
"defaultValue": false
},
{ {
"type": "navigation", "type": "navigation",
"label": "Links", "label": "Links",

46
packages/standard-components/src/Layout.svelte
View File

@ -1,16 +1,16 @@
<script> <script>
import { getContext } from "svelte" import { getContext } from "svelte"
import { ActionButton, Heading, Icon } from "@budibase/bbui" import { Heading, Icon } from "@budibase/bbui"
const { styleable, linkable } = getContext("sdk") const { styleable, linkable } = getContext("sdk")
const component = getContext("component") const component = getContext("component")
export let title = "" export let title
export let hideTitle = false export let hideTitle = false
export let logoUrl = "https://i.imgur.com/Xhdt1YP.png" export let logoUrl = "https://i.imgur.com/Xhdt1YP.png"
export let hideLogo = false export let hideLogo = false
export let navigation = "Top" export let navigation = "Top"
export let sticky = true export let sticky = false
export let links export let links
$: validLinks = links?.filter(link => link.text && link.url) || [] $: validLinks = links?.filter(link => link.text && link.url) || []
@ -54,7 +54,7 @@
{#if !hideLogo} {#if !hideLogo}
<img src={logoUrl} alt={title} /> <img src={logoUrl} alt={title} />
{/if} {/if}
{#if !hideTitle} {#if navigation === "Top" && !hideTitle && title}
<Heading>{title}</Heading> <Heading>{title}</Heading>
{/if} {/if}
</div> </div>
@ -134,7 +134,7 @@
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
padding: var(--spacing-xl); padding: var(--spacing-xl) 32px;
width: 1400px; width: 1400px;
max-width: 100%; max-width: 100%;
} }
@ -160,6 +160,7 @@
width: 1400px; width: 1400px;
max-width: 100%; max-width: 100%;
position: relative; position: relative;
padding: 32px;
} }
/* Nav components */ /* Nav components */
@ -189,12 +190,12 @@
} }
.link { .link {
color: var(--spectrum-alias-text-color); color: var(--spectrum-alias-text-color);
font-size: var(--spectrum-alias-font-size-default); font-size: var(--spectrum-global-dimension-font-size-200);
font-weight: 600; font-weight: 600;
transition: color 130ms ease-out; transition: color 130ms ease-out;
} }
.link:hover { .link:hover {
color: var(--spectrum-alias-text-color-hover); color: var(--spectrum-global-color-blue-600);
} }
.close { .close {
display: none; display: none;
@ -222,33 +223,21 @@
} }
.nav--left { .nav--left {
width: 250px; width: 250px;
gap: var(--spacing-m); gap: var(--spacing-xl);
padding: var(--spacing-xl);
} }
.nav--top .links {
margin-top: var(--spacing-l);
}
.nav--left .logo {
gap: var(--spacing-m);
}
.nav--left .logo img { .nav--left .logo img {
height: 28px; height: 36px;
}
.nav--left .logo :global(h1) {
font-size: var(--spectrum-global-dimension-font-size-100);
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 0;
flex: 1 1 auto;
} }
.nav--left .links { .nav--left .links {
margin-top: var(--spacing-l);
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
} }
.nav--left .link {
font-size: var(--spectrum-global-dimension-font-size-150);
}
} }
/* Mobile nav overrides */ /* Mobile nav overrides */
@ -267,7 +256,7 @@
/* Force standard top bar */ /* Force standard top bar */
.nav { .nav {
padding: var(--spacing-m) var(--spacing-xl); padding: var(--spacing-m) 16px;
} }
.burger { .burger {
display: grid; display: grid;
@ -280,6 +269,11 @@
display: none; display: none;
} }
/* Reduce padding */
.main {
padding: 16px;
}
/* Transform links into drawer */ /* Transform links into drawer */
.links { .links {
position: fixed; position: fixed;

17
packages/standard-components/src/ScreenSlot.svelte
View File

@ -7,7 +7,7 @@
const component = getContext("component") const component = getContext("component")
</script> </script>
<div use:styleable={$component.styles}> <div use:styleable={{ ...$component.styles, empty: true }}>
<h1>Screen Slot</h1> <h1>Screen Slot</h1>
<span> <span>
The screens that you create will be displayed inside this box. The screens that you create will be displayed inside this box.
@ -20,13 +20,16 @@
div { div {
display: flex !important; display: flex !important;
flex-direction: column !important; flex-direction: column !important;
align-items: center !important;
justify-content: center !important; justify-content: center !important;
padding: 20px !important; align-items: center !important;
padding: 32px !important;
text-align: center !important; text-align: center !important;
border-style: dashed !important; }
border-width: 1px !important; h1 {
color: #000000 !important; color: var(--spectrum-alias-text-color);
background-color: rgba(0, 0, 0, 0.05) !important; }
span {
font-size: var(--font-size-s);
color: var(--grey-6);
} }
</style> </style>