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

Add new components above app preview

This commit is contained in:
Andrew Kingston 2022-04-26 09:44:59 +01:00
parent 2d6383a432
commit a063011c47
1 changed files with 48 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
packages/builder/src/components/design/AppPanel/AppPanel.svelte
View File

@ -1,14 +1,47 @@
<script>
import DevicePreviewSelect from "./DevicePreviewSelect.svelte"
import AppPreview from "./AppPreview.svelte"
import { store } from "builderStore"
import { store, selectedScreen } from "builderStore"
import { Button, Select, StatusLight, Body } from "@budibase/bbui"
import { RoleColours } from "constants"
import { roles } from "stores/backend"
import { goto } from "@roxi/routify"
$: roleId = $selectedScreen?.routing.roleId
$: roleColor = getRoleColor(roleId)
$: roleName = $roles.find(x => x._id === roleId)?.name || "Unknown"
// Needs to be absolute as we embed this component from multiple different URLs
$: newComponentUrl = `/builder/app/${store.appId}/design/components/${$selectedScreen?._id}/new`
const getRoleColor = roleId => {
return RoleColours[roleId] || "#ffa500"
}
</script>
<div class="app-panel">
<div class="header">
{#if $store.clientFeatures.devicePreview}
<DevicePreviewSelect />
{/if}
<div class="header-left">
<Select
options={$store.screens}
getOptionLabel={x => x.routing.route}
getOptionValue={x => x._id}
bind:value={$store.selectedScreenId}
/>
<StatusLight custom color={roleColor}>
<Body size="S">
{roleName} access
</Body>
</StatusLight>
</div>
<div class="header-right">
{#if $store.clientFeatures.devicePreview}
<DevicePreviewSelect />
{/if}
<Button cta icon="Add" on:click={() => $goto(newComponentUrl)}>
Component
</Button>
</div>
</div>
<div class="content">
{#key $store.version}
@ -31,16 +64,20 @@
.header {
display: flex;
flex-direction: row;
justify-content: flex-start;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
margin-left: -6px;
gap: var(--spacing-l);
}
.header > :global(*) {
flex: 0 0 auto;
.header-left,
.header-right {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: var(--spacing-l);
}
.header > :global(*:first-child) {
flex: 1 1 auto;
.header-left :global(.spectrum-Picker) {
width: 200px;
}
.content {
flex: 1 1 auto;