CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-06 15:00:49 +12:00
Code Issues Projects Releases Wiki Activity

Allow logo in top navigation to be a link (#12868)

Browse source 
* Add support for logo link

* Add link to logo

---------

Co-authored-by: Andrew Kingston <andrew@kingston.dev>
This commit is contained in:
melohagan 2024-02-06 13:08:37 +00:00 committed by GitHub
parent bfc0cd305e
commit e27772d93f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 75 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte
View file

@ -15,10 +15,15 @@
Checkbox,
notifications,
Select,
Combobox,
} from "@budibase/bbui"
import { selectedScreen, store } from "builderStore"
import { DefaultAppTheme } from "constants"
$: screenRouteOptions = $store.screens
.map(screen => screen.routing?.route)
.filter(x => x != null)
const updateShowNavigation = async e => {
await store.actions.screens.updateSetting(
get(selectedScreen),
@ -107,23 +112,6 @@
on:change={e => update("navWidth", e.detail)}
/>
{/if}
<div class="label">
<Label size="M">Show logo</Label>
</div>
<Checkbox
value={!$store.navigation.hideLogo}
on:change={e => update("hideLogo", !e.detail)}
/>
{#if !$store.navigation.hideLogo}
<div class="label">
<Label size="M">Logo URL</Label>
</div>
<Input
value={$store.navigation.logoUrl}
on:change={e => update("logoUrl", e.detail)}
updateOnChange={false}
/>
{/if}
<div class="label">
<Label size="M">Show title</Label>
</div>
@ -160,6 +148,47 @@
/>
</div>
</div>
<div class="divider" />
<div class="customizeSection">
<div class="subheading">
<Detail>Logo</Detail>
</div>
<div class="controls">
<div class="label">
<Label size="M">Show logo</Label>
</div>
<Checkbox
value={!$store.navigation.hideLogo}
on:change={e => update("hideLogo", !e.detail)}
/>
{#if !$store.navigation.hideLogo}
<div class="label">
<Label size="M">Logo image URL</Label>
</div>
<Input
value={$store.navigation.logoUrl}
on:change={e => update("logoUrl", e.detail)}
updateOnChange={false}
/>
<div class="label">
<Label size="M">Logo link URL</Label>
</div>
<Combobox
value={$store.navigation.logoLinkUrl}
on:change={e => update("logoLinkUrl", e.detail)}
options={screenRouteOptions}
/>
<div class="label">
<Label size="M">New tab</Label>
</div>
<Checkbox
value={!!$store.navigation.openLogoLinkInNewTab}
on:change={e => update("openLogoLinkInNewTab", !!e.detail)}
/>
{/if}
</div>
</div>
{/if}
</Panel>

30
packages/client/src/components/app/Layout.svelte
View file

@ -33,6 +33,8 @@
export let navTextColor
export let navWidth
export let pageWidth
export let logoLinkUrl
export let openLogoLinkInNewTab
export let embedded = false
@ -150,6 +152,16 @@
}
return style
}
const getSanitizedUrl = (url, openInNewTab) => {
if (!isInternal(url)) {
return ensureExternal(url)
}
if (openInNewTab) {
return `#${url}`
}
return url
}
</script>
<div
@ -192,7 +204,23 @@
{/if}
<div class="logo">
{#if !hideLogo}
<img src={logoUrl || "/builder/bblogo.png"} alt={title} />
{#if logoLinkUrl && isInternal(logoLinkUrl) && !openLogoLinkInNewTab}
<a
href={getSanitizedUrl(logoLinkUrl, openLogoLinkInNewTab)}
use:linkable
>
<img src={logoUrl || "/builder/bblogo.png"} alt={title} />
</a>
{:else if logoLinkUrl}
<a
target={openLogoLinkInNewTab ? "_blank" : "_self"}
href={getSanitizedUrl(logoLinkUrl, openLogoLinkInNewTab)}
>
<img src={logoUrl || "/builder/bblogo.png"} alt={title} />
</a>
{:else}
<img src={logoUrl || "/builder/bblogo.png"} alt={title} />
{/if}
{/if}
{#if !hideTitle && title}
<Heading size="S">{title}</Heading>