CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-11 23:16:00 +12:00
Code Issues Projects Releases Wiki Activity

Centralise menu logic and show full menu on mobile

Browse source
This commit is contained in:
Andrew Kingston 2023-01-12 16:50:43 +00:00
parent abd84118d9
commit 5d24fe0a13
8 changed files with 179 additions and 130 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
packages/builder/src/pages/builder/portal/_components/MobileMenu.svelte
View file

@ -6,9 +6,9 @@
import UpgradeButton from "./UpgradeButton.svelte"
import { fade } from "svelte/transition"
import Logo from "./Logo.svelte"
import { menu } from "stores/portal"
export let visible = false
export let menu
const dispatch = createEventDispatcher()
@ -28,13 +28,28 @@
<Logo />
</div>
<SideNav>
{#each menu as { title, href }}
<SideNavItem
text={title}
url={href}
active={$isActive(href)}
on:click={close}
/>
{#each $menu as { title, href, subPages }}
{#if !subPages?.length}
<SideNavItem
text={title}
url={href}
active={$isActive(href)}
on:click={close}
/>
{/if}
{/each}
{#each $menu as { title, href, subPages }}
{#if subPages?.length}
<div class="category">{title}</div>
{#each subPages as { title, href }}
<SideNavItem
text={title}
url={href}
active={$isActive(href)}
on:click={close}
/>
{/each}
{/if}
{/each}
</SideNav>
<div>
@ -47,6 +62,13 @@
.mobile-nav {
display: none;
}
.category {
color: var(--spectrum-global-color-gray-600);
font-size: var(--font-size-s);
margin-left: var(--spacing-m);
margin-top: 24px;
margin-bottom: 4px;
}
@media (max-width: 640px) {
.mobile-nav-underlay {

61
packages/builder/src/pages/builder/portal/_layout.svelte
View file

@ -1,9 +1,8 @@
<script>
import { isActive, redirect, goto, url } from "@roxi/routify"
import { Icon, notifications, Tabs, Tab } from "@budibase/bbui"
import { organisation, auth, admin as adminStore } from "stores/portal"
import { organisation, auth, menu } from "stores/portal"
import { onMount } from "svelte"
import { isEnabled, TENANT_FEATURE_FLAGS } from "helpers/featureFlags"
import UpgradeButton from "./_components/UpgradeButton.svelte"
import MobileMenu from "./_components/MobileMenu.svelte"
import Logo from "./_components/Logo.svelte"
@ -13,10 +12,9 @@
let mobileMenuVisible = false
let activeTab = "Apps"
$: menu = buildMenu($auth.isAdmin)
$: $url(), updateActiveTab()
$: $url(), updateActiveTab($menu)
const updateActiveTab = () => {
const updateActiveTab = menu => {
for (let entry of menu) {
if ($isActive(entry.href)) {
if (activeTab !== entry.title) {
@ -27,55 +25,6 @@
}
}
const buildMenu = admin => {
// Standard user and developer pages
let menu = [
{
title: "Apps",
href: "/builder/portal/apps",
},
{
title: "Plugins",
href: "/builder/portal/plugins",
},
]
// Admin only pages
if (admin) {
menu = [
{
title: "Apps",
href: "/builder/portal/apps",
},
{
title: "Users",
href: "/builder/portal/users/users",
},
{
title: "Plugins",
href: "/builder/portal/plugins",
},
{
title: "Settings",
href: "/builder/portal/settings",
},
]
}
// Check if allowed access to account section
if (
isEnabled(TENANT_FEATURE_FLAGS.LICENSING) &&
($auth?.user?.accountPortalAccess || (!$adminStore.cloud && admin))
) {
menu.push({
title: "Account",
href: "/builder/portal/account",
})
}
return menu
}
const showMobileMenu = () => (mobileMenuVisible = true)
const hideMobileMenu = () => (mobileMenuVisible = false)
@ -104,7 +53,7 @@
</div>
<div class="desktop">
<Tabs selected={activeTab}>
{#each menu as { title, href }}
{#each $menu as { title, href }}
<Tab {title} on:click={() => $goto(href)} />
{/each}
</Tabs>
@ -122,7 +71,7 @@
<div class="main">
<slot />
</div>
<MobileMenu visible={mobileMenuVisible} {menu} on:close={hideMobileMenu} />
<MobileMenu visible={mobileMenuVisible} on:close={hideMobileMenu} />
</div>
{/if}

35
packages/builder/src/pages/builder/portal/account/_layout.svelte
View file

@ -1,40 +1,19 @@
<script>
import { url, isActive } from "@roxi/routify"
import { isActive } from "@roxi/routify"
import { Page } from "@budibase/bbui"
import { Content, SideNav, SideNavItem } from "components/portal/page"
import { admin, auth } from "stores/portal"
import { menu } from "stores/portal"
$: pages = $menu.find(x => x.title === "Account").subPages
</script>
<Page narrow>
<Content>
<div slot="side-nav">
<SideNav>
<!-- Always show usage in self-host or cloud if licensing enabled-->
<SideNavItem
text="Usage"
url={$url("./usage")}
active={$isActive("./usage")}
/>
<!-- Show the relevant hosting upgrade page-->
{#if $admin.cloud && $auth?.user?.accountPortalAccess}
<SideNavItem
text="Upgrade"
url={$admin.accountPortalUrl + "/portal/upgrade"}
/>
{:else if !$admin.cloud && admin}
<SideNavItem
text="Upgrade"
url={$url("./upgrade")}
active={$isActive("./upgrade")}
/>
{/if}
<!-- Show the billing page to licensed account holders in cloud -->
{#if $auth?.user?.accountPortalAccess && $auth.user.account.stripeCustomerId}
<SideNavItem
text="Billing"
url={$admin.accountPortalUrl + "/portal/billing"}
/>
{/if}
{#each pages as { title, href }}
<SideNavItem text={title} url={href} active={$isActive(href)} />
{/each}
</SideNav>
</div>
<slot />

30
packages/builder/src/pages/builder/portal/settings/_layout.svelte
View file

@ -1,38 +1,20 @@
<script>
import { url, isActive } from "@roxi/routify"
import { isActive } from "@roxi/routify"
import { Page } from "@budibase/bbui"
import { Content, SideNav, SideNavItem } from "components/portal/page"
import { admin } from "stores/portal"
import { menu } from "stores/portal"
$: wide = $isActive("./email/:template")
$: pages = $menu.find(x => x.title === "Settings").subPages
</script>
<Page>
<Content narrow={!wide}>
<div slot="side-nav">
<SideNav>
<SideNavItem
text="Auth"
url={$url("./auth")}
active={$isActive("./auth")}
/>
<SideNavItem
text="Email"
url={$url("./email")}
active={$isActive("./email")}
/>
<SideNavItem
text="Organisation"
url={$url("./organisation")}
active={$isActive("./organisation")}
/>
{#if !$admin.cloud}
<SideNavItem
text="Version"
url={$url("./version")}
active={$isActive("./version")}
/>
{/if}
{#each pages as { title, href }}
<SideNavItem text={title} url={href} active={$isActive(href)} />
{/each}
</SideNav>
</div>
<slot />

20
packages/builder/src/pages/builder/portal/users/_layout.svelte
View file

@ -1,28 +1,20 @@
<script>
import { Page } from "@budibase/bbui"
import { SideNav, SideNavItem, Content } from "components/portal/page"
import { isActive, url } from "@roxi/routify"
import { isEnabled, TENANT_FEATURE_FLAGS } from "helpers/featureFlags"
import { isActive } from "@roxi/routify"
import { menu } from "stores/portal"
$: wide = $isActive("./users/index") || $isActive("./groups/index")
$: pages = $menu.find(x => x.title === "Users").subPages
</script>
<Page>
<Content narrow={!wide}>
<div slot="side-nav">
<SideNav>
<SideNavItem
text="Users"
url={$url("./users")}
active={$isActive("./users")}
/>
{#if isEnabled(TENANT_FEATURE_FLAGS.USER_GROUPS)}
<SideNavItem
text="Groups"
url={$url("./groups")}
active={$isActive("./groups")}
/>
{/if}
{#each pages as { title, href }}
<SideNavItem text={title} url={href} active={$isActive(href)} />
{/each}
</SideNav>
</div>
<slot />

4
packages/builder/src/pages/builder/portal/users/index.svelte Normal file
View file

@ -0,0 +1,4 @@
<script>
import { redirect } from "@roxi/routify"
$redirect("./users")
</script>

1
packages/builder/src/stores/portal/index.js
View file

@ -11,3 +11,4 @@ export { groups } from "./groups"
export { plugins } from "./plugins"
export { backups } from "./backups"
export { overview } from "./overview"
export { menu } from "./menu"

120
packages/builder/src/stores/portal/menu.js Normal file
View file

@ -0,0 +1,120 @@
import { derived } from "svelte/store"
import { isEnabled, TENANT_FEATURE_FLAGS } from "helpers/featureFlags"
import { admin } from "./admin"
import { auth } from "./auth"
export const menu = derived([admin, auth], ([$admin, $auth]) => {
// Standard user and developer pages
let menu = [
{
title: "Apps",
href: "/builder/portal/apps",
},
{
title: "Plugins",
href: "/builder/portal/plugins",
},
]
// Admin only pages
if ($auth.isAdmin) {
// Determine user sub pages
let userSubPages = [
{
title: "Users",
href: "/builder/portal/users/users",
},
]
if (isEnabled(TENANT_FEATURE_FLAGS.USER_GROUPS)) {
userSubPages.push({
title: "Groups",
href: "/builder/portal/users/groups",
})
}
// Determine settings sub pages
let settingsSubPages = [
{
title: "Auth",
href: "/builder/portal/settings/auth",
},
{
title: "Email",
href: "/builder/portal/settings/email",
},
{
title: "Organisation",
href: "/builder/portal/settings/organisation",
},
]
if (!$admin.cloud) {
settingsSubPages.push({
title: "Version",
href: "/builder/portal/settings/version",
})
}
menu = [
{
title: "Apps",
href: "/builder/portal/apps",
},
{
title: "Users",
href: "/builder/portal/users",
subPages: userSubPages,
},
{
title: "Plugins",
href: "/builder/portal/plugins",
},
{
title: "Settings",
href: "/builder/portal/settings",
subPages: settingsSubPages,
},
]
}
// Check if allowed access to account section
if (
isEnabled(TENANT_FEATURE_FLAGS.LICENSING) &&
($auth?.user?.accountPortalAccess || (!$admin.cloud && $auth.isAdmin))
) {
// Determine account sub pages
let accountSubPages = [
{
title: "Usage",
href: "/builder/portal/account/usage",
},
]
if ($admin.cloud && $auth?.user?.accountPortalAccess) {
accountSubPages.push({
title: "Upgrade",
href: $admin.accountPortalUrl + "/portal/upgrade",
})
} else if (!$admin.cloud && admin) {
accountSubPages.push({
title: "Upgrade",
href: "/builder/portal/account/upgrade",
})
}
if (
$auth?.user?.accountPortalAccess &&
$auth.user.account.stripeCustomerId
) {
accountSubPages.push({
title: "Billing",
href: $admin.accountPortalUrl + "/portal/billing",
})
}
menu.push({
title: "Account",
href: "/builder/portal/account",
subPages: accountSubPages,
})
}
return menu
})