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

wip layout compoent

This commit is contained in:
Keviin Åberg Kultalahti 2021-06-11 14:47:57 +02:00
parent 76954b948d
commit d541e60243
9 changed files with 261 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/builder/src/components/design/NavigationPanel/NewLayoutModal.svelte
View File

@ -1,5 +1,4 @@
<script>
import { goto } from "@roxi/routify"
import { notifications } from "@budibase/bbui"
import { store } from "builderStore"
import { Input, ModalContent } from "@budibase/bbui"

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

@ -10,44 +10,25 @@ const EMPTY_LAYOUT = {
stylesheets: [],
props: {
_id: "30b8822a-d07b-49f4-9531-551e37c6899b",
_component: "@budibase/standard-components/container",
_component: "@budibase/standard-components/layout",
_children: [
{
_id: "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967",
_component: "@budibase/standard-components/screenslot",
_styles: {
normal: {
flex: "1 1 auto",
display: "flex",
"flex-direction": "column",
"justify-content": "flex-start",
"align-items": "stretch",
"max-width": "100%",
"margin-left": "20px",
"margin-right": "20px",
width: "1400px",
},
normal: {},
hover: {},
active: {},
selected: {},
},
_children: [],
},
}
],
type: "div",
navigation: "Top",
_styles: {
active: {},
hover: {},
normal: {
display: "flex",
"flex-direction": "column",
"align-items": "center",
"justify-content": "flex-start",
"margin-right": "auto",
"margin-left": "auto",
"min-height": "100%",
"background-image": "#f5f5f5",
},
normal: {},
selected: {},
},
className: "",

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

@ -9,6 +9,51 @@
"illegalChildren": ["Section"],
"settings": []
},
"layout": {
"name": "Layout",
"description": "This component is specific only to layouts",
"icon": "Sandbox",
"hasChildren": true,
"styleable": true,
"transitionable": true,
"illegalChildren": [],
"settings": [
{
"type": "text",
"label": "Logo URL",
"key": "logoUrl"
},
{
"type": "text",
"label": "Title",
"key": "title"
},
{
"type": "boolean",
"label": "Hide title",
"key": "hideTitle",
"defaultValue": false
},
{
"type": "boolean",
"label": "Hide logo",
"key": "hideLogo",
"defaultValue": false
},
{
"type": "select",
"label": "Navigation",
"key": "navigation",
"options": ["Top", "Left", "None"],
"defaultValue": "Top"
},
{
"type": "select",
"label": "Links",
"key": "type"
}
]
},
"section": {
"name": "Section",
"description": "Add a section to your application",
@ -345,13 +390,6 @@
"label": "Logo URL",
"key": "logoUrl"
},
{
"type": "select",
"label": "Type",
"key": "type",
"options": ["Horizontal", "Vertical"],
"defaultValue": "Horizontal"
},
{
"type": "boolean",
"label": "Hide logo",

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

@ -1,7 +1,7 @@
<script>
import { getContext } from "svelte"
const { authStore, linkable, styleable, builderStore } = getContext("sdk")
const { linkable, styleable } = getContext("sdk")
const component = getContext("component")
// BB emblem: https://i.imgur.com/Xhdt1YP.png
@ -9,7 +9,6 @@
export let logoUrl
export let hideLogo
export let type = "Horizontal"
</script>
<div class="nav" use:styleable={$component.styles}>
@ -49,18 +48,6 @@
margin-right: 16px;
}
.nav__controls {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
gap: 16px;
}
.nav__controls > div:hover {
cursor: pointer;
color: #4285f4;
}
.nav__menu {
display: flex;
flex-direction: row;

3
packages/standard-components/src/Section.svelte
View File

@ -5,6 +5,7 @@
const component = getContext("component")
export let type = "mainSidebar"
export let gap = "16px"
export let minSize = 250
let layoutMap = {
mainSidebar: 2,
@ -17,7 +18,7 @@
$: columnsDependingOnSize = calculateColumns(containerWidth)
function calculateColumns(parentWidth) {
const numberOfAllowedColumns = Math.floor(parentWidth / 250) || 100
const numberOfAllowedColumns = Math.floor(parentWidth / minSize) || 100
if (layoutMap[type] <= numberOfAllowedColumns) {
return false
} else if (layoutMap[type] > numberOfAllowedColumns) {

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

@ -20,6 +20,7 @@ export { default as stackedlist } from "./StackedList.svelte"
export { default as card } from "./Card.svelte"
export { default as text } from "./Text.svelte"
export { default as navigation } from "./Navigation.svelte"
export { default as layout } from "./layout/Layout.svelte"
export { default as link } from "./Link.svelte"
export { default as heading } from "./Heading.svelte"
export { default as image } from "./Image.svelte"

95
packages/standard-components/src/layout/Layout.svelte Normal file
View File

@ -0,0 +1,95 @@
<script>
import Navigation from "./Navigation.svelte"
import { ActionButton } from "@budibase/bbui"
import { getContext } from "svelte"
const { styleable, transition } = getContext("sdk")
const component = getContext("component")
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 links = [
{ text: "Some Text", url: "/" },
{ text: "Some Text", url: "/" },
]
const navigationTypes = new Map([
["Top", "top"],
["Left", "left"],
["None", ""],
])
</script>
<div
class="container {navigationTypes.get(navigation)}"
in:transition={{ type: $component.transition }}
use:styleable={$component.styles}
>
{#if navigationTypes.get(navigation)}
<div class="nav">
<div class="logo">
{#if !hideLogo}
<img src={logoUrl} alt={title} height="48" />
{/if}
{#if !hideTitle}
<span>{title}</span>
{/if}
</div>
<div class="links">
<Navigation {navigation} {links} />
</div>
<div class="portal">
<ActionButton quiet icon="Apps" on:click />
</div>
</div>
{/if}
<div class="main">
<slot />
</div>
</div>
<style>
.container {
display: grid;
grid-gap: 16px;
grid-template-columns: 1fr;
position: relative;
}
.nav {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas: "burger logo portal";
justify-content: space-between;
padding: var(--spacing-m);
}
.top,
.left {
grid-template-columns: 1fr;
}
.links {
grid-area: burger;
}
.logo {
display: grid;
place-items: center;
grid-area: logo;
}
.portal {
grid-area: portal;
display: grid;
justify-content: end;
}
@media (min-width: 600px) {
.nav {
display: initial;
}
.top {
grid-template-columns: 1fr;
}
.left {
grid-template-columns: 200px 1fr;
}
}
</style>

33
packages/standard-components/src/layout/Mobile.svelte Normal file
View File

@ -0,0 +1,33 @@
<script>
import {
ActionButton,
SideNavigation,
SideNavigationItem as Item,
} from "@budibase/bbui"
export let links
</script>
<div class="overlay">
<SideNavigation>
{#each links as { text, url }}
<!-- Needs logic to select current route -->
<Item selected={false} href={url} on:click>{text}</Item>
{/each}
</SideNavigation>
<div class="close">
<ActionButton quiet icon="Close" on:click />
</div>
</div>
<style>
.overlay {
background: white;
position: absolute;
inset: 0;
}
.close {
position: absolute;
top: var(--spacing-m);
right: var(--spacing-m);
}
</style>

72
packages/standard-components/src/layout/Navigation.svelte Normal file
View File

@ -0,0 +1,72 @@
<script>
import Mobile from "./Mobile.svelte"
import {
ActionButton,
SideNavigation,
SideNavigationItem as Item,
} from "@budibase/bbui"
export let navigation
export let links
let mobileOpen = false
</script>
<div class="container">
{#if navigation === "Top"}
<ul>
{#each links as { text, url }}
<li><a href={url}>{text}</a></li>
{/each}
</ul>
{:else}
<SideNavigation>
{#each links as { text, url }}
<!-- Needs logic to select current route -->
<Item selected={false} href="/">{text}</Item>
{/each}
</SideNavigation>
{/if}
</div>
<div class="mobile">
<ActionButton
quiet
selected
icon="ShowMenu"
on:click={() => (mobileOpen = !mobileOpen)}
/>
{#if mobileOpen}
<Mobile {links} on:click={() => (mobileOpen = !mobileOpen)} />
{/if}
</div>
<style>
.container {
display: none;
}
ul {
list-style-type: none;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
ul > * {
margin-right: 16px;
}
:global(ul > a) {
font-size: 1.5em;
text-decoration: none;
margin-right: 16px;
}
@media (min-width: 600px) {
.mobile {
display: none;
}
.container {
display: initial;
}
}
</style>