1
0
Fork 0
mirror of synced 2024-07-03 21:40:55 +12:00

Merge pull request #272 from Budibase/component-nav-update

Component nav update
This commit is contained in:
Joe 2020-06-01 09:22:01 +01:00 committed by GitHub
commit db35bc53ae
17 changed files with 201 additions and 225 deletions

View file

@ -57,23 +57,23 @@
.budibase__nav-item {
cursor: pointer;
padding: 0 7px 0 3px;
padding: 0 4px 0 2px;
height: 35px;
margin: 5px 20px 5px 0px;
margin: 5px 0px 4px 0px;
border-radius: 0 5px 5px 0;
display: flex;
align-items: center;
font-weight: 500;
font-size: 13px;
font-size: 14px;
transition: 0.2s;
}
.budibase__nav-item.selected {
color: var(--button-text);
background: #f1f4fc;
color: var(--ink);
background: var(--blue-light);
}
.budibase__nav-item:hover {
background: #fafafa;
background: var(--grey-light);
}
.budibase__input {

View file

@ -71,7 +71,7 @@
margin-left: 20px;
}
:global(.refresh-page-button):hover{
:global(.refresh-page-button):hover {
background: var(--grey-light);
}
</style>

View file

@ -0,0 +1,69 @@
<script>
export let tabs = []
export const selectTab = tabName => {
selected = tabName
selectedIndex = tabs.indexOf(selected)
}
let selected = tabs.length > 0 && tabs[0]
let selectedIndex = 0
const isSelected = tab => selected === tab
</script>
<div class="root">
<div class="switcher">
{#each tabs as tab}
<button class:selected={selected === tab} on:click={() => selectTab(tab)}>
{tab}
</button>
{/each}
</div>
<div class="panel">
{#if selectedIndex === 0}
<slot name="0" />
{:else if selectedIndex === 1}
<slot name="1" />
{:else if selectedIndex === 2}
<slot name="2" />
{:else if selectedIndex === 3}
<slot name="3" />
{/if}
</div>
</div>
<style>
.root {
height: 100%;
display: flex;
flex-direction: column;
padding: 20px 20px;
border-left: solid 1px var(--grey);
}
.switcher {
display: flex;
margin: 0px 20px 20px 0px;
}
.switcher > button {
display: inline-block;
border: none;
margin: 0;
padding: 0;
cursor: pointer;
font-size: 18px;
font-weight: 700;
color: var(--ink-lighter);
margin-right: 20px;
}
.switcher > .selected {
color: var(--ink);
}
</style>

View file

@ -105,6 +105,7 @@
display: flex;
flex-direction: column;
overflow-x: hidden;
padding: 20px;
}
.title > div:nth-child(1) {

View file

@ -1,4 +1,5 @@
<script>
import { goto } from "@sveltech/routify"
import { splitName } from "./pagesParsing/splitRootComponentName.js"
import components from "./temporaryPanelStructure.js"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
@ -32,7 +33,14 @@
const onComponentChosen = component => {
store.addChildComponent(component._component)
toggleTab()
toggleTab("Navigate")
// Get ID path
const path = store.getPathToComponent($store.currentComponentInfo)
// Go to correct URL
$goto(`./:page/:screen/${path}`)
}
</script>

View file

@ -1,7 +1,6 @@
<script>
import { params, goto } from "@sveltech/routify"
import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"
import { last, sortBy, map, trimCharsStart, trimChars, join } from "lodash/fp"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { pipe } from "components/common/core"
@ -62,9 +61,7 @@
{/if}
</span>
<span class="icon">
<ShapeIcon />
</span>
<i class="ri-artboard-2-fill icon" />
<span class="title">{screen.title}</span>
</div>
@ -92,21 +89,23 @@
<style>
.root {
font-weight: 400;
color: #000333;
color: var(--ink);
}
.title {
margin-left: 10px;
margin-top: 2px;
font-size: 13px;
font-size: 14px;
font-weight: 500;
}
.icon {
display: inline-block;
transition: 0.2s;
font-size: 24px;
width: 20px;
margin-top: 2px;
color: #333;
color: var(--ink-light);
}
.icon:nth-of-type(2) {

View file

@ -0,0 +1,49 @@
<script>
import { store, backendUiStore } from "builderStore"
import ComponentsHierarchy from "components/userInterface/ComponentsHierarchy.svelte"
import PageLayout from "components/userInterface/PageLayout.svelte"
import PagesList from "components/userInterface/PagesList.svelte"
import NewScreen from "components/userInterface/NewScreen.svelte"
const newScreen = () => {
newScreenPicker.show()
}
let newScreenPicker
</script>
<PagesList />
<button class="newscreen" on:click={newScreen}>Create New Screen</button>
<PageLayout layout={$store.pages[$store.currentPageName]} />
<div class="nav-items-container">
<ComponentsHierarchy screens={$store.screens} />
</div>
<NewScreen bind:this={newScreenPicker} />
<style>
.newscreen {
cursor: pointer;
border: 1px solid var(--grey-dark);
border-radius: 3px;
width: 100%;
padding: 8px 16px;
margin: 12px 0px;
display: flex;
justify-content: center;
align-items: center;
background: white;
color: var(--ink);
font-size: 14px;
font-weight: 500;
transition: all 2ms;
}
.newscreen:hover {
background: var(--grey-light);
}
</style>

View file

@ -3,7 +3,7 @@
export let item
</script>
<div class="item-item" transition:fly={{ y: 100, duration: 1000 }} on:click>
<div class="item-item" in:fly={{ y: 100, duration: 1000 }} on:click>
<div class="item-icon">
<i class={item.icon} />
</div>

View file

@ -3,7 +3,6 @@
const dispatch = createEventDispatcher()
import Item from "./Item.svelte"
import { store } from "builderStore"
export let list
let category = list

View file

@ -46,7 +46,6 @@
</script>
<div class="pagelayoutSection">
<div class="components-nav-page">Page Layout</div>
<div
class="budibase__nav-item root"
class:selected={$store.currentComponentInfo._id === _layout.component.props._id}
@ -56,12 +55,8 @@
class:rotate={$store.currentPreviewItem.name !== _layout.title}>
<ArrowDownIcon />
</span>
<span class="icon">
<GridIcon />
</span>
<span class="title">Page Layout</span>
<i class="ri-layout-3-fill icon-big" />
<span class="title">Master Screen</span>
</div>
{#if $store.currentPreviewItem.name === _layout.title && _layout.component.props._children}
@ -84,36 +79,28 @@
onOk={() => store.deleteComponent(componentToDelete)} />
<style>
.components-nav-page {
font-size: 13px;
color: #000333;
text-transform: uppercase;
margin-bottom: 10px;
padding-left: 20px;
font-weight: 600;
opacity: 0.4;
letter-spacing: 1px;
.pagelayoutSection {
margin: 20px 0px 0px 0px;
}
.pagelayoutSection {
margin: 20px 0px 20px 0px;
}
.title {
margin-left: 10px;
font-size: 13px;
font-size: 14px;
font-weight: 500;
color: var(--ink);
}
.icon {
width: 24px;
display: inline-block;
transition: 0.2s;
width: 20px;
margin-top: 2px;
color: #000333;
color: var(--ink-light);
}
.icon:nth-of-type(2) {
width: 14px;
margin: 0 0 0 5px;
.icon-big {
font-size: 24px;
color: var(--ink-light);
}
:global(svg) {

View file

@ -1,8 +1,6 @@
<script>
import { params, goto } from "@sveltech/routify"
import { store } from "builderStore"
import getIcon from "components/common/icon"
import { CheckIcon } from "components/common/Icons"
const getPage = (s, name) => {
const props = s.pages[name]
@ -20,7 +18,8 @@
},
]
store.setCurrentPage($params.page ? $params.page : "main")
if (!$store.currentPageName)
store.setCurrentPage($params.page ? $params.page : "main")
const changePage = id => {
store.setCurrentPage(id)
@ -29,63 +28,37 @@
</script>
<div class="root">
<ul>
{#each pages as { title, id }}
<li>
<span class="icon">
{#if id === $params.page}
<CheckIcon />
{/if}
</span>
<button
class:active={id === $params.page}
on:click={() => changePage(id)}>
{title}
</button>
</li>
{/each}
</ul>
{#each pages as { title, id }}
<button class:active={id === $params.page} on:click={() => changePage(id)}>
{title}
</button>
{/each}
</div>
<style>
.root {
padding-bottom: 10px;
font-size: 0.9rem;
color: #000333;
font-weight: bold;
position: relative;
padding-left: 1.8rem;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
margin: 0.5rem 0;
display: flex;
flex-direction: row;
}
button {
margin: 0 0 0 6px;
padding: 0;
border: none;
font-family: Roboto;
font-size: 13px;
outline: none;
cursor: pointer;
background: rgba(0, 0, 0, 0);
padding: 8px 16px;
text-align: center;
background: #ffffff;
color: var(--ink-light);
border-radius: 5px;
font-family: Roboto;
font-size: 14px;
font-weight: 400;
transition: all 0.3s;
text-rendering: optimizeLegibility;
border: none !important;
transition: 0.2s;
}
.active {
font-weight: 500;
}
.icon {
display: inline-block;
width: 14px;
color: #000333;
background: var(--ink-light);
color: var(--white);
}
</style>

View file

@ -120,7 +120,6 @@
background-color: var(--white);
height: calc(100vh - 49px);
padding: 0;
overflow: scroll;
display: flex;
flex-direction: column;
}
@ -215,10 +214,6 @@
letter-spacing: 1px;
}
.border-line {
border-bottom: 1px solid #d8d8d8;
}
.components-list-container {
padding: 20px 0px 0 0;
}

View file

@ -2,18 +2,17 @@
import { store, backendUiStore } from "builderStore"
import { goto } from "@sveltech/routify"
import { onMount } from "svelte"
import ComponentsHierarchy from "components/userInterface/ComponentsHierarchy.svelte"
import ComponentsHierarchyChildren from "components/userInterface/ComponentsHierarchyChildren.svelte"
import PageLayout from "components/userInterface/PageLayout.svelte"
import PagesList from "components/userInterface/PagesList.svelte"
import IconButton from "components/common/IconButton.svelte"
import NewScreen from "components/userInterface/NewScreen.svelte"
import CurrentItemPreview from "components/userInterface/AppPreview"
import PageView from "components/userInterface/PageView.svelte"
import ComponentsPaneSwitcher from "components/userInterface/ComponentsPaneSwitcher.svelte"
import ComponentPropertiesPanel from "components/userInterface/ComponentPropertiesPanel.svelte"
import ComponentSelectionList from "components/userInterface/ComponentSelectionList.svelte"
import Switcher from "components/common/Switcher.svelte"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { last } from "lodash/fp"
import { AddIcon } from "components/common/Icons"
import FrontendNavigatePane from "components/userInterface/FrontendNavigatePane.svelte"
$: instances = $store.appInstances
@ -27,14 +26,9 @@
}
})
let newScreenPicker
let confirmDeleteDialog
let componentToDelete = ""
const newScreen = () => {
newScreenPicker.show()
}
let settingsView
const settings = () => {
settingsView.show()
@ -45,6 +39,8 @@
confirmDeleteDialog.show()
}
let leftNavSwitcher
const lastPartOfName = c => (c ? last(c.split("/")) : "")
</script>
@ -52,51 +48,31 @@
<div class="ui-nav">
<div class="pages-list-container">
<div class="nav-header">
<span class="navigator-title">Navigate</span>
<span class="components-nav-page">Pages</span>
<Switcher bind:this={leftNavSwitcher} tabs={['Navigate', 'Add']}>
<div slot="0">
<FrontendNavigatePane />
</div>
<div class="nav-items-container">
<PagesList />
<div slot="1">
<ComponentSelectionList toggleTab={leftNavSwitcher.selectTab} />
</div>
</div>
<PageLayout layout={$store.pages[$store.currentPageName]} />
<div class="components-list-container">
<div class="nav-group-header">
<span class="components-nav-header" style="margin-top: 0;">
Screens
</span>
<div>
<button on:click={newScreen}>
<AddIcon />
</button>
</div>
</div>
<div class="nav-items-container">
<ComponentsHierarchy screens={$store.screens} />
</div>
</div>
</Switcher>
</div>
<div class="preview-pane">
<CurrentItemPreview />
{#if $store.currentPageName && $store.currentPageName.length > 0}
<CurrentItemPreview />
{/if}
</div>
{#if $store.currentFrontEndType === 'screen' || $store.currentFrontEndType === 'page'}
<div class="components-pane">
<ComponentsPaneSwitcher />
<ComponentPropertiesPanel />
</div>
{/if}
</div>
<NewScreen bind:this={newScreenPicker} />
<ConfirmDialog
bind:this={confirmDeleteDialog}
title="Confirm Delete"
@ -107,19 +83,6 @@
<slot />
<style>
button {
cursor: pointer;
outline: none;
border: none;
border-radius: 5px;
width: 20px;
padding-bottom: 10px;
display: flex;
justify-content: center;
align-items: center;
padding: 0;
}
.root {
display: grid;
grid-template-columns: 300px 1fr 300px;
@ -132,7 +95,6 @@
background-color: var(--white);
height: calc(100vh - 49px);
padding: 0;
overflow: scroll;
display: flex;
flex-direction: column;
}
@ -149,44 +111,6 @@
background-color: var(--white);
}
.components-nav-page {
font-size: 13px;
color: var(--ink);
padding-left: 20px;
margin-top: 20px;
font-weight: 600;
opacity: 0.4;
letter-spacing: 1px;
}
.components-nav-header {
font-size: 13px;
color: var(--ink);
margin-top: 20px;
font-weight: 600;
opacity: 0.4;
letter-spacing: 1px;
}
.nav-header {
display: flex;
flex-direction: column;
margin-top: 20px;
}
.nav-items-container {
padding: 1rem 0rem 0rem 0rem;
}
.nav-group-header {
display: flex;
padding: 0px 20px 0px 20px;
font-size: 0.9rem;
font-weight: bold;
justify-content: space-between;
align-items: center;
}
.nav-group-header > div:nth-child(1) {
padding: 0rem 0.5rem 0rem 0rem;
vertical-align: bottom;
@ -194,13 +118,6 @@
margin-right: 5px;
}
.nav-group-header > span:nth-child(3) {
margin-left: 5px;
vertical-align: bottom;
grid-column-start: title;
margin-top: auto;
}
.nav-group-header > div:nth-child(3) {
vertical-align: bottom;
grid-column-start: button;
@ -211,19 +128,4 @@
.nav-group-header > div:nth-child(3):hover {
color: var(--primary75);
}
.navigator-title {
font-size: 18px;
color: var(--ink);
font-weight: bold;
padding: 0 20px 20px 20px;
}
.border-line {
border-bottom: 1px solid #d8d8d8;
}
.components-list-container {
padding: 20px 0px 0 0;
}
</style>

View file

@ -119,22 +119,12 @@
<style>
.root {
display: grid;
grid-template-columns: 275px 1fr;
grid-template-columns: 300px 1fr;
height: 100%;
width: 100%;
background: var(--grey-light);
}
@media only screen and (min-width: 1800px) {
.root {
display: grid;
grid-template-columns: 300px 1fr;
height: 100%;
width: 100%;
background: var(--grey-light);
}
}
.main {
grid-column: 2;
}

View file

@ -12,4 +12,7 @@ ADMIN_SECRET={{adminSecret}}
JWT_SECRET={{cookieKey1}}
# port to run http server on
PORT=4001
PORT=4001
# error level for koa-pino
LOG_LEVEL=error

View file

@ -5,3 +5,4 @@ process.env.JWT_SECRET = "test-jwtsecret"
process.env.CLIENT_ID = "test-client-id"
process.env.BUDIBASE_DIR = tmpdir("budibase-unittests")
process.env.ADMIN_SECRET = "test-admin-secret"
process.env.LOG_LEVEL = "silent"

View file

@ -15,7 +15,7 @@ app.use(
prettyPrint: {
levelFirst: true,
},
level: process.env.NODE_ENV === "jest" ? "silent" : "info",
level: env.LOG_LEVEL || "error",
})
)