Fix branding window defaulting everything to black

svelte/src/filesystem/edit_window/Branding.ts

@@ -5,36 +5,36 @@ import rgb2hex from "pure-color/convert/rgb2hex";
 import type { FSNode, FSNodeProperties } from "lib/FilesystemAPI.svelte";
 
 type Style = {
-	input_background: string,
+	input_background?: string,
-	input_hover_background: string,
+	input_hover_background?: string,
-	input_text: string,
+	input_text?: string,
-	highlight_color: string,
+	highlight_color?: string,
-	highlight_background: string,
+	highlight_background?: string,
-	highlight_text_color: string,
+	highlight_text_color?: string,
-	link_color: string,
+	link_color?: string,
-	danger_color: string,
+	danger_color?: string,
-	danger_text_color: string,
+	danger_text_color?: string,
-	background_color: string,
+	background_color?: string,
-	background: string,
+	background?: string,
-	background_text_color: string,
+	background_text_color?: string,
-	background_pattern_color: string,
+	background_pattern_color?: string,
-	body_color: string,
+	body_color?: string,
-	body_background: string,
+	body_background?: string,
-	body_text_color: string,
+	body_text_color?: string,
-	shaded_background: string,
+	shaded_background?: string,
-	separator: string,
+	separator?: string,
-	shadow_color: string,
+	shadow_color?: string,
-	card_color: string,
+	card_color?: string,
-	background_image: string,
+	background_image?: string,
-	background_image_size: string,
+	background_image_size?: string,
-	background_image_position: string,
+	background_image_position?: string,
-	background_image_repeat: string,
+	background_image_repeat?: string,
 }
 
 // Generate a branding style from a file's properties map
 export const branding_from_path = (path: Array<FSNode>) => {
-	let style = <Style>{}
+	const style = {}
-	for (let node of path) {
+	for (const node of path) {
 		add_styles(style, node.properties)
 	}
 	last_generated_style = style
@@ -43,9 +43,9 @@ export const branding_from_path = (path: Array<FSNode>) => {
 
 // The last style which was generated is cached, when we don't have a complete
 // path to generate the style with we will use the cached style as a basis
-let last_generated_style = <Style>{}
+let last_generated_style: Style = {}
-export const branding_from_node = (node: FSNode) => {
+export const branding_from_props = (props: FSNodeProperties) => {
-	add_styles(last_generated_style, node.properties)
+	add_styles(last_generated_style, props)
 	return gen_css(last_generated_style)
 }
 

svelte/src/filesystem/edit_window/BrandingOptions.svelte

@@ -1,31 +1,31 @@
 <script lang="ts">
-import { run } from 'svelte/legacy';
-import { createEventDispatcher } from "svelte";
 import ThemePresets from "./ThemePresets.svelte";
 import { fs_update, fs_node_type, type FSNode, type NodeOptions, type FSPermissions } from "lib/FilesystemAPI.svelte";
 import CustomBanner from "filesystem/viewers/CustomBanner.svelte";
 import HelpButton from "layout/HelpButton.svelte";
 import FilePicker from "filesystem/filemanager/FilePicker.svelte";
-let dispatch = createEventDispatcher()
+import { branding_from_props } from './Branding';
 
 let {
 	file = $bindable(),
 	options = $bindable(),
-	enabled = $bindable()
+	enabled = $bindable(),
+	custom_css = $bindable(),
 }: {
-	file: FSNode;
+	file: FSNode
-	options: NodeOptions;
+	options: NodeOptions
-	enabled: boolean;
+	enabled: boolean
+	custom_css: string
 } = $props();
 
-const update_colors = (options: NodeOptions) => {
+$effect(() => {
 	if (enabled) {
 		options.branding_enabled = "true"
-		dispatch("style_change")
+		custom_css = branding_from_props(options)
 	} else {
 		options.branding_enabled = ""
 	}
-}
+})
 
 let picker: FilePicker = $state()
 let picking = ""
@@ -68,9 +68,6 @@ const handle_picker = async (nodes: FSNode[]) => {
 }
 
 let highlight_info = $state(false)
-run(() => {
-	update_colors(options)
-});
 </script>
 
 <fieldset>
@@ -99,7 +96,7 @@ run(() => {
 		<div style="display: inline-block">Highlight</div>
 		<HelpButton bind:toggle={highlight_info}/>
 	</div>
-	<input type="color" bind:value={options.brand_highlight_color}/>
+	<input type="color" value={options.brand_highlight_color} onchange={e => options.brand_highlight_color = (e.target as HTMLInputElement).value}/>
 	<input type="text" bind:value={options.brand_highlight_color}/>
 	{#if highlight_info}
 		<p class="span3">
@@ -110,19 +107,19 @@ run(() => {
 		</p>
 	{/if}
 	<div>Button and input</div>
-	<input type="color" bind:value={options.brand_input_color}/>
+	<input type="color" value={options.brand_input_color} onchange={e => options.brand_input_color = (e.target as HTMLInputElement).value}/>
 	<input type="text" bind:value={options.brand_input_color}/>
 	<div>Delete button</div>
-	<input type="color" bind:value={options.brand_danger_color}/>
+	<input type="color" value={options.brand_danger_color} onchange={e => options.brand_danger_color = (e.target as HTMLInputElement).value}/>
 	<input type="text" bind:value={options.brand_danger_color}/>
 	<div>Background</div>
-	<input type="color" bind:value={options.brand_background_color}/>
+	<input type="color" value={options.brand_background_color} onchange={e => options.brand_background_color = (e.target as HTMLInputElement).value}/>
 	<input type="text" bind:value={options.brand_background_color}/>
 	<div>Body</div>
-	<input type="color" bind:value={options.brand_body_color}/>
+	<input type="color" value={options.brand_body_color} onchange={e => options.brand_body_color = (e.target as HTMLInputElement).value}/>
 	<input type="text" bind:value={options.brand_body_color}/>
 	<div>Card</div>
-	<input type="color" bind:value={options.brand_card_color}/>
+	<input type="color" value={options.brand_card_color} onchange={e => options.brand_card_color = (e.target as HTMLInputElement).value}/>
 	<input type="text" bind:value={options.brand_card_color}/>
 </fieldset>
 

svelte/src/filesystem/edit_window/EditWindow.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-import { preventDefault } from 'svelte/legacy';
 import { fs_rename, fs_update, type FSNode, type NodeOptions } from "lib/FilesystemAPI.svelte";
 import Modal from "util/Modal.svelte";
 import BrandingOptions from "./BrandingOptions.svelte";
-import { branding_from_node } from "./Branding";
+import { branding_from_props } from "./Branding";
 import FileOptions from "./FileOptions.svelte";
 import SharingOptions from "./SharingOptions.svelte";
 import AccessControl from "./AccessControl.svelte";
@@ -52,7 +51,7 @@ export const edit = (f: FSNode, oae = false, open_tab = "") => {
 
 	branding_enabled = options.branding_enabled === "true"
 	if (branding_enabled) {
-		custom_css = branding_from_node(file)
+		custom_css = branding_from_props(options)
 	} else {
 		custom_css = ""
 	}
@@ -66,7 +65,8 @@ let open_after_edit = $state(false)
 let new_name = $state("")
 let branding_enabled = $state(false)
 
-const save = async (keep_editing = false) => {
+const save = async (e: SubmitEvent) => {
+	e.preventDefault()
 	console.debug("Saving file", file.path)
 
 	let new_file: FSNode
@@ -103,10 +103,6 @@ const save = async (keep_editing = false) => {
 	} else {
 		nav.reload()
 	}
-
-	if (keep_editing) {
-		edit(new_file, open_after_edit)
-	}
 }
 </script>
 
@@ -132,7 +128,7 @@ const save = async (keep_editing = false) => {
 		</button>
 	</div>
 
-	<form id="edit_form" onsubmit={preventDefault(() => save(false))}></form>
+	<form id="edit_form" onsubmit={save}></form>
 
 	<div class="tab_content">
 		{#if tab === "file"}
@@ -155,7 +151,7 @@ const save = async (keep_editing = false) => {
 				bind:enabled={branding_enabled}
 				bind:options={options}
 				bind:file
-				on:style_change={e => custom_css = branding_from_node(file)}
+				bind:custom_css
 			/>
 		{/if}
 	</div>