mirror of https://github.com/Budibase/budibase.git
Andrew Kingston
5 years ago
34 changed files with 292 additions and 168 deletions
@ -0,0 +1,57 @@ |
|||||
|
<script> |
||||
|
import ComponentSelectionList from "./ComponentSelectionList.svelte" |
||||
|
import DevicePreviewSelect from "./DevicePreviewSelect.svelte" |
||||
|
import ThemeEditor from "./ThemeEditor.svelte" |
||||
|
import AppThemeSelect from "./AppThemeSelect.svelte" |
||||
|
import AppPreview from "./AppPreview.svelte" |
||||
|
import { store } from "builderStore" |
||||
|
</script> |
||||
|
|
||||
|
<div class="app-panel"> |
||||
|
<div class="header"> |
||||
|
<ComponentSelectionList /> |
||||
|
{#if $store.clientFeatures.devicePreview} |
||||
|
<DevicePreviewSelect /> |
||||
|
{/if} |
||||
|
{#if $store.clientFeatures.customThemes} |
||||
|
<ThemeEditor /> |
||||
|
{:else if $store.clientFeatures.spectrumThemes} |
||||
|
<AppThemeSelect /> |
||||
|
{/if} |
||||
|
</div> |
||||
|
<div class="content"> |
||||
|
{#key $store.version} |
||||
|
<AppPreview /> |
||||
|
{/key} |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<style> |
||||
|
.app-panel { |
||||
|
flex: 1 1 auto; |
||||
|
overflow-y: auto; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: flex-start; |
||||
|
align-items: stretch; |
||||
|
gap: var(--spacing-m); |
||||
|
padding: var(--spacing-l) 24px; |
||||
|
} |
||||
|
.header { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: flex-start; |
||||
|
align-items: flex-start; |
||||
|
gap: 1rem; |
||||
|
margin-left: -6px; |
||||
|
} |
||||
|
.header > :global(*) { |
||||
|
flex: 0 0 auto; |
||||
|
} |
||||
|
.header > :global(*:first-child) { |
||||
|
flex: 1 1 auto; |
||||
|
} |
||||
|
.content { |
||||
|
flex: 1 1 auto; |
||||
|
} |
||||
|
</style> |
||||
@ -1 +0,0 @@ |
|||||
export { default } from "./CurrentItemPreview.svelte" |
|
||||
@ -0,0 +1,70 @@ |
|||||
|
<script> |
||||
|
import { Icon, Heading } from "@budibase/bbui" |
||||
|
|
||||
|
export let title |
||||
|
export let showAddButton |
||||
|
export let onClickAddButton |
||||
|
</script> |
||||
|
|
||||
|
<div class="navigation-panel"> |
||||
|
<div class="header"> |
||||
|
<div class="title"> |
||||
|
<Heading size="XS">{title || ""}</Heading> |
||||
|
</div> |
||||
|
{#if showAddButton} |
||||
|
<div class="add-button"> |
||||
|
<Icon name="Add" on:click={onClickAddButton} /> |
||||
|
</div> |
||||
|
{/if} |
||||
|
</div> |
||||
|
<slot /> |
||||
|
</div> |
||||
|
|
||||
|
<style> |
||||
|
.navigation-panel { |
||||
|
width: 260px; |
||||
|
background: var(--background); |
||||
|
border-right: var(--border-light); |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: flex-start; |
||||
|
align-items: stretch; |
||||
|
} |
||||
|
.header { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: var(--spacing-m) var(--spacing-l); |
||||
|
border-bottom: var(--border-light); |
||||
|
gap: var(--spacing-l); |
||||
|
} |
||||
|
.title { |
||||
|
flex: 1 1 auto; |
||||
|
width: 0; |
||||
|
} |
||||
|
.title :global(h1) { |
||||
|
overflow: hidden; |
||||
|
font-weight: 600; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.add-button { |
||||
|
flex: 0 0 32px; |
||||
|
height: 32px; |
||||
|
display: grid; |
||||
|
place-items: center; |
||||
|
border-radius: 4px; |
||||
|
position: relative; |
||||
|
cursor: pointer; |
||||
|
background: var(--spectrum-semantic-cta-color-background-default); |
||||
|
transition: background var(--spectrum-global-animation-duration-100, 130ms) |
||||
|
ease-out; |
||||
|
} |
||||
|
.add-button:hover { |
||||
|
background: var(--spectrum-semantic-cta-color-background-hover); |
||||
|
} |
||||
|
.add-button :global(svg) { |
||||
|
fill: white; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1 @@ |
|||||
|
Components |
||||
@ -0,0 +1,5 @@ |
|||||
|
<script> |
||||
|
import { redirect } from "@roxi/routify" |
||||
|
|
||||
|
$redirect(`./screens`) |
||||
|
</script> |
||||
@ -0,0 +1 @@ |
|||||
|
Layouts |
||||
@ -0,0 +1 @@ |
|||||
|
Navigation |
||||
@ -0,0 +1 @@ |
|||||
|
<slot /> |
||||
@ -0,0 +1,69 @@ |
|||||
|
<script> |
||||
|
import { Search, Layout, Select } from "@budibase/bbui" |
||||
|
import NavigationPanel from "components/design/NavigationPanel/NavigationPanel.svelte" |
||||
|
import { roles } from "stores/backend" |
||||
|
import { store, allScreens } from "builderStore" |
||||
|
import NavItem from "components/common/NavItem.svelte" |
||||
|
import ScreenDropdownMenu from "./_components/ScreenDropdownMenu.svelte" |
||||
|
import AppPanel from "components/design/AppPanel/AppPanel.svelte" |
||||
|
import { RoleColours } from "constants" |
||||
|
|
||||
|
let searchString |
||||
|
let accessRole |
||||
|
|
||||
|
$: filteredScreens = getFilteredScreens($allScreens, searchString) |
||||
|
|
||||
|
const getFilteredScreens = (screens, searchString) => { |
||||
|
return screens |
||||
|
.filter( |
||||
|
screen => !searchString || screen.routing.route.includes(searchString) |
||||
|
) |
||||
|
.slice() |
||||
|
.sort((a, b) => { |
||||
|
return a.routing.route < b.routing.route ? -1 : 1 |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
const getRoleColor = roleId => { |
||||
|
return RoleColours[roleId] || "pink" |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<NavigationPanel title="Screens" showAddButton onClickAddButton> |
||||
|
<Layout paddingX="L" paddingY="XL" gap="S"> |
||||
|
<Search |
||||
|
placeholder="Enter a route to search" |
||||
|
value={searchString} |
||||
|
on:change={e => (searchString = e.detail)} |
||||
|
/> |
||||
|
<Select |
||||
|
bind:value={accessRole} |
||||
|
placeholder="All screens" |
||||
|
getOptionLabel={role => role.name} |
||||
|
getOptionValue={role => role._id} |
||||
|
options={$roles} |
||||
|
/> |
||||
|
</Layout> |
||||
|
{#each filteredScreens as screen (screen._id)} |
||||
|
<NavItem |
||||
|
icon={screen.routing.route === "/" ? "Home" : "WebPage"} |
||||
|
indentLevel={0} |
||||
|
selected={$store.selectedScreenId === screen._id} |
||||
|
text={screen.routing.route} |
||||
|
on:click={() => ($store.selectedScreenId = screen._id)} |
||||
|
color={getRoleColor(screen.routing.roleId)} |
||||
|
> |
||||
|
<ScreenDropdownMenu screenId={screen._id} /> |
||||
|
</NavItem> |
||||
|
<!--{#if selectedScreen?._id === screen.id}--> |
||||
|
<!-- <ComponentTree--> |
||||
|
<!-- level={1}--> |
||||
|
<!-- components={selectedScreen.props._children}--> |
||||
|
<!-- currentComponent={$selectedComponent}--> |
||||
|
<!-- {dragDropStore}--> |
||||
|
<!-- />--> |
||||
|
<!--{/if}--> |
||||
|
{/each} |
||||
|
</NavigationPanel> |
||||
|
|
||||
|
<AppPanel /> |
||||
@ -0,0 +1 @@ |
|||||
|
Theme |
||||
@ -1,2 +0,0 @@ |
|||||
<!-- routify:options index=1 --> |
|
||||
<slot /> |
|
||||
@ -1,6 +0,0 @@ |
|||||
<script> |
|
||||
import { goto } from "@roxi/routify" |
|
||||
import { FrontendTypes } from "constants" |
|
||||
|
|
||||
$goto(`./${FrontendTypes.SCREEN}`) |
|
||||
</script> |
|
||||
@ -1,6 +1,19 @@ |
|||||
<script> |
<script> |
||||
import { goto } from "@roxi/routify" |
import { allScreens } from "builderStore" |
||||
import { DesignTabs } from "constants" |
import { onMount } from "svelte" |
||||
|
import { redirect } from "@roxi/routify" |
||||
|
|
||||
$goto(`./${DesignTabs.SCREENS}`) |
let loaded = false |
||||
|
|
||||
|
onMount(() => { |
||||
|
if ($allScreens?.length) { |
||||
|
$redirect(`./${$allScreens[0]._id}`) |
||||
|
} else { |
||||
|
loaded = true |
||||
|
} |
||||
|
}) |
||||
</script> |
</script> |
||||
|
|
||||
|
{#if loaded} |
||||
|
You need to create a screen! |
||||
|
{/if} |
||||
|
|||||
Loading…
Reference in new issue