forked from tsai/budibase
kevmodrome
7 years ago
3 changed files with 0 additions and 276 deletions
@ -1,49 +0,0 @@ |
|||||
<script> |
|
||||
import BackendNav from "components/nav/BackendNav.svelte" |
|
||||
import SchemaManagementDrawer from "components/nav/SchemaManagementDrawer.svelte" |
|
||||
import Database from "components/database/DatabaseRoot.svelte" |
|
||||
import UserInterface from "components/userInterface/UserInterfaceRoot.svelte" |
|
||||
import ActionsAndTriggers from "components/actionsAndTriggers/ActionsAndTriggersRoot.svelte" |
|
||||
import AccessLevels from "components/accessLevels/AccessLevelsRoot.svelte" |
|
||||
import ComingSoon from "components/common/ComingSoon.svelte" |
|
||||
|
|
||||
import { store, backendUiStore } from "builderStore" |
|
||||
</script> |
|
||||
|
|
||||
<div class="root"> |
|
||||
<div class="nav"> |
|
||||
<BackendNav /> |
|
||||
</div> |
|
||||
<div class="content"> |
|
||||
{#if $backendUiStore.leftNavItem === 'DATABASE'} |
|
||||
<Database /> |
|
||||
{:else if $backendUiStore.leftNavItem === 'ACTIONS'} |
|
||||
<ActionsAndTriggers /> |
|
||||
{:else if $backendUiStore.leftNavItem === 'ACCESS_LEVELS'} |
|
||||
<AccessLevels /> |
|
||||
{/if} |
|
||||
</div> |
|
||||
<div class="nav"> |
|
||||
<SchemaManagementDrawer /> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
.root { |
|
||||
height: 100%; |
|
||||
display: flex; |
|
||||
background: #fafafa; |
|
||||
} |
|
||||
|
|
||||
.content { |
|
||||
flex: 1 1 auto; |
|
||||
margin: 20px 40px; |
|
||||
} |
|
||||
|
|
||||
.nav { |
|
||||
overflow: auto; |
|
||||
flex: 0 1 auto; |
|
||||
width: 275px; |
|
||||
height: 100%; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,55 +0,0 @@ |
|||||
<script> |
|
||||
import Button from "components/common/Button.svelte" |
|
||||
import { store } from "builderStore" |
|
||||
|
|
||||
let errors = [] |
|
||||
</script> |
|
||||
|
|
||||
<div class="root"> |
|
||||
<div class="inner"> |
|
||||
<img |
|
||||
src="/_builder/assets/budibase-logo.png" |
|
||||
class="logo" |
|
||||
alt="budibase logo" /> |
|
||||
<div> |
|
||||
|
|
||||
<div> |
|
||||
<h4 style="margin-bottom: 20px">Choose an Application</h4> |
|
||||
{#each $store.apps as app} |
|
||||
<a href={`#${app}`} class="app-link">{app}</a> |
|
||||
{/each} |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
.root { |
|
||||
position: fixed; |
|
||||
margin: 0 auto; |
|
||||
text-align: center; |
|
||||
top: 20%; |
|
||||
/*color: #333333; |
|
||||
background-color: #fdfdfd;*/ |
|
||||
width: 100%; |
|
||||
} |
|
||||
|
|
||||
.inner { |
|
||||
display: inline-block; |
|
||||
margin: auto; |
|
||||
} |
|
||||
|
|
||||
.logo { |
|
||||
width: 300px; |
|
||||
margin-bottom: 40px; |
|
||||
} |
|
||||
|
|
||||
.root :global(.option) { |
|
||||
width: 250px; |
|
||||
} |
|
||||
|
|
||||
.app-link { |
|
||||
margin-top: 10px; |
|
||||
display: block; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,172 +0,0 @@ |
|||||
<script> |
|
||||
import IconButton from "components/common/IconButton.svelte" |
|
||||
import { store } from "builderStore" |
|
||||
import UserInterfaceRoot from "components/userInterface/UserInterfaceRoot.svelte" |
|
||||
import BackendRoot from "./BackendRoot.svelte" |
|
||||
import { fade } from "svelte/transition" |
|
||||
import { SettingsIcon, PreviewIcon } from "components/common/Icons/" |
|
||||
|
|
||||
const TABS = { |
|
||||
BACKEND: "backend", |
|
||||
FRONTEND: "frontend", |
|
||||
} |
|
||||
|
|
||||
let selectedTab = TABS.BACKEND |
|
||||
</script> |
|
||||
|
|
||||
<div class="root"> |
|
||||
|
|
||||
<div class="top-nav"> |
|
||||
<div class="topleftnav"> |
|
||||
<button class="home-logo"> |
|
||||
<img src="/_builder/assets/budibase-emblem-white.svg" /> |
|
||||
</button> |
|
||||
<!-- <IconButton icon="home" |
|
||||
color="var(--slate)" |
|
||||
hoverColor="var(--secondary75)"/> --> |
|
||||
<span |
|
||||
class:active={selectedTab === TABS.BACKEND} |
|
||||
class="topnavitem" |
|
||||
on:click={() => (selectedTab = TABS.BACKEND)}> |
|
||||
Backend |
|
||||
</span> |
|
||||
<span |
|
||||
class:active={selectedTab === TABS.FRONTEND} |
|
||||
class="topnavitem" |
|
||||
on:click={() => (selectedTab = TABS.FRONTEND)}> |
|
||||
Frontend |
|
||||
</span> |
|
||||
</div> |
|
||||
|
|
||||
<div class="toprightnav"> |
|
||||
<span |
|
||||
class:active={selectedTab === TABS.FRONTEND} |
|
||||
class="topnavitemright" |
|
||||
on:click={() => selectedTab === TABS.FRONTEND}> |
|
||||
<SettingsIcon /> |
|
||||
</span> |
|
||||
<span |
|
||||
class:active={selectedTab === TABS.FRONTEND} |
|
||||
class="topnavitemright" |
|
||||
on:click={() => selectedTab === TABS.FRONTEND}> |
|
||||
<PreviewIcon /> |
|
||||
</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<div class="content"> |
|
||||
{#if selectedTab === TABS.BACKEND} |
|
||||
<div in:fade out:fade> |
|
||||
<BackendRoot /> |
|
||||
</div> |
|
||||
{:else} |
|
||||
<div in:fade out:fade> |
|
||||
<UserInterfaceRoot /> |
|
||||
</div> |
|
||||
{/if} |
|
||||
</div> |
|
||||
|
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
.root { |
|
||||
height: 100%; |
|
||||
width: 100%; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
} |
|
||||
|
|
||||
.top-nav { |
|
||||
flex: 0 0 auto; |
|
||||
height: 48px; |
|
||||
background: #0d203b; |
|
||||
padding: 0px 20px 0 20px; |
|
||||
display: flex; |
|
||||
box-sizing: border-box; |
|
||||
justify-content: space-between; |
|
||||
align-items: center; |
|
||||
} |
|
||||
|
|
||||
.content { |
|
||||
flex: 1 1 auto; |
|
||||
width: 100%; |
|
||||
height: 100px; |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
|
|
||||
.content > div { |
|
||||
height: 100%; |
|
||||
width: 100%; |
|
||||
} |
|
||||
|
|
||||
.toprightnav { |
|
||||
display: flex; |
|
||||
} |
|
||||
|
|
||||
.topleftnav { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
} |
|
||||
|
|
||||
.topnavitem { |
|
||||
cursor: pointer; |
|
||||
color: rgb(255, 255, 255, 0.6); |
|
||||
margin: 0px 10px; |
|
||||
padding-top: 4px; |
|
||||
font-weight: 500; |
|
||||
font-size: 1rem; |
|
||||
height: 100%; |
|
||||
align-items: center; |
|
||||
box-sizing: border-box; |
|
||||
} |
|
||||
|
|
||||
.topnavitem:hover { |
|
||||
color: rgb(255, 255, 255, 0.8); |
|
||||
font-weight: 500; |
|
||||
} |
|
||||
|
|
||||
.active { |
|
||||
color: white; |
|
||||
font-weight: 600; |
|
||||
} |
|
||||
|
|
||||
.topnavitemright { |
|
||||
cursor: pointer; |
|
||||
color: rgb(255, 255, 255, 0.6); |
|
||||
margin: 0px 5px; |
|
||||
padding-top: 4px; |
|
||||
font-weight: 500; |
|
||||
font-size: 1rem; |
|
||||
height: 100%; |
|
||||
display: flex; |
|
||||
flex: 1; |
|
||||
align-items: center; |
|
||||
box-sizing: border-box; |
|
||||
} |
|
||||
|
|
||||
.topnavitemright:hover { |
|
||||
color: rgb(255, 255, 255, 0.8); |
|
||||
font-weight: 500; |
|
||||
} |
|
||||
|
|
||||
.home-logo { |
|
||||
border-style: none; |
|
||||
background-color: rgba(0, 0, 0, 0); |
|
||||
cursor: pointer; |
|
||||
outline: none; |
|
||||
height: 40px; |
|
||||
padding: 8px 10px 8px 0; |
|
||||
} |
|
||||
|
|
||||
.home-logo:hover { |
|
||||
color: var(--hovercolor); |
|
||||
} |
|
||||
|
|
||||
.home-logo:active { |
|
||||
outline: none; |
|
||||
} |
|
||||
|
|
||||
.home-logo img { |
|
||||
height: 100%; |
|
||||
} |
|
||||
</style> |
|
||||
Loading…
Reference in new issue