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

Onboarding core components (#9412) 

* Update BB logo to black

* Update top nav bar and core layout

* Add redesign for apps pages

* Update user and groups pages

* More WIP portal redesign!

* Fix top nav colours and fix selected tab not updating

* Remove log

* Update copy on settings pages

* Update and standardise page headers and subtitles, and remove side nav titles

* Update font styles to allow for easy customisation

* Update button styles to always use newStyles, update auth page styles

* Update settings pages to new designs

* Update structure for account pages

* Add initial rewrite of app overview section

* Update config checklist to properly center

* Update app overview version and name/url screens

* Add tooltip to explain why URL cannot be changed until unpublishing

* Update overview automation history tab

* Update overview backups page

* Rewrite app overview access tab

* Update table hover colours

* Remove scrolling from tables when not required and stop selects from updating their own state locally

* Update table styles to support flexible column widths much better

* Fix extremely long strings in breadcrumbs not wrapping

* Fix multiple issues with long text overflow

* Fix flashing in version settings page

* Fix loading bugs in app backups page

* Add sidebar for portal and use it for automation history. Fix multiple overflow and scrolling issues

* Tidy up

* Update user details page to use tables and match designs

* Update users detail page

* Update user and group details pages with new tables

* Fix automation error linking from apps page and improve automation fetching logic in automation history

* Move theme and API key into user profile dropdown instead of settings

* Move settings before account and show plugins for devs

* Convert plugins page to table and update components and modals

* Update links when going back from the builder

* Update plugin search placeholder

* Fix URLs in app overview

* Properly handle text overflow in plugins table

* Remove getting started checklist

* Fix checklist removal and fix profile modal

* Update email details page to match new designs

* Cleanup

* Add licensing and env logic to determine which account links to show

* Update upgrade button URL for cloud accounts

* Update app list to use a more compact style

* Make core page layout responsive and update apps list to be responsive

* Update mobile design of apps page

* Update more pages to be responsive and add mobile specific components

* Refactor main portal page into multiple components

* Update multiple pages to be responsive and improve loading experience

* Make automation history page responsive

* Update backups page to be responsive

* Update pickers to use absolutely positioned root popover so that overflow does not matter

* Fix some responsive styles

* Fix update link in app overview

* Improve dropdown logic

* Lint

* Update click outside handler to handle modals properly

* Remove log

* Fix mobile menu upgrade button not closing menu

* Hide groups page if disabled at tenant level

* Centralise menu logic and show full menu on mobile

* Update app access assignment and fix backups table

* Ensure avatars cannot be squished

* Standardise disabled field text colour

* Allow developer users to access users, groups and usage pages

* Allow readonly access to users and groups for developer users

* Remove logs

* Improve users page loading experience

* Improve responsiveness on apps list page and fix discussions link styles

* Update spacing on user and group detail page and fix usage page showing wrong copy

* Fix logo override not working

* Pin minio version to an old one that supports the fs backend in dev

* Shrink upgrade button

* Shrink user dropdown

* Update assignment modal text

* Remove clickable visual styles from plugins

* Always show groups section in app access page

* Update app overview button styles to include more CTAs

* Hide edit and view links in more menu on overview page unless on mobile

* Make usage stats responsive and fix layout issues

* Add core page layout for onboarding to frontend-core

* Add initial work on fancy form components for onboarding

* Add checkbox component and add error handling to fancy form fields

* Add fancy select and improve other fancy components

* Update fancy components and fix select rounded corners

* Fix mobile styles for split pages

* Revert google button

* Fix links not working with click handlers

* Fix label animation

* Improve styles of fancy components

* Improve mobile compatibility with fancy button radio

* Revert changes to builder files for testing

* Tidy up small UI issues

* Improve some minor design issues

* Fix issue with scroll padding not being applied

* Ensure unauthorised users cannot view pages they should not be able to

* Lint
This commit is contained in:
Andrew Kingston 2023-01-23 15:38:43 +00:00 committed by GitHub
parent 7ca834589f
commit 549e4e0dc5
24 changed files with 694 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/bbui/src/ActionButton/ActionButton.svelte
View File

@ -88,6 +88,7 @@
}
.is-selected:not(.spectrum-ActionButton--emphasized) {
background: var(--spectrum-global-color-gray-300);
border-color: var(--spectrum-global-color-gray-700);
}
.noPadding {
padding: 0;

29
packages/bbui/src/FancyForm/FancyButton.svelte Normal file
View File

@ -0,0 +1,29 @@
<script>
import Icon from "../Icon/Icon.svelte"
import FancyField from "./FancyField.svelte"
export let icon
export let disabled
</script>
<FancyField on:click clickable {disabled}>
{#if icon}
{#if icon.includes("/")}
<img src={icon} alt="button" />
{:else}
<Icon name={icon} />
{/if}
{/if}
<div>
<slot />
</div>
</FancyField>
<style>
img {
width: 22px;
}
div {
font-size: var(--font-size-l);
}
</style>

70
packages/bbui/src/FancyForm/FancyButtonRadio.svelte Normal file
View File

@ -0,0 +1,70 @@
<script>
import { createEventDispatcher } from "svelte"
import FancyField from "./FancyField.svelte"
import FancyFieldLabel from "./FancyFieldLabel.svelte"
import ActionButton from "../ActionButton/ActionButton.svelte"
export let label
export let value
export let disabled = false
export let error = null
export let validate = null
export let options = []
export let getOptionLabel = option => extractProperty(option, "label")
export let getOptionValue = option => extractProperty(option, "value")
const dispatch = createEventDispatcher()
$: placeholder = !value
const extractProperty = (value, property) => {
if (value && typeof value === "object") {
return value[property]
}
return value
}
const onChange = newValue => {
dispatch("change", newValue)
value = newValue
if (validate) {
error = validate(newValue)
}
}
</script>
<FancyField {error} {value} {validate} {disabled} autoHeight>
{#if label}
<FancyFieldLabel placeholder={false}>{label}</FancyFieldLabel>
{/if}
<div class="options">
{#each options as option}
<ActionButton
selected={getOptionValue(option) === value}
on:click={() => onChange(getOptionValue(option))}
>
{getOptionLabel(option)}
</ActionButton>
{/each}
</div>
</FancyField>
<style>
.options {
margin-top: 34px;
margin-bottom: 14px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.options :global(.spectrum-ActionButton) {
font-size: 15px;
line-height: 17px;
height: auto;
padding: 6px 10px;
}
</style>

53
packages/bbui/src/FancyForm/FancyCheckbox.svelte Normal file
View File

@ -0,0 +1,53 @@
<script>
import { createEventDispatcher } from "svelte"
import FancyField from "./FancyField.svelte"
import Checkbox from "../Form/Core/Checkbox.svelte"
export let value
export let text
export let disabled = false
export let error = null
export let validate = null
const dispatch = createEventDispatcher()
const onChange = () => {
const newValue = !value
dispatch("change", newValue)
value = newValue
if (validate) {
error = validate(newValue)
}
}
</script>
<FancyField {error} {value} {validate} {disabled} clickable on:click={onChange}>
<span>
<Checkbox {disabled} {value} />
</span>
<div class="text">
{#if text}
{text}
{/if}
<slot />
</div>
</FancyField>
<style>
span {
pointer-events: none;
}
.text {
font-size: 15px;
line-height: 17px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.text > :global(*) {
font-size: inherit !important;
}
</style>

126
packages/bbui/src/FancyForm/FancyField.svelte Normal file
View File

@ -0,0 +1,126 @@
<script>
import Icon from "../Icon/Icon.svelte"
import { getContext, onMount } from "svelte"
import { slide } from "svelte/transition"
export let disabled = false
export let error = null
export let focused = false
export let clickable = false
export let validate
export let value
export let ref
export let autoHeight
const formContext = getContext("fancy-form")
const id = Math.random()
const API = {
validate: () => {
if (validate) {
error = validate(value)
}
return !error
},
}
onMount(() => {
if (formContext) {
formContext.registerField(id, API)
}
return () => {
if (formContext) {
formContext.unregisterField(id)
}
}
})
</script>
<div
bind:this={ref}
class="fancy-field"
class:error
class:disabled
class:focused
class:clickable
class:auto-height={autoHeight}
>
<div class="content" on:click>
<div class="field">
<slot />
</div>
{#if error}
<div class="error-icon">
<Icon name="Alert" />
</div>
{/if}
</div>
{#if error}
<div transition:slide|local={{ duration: 130 }} class="error-message">
{error}
</div>
{/if}
</div>
<style>
.fancy-field {
max-width: 400px;
background: var(--spectrum-global-color-gray-75);
border: 1px solid var(--spectrum-global-color-gray-300);
border-radius: 4px;
box-sizing: border-box;
transition: border-color 130ms ease-out, background 130ms ease-out,
background 130ms ease-out;
color: var(--spectrum-global-color-gray-800);
}
.fancy-field:hover {
border-color: var(--spectrum-global-color-gray-400);
}
.fancy-field.clickable:hover {
background: var(--spectrum-global-color-gray-200);
cursor: pointer;
}
.fancy-field.focused {
border-color: var(--spectrum-global-color-blue-400);
}
.fancy-field.error {
border-color: var(--spectrum-global-color-red-400);
}
.fancy-field.disabled {
background: var(--spectrum-global-color-gray-200);
color: var(--spectrum-global-color-gray-400);
border: 1px solid var(--spectrum-global-color-gray-300);
pointer-events: none;
}
.content {
position: relative;
height: 64px;
padding: 0 16px;
}
.fancy-field.auto-height .content {
height: auto;
}
.content,
.field {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: 16px;
}
.field {
flex: 1 1 auto;
}
.error-message {
background: var(--spectrum-global-color-red-400);
color: white;
font-size: 14px;
padding: 6px 16px;
font-weight: 500;
}
.error-icon {
flex: 0 0 auto;
}
.error-icon :global(.spectrum-Icon) {
fill: var(--spectrum-global-color-red-400);
}
</style>

25
packages/bbui/src/FancyForm/FancyFieldLabel.svelte Normal file
View File

@ -0,0 +1,25 @@
<script>
export let placeholder = true
</script>
<div class:placeholder>
<slot />
</div>
<style>
div {
font-size: 14px;
line-height: 15px;
font-weight: 500;
position: absolute;
top: 10px;
color: var(--spectrum-global-color-gray-600);
transition: font-size 130ms ease-out, top 130ms ease-out,
transform 130ms ease-out;
}
div.placeholder {
top: 50%;
font-size: 15px;
transform: translateY(-50%);
}
</style>

40
packages/bbui/src/FancyForm/FancyForm.svelte Normal file
View File

@ -0,0 +1,40 @@
<script>
import { setContext } from "svelte"
let fields = {}
setContext("fancy-form", {
registerField: (id, api) => {
fields = { ...fields, [id]: api }
},
unregisterField: id => {
delete fields[id]
fields = fields
},
})
export const validate = () => {
let valid = true
Object.values(fields).forEach(api => {
if (!api.validate()) {
valid = false
}
})
return valid
}
</script>
<div class="fancy-form">
<slot />
</div>
<style>
.fancy-form :global(.fancy-field:not(:first-of-type)) {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.fancy-form :global(.fancy-field:not(:last-of-type)) {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
</style>

63
packages/bbui/src/FancyForm/FancyInput.svelte Normal file
View File

@ -0,0 +1,63 @@
<script>
import { createEventDispatcher } from "svelte"
import FancyField from "./FancyField.svelte"
import FancyFieldLabel from "./FancyFieldLabel.svelte"
export let label
export let value
export let type = "text"
export let disabled = false
export let error = null
export let validate = null
const dispatch = createEventDispatcher()
let focused = false
$: placeholder = !focused && !value
const onChange = e => {
const newValue = e.target.value
dispatch("change", newValue)
value = newValue
if (validate) {
error = validate(newValue)
}
}
</script>
<FancyField {error} {value} {validate} {disabled} {focused}>
{#if label}
<FancyFieldLabel {placeholder}>{label}</FancyFieldLabel>
{/if}
<input
{disabled}
value={value || ""}
type={type || "text"}
on:input={onChange}
on:focus={() => (focused = true)}
on:blur={() => (focused = false)}
class:placeholder
/>
</FancyField>
<style>
input {
width: 100%;
transition: transform 130ms ease-out;
transform: translateY(9px);
background: transparent;
font-size: 15px;
line-height: 17px;
font-family: var(--font-sans);
color: var(--spectrum-global-color-gray-900);
outline: none;
border: none;
}
input.placeholder {
transform: translateY(0);
position: absolute;
top: 0;
left: 0;
height: 100%;
}
</style>

135
packages/bbui/src/FancyForm/FancySelect.svelte Normal file
View File

@ -0,0 +1,135 @@
<script>
import { createEventDispatcher } from "svelte"
import FancyField from "./FancyField.svelte"
import Icon from "../Icon/Icon.svelte"
import Popover from "../Popover/Popover.svelte"
import FancyFieldLabel from "./FancyFieldLabel.svelte"
export let label
export let value
export let disabled = false
export let error = null
export let validate = null
export let options = []
export let getOptionLabel = option => extractProperty(option, "label")
export let getOptionValue = option => extractProperty(option, "value")
const dispatch = createEventDispatcher()
let open = false
let popover
let wrapper
$: placeholder = !value
const extractProperty = (value, property) => {
if (value && typeof value === "object") {
return value[property]
}
return value
}
const onChange = newValue => {
dispatch("change", newValue)
value = newValue
if (validate) {
error = validate(newValue)
}
open = false
}
</script>
<FancyField
bind:ref={wrapper}
{error}
{value}
{validate}
{disabled}
clickable
on:click={() => (open = true)}
>
{#if label}
<FancyFieldLabel {placeholder}>{label}</FancyFieldLabel>
{/if}
<div class="value" class:placeholder>
{value || ""}
</div>
<div class="arrow">
<Icon name="ChevronDown" />
</div>
</FancyField>
<Popover
anchor={wrapper}
align="left"
portalTarget={document.documentElement}
bind:this={popover}
{open}
on:close={() => (open = false)}
useAnchorWidth={true}
maxWidth={null}
>
<div class="popover-content">
{#if options.length}
{#each options as option, idx}
<div
class="popover-option"
tabindex="0"
on:click={() => onChange(getOptionValue(option, idx))}
>
<span class="option-text">
{getOptionLabel(option, idx)}
</span>
{#if value === getOptionValue(option, idx)}
<Icon name="Checkmark" />
{/if}
</div>
{/each}
{/if}
</div>
</Popover>
<style>
.value {
display: block;
flex: 1 1 auto;
font-size: 15px;
line-height: 17px;
color: var(--spectrum-global-color-gray-900);
transition: transform 130ms ease-out, opacity 130ms ease-out;
opacity: 1;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 0;
transform: translateY(9px);
}
.value.placeholder {
transform: translateY(0);
opacity: 0;
pointer-events: none;
margin-top: 0;
}
.popover-content {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
padding: 7px 0;
}
.popover-option {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 7px 16px;
transition: background 130ms ease-out;
font-size: 15px;
}
.popover-option:hover {
background: var(--spectrum-global-color-gray-200);
cursor: pointer;
}
</style>

6
packages/bbui/src/FancyForm/index.js Normal file
View File

@ -0,0 +1,6 @@
export { default as FancyInput } from "./FancyInput.svelte"
export { default as FancyCheckbox } from "./FancyCheckbox.svelte"
export { default as FancySelect } from "./FancySelect.svelte"
export { default as FancyButton } from "./FancyButton.svelte"
export { default as FancyForm } from "./FancyForm.svelte"
export { default as FancyButtonRadio } from "./FancyButtonRadio.svelte"

3
packages/bbui/src/Form/Core/Select.svelte
View File

@ -18,8 +18,11 @@
export let autoWidth = false
export let autocomplete = false
export let sort = false
const dispatch = createEventDispatcher()
let open = false
$: fieldText = getFieldText(value, options, placeholder)
$: fieldIcon = getFieldAttribute(getOptionIcon, value, options)
$: fieldColour = getFieldAttribute(getOptionColour, value, options)

8
packages/bbui/src/Layout/Page.svelte
View File

@ -18,6 +18,7 @@
<div class="main">
<div class="content" class:wide class:noPadding class:narrow>
<slot />
<div class="fix-scroll-padding" />
</div>
</div>
<div
@ -55,9 +56,14 @@
max-width: 1080px;
margin: 0 auto;
flex: 1 1 auto;
padding: 50px;
padding: 50px 50px 0 50px;
z-index: 1;
}
.fix-scroll-padding {
content: "";
display: block;
flex: 0 0 50px;
}
.content.wide {
max-width: none;
}

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

@ -1,5 +1,6 @@
<script>
import "@spectrum-css/link/dist/index-vars.css"
import { createEventDispatcher } from "svelte"
export let href = "#"
export let size = "M"
@ -9,10 +10,12 @@
export let overBackground = false
export let target
export let download
const dispatch = createEventDispatcher()
</script>
<a
on:click
on:click={e => dispatch("click") && e.stopPropagation()}
{href}
{target}
{download}

3
packages/bbui/src/index.js
View File

@ -101,3 +101,6 @@ export { banner, BANNER_TYPES } from "./Stores/banner"
// Helpers
export * as Helpers from "./helpers"
// Fancy form components
export * from "./FancyForm"

2
packages/builder/src/components/portal/page/SideNavItem.svelte
View File

@ -5,7 +5,7 @@
</script>
<a on:click href={url} class:active>
{text}
{text || ""}
</a>
<style>

2
packages/builder/src/pages/builder/portal/_layout.svelte
View File

@ -98,7 +98,7 @@
/* Customise tabs appearance*/
.nav :global(.spectrum-Tabs) {
margin-bottom: -2px;
padding: 7px 0;
padding: 5px 0;
flex: 1 1 auto;
}
.nav :global(.spectrum-Tabs-content) {

9
packages/builder/src/pages/builder/portal/account/_layout.svelte
View File

@ -1,14 +1,15 @@
<script>
import { isActive } from "@roxi/routify"
import { goto, isActive } from "@roxi/routify"
import { Page } from "@budibase/bbui"
import { Content, SideNav, SideNavItem } from "components/portal/page"
import { menu } from "stores/portal"
$: pages = $menu.find(x => x.title === "Account").subPages
$: pages = $menu.find(x => x.title === "Account")?.subPages || []
$: !pages.length && $goto("../")
</script>
<Page narrow>
<Content>
<Page>
<Content narrow>
<div slot="side-nav">
<SideNav>
{#each pages as { title, href }}

2
packages/builder/src/pages/builder/portal/apps/index.svelte
View File

@ -227,7 +227,7 @@
{/each}
<div class="title">
<div class="welcome">
<Layout noPadding gap="S">
<Layout noPadding gap="XS">
<Heading size="L">{welcomeHeader}</Heading>
<Body size="M">
Manage your apps and get a head start with templates

5
packages/builder/src/pages/builder/portal/settings/_layout.svelte
View File

@ -1,11 +1,12 @@
<script>
import { isActive } from "@roxi/routify"
import { goto, isActive } from "@roxi/routify"
import { Page } from "@budibase/bbui"
import { Content, SideNav, SideNavItem } from "components/portal/page"
import { menu } from "stores/portal"
$: wide = $isActive("./email/:template")
$: pages = $menu.find(x => x.title === "Settings").subPages
$: pages = $menu.find(x => x.title === "Settings")?.subPages || []
$: !pages.length && $goto("../")
</script>
<Page>

5
packages/builder/src/pages/builder/portal/users/_layout.svelte
View File

@ -1,11 +1,12 @@
<script>
import { Page } from "@budibase/bbui"
import { SideNav, SideNavItem, Content } from "components/portal/page"
import { isActive } from "@roxi/routify"
import { isActive, goto } from "@roxi/routify"
import { menu } from "stores/portal"
$: wide = $isActive("./users/index") || $isActive("./groups/index")
$: pages = $menu.find(x => x.title === "Users").subPages
$: pages = $menu.find(x => x.title === "Users")?.subPages || []
$: !pages.length && $goto("../")
</script>
<Page>

50
packages/frontend-core/src/components/SplitPage.svelte Normal file
View File

@ -0,0 +1,50 @@
<div class="split-page">
<div class="left">
<div class="content">
<slot />
</div>
</div>
<div class="right">
<slot name="right" />
</div>
</div>
<style>
.split-page {
height: 100%;
display: grid;
grid-template-columns: max(50%, 380px) 1fr;
justify-content: stretch;
overflow: hidden;
}
.left {
background: var(--background);
display: grid;
place-items: center;
padding: 40px;
overflow-y: auto;
}
.right {
background: linear-gradient(
to bottom right,
var(--spectrum-global-color-gray-300) 0%,
var(--background) 100%
);
}
.content {
width: 100%;
max-width: 400px;
}
@media (max-width: 740px) {
.split-page {
grid-template-columns: 1fr;
}
.left {
padding: 20px;
}
.right {
display: none;
}
}
</style>

62
packages/frontend-core/src/components/TestimonialPage.svelte Normal file
View File

@ -0,0 +1,62 @@
<script>
import SplitPage from "./SplitPage.svelte"
import { Layout } from "@budibase/bbui"
</script>
<SplitPage>
<slot />
<div class="wrapper" slot="right">
<div class="testimonial">
<Layout noPadding gap="S">
<div class="text">
"Here is an example of how Budibase changed my life for the better and
now all I do is eat, sleep, build apps, repeat."
</div>
<div class="user">
<img
src="https://icon-library.com/images/male-user-icon/male-user-icon-24.jpg"
/>
<div class="author">
<div class="name">No-code Enthusiast</div>
<div class="company">Bedroom TLD</div>
</div>
</div>
</Layout>
</div>
</div>
</SplitPage>
<style>
.wrapper {
width: 100%;
height: 100%;
display: grid;
place-items: center;
}
.testimonial {
width: 280px;
padding: 40px;
}
.text {
font-size: var(--font-size-l);
font-style: italic;
}
img {
width: 40px;
}
.user {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: var(--spacing-s);
}
.name {
font-weight: bold;
color: var(--spectrum-global-color-gray-900);
font-size: var(--font-size-l);
}
.company {
color: var(--spectrum-global-color-gray-700);
}
</style>

2
packages/frontend-core/src/components/index.js Normal file
View File

@ -0,0 +1,2 @@
export { default as SplitPage } from "./SplitPage.svelte"
export { default as TestimonialPage } from "./TestimonialPage.svelte"

1
packages/frontend-core/src/index.js
View File

@ -3,3 +3,4 @@ export { fetchData } from "./fetch/fetchData"
export * as Constants from "./constants"
export * from "./stores"
export * from "./utils"
export * from "./components"