|
|
|
@ -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; |
|
|
|
|
Andrew Kingston
4 years ago