Merge branch 'spectrum-bbui' into spectrum/kevs-bits-and-bobs-the-sequel

This commit is contained in:
Keviin Åberg Kultalahti 2021-04-28 15:09:32 +02:00
commit e63e2b369a
20 changed files with 170 additions and 226 deletions

View File

@ -41,14 +41,12 @@
class="spectrum-ActionButton spectrum-ActionButton--size{size}"
{disabled}
on:longPress
on:click|preventDefault
>
on:click|preventDefault>
{#if longPressable}
<svg
class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold"
focusable="false"
aria-hidden="true"
>
aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CornerTriangle100" />
</svg>
{/if}
@ -57,8 +55,7 @@
class="spectrum-Icon spectrum-Icon--size{size}"
focusable="false"
aria-hidden="true"
aria-label={icon}
>
aria-label={icon}>
<use xlink:href="#spectrum-icon-18-{icon}" />
</svg>
{/if}
@ -66,9 +63,3 @@
<span class="spectrum-ActionButton-label"><slot /></span>
{/if}
</button>
<style>
span {
text-transform: capitalize;
}
</style>

View File

@ -28,7 +28,7 @@
setContext("actionMenu", { show, hide })
</script>
<div class="contents" use:getAnchor on:click={openMenu}>
<div use:getAnchor on:click={openMenu}>
<slot name="control" />
</div>
<Popover bind:this={dropdown} {anchor} align="left">
@ -36,9 +36,3 @@
<slot />
</Menu>
</Popover>
<style>
div {
display: contents;
}
</style>

View File

@ -3,14 +3,25 @@ import { localStorageStore } from "./localStorage"
export const getThemeStore = () => {
const themeElement = document.documentElement
const initialValue = {
darkMode: true,
theme: "darkest",
options: ["lightest", "light", "dark", "darkest"],
}
const store = localStorageStore("bb-theme", initialValue)
// Update theme when store changes
store.subscribe(theme => {
themeElement.classList.toggle("spectrum--darkest", theme.darkMode)
themeElement.classList.toggle("spectrum--lightest", !theme.darkMode)
// Update theme class when store changes
store.subscribe(state => {
// Handle any old local storage values - this can be removed after the update
if (state.darkMode !== undefined) {
store.set(initialValue)
return
}
state.options.forEach(option => {
themeElement.classList.toggle(
`spectrum--${option}`,
option === state.theme
)
})
})
return store

View File

@ -57,7 +57,7 @@
<CreateColumnButton />
{#if schema && Object.keys(schema).length > 0}
<CreateRowButton
title={isUsersTable ? 'Create New User' : 'Create New Row'}
title={isUsersTable ? 'Create user' : 'Create row'}
modalContentComponent={isUsersTable ? CreateEditUser : CreateEditRow} />
<CreateViewButton />
<ManageAccessButton resourceId={$tables.selected?._id} />

View File

@ -1,5 +1,5 @@
<script>
import { Modal, Button } from "@budibase/bbui"
import { Modal, ActionButton } from "@budibase/bbui"
import CalculateModal from "../modals/CalculateModal.svelte"
export let view = {}
@ -7,15 +7,14 @@
let modal
</script>
<Button
<ActionButton
icon="Calculator"
primary
size="S"
quiet
on:click={modal.show}
active={view.field && view.calculation}>
Calculate
</Button>
</ActionButton>
<Modal bind:this={modal}>
<CalculateModal {view} />
</Modal>

View File

@ -1,13 +1,13 @@
<script>
import { Button, Icon, Modal, ModalContent } from "@budibase/bbui"
import { ActionButton, Modal } from "@budibase/bbui"
import CreateEditColumn from "../modals/CreateEditColumn.svelte"
let modal
</script>
<Button icon="AddCircle" primary size="S" quiet on:click={modal.show}>
Create New Column
</Button>
<ActionButton icon="TableColumnAddRight" quiet size="S" on:click={modal.show}>
Create column
</ActionButton>
<Modal bind:this={modal}>
<CreateEditColumn />
</Modal>

View File

@ -1,16 +1,16 @@
<script>
import { Button, Icon, Modal } from "@budibase/bbui"
import { ActionButton, Modal } from "@budibase/bbui"
import CreateEditRow from "../modals/CreateEditRow.svelte"
export let modalContentComponent = CreateEditRow
export let title = "Create New Row"
export let title = "Create row"
let modal
</script>
<Button icon="Add" primary size="S" quiet on:click={modal.show}>
<ActionButton icon="TableRowAddBottom" size="S" quiet on:click={modal.show}>
{title}
</Button>
</ActionButton>
<Modal bind:this={modal}>
<svelte:component this={modalContentComponent} />
</Modal>

View File

@ -1,13 +1,13 @@
<script>
import { Modal, Button } from "@budibase/bbui"
import { Modal, ActionButton } from "@budibase/bbui"
import CreateViewModal from "../modals/CreateViewModal.svelte"
let modal
</script>
<Button icon="CollectionAdd" primary size="S" quiet on:click={modal.show}>
Create New View
</Button>
<ActionButton icon="CollectionAdd" size="S" quiet on:click={modal.show}>
Create view
</ActionButton>
<Modal bind:this={modal}>
<CreateViewModal />
</Modal>

View File

@ -1,5 +1,5 @@
<script>
import { Button, Modal } from "@budibase/bbui"
import { ActionButton, Modal } from "@budibase/bbui"
import ExportModal from "../modals/ExportModal.svelte"
export let view
@ -7,9 +7,9 @@
let modal
</script>
<Button icon="Download" primary size="S" quiet on:click={modal.show}>
<ActionButton icon="Download" size="S" quiet on:click={modal.show}>
Export
</Button>
</ActionButton>
<Modal bind:this={modal}>
<ExportModal {view} />
</Modal>

View File

@ -1,5 +1,5 @@
<script>
import { Button, Modal } from "@budibase/bbui"
import { ActionButton, Modal } from "@budibase/bbui"
import FilterModal from "../modals/FilterModal.svelte"
export let view = {}
@ -7,15 +7,14 @@
let modal
</script>
<Button
<ActionButton
icon="Filter"
primary
size="S"
quiet
on:click={modal.show}
active={view.filters?.length}>
Filter
</Button>
</ActionButton>
<Modal bind:this={modal}>
<FilterModal {view} />
</Modal>

View File

@ -1,28 +1,13 @@
<script>
import { Button } from "@budibase/bbui"
import { ActionButton } from "@budibase/bbui"
export let hideAutocolumns
let anchor
let dropdown
function hideOrUnhide() {
hideAutocolumns = !hideAutocolumns
}
</script>
<div bind:this={anchor}>
<Button icon="MagicWand" primary size="S" quiet on:click={hideOrUnhide}>
{#if hideAutocolumns}
Show Auto Columns
{:else}
Hide Auto Columns
{/if}
</Button>
</div>
<style>
i {
margin-right: 4px;
}
</style>
<ActionButton icon="MagicWand" primary size="S" quiet on:click={hideOrUnhide}>
{#if hideAutocolumns}Show auto columns{:else}Hide auto columns{/if}
</ActionButton>

View File

@ -1,5 +1,5 @@
<script>
import { Button, Modal } from "@budibase/bbui"
import { ActionButton, Modal } from "@budibase/bbui"
import { permissions } from "stores/backend"
import ManageAccessModal from "../modals/ManageAccessModal.svelte"
@ -14,9 +14,9 @@
}
</script>
<Button icon="LockClosed" primary size="S" quiet on:click={openDropdown}>
Manage Access
</Button>
<ActionButton icon="LockClosed" size="S" quiet on:click={openDropdown}>
Manage access
</ActionButton>
<Modal bind:this={modal}>
<ManageAccessModal
{resourceId}

View File

@ -34,11 +34,10 @@
{#each $tables.list as table, idx}
<NavItem
border={idx > 0}
icon={table._id === TableNames.USERS ? "UserGroup" : "Table"}
icon={table._id === TableNames.USERS ? 'UserGroup' : 'Table'}
text={table.name}
selected={selectedView === `all_${table._id}`}
on:click={() => selectTable(table)}
>
on:click={() => selectTable(table)}>
{#if table._id !== TableNames.USERS}
<EditTablePopover {table} />
{/if}
@ -46,14 +45,12 @@
{#each Object.keys(table.views || {}) as viewName, idx (idx)}
<NavItem
indentLevel={1}
icon="ri-eye-line"
icon="Remove"
text={viewName}
selected={selectedView === viewName}
on:click={() => onClickView(table, viewName)}
>
on:click={() => onClickView(table, viewName)}>
<EditViewPopover
view={{ name: viewName, ...table.views[viewName] }}
/>
view={{ name: viewName, ...table.views[viewName] }} />
</NavItem>
{/each}
{/each}

View File

@ -1,40 +1,30 @@
<script>
import { goto } from "@roxi/routify"
import { views } from "stores/backend"
import { notifications } from "@budibase/bbui"
import { Icon, Popover, Button, Input } from "@budibase/bbui"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
import {
notifications,
Icon,
Input,
ActionMenu,
MenuItem,
Modal,
ModalContent,
} from "@budibase/bbui"
export let view
let anchor
let dropdown
let editing
let editorModal
let confirmDeleteDialogue
let originalName = view.name
let confirmDeleteDialog
function showEditor() {
editing = true
}
function hideEditor() {
dropdown.hide()
editing = false
}
function showDelete() {
dropdown.hide()
confirmDeleteDialog.show()
}
async function save() {
await views.save({
originalName,
...view,
})
notifications.success("View renamed successfully")
hideEditor()
}
async function deleteView() {
@ -46,69 +36,21 @@
}
</script>
<div on:click|stopPropagation>
<div bind:this={anchor} class="icon" on:click={dropdown.show}>
<ActionMenu>
<div slot="control" class="icon">
<Icon s hoverable name="MoreSmallList" />
</div>
<Popover align="left" {anchor} bind:this={dropdown}>
{#if editing}
<div class="actions">
<h5>Edit View</h5>
<Input label="View Name" thin bind:value={view.name} />
<footer>
<Button secondary on:click={hideEditor}>Cancel</Button>
<Button primary on:click={save}>Save</Button>
</footer>
</div>
{:else}
<DropdownContainer>
<DropdownItem
icon="ri-edit-line"
data-cy="edit-view"
title="Edit"
on:click={showEditor}
/>
<DropdownItem
icon="ri-delete-bin-line"
title="Delete"
data-cy="delete-view"
on:click={showDelete}
/>
</DropdownContainer>
{/if}
</Popover>
</div>
<MenuItem icon="Edit" on:click={editorModal.show}>Edit</MenuItem>
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
</ActionMenu>
<Modal bind:this={editorModal}>
<ModalContent title="Edit View" onConfirm={save} confirmText="Save">
<Input label="View Name" thin bind:value={view.name} />
</ModalContent>
</Modal>
<ConfirmDialog
bind:this={confirmDeleteDialog}
body={`Are you sure you wish to delete the view '${view.name}'? Your data will be deleted and this action cannot be undone.`}
okText="Delete View"
onOk={deleteView}
title="Confirm Deletion"
/>
<style>
div.icon {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
.actions {
padding: var(--spacing-xl);
display: grid;
grid-gap: var(--spacing-xl);
min-width: 400px;
}
h5 {
margin: 0;
font-weight: 500;
}
footer {
display: flex;
justify-content: flex-end;
gap: var(--spacing-m);
}
</style>
title="Confirm Deletion" />

View File

@ -1,5 +1,5 @@
<script>
import { Modal, ModalContent } from "@budibase/bbui"
import { Modal, ModalContent, Body } from "@budibase/bbui"
export let title = ""
export let body = ""
@ -20,15 +20,9 @@
<Modal bind:this={modal} on:hide={onCancel}>
<ModalContent onConfirm={onOk} {title} confirmText={okText} {cancelText} red>
<div class="body">
<Body s>
{body}
<slot />
</div>
</Body>
</ModalContent>
</Modal>
<style>
.body {
font-size: var(--font-size-s);
}
</style>

View File

@ -4,6 +4,7 @@
ActionGroup,
ActionButton,
MenuItem,
Icon,
} from "@budibase/bbui"
import { store, currentAssetName } from "builderStore"
import structure from "./componentStructure.json"
@ -12,7 +13,7 @@
const enrichStructure = (structure, definitions) => {
let enrichedStructure = []
structure.forEach((item) => {
structure.forEach(item => {
if (typeof item === "string") {
const def = definitions[`@budibase/standard-components/${item}`]
if (def) {
@ -32,37 +33,65 @@
return enrichedStructure
}
const onItemChosen = async (item) => {
const onItemChosen = async item => {
if (!item.isCategory) {
// Add this component
await store.actions.components.create(item.component)
}
}
</script>
<ActionGroup>
<div class="components">
{#each enrichedStructure as item}
<ActionMenu disabled={!item.isCategory}>
<ActionButton
icon={item.icon}
primary
quiet
size="S"
slot="control"
on:click={() => onItemChosen(item)}
>
{item.name}
on:click={() => onItemChosen(item)}>
<div class="buttonContent">
{item.name}
{#if item.isCategory}
<Icon size="S" name="ChevronDown" />
{/if}
</div>
</ActionButton>
{#each item.children || [] as item}
{#if !item.showOnAsset || item.showOnAsset.includes($currentAssetName)}
<MenuItem
dataCy={`component-${item.name}`}
icon={item.icon}
on:click={() => onItemChosen(item)}
>
on:click={() => onItemChosen(item)}>
{item.name}
</MenuItem>
{/if}
{/each}
</ActionMenu>
{/each}
</ActionGroup>
</div>
<style>
.components {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
margin-top: -10px;
}
.components :global(> *) {
margin-top: 10px;
}
.buttonContent {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-end;
}
.buttonContent :global(svg) {
margin-left: 2px !important;
margin-right: 0 !important;
margin-bottom: -1px;
}
</style>

View File

@ -7,7 +7,7 @@
"search",
{
"name": "Form",
"icon": "ri-file-edit-line",
"icon": "Form",
"children": [
"form",
"fieldgroup",
@ -24,7 +24,7 @@
},
{
"name": "Card",
"icon": "ri-archive-drawer-line",
"icon": "Card",
"children": [
"stackedlist",
"card",
@ -34,7 +34,7 @@
},
{
"name": "Chart",
"icon": "ri-bar-chart-2-line",
"icon": "GraphBarVertical",
"children": [
"bar",
"line",
@ -46,7 +46,7 @@
},
{
"name": "Elements",
"icon": "ri-paragraph",
"icon": "TextParagraph",
"children": [
"heading",
"text",
@ -59,7 +59,7 @@
},
{
"name": "Other",
"icon": "ri-more-2-line",
"icon": "More",
"children": [
"screenslot",
"navigation",

View File

@ -1,8 +1,11 @@
<script>
import { themeStore } from "builderStore"
import { Toggle } from "@budibase/bbui"
let showAdvanced = false
import { Select } from "@budibase/bbui"
import { capitalise } from "../../helpers"
</script>
<Toggle text="Dark theme" bind:value={$themeStore.darkMode} />
<Select
options={$themeStore.options}
bind:value={$themeStore.theme}
placeholder={null}
getOptionLabel={capitalise} />

View File

@ -44,7 +44,7 @@
<style>
.apps-card {
background-color: var(--background-alt);
background-color: var(--background);
padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-xl)
var(--spacing-xl);
max-width: 300px;

View File

@ -2,7 +2,7 @@
"container": {
"name": "Container",
"description": "This component contains things within itself",
"icon": "ri-layout-column-line",
"icon": "Sandbox",
"hasChildren": true,
"styleable": true,
"transitionable": true,
@ -10,14 +10,14 @@
},
"screenslot": {
"name": "Screenslot",
"icon": "ri-artboard-2-line",
"icon": "WebPage",
"description": "Contains your app screens",
"styleable": true
},
"button": {
"name": "Button",
"description": "A basic html button that is ready for styling",
"icon": "ri-share-box-line",
"icon": "Button",
"styleable": true,
"settings": [
{
@ -40,7 +40,7 @@
"repeater": {
"name": "Repeater",
"description": "A configurable data list that attaches to your backend tables.",
"icon": "ri-list-check-2",
"icon": "ViewList",
"styleable": true,
"hasChildren": true,
"settings": [
@ -68,7 +68,7 @@
"search": {
"name": "Search",
"description": "A searchable list of items.",
"icon": "ri-search-line",
"icon": "Search",
"styleable": true,
"hasChildren": true,
"settings": [
@ -101,7 +101,7 @@
}
},
"stackedlist": {
"name": "Stacked List",
"name": "TaskList",
"icon": "ri-archive-drawer-line",
"description": "A basic card component that can contain content and actions.",
"styleable": true,
@ -132,7 +132,7 @@
"card": {
"name": "Vertical Card",
"description": "A basic card component that can contain content and actions.",
"icon": "ri-layout-column-line",
"icon": "ViewColumn",
"styleable": true,
"settings": [
{
@ -192,7 +192,7 @@
"text": {
"name": "Paragraph",
"description": "A component for displaying paragraph text.",
"icon": "ri-paragraph",
"icon": "TextParagraph",
"styleable": true,
"settings": [
{
@ -204,7 +204,7 @@
},
"heading": {
"name": "Headline",
"icon": "ri-heading",
"icon": "TextBold",
"description": "A component for displaying heading text",
"styleable": true,
"settings": [
@ -225,7 +225,7 @@
"image": {
"name": "Image",
"description": "A basic component for displaying images",
"icon": "ri-image-line",
"icon": "Image",
"styleable": true,
"settings": [
{
@ -238,7 +238,7 @@
"backgroundimage": {
"name": "Background Image",
"description": "A background image",
"icon": "ri-image-line",
"icon": "Images",
"styleable": true,
"settings": [
{
@ -295,7 +295,7 @@
"icon": {
"name": "Icon",
"description": "A basic component for displaying icons",
"icon": "ri-sun-fill",
"icon": "Bell",
"styleable": true,
"settings": [
{
@ -342,7 +342,7 @@
"login": {
"name": "Login Form",
"description": "A component that automatically generates a login screen for your app.",
"icon": "ri-login-box-line",
"icon": "Login",
"styleable": true,
"settings": [
{
@ -365,7 +365,7 @@
"navigation": {
"name": "Nav Bar",
"description": "A component for handling the navigation within your app.",
"icon": "ri-navigation-line",
"icon": "BreadcrumbNavigation",
"styleable": true,
"hasChildren": true,
"settings": [
@ -379,7 +379,7 @@
"link": {
"name": "Link",
"description": "A basic link component for internal and external links",
"icon": "ri-link",
"icon": "Link",
"styleable": true,
"settings": [
{
@ -408,7 +408,7 @@
"cardhorizontal": {
"name": "Horizontal Card",
"description": "A basic card component that can contain content and actions.",
"icon": "ri-layout-row-line",
"icon": "ViewRow",
"styleable": true,
"settings": [
{
@ -480,7 +480,7 @@
"cardstat": {
"name": "Stat Card",
"description": "A card component for displaying numbers.",
"icon": "ri-dual-sim-2-line",
"icon": "Card",
"styleable": true,
"settings": [
{
@ -505,7 +505,7 @@
},
"embed": {
"name": "Embed",
"icon": "ri-code-line",
"icon": "Code",
"description": "Embed content from 3rd party sources",
"styleable": true,
"settings": [
@ -519,7 +519,7 @@
"bar": {
"name": "Bar Chart",
"description": "Bar chart",
"icon": "ri-bar-chart-line",
"icon": "GraphBarVertical",
"styleable": true,
"settings": [
{
@ -619,7 +619,7 @@
"line": {
"name": "Line Chart",
"description": "Line chart",
"icon": "ri-line-chart-line",
"icon": "GraphTrend",
"styleable": true,
"settings": [
{
@ -720,7 +720,7 @@
"area": {
"name": "Area Chart",
"description": "Line chart",
"icon": "ri-line-chart-fill",
"icon": "GraphAreaStacked",
"styleable": true,
"settings": [
{
@ -833,7 +833,7 @@
"pie": {
"name": "Pie Chart",
"description": "Pie chart",
"icon": "ri-pie-chart-line",
"icon": "GraphPie",
"styleable": true,
"settings": [
{
@ -910,7 +910,7 @@
"donut": {
"name": "Donut Chart",
"description": "Donut chart",
"icon": "ri-donut-chart-line",
"icon": "GraphDonut",
"styleable": true,
"settings": [
{
@ -987,7 +987,7 @@
"candlestick": {
"name": "Candlestick Chart",
"description": "Candlestick chart",
"icon": "ri-stock-line",
"icon": "GraphBarVerticalStacked",
"styleable": true,
"settings": [
{
@ -1068,7 +1068,7 @@
},
"form": {
"name": "Form",
"icon": "ri-file-text-line",
"icon": "Form",
"styleable": true,
"hasChildren": true,
"actions": [
@ -1133,7 +1133,7 @@
},
"fieldgroup": {
"name": "Field Group",
"icon": "ri-layout-row-line",
"icon": "Group",
"styleable": true,
"hasChildren": true,
"settings": [
@ -1161,7 +1161,7 @@
},
"stringfield": {
"name": "Text Field",
"icon": "ri-t-box-line",
"icon": "Text",
"styleable": true,
"settings": [
{
@ -1189,7 +1189,7 @@
},
"numberfield": {
"name": "Number Field",
"icon": "ri-edit-box-line",
"icon": "123",
"styleable": true,
"settings": [
{
@ -1217,7 +1217,7 @@
},
"passwordfield": {
"name": "Password Field",
"icon": "ri-lock-password-line",
"icon": "LockClosed",
"styleable": true,
"settings": [
{
@ -1245,7 +1245,7 @@
},
"optionsfield": {
"name": "Options Picker",
"icon": "ri-file-list-line",
"icon": "ViewList",
"styleable": true,
"settings": [
{
@ -1274,7 +1274,7 @@
},
"booleanfield": {
"name": "Checkbox",
"icon": "ri-checkbox-line",
"icon": "Checkmark",
"styleable": true,
"settings": [
{
@ -1302,7 +1302,7 @@
},
"longformfield": {
"name": "Rich Text",
"icon": "ri-file-edit-line",
"icon": "TextParagraph",
"styleable": true,
"settings": [
{
@ -1331,7 +1331,7 @@
},
"datetimefield": {
"name": "Date Picker",
"icon": "ri-calendar-line",
"icon": "DateInput",
"styleable": true,
"settings": [
{
@ -1365,7 +1365,7 @@
},
"attachmentfield": {
"name": "Attachment",
"icon": "ri-image-edit-line",
"icon": "Attach",
"styleable": true,
"settings": [
{
@ -1388,7 +1388,7 @@
},
"relationshipfield": {
"name": "Relationship Picker",
"icon": "ri-links-line",
"icon": "TaskList",
"styleable": true,
"settings": [
{
@ -1416,7 +1416,7 @@
},
"dataprovider": {
"name": "Data Provider",
"icon": "ri-database-2-line",
"icon": "Data",
"styleable": false,
"hasChildren": true,
"settings": [
@ -1476,7 +1476,7 @@
},
"table": {
"name": "Table",
"icon": "ri-table-line",
"icon": "Table",
"styleable": true,
"hasChildren": true,
"settings": [