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

Support dynamic dark/light themes

Browse Source
This commit is contained in:
Fornax
2022-03-30 19:35:26 +02:00
parent e18e4303b3
commit 13f697e5de
45 changed files with 194 additions and 261 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
svelte/src/admin_panel/Home.svelte
View File

@@ -2,6 +2,7 @@
import { onDestroy, onMount } from "svelte";
import { formatDataVolume, formatThousands, formatDate, formatNumber, formatDuration } from "../util/Formatting.svelte";
import Chart from "../util/Chart.svelte";
import { color_by_name } from "../util/Util.svelte";
let graphViews
let graphBandwidth
@@ -115,15 +116,15 @@ onMount(() => {
label: "Bandwidth (free)",
borderWidth: 2,
pointRadius: 0,
borderColor: "#"+window.style.highlightColor,
backgroundColor: "#"+window.style.highlightColor,
borderColor: color_by_name("highlight_color"),
backgroundColor: color_by_name("highlight_color"),
},
{
label: "Bandwidth (premium)",
borderWidth: 2,
pointRadius: 0,
borderColor: "#"+window.style.dangerColor,
backgroundColor: "#"+window.style.dangerColor,
borderColor: color_by_name("danger_color"),
backgroundColor: color_by_name("danger_color"),
},
];
graphViews.data().datasets = [
@@ -131,15 +132,15 @@ onMount(() => {
label: "Views",
borderWidth: 2,
pointRadius: 0,
borderColor: "#"+window.style.highlightColor,
backgroundColor: "#"+window.style.highlightColor,
borderColor: color_by_name("highlight_color"),
backgroundColor: color_by_name("highlight_color"),
},
{
label: "Downloads",
borderWidth: 2,
pointRadius: 0,
borderColor: "#"+window.style.dangerColor,
backgroundColor: "#"+window.style.dangerColor,
borderColor: color_by_name("danger_color"),
backgroundColor: color_by_name("danger_color"),
},
];

3
svelte/src/file_viewer/AdLeaderboard.svelte
View File

@@ -1,5 +1,6 @@
<script>
import { onMount } from "svelte"
import { color_by_name_no_prefix } from "../util/Util.svelte";
import * as head from "./AdHead.svelte"
let container
@@ -114,7 +115,7 @@ head.valueimpression_loaded.subscribe(v => {
{:else if ad_type === "aads"}
<iframe bind:this={banner} class="banner"
data-aa="73974"
src="//ad.a-ads.com/73974?size=728x90&background_color={window.style.bodyColor}&text_color={window.style.bodyTextColor}&title_color={window.style.highlightColor}&title_hover_color={window.style.highlightColor}&link_color={window.style.highlightColor}&link_hover_color={window.style.highlightColor}"
src="//ad.a-ads.com/73974?size=728x90&background_color={color_by_name_no_prefix('body_color')}&text_color={color_by_name_no_prefix('body_text_color')}&title_color={color_by_name_no_prefix('highlight_color')}&title_hover_color={color_by_name_no_prefix('highlight_color')}&link_color={color_by_name_no_prefix('highlight_color')}&link_hover_color={color_by_name_no_prefix('highlight_color')}"
style="width:728px; height:90px; border:0px; padding:0; overflow:hidden; background-color: transparent;"
title="A-ads advertisement">
</iframe>

3
svelte/src/file_viewer/AdSkyscraper.svelte
View File

@@ -1,5 +1,6 @@
<script>
import { createEventDispatcher, onMount, tick } from "svelte"
import { color_by_name_no_prefix } from "../util/Util.svelte";
import * as head from "./AdHead.svelte"
let dispatch = createEventDispatcher()
@@ -91,7 +92,7 @@ head.valueimpression_loaded.subscribe(v => {
{#if ad_type === "aads"}
<iframe
data-aa="1811738"
src="//ad.a-ads.com/1811738?size=160x600&background_color={window.style.bodyColor}&text_color={window.style.bodyTextColor}&title_color={window.style.highlightColor}&title_hover_color={window.style.highlightColor}&link_color={window.style.highlightColor}&link_hover_color={window.style.highlightColor}"
src="//ad.a-ads.com/1811738?size=160x600&background_color={color_by_name_no_prefix('body_color')}&text_color={color_by_name_no_prefix('body_text_color')}&title_color={color_by_name_no_prefix('highlight_color')}&title_hover_color={color_by_name_no_prefix('highlight_color')}&link_color={color_by_name_no_prefix('highlight_color')}&link_hover_color={color_by_name_no_prefix('highlight_color')}"
style="width:160px; height:600px; border:0px; padding:0; overflow:hidden; background-color: transparent;"
title="A-ads advertisement">
</iframe>

10
svelte/src/file_viewer/DetailsWindow.svelte
View File

@@ -1,7 +1,7 @@
<script>
import { onMount } from "svelte";
import { formatDataVolume, formatDate, formatThousands } from "../util/Formatting.svelte"
import { domain_url } from "../util/Util.svelte";
import { color_by_name, domain_url } from "../util/Util.svelte";
import Chart from "../util/Chart.svelte";
export let file = {
@@ -75,15 +75,15 @@ onMount(() => {
label: "Views",
borderWidth: 2,
pointRadius: 0,
borderColor: "#"+window.style.highlightColor,
backgroundColor: "#"+window.style.highlightColor,
borderColor: color_by_name("highlight_color"),
backgroundColor: color_by_name("highlight_color"),
},
{
label: "Downloads",
borderWidth: 2,
pointRadius: 0,
borderColor: "#"+window.style.dangerColor,
backgroundColor: "#"+window.style.dangerColor,
borderColor: color_by_name("danger_color"),
backgroundColor: color_by_name("danger_color"),
},
];
})

15
svelte/src/file_viewer/FileViewer.svelte
View File

@@ -410,7 +410,9 @@ const keyboard_event = evt => {
bind:this={list_navigator}
files={list.files}
shuffle={list_shuffle}
on:set_file={e => { open_file_index(e.detail) }}>
on:set_file={e => open_file_index(e.detail)}
on:toggle_gallery={toggle_gallery}
>
</ListNavigator>
{/if}
@@ -423,17 +425,6 @@ const keyboard_event = evt => {
<hr/>
{/if}
{#if is_list}
<button
on:click={toggle_gallery}
class="toolbar_button"
class:button_highlight={view === "gallery"}
title="Opens a gallery view of the album">
<i class="icon">photo_library</i>
Gallery
</button>
{/if}
{#if file.abuse_type === "" && view === "file"}
<button
on:click={downloader.download_file}

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

@@ -178,7 +178,7 @@ const drop = (e, index) => {
overflow: hidden;
border-radius: 8px;
box-shadow: 1px 1px 4px -1px var(--shadow_color);
background-color: var(--input_background);
background: var(--input_background);
word-break: break-all;
text-align: center;
line-height: 1.2em;
@@ -187,8 +187,12 @@ const drop = (e, index) => {
text-decoration: none;
vertical-align: top;
color: var(--body_text_color);
transition: background 0.2s;
}
.file:hover, .highlight {
.file:hover {
background: var(--input_hover_background);
}
.highlight {
box-shadow: 0 0 2px 2px var(--highlight_color);
text-decoration: none;
}

2
svelte/src/file_viewer/IntroPopup.svelte
View File

@@ -57,7 +57,7 @@ onMount(() => {
height: auto;
padding: 8px;
background-color: var(--popout_color);
box-shadow: 2px 2px 16px var(--shadow_color);
box-shadow: 1px 1px 10px -2px var(--shadow_color);
border-radius: 20px;
z-index: 50;
transition: opacity .4s, left .5s, top .5s;

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

@@ -18,6 +18,9 @@ export const next = () => {
export const prev = () => {
dispatch("set_file", selected_file_index-1)
}
export const toggle_gallery = () => {
dispatch("toggle_gallery")
}
let history = []
export const rand_item = () => {
@@ -69,8 +72,9 @@ export const set_item = idx => {
</script>
<div class="nav_container">
<button class="nav_button" style="margin-right: 0;" on:click={prev} title="Open the previous file">
<i class="icon">chevron_left</i>
<button class="nav_button" on:click={toggle_gallery} title="Opens a gallery view of the album">
<i class="icon">photo_library</i><br/>
Gallery
</button>
<div bind:this={file_list_div} class="list_navigator">
{#each files as file, index (file)}
@@ -84,9 +88,6 @@ export const set_item = idx => {
</a>
{/each}
</div>
<button class="nav_button" style="margin-left: 0;" on:click={next} title="Open the next file">
<i class="icon">chevron_right</i>
</button>
</div>
<style>
@@ -104,7 +105,6 @@ export const set_item = idx => {
.nav_button{
flex-grow: 0;
flex-shrink: 0;
height: 2.6em;
margin-top: 8px;
}

1
svelte/src/home_page/ForCreators.svelte
View File

@@ -76,7 +76,6 @@ header {
}
.keyword {
font-size: 1.1em;
text-shadow: 1px 1px 3px var(--shadow_color);
}
h2 {
border-bottom: none;

21
svelte/src/user_home/Home.svelte
View File

@@ -5,6 +5,7 @@ import Chart from "../util/Chart.svelte";
import StorageProgressBar from "./StorageProgressBar.svelte";
import HotlinkProgressBar from "./HotlinkProgressBar.svelte";
import Euro from "../util/Euro.svelte"
import { color_by_name } from "../util/Util.svelte";
let graph_views_downloads = null
let graph_bandwidth = null
@@ -140,15 +141,15 @@ onMount(() => {
label: "Views",
borderWidth: 2,
pointRadius: 0,
borderColor: "#"+window.style.highlightColor,
backgroundColor: "#"+window.style.highlightColor,
borderColor: color_by_name("highlight_color"),
backgroundColor: color_by_name("highlight_color"),
},
{
label: "Downloads",
borderWidth: 2,
pointRadius: 0,
borderColor: "#"+window.style.dangerColor,
backgroundColor: "#"+window.style.dangerColor,
borderColor: color_by_name("danger_color"),
backgroundColor: color_by_name("danger_color"),
},
];
graph_bandwidth.data().datasets = [
@@ -156,22 +157,22 @@ onMount(() => {
label: "Total bandwidth",
borderWidth: 2,
pointRadius: 0,
borderColor: "#"+window.style.chart1Color,
backgroundColor: "#"+window.style.chart1Color,
borderColor: color_by_name("chart_1_color"),
backgroundColor: color_by_name("chart_1_color"),
},
{
label: "Premium bandwidth",
borderWidth: 2,
pointRadius: 0,
borderColor: "#"+window.style.chart2Color,
backgroundColor: "#"+window.style.chart2Color,
borderColor: color_by_name("chart_2_color"),
backgroundColor: color_by_name("chart_2_color"),
},
{
label: "Kickback bandwidth",
borderWidth: 2,
pointRadius: 0,
borderColor: "#"+window.style.chart3Color,
backgroundColor: "#"+window.style.chart3Color,
borderColor: color_by_name("chart_3_color"),
backgroundColor: color_by_name("chart_3_color"),
},
];

5
svelte/src/util/Chart.svelte
View File

@@ -1,6 +1,7 @@
<script>
import { onMount } from "svelte";
import { formatDataVolume, formatNumber } from "./Formatting.svelte";
import { color_by_name } from "./Util.svelte";
import {
Chart,
PointElement,
@@ -38,7 +39,7 @@ export const update = () => {
return chart_object.update()
}
Chart.defaults.color = "#"+window.style.bodyTextColor;
Chart.defaults.color = color_by_name("body_text_color");
Chart.defaults.font.size = 15;
Chart.defaults.font.family = "system-ui, sans-serif";
Chart.defaults.maintainAspectRatio = false;
@@ -91,7 +92,7 @@ onMount(() => {
grid: {
display: true,
drawBorder: false,
color: "#"+window.style.separatorColor,
color: color_by_name("separator"),
},
},
x: {

9
svelte/src/util/ThemePicker.svelte
View File

@@ -33,10 +33,13 @@ let set = s => {
Canta
</button>
<button class:button_highlight={theme==="nord"} on:click={() => {set("nord")}}>
Nord
Nord (dynamic)
</button>
<button class:button_highlight={theme==="snowstorm"} on:click={() => {set("snowstorm")}}>
Snowstorm
<button class:button_highlight={theme==="nord_dark"} on:click={() => {set("nord_dark")}}>
Nord (dark)
</button>
<button class:button_highlight={theme==="nord_light"} on:click={() => {set("nord_light")}}>
Nord (light)
</button>
<button class:button_highlight={theme==="skeuos"} on:click={() => {set("skeuos")}}>
Skeuos

7
svelte/src/util/Util.svelte
View File

@@ -59,4 +59,11 @@ export const add_upload_history = id => {
// Save the new ID
localStorage.setItem("uploaded_files", id + "," + uploads);
}
export const color_by_name = name => {
return getComputedStyle(document.documentElement).getPropertyValue("--"+name);
}
export const color_by_name_no_prefix = name => {
return color_by_name(name).replace(/^#/, "");
}
</script>