Support full screen backgrounds on the filesystem

This commit is contained in:
2024-05-30 12:28:42 +02:00
parent 4d43d5cfd0
commit 08698bbdb4
9 changed files with 62 additions and 30 deletions

View File

@@ -65,7 +65,7 @@ const add_styles = (style, properties) => {
style.body_background = properties.brand_body_color
style.body_text_color = add_contrast(properties.brand_body_color, 75)
style.shaded_background = set_alpha(properties.brand_body_color, 0.8)
style.separator = add_contrast(properties.brand_body_color, 7)
style.separator = add_contrast(properties.brand_body_color, 8)
style.shadow_color = darken(properties.brand_body_color, 0.8)
}
if (properties.brand_card_color) {

View File

@@ -190,8 +190,12 @@ input[type="color"] {
border-radius: 10px;
}
.example_background {
background: var(--background);
color: var(--background_text_color)
color: var(--background_text_color);
background-image: var(--background_image);
background-color: var(--background_pattern_color);
background-size: var(--background_image_size, initial);
background-position: var(--background_image_position, initial);
background-repeat: var(--background_image_repeat, repeat);
}
.example_body {
background: var(--body_background);

View File

@@ -40,6 +40,16 @@ const toggle_example = () => {
}
}
}
const update_shared = e => {
// If sharing is enabled we automatically save the file so the user can copy
// the sharing link. But if the user disables sharing we don't automatically
// save so that the user can't accidentally discard a sharing link that's in
// use
if (shared) {
dispatch("save")
}
}
</script>
<h2>Share this file/directory</h2>
@@ -60,13 +70,19 @@ const toggle_example = () => {
share a directory all the files within the directory are also
accessible from the link.
</p>
<div class="form_grid">
<div>
<input form="edit_form" bind:checked={shared} id="shared" type="checkbox" class="form_input"/>
<label for="shared">Share this file or directory</label>
</div>
<button on:click={() => dispatch("save")}><i class="icon">save</i> Save</button>
<div>
<input
form="edit_form"
bind:checked={shared}
on:change={update_shared}
id="shared"
type="checkbox"
class="form_input"
/>
<label for="shared">Share this file or directory</label>
</div>
<div class="form_grid">
{#if is_shared}
<span>Your sharing link: <a href={share_link}>{share_link}</a></span>
<CopyButton text={share_link}>Copy</CopyButton>