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/client": "2.2.12-alpha.51",
|
||||||
"@budibase/frontend-core": "2.2.12-alpha.51",
|
"@budibase/frontend-core": "2.2.12-alpha.51",
|
||||||
"@budibase/string-templates": "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",
|
"@sentry/browser": "5.19.1",
|
||||||
"@spectrum-css/accordion": "^3.0.24",
|
"@spectrum-css/accordion": "^3.0.24",
|
||||||
"@spectrum-css/page": "^3.0.1",
|
"@spectrum-css/page": "^3.0.1",
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,6 @@
|
||||||
import { routes } from "../.routify/routes"
|
import { routes } from "../.routify/routes"
|
||||||
import { NotificationDisplay, BannerDisplay } from "@budibase/bbui"
|
import { NotificationDisplay, BannerDisplay } from "@budibase/bbui"
|
||||||
import { parse, stringify } from "qs"
|
import { parse, stringify } from "qs"
|
||||||
import HelpIcon from "components/common/HelpIcon.svelte"
|
|
||||||
import LicensingOverlays from "components/portal/licensing/LicensingOverlays.svelte"
|
import LicensingOverlays from "components/portal/licensing/LicensingOverlays.svelte"
|
||||||
|
|
||||||
const queryHandler = { parse, stringify }
|
const queryHandler = { parse, stringify }
|
||||||
|
|
@ -15,7 +14,6 @@
|
||||||
<LicensingOverlays />
|
<LicensingOverlays />
|
||||||
<Router {routes} config={{ queryHandler }} />
|
<Router {routes} config={{ queryHandler }} />
|
||||||
<div class="modal-container" />
|
<div class="modal-container" />
|
||||||
<HelpIcon />
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.modal-container {
|
.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,8 +2,10 @@
|
||||||
import { Button } from "@budibase/bbui"
|
import { Button } from "@budibase/bbui"
|
||||||
import { goto } from "@roxi/routify"
|
import { goto } from "@roxi/routify"
|
||||||
import { auth, admin } from "stores/portal"
|
import { auth, admin } from "stores/portal"
|
||||||
|
import { isEnabled, TENANT_FEATURE_FLAGS } from "helpers/featureFlags"
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
{#if isEnabled(TENANT_FEATURE_FLAGS.LICENSING)}
|
||||||
{#if $admin.cloud && $auth?.user?.accountPortalAccess}
|
{#if $admin.cloud && $auth?.user?.accountPortalAccess}
|
||||||
<Button
|
<Button
|
||||||
cta
|
cta
|
||||||
|
|
@ -25,3 +27,4 @@
|
||||||
Upgrade
|
Upgrade
|
||||||
</Button>
|
</Button>
|
||||||
{/if}
|
{/if}
|
||||||
|
{/if}
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,7 @@
|
||||||
import MobileMenu from "./_components/MobileMenu.svelte"
|
import MobileMenu from "./_components/MobileMenu.svelte"
|
||||||
import Logo from "./_components/Logo.svelte"
|
import Logo from "./_components/Logo.svelte"
|
||||||
import UserDropdown from "./_components/UserDropdown.svelte"
|
import UserDropdown from "./_components/UserDropdown.svelte"
|
||||||
|
import HelpMenu from "components/common/HelpMenu.svelte"
|
||||||
|
|
||||||
let loaded = false
|
let loaded = false
|
||||||
let mobileMenuVisible = false
|
let mobileMenuVisible = false
|
||||||
|
|
@ -46,6 +47,7 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if $auth.user && loaded}
|
{#if $auth.user && loaded}
|
||||||
|
<HelpMenu />
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="nav">
|
<div class="nav">
|
||||||
<div class="branding">
|
<div class="branding">
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue