Add branding options to disable toolbar and toolbar buttons

This commit is contained in:
2023-05-16 14:18:44 +02:00
parent 80a1085f78
commit c4cd2e1ee5
4 changed files with 101 additions and 27 deletions

View File

@@ -241,6 +241,9 @@ let custom_header_link = ""
let custom_background = ""
let custom_footer = ""
let custom_footer_link = ""
let disable_download_button = false
let disable_share_button = false
let disable_menu = false
const apply_customizations = file => {
if (!file.branding) {
return
@@ -257,6 +260,18 @@ const apply_customizations = file => {
if (file.branding.footer_link) {
custom_footer_link = file.branding.footer_link
}
if (file.branding.disable_download_button && !file.can_edit) {
disable_download_button = true
}
if (file.branding.disable_share_button && !file.can_edit) {
disable_share_button = true
}
if (file.branding.disable_menu && !file.can_edit) {
disable_menu = true
if (toolbar_visible) {
toolbar_toggle()
}
}
if (file.branding.background_image) {
custom_background = window.api_endpoint+"/file/"+file.branding.background_image
@@ -380,13 +395,15 @@ const keyboard_event = evt => {
<LoadingIndicator loading={loading}/>
<div class="headerbar">
<button
on:click={toolbar_toggle}
class="button_toggle_toolbar round"
class:button_highlight={toolbar_visible}
title="Open or close the toolbar">
<i class="icon">menu</i>
</button>
{#if !disable_menu}
<button
on:click={toolbar_toggle}
class="button_toggle_toolbar round"
class:button_highlight={toolbar_visible}
title="Open or close the toolbar">
<i class="icon">menu</i>
</button>
{/if}
<a
href="/"
@@ -431,7 +448,7 @@ const keyboard_event = evt => {
<div class="separator"></div>
{#if view === "file" && file.can_download}
{#if view === "file" && file.can_download && !disable_download_button}
<button
on:click={downloader.download_file}
class="toolbar_button"
@@ -441,7 +458,7 @@ const keyboard_event = evt => {
</button>
{/if}
{#if is_list && list_downloadable}
{#if is_list && list_downloadable && !disable_download_button}
<button
on:click={downloader.download_list}
class="toolbar_button"
@@ -469,14 +486,16 @@ const keyboard_event = evt => {
</span>
</button>
<button
on:click={toggle_sharebar}
class="toolbar_button"
class:button_highlight={sharebar_visible}
title="Share this file on social media">
<i class="icon">share</i>
<span>Share</span>
</button>
{#if !disable_share_button}
<button
on:click={toggle_sharebar}
class="toolbar_button"
class:button_highlight={sharebar_visible}
title="Share this file on social media">
<i class="icon">share</i>
<span>Share</span>
</button>
{/if}
<button
class="toolbar_button"
@@ -536,14 +555,16 @@ const keyboard_event = evt => {
</button>
{/if}
<button
class="toolbar_button"
title="Include this file in your own webpages"
on:click={embed_window.toggle}
class:button_highlight={embed_visible}>
<i class="icon">code</i>
<span>E<u>m</u>bed</span>
</button>
{#if !disable_download_button}
<button
class="toolbar_button"
title="Include this file in your own webpages"
on:click={embed_window.toggle}
class:button_highlight={embed_visible}>
<i class="icon">code</i>
<span>E<u>m</u>bed</span>
</button>
{/if}
{#if view === "file"}
<button

View File

@@ -80,7 +80,7 @@ const node_icon = node => {
{/if}
{#if state.permissions.update}
<button class="small_button" on:click|preventDefault|stopPropagation={() => {dispatch("node_settings", index)}}>
<i class="icon">settings</i>
<i class="icon">edit</i>
</button>
{/if}
</td>

View File

@@ -29,7 +29,7 @@ onMount(() => {
Data transfer limit
</div>
<div class="feat_normal">
Download limit of <span class="text_highlight">20 GB</span> per day
Download limit of <span class="text_highlight">10 GB</span> per day
(24 hours). When this threshold is reached your download speed will
be reduced to 1 MiB/s
</div>

View File

@@ -19,6 +19,9 @@ let header_link = ""
let background_image = ""
let footer_image = ""
let footer_link = ""
let disable_download_button = false
let disable_share_button = false
let disable_menu = false
let select_file = t => {
currently_selecting = t
@@ -55,6 +58,9 @@ let save = async () => {
form.append("background_image", background_image)
form.append("footer_image", footer_image)
form.append("footer_link", footer_link)
form.append("disable_download_button", disable_download_button)
form.append("disable_share_button", disable_share_button)
form.append("disable_menu", disable_menu)
try {
const resp = await fetch(
@@ -86,6 +92,9 @@ onMount(() => {
background_image = b.background_image ? b.background_image : ""
footer_image = b.footer_image ? b.footer_image : ""
footer_link = b.footer_link ? b.footer_link : ""
disable_download_button = b.disable_download_button ? b.disable_download_button : false
disable_share_button = b.disable_share_button ? b.disable_share_button : false
disable_menu = b.disable_menu ? b.disable_menu : false
}
})
</script>
@@ -202,6 +211,50 @@ onMount(() => {
<CustomBanner src={"/api/file/"+footer_image} link={footer_link}></CustomBanner>
</div>
{/if}
<h3>Toolbar buttons</h3>
<p>
If you don't want to make it obvious that your files can be downloaded
or shared while still allowing people to view them through the site you
can use these options.
</p>
<p>
The buttons will be hidden, however your files can still be downloaded
and shared through the API. The changes are purely cosmetic.
</p>
<p>
For convenience these options only apply when other people view your
files. The buttons are still available to you. If you want to see the
effects you can open your file in an incognito window.
</p>
Disable download button:
<button on:click={() => {disable_download_button = !disable_download_button; save()}}>
{#if disable_download_button}
<i class="icon">check</i> ON (click to turn off)
{:else}
<i class="icon">close</i> OFF (click to turn on)
{/if}
</button>
<br/>
Disable share button:
<button on:click={() => {disable_share_button = !disable_share_button; save()}}>
{#if disable_share_button}
<i class="icon">check</i> ON (click to turn off)
{:else}
<i class="icon">close</i> OFF (click to turn on)
{/if}
</button>
<p>
You can also choose the hide the menu bar altogether
</p>
Disable menu:
<button on:click={() => {disable_menu = !disable_menu; save()}}>
{#if disable_menu}
<i class="icon">check</i> ON (click to turn off)
{:else}
<i class="icon">close</i> OFF (click to turn on)
{/if}
</button>
</section>
<FilePicker