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

Update top bar with back arrow, app name, centered large tabs, new icons, tooltips on right icons and removal of version and self-host icons

This commit is contained in:
Andrew Kingston 2022-04-12 15:35:24 +01:00
parent 3d426f3089
commit 71dd456a37
8 changed files with 125 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/builder/src/components/deploy/RevertModal.svelte
View File

@ -28,7 +28,12 @@
} }
</script> </script>
<Icon name="Revert" hoverable on:click={revertModal.show} /> <Icon
name="Revert"
hoverable
on:click={revertModal.show}
tooltip="Revert changes"
/>
<Modal bind:this={revertModal}> <Modal bind:this={revertModal}>
<ModalContent <ModalContent
title="Revert Changes" title="Revert Changes"

83
packages/builder/src/global.css
View File

@ -1,76 +1,77 @@
html, body { html,
padding: 0; body {
margin: 0; padding: 0;
height: 100%; margin: 0;
width: 100%; height: 100%;
min-height: 100%; width: 100%;
min-height: 100%;
} }
body { body {
--background: var(--spectrum-alias-background-color-primary); --background: var(--spectrum-alias-background-color-primary);
--background-alt: var(--spectrum-alias-background-color-secondary); --background-alt: var(--spectrum-alias-background-color-secondary);
--border-light: 1px solid var(--spectrum-global-color-gray-300); --border-light: 2px solid var(--spectrum-global-color-gray-200);
--border-dark: 1px solid var(--spectrum-global-color-gray-400); --border-dark: 1px solid var(--spectrum-global-color-gray-400);
--ink: var(--spectrum-alias-text-color); --ink: var(--spectrum-alias-text-color);
--grey-1: var(--spectrum-global-color-gray-100); --grey-1: var(--spectrum-global-color-gray-100);
--grey-2: var(--spectrum-global-color-gray-200); --grey-2: var(--spectrum-global-color-gray-200);
--grey-3: var(--spectrum-global-color-gray-300); --grey-3: var(--spectrum-global-color-gray-300);
--grey-4: var(--spectrum-global-color-gray-400); --grey-4: var(--spectrum-global-color-gray-400);
--grey-5: var(--spectrum-global-color-gray-500); --grey-5: var(--spectrum-global-color-gray-500);
--grey-6: var(--spectrum-global-color-gray-600); --grey-6: var(--spectrum-global-color-gray-600);
--grey-7: var(--spectrum-global-color-gray-700); --grey-7: var(--spectrum-global-color-gray-700);
--grey-8: var(--spectrum-global-color-gray-800); --grey-8: var(--spectrum-global-color-gray-800);
--grey-9: var(--spectrum-global-color-gray-900); --grey-9: var(--spectrum-global-color-gray-900);
font-family: var(--font-sans); font-family: var(--font-sans);
color: var(--ink); color: var(--ink);
background-color: var(--background-alt); background-color: var(--background-alt);
} }
#app { #app {
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
} }
.hoverable:hover { .hoverable:hover {
cursor: pointer; cursor: pointer;
} }
a { a {
text-decoration: none; text-decoration: none;
} }
/* Top bottom spacing */ /* Top bottom spacing */
.bb-margin-m { .bb-margin-m {
margin-bottom: var(--spacing-m); margin-bottom: var(--spacing-m);
} }
* + .bb-margin-m { * + .bb-margin-m {
margin-top: var(--spacing-m); margin-top: var(--spacing-m);
} }
.bb-margin-xl { .bb-margin-xl {
margin-bottom: var(--spacing-xl); margin-bottom: var(--spacing-xl);
} }
* + .bb-margin-xl { * + .bb-margin-xl {
margin-top: var(--spacing-xl); margin-top: var(--spacing-xl);
} }
/* Custom scrollbars */ /* Custom scrollbars */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 8px; width: 8px;
height: 8px; height: 8px;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: var(--spectrum-alias-background-color-default); background: var(--spectrum-alias-background-color-default);
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: var(--spectrum-global-color-gray-400); background-color: var(--spectrum-global-color-gray-400);
border-radius: 4px; border-radius: 4px;
} }
::-webkit-scrollbar-corner { ::-webkit-scrollbar-corner {
background: var(--spectrum-alias-background-color-default); background: var(--spectrum-alias-background-color-default);
} }
html * { html * {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: var(--spectrum-global-color-gray-400) scrollbar-color: var(--spectrum-global-color-gray-400)
var(--spectrum-alias-background-color-default); var(--spectrum-alias-background-color-default);
} }

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

@ -1,16 +1,13 @@
<script> <script>
import { store, automationStore } from "builderStore" import { store, automationStore } from "builderStore"
import { roles, flags } from "stores/backend" import { roles, flags } from "stores/backend"
import { Icon, ActionGroup, Tabs, Tab, notifications } from "@budibase/bbui" import { Icon, Tabs, Tab, notifications, Heading } from "@budibase/bbui"
import DeployModal from "components/deploy/DeployModal.svelte" import DeployModal from "components/deploy/DeployModal.svelte"
import RevertModal from "components/deploy/RevertModal.svelte" import RevertModal from "components/deploy/RevertModal.svelte"
import VersionModal from "components/deploy/VersionModal.svelte"
import { API } from "api" import { API } from "api"
import { auth, admin } from "stores/portal" import { apps } from "stores/portal"
import { isActive, goto, layout, redirect } from "@roxi/routify" import { isActive, goto, layout, redirect } from "@roxi/routify"
import Logo from "assets/bb-emblem.svg"
import { capitalise } from "helpers" import { capitalise } from "helpers"
import UpgradeModal from "components/upgrade/UpgradeModal.svelte"
import { onMount, onDestroy } from "svelte" import { onMount, onDestroy } from "svelte"
export let application export let application
@ -20,14 +17,21 @@
// Sync once when you load the app // Sync once when you load the app
let hasSynced = false let hasSynced = false
$: selected = capitalise( $: selected = capitalise(
$layout.children.find(layout => $isActive(layout.path))?.title ?? "data" $layout.children.find(layout => $isActive(layout.path))?.title ?? "data"
) )
$: appInfo = $apps?.find(app => app.devId === application)
$: published = appInfo?.status === "published"
function previewApp() { const viewPreviewApp = () => {
window.open(`/${application}`) window.open(`/${application}`)
} }
const viewPublishedApp = () => {
window.open(`/app${appInfo?.url}`)
}
async function getPackage() { async function getPackage() {
try { try {
const pkg = await API.fetchAppPackage(application) const pkg = await API.fetchAppPackage(application)
@ -67,6 +71,9 @@
} }
hasSynced = true hasSynced = true
} }
if (!$apps?.length) {
apps.load()
}
}) })
onDestroy(() => { onDestroy(() => {
@ -81,37 +88,43 @@
<div class="root"> <div class="root">
<div class="top-nav"> <div class="top-nav">
<div class="topleftnav"> <div class="topleftnav">
<button class="home-logo"> <Icon
<img size="M"
src={Logo} name="ArrowLeft"
alt="budibase icon" hoverable
on:click={() => $goto(`../../portal/`)} on:click={() => $goto("../")}
/> />
</button> <Heading size="S">{$store.name || "App"}</Heading>
</div>
<div class="tabs"> <div class="topcenternav">
<Tabs {selected}> <Tabs {selected} size="M">
{#each $layout.children as { path, title }} {#each $layout.children as { path, title }}
<Tab <Tab
quiet quiet
selected={$isActive(path)} selected={$isActive(path)}
on:click={topItemNavigate(path)} on:click={topItemNavigate(path)}
title={capitalise(title)} title={capitalise(title)}
/> />
{/each} {/each}
</Tabs> </Tabs>
</div>
<!-- This gets all indexable subroutes and sticks them in the top nav. -->
<ActionGroup />
</div> </div>
<div class="toprightnav"> <div class="toprightnav">
{#if $admin.cloud && $auth.user.account}
<UpgradeModal />
{/if}
<VersionModal />
<RevertModal /> <RevertModal />
<Icon name="Play" hoverable on:click={previewApp} /> <Icon
name="Visibility"
hoverable
on:click={viewPreviewApp}
tooltip="View app preview"
/>
<Icon
name={published ? "Globe" : "GlobeStrike"}
hoverable
disabled={!published}
on:click={viewPublishedApp}
tooltip={published
? "View published app"
: "Your app is not published"}
/>
<DeployModal /> <DeployModal />
</div> </div>
</div> </div>
@ -138,16 +151,37 @@
} }
.top-nav { .top-nav {
flex: 0 0 auto; flex: 0 0 60px;
background: var(--background); background: var(--background);
padding: 0 var(--spacing-xl); padding: 0 var(--spacing-xl);
display: flex; display: flex;
flex-direction: row;
box-sizing: border-box; box-sizing: border-box;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: stretch;
border-bottom: var(--border-light); border-bottom: var(--border-light);
} }
.topleftnav {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: var(--spacing-xl);
}
.topleftnav :global(.spectrum-Heading) {
font-weight: 600;
}
.topcenternav {
display: flex;
position: relative;
margin-bottom: -2px;
}
.topcenternav :global(.spectrum-Tabs-itemLabel) {
font-weight: bold !important;
}
.toprightnav { .toprightnav {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -155,35 +189,4 @@
align-items: center; align-items: center;
gap: var(--spacing-xl); gap: var(--spacing-xl);
} }
.topleftnav {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.tabs {
display: flex;
position: relative;
margin-bottom: -1px;
}
.home-logo {
border-style: none;
background-color: rgba(0, 0, 0, 0);
cursor: pointer;
outline: none;
padding: 0 10px 0 0;
align-items: center;
height: 32px;
}
.home-logo:active {
outline: none;
}
.home-logo img {
height: 30px;
}
</style> </style>

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

@ -18,7 +18,7 @@
} }
</script> </script>
<!-- routify:options index=0 --> <!-- routify:options index=2 -->
<div class="root"> <div class="root">
<div class="nav"> <div class="nav">
<Tabs {selected} on:select={selectFirstDatasource}> <Tabs {selected} on:select={selectFirstDatasource}>

1
packages/builder/src/pages/builder/app/[application]/data/index.svelte
View File

@ -20,4 +20,3 @@
</script> </script>
<CreateDatasourceModal bind:modal /> <CreateDatasourceModal bind:modal />
<!-- routify:options index=false -->

2
packages/builder/src/pages/builder/app/[application]/design/index.svelte
View File

@ -4,5 +4,3 @@
$goto(`./${FrontendTypes.SCREEN}`) $goto(`./${FrontendTypes.SCREEN}`)
</script> </script>
<!-- routify:options index=1 -->

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

@ -1,2 +1,2 @@
<!-- routify:options index=false --> <!-- routify:options index=4 -->
<slot /> <slot />

5
packages/builder/src/pages/builder/app/[application]/settings/index.svelte
View File

@ -1 +1,6 @@
Settings Settings
<!-- {#if $admin.cloud && $auth.user.account}
<UpgradeModal />
{/if}
<VersionModal /> -->