1
0
Fork 0
mirror of synced 2024-06-26 18:10:51 +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) { :global([dir="ltr"] .spectrum-ActionButton .spectrum-Icon) {
margin-left: 0; margin-left: 0;
transition: color ease-out 130ms;
} }
.is-selected:not(.spectrum-ActionButton--emphasized) { .is-selected:not(.spectrum-ActionButton--emphasized) {
background: var(--spectrum-global-color-gray-300); background: var(--spectrum-global-color-gray-300);
@ -92,4 +93,10 @@
padding: 0; padding: 0;
min-width: 0; min-width: 0;
} }
.spectrum-ActionButton--quiet {
padding: 0 8px;
}
.is-selected:not(.emphasized) .spectrum-Icon {
color: var(--spectrum-global-color-gray-900);
}
</style> </style>

View file

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

View file

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

View file

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

View file

@ -16,16 +16,19 @@ export const getThemeStore = () => {
return return
} }
Constants.ThemeOptions.forEach(option => { // Update global class names to use the new theme and remove others
Constants.Themes.forEach(option => {
themeElement.classList.toggle( themeElement.classList.toggle(
`spectrum--${option}`, `spectrum--${option.class}`,
option === state.theme 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 return store

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -3,6 +3,7 @@
import { onMount, onDestroy } from "svelte" import { onMount, onDestroy } from "svelte"
import { import {
store, store,
selectedComponent,
selectedScreen, selectedScreen,
selectedLayout, selectedLayout,
currentAsset, currentAsset,
@ -14,6 +15,7 @@
Layout, Layout,
Heading, Heading,
Body, Body,
Icon,
notifications, notifications,
} from "@budibase/bbui" } from "@budibase/bbui"
import ErrorSVG from "@budibase/frontend-core/assets/error.svg?raw" import ErrorSVG from "@budibase/frontend-core/assets/error.svg?raw"
@ -96,6 +98,11 @@
$: json = JSON.stringify(previewData) $: json = JSON.stringify(previewData)
$: refreshContent(json) $: 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 // Update the iframe with the builder info to render the correct preview
const refreshContent = message => { const refreshContent = message => {
if (iframe) { if (iframe) {
@ -219,6 +226,16 @@
idToDelete = null idToDelete = null
} }
const toggleAddComponent = () => {
if (isAddingComponent) {
$goto(`../${$selectedScreen._id}/components/${$selectedComponent?._id}`)
} else {
$goto(
`../${$selectedScreen._id}/components/${$selectedComponent?._id}/new`
)
}
}
onMount(() => { onMount(() => {
window.addEventListener("message", receiveMessage) window.addEventListener("message", receiveMessage)
if (!$store.clientFeatures.messagePassing) { if (!$store.clientFeatures.messagePassing) {
@ -282,6 +299,13 @@
class:tablet={$store.previewDevice === "tablet"} class:tablet={$store.previewDevice === "tablet"}
class:mobile={$store.previewDevice === "mobile"} class:mobile={$store.previewDevice === "mobile"}
/> />
<div
class="add-component"
class:active={isAddingComponent}
on:click={toggleAddComponent}
>
<Icon size="XL" name="Add">Component</Icon>
</div>
</div> </div>
<ConfirmDialog <ConfirmDialog
bind:this={confirmDeleteDialog} bind:this={confirmDeleteDialog}
@ -343,4 +367,26 @@
width: 100%; width: 100%;
height: 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> </style>

View file

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

View file

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

View file

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

View file

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

View file

@ -6,15 +6,14 @@
ActionGroup, ActionGroup,
ActionButton, ActionButton,
Search, Search,
DetailSummary,
Icon, Icon,
Body, Body,
Divider,
notifications, notifications,
} from "@budibase/bbui" } from "@budibase/bbui"
import structure from "./componentStructure.json" import structure from "./componentStructure.json"
import { store, selectedComponent } from "builderStore" import { store, selectedComponent } from "builderStore"
import { onMount } from "svelte" import { onMount } from "svelte"
import { fly } from "svelte/transition"
let section = "components" let section = "components"
let searchString let searchString
@ -150,114 +149,116 @@
}) })
</script> </script>
<Panel <div class="container" transition:fly|local={{ x: 260, duration: 300 }}>
title="Add component" <Panel
showBackButton title="Add component"
onClickBackButton={() => $goto("../slot")} showCloseButton
borderRight onClickCloseButton={() => $goto("../")}
> borderLeft
<Layout paddingX="L" paddingY="XL" gap="S"> >
<Search <Layout paddingX="L" paddingY="XL" gap="S">
placeholder="Search" <Search
value={searchString} placeholder="Search"
on:change={e => (searchString = e.detail)} value={searchString}
bind:inputRef={searchRef} on:change={e => (searchString = e.detail)}
/> bind:inputRef={searchRef}
{#if !searchString} />
<ActionGroup compact justified> {#if !searchString}
<ActionButton <ActionGroup compact justified>
fullWidth <ActionButton
selected={section === "components"} fullWidth
on:click={() => (section = "components")}>Components</ActionButton selected={section === "components"}
> on:click={() => (section = "components")}>Components</ActionButton
<ActionButton >
fullWidth <ActionButton
selected={section === "blocks"} fullWidth
on:click={() => (section = "blocks")}>Blocks</ActionButton selected={section === "blocks"}
> on:click={() => (section = "blocks")}>Blocks</ActionButton
</ActionGroup> >
{/if} </ActionGroup>
</Layout> {/if}
<div> {#if searchString || section === "components"}
<Divider noMargin noGrid /> {#if filteredStructure.length}
</div> {#each filteredStructure as category}
{#if searchString || section === "components"} <Layout noPadding gap="XS">
{#each filteredStructure as category} <div class="category-label">{category.name}</div>
<DetailSummary name={category.name} collapsible={false}> {#each category.children as component}
<div class="component-grid"> <div
{#each category.children as component} 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 <div
class="component" class="component"
class:wide={component.name?.length > 15} on:click={() => addComponent(block.component)}
class:selected={selectedIndex === orderMap[component.component]}
on:click={() => addComponent(component.component)}
on:mouseover={() => (selectedIndex = null)}
> >
<Icon name={component.icon} /> <Icon name={block.icon} />
<Body size="XS">{component.name}</Body> <Body size="XS">{block.name}</Body>
</div> </div>
{/each} {/each}
</div> </Layout>
</DetailSummary> {/if}
{/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> </Layout>
{/if} </Panel>
</Panel> </div>
<style> <style>
.component-grid { .container {
display: grid; position: fixed;
grid-template-columns: repeat(3, minmax(0, 1fr)); right: 0;
gap: var(--spacing-s); 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 { .component {
background-color: var(--spectrum-global-color-gray-200); background: var(--spectrum-global-color-gray-200);
border-radius: 4px; border-radius: 4px;
height: 76px;
display: flex; display: flex;
flex-direction: column;
justify-content: center;
align-items: 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); 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 { .component.selected {
grid-column: span 2;
}
.component.selected,
.component:hover {
border-color: var(--spectrum-global-color-blue-400); border-color: var(--spectrum-global-color-blue-400);
} }
.component:hover { .component:hover {
background: var(--spectrum-global-color-gray-300);
cursor: pointer; cursor: pointer;
} }
.component :global(.spectrum-Body) { .component :global(.spectrum-Body) {
line-height: 1.2 !important; line-height: 1.2 !important;
} overflow: hidden;
text-overflow: ellipsis;
.block {
flex-direction: row;
justify-content: flex-start;
height: 48px;
padding: 0 var(--spacing-l);
gap: var(--spacing-m);
} }
</style> </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> <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 Panel from "components/design/Panel.svelte"
import { roles } from "stores/backend" import { roles } from "stores/backend"
import { store, sortedScreens } from "builderStore" import { store, sortedScreens } from "builderStore"
import NavItem from "components/common/NavItem.svelte" import NavItem from "components/common/NavItem.svelte"
import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte" import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte"
import ScreenWizard from "./ScreenWizard.svelte" import ScreenWizard from "./ScreenWizard.svelte"
import RoleIndicator from "./RoleIndicator.svelte"
import { RoleUtils } from "@budibase/frontend-core" import { RoleUtils } from "@budibase/frontend-core"
let searchString let searchString
@ -28,13 +29,9 @@
} }
</script> </script>
<Panel <Panel title="Screens" borderRight>
title="Screens"
showAddButton
onClickAddButton={showNewScreenModal}
borderRight
>
<Layout paddingX="L" paddingY="XL" gap="S"> <Layout paddingX="L" paddingY="XL" gap="S">
<Button on:click={showNewScreenModal} cta>Add screen</Button>
<Search <Search
placeholder="Search" placeholder="Search"
value={searchString} value={searchString}
@ -56,14 +53,15 @@
</Layout> </Layout>
{#each filteredScreens as screen (screen._id)} {#each filteredScreens as screen (screen._id)}
<NavItem <NavItem
icon={screen.routing.homeScreen ? "Home" : "WebPage"} icon={screen.routing.homeScreen ? "Home" : null}
indentLevel={0} indentLevel={0}
selected={$store.selectedScreenId === screen._id} selected={$store.selectedScreenId === screen._id}
text={screen.routing.route} text={screen.routing.route}
on:click={() => store.actions.screens.select(screen._id)} on:click={() => store.actions.screens.select(screen._id)}
color={RoleUtils.getRoleColour(screen.routing.roleId)} rightAlignIcon
> >
<ScreenDropdownMenu screenId={screen._id} /> <ScreenDropdownMenu screenId={screen._id} />
<RoleIndicator slot="right" roleId={screen.routing.roleId} />
</NavItem> </NavItem>
{/each} {/each}
{#if !filteredScreens?.length} {#if !filteredScreens?.length}

View file

@ -66,21 +66,26 @@
<Body> <Body>
The app is currently using version The app is currently using version
<strong>{$store.version}</strong> <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> </Body>
<div class="page-action">
<Button cta on:click={versionModal.show()}>Update app</Button>
</div>
{:else} {:else}
<p class="version-status"> <div class="version-status">
The app is currently using version The app is currently using version
<strong>{$store.version}</strong>. You're running the latest! <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} {/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> </Body>
</Layout> </Layout>
</span> </span>

View file

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

View file

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

View file

@ -133,11 +133,31 @@ export const SqlNumberTypeRangeMap = {
}, },
} }
export const ThemeOptions = [ export const Themes = [
"lightest", {
"light", class: "lightest",
"dark", name: "Lightest",
"darkest", },
"nord", {
"midnight", 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-50: #2e3440;
--spectrum-global-color-gray-75: #353b4a; --spectrum-global-color-gray-75: #353b4a;
--spectrum-global-color-gray-100: #3b4252; --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-300: #4c566a;
--spectrum-global-color-gray-400: #5a657d; --spectrum-global-color-gray-400: #5a657d;
--spectrum-global-color-gray-500: #677590; --spectrum-global-color-gray-500: #677590;
@ -41,6 +41,6 @@
--spectrum-global-color-gray-800: #bac1cd; --spectrum-global-color-gray-800: #bac1cd;
--spectrum-global-color-gray-900: #eceff4; --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); --spectrum-alias-highlight-active: rgba(169, 177, 193, 0.1);
} }

View file

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