Andrew Kingston
GitHub
commit
08f9c628ab
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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")}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
import { setContext } from "svelte"
|
||||
import DNDPositionIndicator from "./DNDPositionIndicator.svelte"
|
||||
import { DropPosition } from "./dndStore"
|
||||
import { Button } from "@budibase/bbui"
|
||||
|
||||
let scrollRef
|
||||
|
||||
|
|
@ -23,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 {
|
||||
|
|
@ -61,13 +62,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
|
||||
|
|
@ -110,6 +108,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;
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
-->
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
<script>
|
||||
import NewComponentPanel from "./_components/NewComponentPanel.svelte"
|
||||
</script>
|
||||
|
||||
<NewComponentPanel />
|
||||
|
|
@ -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>
|
||||
|
|
@ -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 />
|
||||
|
|
@ -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>
|
||||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -2763,7 +2763,7 @@
|
|||
},
|
||||
"longformfield": {
|
||||
"name": "Long Form Field",
|
||||
"icon": "AlignLeft",
|
||||
"icon": "TextAlignLeft",
|
||||
"styles": [
|
||||
"size"
|
||||
],
|
||||
|
|
@ -3736,7 +3736,7 @@
|
|||
"cardsblock": {
|
||||
"block": true,
|
||||
"name": "Cards block",
|
||||
"icon": "Table",
|
||||
"icon": "PersonalizationField",
|
||||
"styles": [
|
||||
"size"
|
||||
],
|
||||
|
|
|
|||
|
|
@ -99,11 +99,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",
|
||||
},
|
||||
]
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)"
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue