Add branding options to disable toolbar and toolbar buttons
This commit is contained in:
@@ -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
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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
|
||||
|
Reference in New Issue
Block a user