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 369704ea5b
commit 943dcc7afa
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> <script>
import DevicePreviewSelect from "./DevicePreviewSelect.svelte" import DevicePreviewSelect from "./DevicePreviewSelect.svelte"
import AppPreview from "./AppPreview.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> </script>
<div class="app-panel"> <div class="app-panel">
<div class="header"> <div class="header">
{#if $store.clientFeatures.devicePreview} <div class="header-left">
<DevicePreviewSelect /> <Select
{/if} 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>
<div class="content"> <div class="content">
{#key $store.version} {#key $store.version}
@ -31,16 +64,20 @@
.header { .header {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
gap: 1rem; gap: var(--spacing-l);
margin-left: -6px;
} }
.header > :global(*) { .header-left,
flex: 0 0 auto; .header-right {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: var(--spacing-l);
} }
.header > :global(*:first-child) { .header-left :global(.spectrum-Picker) {
flex: 1 1 auto; width: 200px;
} }
.content { .content {
flex: 1 1 auto; flex: 1 1 auto;