1
0
Fork 0
mirror of synced 2024-06-17 18:04:42 +12:00

Merge branch 'master' of github.com:Budibase/budibase into develop

This commit is contained in:
Andrew Kingston 2022-07-29 13:48:27 +01:00
commit 1f9086f639
29 changed files with 411 additions and 282 deletions

View file

@ -84,6 +84,7 @@
}
:global([dir="ltr"] .spectrum-ActionButton .spectrum-Icon) {
margin-left: 0;
transition: color ease-out 130ms;
}
.is-selected:not(.spectrum-ActionButton--emphasized) {
background: var(--spectrum-global-color-gray-300);
@ -92,4 +93,10 @@
padding: 0;
min-width: 0;
}
.spectrum-ActionButton--quiet {
padding: 0 8px;
}
.is-selected:not(.emphasized) .spectrum-Icon {
color: var(--spectrum-global-color-gray-900);
}
</style>

View file

@ -87,10 +87,15 @@
on:mousedown={onClick}
>
{#if fieldIcon}
<span class="option-icon">
<span class="option-extra">
<Icon name={fieldIcon} />
</span>
{/if}
{#if fieldColour}
<span class="option-extra">
<StatusLight square color={fieldColour} />
</span>
{/if}
<span
class="spectrum-Picker-label"
class:is-placeholder={isPlaceholder}
@ -108,11 +113,6 @@
<use xlink:href="#spectrum-icon-18-Alert" />
</svg>
{/if}
{#if fieldColour}
<span class="option-colour">
<StatusLight size="L" color={fieldColour} />
</span>
{/if}
<svg
class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
focusable="false"
@ -166,10 +166,15 @@
on:click={() => onSelectOption(getOptionValue(option, idx))}
>
{#if getOptionIcon(option, idx)}
<span class="option-icon">
<span class="option-extra">
<Icon name={getOptionIcon(option, idx)} />
</span>
{/if}
{#if getOptionColour(option, idx)}
<span class="option-extra">
<StatusLight square color={getOptionColour(option, idx)} />
</span>
{/if}
<span class="spectrum-Menu-itemLabel">
{getOptionLabel(option, idx)}
</span>
@ -180,11 +185,6 @@
>
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
{#if getOptionColour(option, idx)}
<span class="option-colour">
<StatusLight size="L" color={getOptionColour(option, idx)} />
</span>
{/if}
</li>
{/each}
{/if}
@ -209,6 +209,9 @@
width: 100%;
box-shadow: none;
}
.spectrum-Picker-label.auto-width {
margin-right: var(--spacing-xs);
}
.spectrum-Picker-label:not(.auto-width) {
overflow: hidden;
text-overflow: ellipsis;
@ -221,16 +224,16 @@
.spectrum-Picker-label.auto-width.is-placeholder {
padding-right: 2px;
}
.auto-width .spectrum-Menu-item {
padding-right: var(--spacing-xl);
}
/* Icon and colour alignment */
.spectrum-Menu-checkmark {
align-self: center;
margin-top: 0;
}
.option-colour {
padding-left: 8px;
}
.option-icon {
.option-extra {
padding-right: 8px;
}

View file

@ -18,11 +18,16 @@
export let disabled = false
export let active = false
export let color = null
export let square = false
export let hoverable = false
</script>
<div
on:click
class="spectrum-StatusLight spectrum-StatusLight--size{size}"
class:custom={!!color}
class:square
class:hoverable
style={`--color: ${color};`}
class:spectrum-StatusLight--celery={celery}
class:spectrum-StatusLight--yellow={yellow}
@ -54,6 +59,7 @@
min-height: 0;
padding-top: 0;
padding-bottom: 0;
transition: color ease-out 130ms;
}
.spectrum-StatusLight.withText::before {
margin-right: 10px;
@ -61,4 +67,14 @@
.custom::before {
background: var(--color) !important;
}
.square::before {
width: 14px;
height: 14px;
border-radius: 4px;
margin: 0;
}
.hoverable:hover {
cursor: pointer;
color: var(--spectrum-global-color-gray-900);
}
</style>

View file

@ -1,5 +1,4 @@
<script>
import Tooltip from "../Tooltip/Tooltip.svelte"
import Link from "../Link/Link.svelte"
export let value
@ -17,18 +16,16 @@
{#each attachments as attachment}
{#if isImage(attachment.extension)}
<Link quiet target="_blank" href={attachment.url}>
<div class="center">
<div class="center" title={attachment.name}>
<img src={attachment.url} alt={attachment.extension} />
</div>
</Link>
{:else}
<Tooltip text={attachment.name} direction="right">
<div class="file">
<Link quiet target="_blank" href={attachment.url}>
{attachment.extension}
</Link>
</div>
</Tooltip>
<div class="file" title={attachment.name}>
<Link quiet target="_blank" href={attachment.url}>
{attachment.extension}
</Link>
</div>
{/if}
{/each}
{#if leftover}
@ -52,7 +49,7 @@
padding: 0 8px;
color: var(--spectrum-global-color-gray-800);
border: 1px solid var(--spectrum-global-color-gray-300);
border-radius: 2px;
border-radius: 4px;
text-transform: uppercase;
font-weight: 600;
font-size: 11px;

View file

@ -16,16 +16,19 @@ export const getThemeStore = () => {
return
}
Constants.ThemeOptions.forEach(option => {
// Update global class names to use the new theme and remove others
Constants.Themes.forEach(option => {
themeElement.classList.toggle(
`spectrum--${option}`,
option === state.theme
`spectrum--${option.class}`,
option.class === state.theme
)
// Ensure darkest is always added as this is the base class for custom
// themes
themeElement.classList.add("spectrum--darkest")
})
// Add base theme if required
const selectedTheme = Constants.Themes.find(x => x.class === state.theme)
if (selectedTheme?.base) {
themeElement.classList.add(`spectrum--${selectedTheme.base}`)
}
})
return store

View file

@ -1,5 +1,5 @@
<script>
import { Icon, StatusLight } from "@budibase/bbui"
import { Icon } from "@budibase/bbui"
import { createEventDispatcher, getContext } from "svelte"
export let icon
@ -14,8 +14,8 @@
export let iconText
export let iconColor
export let scrollable = false
export let color
export let highlighted = false
export let rightAlignIcon = false
const scrollApi = getContext("scroll")
const dispatch = createEventDispatcher()
@ -78,7 +78,7 @@
{iconText}
</div>
{:else if icon}
<div class="icon">
<div class="icon" class:right={rightAlignIcon}>
<Icon color={iconColor} size="S" name={icon} />
</div>
{/if}
@ -88,9 +88,9 @@
<slot />
</div>
{/if}
{#if color}
<div class="light">
<StatusLight size="L" {color} />
{#if $$slots.right}
<div class="right">
<slot name="right" />
</div>
{/if}
</div>
@ -107,7 +107,7 @@
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
align-items: stretch;
}
.nav-item.scrollable {
flex-direction: column;
@ -135,10 +135,8 @@
align-items: center;
gap: var(--spacing-xs);
width: max-content;
overflow: hidden;
position: relative;
padding-left: var(--spacing-l);
pointer-events: none;
}
/* Needed to fully display the actions icon */
@ -153,10 +151,15 @@
justify-content: center;
align-items: center;
color: var(--spectrum-global-color-gray-600);
order: 1;
}
.icon.right {
order: 4;
}
.icon.arrow {
flex: 0 0 20px;
pointer-events: all;
order: 0;
}
.icon.arrow.absolute {
position: absolute;
@ -188,11 +191,14 @@
overflow: hidden;
text-overflow: ellipsis;
flex: 1 1 auto;
color: var(--spectrum-global-color-gray-800);
color: var(--spectrum-global-color-gray-900);
order: 2;
width: 0;
}
.scrollable .text {
flex: 0 0 auto;
max-width: 160px;
width: auto;
}
.actions {
@ -201,18 +207,17 @@
display: grid;
place-items: center;
visibility: hidden;
}
.actions,
.light :global(.spectrum-StatusLight) {
order: 3;
opacity: 0;
width: 20px;
height: 20px;
margin-left: var(--spacing-s);
margin-left: var(--spacing-xs);
}
.light {
position: absolute;
right: 0;
.nav-item.withActions:hover .actions {
opacity: 1;
}
.nav-item.withActions:hover .light {
display: none;
.right {
order: 10;
}
</style>

View file

@ -56,6 +56,10 @@
}
}
const previewApp = () => {
window.open(`/${application}`)
}
const viewApp = () => {
analytics.captureEvent(Events.APP_VIEW_PUBLISHED, {
appId: selectedApp.appId,
@ -174,7 +178,10 @@
Are you sure you want to unpublish the app <b>{selectedApp?.name}</b>?
</ConfirmDialog>
<DeployModal onOk={completePublish} />
<div class="buttons">
<Button on:click={previewApp} newStyles secondary>Preview</Button>
<DeployModal onOk={completePublish} />
</div>
<style>
.publish-popover-actions :global([data-cy="publish-popover-action"]) {
@ -183,4 +190,11 @@
:global([data-cy="publish-popover-menu"]) {
padding: 10px;
}
.buttons {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
gap: var(--spacing-m);
}
</style>

View file

@ -1,11 +1,11 @@
<script>
import {
Icon,
Modal,
notifications,
ModalContent,
Body,
Button,
StatusLight,
} from "@budibase/bbui"
import { store } from "builderStore"
import { API } from "api"
@ -67,17 +67,10 @@
}
</script>
{#if !hideIcon}
<div class="icon-wrapper" class:highlight={updateAvailable}>
<Icon
name="Refresh"
hoverable
on:click={updateModal.show}
tooltip={updateAvailable
? "An update is available"
: "No updates are available"}
/>
</div>
{#if !hideIcon && updateAvailable}
<StatusLight hoverable on:click={updateModal.show} notice>
Update available
</StatusLight>
{/if}
<Modal bind:this={updateModal}>
<ModalContent

View file

@ -3,11 +3,13 @@
export let title
export let icon
export let expandable = false
export let showAddButton = false
export let showBackButton = false
export let showExpandIcon = false
export let showCloseButton = false
export let onClickAddButton
export let onClickBackButton
export let onClickCloseButton
export let borderLeft = false
export let borderRight = false
@ -25,7 +27,7 @@
<div class="title">
<Heading size="XXS">{title || ""}</Heading>
</div>
{#if showExpandIcon}
{#if expandable}
<Icon
name={wide ? "Minimize" : "Maximize"}
hoverable
@ -37,6 +39,9 @@
<Icon name="Add" />
</div>
{/if}
{#if showCloseButton}
<Icon name="Close" hoverable on:click={onClickCloseButton} />
{/if}
</div>
<div class="body">
<slot />

View file

@ -23,10 +23,6 @@
$layout.children.find(layout => $isActive(layout.path))?.title ?? "data"
)
const previewApp = () => {
window.open(`/${application}`)
}
async function getPackage() {
try {
store.actions.reset()
@ -108,14 +104,10 @@
</Tabs>
</div>
<div class="toprightnav">
<VersionModal />
<div class="version">
<VersionModal />
</div>
<RevertModal />
<Icon
name="Visibility"
tooltip="Open app preview"
hoverable
on:click={previewApp}
/>
<DeployNavigation {application} />
</div>
</div>
@ -183,4 +175,8 @@
align-items: center;
gap: var(--spacing-xl);
}
.version {
margin-right: var(--spacing-s);
}
</style>

View file

@ -1,10 +1,9 @@
<script>
import DevicePreviewSelect from "./DevicePreviewSelect.svelte"
import AppPreview from "./AppPreview.svelte"
import { store, selectedScreen, sortedScreens } from "builderStore"
import { Button, Select } from "@budibase/bbui"
import { store, sortedScreens } from "builderStore"
import { Select } from "@budibase/bbui"
import { RoleUtils } from "@budibase/frontend-core"
import { goto } from "@roxi/routify"
</script>
<div class="app-panel">
@ -15,24 +14,17 @@
options={$sortedScreens}
getOptionLabel={x => x.routing.route}
getOptionValue={x => x._id}
getOptionIcon={x => (x.routing.homeScreen ? "Home" : "WebPage")}
getOptionColour={x => RoleUtils.getRoleColour(x.routing.roleId)}
value={$store.selectedScreenId}
on:change={e => store.actions.screens.select(e.detail)}
quiet
autoWidth
/>
</div>
<div class="header-right">
{#if $store.clientFeatures.devicePreview}
<DevicePreviewSelect />
{/if}
<Button
newStyles
secondary
icon="Add"
on:click={() => $goto(`../${$selectedScreen._id}/components/new`)}
>
Component
</Button>
</div>
</div>
<div class="content">
@ -59,6 +51,7 @@
justify-content: space-between;
align-items: flex-start;
gap: var(--spacing-l);
margin: 0 2px;
}
.header-left,
.header-right {
@ -69,7 +62,8 @@
gap: var(--spacing-l);
}
.header-left :global(.spectrum-Picker) {
width: 250px;
font-weight: 600;
color: var(--spectrum-global-color-gray-900);
}
.content {
flex: 1 1 auto;

View file

@ -3,6 +3,7 @@
import { onMount, onDestroy } from "svelte"
import {
store,
selectedComponent,
selectedScreen,
selectedLayout,
currentAsset,
@ -14,6 +15,7 @@
Layout,
Heading,
Body,
Icon,
notifications,
} from "@budibase/bbui"
import ErrorSVG from "@budibase/frontend-core/assets/error.svg?raw"
@ -96,6 +98,11 @@
$: json = JSON.stringify(previewData)
$: refreshContent(json)
// Determine if the add component menu is active
$: isAddingComponent = $isActive(
`./components/${$selectedComponent?._id}/new`
)
// Update the iframe with the builder info to render the correct preview
const refreshContent = message => {
if (iframe) {
@ -219,6 +226,16 @@
idToDelete = null
}
const toggleAddComponent = () => {
if (isAddingComponent) {
$goto(`../${$selectedScreen._id}/components/${$selectedComponent?._id}`)
} else {
$goto(
`../${$selectedScreen._id}/components/${$selectedComponent?._id}/new`
)
}
}
onMount(() => {
window.addEventListener("message", receiveMessage)
if (!$store.clientFeatures.messagePassing) {
@ -282,6 +299,13 @@
class:tablet={$store.previewDevice === "tablet"}
class:mobile={$store.previewDevice === "mobile"}
/>
<div
class="add-component"
class:active={isAddingComponent}
on:click={toggleAddComponent}
>
<Icon size="XL" name="Add">Component</Icon>
</div>
</div>
<ConfirmDialog
bind:this={confirmDeleteDialog}
@ -343,4 +367,26 @@
width: 100%;
height: 100%;
}
.add-component {
position: absolute;
bottom: 20px;
right: 20px;
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--spectrum-global-color-blue-500);
display: grid;
place-items: center;
color: white;
box-shadow: 1px 3px 8px 0 rgba(0, 0, 0, 0.3);
cursor: pointer;
transition: transform ease-out 300ms, background ease-out 130ms;
}
.add-component:hover {
background: var(--spectrum-global-color-blue-600);
}
.add-component.active {
transform: rotate(-45deg);
}
</style>

View file

@ -3,18 +3,21 @@
import { store } from "builderStore"
</script>
<ActionGroup compact>
<ActionGroup compact quiet>
<ActionButton
quiet
icon="DeviceDesktop"
selected={$store.previewDevice === "desktop"}
on:click={() => store.actions.preview.setDevice("desktop")}
/>
<ActionButton
quiet
icon="DeviceTablet"
selected={$store.previewDevice === "tablet"}
on:click={() => store.actions.preview.setDevice("tablet")}
/>
<ActionButton
quiet
icon="DevicePhone"
selected={$store.previewDevice === "mobile"}
on:click={() => store.actions.preview.setDevice("mobile")}

View file

@ -9,7 +9,7 @@
import { setContext } from "svelte"
import DNDPositionIndicator from "./DNDPositionIndicator.svelte"
import { DropPosition } from "./dndStore"
import { notifications } from "@budibase/bbui"
import { notifications, Button } from "@budibase/bbui"
let scrollRef
@ -24,7 +24,7 @@
let newOffsets = {}
// Calculate left offset
const offsetX = bounds.left + bounds.width + scrollLeft - 58
const offsetX = bounds.left + bounds.width + scrollLeft - 36
if (offsetX > sidebarWidth) {
newOffsets.left = offsetX - sidebarWidth
} else {
@ -71,13 +71,10 @@
})
</script>
<Panel
title="Components"
showAddButton
onClickAddButton={() => $goto("../new")}
showExpandIcon
borderRight
>
<Panel title="Components" showExpandIcon borderRight>
<div class="add-component">
<Button on:click={() => $goto("./new")} cta>Add component</Button>
</div>
<div class="nav-items-container" bind:this={scrollRef}>
<ul>
<li
@ -121,6 +118,13 @@
</Panel>
<style>
.add-component {
padding: var(--spacing-xl) var(--spacing-l);
padding-bottom: 0;
display: flex;
flex-direction: column;
align-items: stretch;
}
.nav-items-container {
padding: var(--spacing-xl) 0;
flex: 1 1 auto;

View file

@ -4,6 +4,8 @@
import * as routify from "@roxi/routify"
import { onDestroy } from "svelte"
import { findComponent } from "builderStore/componentUtils"
import ComponentListPanel from "./_components/navigation/ComponentListPanel.svelte"
import ComponentSettingsPanel from "./_components/settings/ComponentSettingsPanel.svelte"
// Keep URL and state in sync for selected component ID
const stopSyncing = syncURLToState({
@ -18,4 +20,6 @@
onDestroy(stopSyncing)
</script>
<ComponentListPanel />
<ComponentSettingsPanel />
<slot />

View file

@ -1,7 +1,4 @@
<script>
import ComponentListPanel from "./_components/navigation/ComponentListPanel.svelte"
import ComponentSettingsPanel from "./_components/settings/ComponentSettingsPanel.svelte"
</script>
<ComponentListPanel />
<ComponentSettingsPanel />
<!--
Placeholder file so that routify works.
No unique content is needed in this index page.
-->

View file

@ -6,15 +6,14 @@
ActionGroup,
ActionButton,
Search,
DetailSummary,
Icon,
Body,
Divider,
notifications,
} from "@budibase/bbui"
import structure from "./componentStructure.json"
import { store, selectedComponent } from "builderStore"
import { onMount } from "svelte"
import { fly } from "svelte/transition"
let section = "components"
let searchString
@ -150,114 +149,116 @@
})
</script>
<Panel
title="Add component"
showBackButton
onClickBackButton={() => $goto("../slot")}
borderRight
>
<Layout paddingX="L" paddingY="XL" gap="S">
<Search
placeholder="Search"
value={searchString}
on:change={e => (searchString = e.detail)}
bind:inputRef={searchRef}
/>
{#if !searchString}
<ActionGroup compact justified>
<ActionButton
fullWidth
selected={section === "components"}
on:click={() => (section = "components")}>Components</ActionButton
>
<ActionButton
fullWidth
selected={section === "blocks"}
on:click={() => (section = "blocks")}>Blocks</ActionButton
>
</ActionGroup>
{/if}
</Layout>
<div>
<Divider noMargin noGrid />
</div>
{#if searchString || section === "components"}
{#each filteredStructure as category}
<DetailSummary name={category.name} collapsible={false}>
<div class="component-grid">
{#each category.children as component}
<div class="container" transition:fly|local={{ x: 260, duration: 300 }}>
<Panel
title="Add component"
showCloseButton
onClickCloseButton={() => $goto("../")}
borderLeft
>
<Layout paddingX="L" paddingY="XL" gap="S">
<Search
placeholder="Search"
value={searchString}
on:change={e => (searchString = e.detail)}
bind:inputRef={searchRef}
/>
{#if !searchString}
<ActionGroup compact justified>
<ActionButton
fullWidth
selected={section === "components"}
on:click={() => (section = "components")}>Components</ActionButton
>
<ActionButton
fullWidth
selected={section === "blocks"}
on:click={() => (section = "blocks")}>Blocks</ActionButton
>
</ActionGroup>
{/if}
{#if searchString || section === "components"}
{#if filteredStructure.length}
{#each filteredStructure as category}
<Layout noPadding gap="XS">
<div class="category-label">{category.name}</div>
{#each category.children as component}
<div
class="component"
class:selected={selectedIndex ===
orderMap[component.component]}
on:click={() => addComponent(component.component)}
on:mouseover={() => (selectedIndex = null)}
>
<Icon name={component.icon} />
<Body size="XS">{component.name}</Body>
</div>
{/each}
</Layout>
{/each}
{:else}
<Body size="S">
There aren't any components matching the current filter
</Body>
{/if}
{:else}
<Body size="S">Blocks are collections of pre-built components</Body>
<Layout noPadding gap="XS">
{#each blocks as block}
<div
class="component"
class:wide={component.name?.length > 15}
class:selected={selectedIndex === orderMap[component.component]}
on:click={() => addComponent(component.component)}
on:mouseover={() => (selectedIndex = null)}
on:click={() => addComponent(block.component)}
>
<Icon name={component.icon} />
<Body size="XS">{component.name}</Body>
<Icon name={block.icon} />
<Body size="XS">{block.name}</Body>
</div>
{/each}
</div>
</DetailSummary>
{/each}
{:else}
<Layout paddingX="L" paddingY="XL" gap="S">
<Body size="S">Blocks are collections of pre-built components</Body>
<Layout noPadding gap="XS">
{#each blocks as block}
<div
class="component block"
on:click={() => addComponent(block.component)}
>
<Icon name={block.icon} />
<Body size="XS">{block.name}</Body>
</div>
{/each}
</Layout>
</Layout>
{/if}
</Layout>
{/if}
</Panel>
</Panel>
</div>
<style>
.component-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--spacing-s);
.container {
position: fixed;
right: 0;
z-index: 1;
height: 100%;
display: flex;
flex-direction: row;
align-items: stretch;
}
.category-label {
color: var(--spectrum-global-color-gray-600);
text-transform: uppercase;
font-size: 12px;
font-weight: 600;
margin-top: var(--spacing-xs);
}
.component {
background-color: var(--spectrum-global-color-gray-200);
background: var(--spectrum-global-color-gray-200);
border-radius: 4px;
height: 76px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 0 var(--spacing-s);
gap: var(--spacing-s);
padding-top: 4px;
border: 1px solid var(--spectrum-global-color-gray-200);
transition: border-color 130ms ease-out;
transition: background 130ms ease-out, border-color 130ms ease-out;
flex-direction: row;
justify-content: flex-start;
padding: var(--spacing-s) var(--spacing-l);
gap: var(--spacing-m);
overflow: hidden;
}
.component.wide {
grid-column: span 2;
}
.component.selected,
.component:hover {
.component.selected {
border-color: var(--spectrum-global-color-blue-400);
}
.component:hover {
background: var(--spectrum-global-color-gray-300);
cursor: pointer;
}
.component :global(.spectrum-Body) {
line-height: 1.2 !important;
}
.block {
flex-direction: row;
justify-content: flex-start;
height: 48px;
padding: 0 var(--spacing-l);
gap: var(--spacing-m);
overflow: hidden;
text-overflow: ellipsis;
}
</style>

View file

@ -0,0 +1,5 @@
<script>
import NewComponentPanel from "./_components/NewComponentPanel.svelte"
</script>
<NewComponentPanel />

View file

@ -1,21 +0,0 @@
<script>
import Panel from "components/design/Panel.svelte"
import { Body, Layout } from "@budibase/bbui"
import { selectedComponent, selectedScreen, store } from "builderStore"
$: componentDefinition = store.actions.components.getDefinition(
$selectedComponent?._component
)
$: isScreen = $selectedComponent?._id === $selectedScreen?.props._id
$: title = isScreen ? "Screen" : $selectedComponent?._instanceName
$: position = componentDefinition?.hasChildren ? "inside" : "below"
</script>
<Panel {title} icon={componentDefinition?.icon} borderLeft>
<Layout paddingX="L" paddingY="XL">
<Body size="S">
Components that you add will be placed {position}
{title}
</Body>
</Layout>
</Panel>

View file

@ -1,26 +0,0 @@
<script>
import NewComponentPanel from "./_components/NewComponentPanel.svelte"
import NewComponentTargetPanel from "./_components/NewComponentTargetPanel.svelte"
import { onMount } from "svelte"
import { store, selectedComponent, selectedScreen } from "builderStore"
import { redirect } from "@roxi/routify"
// Select the screen slot as the target to add to, if no component
// is selected
onMount(() => {
if (!$selectedComponent) {
if ($selectedScreen) {
store.update(state => {
state.selectedComponentId = $selectedScreen.props._id
return state
})
} else {
// Otherwise go back out of the add screen
$redirect("../")
}
}
})
</script>
<NewComponentPanel />
<NewComponentTargetPanel />

View file

@ -0,0 +1,58 @@
<script>
import { RoleUtils } from "@budibase/frontend-core"
import { Tooltip, StatusLight } from "@budibase/bbui"
import { roles } from "stores/backend"
import { Roles } from "constants/backend"
export let roleId
let showTooltip = false
$: color = RoleUtils.getRoleColour(roleId)
$: role = $roles.find(role => role._id === roleId)
$: tooltip =
roleId === Roles.PUBLIC
? "This screen is open to the public"
: `Requires at least ${role?.name} access`
</script>
<div
class="container"
on:mouseover={() => (showTooltip = true)}
on:mouseleave={() => (showTooltip = false)}
style="--color: {color};"
>
<StatusLight square {color} />
{#if showTooltip}
<div class="tooltip">
<Tooltip textWrapping text={tooltip} direction="left" />
</div>
{/if}
</div>
<style>
.container {
position: relative;
}
.tooltip {
z-index: 1;
position: absolute;
top: 50%;
left: calc(50% - 8px);
transform: translateX(-100%) translateY(-50%);
display: flex;
flex-direction: row;
justify-content: flex-end;
width: 130px;
pointer-events: none;
}
.tooltip :global(.spectrum-Tooltip) {
background: var(--color);
color: white;
font-weight: 600;
max-width: 130px;
}
.tooltip :global(.spectrum-Tooltip-tip) {
border-top-color: var(--color);
}
</style>

View file

@ -1,11 +1,12 @@
<script>
import { Search, Layout, Select, Body } from "@budibase/bbui"
import { Search, Layout, Select, Body, Button } from "@budibase/bbui"
import Panel from "components/design/Panel.svelte"
import { roles } from "stores/backend"
import { store, sortedScreens } from "builderStore"
import NavItem from "components/common/NavItem.svelte"
import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte"
import ScreenWizard from "./ScreenWizard.svelte"
import RoleIndicator from "./RoleIndicator.svelte"
import { RoleUtils } from "@budibase/frontend-core"
let searchString
@ -28,13 +29,9 @@
}
</script>
<Panel
title="Screens"
showAddButton
onClickAddButton={showNewScreenModal}
borderRight
>
<Panel title="Screens" borderRight>
<Layout paddingX="L" paddingY="XL" gap="S">
<Button on:click={showNewScreenModal} cta>Add screen</Button>
<Search
placeholder="Search"
value={searchString}
@ -56,14 +53,15 @@
</Layout>
{#each filteredScreens as screen (screen._id)}
<NavItem
icon={screen.routing.homeScreen ? "Home" : "WebPage"}
icon={screen.routing.homeScreen ? "Home" : null}
indentLevel={0}
selected={$store.selectedScreenId === screen._id}
text={screen.routing.route}
on:click={() => store.actions.screens.select(screen._id)}
color={RoleUtils.getRoleColour(screen.routing.roleId)}
rightAlignIcon
>
<ScreenDropdownMenu screenId={screen._id} />
<RoleIndicator slot="right" roleId={screen.routing.roleId} />
</NavItem>
{/each}
{#if !filteredScreens?.length}

View file

@ -66,21 +66,26 @@
<Body>
The app is currently using version
<strong>{$store.version}</strong>
but version <strong>{clientPackage.version}</strong> is available.
but version <strong>{clientPackage.version}</strong> is
available.
<br />
Updates can contain new features, performance improvements and bug
fixes.
</Body>
<div class="page-action">
<Button cta on:click={versionModal.show()}>Update app</Button>
</div>
{:else}
<p class="version-status">
<div class="version-status">
The app is currently using version
<strong>{$store.version}</strong>. You're running the latest!
</p>
</div>
<div class="page-action">
<Button secondary on:click={versionModal.show()}>
Revert app
</Button>
</div>
{/if}
Updates can contain new features, performance improvements and bug
fixes.
<div class="page-action">
<Button cta on:click={versionModal.show()}>Update app</Button>
</div>
</Body>
</Layout>
</span>

View file

@ -1,7 +1,6 @@
<script>
import { Layout, Heading, Body, Divider, Label, Select } from "@budibase/bbui"
import { themeStore } from "builderStore"
import { capitalise } from "helpers"
import { Constants } from "@budibase/frontend-core"
</script>
@ -15,10 +14,11 @@
<div class="field">
<Label size="L">Builder theme</Label>
<Select
options={Constants.ThemeOptions}
options={Constants.Themes}
bind:value={$themeStore.theme}
placeholder={null}
getOptionLabel={capitalise}
getOptionLabel={x => x.name}
getOptionValue={x => x.class}
/>
</div>
</div>

View file

@ -2763,7 +2763,7 @@
},
"longformfield": {
"name": "Long Form Field",
"icon": "AlignLeft",
"icon": "TextAlignLeft",
"styles": [
"size"
],
@ -3737,7 +3737,7 @@
"cardsblock": {
"block": true,
"name": "Cards block",
"icon": "Table",
"icon": "PersonalizationField",
"styles": [
"size"
],

View file

@ -133,11 +133,31 @@ export const SqlNumberTypeRangeMap = {
},
}
export const ThemeOptions = [
"lightest",
"light",
"dark",
"darkest",
"nord",
"midnight",
export const Themes = [
{
class: "lightest",
name: "Lightest",
},
{
class: "light",
name: "Light",
},
{
class: "dark",
name: "Dark",
},
{
class: "darkest",
name: "Darkest",
},
{
class: "nord",
name: "Nord",
base: "darkest",
},
{
class: "midnight",
name: "Midnight",
base: "darkest",
},
]

View file

@ -32,7 +32,7 @@
--spectrum-global-color-gray-50: #2e3440;
--spectrum-global-color-gray-75: #353b4a;
--spectrum-global-color-gray-100: #3b4252;
--spectrum-global-color-gray-200: #4a5367;
--spectrum-global-color-gray-200: #424a5c;
--spectrum-global-color-gray-300: #4c566a;
--spectrum-global-color-gray-400: #5a657d;
--spectrum-global-color-gray-500: #677590;
@ -41,6 +41,6 @@
--spectrum-global-color-gray-800: #bac1cd;
--spectrum-global-color-gray-900: #eceff4;
--spectrum-alias-highlight-hover: rgba(169, 177, 193, 0.06);
--spectrum-alias-highlight-hover: rgba(169, 177, 193, 0.1);
--spectrum-alias-highlight-active: rgba(169, 177, 193, 0.1);
}

View file

@ -7,10 +7,10 @@ const RolePriorities = {
[Roles.PUBLIC]: 1,
}
const RoleColours = {
[Roles.ADMIN]: "var(--spectrum-global-color-static-seafoam-400)",
[Roles.POWER]: "var(--spectrum-global-color-static-purple-400)",
[Roles.BASIC]: "var(--spectrum-global-color-static-magenta-400)",
[Roles.PUBLIC]: "var(--spectrum-global-color-static-yellow-400)",
[Roles.ADMIN]: "var(--spectrum-global-color-static-red-400)",
[Roles.POWER]: "var(--spectrum-global-color-static-orange-400)",
[Roles.BASIC]: "var(--spectrum-global-color-static-green-400)",
[Roles.PUBLIC]: "var(--spectrum-global-color-static-blue-400)",
}
export const getRolePriority = roleId => {
@ -18,5 +18,7 @@ export const getRolePriority = roleId => {
}
export const getRoleColour = roleId => {
return RoleColours[roleId] ?? "rgb(20, 115, 230)"
return (
RoleColours[roleId] ?? "var(--spectrum-global-color-static-magenta-400)"
)
}