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

small UX updates to improve user addition and perceived loading of builder

This commit is contained in:
Martin McKeaveney 2023-03-01 22:51:52 +00:00
parent c49eb26377
commit 8c4deb1811
3 changed files with 87 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/builder/src/components/deploy/VersionModal.svelte
View File

@ -24,7 +24,7 @@
let updateModal let updateModal
$: appId = $store.appId $: appId = $store.appId
$: updateAvailable = clientPackage.version !== $store.version $: updateAvailable = clientPackage.version && $store.version && clientPackage.version !== $store.version
$: revertAvailable = $store.revertableVersion != null $: revertAvailable = $store.revertableVersion != null
const refreshAppPackage = async () => { const refreshAppPackage = async () => {

11
packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte
View File

@ -25,6 +25,7 @@
let rendered = false let rendered = false
let inviting = false let inviting = false
let searchFocus = false let searchFocus = false
let userSearchInput
let appInvites = [] let appInvites = []
let filteredInvites = [] let filteredInvites = []
@ -346,8 +347,15 @@
onMount(() => { onMount(() => {
rendered = true rendered = true
searchFocus = true
}) })
function handleKeyDown(evt) {
if (evt.key === "Enter" && queryIsEmail && !inviting) {
onInviteUser()
}
}
const userTitle = user => { const userTitle = user => {
if (user.admin?.global) { if (user.admin?.global) {
return "Admin" return "Admin"
@ -370,6 +378,8 @@
} }
</script> </script>
<svelte:window on:keydown={handleKeyDown} />
<div <div
id="builder-side-panel-container" id="builder-side-panel-container"
class:open={$store.builderSidePanel} class:open={$store.builderSidePanel}
@ -403,6 +413,7 @@
autocomplete="off" autocomplete="off"
disabled={inviting} disabled={inviting}
value={query} value={query}
autofocus
on:input={e => { on:input={e => {
query = e.target.value.trim() query = e.target.value.trim()
}} }}

153
packages/builder/src/pages/builder/app/[application]/_layout.svelte
View File

@ -120,89 +120,86 @@
}) })
</script> </script>
{#await promise} <TourPopover />
<!-- This should probably be some kind of loading state? -->
<div class="loading" />
{:then _}
<TourPopover />
{#if $store.builderSidePanel} {#if $store.builderSidePanel}
<BuilderSidePanel /> <BuilderSidePanel />
{/if} {/if}
<div class="root"> <div class="root">
<div class="top-nav"> <div class="top-nav">
<div class="topleftnav"> <div class="topleftnav">
<ActionMenu> <ActionMenu>
<div slot="control"> <div slot="control">
<Icon size="M" hoverable name="ShowMenu" /> <Icon size="M" hoverable name="ShowMenu" />
</div> </div>
<MenuItem on:click={() => $goto("../../portal/apps")}> <MenuItem on:click={() => $goto("../../portal/apps")}>
Exit to portal Exit to portal
</MenuItem> </MenuItem>
<MenuItem <MenuItem
on:click={() => $goto(`../../portal/overview/${application}`)} on:click={() => $goto(`../../portal/overview/${application}`)}
> >
Overview Overview
</MenuItem> </MenuItem>
<MenuItem <MenuItem
on:click={() => on:click={() => $goto(`../../portal/overview/${application}/access`)}
$goto(`../../portal/overview/${application}/access`)} >
> Access
Access </MenuItem>
</MenuItem> <MenuItem
<MenuItem on:click={() =>
on:click={() => $goto(`../../portal/overview/${application}/automation-history`)}
$goto(`../../portal/overview/${application}/automation-history`)} >
> Automation history
Automation history </MenuItem>
</MenuItem> <MenuItem
<MenuItem on:click={() => $goto(`../../portal/overview/${application}/backups`)}
on:click={() => >
$goto(`../../portal/overview/${application}/backups`)} Backups
> </MenuItem>
Backups
</MenuItem>
<MenuItem <MenuItem
on:click={() => on:click={() =>
$goto(`../../portal/overview/${application}/name-and-url`)} $goto(`../../portal/overview/${application}/name-and-url`)}
> >
Name and URL Name and URL
</MenuItem> </MenuItem>
<MenuItem <MenuItem
on:click={() => on:click={() => $goto(`../../portal/overview/${application}/version`)}
$goto(`../../portal/overview/${application}/version`)} >
> Version
Version </MenuItem>
</MenuItem> </ActionMenu>
</ActionMenu> <Heading size="XS">{$store.name}</Heading>
<Heading size="XS">{$store.name || "App"}</Heading> </div>
</div> <div class="topcenternav">
<div class="topcenternav"> <Tabs {selected} size="M">
<Tabs {selected} size="M"> {#each $layout.children as { path, title }}
{#each $layout.children as { path, title }} <TourWrap tourStepKey={`builder-${title}-section`}>
<TourWrap tourStepKey={`builder-${title}-section`}> <Tab
<Tab quiet
quiet selected={$isActive(path)}
selected={$isActive(path)} on:click={topItemNavigate(path)}
on:click={topItemNavigate(path)} title={capitalise(title)}
title={capitalise(title)} id={`builder-${title}-tab`}
id={`builder-${title}-tab`} />
/> </TourWrap>
</TourWrap> {/each}
{/each} </Tabs>
</Tabs> </div>
</div> <div class="toprightnav">
<div class="toprightnav"> <AppActions {application} />
<AppActions {application} />
</div>
</div> </div>
<slot />
</div> </div>
{:catch error} {#await promise}
<p>Something went wrong: {error.message}</p> <!-- This should probably be some kind of loading state? -->
{/await} <div class="loading" />
{:then _}
<slot />
{:catch error}
<p>Something went wrong: {error.message}</p>
{/await}
</div>
<style> <style>
.loading { .loading {