Merge branch 'spectrum-bbui' into spectrum/kevins-bits-and-bobs
This commit is contained in:
Keviin Åberg Kultalahti
commit
311d4f9d65
|
|
@ -46,8 +46,4 @@
|
|||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
button.active {
|
||||
color: var(--spectrum-semantic-cta-color-background-default);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
import Icon from '../Icon/Icon.svelte'
|
||||
import Icon from "../Icon/Icon.svelte"
|
||||
import { createEventDispatcher } from "svelte"
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
|
|
@ -58,9 +58,10 @@
|
|||
text-overflow: ellipsis;
|
||||
text-transform: capitalize;
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
}
|
||||
.name.thin {
|
||||
font-size: var(--font-size-xs);
|
||||
font-size: var(--spectrum-global-dimension-font-size-75);
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
|
|
|||
|
|
@ -5,12 +5,25 @@
|
|||
export let s = false
|
||||
|
||||
export let vertical = false
|
||||
export let noMargin = false
|
||||
export let noGrid = false
|
||||
|
||||
$: useDefault = ![l, m, s].includes(true)
|
||||
</script>
|
||||
|
||||
<hr
|
||||
class:noMargin
|
||||
class:noGrid
|
||||
class:spectrum-Divider--sizeL={l}
|
||||
class:spectrum-Divider--sizeM={m || useDefault}
|
||||
class:spectrum-Divider--sizeS={s}
|
||||
class="spectrum-Divider spectrum-Divider--{vertical ? 'vertical' : 'horizontal'} spectrum-Dialog-divider" />
|
||||
|
||||
<style>
|
||||
hr.noMargin {
|
||||
margin: 0;
|
||||
}
|
||||
hr.noGrid {
|
||||
grid-area: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -99,5 +99,8 @@
|
|||
max-height: none;
|
||||
margin: 40px 0;
|
||||
transform: none;
|
||||
--spectrum-dialog-confirm-border-radius: var(
|
||||
--spectrum-global-dimension-size-100
|
||||
);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -84,6 +84,9 @@
|
|||
.spectrum-Dialog-content {
|
||||
overflow: visible;
|
||||
}
|
||||
.spectrum-Dialog-heading {
|
||||
font-family: var(--spectrum-alias-body-text-font-family);
|
||||
}
|
||||
|
||||
.spectrum-Dialog-buttonGroup {
|
||||
gap: var(--spectrum-global-dimension-static-size-200);
|
||||
|
|
|
|||
|
|
@ -42,3 +42,9 @@
|
|||
</div>
|
||||
</Portal>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.spectrum-Popover {
|
||||
min-width: var(--spectrum-global-dimension-size-2000) !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -303,7 +303,7 @@
|
|||
|
||||
<style>
|
||||
.wrapper {
|
||||
background-color: var(--spectrum-alias-background-color-default);
|
||||
background-color: var(--spectrum-alias-background-color-secondary);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
|
@ -313,23 +313,6 @@
|
|||
height: 100%;
|
||||
position: relative;
|
||||
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 {
|
||||
border: none !important;
|
||||
|
|
@ -364,7 +347,7 @@
|
|||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
background-color: var(--spectrum-alias-background-color-default);
|
||||
background-color: var(--spectrum-alias-background-color-secondary);
|
||||
border-bottom: 1px solid
|
||||
var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,35 +1,49 @@
|
|||
<script>
|
||||
import { getContext, onMount } from 'svelte'
|
||||
import Portal from "svelte-portal"
|
||||
export let title
|
||||
export let icon = '';
|
||||
|
||||
const selected = getContext('tab')
|
||||
let tab;
|
||||
let tabInfo
|
||||
const setTabInfo = () => {
|
||||
tabInfo = tab.getBoundingClientRect()
|
||||
if ($selected.title === title) {
|
||||
$selected.info = tabInfo
|
||||
}
|
||||
import { getContext, onMount, createEventDispatcher } from "svelte"
|
||||
import Portal from "svelte-portal"
|
||||
export let title
|
||||
export let icon = ""
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
const selected = getContext("tab")
|
||||
let tab
|
||||
let tabInfo
|
||||
const setTabInfo = () => {
|
||||
tabInfo = tab.getBoundingClientRect()
|
||||
if ($selected.title === title) {
|
||||
$selected.info = tabInfo
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
setTabInfo()
|
||||
})
|
||||
onMount(() => {
|
||||
setTabInfo()
|
||||
})
|
||||
|
||||
const onClick = () => {
|
||||
$selected = { ...$selected, title, info: tab.getBoundingClientRect() }
|
||||
dispatch("click")
|
||||
}
|
||||
</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">
|
||||
{#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
|
||||
bind:this={tab}
|
||||
on:click={onClick}
|
||||
class:is-selected={$selected.title === title}
|
||||
class="spectrum-Tabs-item"
|
||||
tabindex="0">
|
||||
{#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>
|
||||
{#if $selected.title === title}
|
||||
<Portal target=".spectrum-Tabs-content-{$selected.id}">
|
||||
<slot />
|
||||
</Portal>
|
||||
{/if}
|
||||
<Portal target=".spectrum-Tabs-content-{$selected.id}">
|
||||
<slot />
|
||||
</Portal>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -1,71 +1,85 @@
|
|||
<script>
|
||||
import "@spectrum-css/tabs/dist/index-vars.css"
|
||||
import { writable } from 'svelte/store'
|
||||
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;
|
||||
import "@spectrum-css/tabs/dist/index-vars.css"
|
||||
import { writable } from "svelte/store"
|
||||
import { onMount, setContext, createEventDispatcher } from "svelte"
|
||||
|
||||
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
|
||||
$: selected = dispatch('select', selected)
|
||||
let container
|
||||
|
||||
let top, left, width, height;
|
||||
$: calculateIndicatorLength($tab)
|
||||
$: calculateIndicatorOffset($tab)
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
function calculateIndicatorLength() {
|
||||
if (!vertical) {
|
||||
width = $tab.info?.width + 24 + 'px'
|
||||
height = $tab.info?.height
|
||||
} else {
|
||||
height = $tab.info?.height + 4 + 'px'
|
||||
width = $tab.info?.width
|
||||
}
|
||||
$: selected = $tab.title
|
||||
$: selected = dispatch("select", selected)
|
||||
|
||||
let top, left, width, height
|
||||
$: calculateIndicatorLength($tab)
|
||||
$: calculateIndicatorOffset($tab)
|
||||
|
||||
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() {
|
||||
if (!vertical) {
|
||||
left = $tab.info?.left - container?.getBoundingClientRect().left - 12 + 'px'
|
||||
top = $tab.info?.top
|
||||
} else {
|
||||
top = $tab.info?.top - container?.getBoundingClientRect().top + 'px'
|
||||
left = $tab.info?.left
|
||||
}
|
||||
function calculateIndicatorOffset() {
|
||||
if (!vertical) {
|
||||
left = $tab.info?.left - container?.getBoundingClientRect().left + "px"
|
||||
} else {
|
||||
top = $tab.info?.top - container?.getBoundingClientRect().top + "px"
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
calculateIndicatorLength()
|
||||
calculateIndicatorOffset()
|
||||
})
|
||||
}
|
||||
|
||||
function id() {
|
||||
return (
|
||||
"_" +
|
||||
Math.random()
|
||||
.toString(36)
|
||||
.substr(2, 9)
|
||||
)
|
||||
}
|
||||
onMount(() => {
|
||||
calculateIndicatorLength()
|
||||
calculateIndicatorOffset()
|
||||
})
|
||||
|
||||
function id() {
|
||||
return (
|
||||
"_" +
|
||||
Math.random()
|
||||
.toString(36)
|
||||
.substr(2, 9)
|
||||
)
|
||||
}
|
||||
</script>
|
||||
<div bind:this={container} class="selected-border spectrum-Tabs spectrum-Tabs--{vertical ? 'vertical' : 'horizontal'}">
|
||||
<slot />
|
||||
<div class="spectrum-Tabs-selectionIndicator indicator-transition" style="width: {width}; height: {height}; left: {left}; top: {top};"></div>
|
||||
|
||||
<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 class="spectrum-Tabs-content spectrum-Tabs-content-{_id}" />
|
||||
|
||||
<style>
|
||||
.spectrum-Tabs-content {
|
||||
margin-top: var(--spectrum-global-dimension-static-size-150);
|
||||
}
|
||||
.indicator-transition {
|
||||
transition: all 200ms
|
||||
}
|
||||
</style>
|
||||
.spectrum-Tabs {
|
||||
padding-left: var(--spacing-xl);
|
||||
padding-right: var(--spacing-xl);
|
||||
position: relative;
|
||||
border-width: 1px !important;
|
||||
}
|
||||
.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>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
--background: #ffffff;
|
||||
--ink: #000000;
|
||||
|
|
@ -74,7 +45,7 @@ h6.svench-content {
|
|||
--font-bold: "Inter Bold";
|
||||
--font-medium: "Inter Medium";
|
||||
--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",
|
||||
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--font-serif: "Georgia", Cambria, Times New Roman, Times, serif;
|
||||
|
|
@ -125,69 +96,6 @@ h6.svench-content {
|
|||
--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 {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -23,13 +23,12 @@
|
|||
|
||||
<style>
|
||||
.tab-content-padding {
|
||||
padding: 0 var(--spectrum-alias-item-padding-m);
|
||||
padding: 0 var(--spacing-xl);
|
||||
}
|
||||
.add-button {
|
||||
position: absolute;
|
||||
top: var(--spectrum-alias-item-padding-l);
|
||||
bottom: 0;
|
||||
right: var(--spectrum-alias-item-padding-l);
|
||||
top: var(--spacing-l);
|
||||
right: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
@ -39,11 +38,4 @@
|
|||
align-items: stretch;
|
||||
position: relative;
|
||||
}
|
||||
.title i {
|
||||
font-size: 20px;
|
||||
}
|
||||
.title i:hover {
|
||||
cursor: pointer;
|
||||
color: var(--blue);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -97,7 +97,7 @@
|
|||
}
|
||||
|
||||
.block-label {
|
||||
font-size: var(--font-size-xs);
|
||||
font-size: var(--spectrum-global-dimension-font-size-75);
|
||||
font-weight: 500;
|
||||
color: var(--grey-7);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
<script>
|
||||
import { Button, Input } from "@budibase/bbui"
|
||||
import { Button, Input, notifications, Heading } from "@budibase/bbui"
|
||||
import { goto } from "@roxi/routify"
|
||||
import { views as viewsStore } from "stores/backend"
|
||||
import { tables } from "stores/backend"
|
||||
import { notifications } from "@budibase/bbui"
|
||||
import analytics from "analytics"
|
||||
|
||||
export let onClosed
|
||||
|
|
@ -31,7 +30,7 @@
|
|||
</script>
|
||||
|
||||
<div class="actions">
|
||||
<h5>Create View</h5>
|
||||
<Heading s>Create View</Heading>
|
||||
<Input label="View Name" thin bind:value={name} />
|
||||
<div class="footer">
|
||||
<Button secondary on:click={onClosed}>Cancel</Button>
|
||||
|
|
@ -49,6 +48,7 @@
|
|||
display: grid;
|
||||
grid-gap: var(--spacing-xl);
|
||||
padding: var(--spacing-xl);
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
import { Button, Select } from "@budibase/bbui"
|
||||
import { Button, Select, Heading } from "@budibase/bbui"
|
||||
import download from "downloadjs"
|
||||
|
||||
const FORMATS = [
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
</script>
|
||||
|
||||
<div class="popover">
|
||||
<h5>Export Data</h5>
|
||||
<Heading s>Export Data</Heading>
|
||||
<Select
|
||||
label="Format"
|
||||
bind:value={exportFormat}
|
||||
|
|
@ -47,6 +47,7 @@
|
|||
display: grid;
|
||||
grid-gap: var(--spacing-xl);
|
||||
padding: var(--spacing-xl);
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,15 @@
|
|||
<script>
|
||||
import { roles, permissions as permissionsStore } from "stores/backend"
|
||||
import { notifications } from "@budibase/bbui"
|
||||
import { Button, Label, Input, Select, Spacer } from "@budibase/bbui"
|
||||
import {
|
||||
Button,
|
||||
Label,
|
||||
Input,
|
||||
Select,
|
||||
Spacer,
|
||||
notifications,
|
||||
Heading,
|
||||
Body,
|
||||
} from "@budibase/bbui"
|
||||
import { capitalise } from "../../../../helpers"
|
||||
|
||||
export let resourceId
|
||||
|
|
@ -24,11 +32,9 @@
|
|||
</script>
|
||||
|
||||
<div class="popover">
|
||||
<h5>Who Can Access This Data?</h5>
|
||||
<Heading s>Who Can Access This Data?</Heading>
|
||||
<div class="note">
|
||||
<Label extraSmall grey>
|
||||
Specify the minimum access level role for this data.
|
||||
</Label>
|
||||
<Body s>Specify the minimum access level role for this data.</Body>
|
||||
</div>
|
||||
<Spacer large />
|
||||
<div class="row">
|
||||
|
|
@ -74,7 +80,7 @@
|
|||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: var(--spacing-m);
|
||||
grid-gap: var(--spacing-s);
|
||||
}
|
||||
|
||||
.note {
|
||||
|
|
|
|||
|
|
@ -221,7 +221,7 @@
|
|||
margin-top: var(--spacing-m);
|
||||
align-items: center;
|
||||
grid-gap: var(--spacing-m);
|
||||
font-size: var(--font-size-xs);
|
||||
font-size: var(--spectrum-global-dimension-font-size-75);
|
||||
}
|
||||
|
||||
.display-column {
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@
|
|||
|
||||
.title,
|
||||
.subtitle {
|
||||
font-size: var(--font-size-xs);
|
||||
font-size: var(--spectrum-global-dimension-font-size-75);
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
|
|||
|
|
@ -97,7 +97,7 @@
|
|||
.text {
|
||||
flex: 1 1 auto;
|
||||
font-weight: 500;
|
||||
font-size: var(--font-size-xs);
|
||||
font-size: var(--spectrum-global-dimension-font-size-75);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
|
|
|||
|
|
@ -75,7 +75,9 @@
|
|||
} catch (err) {
|
||||
console.error(err)
|
||||
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}
|
||||
<section class="deployment-history" in:slide>
|
||||
<header>
|
||||
<h4>Deployment History</h4>
|
||||
<Heading>Deployment History</Heading>
|
||||
<div class="deploy-div">
|
||||
{#if deployments.some(deployment => deployment.status === DeploymentStatus.SUCCESS)}
|
||||
<a target="_blank" href={deploymentUrl}> View Your Deployed App → </a>
|
||||
|
|
@ -148,13 +150,13 @@
|
|||
</Modal>
|
||||
|
||||
<style>
|
||||
.deployment:nth-child(odd) {
|
||||
background: var(--grey-1);
|
||||
section {
|
||||
padding: var(--spacing-xl) 0;
|
||||
}
|
||||
|
||||
.deployment-list {
|
||||
height: 40vh;
|
||||
overflow-y: scroll;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
h4 {
|
||||
|
|
@ -163,9 +165,10 @@
|
|||
}
|
||||
|
||||
header {
|
||||
margin-left: var(--spacing-l);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
margin-right: var(--spacing-l);
|
||||
padding-left: var(--spacing-l);
|
||||
padding-bottom: var(--spacing-xl);
|
||||
padding-right: var(--spacing-l);
|
||||
border-bottom: var(--border-light);
|
||||
}
|
||||
|
||||
.deploy-div {
|
||||
|
|
@ -183,10 +186,14 @@
|
|||
|
||||
.deployment {
|
||||
padding: var(--spacing-l);
|
||||
height: 100px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: var(--border-light);
|
||||
}
|
||||
.deployment:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.deployment-info {
|
||||
|
|
|
|||
|
|
@ -102,8 +102,8 @@
|
|||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
font-size: var(--font-size-xs);
|
||||
gap: var(--spacing-s);
|
||||
font-size: var(--spectrum-global-dimension-font-size-75);
|
||||
}
|
||||
.category span {
|
||||
font-weight: 500;
|
||||
|
|
|
|||
|
|
@ -26,7 +26,8 @@
|
|||
]
|
||||
|
||||
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 { key } = tabs.find((t) => t.title === detail)
|
||||
|
|
@ -121,9 +122,12 @@
|
|||
}
|
||||
.add-button {
|
||||
position: absolute;
|
||||
top: var(--spectrum-alias-item-padding-l);
|
||||
bottom: 0;
|
||||
right: var(--spectrum-alias-item-padding-l);
|
||||
top: var(--spacing-l);
|
||||
right: var(--spacing-xl);
|
||||
}
|
||||
.title i:hover {
|
||||
cursor: pointer;
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
.role-select {
|
||||
|
|
@ -136,6 +140,6 @@
|
|||
}
|
||||
|
||||
.tab-content-padding {
|
||||
padding: 0 var(--spectrum-alias-item-padding-m);
|
||||
padding: 0 var(--spacing-xl);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script>
|
||||
import { get } from "svelte/store"
|
||||
import { store, selectedComponent, currentAsset } from "builderStore"
|
||||
import { Tabs, Tab } from '@budibase/bbui'
|
||||
import { Tabs, Tab } from "@budibase/bbui"
|
||||
import { FrontendTypes } from "constants"
|
||||
import CategoryTab from "./CategoryTab.svelte"
|
||||
import DesignView from "./DesignView.svelte"
|
||||
|
|
@ -52,12 +52,12 @@
|
|||
<div class="instance-name">{definition.name}</div>
|
||||
{/if}
|
||||
<SettingsView
|
||||
componentInstance={$selectedComponent}
|
||||
componentDefinition={definition}
|
||||
{showDisplayName}
|
||||
onChange={store.actions.components.updateProp}
|
||||
onScreenPropChange={setAssetProps}
|
||||
assetInstance={$store.currentView !== 'component' && $currentAsset} />
|
||||
componentInstance={$selectedComponent}
|
||||
componentDefinition={definition}
|
||||
{showDisplayName}
|
||||
onChange={store.actions.components.updateProp}
|
||||
onScreenPropChange={setAssetProps}
|
||||
assetInstance={$store.currentView !== 'component' && $currentAsset} />
|
||||
</div>
|
||||
</Tab>
|
||||
<Tab title="Design">
|
||||
|
|
@ -66,25 +66,25 @@
|
|||
<div class="instance-name">{definition.name}</div>
|
||||
{/if}
|
||||
<DesignView
|
||||
componentInstance={$selectedComponent}
|
||||
componentDefinition={definition}
|
||||
{onStyleChanged}
|
||||
{onCustomStyleChanged}
|
||||
{onUpdateTransition}
|
||||
{onResetStyles} />
|
||||
componentInstance={$selectedComponent}
|
||||
componentDefinition={definition}
|
||||
{onStyleChanged}
|
||||
{onCustomStyleChanged}
|
||||
{onUpdateTransition}
|
||||
{onResetStyles} />
|
||||
</div>
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
<style>
|
||||
|
||||
.tab-content-padding {
|
||||
padding: 0 var(--spacing-s);
|
||||
padding: 0 var(--spacing-xl);
|
||||
}
|
||||
|
||||
.instance-name {
|
||||
font-size: var(--font-size-xs);
|
||||
margin-bottom: var(--spacing-l);
|
||||
font-size: var(--spectrum-global-dimension-font-size-75);
|
||||
margin-bottom: var(--spacing-m);
|
||||
margin-top: var(--spacing-xs);
|
||||
font-weight: 500;
|
||||
color: var(--grey-7);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
background: var(--background);
|
||||
color: var(--grey-7);
|
||||
border-radius: var(--border-radius-m);
|
||||
font-size: var(--font-size-xs);
|
||||
font-size: var(--spectrum-global-dimension-font-size-75);
|
||||
font-weight: 500;
|
||||
transition: all 0.3s;
|
||||
text-rendering: optimizeLegibility;
|
||||
|
|
|
|||
|
|
@ -179,8 +179,8 @@
|
|||
gap: var(--spacing-s);
|
||||
}
|
||||
.empty {
|
||||
font-size: var(--font-size-xs);
|
||||
font-size: var(--spectrum-global-dimension-font-size-75);
|
||||
margin-top: var(--spacing-m);
|
||||
color: var(--grey-5);
|
||||
color: var(--grey-6);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -5,18 +5,4 @@
|
|||
let showAdvanced = false
|
||||
</script>
|
||||
|
||||
<div class="content">
|
||||
<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>
|
||||
<Toggle text="Dark theme" bind:value={$themeStore.darkMode} />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<script>
|
||||
<script>
|
||||
import { goto } from "@roxi/routify"
|
||||
import { ActionButton, Heading, Spacer, Icon } from "@budibase/bbui"
|
||||
import { notifications } from "@budibase/bbui"
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
</script>
|
||||
|
||||
<div class="apps-card">
|
||||
<Heading s h3>{name}</Heading>
|
||||
<Heading s>{name}</Heading>
|
||||
<Spacer medium />
|
||||
<div class="card-footer" data-cy={`app-${name}`}>
|
||||
<ActionButton text medium blue on:click={() => $goto(`/builder/${_id}`)}>
|
||||
|
|
@ -36,7 +36,9 @@
|
|||
</ActionButton>
|
||||
{#if appExportLoading}
|
||||
<Spinner size="10" />
|
||||
{:else}<ActionButton icon="Download" quiet />{/if}
|
||||
{:else}
|
||||
<ActionButton icon="Download" quiet />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -19,8 +19,8 @@
|
|||
</script>
|
||||
|
||||
<div class="root">
|
||||
<Heading m h2>Your Apps</Heading>
|
||||
<Divider s />
|
||||
<Heading m>Your Apps</Heading>
|
||||
<Divider m />
|
||||
{#await promise}
|
||||
<div class="spinner-container">
|
||||
<Spinner size="30" />
|
||||
|
|
@ -37,11 +37,14 @@
|
|||
</div>
|
||||
|
||||
<style>
|
||||
.root {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.apps {
|
||||
margin-top: var(--spectrum-global-dimension-static-size-150);
|
||||
margin-top: var(--layout-m);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
grid-gap: var(--layout-m);
|
||||
grid-gap: var(--layout-s);
|
||||
justify-content: start;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,15 @@
|
|||
<script>
|
||||
import { notifications } from "@budibase/bbui"
|
||||
import { hostingStore } from "builderStore"
|
||||
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 analytics from "analytics"
|
||||
import { onMount } from "svelte"
|
||||
|
|
@ -52,13 +59,14 @@
|
|||
</script>
|
||||
|
||||
<ModalContent title="Builder settings" confirmText="Save" onConfirm={save}>
|
||||
<h5>Theme</h5>
|
||||
<Heading xs>Theme</Heading>
|
||||
<ThemeEditor />
|
||||
<h5>Hosting</h5>
|
||||
<p>
|
||||
<Divider noMargin noGrid />
|
||||
<Heading xs>Hosting</Heading>
|
||||
<Body s>
|
||||
This section contains settings that relate to the deployment and hosting of
|
||||
apps made in this builder.
|
||||
</p>
|
||||
</Body>
|
||||
<Toggle
|
||||
text="Self hosted"
|
||||
on:change={updateSelfHosting}
|
||||
|
|
@ -68,24 +76,14 @@
|
|||
<Input bind:value={hostingInfo.selfHostKey} label="Hosting Key" />
|
||||
<Toggle text="HTTPS" bind:value={hostingInfo.useHttps} />
|
||||
{/if}
|
||||
<h5>Analytics</h5>
|
||||
<p>
|
||||
<Divider noMargin noGrid />
|
||||
<Heading xs>Analytics</Heading>
|
||||
<Body s>
|
||||
If you would like to send analytics that help us make budibase better,
|
||||
please let us know below.
|
||||
</p>
|
||||
</Body>
|
||||
<Toggle
|
||||
text="Send Analytics To Budibase"
|
||||
value={!analyticsDisabled}
|
||||
on:change={toggleAnalytics} />
|
||||
</ModalContent>
|
||||
|
||||
<style>
|
||||
h5 {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,10 @@ html, body {
|
|||
min-height: 100%;
|
||||
}
|
||||
|
||||
.spectrum--light {
|
||||
--spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-75);
|
||||
}
|
||||
|
||||
body {
|
||||
--background: var(--spectrum-alias-background-color-primary);
|
||||
--background-alt: var(--spectrum-alias-background-color-secondary);
|
||||
|
|
@ -24,7 +28,7 @@ body {
|
|||
|
||||
font-family: var(--font-sans);
|
||||
color: var(--ink);
|
||||
background-color: var(--background);
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
|
||||
#app {
|
||||
|
|
@ -51,4 +55,25 @@ body {
|
|||
|
||||
* + .bb-margin-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);
|
||||
}
|
||||
|
|
@ -1,18 +1,22 @@
|
|||
<script>
|
||||
import { store, automationStore } from "builderStore"
|
||||
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 ThemeEditorDropdown from "components/settings/ThemeEditorDropdown.svelte"
|
||||
import FeedbackNavLink from "components/feedback/FeedbackNavLink.svelte"
|
||||
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 { capitalise } from "../../../helpers"
|
||||
|
||||
// Get Package and set store
|
||||
export let application
|
||||
|
||||
let promise = getPackage()
|
||||
$: selected = capitalise(
|
||||
$layout.children.find(layout => $isActive(layout.path))?.title ?? "data"
|
||||
)
|
||||
|
||||
async function getPackage() {
|
||||
const res = await get(`/api/applications/${application}/appPackage`)
|
||||
|
|
@ -59,17 +63,20 @@
|
|||
on:click={() => $goto(`/builder/`)} />
|
||||
</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. -->
|
||||
<ActionGroup>
|
||||
{#each $layout.children as { path, title }}
|
||||
<ActionButton
|
||||
quiet
|
||||
selected={$isActive(path)}
|
||||
on:click={topItemNavigate(path)}>
|
||||
{title}
|
||||
</ActionButton>
|
||||
{/each}
|
||||
</ActionGroup>
|
||||
<ActionGroup />
|
||||
</div>
|
||||
<div class="toprightnav">
|
||||
<ThemeEditorDropdown />
|
||||
|
|
@ -127,9 +134,8 @@
|
|||
|
||||
.top-nav {
|
||||
flex: 0 0 auto;
|
||||
height: 60px;
|
||||
background: var(--background);
|
||||
padding: 0 20px;
|
||||
padding: 0 var(--spacing-xl);
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
justify-content: space-between;
|
||||
|
|
@ -146,28 +152,15 @@
|
|||
|
||||
.topleftnav {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.topnavitem {
|
||||
cursor: pointer;
|
||||
color: var(--grey-5);
|
||||
margin: 0 0 0 20px;
|
||||
font-weight: 500;
|
||||
font-size: var(--font-size-m);
|
||||
height: 100%;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.topnavitem:hover {
|
||||
color: var(--grey-7);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: var(--ink);
|
||||
font-weight: 500;
|
||||
.tabs {
|
||||
display: flex;
|
||||
position: relative;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
.topnavitemright a {
|
||||
|
|
@ -192,9 +185,9 @@
|
|||
background-color: rgba(0, 0, 0, 0);
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
height: 40px;
|
||||
padding: 0px 10px 8px 0;
|
||||
padding: 0 10px 0 0;
|
||||
align-items: center;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.home-logo:active {
|
||||
|
|
@ -202,10 +195,7 @@
|
|||
}
|
||||
|
||||
.home-logo img {
|
||||
height: 40px;
|
||||
}
|
||||
span:first-letter {
|
||||
text-transform: capitalize;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
i {
|
||||
|
|
@ -222,4 +212,7 @@
|
|||
left: var(--spacing-m);
|
||||
z-index: 1;
|
||||
}
|
||||
.beta :global(button) {
|
||||
background-color: var(--background);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,8 @@
|
|||
|
||||
<style>
|
||||
.root {
|
||||
height: calc(100% - 60px);
|
||||
flex: 1 1 auto;
|
||||
height: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 260px minmax(510px, 1fr) 260px;
|
||||
}
|
||||
|
|
@ -33,6 +34,8 @@
|
|||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
border-right: var(--border-light);
|
||||
background-color: var(--background);
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
.content {
|
||||
|
|
@ -54,5 +57,6 @@
|
|||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
gap: var(--spacing-l);
|
||||
background-color: var(--background);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -52,7 +52,10 @@
|
|||
</div>
|
||||
</Tab>
|
||||
</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} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -63,10 +66,10 @@
|
|||
|
||||
<style>
|
||||
.root {
|
||||
height: calc(100vh - 60px);
|
||||
flex: 1 1 auto;
|
||||
height: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 260px minmax(0, 1fr);
|
||||
background: var(--grey-2);
|
||||
}
|
||||
|
||||
.content {
|
||||
|
|
@ -78,10 +81,9 @@
|
|||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
gap: var(--spacing-l);
|
||||
background: var(--background);
|
||||
}
|
||||
.tab-content-padding {
|
||||
padding: 0 var(--spectrum-alias-item-padding-m);
|
||||
padding: 0 var(--spacing-xl);
|
||||
}
|
||||
|
||||
.nav {
|
||||
|
|
@ -93,17 +95,12 @@
|
|||
align-items: stretch;
|
||||
position: relative;
|
||||
border-right: var(--border-light);
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
.add-button {
|
||||
position: absolute;
|
||||
top: var(--spectrum-alias-item-padding-l);
|
||||
bottom: 0;
|
||||
right: var(--spectrum-alias-item-padding-l);
|
||||
}
|
||||
|
||||
i:hover {
|
||||
cursor: pointer;
|
||||
color: var(--blue);
|
||||
top: var(--spacing-l);
|
||||
right: var(--spacing-xl);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<script>
|
||||
import { Button, Modal } from "@budibase/bbui"
|
||||
import { Button, Modal, notifications, Heading } from "@budibase/bbui"
|
||||
import { store, hostingStore } from "builderStore"
|
||||
import { notifications } from "@budibase/bbui"
|
||||
import api from "builderStore/api"
|
||||
import DeploymentHistory from "components/deploy/DeploymentHistory.svelte"
|
||||
import analytics from "analytics"
|
||||
|
|
@ -58,11 +57,11 @@
|
|||
</script>
|
||||
|
||||
<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" />
|
||||
<div>
|
||||
<Heading m>It's time to shine!</Heading>
|
||||
<Button size="XL" cta medium on:click={deployApp}>Deploy App</Button>
|
||||
</div>
|
||||
</section>
|
||||
<Modal bind:this={feedbackModal}>
|
||||
<FeedbackIframe on:finished={() => feedbackModal.hide()} />
|
||||
|
|
@ -73,17 +72,13 @@
|
|||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 30px;
|
||||
object-fit: cover;
|
||||
filter: brightness(80%);
|
||||
}
|
||||
|
||||
section {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
div {
|
||||
|
|
@ -99,5 +94,9 @@
|
|||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 50%;
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
div :global(h1) {
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -168,7 +168,8 @@
|
|||
display: grid;
|
||||
grid-template-columns: 260px 1fr 260px;
|
||||
align-items: stretch;
|
||||
height: calc(100vh - 60px);
|
||||
flex: 1 1 auto;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.ui-nav {
|
||||
|
|
|
|||
Loading…
Reference in New Issue