MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'spectrum-bbui' into spectrum/kevins-bits-and-bobs

This commit is contained in:
Keviin Åberg Kultalahti 2021-04-23 12:52:05 +02:00
parent b97fe50a4a 714929ff27
commit dbb125dd12
34 changed files with 334 additions and 375 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/bbui/src/Button/Button.svelte
View File

@ -46,8 +46,4 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
button.active {
color: var(--spectrum-semantic-cta-color-background-default);
}
</style> </style>

5
packages/bbui/src/DetailSummary/DetailSummary.svelte
View File

@ -1,5 +1,5 @@
<script> <script>
import Icon from '../Icon/Icon.svelte' import Icon from "../Icon/Icon.svelte"
import { createEventDispatcher } from "svelte" import { createEventDispatcher } from "svelte"
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
@ -58,9 +58,10 @@
text-overflow: ellipsis; text-overflow: ellipsis;
text-transform: capitalize; text-transform: capitalize;
white-space: nowrap; white-space: nowrap;
user-select: none;
} }
.name.thin { .name.thin {
font-size: var(--font-size-xs); font-size: var(--spectrum-global-dimension-font-size-75);
} }
.icon { .icon {

13
packages/bbui/src/Divider/Divider.svelte
View File

@ -5,12 +5,25 @@
export let s = false export let s = false
export let vertical = false export let vertical = false
export let noMargin = false
export let noGrid = false
$: useDefault = ![l, m, s].includes(true) $: useDefault = ![l, m, s].includes(true)
</script> </script>
<hr <hr
class:noMargin
class:noGrid
class:spectrum-Divider--sizeL={l} class:spectrum-Divider--sizeL={l}
class:spectrum-Divider--sizeM={m || useDefault} class:spectrum-Divider--sizeM={m || useDefault}
class:spectrum-Divider--sizeS={s} class:spectrum-Divider--sizeS={s}
class="spectrum-Divider spectrum-Divider--{vertical ? 'vertical' : 'horizontal'} spectrum-Dialog-divider" /> class="spectrum-Divider spectrum-Divider--{vertical ? 'vertical' : 'horizontal'} spectrum-Dialog-divider" />
<style>
hr.noMargin {
margin: 0;
}
hr.noGrid {
grid-area: auto;
}
</style>

3
packages/bbui/src/Modal/Modal.svelte
View File

@ -99,5 +99,8 @@
max-height: none; max-height: none;
margin: 40px 0; margin: 40px 0;
transform: none; transform: none;
--spectrum-dialog-confirm-border-radius: var(
--spectrum-global-dimension-size-100
);
} }
</style> </style>

3
packages/bbui/src/Modal/ModalContent.svelte
View File

@ -84,6 +84,9 @@
.spectrum-Dialog-content { .spectrum-Dialog-content {
overflow: visible; overflow: visible;
} }
.spectrum-Dialog-heading {
font-family: var(--spectrum-alias-body-text-font-family);
}
.spectrum-Dialog-buttonGroup { .spectrum-Dialog-buttonGroup {
gap: var(--spectrum-global-dimension-static-size-200); gap: var(--spectrum-global-dimension-static-size-200);

6
packages/bbui/src/Popover/Popover.svelte
View File

@ -42,3 +42,9 @@
</div> </div>
</Portal> </Portal>
{/if} {/if}
<style>
.spectrum-Popover {
min-width: var(--spectrum-global-dimension-size-2000) !important;
}
</style>

21
packages/bbui/src/Table/Table.svelte
View File

@ -303,7 +303,7 @@
<style> <style>
.wrapper { .wrapper {
background-color: var(--spectrum-alias-background-color-default); background-color: var(--spectrum-alias-background-color-secondary);
overflow: hidden; overflow: hidden;
position: relative; position: relative;
z-index: 1; z-index: 1;
@ -313,23 +313,6 @@
height: 100%; height: 100%;
position: relative; position: relative;
overflow: auto; overflow: auto;
scrollbar-width: thin;
scrollbar-color: var(--spectrum-global-color-gray-400)
var(--spectrum-alias-background-color-default);
}
.container::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.container::-webkit-scrollbar-track {
background: var(--spectrum-alias-background-color-default);
}
.container::-webkit-scrollbar-thumb {
background-color: var(--spectrum-global-color-gray-400);
border-radius: 4px;
}
.container::-webkit-scrollbar-corner {
background: var(--spectrum-alias-background-color-default);
} }
.container.quiet { .container.quiet {
border: none !important; border: none !important;
@ -364,7 +347,7 @@
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 2; z-index: 2;
background-color: var(--spectrum-alias-background-color-default); background-color: var(--spectrum-alias-background-color-secondary);
border-bottom: 1px solid border-bottom: 1px solid
var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important; var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
} }

68
packages/bbui/src/Tabs/Tab.svelte
View File

@ -1,35 +1,49 @@
<script> <script>
import { getContext, onMount } from 'svelte' import { getContext, onMount, createEventDispatcher } from "svelte"
import Portal from "svelte-portal" import Portal from "svelte-portal"
export let title export let title
export let icon = ''; export let icon = ""
const selected = getContext('tab') const dispatch = createEventDispatcher()
let tab; const selected = getContext("tab")
let tabInfo let tab
const setTabInfo = () => { let tabInfo
tabInfo = tab.getBoundingClientRect() const setTabInfo = () => {
if ($selected.title === title) { tabInfo = tab.getBoundingClientRect()
$selected.info = tabInfo if ($selected.title === title) {
} $selected.info = tabInfo
} }
}
onMount(() => { onMount(() => {
setTabInfo() setTabInfo()
}) })
const onClick = () => {
$selected = { ...$selected, title, info: tab.getBoundingClientRect() }
dispatch("click")
}
</script> </script>
<div bind:this={tab} on:click={() => $selected = {...$selected, title, info: tab.getBoundingClientRect()} } class:is-selected={$selected.title === title} class="spectrum-Tabs-item" tabindex="0"> <div
{#if icon} bind:this={tab}
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder"> on:click={onClick}
<use xlink:href="#spectrum-icon-18-{icon}" /> class:is-selected={$selected.title === title}
</svg> class="spectrum-Tabs-item"
{/if} tabindex="0">
<span class="spectrum-Tabs-itemLabel">{title}</span> {#if icon}
<svg
class="spectrum-Icon spectrum-Icon--sizeM"
focusable="false"
aria-hidden="true"
aria-label="Folder">
<use xlink:href="#spectrum-icon-18-{icon}" />
</svg>
{/if}
<span class="spectrum-Tabs-itemLabel">{title}</span>
</div> </div>
{#if $selected.title === title} {#if $selected.title === title}
<Portal target=".spectrum-Tabs-content-{$selected.id}"> <Portal target=".spectrum-Tabs-content-{$selected.id}">
<slot /> <slot />
</Portal> </Portal>
{/if} {/if}

126
packages/bbui/src/Tabs/Tabs.svelte
View File

@ -1,71 +1,85 @@
<script> <script>
import "@spectrum-css/tabs/dist/index-vars.css" import "@spectrum-css/tabs/dist/index-vars.css"
import { writable } from 'svelte/store' import { writable } from "svelte/store"
import { onMount, setContext, createEventDispatcher } from 'svelte' import { onMount, setContext, createEventDispatcher } from "svelte"
export let selected;
export let vertical = false
let _id = id()
const tab = writable({title: selected, id: _id})
setContext('tab', tab)
let container;
const dispatch = createEventDispatcher() export let selected
export let vertical = false
let _id = id()
const tab = writable({ title: selected, id: _id })
setContext("tab", tab)
$: selected = $tab.title let container
$: selected = dispatch('select', selected)
let top, left, width, height; const dispatch = createEventDispatcher()
$: calculateIndicatorLength($tab)
$: calculateIndicatorOffset($tab)
function calculateIndicatorLength() { $: selected = $tab.title
if (!vertical) { $: selected = dispatch("select", selected)
width = $tab.info?.width + 24 + 'px'
height = $tab.info?.height let top, left, width, height
} else { $: calculateIndicatorLength($tab)
height = $tab.info?.height + 4 + 'px' $: calculateIndicatorOffset($tab)
width = $tab.info?.width
} function calculateIndicatorLength() {
if (!vertical) {
width = $tab.info?.width + "px"
height = $tab.info?.height
} else {
height = $tab.info?.height + 4 + "px"
width = $tab.info?.width
} }
}
function calculateIndicatorOffset() { function calculateIndicatorOffset() {
if (!vertical) { if (!vertical) {
left = $tab.info?.left - container?.getBoundingClientRect().left - 12 + 'px' left = $tab.info?.left - container?.getBoundingClientRect().left + "px"
top = $tab.info?.top } else {
} else { top = $tab.info?.top - container?.getBoundingClientRect().top + "px"
top = $tab.info?.top - container?.getBoundingClientRect().top + 'px'
left = $tab.info?.left
}
} }
}
onMount(() => {
calculateIndicatorLength()
calculateIndicatorOffset()
})
function id() { onMount(() => {
return ( calculateIndicatorLength()
"_" + calculateIndicatorOffset()
Math.random() })
.toString(36)
.substr(2, 9) function id() {
) return (
} "_" +
Math.random()
.toString(36)
.substr(2, 9)
)
}
</script> </script>
<div bind:this={container} class="selected-border spectrum-Tabs spectrum-Tabs--{vertical ? 'vertical' : 'horizontal'}">
<slot /> <div
<div class="spectrum-Tabs-selectionIndicator indicator-transition" style="width: {width}; height: {height}; left: {left}; top: {top};"></div> bind:this={container}
class="selected-border spectrum-Tabs spectrum-Tabs--{vertical ? 'vertical' : 'horizontal'}">
<slot />
{#if $tab.info}
<div
class="spectrum-Tabs-selectionIndicator indicator-transition"
style="width: {width}; height: {height}; left: {left}; top: {top};" />
{/if}
</div> </div>
<div class="spectrum-Tabs-content spectrum-Tabs-content-{_id}" /> <div class="spectrum-Tabs-content spectrum-Tabs-content-{_id}" />
<style> <style>
.spectrum-Tabs-content { .spectrum-Tabs {
margin-top: var(--spectrum-global-dimension-static-size-150); padding-left: var(--spacing-xl);
} padding-right: var(--spacing-xl);
.indicator-transition { position: relative;
transition: all 200ms border-width: 1px !important;
} }
</style> .spectrum-Tabs-content {
margin-top: var(--spectrum-global-dimension-static-size-150);
}
.indicator-transition {
transition: all 200ms;
}
.spectrum-Tabs--horizontal .spectrum-Tabs-selectionIndicator {
bottom: 0 !important;
}
</style>

96
packages/bbui/src/bbui.css
View File

@ -1,32 +1,3 @@
.svench-content {
color: #666;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, "Roboto",
Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
h1.svench-content {
font-size: 2em;
}
h2.svench-content {
font-size: 1.66em;
}
h3.svench-content {
font-size: 1.33em;
}
h4.svench-content {
font-size: 1.33em;
font-weight: normal;
}
h5.svench-content {
font-size: 1em;
font-weight: bold;
}
h6.svench-content {
font-size: 1em;
font-weight: normal;
font-style: italic;
}
:root { :root {
--background: #ffffff; --background: #ffffff;
--ink: #000000; --ink: #000000;
@ -74,7 +45,7 @@ h6.svench-content {
--font-bold: "Inter Bold"; --font-bold: "Inter Bold";
--font-medium: "Inter Medium"; --font-medium: "Inter Medium";
--font-light: "Inter Light"; --font-light: "Inter Light";
--font-sans: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, "Inter", --font-sans: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, "Inter",
"Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-serif: "Georgia", Cambria, Times New Roman, Times, serif; --font-serif: "Georgia", Cambria, Times New Roman, Times, serif;
@ -125,69 +96,6 @@ h6.svench-content {
--border-transparent: 2px transparent solid; --border-transparent: 2px transparent solid;
} }
h1 {
font-size: 3rem;
font-family: var(--font-sans);
font-weight: 700;
text-rendering: var(--text-render);
-webkit-font-smoothing: var(--text-smooth);
color: var(--ink);
}
h2 {
font-size: 2.25rem;
font-family: var(--font-sans);
font-weight: 600;
text-rendering: var(--text-render);
-webkit-font-smoothing: var(--text-smooth);
color: var(--ink);
}
h3 {
font-size: 1.7rem;
font-family: var(--font-sans);
font-weight: 600;
text-rendering: var(--text-render);
-webkit-font-smoothing: var(--text-smooth);
color: var(--ink);
}
h4 {
font-size: var(--font-size-xl);
font-family: var(--font-sans);
font-weight: 500;
text-rendering: var(--text-render);
-webkit-font-smoothing: var(--text-smooth);
color: var(--ink);
}
h5 {
font-size: var(--font-size-l);
font-family: var(--font-sans);
font-weight: 500;
text-rendering: var(--text-render);
-webkit-font-smoothing: var(--text-smooth);
color: var(--ink);
}
h6 {
font-size: var(--font-size-m);
font-family: var(--font-sans);
font-weight: 500;
text-rendering: var(--text-render);
-webkit-font-smoothing: var(--text-smooth);
color: var(--ink);
}
p {
font-size: var(--font-size);
font-family: var(--font-sans);
font-weight: 400;
text-rendering: var(--text-render);
-webkit-font-smoothing: var(--text-smooth);
color: var(--ink);
}
a { a {
text-decoration: none; text-decoration: none;
} }

14
packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
View File

@ -23,13 +23,12 @@
<style> <style>
.tab-content-padding { .tab-content-padding {
padding: 0 var(--spectrum-alias-item-padding-m); padding: 0 var(--spacing-xl);
} }
.add-button { .add-button {
position: absolute; position: absolute;
top: var(--spectrum-alias-item-padding-l); top: var(--spacing-l);
bottom: 0; right: var(--spacing-xl);
right: var(--spectrum-alias-item-padding-l);
} }
.title { .title {
@ -39,11 +38,4 @@
align-items: stretch; align-items: stretch;
position: relative; position: relative;
} }
.title i {
font-size: 20px;
}
.title i:hover {
cursor: pointer;
color: var(--blue);
}
</style> </style>

2
packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
View File

@ -97,7 +97,7 @@
} }
.block-label { .block-label {
font-size: var(--font-size-xs); font-size: var(--spectrum-global-dimension-font-size-75);
font-weight: 500; font-weight: 500;
color: var(--grey-7); color: var(--grey-7);
} }

6
packages/builder/src/components/backend/DataTable/popovers/CreateViewPopover.svelte
View File

@ -1,9 +1,8 @@
<script> <script>
import { Button, Input } from "@budibase/bbui" import { Button, Input, notifications, Heading } from "@budibase/bbui"
import { goto } from "@roxi/routify" import { goto } from "@roxi/routify"
import { views as viewsStore } from "stores/backend" import { views as viewsStore } from "stores/backend"
import { tables } from "stores/backend" import { tables } from "stores/backend"
import { notifications } from "@budibase/bbui"
import analytics from "analytics" import analytics from "analytics"
export let onClosed export let onClosed
@ -31,7 +30,7 @@
</script> </script>
<div class="actions"> <div class="actions">
<h5>Create View</h5> <Heading s>Create View</Heading>
<Input label="View Name" thin bind:value={name} /> <Input label="View Name" thin bind:value={name} />
<div class="footer"> <div class="footer">
<Button secondary on:click={onClosed}>Cancel</Button> <Button secondary on:click={onClosed}>Cancel</Button>
@ -49,6 +48,7 @@
display: grid; display: grid;
grid-gap: var(--spacing-xl); grid-gap: var(--spacing-xl);
padding: var(--spacing-xl); padding: var(--spacing-xl);
width: 240px;
} }
.footer { .footer {

5
packages/builder/src/components/backend/DataTable/popovers/ExportPopover.svelte
View File

@ -1,5 +1,5 @@
<script> <script>
import { Button, Select } from "@budibase/bbui" import { Button, Select, Heading } from "@budibase/bbui"
import download from "downloadjs" import download from "downloadjs"
const FORMATS = [ const FORMATS = [
@ -29,7 +29,7 @@
</script> </script>
<div class="popover"> <div class="popover">
<h5>Export Data</h5> <Heading s>Export Data</Heading>
<Select <Select
label="Format" label="Format"
bind:value={exportFormat} bind:value={exportFormat}
@ -47,6 +47,7 @@
display: grid; display: grid;
grid-gap: var(--spacing-xl); grid-gap: var(--spacing-xl);
padding: var(--spacing-xl); padding: var(--spacing-xl);
width: 240px;
} }
h5 { h5 {

20
packages/builder/src/components/backend/DataTable/popovers/ManageAccessPopover.svelte
View File

@ -1,7 +1,15 @@
<script> <script>
import { roles, permissions as permissionsStore } from "stores/backend" import { roles, permissions as permissionsStore } from "stores/backend"
import { notifications } from "@budibase/bbui" import {
import { Button, Label, Input, Select, Spacer } from "@budibase/bbui" Button,
Label,
Input,
Select,
Spacer,
notifications,
Heading,
Body,
} from "@budibase/bbui"
import { capitalise } from "../../../../helpers" import { capitalise } from "../../../../helpers"
export let resourceId export let resourceId
@ -24,11 +32,9 @@
</script> </script>
<div class="popover"> <div class="popover">
<h5>Who Can Access This Data?</h5> <Heading s>Who Can Access This Data?</Heading>
<div class="note"> <div class="note">
<Label extraSmall grey> <Body s>Specify the minimum access level role for this data.</Body>
Specify the minimum access level role for this data.
</Label>
</div> </div>
<Spacer large /> <Spacer large />
<div class="row"> <div class="row">
@ -74,7 +80,7 @@
.row { .row {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
grid-gap: var(--spacing-m); grid-gap: var(--spacing-s);
} }
.note { .note {

2
packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
View File

@ -221,7 +221,7 @@
margin-top: var(--spacing-m); margin-top: var(--spacing-m);
align-items: center; align-items: center;
grid-gap: var(--spacing-m); grid-gap: var(--spacing-m);
font-size: var(--font-size-xs); font-size: var(--spectrum-global-dimension-font-size-75);
} }
.display-column { .display-column {

2
packages/builder/src/components/common/Dropdowns/DropdownItem.svelte
View File

@ -44,7 +44,7 @@
.title, .title,
.subtitle { .subtitle {
font-size: var(--font-size-xs); font-size: var(--spectrum-global-dimension-font-size-75);
} }
.title { .title {

2
packages/builder/src/components/common/NavItem.svelte
View File

@ -97,7 +97,7 @@
.text { .text {
flex: 1 1 auto; flex: 1 1 auto;
font-weight: 500; font-weight: 500;
font-size: var(--font-size-xs); font-size: var(--spectrum-global-dimension-font-size-75);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;

25
packages/builder/src/components/deploy/DeploymentHistory.svelte
View File

@ -75,7 +75,9 @@
} catch (err) { } catch (err) {
console.error(err) console.error(err)
clearInterval(poll) clearInterval(poll)
notifications.error("Error fetching deployment history. Please try again.") notifications.error(
"Error fetching deployment history. Please try again."
)
} }
} }
@ -96,7 +98,7 @@
{#if deployments.length > 0} {#if deployments.length > 0}
<section class="deployment-history" in:slide> <section class="deployment-history" in:slide>
<header> <header>
<h4>Deployment History</h4> <Heading>Deployment History</Heading>
<div class="deploy-div"> <div class="deploy-div">
{#if deployments.some(deployment => deployment.status === DeploymentStatus.SUCCESS)} {#if deployments.some(deployment => deployment.status === DeploymentStatus.SUCCESS)}
<a target="_blank" href={deploymentUrl}> View Your Deployed App → </a> <a target="_blank" href={deploymentUrl}> View Your Deployed App → </a>
@ -148,13 +150,13 @@
</Modal> </Modal>
<style> <style>
.deployment:nth-child(odd) { section {
background: var(--grey-1); padding: var(--spacing-xl) 0;
} }
.deployment-list { .deployment-list {
height: 40vh; height: 40vh;
overflow-y: scroll; overflow-y: auto;
} }
h4 { h4 {
@ -163,9 +165,10 @@
} }
header { header {
margin-left: var(--spacing-l); padding-left: var(--spacing-l);
margin-bottom: var(--spacing-xl); padding-bottom: var(--spacing-xl);
margin-right: var(--spacing-l); padding-right: var(--spacing-l);
border-bottom: var(--border-light);
} }
.deploy-div { .deploy-div {
@ -183,10 +186,14 @@
.deployment { .deployment {
padding: var(--spacing-l); padding: var(--spacing-l);
height: 100px; height: 60px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
border-bottom: var(--border-light);
}
.deployment:last-child {
border-bottom: none;
} }
.deployment-info { .deployment-info {

4
packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
View File

@ -102,8 +102,8 @@
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
gap: var(--spacing-xs); gap: var(--spacing-s);
font-size: var(--font-size-xs); font-size: var(--spectrum-global-dimension-font-size-75);
} }
.category span { .category span {
font-weight: 500; font-weight: 500;

14
packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
View File

@ -26,7 +26,8 @@
] ]
let modal let modal
$: selected = tabs.find((t) => t.key === $params.assetType).title $: selected =
tabs.find((t) => t.key === $params.assetType)?.title || "Screens"
const navigate = ({ detail }) => { const navigate = ({ detail }) => {
const { key } = tabs.find((t) => t.title === detail) const { key } = tabs.find((t) => t.title === detail)
@ -121,9 +122,12 @@
} }
.add-button { .add-button {
position: absolute; position: absolute;
top: var(--spectrum-alias-item-padding-l); top: var(--spacing-l);
bottom: 0; right: var(--spacing-xl);
right: var(--spectrum-alias-item-padding-l); }
.title i:hover {
cursor: pointer;
color: var(--blue);
} }
.role-select { .role-select {
@ -136,6 +140,6 @@
} }
.tab-content-padding { .tab-content-padding {
padding: 0 var(--spectrum-alias-item-padding-m); padding: 0 var(--spacing-xl);
} }
</style> </style>

34
packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
View File

@ -1,7 +1,7 @@
<script> <script>
import { get } from "svelte/store" import { get } from "svelte/store"
import { store, selectedComponent, currentAsset } from "builderStore" import { store, selectedComponent, currentAsset } from "builderStore"
import { Tabs, Tab } from '@budibase/bbui' import { Tabs, Tab } from "@budibase/bbui"
import { FrontendTypes } from "constants" import { FrontendTypes } from "constants"
import CategoryTab from "./CategoryTab.svelte" import CategoryTab from "./CategoryTab.svelte"
import DesignView from "./DesignView.svelte" import DesignView from "./DesignView.svelte"
@ -52,12 +52,12 @@
<div class="instance-name">{definition.name}</div> <div class="instance-name">{definition.name}</div>
{/if} {/if}
<SettingsView <SettingsView
componentInstance={$selectedComponent} componentInstance={$selectedComponent}
componentDefinition={definition} componentDefinition={definition}
{showDisplayName} {showDisplayName}
onChange={store.actions.components.updateProp} onChange={store.actions.components.updateProp}
onScreenPropChange={setAssetProps} onScreenPropChange={setAssetProps}
assetInstance={$store.currentView !== 'component' && $currentAsset} /> assetInstance={$store.currentView !== 'component' && $currentAsset} />
</div> </div>
</Tab> </Tab>
<Tab title="Design"> <Tab title="Design">
@ -66,25 +66,25 @@
<div class="instance-name">{definition.name}</div> <div class="instance-name">{definition.name}</div>
{/if} {/if}
<DesignView <DesignView
componentInstance={$selectedComponent} componentInstance={$selectedComponent}
componentDefinition={definition} componentDefinition={definition}
{onStyleChanged} {onStyleChanged}
{onCustomStyleChanged} {onCustomStyleChanged}
{onUpdateTransition} {onUpdateTransition}
{onResetStyles} /> {onResetStyles} />
</div> </div>
</Tab> </Tab>
</Tabs> </Tabs>
<style> <style>
.tab-content-padding { .tab-content-padding {
padding: 0 var(--spacing-s); padding: 0 var(--spacing-xl);
} }
.instance-name { .instance-name {
font-size: var(--font-size-xs); font-size: var(--spectrum-global-dimension-font-size-75);
margin-bottom: var(--spacing-l); margin-bottom: var(--spacing-m);
margin-top: var(--spacing-xs);
font-weight: 500; font-weight: 500;
color: var(--grey-7); color: var(--grey-7);
} }

2
packages/builder/src/components/design/PropertiesPanel/PropertyControls/FlatButtonGroup/FlatButton.svelte
View File

@ -29,7 +29,7 @@
background: var(--background); background: var(--background);
color: var(--grey-7); color: var(--grey-7);
border-radius: var(--border-radius-m); border-radius: var(--border-radius-m);
font-size: var(--font-size-xs); font-size: var(--spectrum-global-dimension-font-size-75);
font-weight: 500; font-weight: 500;
transition: all 0.3s; transition: all 0.3s;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;

4
packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
View File

@ -179,8 +179,8 @@
gap: var(--spacing-s); gap: var(--spacing-s);
} }
.empty { .empty {
font-size: var(--font-size-xs); font-size: var(--spectrum-global-dimension-font-size-75);
margin-top: var(--spacing-m); margin-top: var(--spacing-m);
color: var(--grey-5); color: var(--grey-6);
} }
</style> </style>

16
packages/builder/src/components/settings/ThemeEditor.svelte
View File

@ -5,18 +5,4 @@
let showAdvanced = false let showAdvanced = false
</script> </script>
<div class="content"> <Toggle text="Dark theme" bind:value={$themeStore.darkMode} />
<div>
<Toggle text="Dark theme" bind:value={$themeStore.darkMode} />
</div>
</div>
<style>
.content {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
gap: var(--spacing-l);
}
</style>

8
packages/builder/src/components/start/AppCard.svelte
View File

@ -1,4 +1,4 @@
<script> <script>
import { goto } from "@roxi/routify" import { goto } from "@roxi/routify"
import { ActionButton, Heading, Spacer, Icon } from "@budibase/bbui" import { ActionButton, Heading, Spacer, Icon } from "@budibase/bbui"
import { notifications } from "@budibase/bbui" import { notifications } from "@budibase/bbui"
@ -26,7 +26,7 @@
</script> </script>
<div class="apps-card"> <div class="apps-card">
<Heading s h3>{name}</Heading> <Heading s>{name}</Heading>
<Spacer medium /> <Spacer medium />
<div class="card-footer" data-cy={`app-${name}`}> <div class="card-footer" data-cy={`app-${name}`}>
<ActionButton text medium blue on:click={() => $goto(`/builder/${_id}`)}> <ActionButton text medium blue on:click={() => $goto(`/builder/${_id}`)}>
@ -36,7 +36,9 @@
</ActionButton> </ActionButton>
{#if appExportLoading} {#if appExportLoading}
<Spinner size="10" /> <Spinner size="10" />
{:else}<ActionButton icon="Download" quiet />{/if} {:else}
<ActionButton icon="Download" quiet />
{/if}
</div> </div>
</div> </div>

11
packages/builder/src/components/start/AppList.svelte
View File

@ -19,8 +19,8 @@
</script> </script>
<div class="root"> <div class="root">
<Heading m h2>Your Apps</Heading> <Heading m>Your Apps</Heading>
<Divider s /> <Divider m />
{#await promise} {#await promise}
<div class="spinner-container"> <div class="spinner-container">
<Spinner size="30" /> <Spinner size="30" />
@ -37,11 +37,14 @@
</div> </div>
<style> <style>
.root {
margin-top: 10px;
}
.apps { .apps {
margin-top: var(--spectrum-global-dimension-static-size-150); margin-top: var(--layout-m);
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
grid-gap: var(--layout-m); grid-gap: var(--layout-s);
justify-content: start; justify-content: start;
} }
</style> </style>

38
packages/builder/src/components/start/BuilderSettingsModal.svelte
View File

@ -1,8 +1,15 @@
<script> <script>
import { notifications } from "@budibase/bbui"
import { hostingStore } from "builderStore" import { hostingStore } from "builderStore"
import { HostingTypes } from "constants/backend" import { HostingTypes } from "constants/backend"
import { Input, ModalContent, Toggle } from "@budibase/bbui" import {
Heading,
Divider,
notifications,
Input,
ModalContent,
Toggle,
Body,
} from "@budibase/bbui"
import ThemeEditor from "components/settings/ThemeEditor.svelte" import ThemeEditor from "components/settings/ThemeEditor.svelte"
import analytics from "analytics" import analytics from "analytics"
import { onMount } from "svelte" import { onMount } from "svelte"
@ -52,13 +59,14 @@
</script> </script>
<ModalContent title="Builder settings" confirmText="Save" onConfirm={save}> <ModalContent title="Builder settings" confirmText="Save" onConfirm={save}>
<h5>Theme</h5> <Heading xs>Theme</Heading>
<ThemeEditor /> <ThemeEditor />
<h5>Hosting</h5> <Divider noMargin noGrid />
<p> <Heading xs>Hosting</Heading>
<Body s>
This section contains settings that relate to the deployment and hosting of This section contains settings that relate to the deployment and hosting of
apps made in this builder. apps made in this builder.
</p> </Body>
<Toggle <Toggle
text="Self hosted" text="Self hosted"
on:change={updateSelfHosting} on:change={updateSelfHosting}
@ -68,24 +76,14 @@
<Input bind:value={hostingInfo.selfHostKey} label="Hosting Key" /> <Input bind:value={hostingInfo.selfHostKey} label="Hosting Key" />
<Toggle text="HTTPS" bind:value={hostingInfo.useHttps} /> <Toggle text="HTTPS" bind:value={hostingInfo.useHttps} />
{/if} {/if}
<h5>Analytics</h5> <Divider noMargin noGrid />
<p> <Heading xs>Analytics</Heading>
<Body s>
If you would like to send analytics that help us make budibase better, If you would like to send analytics that help us make budibase better,
please let us know below. please let us know below.
</p> </Body>
<Toggle <Toggle
text="Send Analytics To Budibase" text="Send Analytics To Budibase"
value={!analyticsDisabled} value={!analyticsDisabled}
on:change={toggleAnalytics} /> on:change={toggleAnalytics} />
</ModalContent> </ModalContent>
<style>
h5 {
margin: 0;
font-size: 14px;
}
p {
margin: 0;
font-size: 12px;
}
</style>

27
packages/builder/src/global.css
View File

@ -6,6 +6,10 @@ html, body {
min-height: 100%; min-height: 100%;
} }
.spectrum--light {
--spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-75);
}
body { body {
--background: var(--spectrum-alias-background-color-primary); --background: var(--spectrum-alias-background-color-primary);
--background-alt: var(--spectrum-alias-background-color-secondary); --background-alt: var(--spectrum-alias-background-color-secondary);
@ -24,7 +28,7 @@ body {
font-family: var(--font-sans); font-family: var(--font-sans);
color: var(--ink); color: var(--ink);
background-color: var(--background); background-color: var(--background-alt);
} }
#app { #app {
@ -51,4 +55,25 @@ body {
* + .bb-margin-xl { * + .bb-margin-xl {
margin-top: var(--spacing-xl); margin-top: var(--spacing-xl);
}
/* Custom scrollbars */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--spectrum-alias-background-color-default);
}
::-webkit-scrollbar-thumb {
background-color: var(--spectrum-global-color-gray-400);
border-radius: 4px;
}
::-webkit-scrollbar-corner {
background: var(--spectrum-alias-background-color-default);
}
html * {
scrollbar-width: thin;
scrollbar-color: var(--spectrum-global-color-gray-400)
var(--spectrum-alias-background-color-default);
} }

71
packages/builder/src/pages/builder/[application]/_reset.svelte
View File

@ -1,18 +1,22 @@
<script> <script>
import { store, automationStore } from "builderStore" import { store, automationStore } from "builderStore"
import { roles } from "stores/backend" import { roles } from "stores/backend"
import { Button, ActionGroup, ActionButton, Icon } from "@budibase/bbui" import { Button, ActionGroup, ActionButton, Tabs, Tab } from "@budibase/bbui"
import SettingsLink from "components/settings/Link.svelte" import SettingsLink from "components/settings/Link.svelte"
import ThemeEditorDropdown from "components/settings/ThemeEditorDropdown.svelte" import ThemeEditorDropdown from "components/settings/ThemeEditorDropdown.svelte"
import FeedbackNavLink from "components/feedback/FeedbackNavLink.svelte" import FeedbackNavLink from "components/feedback/FeedbackNavLink.svelte"
import { get } from "builderStore/api" import { get } from "builderStore/api"
import { isActive, goto, layout } from "@roxi/routify" import { isActive, goto, layout, params } from "@roxi/routify"
import Logo from "/assets/bb-logo.svg" import Logo from "/assets/bb-logo.svg"
import { capitalise } from "../../../helpers"
// Get Package and set store // Get Package and set store
export let application export let application
let promise = getPackage() let promise = getPackage()
$: selected = capitalise(
$layout.children.find(layout => $isActive(layout.path))?.title ?? "data"
)
async function getPackage() { async function getPackage() {
const res = await get(`/api/applications/${application}/appPackage`) const res = await get(`/api/applications/${application}/appPackage`)
@ -59,17 +63,20 @@
on:click={() => $goto(`/builder/`)} /> on:click={() => $goto(`/builder/`)} />
</button> </button>
<div class="tabs">
<Tabs {selected}>
{#each $layout.children as { path, title }}
<Tab
quiet
selected={$isActive(path)}
on:click={topItemNavigate(path)}
title={capitalise(title)} />
{/each}
</Tabs>
</div>
<!-- This gets all indexable subroutes and sticks them in the top nav. --> <!-- This gets all indexable subroutes and sticks them in the top nav. -->
<ActionGroup> <ActionGroup />
{#each $layout.children as { path, title }}
<ActionButton
quiet
selected={$isActive(path)}
on:click={topItemNavigate(path)}>
{title}
</ActionButton>
{/each}
</ActionGroup>
</div> </div>
<div class="toprightnav"> <div class="toprightnav">
<ThemeEditorDropdown /> <ThemeEditorDropdown />
@ -127,9 +134,8 @@
.top-nav { .top-nav {
flex: 0 0 auto; flex: 0 0 auto;
height: 60px;
background: var(--background); background: var(--background);
padding: 0 20px; padding: 0 var(--spacing-xl);
display: flex; display: flex;
box-sizing: border-box; box-sizing: border-box;
justify-content: space-between; justify-content: space-between;
@ -146,28 +152,15 @@
.topleftnav { .topleftnav {
display: flex; display: flex;
place-items: center; flex-direction: row;
} justify-content: flex-start;
.topnavitem {
cursor: pointer;
color: var(--grey-5);
margin: 0 0 0 20px;
font-weight: 500;
font-size: var(--font-size-m);
height: 100%;
align-items: center; align-items: center;
box-sizing: border-box;
} }
.topnavitem:hover { .tabs {
color: var(--grey-7); display: flex;
font-weight: 500; position: relative;
} margin-bottom: -1px;
.active {
color: var(--ink);
font-weight: 500;
} }
.topnavitemright a { .topnavitemright a {
@ -192,9 +185,9 @@
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
cursor: pointer; cursor: pointer;
outline: none; outline: none;
height: 40px; padding: 0 10px 0 0;
padding: 0px 10px 8px 0;
align-items: center; align-items: center;
height: 32px;
} }
.home-logo:active { .home-logo:active {
@ -202,10 +195,7 @@
} }
.home-logo img { .home-logo img {
height: 40px; height: 32px;
}
span:first-letter {
text-transform: capitalize;
} }
i { i {
@ -222,4 +212,7 @@
left: var(--spacing-m); left: var(--spacing-m);
z-index: 1; z-index: 1;
} }
.beta :global(button) {
background-color: var(--background);
}
</style> </style>

6
packages/builder/src/pages/builder/[application]/automate/_layout.svelte
View File

@ -21,7 +21,8 @@
<style> <style>
.root { .root {
height: calc(100% - 60px); flex: 1 1 auto;
height: 0;
display: grid; display: grid;
grid-template-columns: 260px minmax(510px, 1fr) 260px; grid-template-columns: 260px minmax(510px, 1fr) 260px;
} }
@ -33,6 +34,8 @@
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
border-right: var(--border-light); border-right: var(--border-light);
background-color: var(--background);
padding-bottom: 60px;
} }
.content { .content {
@ -54,5 +57,6 @@
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
gap: var(--spacing-l); gap: var(--spacing-l);
background-color: var(--background);
} }
</style> </style>

23
packages/builder/src/pages/builder/[application]/data/_layout.svelte
View File

@ -52,7 +52,10 @@
</div> </div>
</Tab> </Tab>
</Tabs> </Tabs>
<div class="add-button" data-cy={`new-${selected === "External" ? "datasource" : "tabel"}`}> <div
class="add-button"
data-cy={`new-${selected === "External" ? "datasource" : "tabel"}`}
>
<Icon hoverable name="AddCircle" on:click={modal.show} /> <Icon hoverable name="AddCircle" on:click={modal.show} />
</div> </div>
</div> </div>
@ -63,10 +66,10 @@
<style> <style>
.root { .root {
height: calc(100vh - 60px); flex: 1 1 auto;
height: 0;
display: grid; display: grid;
grid-template-columns: 260px minmax(0, 1fr); grid-template-columns: 260px minmax(0, 1fr);
background: var(--grey-2);
} }
.content { .content {
@ -78,10 +81,9 @@
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
gap: var(--spacing-l); gap: var(--spacing-l);
background: var(--background);
} }
.tab-content-padding { .tab-content-padding {
padding: 0 var(--spectrum-alias-item-padding-m); padding: 0 var(--spacing-xl);
} }
.nav { .nav {
@ -93,17 +95,12 @@
align-items: stretch; align-items: stretch;
position: relative; position: relative;
border-right: var(--border-light); border-right: var(--border-light);
padding-bottom: 60px;
} }
.add-button { .add-button {
position: absolute; position: absolute;
top: var(--spectrum-alias-item-padding-l); top: var(--spacing-l);
bottom: 0; right: var(--spacing-xl);
right: var(--spectrum-alias-item-padding-l);
}
i:hover {
cursor: pointer;
color: var(--blue);
} }
</style> </style>

25
packages/builder/src/pages/builder/[application]/deploy/index.svelte
View File

@ -1,7 +1,6 @@
<script> <script>
import { Button, Modal } from "@budibase/bbui" import { Button, Modal, notifications, Heading } from "@budibase/bbui"
import { store, hostingStore } from "builderStore" import { store, hostingStore } from "builderStore"
import { notifications } from "@budibase/bbui"
import api from "builderStore/api" import api from "builderStore/api"
import DeploymentHistory from "components/deploy/DeploymentHistory.svelte" import DeploymentHistory from "components/deploy/DeploymentHistory.svelte"
import analytics from "analytics" import analytics from "analytics"
@ -58,11 +57,11 @@
</script> </script>
<section> <section>
<div>
<h4>It's time to shine!</h4>
<Button secondary medium on:click={deployApp}>Deploy App</Button>
</div>
<img src={Rocket} alt="Rocket flying through sky" /> <img src={Rocket} alt="Rocket flying through sky" />
<div>
<Heading m>It's time to shine!</Heading>
<Button size="XL" cta medium on:click={deployApp}>Deploy App</Button>
</div>
</section> </section>
<Modal bind:this={feedbackModal}> <Modal bind:this={feedbackModal}>
<FeedbackIframe on:finished={() => feedbackModal.hide()} /> <FeedbackIframe on:finished={() => feedbackModal.hide()} />
@ -73,17 +72,13 @@
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} object-fit: cover;
filter: brightness(80%);
h4 {
color: white;
font-size: 18px;
font-weight: bold;
margin-bottom: 30px;
} }
section { section {
position: relative; position: relative;
min-height: 100%;
} }
div { div {
@ -99,5 +94,9 @@
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
width: 50%; width: 50%;
gap: var(--spacing-xl);
}
div :global(h1) {
color: white;
} }
</style> </style>

3
packages/builder/src/pages/builder/[application]/design/[assetType]/_layout.svelte
View File

@ -168,7 +168,8 @@
display: grid; display: grid;
grid-template-columns: 260px 1fr 260px; grid-template-columns: 260px 1fr 260px;
align-items: stretch; align-items: stretch;
height: calc(100vh - 60px); flex: 1 1 auto;
height: 0;
} }
.ui-nav { .ui-nav {