CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-26 10:00:41 +12:00
Code Issues Projects Releases Wiki Activity

Update server generated layouts and improve layout styles

Browse source
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
$: links.forEach(link => {
if (!link.id) {
link.id = generate()
}
})
$: urlOptions = $store.screens
.map(screen => screen.routing?.route)
.filter(x => x != null)
const addLink = () => {
links = [...links, { id: generate() }]
links = [...links, {}]
}
const removeLink = id => {

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

@ -22,9 +22,7 @@ const EMPTY_LAYOUT = {
"flex-direction": "column",
"justify-content": "flex-start",
"align-items": "stretch",
"max-width": "100%",
width: "1400px",
padding: "20px",
padding: "32px",
},
hover: {},
active: {},
@ -37,15 +35,17 @@ const EMPTY_LAYOUT = {
active: {},
hover: {},
normal: {
"min-height": "100%",
"background-image": "#f5f5f5",
},
selected: {},
},
direction: "column",
hAlign: "center",
vAlign: "top",
size: "grow",
navigation: "Top",
links: [
{
text: "Home",
url: "/",
},
],
},
}
@ -56,83 +56,11 @@ const BASE_LAYOUTS = [
title: "{{ name }}",
favicon: "./_shared/favicon.png",
stylesheets: [],
name: "Top Navigation Layout",
name: "Navigation Layout",
props: {
_id: "4f569166-a4f3-47ea-a09e-6d218c75586f",
_component: "@budibase/standard-components/container",
_component: "@budibase/standard-components/layout",
_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",
_component: "@budibase/standard-components/screenslot",
@ -143,9 +71,7 @@ const BASE_LAYOUTS = [
"flex-direction": "column",
"justify-content": "flex-start",
"align-items": "stretch",
"max-width": "100%",
width: "1400px",
padding: "20px",
padding: "32px",
},
hover: {},
active: {},
@ -158,15 +84,17 @@ const BASE_LAYOUTS = [
active: {},
hover: {},
normal: {
"min-height": "100%",
background: "#f5f5f5",
},
selected: {},
},
direction: "column",
hAlign: "center",
vAlign: "top",
size: "grow",
navigation: "Top",
links: [
{
text: "Home",
url: "/",
},
],
},
},
{
@ -178,7 +106,7 @@ const BASE_LAYOUTS = [
name: "Empty Layout",
props: {
_id: "3723ffa1-f9e0-4c05-8013-98195c788ed6",
_component: "@budibase/standard-components/container",
_component: "@budibase/standard-components/layout",
_children: [
{
_id: "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967",
@ -190,9 +118,7 @@ const BASE_LAYOUTS = [
"flex-direction": "column",
"justify-content": "flex-start",
"align-items": "stretch",
"max-width": "100%",
width: "1400px",
padding: "20px",
padding: "32px",
},
hover: {},
active: {},
@ -205,15 +131,17 @@ const BASE_LAYOUTS = [
active: {},
hover: {},
normal: {
"min-height": "100%",
background: "#f5f5f5",
},
selected: {},
},
direction: "column",
hAlign: "center",
vAlign: "top",
size: "grow",
navigation: "Top",
links: [
{
text: "Home",
url: "/",
},
],
},
},
]

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

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

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

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

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

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