diff --git a/packages/builder/src/components/deploy/RevertModal.svelte b/packages/builder/src/components/deploy/RevertModal.svelte
index 717c55f05e..a8f9d8f6e3 100644
--- a/packages/builder/src/components/deploy/RevertModal.svelte
+++ b/packages/builder/src/components/deploy/RevertModal.svelte
@@ -28,7 +28,12 @@
}
</script>
-<Icon name="Revert" hoverable on:click={revertModal.show} />
+<Icon
+ name="Revert"
+ hoverable
+ on:click={revertModal.show}
+ tooltip="Revert changes"
+/>
<Modal bind:this={revertModal}>
<ModalContent
title="Revert Changes"
diff --git a/packages/builder/src/global.css b/packages/builder/src/global.css
index eb80268a3d..e0ebecedf9 100644
--- a/packages/builder/src/global.css
+++ b/packages/builder/src/global.css
@@ -1,76 +1,77 @@
-html, body {
- padding: 0;
- margin: 0;
- height: 100%;
- width: 100%;
- min-height: 100%;
+html,
+body {
+ padding: 0;
+ margin: 0;
+ height: 100%;
+ width: 100%;
+ min-height: 100%;
}
body {
- --background: var(--spectrum-alias-background-color-primary);
- --background-alt: var(--spectrum-alias-background-color-secondary);
- --border-light: 1px solid var(--spectrum-global-color-gray-300);
- --border-dark: 1px solid var(--spectrum-global-color-gray-400);
- --ink: var(--spectrum-alias-text-color);
- --grey-1: var(--spectrum-global-color-gray-100);
- --grey-2: var(--spectrum-global-color-gray-200);
- --grey-3: var(--spectrum-global-color-gray-300);
- --grey-4: var(--spectrum-global-color-gray-400);
- --grey-5: var(--spectrum-global-color-gray-500);
- --grey-6: var(--spectrum-global-color-gray-600);
- --grey-7: var(--spectrum-global-color-gray-700);
- --grey-8: var(--spectrum-global-color-gray-800);
- --grey-9: var(--spectrum-global-color-gray-900);
+ --background: var(--spectrum-alias-background-color-primary);
+ --background-alt: var(--spectrum-alias-background-color-secondary);
+ --border-light: 2px solid var(--spectrum-global-color-gray-200);
+ --border-dark: 1px solid var(--spectrum-global-color-gray-400);
+ --ink: var(--spectrum-alias-text-color);
+ --grey-1: var(--spectrum-global-color-gray-100);
+ --grey-2: var(--spectrum-global-color-gray-200);
+ --grey-3: var(--spectrum-global-color-gray-300);
+ --grey-4: var(--spectrum-global-color-gray-400);
+ --grey-5: var(--spectrum-global-color-gray-500);
+ --grey-6: var(--spectrum-global-color-gray-600);
+ --grey-7: var(--spectrum-global-color-gray-700);
+ --grey-8: var(--spectrum-global-color-gray-800);
+ --grey-9: var(--spectrum-global-color-gray-900);
- font-family: var(--font-sans);
- color: var(--ink);
- background-color: var(--background-alt);
+ font-family: var(--font-sans);
+ color: var(--ink);
+ background-color: var(--background-alt);
}
#app {
- height: 100%;
- box-sizing: border-box;
- overflow: hidden;
+ height: 100%;
+ box-sizing: border-box;
+ overflow: hidden;
}
.hoverable:hover {
- cursor: pointer;
+ cursor: pointer;
}
a {
- text-decoration: none;
+ text-decoration: none;
}
/* Top bottom spacing */
.bb-margin-m {
- margin-bottom: var(--spacing-m);
+ margin-bottom: var(--spacing-m);
}
* + .bb-margin-m {
- margin-top: var(--spacing-m);
+ margin-top: var(--spacing-m);
}
.bb-margin-xl {
- margin-bottom: var(--spacing-xl);
+ margin-bottom: var(--spacing-xl);
}
* + .bb-margin-xl {
- margin-top: var(--spacing-xl);
+ margin-top: var(--spacing-xl);
}
/* Custom scrollbars */
::-webkit-scrollbar {
- width: 8px;
- height: 8px;
+ width: 8px;
+ height: 8px;
}
::-webkit-scrollbar-track {
- background: var(--spectrum-alias-background-color-default);
+ background: var(--spectrum-alias-background-color-default);
}
::-webkit-scrollbar-thumb {
- background-color: var(--spectrum-global-color-gray-400);
- border-radius: 4px;
+ background-color: var(--spectrum-global-color-gray-400);
+ border-radius: 4px;
}
::-webkit-scrollbar-corner {
- background: var(--spectrum-alias-background-color-default);
+ background: var(--spectrum-alias-background-color-default);
}
html * {
- scrollbar-width: thin;
- scrollbar-color: var(--spectrum-global-color-gray-400)
+ scrollbar-width: thin;
+ scrollbar-color: var(--spectrum-global-color-gray-400)
var(--spectrum-alias-background-color-default);
-}
\ No newline at end of file
+}
diff --git a/packages/builder/src/pages/builder/app/[application]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
index 080ea1f616..42d5f61431 100644
--- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
@@ -1,16 +1,13 @@
<script>
import { store, automationStore } from "builderStore"
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 RevertModal from "components/deploy/RevertModal.svelte"
- import VersionModal from "components/deploy/VersionModal.svelte"
import { API } from "api"
- import { auth, admin } from "stores/portal"
+ import { apps } from "stores/portal"
import { isActive, goto, layout, redirect } from "@roxi/routify"
- import Logo from "assets/bb-emblem.svg"
import { capitalise } from "helpers"
- import UpgradeModal from "components/upgrade/UpgradeModal.svelte"
import { onMount, onDestroy } from "svelte"
export let application
@@ -20,14 +17,21 @@
// Sync once when you load the app
let hasSynced = false
+
$: selected = capitalise(
$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}`)
}
+ const viewPublishedApp = () => {
+ window.open(`/app${appInfo?.url}`)
+ }
+
async function getPackage() {
try {
const pkg = await API.fetchAppPackage(application)
@@ -67,6 +71,9 @@
}
hasSynced = true
}
+ if (!$apps?.length) {
+ apps.load()
+ }
})
onDestroy(() => {
@@ -81,37 +88,43 @@
<div class="root">
<div class="top-nav">
<div class="topleftnav">
- <button class="home-logo">
- <img
- src={Logo}
- alt="budibase icon"
- on:click={() => $goto(`../../portal/`)}
- />
- </button>
-
- <div class="tabs">
- <Tabs {selected}>
- {#each $layout.children as { path, title }}
- <Tab
- quiet
- selected={$isActive(path)}
- on:click={topItemNavigate(path)}
- title={capitalise(title)}
- />
- {/each}
- </Tabs>
- </div>
-
- <!-- This gets all indexable subroutes and sticks them in the top nav. -->
- <ActionGroup />
+ <Icon
+ size="M"
+ name="ArrowLeft"
+ hoverable
+ on:click={() => $goto("../")}
+ />
+ <Heading size="S">{$store.name || "App"}</Heading>
+ </div>
+ <div class="topcenternav">
+ <Tabs {selected} size="M">
+ {#each $layout.children as { path, title }}
+ <Tab
+ quiet
+ selected={$isActive(path)}
+ on:click={topItemNavigate(path)}
+ title={capitalise(title)}
+ />
+ {/each}
+ </Tabs>
</div>
<div class="toprightnav">
- {#if $admin.cloud && $auth.user.account}
- <UpgradeModal />
- {/if}
- <VersionModal />
<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 />
</div>
</div>
@@ -138,16 +151,37 @@
}
.top-nav {
- flex: 0 0 auto;
+ flex: 0 0 60px;
background: var(--background);
padding: 0 var(--spacing-xl);
display: flex;
+ flex-direction: row;
box-sizing: border-box;
justify-content: space-between;
- align-items: center;
+ align-items: stretch;
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 {
display: flex;
flex-direction: row;
@@ -155,35 +189,4 @@
align-items: center;
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>
diff --git a/packages/builder/src/pages/builder/app/[application]/data/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/data/_layout.svelte
index 9664ebbd09..f5f5c9d977 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/_layout.svelte
@@ -18,7 +18,7 @@
}
</script>
-<!-- routify:options index=0 -->
+<!-- routify:options index=2 -->
<div class="root">
<div class="nav">
<Tabs {selected} on:select={selectFirstDatasource}>
diff --git a/packages/builder/src/pages/builder/app/[application]/data/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/index.svelte
index de9a392f9c..70c3d4481a 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/index.svelte
@@ -20,4 +20,3 @@
</script>
<CreateDatasourceModal bind:modal />
-<!-- routify:options index=false -->
diff --git a/packages/builder/src/pages/builder/app/[application]/design/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/index.svelte
index 1a454df4db..4c72ebe7a2 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/index.svelte
@@ -4,5 +4,3 @@
$goto(`./${FrontendTypes.SCREEN}`)
</script>
-
-<!-- routify:options index=1 -->
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
index eff7c155d3..597bf1518d 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
@@ -1,2 +1,2 @@
-<!-- routify:options index=false -->
+<!-- routify:options index=4 -->
<slot />
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/index.svelte b/packages/builder/src/pages/builder/app/[application]/settings/index.svelte
index 163d304af4..5008432fee 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/index.svelte
@@ -1 +1,6 @@
Settings
+
+<!-- {#if $admin.cloud && $auth.user.account}
+ <UpgradeModal />
+{/if}
+<VersionModal /> -->