From 08698bbdb4327ef18720d7a4712581cfc464c539 Mon Sep 17 00:00:00 2001
From: Fornax <wim@fornaxian.tech>
Date: Thu, 30 May 2024 12:28:42 +0200
Subject: [PATCH] Support full screen backgrounds on the filesystem

---
 svelte/src/filesystem/Filesystem.svelte       | 16 +++++------
 svelte/src/filesystem/Menu.svelte             | 15 +++++++++-
 svelte/src/filesystem/Toolbar.svelte          |  7 +++--
 svelte/src/filesystem/edit_window/Branding.js |  2 +-
 .../edit_window/BrandingOptions.svelte        |  8 ++++--
 .../edit_window/SharingOptions.svelte         | 28 +++++++++++++++----
 .../filesystem/filemanager/ListView.svelte    |  2 +-
 .../filesystem/viewers/CustomBanner.svelte    |  4 ++-
 svelte/src/util/Modal.svelte                  | 10 ++-----
 9 files changed, 62 insertions(+), 30 deletions(-)

diff --git a/svelte/src/filesystem/Filesystem.svelte b/svelte/src/filesystem/Filesystem.svelte
index 8d3ec64..8be2ac6 100644
--- a/svelte/src/filesystem/Filesystem.svelte
+++ b/svelte/src/filesystem/Filesystem.svelte
@@ -225,8 +225,13 @@ const update_css = path => document.documentElement.style = branding_from_path(p
 	overflow: hidden;
 
 	/* Force some variable usage that is normally out of scope */
-	background: var(--body_background);
 	color: var(--body_text_color);
+
+	background-image: var(--background_image, var(--background_pattern));
+	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);
 }
 
 /* Headerbar (row 1) */
@@ -236,6 +241,7 @@ const update_css = path => document.documentElement.style = branding_from_path(p
 	flex-direction: row;
 	text-align: left;
 	box-shadow: none;
+	background-color: var(--shaded_background);
 }
 
 /* File preview area (row 2) */
@@ -256,13 +262,7 @@ Toolbar.svelte and the .label max-width in FileStats.svelte */
 
 .file_preview {
 	flex: 1 1 0;
-	border-radius: 8px;
 	overflow: auto;
-	border: 2px solid var(--separator);
-	background-image: var(--background_image, var(--background_pattern));
-	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);
+	border: 1px solid var(--separator);
 }
 </style>
diff --git a/svelte/src/filesystem/Menu.svelte b/svelte/src/filesystem/Menu.svelte
index df18ea0..7c300bf 100644
--- a/svelte/src/filesystem/Menu.svelte
+++ b/svelte/src/filesystem/Menu.svelte
@@ -38,6 +38,7 @@ const click = e => {
 	<div class="menu">
 		{#if window.user.username !== ""}
 			<div class="menu_username">{window.user.username}</div>
+			<div class="separator"></div>
 			<div class="stats_table">
 				<div>Subscription</div>
 				<div>{window.user.subscription.name}</div>
@@ -52,14 +53,20 @@ const click = e => {
 				<div>Transfer used</div>
 				<div>{formatDataVolume(window.user.monthly_transfer_used, 3)}</div>
 			</div>
+			<div class="separator"></div>
 			<Button link_href="/d/me" icon="folder" label="My Filesystem"/>
 			<Button link_href="/filesystem" icon="description" label="Filesystem Guide"/>
+			<div class="separator"></div>
+			<Button link_href="/user/files" icon="image" label="My Files"/>
+			<Button link_href="/user/lists" icon="photo_library" label="My Albums"/>
+			<div class="separator"></div>
 			<Button link_href="/user" icon="person" label="Profile"/>
 			<Button link_href="/user/settings" icon="settings" label="Account Settings"/>
 			<Button link_href="/user/subscription" icon="shopping_cart" label="Subscription"/>
 			<Button link_href="/user/prepaid/transactions" icon="receipt" label="Transactions"/>
 
 			{#if window.user.is_admin}
+				<div class="separator"></div>
 				<Button link_href="/admin" icon="admin_panel_settings" label="Admin Panel"/>
 			{/if}
 		{:else}
@@ -99,12 +106,18 @@ dialog {
 .menu {
 	display: flex;
 	flex-direction: column;
+	max-width: 15em;
 }
 .menu_username {
 	text-align: center;
-	border-bottom: 2px solid var(--separator);
 	font-size: 1.1em;
 }
+.separator {
+	height: 1px;
+	margin: 2px 0;
+	width: 100%;
+	background-color: var(--separator);
+}
 .stats_table {
 	display: grid;
 	grid-template-columns: auto auto;
diff --git a/svelte/src/filesystem/Toolbar.svelte b/svelte/src/filesystem/Toolbar.svelte
index f13ec06..81d2896 100644
--- a/svelte/src/filesystem/Toolbar.svelte
+++ b/svelte/src/filesystem/Toolbar.svelte
@@ -75,7 +75,7 @@ let expand = e => {
 </script>
 
 <div class="toolbar" class:expanded>
-	<div class="separator hidden_horizontal" style="margin-top: 6px;"></div>
+	<div class="separator hidden_horizontal" style="margin-top: 0;"></div>
 
 	<div class="stats_container" on:click={expand} on:keypress={expand} role="button" tabindex="0">
 		<button class="button_expand hidden_vertical" on:click={expand}>
@@ -166,14 +166,15 @@ let expand = e => {
 	overflow-x: hidden;
 	overflow-y: scroll;
 	transition: max-height 0.3s;
+	background-color: var(--shaded_background);
 }
 .grid {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(7.5em, 1fr));
 }
 .separator {
-	height: 2px;
-	margin: 4px 0;
+	height: 1px;
+	margin: 2px 0;
 	width: 100%;
 	background-color: var(--separator);
 }
diff --git a/svelte/src/filesystem/edit_window/Branding.js b/svelte/src/filesystem/edit_window/Branding.js
index 2858099..e27a290 100644
--- a/svelte/src/filesystem/edit_window/Branding.js
+++ b/svelte/src/filesystem/edit_window/Branding.js
@@ -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) {
diff --git a/svelte/src/filesystem/edit_window/BrandingOptions.svelte b/svelte/src/filesystem/edit_window/BrandingOptions.svelte
index 3f389f0..d0e526d 100644
--- a/svelte/src/filesystem/edit_window/BrandingOptions.svelte
+++ b/svelte/src/filesystem/edit_window/BrandingOptions.svelte
@@ -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);
diff --git a/svelte/src/filesystem/edit_window/SharingOptions.svelte b/svelte/src/filesystem/edit_window/SharingOptions.svelte
index c34b29a..256c805 100644
--- a/svelte/src/filesystem/edit_window/SharingOptions.svelte
+++ b/svelte/src/filesystem/edit_window/SharingOptions.svelte
@@ -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>
diff --git a/svelte/src/filesystem/filemanager/ListView.svelte b/svelte/src/filesystem/filemanager/ListView.svelte
index 7a4d77d..83287ee 100644
--- a/svelte/src/filesystem/filemanager/ListView.svelte
+++ b/svelte/src/filesystem/filemanager/ListView.svelte
@@ -74,7 +74,7 @@ export let large_icons = false
 	border-collapse: collapse;
 	border-radius: 8px;
 
-	max-width: 100%;
+	max-width: 99%;
 	width: 1000px;
 }
 .directory > * {
diff --git a/svelte/src/filesystem/viewers/CustomBanner.svelte b/svelte/src/filesystem/viewers/CustomBanner.svelte
index 91fd500..3a367bf 100644
--- a/svelte/src/filesystem/viewers/CustomBanner.svelte
+++ b/svelte/src/filesystem/viewers/CustomBanner.svelte
@@ -35,6 +35,8 @@ const update_links = (path) => {
 <style>
 .container {
 	text-align: center;
+	margin-top: 6px;
+	margin-bottom: 6px;
 }
 .link {
 	display: inline-block;
@@ -43,7 +45,7 @@ const update_links = (path) => {
 	display: inline-block;
 	margin: auto;
 	max-height: 90px;
-	max-width: 100%;
+	max-width: 99%;
 	border-radius: 6px;
 }
 </style>
diff --git a/svelte/src/util/Modal.svelte b/svelte/src/util/Modal.svelte
index 7880db0..f1a17c1 100644
--- a/svelte/src/util/Modal.svelte
+++ b/svelte/src/util/Modal.svelte
@@ -65,7 +65,6 @@ const keydown = e => {
 		<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 		<div
 			class="window"
-			class:small_radius={form !== ""}
 			on:click|stopPropagation
 			role="dialog"
 			aria-modal="true"
@@ -75,9 +74,9 @@ const keydown = e => {
 			<div class="header">
 				<slot name="title">
 					{#if form !== ""}
-						<Button click={hide} icon="close" label="Cancel"/>
+						<Button round click={hide} icon="close"/>
 						<span class="title">{title}</span>
-						<Button highlight type="submit" form={form} click={hide} icon="save" label="Save"/>
+						<Button round highlight type="submit" form={form} click={hide} icon="save" label="Save"/>
 					{:else}
 						<span class="title">{title}</span>
 						<Button round click={hide} icon="close" />
@@ -120,13 +119,10 @@ these padding divs to move it 25% up */
 	max-height: 100%;
 	max-width: 100%;
 	padding: 0;
-	border-radius: 16px 16px 8px 8px;
+	border-radius: 18px 18px 8px 8px;
 	overflow: hidden;
 	text-align: left;
 }
-.small_radius {
-	border-radius: 8px;
-}
 .header {
 	flex-grow: 0;
 	flex-shrink: 0;