Merge branch 'master' of github.com:Budibase/budibase into develop
This commit is contained in:
commit
3ebb2e193f
29 changed files with 411 additions and 282 deletions
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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 />
|
||||||
|
|
|
@ -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">
|
||||||
|
<div class="version">
|
||||||
<VersionModal />
|
<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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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")}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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 />
|
||||||
|
|
|
@ -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 />
|
|
||||||
|
|
|
@ -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,12 +149,13 @@
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Panel
|
<div class="container" transition:fly|local={{ x: 260, duration: 300 }}>
|
||||||
|
<Panel
|
||||||
title="Add component"
|
title="Add component"
|
||||||
showBackButton
|
showCloseButton
|
||||||
onClickBackButton={() => $goto("../slot")}
|
onClickCloseButton={() => $goto("../")}
|
||||||
borderRight
|
borderLeft
|
||||||
>
|
>
|
||||||
<Layout paddingX="L" paddingY="XL" gap="S">
|
<Layout paddingX="L" paddingY="XL" gap="S">
|
||||||
<Search
|
<Search
|
||||||
placeholder="Search"
|
placeholder="Search"
|
||||||
|
@ -177,19 +177,16 @@
|
||||||
>
|
>
|
||||||
</ActionGroup>
|
</ActionGroup>
|
||||||
{/if}
|
{/if}
|
||||||
</Layout>
|
|
||||||
<div>
|
|
||||||
<Divider noMargin noGrid />
|
|
||||||
</div>
|
|
||||||
{#if searchString || section === "components"}
|
{#if searchString || section === "components"}
|
||||||
|
{#if filteredStructure.length}
|
||||||
{#each filteredStructure as category}
|
{#each filteredStructure as category}
|
||||||
<DetailSummary name={category.name} collapsible={false}>
|
<Layout noPadding gap="XS">
|
||||||
<div class="component-grid">
|
<div class="category-label">{category.name}</div>
|
||||||
{#each category.children as component}
|
{#each category.children as component}
|
||||||
<div
|
<div
|
||||||
class="component"
|
class="component"
|
||||||
class:wide={component.name?.length > 15}
|
class:selected={selectedIndex ===
|
||||||
class:selected={selectedIndex === orderMap[component.component]}
|
orderMap[component.component]}
|
||||||
on:click={() => addComponent(component.component)}
|
on:click={() => addComponent(component.component)}
|
||||||
on:mouseover={() => (selectedIndex = null)}
|
on:mouseover={() => (selectedIndex = null)}
|
||||||
>
|
>
|
||||||
|
@ -197,16 +194,19 @@
|
||||||
<Body size="XS">{component.name}</Body>
|
<Body size="XS">{component.name}</Body>
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</Layout>
|
||||||
</DetailSummary>
|
|
||||||
{/each}
|
{/each}
|
||||||
{:else}
|
{:else}
|
||||||
<Layout paddingX="L" paddingY="XL" gap="S">
|
<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>
|
<Body size="S">Blocks are collections of pre-built components</Body>
|
||||||
<Layout noPadding gap="XS">
|
<Layout noPadding gap="XS">
|
||||||
{#each blocks as block}
|
{#each blocks as block}
|
||||||
<div
|
<div
|
||||||
class="component block"
|
class="component"
|
||||||
on:click={() => addComponent(block.component)}
|
on:click={() => addComponent(block.component)}
|
||||||
>
|
>
|
||||||
<Icon name={block.icon} />
|
<Icon name={block.icon} />
|
||||||
|
@ -214,50 +214,51 @@
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
</Layout>
|
</Layout>
|
||||||
</Layout>
|
|
||||||
{/if}
|
{/if}
|
||||||
</Panel>
|
</Layout>
|
||||||
|
</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>
|
|
@ -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>
|
<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}
|
||||||
|
|
|
@ -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
|
||||||
</Body>
|
available.
|
||||||
{:else}
|
<br />
|
||||||
<p class="version-status">
|
|
||||||
The app is currently using version
|
|
||||||
<strong>{$store.version}</strong>. You're running the latest!
|
|
||||||
</p>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
Updates can contain new features, performance improvements and bug
|
Updates can contain new features, performance improvements and bug
|
||||||
fixes.
|
fixes.
|
||||||
|
</Body>
|
||||||
<div class="page-action">
|
<div class="page-action">
|
||||||
<Button cta on:click={versionModal.show()}>Update app</Button>
|
<Button cta on:click={versionModal.show()}>Update app</Button>
|
||||||
</div>
|
</div>
|
||||||
|
{:else}
|
||||||
|
<div class="version-status">
|
||||||
|
The app is currently using version
|
||||||
|
<strong>{$store.version}</strong>. You're running the latest!
|
||||||
|
</div>
|
||||||
|
<div class="page-action">
|
||||||
|
<Button secondary on:click={versionModal.show()}>
|
||||||
|
Revert app
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
</Body>
|
</Body>
|
||||||
</Layout>
|
</Layout>
|
||||||
</span>
|
</span>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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"
|
||||||
],
|
],
|
||||||
|
|
|
@ -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",
|
||||||
|
},
|
||||||
]
|
]
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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)"
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue