mirror of https://github.com/Budibase/budibase.git
Michael Shanks
6 years ago
6 changed files with 221 additions and 195 deletions
@ -0,0 +1,74 @@ |
|||||
|
<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"></slot> |
||||
|
{:else if selectedIndex === 1} |
||||
|
<slot name="1"></slot> |
||||
|
{:else if selectedIndex === 2} |
||||
|
<slot name="2"></slot> |
||||
|
{:else if selectedIndex === 3} |
||||
|
<slot name="3"></slot> |
||||
|
{/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> |
||||
@ -1,81 +0,0 @@ |
|||||
<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> |
|
||||
@ -0,0 +1,126 @@ |
|||||
|
<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 { AddIcon } from "components/common/Icons" |
||||
|
import NewScreen from "components/userInterface/NewScreen.svelte" |
||||
|
|
||||
|
const newScreen = () => { |
||||
|
newScreenPicker.show() |
||||
|
} |
||||
|
|
||||
|
let newScreenPicker |
||||
|
</script> |
||||
|
|
||||
|
<div class="pages-list-container"> |
||||
|
<div class="nav-header"> |
||||
|
<span class="navigator-title">Navigate</span> |
||||
|
<span class="components-nav-page">Pages</span> |
||||
|
</div> |
||||
|
|
||||
|
<div class="nav-items-container"> |
||||
|
<PagesList /> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="border-line" /> |
||||
|
|
||||
|
<PageLayout layout={$store.pages[$store.currentPageName]} /> |
||||
|
|
||||
|
<div class="border-line" /> |
||||
|
|
||||
|
<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> |
||||
|
|
||||
|
<NewScreen bind:this={newScreenPicker} /> |
||||
|
|
||||
|
<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; |
||||
|
} |
||||
|
|
||||
|
.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 > span:nth-child(3) { |
||||
|
margin-left: 5px; |
||||
|
vertical-align: bottom; |
||||
|
grid-column-start: title; |
||||
|
margin-top: auto; |
||||
|
} |
||||
|
|
||||
|
.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> |
||||
Loading…
Reference in new issue