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

View File

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

View File

@@ -29,7 +29,7 @@ onMount(() => {
Data transfer limit Data transfer limit
</div> </div>
<div class="feat_normal"> <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 (24 hours). When this threshold is reached your download speed will
be reduced to 1 MiB/s be reduced to 1 MiB/s
</div> </div>

View File

@@ -19,6 +19,9 @@ let header_link = ""
let background_image = "" let background_image = ""
let footer_image = "" let footer_image = ""
let footer_link = "" let footer_link = ""
let disable_download_button = false
let disable_share_button = false
let disable_menu = false
let select_file = t => { let select_file = t => {
currently_selecting = t currently_selecting = t
@@ -55,6 +58,9 @@ let save = async () => {
form.append("background_image", background_image) form.append("background_image", background_image)
form.append("footer_image", footer_image) form.append("footer_image", footer_image)
form.append("footer_link", footer_link) 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 { try {
const resp = await fetch( const resp = await fetch(
@@ -86,6 +92,9 @@ onMount(() => {
background_image = b.background_image ? b.background_image : "" background_image = b.background_image ? b.background_image : ""
footer_image = b.footer_image ? b.footer_image : "" footer_image = b.footer_image ? b.footer_image : ""
footer_link = b.footer_link ? b.footer_link : "" 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> </script>
@@ -202,6 +211,50 @@ onMount(() => {
<CustomBanner src={"/api/file/"+footer_image} link={footer_link}></CustomBanner> <CustomBanner src={"/api/file/"+footer_image} link={footer_link}></CustomBanner>
</div> </div>
{/if} {/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> </section>
<FilePicker <FilePicker