From 08676e60711ee5f7e03dcad1c485dccb1d99de05 Mon Sep 17 00:00:00 2001 From: Fornax Date: Thu, 15 Feb 2024 18:52:46 +0100 Subject: [PATCH] Add page branding options to filesystem --- res/static/style/layout.css | 14 +- svelte/package-lock.json | 47 ++- svelte/package.json | 3 +- svelte/src/file_viewer/HomeButton.svelte | 1 + svelte/src/filesystem/BrandingOptions.svelte | 300 ++++++++++++++++++ svelte/src/filesystem/EditWindow.svelte | 117 ++++--- svelte/src/filesystem/FileStats.svelte | 15 +- svelte/src/filesystem/Filesystem.svelte | 79 +++-- svelte/src/filesystem/FilesystemAPI.js | 17 +- svelte/src/filesystem/Navigator.svelte | 16 +- .../filesystem/filemanager/FilePicker.svelte | 217 +++++++++++++ .../filesystem/filemanager/GalleryView.svelte | 2 +- .../filesystem/filemanager/ListView.svelte | 1 + svelte/src/layout/Button.svelte | 1 + webcontroller/style.go | 4 +- 15 files changed, 730 insertions(+), 104 deletions(-) create mode 100644 svelte/src/filesystem/BrandingOptions.svelte create mode 100644 svelte/src/filesystem/filemanager/FilePicker.svelte diff --git a/res/static/style/layout.css b/res/static/style/layout.css index 7ececaa..0469ab6 100644 --- a/res/static/style/layout.css +++ b/res/static/style/layout.css @@ -120,6 +120,12 @@ p>img { max-width: 100%; } +code { + display: inline-block; + background: var(--background); + border-radius: 5px; +} + /* Page layout elements */ .button_toggle_navigation { @@ -527,7 +533,7 @@ input[type="submit"]:active, input[type="button"]:active, input[type="color"]:active, select:active { - box-shadow: inset 4px 4px 8px var(--shadow_color); + box-shadow: inset 4px 4px 6px var(--shadow_color); /* Exactly 4px offset compared to the inactive padding to give a depth effect */ padding: 9px 1px 1px 9px; } @@ -538,8 +544,8 @@ select:active { } .button_red { - background: linear-gradient(var(--danger_color), var(--danger_color_dark)) !important; - color: var(--highlight_text_color) !important; + background: var(--danger_color) !important; + color: var(--danger_text_color) !important; } button:disabled, @@ -663,7 +669,7 @@ input[type="email"]:focus, input[type="number"]:focus, input[type="date"]:focus, input[type="datetime-local"]:focus { - box-shadow: inset 0 0 3px 0 var(--highlight_color); + box-shadow: inset 0px 0px 0px 1px var(--highlight_color); } textarea:disabled, diff --git a/svelte/package-lock.json b/svelte/package-lock.json index 50a5c77..bbb3d9f 100644 --- a/svelte/package-lock.json +++ b/svelte/package-lock.json @@ -10,7 +10,7 @@ "dependencies": { "behave-js": "^1.5.0", "chart.js": "^4.2.0", - "svelte-flag-icons": "^0.7.1" + "pure-color": "^1.3.0" }, "devDependencies": { "@babel/core": "^7.22.20", @@ -30,6 +30,7 @@ "version": "2.2.1", "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz", "integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==", + "dev": true, "dependencies": { "@jridgewell/gen-mapping": "^0.3.0", "@jridgewell/trace-mapping": "^0.3.9" @@ -1680,6 +1681,7 @@ "version": "0.3.3", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz", "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==", + "dev": true, "dependencies": { "@jridgewell/set-array": "^1.0.1", "@jridgewell/sourcemap-codec": "^1.4.10", @@ -1693,6 +1695,7 @@ "version": "3.1.1", "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz", "integrity": "sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==", + "dev": true, "engines": { "node": ">=6.0.0" } @@ -1701,6 +1704,7 @@ "version": "1.1.2", "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz", "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==", + "dev": true, "engines": { "node": ">=6.0.0" } @@ -1718,12 +1722,14 @@ "node_modules/@jridgewell/sourcemap-codec": { "version": "1.4.15", "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz", - "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==" + "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==", + "dev": true }, "node_modules/@jridgewell/trace-mapping": { "version": "0.3.19", "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.19.tgz", "integrity": "sha512-kf37QtfW+Hwx/buWGMPcR60iF9ziHa6r/CZJIHbmcm4+0qrXiVdxegAH0F6yddEVQ7zdkjcGCgCzUu+BcbhQxw==", + "dev": true, "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" @@ -1857,7 +1863,8 @@ "node_modules/@types/estree": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.1.tgz", - "integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==" + "integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==", + "dev": true }, "node_modules/@types/jsmediatags": { "version": "3.9.4", @@ -1875,6 +1882,7 @@ "version": "8.10.0", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz", "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==", + "dev": true, "bin": { "acorn": "bin/acorn" }, @@ -1911,6 +1919,7 @@ "version": "5.3.0", "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz", "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==", + "dev": true, "dependencies": { "dequal": "^2.0.3" } @@ -1919,6 +1928,7 @@ "version": "3.2.1", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz", "integrity": "sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==", + "dev": true, "dependencies": { "dequal": "^2.0.3" } @@ -2129,6 +2139,7 @@ "version": "1.0.4", "resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz", "integrity": "sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==", + "dev": true, "dependencies": { "@jridgewell/sourcemap-codec": "^1.4.15", "@types/estree": "^1.0.1", @@ -2141,6 +2152,7 @@ "version": "3.0.3", "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz", "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==", + "dev": true, "dependencies": { "@types/estree": "^1.0.0" } @@ -2195,6 +2207,7 @@ "version": "2.3.1", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz", "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==", + "dev": true, "dependencies": { "mdn-data": "2.0.30", "source-map-js": "^1.0.1" @@ -2233,6 +2246,7 @@ "version": "2.0.3", "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==", + "dev": true, "engines": { "node": ">=6" } @@ -2541,7 +2555,8 @@ "node_modules/locate-character": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz", - "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==" + "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==", + "dev": true }, "node_modules/lodash.debounce": { "version": "4.0.8", @@ -2573,7 +2588,8 @@ "node_modules/mdn-data": { "version": "2.0.30", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz", - "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==" + "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==", + "dev": true }, "node_modules/minimatch": { "version": "5.1.6", @@ -2633,6 +2649,7 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz", "integrity": "sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==", + "dev": true, "dependencies": { "@types/estree": "^1.0.0", "estree-walker": "^3.0.0", @@ -2643,6 +2660,7 @@ "version": "3.0.3", "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz", "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==", + "dev": true, "dependencies": { "@types/estree": "^1.0.0" } @@ -2651,6 +2669,7 @@ "version": "3.0.2", "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz", "integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==", + "dev": true, "dependencies": { "@types/estree": "*" } @@ -2673,6 +2692,11 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, + "node_modules/pure-color": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/pure-color/-/pure-color-1.3.0.tgz", + "integrity": "sha512-QFADYnsVoBMw1srW7OVKEYjG+MbIa49s54w1MA1EDY6r2r/sTcKKYqRX1f4GYvnXP7eN/Pe9HFcX+hwzmrXRHA==" + }, "node_modules/randombytes": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", @@ -2906,6 +2930,7 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "dev": true, "engines": { "node": ">=0.10.0" } @@ -2948,6 +2973,7 @@ "version": "4.2.1", "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.1.tgz", "integrity": "sha512-LpLqY2Jr7cRxkrTc796/AaaoMLF/1ax7cto8Ot76wrvKQhrPmZ0JgajiWPmg9mTSDqO16SSLiD17r9MsvAPTmw==", + "dev": true, "dependencies": { "@ampproject/remapping": "^2.2.1", "@jridgewell/sourcemap-codec": "^1.4.15", @@ -2967,18 +2993,11 @@ "node": ">=16" } }, - "node_modules/svelte-flag-icons": { - "version": "0.7.1", - "resolved": "https://registry.npmjs.org/svelte-flag-icons/-/svelte-flag-icons-0.7.1.tgz", - "integrity": "sha512-iyxiQ8y6JwtFJ7OsWs0ZTmLHke2dAP8mHyfUfth8VcJbipRR3u339iM3ofop4lBCcscAik0dySGlGK9n0yAwFw==", - "peerDependencies": { - "svelte": "^3.54.0 || ^4.0.0" - } - }, "node_modules/svelte/node_modules/estree-walker": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz", "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==", + "dev": true, "dependencies": { "@types/estree": "^1.0.0" } @@ -2987,6 +3006,7 @@ "version": "3.0.2", "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz", "integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==", + "dev": true, "dependencies": { "@types/estree": "*" } @@ -2995,6 +3015,7 @@ "version": "0.30.3", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.3.tgz", "integrity": "sha512-B7xGbll2fG/VjP+SWg4sX3JynwIU0mjoTc6MPpKNuIvftk6u6vqhDnk1R80b8C2GBR6ywqy+1DcKBrevBg+bmw==", + "dev": true, "dependencies": { "@jridgewell/sourcemap-codec": "^1.4.15" }, diff --git a/svelte/package.json b/svelte/package.json index 8e55928..1e9e6ff 100644 --- a/svelte/package.json +++ b/svelte/package.json @@ -21,6 +21,7 @@ }, "dependencies": { "behave-js": "^1.5.0", - "chart.js": "^4.2.0" + "chart.js": "^4.2.0", + "pure-color": "^1.3.0" } } diff --git a/svelte/src/file_viewer/HomeButton.svelte b/svelte/src/file_viewer/HomeButton.svelte index 9f0263a..950562f 100644 --- a/svelte/src/file_viewer/HomeButton.svelte +++ b/svelte/src/file_viewer/HomeButton.svelte @@ -39,6 +39,7 @@ export let nobg = false .nobg { background: none; margin: 0; + color: var(--body_text_color); } @media (max-width: 600px) { diff --git a/svelte/src/filesystem/BrandingOptions.svelte b/svelte/src/filesystem/BrandingOptions.svelte new file mode 100644 index 0000000..eff7968 --- /dev/null +++ b/svelte/src/filesystem/BrandingOptions.svelte @@ -0,0 +1,300 @@ + + + + +

+ You can customize how your filesystem looks. The colours chosen here apply + to the directory you're currently in and all files and directories in this + directory. Colours which you do not want to modify can be left empty. Then + the default theme colour will be used. +

+ +
+ + +
+
+ +
+
Button
+ + +
Highlighted button
+ + +
Danger button
+ + +
Background
+ + +
Body
+ + +
Card
+ + +
+
+ + You can choose an image to show above or behind the files in this + directory. The image will be picked from your filesystem. If the image + is not shared yet it will be made shared so it can be publicly + downloaded. +
+
Header image ID
+ + +
Header image link
+ +
Background image ID
+ + +
+ +
+

+ Below is an example of what the site looks like with these colours: +

+ +
+
The background
+ +
+
The content body. A link!
+ +
+ +
+ + + +
+ +
+ +
+ +
+ +
+
The top layer, for highlighted things
+
+
+
+ + + + diff --git a/svelte/src/filesystem/EditWindow.svelte b/svelte/src/filesystem/EditWindow.svelte index b86c2d5..59c044d 100644 --- a/svelte/src/filesystem/EditWindow.svelte +++ b/svelte/src/filesystem/EditWindow.svelte @@ -3,6 +3,7 @@ import { fs_delete_all, fs_rename, fs_update } from "./FilesystemAPI"; import Modal from "../util/Modal.svelte"; import { createEventDispatcher } from "svelte"; import Button from "../layout/Button.svelte"; +import BrandingOptions from "./BrandingOptions.svelte"; let dispatch = createEventDispatcher() @@ -12,6 +13,7 @@ let file = { name: "", id: "", mode_octal: "", + properties: {}, }; export let visible @@ -24,6 +26,11 @@ export const edit = (f, oae = false, t = "file") => { file_name = file.name shared = !(file.id === undefined || file.id === "") + + if (file.properties === undefined) { + file.properties = {} + } + branding_enabled = file.properties.branding_enabled === "true" visible = true } @@ -33,14 +40,41 @@ let open_after_edit = false let file_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_footer_image", + "brand_footer_link", + "brand_background_image", +] + const save = async () => { console.debug("Saving file", file.path) + try { dispatch("loading", true) - await fs_update( - file.path, - {shared: shared}, - ) + let opts = {shared: shared} + + 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] + } + } + } + + await fs_update(file.path, opts) if (file_name !== file.name) { let parent = file.path.slice(0, -file.name.length) @@ -90,7 +124,7 @@ const delete_file = async e => { } - +
+
-
- {#if tab === "file"} -
- File settings - - - Delete -

- Delete this file or directory. If this is a directory then all - subfiles will be deleted as well. This action cannot be undone. -

-
+ {:else if tab === "share"} +
+

+ When a file or directory is shared it can be accessed + through a unique link. You can get the URL with the 'Copy + link' button on the toolbar, or share the link with the + 'Share' button. If you share a directory all the files + within the directory are also accessible from the link. +

+
+ +
- {:else if tab === "share"} -
- - Sharing settings - -

- When a file or directory is shared it can be accessed - through a unique link. You can get the URL with the 'Copy - link' button on the toolbar, or share the link with the - 'Share' button. If you share a directory all the files - within the directory are also accessible from the link. -

-
- - -
-
- {/if} - +
+ {:else if tab === "branding"} +
+ +
+ {/if} diff --git a/svelte/src/filesystem/FileStats.svelte b/svelte/src/filesystem/FileStats.svelte index bf92eb6..ff6f9fe 100644 --- a/svelte/src/filesystem/FileStats.svelte +++ b/svelte/src/filesystem/FileStats.svelte @@ -5,10 +5,11 @@ import { fs_path_url } from "./FilesystemUtil"; export let state +let loading = true let downloads = 0 let transfer_used = 0 let socket = null -let error_msg = "Loading..." +let error_msg = "" let connected_to = "" @@ -27,7 +28,7 @@ const update_base = async base => { // If the socket is already active we need to close it close_socket() - error_msg = "Loading..." + loading = true let ws_endpoint = location.origin.replace(/^http/, 'ws') + fs_path_url(base.path).replace(/^http/, 'ws') + @@ -40,6 +41,7 @@ const update_base = async base => { console.debug("WS update", j) error_msg = "" + loading = false downloads = j.downloads transfer_used = j.transfer_free + j.transfer_paid } @@ -83,11 +85,16 @@ onDestroy(close_socket) {:else}
Downloads
-
{formatThousands(downloads)}
+
+ {loading ? "Loading..." : formatThousands(downloads)} +
+
Transfer used
-
{formatDataVolume(transfer_used, 3)}
+
+ {loading ? "Loading..." : formatDataVolume(transfer_used, 3)} +
{/if} diff --git a/svelte/src/filesystem/Filesystem.svelte b/svelte/src/filesystem/Filesystem.svelte index 31873a9..a2cee83 100644 --- a/svelte/src/filesystem/Filesystem.svelte +++ b/svelte/src/filesystem/Filesystem.svelte @@ -11,6 +11,7 @@ import SearchView from './SearchView.svelte'; import UploadWidget from './upload_widget/UploadWidget.svelte'; import HomeButton from '../file_viewer/HomeButton.svelte'; import { fs_path_url } from './FilesystemUtil'; +import { branding_from_node, branding_from_path } from './BrandingOptions.svelte'; let loading = true let toolbar @@ -103,6 +104,14 @@ const search = async () => { const loading_evt = e => { loading = e.detail } + +// Custom CSS rules for the whole viewer. This is updated by either the +// navigation_complete event or the style_change event +let custom_css = "" +$: update_css(state.path) +const update_css = path => { + custom_css = branding_from_path(path) +} @@ -113,7 +122,7 @@ const loading_evt = e => { on:loading={loading_evt} /> -
+
@@ -135,7 +144,7 @@ const loading_evt = e => { on:search={search} /> -
+
{#if view === "file"} {
- The filesystem is an experimental feature! Please read the guide before using it. + The filesystem is experimental! Please read the guide
@@ -168,30 +176,43 @@ const loading_evt = e => { title="Frame for downloading files" style="display: none; width: 1px; height: 1px;"> + + + + { + custom_css = branding_from_node(e.detail) + }} + /> + + fs_navigator.reload()} + /> + +
- - - - - fs_navigator.reload()} -/> - - - diff --git a/svelte/src/filesystem/FilesystemAPI.js b/svelte/src/filesystem/FilesystemAPI.js index 6da0678..7e78440 100644 --- a/svelte/src/filesystem/FilesystemAPI.js +++ b/svelte/src/filesystem/FilesystemAPI.js @@ -57,17 +57,12 @@ export const fs_update = async (path, opts) => { const form = new FormData() form.append("action", "update") - if (opts.created !== undefined) { - form.append("created", opts.created.toISOString()) - } - if (opts.modified !== undefined) { - form.append("modified", opts.modified.toISOString()) - } - if (opts.mode !== undefined) { - form.append("mode", opts.mode) - } - if (opts.shared !== undefined) { - form.append("shared", opts.shared) + for (let key of Object.keys(opts)) { + if (key === "created" || key === "modified") { + form.append(key, opts[key].toISOString()) + } else { + form.append(key, opts[key]) + } } return await fs_check_response( diff --git a/svelte/src/filesystem/Navigator.svelte b/svelte/src/filesystem/Navigator.svelte index 26c943d..fb2df43 100644 --- a/svelte/src/filesystem/Navigator.svelte +++ b/svelte/src/filesystem/Navigator.svelte @@ -5,6 +5,8 @@ import { fs_encode_path, fs_split_path } from "./FilesystemUtil"; let dispatch = createEventDispatcher() +export let history_enabled = true + export let state = { // Parts of the raw API response path: [], @@ -55,12 +57,14 @@ export const open_node = (node, push_history) => { // Update window title and navigation history. If push_history is false we // still replace the URL with replaceState. This way the user is not greeted // to a 404 page when refreshing after renaming a file - window.document.title = node.path[node.base_index].name+" ~ pixeldrain" - let url = "/d"+ fs_encode_path(node.path[node.base_index].path) - if (push_history) { - window.history.pushState({}, window.document.title, url) - } else { - window.history.replaceState({}, window.document.title, url) + if (history_enabled) { + window.document.title = node.path[node.base_index].name+" ~ pixeldrain" + let url = "/d"+ fs_encode_path(node.path[node.base_index].path) + if (push_history) { + window.history.pushState({}, window.document.title, url) + } else { + window.history.replaceState({}, window.document.title, url) + } } // If the new node is a child of the previous node we save the parent's diff --git a/svelte/src/filesystem/filemanager/FilePicker.svelte b/svelte/src/filesystem/filemanager/FilePicker.svelte new file mode 100644 index 0000000..35962ab --- /dev/null +++ b/svelte/src/filesystem/filemanager/FilePicker.svelte @@ -0,0 +1,217 @@ + + + + + + + +
+ + + + +
+ Selected {selected_files} files +
+ + + + + + +
+ {#if directory_view === "list"} + + {:else if directory_view === "gallery"} + + {/if} + + + + + diff --git a/svelte/src/filesystem/filemanager/GalleryView.svelte b/svelte/src/filesystem/filemanager/GalleryView.svelte index f92d733..cc64e0b 100644 --- a/svelte/src/filesystem/filemanager/GalleryView.svelte +++ b/svelte/src/filesystem/filemanager/GalleryView.svelte @@ -46,9 +46,9 @@ export let large_icons = false overflow: hidden; border-radius: 8px; background: var(--input_background); + color: var(--input_text); display: flex; flex-direction: column; - color: var(--body_text_color); transition: background 0.2s; text-decoration: none; padding: 3px; diff --git a/svelte/src/filesystem/filemanager/ListView.svelte b/svelte/src/filesystem/filemanager/ListView.svelte index 6cc8249..e6af9bc 100644 --- a/svelte/src/filesystem/filemanager/ListView.svelte +++ b/svelte/src/filesystem/filemanager/ListView.svelte @@ -120,6 +120,7 @@ td { .action_button { margin: 0; background: none; + color: var(--body_text_color); } .hidden { display: none; diff --git a/svelte/src/layout/Button.svelte b/svelte/src/layout/Button.svelte index a711db6..d5ca193 100644 --- a/svelte/src/layout/Button.svelte +++ b/svelte/src/layout/Button.svelte @@ -66,5 +66,6 @@ export let form = "" .flat { background: none; margin: 0; + color: var(--body_text_color); } diff --git a/webcontroller/style.go b/webcontroller/style.go index 274503e..e8313c3 100644 --- a/webcontroller/style.go +++ b/webcontroller/style.go @@ -215,7 +215,7 @@ func (s styleSheet) String() string { --highlight_color: %s; --highlight_text_color: %s; --danger_color: %s; - --danger_color_dark: %s; + --danger_text_color: %s; --scrollbar_foreground_color: %s; --scrollbar_hover_color: %s; @@ -247,7 +247,7 @@ func (s styleSheet) String() string { s.Highlight.CSS(), s.HighlightText.CSS(), s.Danger.CSS(), - s.Danger.Add(0, 0, -.02).CSS(), + s.HighlightText.CSS(), s.ScrollbarForeground.CSS(), s.ScrollbarHover.CSS(), s.BackgroundColor.CSS(),