mirror of https://github.com/Budibase/budibase.git
Joe
6 years ago
committed by
GitHub
GitHub
17 changed files with 201 additions and 225 deletions
@ -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> |
|||
@ -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> |
|||
Loading…
Reference in new issue