New Help Menu (#9371)
* New Help Menu * design PR feedback * Feedback updates * Feedback updates, font awesome enhancement, upgrade button hidden if licensing is disabled --------- Co-authored-by: Dean <deanhannigan@gmail.com>
This commit is contained in:
Gerard Burns
GitHub
parent
4ed237ed83
commit
09ed767d0b
|
|
@ -75,6 +75,9 @@
|
|||
"@budibase/client": "2.2.12-alpha.51",
|
||||
"@budibase/frontend-core": "2.2.12-alpha.51",
|
||||
"@budibase/string-templates": "2.2.12-alpha.51",
|
||||
"@fortawesome/fontawesome-svg-core": "^6.2.1",
|
||||
"@fortawesome/free-brands-svg-icons": "^6.2.1",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.2.1",
|
||||
"@sentry/browser": "5.19.1",
|
||||
"@spectrum-css/accordion": "^3.0.24",
|
||||
"@spectrum-css/page": "^3.0.1",
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
import { routes } from "../.routify/routes"
|
||||
import { NotificationDisplay, BannerDisplay } from "@budibase/bbui"
|
||||
import { parse, stringify } from "qs"
|
||||
import HelpIcon from "components/common/HelpIcon.svelte"
|
||||
import LicensingOverlays from "components/portal/licensing/LicensingOverlays.svelte"
|
||||
|
||||
const queryHandler = { parse, stringify }
|
||||
|
|
@ -15,7 +14,6 @@
|
|||
<LicensingOverlays />
|
||||
<Router {routes} config={{ queryHandler }} />
|
||||
<div class="modal-container" />
|
||||
<HelpIcon />
|
||||
|
||||
<style>
|
||||
.modal-container {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,31 @@
|
|||
<script context="module">
|
||||
import { dom, library } from "@fortawesome/fontawesome-svg-core"
|
||||
import {
|
||||
faEnvelope,
|
||||
faXmark,
|
||||
faBook,
|
||||
faPlay,
|
||||
faLock,
|
||||
} from "@fortawesome/free-solid-svg-icons"
|
||||
import { faGithub, faDiscord } from "@fortawesome/free-brands-svg-icons"
|
||||
|
||||
library.add(faXmark, faBook, faPlay, faLock, faGithub, faDiscord, faEnvelope)
|
||||
dom.watch()
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export let name
|
||||
</script>
|
||||
|
||||
<span>
|
||||
<i class={name} />
|
||||
</span>
|
||||
|
||||
<style>
|
||||
span {
|
||||
display: contents;
|
||||
}
|
||||
.svg-inline--fa {
|
||||
color: var(--spectrum-body-m-text-color, var(--spectrum-alias-text-color));
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
<script>
|
||||
import { Icon, Body } from "@budibase/bbui"
|
||||
</script>
|
||||
|
||||
<a target="_blank" href="https://github.com/Budibase/budibase/discussions">
|
||||
<div class="inner hoverable">
|
||||
<div class="hidden hoverable">
|
||||
<Body size="S">Need help? Go to our forums</Body>
|
||||
</div>
|
||||
<Icon name="Help" size="XXL" />
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<style>
|
||||
.inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-s);
|
||||
}
|
||||
.inner :global(*) {
|
||||
pointer-events: all;
|
||||
transition: color var(--spectrum-global-animation-duration-100, 130ms);
|
||||
}
|
||||
.inner:hover :global(*) {
|
||||
color: var(--spectrum-alias-icon-color-selected-hover);
|
||||
cursor: pointer;
|
||||
}
|
||||
a {
|
||||
color: inherit;
|
||||
position: absolute;
|
||||
bottom: var(--spacing-m);
|
||||
right: var(--spacing-m);
|
||||
border-radius: 55%;
|
||||
z-index: 99999;
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
.inner:hover .hidden {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,182 @@
|
|||
<script>
|
||||
import FontAwesomeIcon from "./FontAwesomeIcon.svelte"
|
||||
import { Popover, Heading, Body } from "@budibase/bbui"
|
||||
import { licensing } from "stores/portal"
|
||||
import { isEnabled, TENANT_FEATURE_FLAGS } from "helpers/featureFlags"
|
||||
|
||||
$: isPremiumUser = $licensing.license && !$licensing.isFreePlan
|
||||
|
||||
let show
|
||||
let hide
|
||||
let popoverAnchor
|
||||
</script>
|
||||
|
||||
<div bind:this={popoverAnchor} class="help">
|
||||
<button class="openMenu" on:click={show}>Help</button>
|
||||
<Popover
|
||||
class="helpMenuPopoverOverride"
|
||||
bind:show
|
||||
bind:hide
|
||||
anchor={popoverAnchor}
|
||||
>
|
||||
<nav class="helpMenu">
|
||||
<div class="header">
|
||||
<Heading size="XS">Help resources</Heading>
|
||||
<button on:click={hide} class="closeButton">
|
||||
<FontAwesomeIcon name="fa-solid fa-xmark" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="divider" />
|
||||
<a target="_blank" href="https://docs.budibase.com/docs">
|
||||
<div class="icon">
|
||||
<FontAwesomeIcon name="fa-solid fa-book" />
|
||||
</div>
|
||||
<Body size="S">Help docs</Body>
|
||||
</a>
|
||||
<div class="divider" />
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://github.com/Budibase/budibase/discussions"
|
||||
>
|
||||
<div class="icon">
|
||||
<FontAwesomeIcon name="fa-brands fa-github" />
|
||||
</div>
|
||||
<Body size="S">Discussions</Body>
|
||||
</a>
|
||||
<div class="divider" />
|
||||
<a target="_blank" href="https://discord.com/invite/ZepTmGbtfF">
|
||||
<div class="icon">
|
||||
<FontAwesomeIcon name="fa-brands fa-discord" />
|
||||
</div>
|
||||
<Body size="S">Discord</Body>
|
||||
</a>
|
||||
<div class="divider" />
|
||||
<a target="_blank" href="https://vimeo.com/showcase/budibase-university">
|
||||
<div class="icon">
|
||||
<FontAwesomeIcon name="fa-solid fa-play" />
|
||||
</div>
|
||||
<Body size="S">Budibase University</Body>
|
||||
</a>
|
||||
<div class="divider" />
|
||||
{#if isEnabled(TENANT_FEATURE_FLAGS.LICENSING)}
|
||||
<a
|
||||
href={isPremiumUser
|
||||
? "mailto:support@budibase.com"
|
||||
: "/builder/portal/account/usage"}
|
||||
>
|
||||
<div class="premiumLinkContent" class:disabled={!isPremiumUser}>
|
||||
<div class="icon">
|
||||
<FontAwesomeIcon name="fa-solid fa-envelope" />
|
||||
</div>
|
||||
<Body size="S">Email support</Body>
|
||||
</div>
|
||||
{#if !isPremiumUser}
|
||||
<div class="premiumBadge">
|
||||
<div class="icon">
|
||||
<FontAwesomeIcon name="fa-solid fa-lock" />
|
||||
</div>
|
||||
<Body size="XS">Premium</Body>
|
||||
</div>
|
||||
{/if}
|
||||
</a>
|
||||
{/if}
|
||||
</nav>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.help {
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
bottom: var(--spacing-xl);
|
||||
right: 24px;
|
||||
}
|
||||
|
||||
.openMenu {
|
||||
cursor: pointer;
|
||||
background-color: #6a1dc8;
|
||||
border-radius: 100px;
|
||||
color: white;
|
||||
border: none;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
padding: 10px 18px;
|
||||
}
|
||||
|
||||
.helpMenu {
|
||||
background-color: var(--background-alt);
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
nav {
|
||||
min-width: 280px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid var(--spectrum-global-color-gray-300);
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 0 0 16px;
|
||||
}
|
||||
|
||||
.closeButton {
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
color: var(--grey-6);
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
padding: 18px 16px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.closeButton:hover {
|
||||
color: var(--grey-8);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
display: flex;
|
||||
padding: 12px;
|
||||
align-items: center;
|
||||
transition: filter 0.5s;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
background-color: var(--spectrum-global-color-gray-300);
|
||||
}
|
||||
|
||||
a:last-child {
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 13px;
|
||||
margin-right: 7px;
|
||||
min-width: 18px;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.premiumLinkContent {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.premiumBadge {
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
border: var(--border-light);
|
||||
border-radius: 4px;
|
||||
padding: 4px 7px 5px 8px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,26 +2,29 @@
|
|||
import { Button } from "@budibase/bbui"
|
||||
import { goto } from "@roxi/routify"
|
||||
import { auth, admin } from "stores/portal"
|
||||
import { isEnabled, TENANT_FEATURE_FLAGS } from "helpers/featureFlags"
|
||||
</script>
|
||||
|
||||
{#if $admin.cloud && $auth?.user?.accountPortalAccess}
|
||||
<Button
|
||||
cta
|
||||
size="S"
|
||||
on:click
|
||||
on:click={() => {
|
||||
window.open($admin.accountPortalUrl + "/portal/upgrade", "_blank")
|
||||
}}
|
||||
>
|
||||
Upgrade
|
||||
</Button>
|
||||
{:else if !$admin.cloud && $auth.isAdmin}
|
||||
<Button
|
||||
cta
|
||||
size="S"
|
||||
on:click={() => $goto("/builder/portal/account/upgrade")}
|
||||
on:click
|
||||
>
|
||||
Upgrade
|
||||
</Button>
|
||||
{#if isEnabled(TENANT_FEATURE_FLAGS.LICENSING)}
|
||||
{#if $admin.cloud && $auth?.user?.accountPortalAccess}
|
||||
<Button
|
||||
cta
|
||||
size="S"
|
||||
on:click
|
||||
on:click={() => {
|
||||
window.open($admin.accountPortalUrl + "/portal/upgrade", "_blank")
|
||||
}}
|
||||
>
|
||||
Upgrade
|
||||
</Button>
|
||||
{:else if !$admin.cloud && $auth.isAdmin}
|
||||
<Button
|
||||
cta
|
||||
size="S"
|
||||
on:click={() => $goto("/builder/portal/account/upgrade")}
|
||||
on:click
|
||||
>
|
||||
Upgrade
|
||||
</Button>
|
||||
{/if}
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
import MobileMenu from "./_components/MobileMenu.svelte"
|
||||
import Logo from "./_components/Logo.svelte"
|
||||
import UserDropdown from "./_components/UserDropdown.svelte"
|
||||
import HelpMenu from "components/common/HelpMenu.svelte"
|
||||
|
||||
let loaded = false
|
||||
let mobileMenuVisible = false
|
||||
|
|
@ -46,6 +47,7 @@
|
|||
</script>
|
||||
|
||||
{#if $auth.user && loaded}
|
||||
<HelpMenu />
|
||||
<div class="container">
|
||||
<div class="nav">
|
||||
<div class="branding">
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue