Merge pull request #408 from Budibase/welcome-screen-ui-fix
Welcome screen ui fix
This commit is contained in:
Joe
GitHub
commit
b3dc4379d5
Binary file not shown.
|
After Width: | Height: | Size: 5.4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 201 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 105 KiB |
|
|
@ -55,7 +55,7 @@
|
|||
]
|
||||
},
|
||||
"dependencies": {
|
||||
"@budibase/bbui": "^1.15.0",
|
||||
"@budibase/bbui": "^1.15.4",
|
||||
"@budibase/client": "^0.0.32",
|
||||
"@nx-js/compiler-util": "^2.0.0",
|
||||
"codemirror": "^5.51.0",
|
||||
|
|
|
|||
|
|
@ -1,11 +1,5 @@
|
|||
/* Budibase Component Styles */
|
||||
.header {
|
||||
font-size: 0.75rem;
|
||||
color: var(--ink);
|
||||
text-transform: uppercase;
|
||||
margin-top: 1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
||||
.budibase__title {
|
||||
font-weight: 900;
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
<style>
|
||||
.apps {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 380px);
|
||||
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
|
||||
grid-gap: 20px 40px;
|
||||
justify-content: start;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@
|
|||
<span class="icon">
|
||||
<AppsIcon />
|
||||
</span>
|
||||
<h3>Create new web app</h3>
|
||||
<h3 class="header">Create new web app</h3>
|
||||
</div>
|
||||
<Input
|
||||
name="name"
|
||||
|
|
@ -90,7 +90,7 @@
|
|||
<InfoIcon />
|
||||
How to get started
|
||||
</a>
|
||||
<Button outline thin on:click={_onCancel}>Cancel</Button>
|
||||
<Button secondary thin on:click={_onCancel}>Cancel</Button>
|
||||
<Button primary thin on:click={_onOkay}>Save</Button>
|
||||
</div>
|
||||
<div class="close-button" on:click={_onCancel}>
|
||||
|
|
@ -125,10 +125,11 @@
|
|||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
h3 {
|
||||
.header {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
font-weight: 600;
|
||||
font-family: inter;
|
||||
}
|
||||
.icon {
|
||||
display: grid;
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
import {keyevents} from "../actions"
|
||||
|
||||
export let value = "#3ec1d3ff"
|
||||
export let open = false;
|
||||
export let open = false
|
||||
export let swatches = [] //TODO: Safe swatches - limit to 12. warn in console
|
||||
export let disableSwatches = false
|
||||
export let format = "hexa"
|
||||
|
|
@ -160,7 +160,6 @@
|
|||
$: border = v > 90 && s < 5 ? "1px dashed #dedada" : ""
|
||||
$: selectedColorStyle = buildStyle({ background: value, border })
|
||||
$: shrink = swatches.length > 0
|
||||
|
||||
</script>
|
||||
|
||||
<Portal>
|
||||
|
|
|
|||
|
|
@ -38,7 +38,6 @@
|
|||
}
|
||||
})
|
||||
|
||||
|
||||
function openColorpicker(event) {
|
||||
if (colorPreview) {
|
||||
open = true
|
||||
|
|
@ -62,11 +61,11 @@
|
|||
const spaceBelow = window.innerHeight - bottom
|
||||
const previewCenter = previewWidth / 2
|
||||
|
||||
let y, x;
|
||||
let y, x
|
||||
|
||||
if (spaceAbove > spaceBelow) {
|
||||
positionSide = "bottom"
|
||||
y = (window.innerHeight - spaceAbove)
|
||||
y = window.innerHeight - spaceAbove
|
||||
} else {
|
||||
positionSide = "top"
|
||||
y = bottom
|
||||
|
|
@ -87,7 +86,6 @@
|
|||
[positionSide]: `${dimensions[positionSide]}px`,
|
||||
left: `${dimensions.left}px`,
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<svelte:window on:resize={debounce(calculateDimensions, 200)} />
|
||||
|
|
@ -116,8 +114,7 @@
|
|||
bind:pickerWidth
|
||||
bind:open
|
||||
{swatches}
|
||||
{disableSwatches}
|
||||
/>
|
||||
{disableSwatches} />
|
||||
<div on:click|self={() => (open = false)} class="overlay" />
|
||||
{/if}
|
||||
{:else}
|
||||
|
|
|
|||
|
|
@ -1,35 +1,35 @@
|
|||
<script>
|
||||
import { onMount } from "svelte";
|
||||
import { onMount } from "svelte"
|
||||
|
||||
export let target = document.body;
|
||||
export let target = document.body
|
||||
|
||||
let targetEl;
|
||||
let portal;
|
||||
let componentInstance;
|
||||
let targetEl
|
||||
let portal
|
||||
let componentInstance
|
||||
|
||||
onMount(() => {
|
||||
if (typeof target === "string") {
|
||||
targetEl = document.querySelector(target);
|
||||
targetEl = document.querySelector(target)
|
||||
// Force exit
|
||||
if (targetEl === null) {
|
||||
return () => {};
|
||||
return () => {}
|
||||
}
|
||||
} else if (target instanceof HTMLElement) {
|
||||
targetEl = target;
|
||||
targetEl = target
|
||||
} else {
|
||||
throw new TypeError(
|
||||
`Unknown target type: ${typeof target}. Allowed types: String (CSS selector), HTMLElement.`
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
portal = document.createElement("div");
|
||||
targetEl.appendChild(portal);
|
||||
portal.appendChild(componentInstance);
|
||||
portal = document.createElement("div")
|
||||
targetEl.appendChild(portal)
|
||||
portal.appendChild(componentInstance)
|
||||
|
||||
return () => {
|
||||
targetEl.removeChild(portal);
|
||||
};
|
||||
});
|
||||
targetEl.removeChild(portal)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<div bind:this={componentInstance}>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
import PropertyGroup from "./PropertyGroup.svelte"
|
||||
import FlatButtonGroup from "./FlatButtonGroup.svelte"
|
||||
|
||||
|
||||
export let panelDefinition = {}
|
||||
export let componentInstance = {}
|
||||
export let componentDefinition = {}
|
||||
|
|
@ -34,7 +33,6 @@
|
|||
]
|
||||
|
||||
$: propertyGroupNames = Object.keys(panelDefinition)
|
||||
|
||||
</script>
|
||||
|
||||
<div class="design-view-container">
|
||||
|
|
@ -55,7 +53,7 @@
|
|||
{componentDefinition}
|
||||
{componentInstance}
|
||||
open={currentGroup === groupName}
|
||||
on:open={() => currentGroup = groupName} />
|
||||
on:open={() => (currentGroup = groupName)} />
|
||||
{/each}
|
||||
{:else}
|
||||
<div class="no-design">
|
||||
|
|
|
|||
|
|
@ -13,13 +13,13 @@
|
|||
let selectMenu
|
||||
let icon
|
||||
|
||||
let selectAnchor = null;
|
||||
let selectAnchor = null
|
||||
let dimensions = { top: 0, bottom: 0, left: 0 }
|
||||
|
||||
let positionSide = "top"
|
||||
let maxHeight = 0
|
||||
let scrollTop = 0;
|
||||
let containerEl = null;
|
||||
let scrollTop = 0
|
||||
let containerEl = null
|
||||
|
||||
const handleStyleBind = value =>
|
||||
!!styleBindingProperty ? { style: `${styleBindingProperty}: ${value}` } : {}
|
||||
|
|
@ -32,7 +32,6 @@
|
|||
return () => {
|
||||
select.removeEventListener("keydown", handleEnter)
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
function handleEscape(e) {
|
||||
|
|
@ -42,15 +41,19 @@
|
|||
}
|
||||
|
||||
function getDimensions() {
|
||||
const { bottom, top: spaceAbove, left } = selectAnchor.getBoundingClientRect()
|
||||
const {
|
||||
bottom,
|
||||
top: spaceAbove,
|
||||
left,
|
||||
} = selectAnchor.getBoundingClientRect()
|
||||
const spaceBelow = window.innerHeight - bottom
|
||||
|
||||
let y;
|
||||
let y
|
||||
|
||||
if (spaceAbove > spaceBelow) {
|
||||
positionSide = "bottom"
|
||||
maxHeight = spaceAbove - 20
|
||||
y = (window.innerHeight - spaceAbove)
|
||||
y = window.innerHeight - spaceAbove
|
||||
} else {
|
||||
positionSide = "top"
|
||||
y = bottom
|
||||
|
|
@ -76,7 +79,6 @@
|
|||
open = isOpen
|
||||
}
|
||||
|
||||
|
||||
function handleClick(val) {
|
||||
value = val
|
||||
onChange(value)
|
||||
|
|
@ -86,7 +88,7 @@
|
|||
"max-height": `${maxHeight.toFixed(0)}px`,
|
||||
"transform-origin": `center ${positionSide}`,
|
||||
[positionSide]: `${dimensions[positionSide]}px`,
|
||||
"left": `${dimensions.left.toFixed(0)}px`,
|
||||
left: `${dimensions.left.toFixed(0)}px`,
|
||||
})
|
||||
|
||||
$: isOptionsObject = options.every(o => typeof o === "object")
|
||||
|
|
|
|||
|
|
@ -38,7 +38,9 @@
|
|||
if (!activeTopNav) return
|
||||
store.update(state => {
|
||||
if (!state.previousTopNavPath) state.previousTopNavPath = {}
|
||||
state.previousTopNavPath[activeTopNav.path] = window.location.pathname.replace("/_builder", "")
|
||||
state.previousTopNavPath[
|
||||
activeTopNav.path
|
||||
] = window.location.pathname.replace("/_builder", "")
|
||||
$goto(state.previousTopNavPath[path] || path)
|
||||
return state
|
||||
})
|
||||
|
|
|
|||
|
|
@ -3,12 +3,13 @@ import { params } from "@sveltech/routify"
|
|||
import { backendUiStore } from "builderStore"
|
||||
|
||||
if ($params.selectedModel) {
|
||||
const model = $backendUiStore.models.find(m => m._id === $params.selectedModel)
|
||||
const model = $backendUiStore.models.find(
|
||||
m => m._id === $params.selectedModel
|
||||
)
|
||||
if (model) {
|
||||
backendUiStore.actions.models.select(model)
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<slot />
|
||||
|
|
|
|||
|
|
@ -10,7 +10,11 @@
|
|||
onMount(async () => {
|
||||
// navigate to first model in list, if not already selected
|
||||
// and this is the final url (i.e. no selectedModel)
|
||||
if (!$leftover && $backendUiStore.models.length > 0 && (!$backendUiStore.selectedModel || !$backendUiStore.selectedModel._id)) {
|
||||
if (
|
||||
!$leftover &&
|
||||
$backendUiStore.models.length > 0 &&
|
||||
(!$backendUiStore.selectedModel || !$backendUiStore.selectedModel._id)
|
||||
) {
|
||||
$goto(`./${$backendUiStore.models[0]._id}`)
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -10,7 +10,11 @@
|
|||
onMount(async () => {
|
||||
// navigate to first model in list, if not already selected
|
||||
// and this is the final url (i.e. no selectedModel)
|
||||
if (!$leftover && $backendUiStore.models.length > 0 && (!$backendUiStore.selectedModel || !$backendUiStore.selectedModel._id)) {
|
||||
if (
|
||||
!$leftover &&
|
||||
$backendUiStore.models.length > 0 &&
|
||||
(!$backendUiStore.selectedModel || !$backendUiStore.selectedModel._id)
|
||||
) {
|
||||
// this file routes as .../models/index, so, go up one.
|
||||
$goto(`../${$backendUiStore.models[0]._id}`)
|
||||
}
|
||||
|
|
@ -19,6 +23,4 @@
|
|||
|
||||
{#if $backendUiStore.models.length === 0}
|
||||
Please create a model
|
||||
{:else}
|
||||
Please select a model
|
||||
{/if}
|
||||
{:else}Please select a model{/if}
|
||||
|
|
|
|||
|
|
@ -40,10 +40,7 @@
|
|||
|
||||
<div class="nav-section">
|
||||
<div class="nav-section-title">Contact</div>
|
||||
<Link
|
||||
icon={ContributionIcon}
|
||||
title="Contribute to our product"
|
||||
href="/" />
|
||||
<Link icon={ContributionIcon} title="Contribute" href="/" />
|
||||
<Link icon={BugIcon} title="Report bug" href="/" />
|
||||
<Link icon={EmailIcon} title="Email" href="/" />
|
||||
<Link icon={TwitterIcon} title="Twitter" href="/" />
|
||||
|
|
@ -59,7 +56,7 @@
|
|||
<style>
|
||||
.root {
|
||||
display: grid;
|
||||
grid-template-columns: 300px 1fr;
|
||||
grid-template-columns: 260px 1fr;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: var(--grey-1);
|
||||
|
|
@ -67,6 +64,7 @@
|
|||
|
||||
.main {
|
||||
grid-column: 2;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.ui-nav {
|
||||
|
|
@ -75,7 +73,6 @@
|
|||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-right: 1px solid var(--grey-4);
|
||||
}
|
||||
|
||||
.home-logo {
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
import { get } from "builderStore/api"
|
||||
import Spinner from "components/common/Spinner.svelte"
|
||||
import CreateAppModal from "components/start/CreateAppModal.svelte"
|
||||
import { Button } from "@budibase/bbui"
|
||||
|
||||
let promise = getApps()
|
||||
|
||||
|
|
@ -43,21 +44,17 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<div class="welcome">Welcome to Budibase</div>
|
||||
<div class="header">
|
||||
<div class="welcome">Welcome to the Budibase Beta</div>
|
||||
<Button purple large on:click={showCreateAppModal}>Create New Web App</Button>
|
||||
</div>
|
||||
|
||||
<div class="banner">
|
||||
<img src="/_builder/assets/rocket.jpg" alt="rocket" />
|
||||
<img src="/_builder/assets/orange-landscape.png" alt="rocket" />
|
||||
<div class="banner-content">
|
||||
Every accomplishment starts with a decision to try.
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-section-header">
|
||||
<div class="app-section-title">Your Web Apps</div>
|
||||
<button class="banner-button" type="button" on:click={showCreateAppModal}>
|
||||
<i class="ri-add-circle-fill" />
|
||||
Create New Web App
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#await promise}
|
||||
<div class="spinner-container">
|
||||
|
|
@ -70,11 +67,17 @@
|
|||
{/await}
|
||||
|
||||
<style>
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 40px 80px 0px 80px;
|
||||
}
|
||||
|
||||
.welcome {
|
||||
font-size: 42px;
|
||||
color: var(--ink);
|
||||
font-weight: 700;
|
||||
margin: 40px 0px 0px 80px;
|
||||
}
|
||||
|
||||
.banner {
|
||||
|
|
@ -108,48 +111,4 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.banner-button {
|
||||
background-color: var(--ink);
|
||||
color: var(--white);
|
||||
padding: 12px 24px;
|
||||
border-radius: 5px;
|
||||
border: var(--ink) 1px solid;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease 0s;
|
||||
overflow: hidden;
|
||||
outline: none;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ri-add-circle-fill {
|
||||
margin-right: 4px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.banner-button:hover {
|
||||
background-color: var(--white);
|
||||
color: var(--ink);
|
||||
border: var(--grey-4) 1px solid;
|
||||
}
|
||||
|
||||
.app-section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 40px 80px 0px 80px;
|
||||
}
|
||||
|
||||
.app-section-title {
|
||||
font-size: 20px;
|
||||
color: var(--ink);
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 5.4 MiB |
Loading…
Reference in New Issue