diff --git a/res/static/style/layout.css b/res/static/style/layout.css index 0469ab6..5ca5953 100644 --- a/res/static/style/layout.css +++ b/res/static/style/layout.css @@ -493,6 +493,7 @@ select { overflow: hidden; color: var(--input_text); cursor: pointer; + box-shadow: 1px 1px 0px 0px var(--shadow_color); transition: padding 0.1s, box-shadow 0.1s, background 0.1s; /* Align content vertically in relation to the container */ @@ -647,6 +648,7 @@ input[type="datetime-local"] { border-radius: 6px; background: var(--input_background); padding: 3px 5px; + box-shadow: inset 1px 1px 0px 0px var(--shadow_color); /* override user-agent style */ min-width: 100px; color: var(--input_text); diff --git a/svelte/src/file_viewer/GalleryView.svelte b/svelte/src/file_viewer/GalleryView.svelte index 13f45ed..97efdd8 100644 --- a/svelte/src/file_viewer/GalleryView.svelte +++ b/svelte/src/file_viewer/GalleryView.svelte @@ -184,6 +184,7 @@ const drop = (e, index) => { vertical-align: top; color: var(--body_text_color); transition: background 0.2s, padding 0.2s, box-shadow 0.2s; + box-shadow: 1px 1px 0px 0px var(--shadow_color); } .file:hover { background: var(--input_hover_background); diff --git a/svelte/src/file_viewer/HomeButton.svelte b/svelte/src/file_viewer/HomeButton.svelte index 950562f..3c2d6f4 100644 --- a/svelte/src/file_viewer/HomeButton.svelte +++ b/svelte/src/file_viewer/HomeButton.svelte @@ -40,6 +40,7 @@ export let nobg = false background: none; margin: 0; color: var(--body_text_color); + box-shadow: none; } @media (max-width: 600px) { diff --git a/svelte/src/file_viewer/ListNavigator.svelte b/svelte/src/file_viewer/ListNavigator.svelte index 77def90..2e1abd8 100644 --- a/svelte/src/file_viewer/ListNavigator.svelte +++ b/svelte/src/file_viewer/ListNavigator.svelte @@ -138,6 +138,7 @@ export const set_item = idx => { border-width: 2px; border-style: solid; border-color: var(--input_background); + box-shadow: 1px 1px 0px 0px var(--shadow_color); } .file_button:hover { diff --git a/svelte/src/filesystem/BrandingOptions.svelte b/svelte/src/filesystem/BrandingOptions.svelte index eff7968..6338533 100644 --- a/svelte/src/filesystem/BrandingOptions.svelte +++ b/svelte/src/filesystem/BrandingOptions.svelte @@ -39,13 +39,12 @@ const add_styles = (style, properties) => { style.input_background = properties.brand_input_color style.input_hover_background = properties.brand_input_color style.input_text = add_light(properties.brand_input_color, 70) - style.shadow_color = add_light(properties.brand_input_color, 20) } if (properties.brand_highlight_color) { style.highlight_color = properties.brand_highlight_color style.highlight_background = properties.brand_highlight_color style.highlight_text_color = add_light(properties.brand_highlight_color, 70) - style.link_color = add_light(properties.brand_highlight_color, 10) + style.link_color = properties.brand_highlight_color } if (properties.brand_danger_color) { style.danger_color = properties.brand_danger_color @@ -55,6 +54,7 @@ const add_styles = (style, properties) => { style.background_color = properties.brand_background_color style.background = properties.brand_background_color style.background_text_color = add_light(properties.brand_background_color, 70) + style.background_pattern_color = properties.brand_background_color } if (properties.brand_body_color) { style.body_color = properties.brand_body_color @@ -62,6 +62,7 @@ const add_styles = (style, properties) => { style.body_text_color = add_light(properties.brand_body_color, 70) style.shaded_background = set_alpha(properties.brand_body_color, 0.8) style.separator = add_light(properties.brand_body_color, 5) + style.shadow_color = darken(properties.brand_body_color, 0.8) } if (properties.brand_card_color) { style.card_color = properties.brand_card_color @@ -76,13 +77,24 @@ const add_styles = (style, properties) => { const add_light = (color, amt) => { let hsl = rgb2hsl(parse(color)) // Convert hex to hsl - if (hsl[2] < 50) { + // If the lightness is less than 30 it is considered a dark colour. This + // threshold is 30 instead of 50 because overall dark text is more legible + if (hsl[2] < 30) { hsl[2] = hsl[2]+amt // Dark color, add lightness } else { hsl[2] = hsl[2]-amt // Light color, remove lightness } return rgb2hex(hsl2rgb(hsl)) // Convert back to hex } + +// Darken and desaturate. Only used for shadows +const darken = (color, percent) => { + let hsl = rgb2hsl(parse(color)) // Convert hex to hsl + hsl[1] = hsl[1]*percent + hsl[2] = hsl[2]*percent + return rgb2hex(hsl2rgb(hsl)) // Convert back to hex +} + const set_alpha = (color, amt) => { let rgb = parse(color) rgb.push(amt) @@ -200,9 +212,10 @@ const handle_picker = async e => {
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. + directory. The image will be picked from your filesystem. The image will + get a shared file link. You can move and rename the file like normal, + but if you remove the shared file property your branding will stop + working.
Header image ID
-
+
+ {#if tab === "file"}
- File settings - - - Delete +

File settings

+ {#if is_root_dir} +
+ Filesystem root cannot be renamed. If this shared directory + is in + your filesystem + you can rename it from there +
+ {/if} +
+ + +
+

Delete

Delete this file or directory. If this is a directory then all subfiles will be deleted as well. This action cannot be undone. @@ -155,6 +169,7 @@ const delete_file = async e => {

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

Share this file/directory

When a file or directory is shared it can be accessed through a unique link. You can get the URL with the 'Copy @@ -163,7 +178,7 @@ const delete_file = async e => { within the directory are also accessible from the link.

- +
@@ -175,11 +190,6 @@ const delete_file = async e => { diff --git a/svelte/src/filesystem/Filesystem.svelte b/svelte/src/filesystem/Filesystem.svelte index a2cee83..ea93509 100644 --- a/svelte/src/filesystem/Filesystem.svelte +++ b/svelte/src/filesystem/Filesystem.svelte @@ -35,15 +35,12 @@ let state = { shuffle: false, } -onMount(() => { - fs_navigator.open_node(window.initial_node, false) -}) +onMount(() => fs_navigator.open_node(window.initial_node, false)) const keydown = e => { if (e.ctrlKey || e.altKey || e.metaKey) { return // prevent custom shortcuts from interfering with system shortcuts - } - if (document.activeElement.type && document.activeElement.type === "text") { + } else if (document.activeElement.type && document.activeElement.type === "text") { return // Prevent shortcuts from interfering with input fields } @@ -101,17 +98,12 @@ const search = async () => { view = "search" } -const loading_evt = e => { - loading = e.detail -} +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) -} +const update_css = path => document.documentElement.style = branding_from_path(path) @@ -122,7 +114,7 @@ const update_css = path => { on:loading={loading_evt} /> -
+
@@ -187,9 +179,7 @@ const update_css = path => { bind:visible={edit_visible} fs_navigator={fs_navigator} on:loading={loading_evt} - on:style_change={e => { - custom_css = branding_from_node(e.detail) - }} + on:style_change={e => document.documentElement.style = branding_from_node(e.detail)} /> { Details - {#if state.path.length > 1} + {#if state.base.id !== "me" && state.permissions.update === true}