pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix branding window defaulting everything to black

Browse Source
This commit is contained in:
Wim Brand
2025-10-17 13:37:59 +02:00
parent b409ff009d
commit 4de6331551
3 changed files with 51 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
svelte/src/filesystem/edit_window/Branding.ts
View File

@@ -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_hover_background: string,
input_text: string,
highlight_color: string,
highlight_background: string,
highlight_text_color: string,
link_color: string,
danger_color: string,
danger_text_color: string,
background_color: string,
background: string,
background_text_color: string,
background_pattern_color: string,
body_color: string,
body_background: string,
body_text_color: string,
shaded_background: string,
separator: string,
shadow_color: string,
card_color: string,
background_image: string,
background_image_size: string,
background_image_position: string,
background_image_repeat: string,
input_background?: string,
input_hover_background?: string,
input_text?: string,
highlight_color?: string,
highlight_background?: string,
highlight_text_color?: string,
link_color?: string,
danger_color?: string,
danger_text_color?: string,
background_color?: string,
background?: string,
background_text_color?: string,
background_pattern_color?: string,
body_color?: string,
body_background?: string,
body_text_color?: string,
shaded_background?: string,
separator?: string,
shadow_color?: string,
card_color?: string,
background_image?: string,
background_image_size?: string,
background_image_position?: 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>{}
for (let node of path) {
const style = {}
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>{}
export const branding_from_node = (node: FSNode) => {
add_styles(last_generated_style, node.properties)
let last_generated_style: Style = {}
export const branding_from_props = (props: FSNodeProperties) => {
add_styles(last_generated_style, props)
return gen_css(last_generated_style)
}

35
svelte/src/filesystem/edit_window/BrandingOptions.svelte
View File

@@ -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;
options: NodeOptions;
enabled: boolean;
file: FSNode
options: NodeOptions
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>

16
svelte/src/filesystem/edit_window/EditWindow.svelte
View File

@@ -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>