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

Add a little bit of depth

Browse Source
This commit is contained in:
Fornax
2024-02-16 11:49:38 +01:00
parent 08676e6071
commit 4be12b4145
14 changed files with 77 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
res/static/style/layout.css
View File

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

1
svelte/src/file_viewer/GalleryView.svelte
View File

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

1
svelte/src/file_viewer/HomeButton.svelte
View File

@@ -40,6 +40,7 @@ export let nobg = false
background: none;
margin: 0;
color: var(--body_text_color);
box-shadow: none;
}
@media (max-width: 600px) {

1
svelte/src/file_viewer/ListNavigator.svelte
View File

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

25
svelte/src/filesystem/BrandingOptions.svelte
View File

@@ -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 => {
<hr/>
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.
</div>
<div>Header image ID</div>
<button on:click={() => pick_image("brand_header_image")}>

41
svelte/src/filesystem/EditWindow.svelte
View File

@@ -4,6 +4,7 @@ import Modal from "../util/Modal.svelte";
import { createEventDispatcher } from "svelte";
import Button from "../layout/Button.svelte";
import BrandingOptions from "./BrandingOptions.svelte";
import PathLink from "./util/PathLink.svelte";
let dispatch = createEventDispatcher()
@@ -16,6 +17,8 @@ let file = {
properties: {},
};
$: is_root_dir = file.path === "/"+file.id
export let visible
export const edit = (f, oae = false, t = "file") => {
file = f
@@ -124,11 +127,11 @@ const delete_file = async e => {
}
</script>
<Modal bind:visible={visible} title="Edit {file.name}" width="700px" form="file_edit_form">
<Modal bind:visible={visible} title="Edit {file.name}" width="700px" form="edit_form">
<div class="tab_bar">
<button class:button_highlight={tab === "file"} on:click={() => tab = "file"}>
<i class="icon">edit</i>
Edit file
Properties
</button>
<button class:button_highlight={tab === "share"} on:click={() => tab = "share"}>
<i class="icon">share</i>
@@ -140,13 +143,24 @@ const delete_file = async e => {
</button>
</div>
<form id="file_edit_form" on:submit|preventDefault={save}></form>
<form id="edit_form" on:submit|preventDefault={save}></form>
{#if tab === "file"}
<div class="tab_content">
<span class="header">File settings</span>
<label for="file_name">Name:</label>
<input form="file_edit_form" bind:value={file_name} id="file_name" type="text" class="form_input"/>
<span class="header">Delete</span>
<h2>File settings</h2>
{#if is_root_dir}
<div class="highlight_yellow">
Filesystem root cannot be renamed. If this shared directory
is in
<PathLink nav={fs_navigator} path="/me">your filesystem</PathLink>
you can rename it from there
</div>
{/if}
<div class="form_grid">
<label for="file_name">Name</label>
<input form="edit_form" bind:value={file_name} id="file_name" type="text" class="form_input" disabled={is_root_dir}/>
</div>
<h2>Delete</h2>
<p>
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 => {
</div>
{:else if tab === "share"}
<div class="tab_content">
<h2>Share this file/directory</h2>
<p>
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.
</p>
<div>
<input bind:checked={shared} id="shared" type="checkbox" class="form_input"/>
<input form="edit_form" bind:checked={shared} id="shared" type="checkbox" class="form_input"/>
<label for="shared">Share this file or directory</label>
</div>
</div>
@@ -175,11 +190,6 @@ const delete_file = async e => {
</Modal>
<style>
.header {
margin-top: 1em;
font-size: 1.5em;
border-bottom: 1px var(--separator) solid;
}
.tab_bar {
border-bottom: 2px solid var(--separator);
}
@@ -188,4 +198,9 @@ const delete_file = async e => {
flex-direction: column;
padding: 8px;
}
.form_grid {
display: grid;
grid-template-columns: 1fr 10fr;
align-items: center;
}
</style>

22
svelte/src/filesystem/Filesystem.svelte
View File

@@ -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)
</script>
<svelte:window on:keydown={keydown} />
@@ -122,7 +114,7 @@ const update_css = path => {
on:loading={loading_evt}
/>
<div class="file_viewer" style={custom_css}>
<div class="file_viewer">
<div class="headerbar">
<div>
<HomeButton nobg/>
@@ -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)}
/>
<UploadWidget

2
svelte/src/filesystem/Toolbar.svelte
View File

@@ -116,7 +116,7 @@ let expand = e => {
<span>Deta<u>i</u>ls</span>
</button>
{#if state.path.length > 1}
{#if state.base.id !== "me" && state.permissions.update === true}
<button on:click={() => edit_window.edit(state.base, true)} class:button_highlight={edit_visible}>
<i class="icon">edit</i>
<span><u>E</u>dit</span>

1
svelte/src/filesystem/filemanager/GalleryView.svelte
View File

@@ -52,6 +52,7 @@ export let large_icons = false
transition: background 0.2s;
text-decoration: none;
padding: 3px;
box-shadow: 1px 1px 0px 0px var(--shadow_color);
}
.file.large_icons {
width: 200px;

1
svelte/src/filesystem/filemanager/ListView.svelte
View File

@@ -121,6 +121,7 @@ td {
margin: 0;
background: none;
color: var(--body_text_color);
box-shadow: none;
}
.hidden {
display: none;

8
svelte/src/filesystem/util/PathLink.svelte Normal file
View File

@@ -0,0 +1,8 @@
<script>
export let nav
export let path = ""
</script>
<a href={"/d"+path} on:click|preventDefault={() => {nav.navigate(path, true)}}>
<slot></slot>
</a>

1
svelte/src/user_file_manager/DirectoryElement.svelte
View File

@@ -367,6 +367,7 @@ const node_click = (index) => {
margin: 4px 10px;
text-align: initial;
background: none;
box-shadow: none;
}
.sorter_button:hover {
background: var(--input_hover_background);

31
webcontroller/style.go
View File

@@ -134,8 +134,6 @@ type styleSheet struct {
Chart1 HSL
Chart2 HSL
Chart3 HSL
Shadow HSL
}
func (s styleSheet) withDefaults() styleSheet {
@@ -197,7 +195,6 @@ func (s styleSheet) withHue(hue int) styleSheet {
s.Separator.Hue = hue
s.CardColor.Hue = hue
s.CardText.Hue = hue
s.Shadow.Hue = hue
return s
}
@@ -265,7 +262,7 @@ func (s styleSheet) String() string {
s.Chart1.CSS(),
s.Chart2.CSS(),
s.Chart3.CSS(),
s.Shadow.CSS(),
s.BodyColor.Darken(0.7).CSS(),
)
}
@@ -328,8 +325,6 @@ var purpleDrainStyle = styleSheet{
BodyBackground: NewGradient(120, HSL{255, .84, .18}, HSL{300, .85, .16}),
BodyText: HSL{0, 0, .8},
CardColor: HSL{275, .8, .18},
Shadow: HSL{0, 0, 0},
}
var classicStyle = styleSheet{
@@ -345,8 +340,6 @@ var classicStyle = styleSheet{
BodyColor: HSL{0, 0, .12},
BodyText: HSL{0, 0, .8},
CardColor: HSL{0, 0, .16},
Shadow: HSL{0, 0, 0},
}
var maroonStyle = styleSheet{
@@ -362,8 +355,6 @@ var maroonStyle = styleSheet{
BodyColor: HSL{0, .8, .08}, // HSL{0, .8, .15},
BodyText: HSL{0, 0, .8},
CardColor: HSL{0, .9, .14},
Shadow: HSL{0, 0, 0},
}
var hackerStyle = styleSheet{
@@ -379,8 +370,6 @@ var hackerStyle = styleSheet{
BodyColor: HSL{0, 0, .03},
BodyText: HSL{0, 0, .8},
CardColor: HSL{120, .4, .05},
Shadow: HSL{0, 0, 0},
}
var cantaPixeldrainStyle = styleSheet{
@@ -396,8 +385,6 @@ var cantaPixeldrainStyle = styleSheet{
BodyColor: HSL{168, .05, .21},
BodyText: HSL{0, 0, .8},
CardColor: HSL{170, .05, .26},
Shadow: HSL{0, 0, 0},
}
var skeuosPixeldrainStyle = styleSheet{
@@ -413,8 +400,6 @@ var skeuosPixeldrainStyle = styleSheet{
BodyColor: HSL{229, .14, .16}, // hsl(229, 14%, 16%)
BodyText: HSL{60, .06, .93}, // hsl(60, 6%, 93%)
CardColor: HSL{225, .14, .17}, // hsl(225, 14%, 17%)
Shadow: HSL{0, 0, 0},
}
var (
@@ -446,8 +431,6 @@ var nordDarkStyle = styleSheet{
BodyColor: nord1,
BodyText: nord4,
CardColor: nord2,
Shadow: HSL{0, 0, 0},
}
var nordLightStyle = styleSheet{
@@ -469,8 +452,6 @@ var nordLightStyle = styleSheet{
Separator: nord4,
BackgroundPattern: nord4,
CardColor: nord5,
Shadow: HSL{220, .16, .36},
}
var sweetPixeldrainStyle = styleSheet{
@@ -486,8 +467,6 @@ var sweetPixeldrainStyle = styleSheet{
BodyColor: HSL{228, .25, .12}, // hsl(228, 25%, 12%)
BodyText: HSL{223, .13, .79}, // hsl(223, 13%, 79%)
CardColor: HSL{229, .25, .14}, // hsl(229, 25%, 14%)
Shadow: HSL{0, 0, 0},
}
var adwaitaDarkStyle = styleSheet{
@@ -503,8 +482,6 @@ var adwaitaDarkStyle = styleSheet{
BodyColor: HSL{0, 0, .14},
BodyText: HSL{0, 0, 1},
CardColor: HSL{0, 0, .21},
Shadow: HSL{0, 0, 0},
}
var adwaitaLightStyle = styleSheet{
@@ -521,8 +498,6 @@ var adwaitaLightStyle = styleSheet{
BodyText: HSL{0, 0, .2},
Separator: HSL{0, 0, .86},
CardColor: HSL{0, 0, 1},
Shadow: HSL{0, 0, 0.36},
}
var solarizedDarkStyle = styleSheet{
@@ -538,8 +513,6 @@ var solarizedDarkStyle = styleSheet{
BodyColor: HSL{192, .81, .14}, // hsl(192, 81%, 14%)
BodyText: HSL{180, .07, .60}, // hsl(180, 7%, 60%)
CardColor: HSL{192, .81, .16},
Shadow: HSL{0, 0, 0},
}
var solarizedLightStyle = styleSheet{
@@ -557,6 +530,4 @@ var solarizedLightStyle = styleSheet{
BodyText: HSL{194, .14, .40}, // hsl(194, 14%, 40%)
Separator: HSL{46, .42, .88},
CardColor: HSL{44, .87, .92},
Shadow: HSL{0, 0, 0.36},
}

6
webcontroller/style_colors.go
View File

@@ -99,6 +99,12 @@ func (hsl HSL) Add(hue int, saturation float64, lightness float64) HSL {
return new
}
func (hsl HSL) Darken(percent float64) HSL {
hsl.Lightness = hsl.Lightness * percent
hsl.Saturation = hsl.Saturation * percent
return hsl
}
func (hsl HSL) WithAlpha(alpha float64) HSLA {
return HSLA{hsl.Hue, hsl.Saturation, hsl.Lightness, alpha}
}