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>
<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"

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

@ -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);
}

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

@ -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>

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

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

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

@ -20,4 +20,3 @@
</script>
<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}`)
</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 />

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

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