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

Update to Frontend UI Nav and Component Panel 

Components moved to the left
Nav panel UI updated
Props tabs moved up
This commit is contained in:
Joe 2020-05-29 18:31:47 +01:00
parent 1c893fa23a
commit cee06067a8
11 changed files with 146 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/builder/src/budibase.css
View File

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

1
packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
View File

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

13
packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
View File

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

81
packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte Normal file
View File

@ -0,0 +1,81 @@
<script>
import { store } from "builderStore/"
import ComponentPropertiesPanel from "./ComponentPropertiesPanel.svelte"
import ComponentSelectionList from "./ComponentSelectionList.svelte"
const PROPERTIES_TAB = "properties"
const COMPONENT_SELECTION_TAB = "components"
let selected = PROPERTIES_TAB
const isSelected = tab => selected === tab
const selectTab = tab => (selected = tab)
const toggleTab = () =>
(selected =
selected === PROPERTIES_TAB ? COMPONENT_SELECTION_TAB : PROPERTIES_TAB)
</script>
<div class="root">
{#if $store.currentFrontEndType === 'page' || $store.screens.length}
<div class="switcher">
<button
class:selected={selected === COMPONENT_SELECTION_TAB}
on:click={() => selectTab(COMPONENT_SELECTION_TAB)}>
Add
</button>
<button
class:selected={selected === PROPERTIES_TAB}
on:click={() => selectTab(PROPERTIES_TAB)}>
Edit
</button>
</div>
<div class="panel">
{#if selected === PROPERTIES_TAB}
<ComponentPropertiesPanel {toggleTab} />
{/if}
{#if selected === COMPONENT_SELECTION_TAB}
<ComponentSelectionList {toggleTab} />
{/if}
</div>
{/if}
</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>

80
packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
View File

@ -3,7 +3,6 @@
import ComponentsHierarchy from "components/userInterface/ComponentsHierarchy.svelte" import ComponentsHierarchy from "components/userInterface/ComponentsHierarchy.svelte"
import PageLayout from "components/userInterface/PageLayout.svelte" import PageLayout from "components/userInterface/PageLayout.svelte"
import PagesList from "components/userInterface/PagesList.svelte" import PagesList from "components/userInterface/PagesList.svelte"
import { AddIcon } from "components/common/Icons"
import NewScreen from "components/userInterface/NewScreen.svelte" import NewScreen from "components/userInterface/NewScreen.svelte"
const newScreen = () => { const newScreen = () => {
@ -13,64 +12,44 @@
let newScreenPicker let newScreenPicker
</script> </script>
<div class="pages-list-container"> <PagesList />
<div class="nav-header">
<span class="navigator-title">Navigate</span>
<span class="components-nav-page">Pages</span>
</div>
<div class="nav-items-container"> <button
<PagesList /> class="newscreen"
</div> on:click={newScreen}>
</div> Create New Screen
</button>
<div class="border-line" />
<PageLayout layout={$store.pages[$store.currentPageName]} /> <PageLayout layout={$store.pages[$store.currentPageName]} />
<div class="border-line" />
<div class="components-list-container"> <div class="nav-items-container">
<div class="nav-group-header"> <ComponentsHierarchy screens={$store.screens} />
<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> </div>
<NewScreen bind:this={newScreenPicker} /> <NewScreen bind:this={newScreenPicker} />
<style> <style>
button { .newscreen {
cursor: pointer; cursor: pointer;
outline: none; border: 1px solid var(--grey-dark);
border: none; border-radius: 3px;
border-radius: 5px; width: 100%;
width: 20px; padding: 8px 16px;
padding-bottom: 10px; margin: 12px 0px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 0; background: white;
color: var(--ink);
font-size: 14px;
font-weight: 500;
transition: all 2ms;
} }
.components-nav-page { .newscreen:hover {
font-size: 13px; background: var(--grey-light);
color: var(--ink);
padding-left: 20px;
margin-top: 20px;
font-weight: 600;
opacity: 0.4;
letter-spacing: 1px;
} }
.components-nav-header { .components-nav-header {
@ -82,19 +61,9 @@ button {
letter-spacing: 1px; letter-spacing: 1px;
} }
.nav-header {
display: flex;
flex-direction: column;
margin-top: 20px;
}
.nav-items-container {
padding: 1rem 0rem 0rem 0rem;
}
.nav-group-header { .nav-group-header {
display: flex; display: flex;
padding: 0px 20px 0px 20px;
font-size: 0.9rem; font-size: 0.9rem;
font-weight: bold; font-weight: bold;
justify-content: space-between; justify-content: space-between;
@ -108,13 +77,6 @@ button {
margin-top: auto; margin-top: auto;
} }
.navigator-title {
font-size: 18px;
color: var(--ink);
font-weight: bold;
padding: 0 20px 20px 20px;
}
.border-line { .border-line {
border-bottom: 1px solid #d8d8d8; border-bottom: 1px solid #d8d8d8;
} }

2
packages/builder/src/components/userInterface/ItemTab/Item.svelte
View File

@ -3,7 +3,7 @@
export let item export let item
</script> </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"> <div class="item-icon">
<i class={item.icon} /> <i class={item.icon} />
</div> </div>

36
packages/builder/src/components/userInterface/PageLayout.svelte
View File

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

57
packages/builder/src/components/userInterface/PagesList.svelte
View File

@ -1,8 +1,6 @@
<script> <script>
import { params, goto } from "@sveltech/routify" import { params, goto } from "@sveltech/routify"
import { store } from "builderStore" import { store } from "builderStore"
import getIcon from "components/common/icon"
import { CheckIcon } from "components/common/Icons"
const getPage = (s, name) => { const getPage = (s, name) => {
const props = s.pages[name] const props = s.pages[name]
@ -30,63 +28,40 @@
</script> </script>
<div class="root"> <div class="root">
<ul>
{#each pages as { title, id }} {#each pages as { title, id }}
<li>
<span class="icon">
{#if id === $params.page}
<CheckIcon />
{/if}
</span>
<button <button
class:active={id === $params.page} class:active={id === $params.page}
on:click={() => changePage(id)}> on:click={() => changePage(id)}>
{title} {title}
</button> </button>
</li>
{/each} {/each}
</ul>
</div> </div>
<style> <style>
.root { .root {
padding-bottom: 10px; display: flex;
font-size: 0.9rem; flex-direction: row;
color: #000333;
font-weight: bold;
position: relative;
padding-left: 1.8rem;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
margin: 0.5rem 0;
} }
button { button {
margin: 0 0 0 6px;
padding: 0;
border: none;
font-family: Roboto;
font-size: 13px;
outline: none;
cursor: pointer; 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 { .active {
font-weight: 500; background: var(--ink-light);
color: var(--white);
} }
.icon {
display: inline-block;
width: 14px;
color: #000333;
}
</style> </style>

5
packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
View File

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

5
packages/builder/src/pages/[application]/frontend/_layout.svelte
View File

@ -100,7 +100,6 @@
background-color: var(--white); background-color: var(--white);
height: calc(100vh - 49px); height: calc(100vh - 49px);
padding: 0; padding: 0;
overflow: scroll;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -117,8 +116,6 @@
background-color: var(--white); background-color: var(--white);
} }
.nav-group-header > div:nth-child(1) { .nav-group-header > div:nth-child(1) {
padding: 0rem 0.5rem 0rem 0rem; padding: 0rem 0.5rem 0rem 0rem;
vertical-align: bottom; vertical-align: bottom;
@ -126,8 +123,6 @@
margin-right: 5px; margin-right: 5px;
} }
.nav-group-header > div:nth-child(3) { .nav-group-header > div:nth-child(3) {
vertical-align: bottom; vertical-align: bottom;
grid-column-start: button; grid-column-start: button;

12
packages/builder/src/pages/_layout.svelte
View File

@ -119,22 +119,12 @@
<style> <style>
.root { .root {
display: grid; display: grid;
grid-template-columns: 275px 1fr; grid-template-columns: 300px 1fr;
height: 100%; height: 100%;
width: 100%; width: 100%;
background: var(--grey-light); 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 { .main {
grid-column: 2; grid-column: 2;
} }