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

Convert the whole filesystem UI to Typescript

Browse Source
This commit is contained in:
Wim Brand
2025-03-28 14:16:20 +01:00
parent 8279b9646e
commit d5cd5b1db1
114 changed files with 601 additions and 670 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
svelte/src/filesystem/edit_window/AccessControl.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import Button from "layout/Button.svelte";
import type { FSNode, FSPermissions } from "filesystem/FilesystemAPI.mjs";
import type { FSNode, FSPermissions } from "filesystem/FilesystemAPI";
import PermissionButton from "./PermissionButton.svelte";
export let file: FSNode
@@ -10,7 +10,7 @@ let new_user_perms = <FSPermissions>{read: true}
const add_user = (e: SubmitEvent) => {
e.preventDefault()
if (file.user_permissions === undefined) {
file.user_permissions = <[string: FSPermissions]>{}
file.user_permissions = {} as {[index: string]: FSPermissions}
}
file.user_permissions[new_user_id] = structuredClone(new_user_perms)
}
@@ -24,7 +24,7 @@ let new_password_perms = <FSPermissions>{read: true}
const add_password = (e: SubmitEvent) => {
e.preventDefault()
if (file.password_permissions === undefined) {
file.password_permissions = <[string: FSPermissions]>{}
file.password_permissions = {} as {[index: string]: FSPermissions}
}
file.password_permissions[new_password] = structuredClone(new_password_perms)
}

2
svelte/src/filesystem/edit_window/Branding.js → svelte/src/filesystem/edit_window/Branding.ts
View File

@@ -1,4 +1,4 @@
import parse from "pure-color/parse"
import parse from "pure-color/parse";
import rgb2hsl from "pure-color/convert/rgb2hsl";
import hsl2rgb from "pure-color/convert/hsl2rgb";
import rgb2hex from "pure-color/convert/rgb2hex";

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

@@ -1,33 +1,17 @@
<script>
<script lang="ts">
import { createEventDispatcher } from "svelte";
import ThemePresets from "./ThemePresets.svelte";
import FilePicker from "file_viewer/FilePicker.svelte";
import { fs_update, fs_node_type } from "filesystem/FilesystemAPI.mjs";
import { fs_update, fs_node_type, type FSNode } from "filesystem/FilesystemAPI";
import CustomBanner from "filesystem/viewers/CustomBanner.svelte";
import HelpButton from "layout/HelpButton.svelte";
import FilePicker from "filesystem/filemanager/FilePicker.svelte";
let dispatch = createEventDispatcher()
export let file = {
properties: {
branding_enabled: "",
brand_input_color: "",
brand_highlight_color: "",
brand_danger_color: "",
brand_background_color: "",
brand_body_color: "",
brand_card_color: "",
brand_header_image: "",
brand_header_link: "",
brand_footer_image: "",
brand_footer_link: "",
brand_background_image: "",
},
}
export let file: FSNode
export let enabled = false
$: update_colors(file)
const update_colors = file => {
const update_colors = (file: FSNode) => {
if (enabled) {
file.properties.branding_enabled = "true"
dispatch("style_change")
@@ -36,13 +20,13 @@ const update_colors = file => {
}
}
let picker
let picker: FilePicker
let picking = ""
const pick_image = type => {
const pick_image = (type: string) => {
picking = type
picker.open(file.path)
}
const handle_picker = async e => {
const handle_picker = async (e: CustomEvent<FSNode[]>) => {
if (e.detail.length !== 1) {
alert("Please select one file")
return

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

@@ -1,29 +1,24 @@
<script>
import { fs_rename, fs_update } from "filesystem/FilesystemAPI.mjs";
<script lang="ts">
import { fs_rename, fs_update, type FSNode, type FSNodeProperties, type NodeOptions } from "filesystem/FilesystemAPI";
import Modal from "util/Modal.svelte";
import BrandingOptions from "./BrandingOptions.svelte";
import { branding_from_node } from "./Branding";
import FileOptions from "./FileOptions.svelte";
import SharingOptions from "./SharingOptions.svelte";
import AccessControl from "./AccessControl.svelte";
import type { FSNavigator } from "filesystem/FSNavigator";
export let nav
let file = {
path: "",
name: "",
id: "",
mode_octal: "",
properties: {},
};
export let nav: FSNavigator
let file: FSNode = {} as FSNode
let custom_css = ""
export let visible
export let visible: boolean
// Open the edit window. Argument 1 is the file to edit, 2 is whether the file
// should be opened after the user finishes editing and 3 is the default tab
// that should be open when the window shows
export const edit = (f, oae = false, open_tab = "") => {
export const edit = (f: FSNode, oae = false, open_tab = "") => {
file = f
open_after_edit = oae
if (open_tab !== "") {
@@ -38,12 +33,12 @@ export const edit = (f, oae = false, open_tab = "") => {
shared = !(file.id === undefined || file.id === "")
if (file.properties === undefined) {
file.properties = {}
file.properties = {} as FSNodeProperties
}
if (shared && file.link_permissions === undefined) {
// Default to read-only for public links
file.link_permissions = {read: true, write: false, delete: false}
file.link_permissions = { owner: false, read: true, write: false, delete: false}
}
branding_enabled = file.properties.branding_enabled === "true"
@@ -59,51 +54,31 @@ export const edit = (f, oae = false, open_tab = "") => {
let tab = "file"
let open_after_edit = false
let shared = false
let new_name = ""
let shared = false
let branding_enabled = false
let branding_colors
let branding_fields = [
"brand_input_color",
"brand_highlight_color",
"brand_danger_color",
"brand_background_color",
"brand_body_color",
"brand_card_color",
"brand_header_image",
"brand_header_link",
"brand_background_image",
]
const save = async (keep_editing = false) => {
console.debug("Saving file", file.path)
let new_file
let new_file: FSNode
try {
nav.set_loading(true)
let opts = {
shared: shared,
}
branding_enabled: JSON.stringify(branding_enabled)
} as NodeOptions
opts.branding_enabled = branding_enabled ? "true" : ""
if (branding_enabled && file.properties) {
for (let field of branding_fields) {
if (file.properties[field] !== undefined) {
console.log("setting", field, "to", file.properties[field])
opts[field] = file.properties[field]
}
if (branding_enabled && file.properties !== undefined) {
for (let field of Object.keys(file.properties)) {
console.log("setting", field, "to", file.properties[field])
opts[field] = file.properties[field]
}
}
if (shared && file.link_permissions !== undefined) {
if (shared) {
opts.link_permissions = file.link_permissions
}
if (shared && file.user_permissions !== undefined) {
opts.user_permissions = file.user_permissions
}
if (shared && file.password_permissions !== undefined) {
opts.password_permissions = file.password_permissions
}
@@ -179,11 +154,10 @@ const save = async (keep_editing = false) => {
{:else if tab === "share"}
<SharingOptions bind:file bind:shared on:save={() => save(true)} />
{:else if tab === "access"}
<AccessControl bind:file bind:shared />
<AccessControl bind:file />
{:else if tab === "branding"}
<BrandingOptions
bind:enabled={branding_enabled}
bind:colors={branding_colors}
bind:file
on:style_change={e => custom_css = branding_from_node(file)}
/>

17
svelte/src/filesystem/edit_window/FileOptions.svelte
View File

@@ -1,17 +1,18 @@
<script>
<script lang="ts">
import Button from "layout/Button.svelte";
import { fs_delete_all } from "filesystem/FilesystemAPI.mjs";
import { fs_delete_all, type FSNode } from "filesystem/FilesystemAPI";
import PathLink from "filesystem/util/PathLink.svelte";
import type { FSNavigator } from "filesystem/FSNavigator";
export let nav
export let file = {}
export let new_name
export let visible
export let open_after_edit
export let nav: FSNavigator
export let file: FSNode = {} as FSNode
export let new_name: string
export let visible: boolean
export let open_after_edit: boolean
$: is_root_dir = file.path === "/"+file.id
const delete_file = async e => {
const delete_file = async (e: MouseEvent) => {
e.preventDefault()
try {

2
svelte/src/filesystem/edit_window/PermissionButton.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import ToggleButton from "layout/ToggleButton.svelte";
import type { FSPermissions } from "filesystem/FilesystemAPI.mjs";
import type { FSPermissions } from "filesystem/FilesystemAPI";
export let permissions = <FSPermissions>{}
</script>

17
svelte/src/filesystem/edit_window/SharingOptions.svelte
View File

@@ -1,20 +1,21 @@
<script>
<script lang="ts">
import { createEventDispatcher } from "svelte";
import { domain_url } from "util/Util.svelte";
import CopyButton from "layout/CopyButton.svelte";
import { formatDate } from "util/Formatting.svelte";
import { formatDate } from "util/Formatting";
import type { FSNode } from "filesystem/FilesystemAPI";
let dispatch = createEventDispatcher()
export let shared
export let file
export let shared: boolean
export let file: FSNode = {} as FSNode
let embed_html
let preview_area
let embed_html: string
let preview_area: HTMLDivElement
$: is_shared = file.id !== undefined && file.id !== ""
$: share_link = window.location.protocol+"//"+window.location.host+"/d/"+file.id
$: embed_iframe(file)
let embed_iframe = file => {
let embed_iframe = (file: FSNode) => {
if (!is_shared) {
example = false
embed_html = "File is not shared, can't generate embed code"
@@ -41,7 +42,7 @@ const toggle_example = () => {
}
}
const update_shared = e => {
const update_shared = () => {
// 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

18
svelte/src/filesystem/edit_window/ThemePresets.svelte
View File

@@ -1,17 +1,15 @@
<script>
export let properties = {
brand_input_color: "",
brand_highlight_color: "",
brand_danger_color: "",
brand_background_color: "",
brand_body_color: "",
brand_card_color: ""
}
<script lang="ts">
import type { FSNodeProperties } from "filesystem/FilesystemAPI";
export let properties: FSNodeProperties = {} as FSNodeProperties
let current_theme = -1
const set_theme = index => {
const set_theme = (index: number) => {
current_theme = index
// Copy all the properties of the theme to the file, except for the theme
// name
Object.keys(themes[index]).forEach(key => {
if (key !== "name") {
properties[key] = themes[index][key]