CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-17 17:57:47 +12:00
Code Issues Projects Releases Wiki Activity

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

Browse source
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
$: appId = $store.appId
$: updateAvailable = clientPackage.version !== $store.version
$: updateAvailable = clientPackage.version && $store.version && clientPackage.version !== $store.version
$: revertAvailable = $store.revertableVersion != null
const refreshAppPackage = async () => {

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

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

21
packages/builder/src/pages/builder/app/[application]/_layout.svelte
View file

@ -120,10 +120,6 @@
})
</script>
{#await promise}
<!-- This should probably be some kind of loading state? -->
<div class="loading" />
{:then _}
<TourPopover />
{#if $store.builderSidePanel}
@ -146,8 +142,7 @@
Overview
</MenuItem>
<MenuItem
on:click={() =>
$goto(`../../portal/overview/${application}/access`)}
on:click={() => $goto(`../../portal/overview/${application}/access`)}
>
Access
</MenuItem>
@ -158,8 +153,7 @@
Automation history
</MenuItem>
<MenuItem
on:click={() =>
$goto(`../../portal/overview/${application}/backups`)}
on:click={() => $goto(`../../portal/overview/${application}/backups`)}
>
Backups
</MenuItem>
@ -171,13 +165,12 @@
Name and URL
</MenuItem>
<MenuItem
on:click={() =>
$goto(`../../portal/overview/${application}/version`)}
on:click={() => $goto(`../../portal/overview/${application}/version`)}
>
Version
</MenuItem>
</ActionMenu>
<Heading size="XS">{$store.name || "App"}</Heading>
<Heading size="XS">{$store.name}</Heading>
</div>
<div class="topcenternav">
<Tabs {selected} size="M">
@ -198,11 +191,15 @@
<AppActions {application} />
</div>
</div>
{#await promise}
<!-- This should probably be some kind of loading state? -->
<div class="loading" />
{:then _}
<slot />
</div>
{:catch error}
<p>Something went wrong: {error.message}</p>
{/await}
</div>
<style>
.loading {