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

Customizable card size for dashboard

Browse Source
This commit is contained in:
Wim Brand
2024-07-11 17:45:10 +02:00
parent f3f7dc2e09
commit 2bfb2f0957
3 changed files with 161 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
svelte/src/user_home/dashboard/CardFSHome.svelte
View File

@@ -1,21 +1,13 @@
<script>
import { onMount } from "svelte";
import Navigator from "../../filesystem/Navigator.svelte";
import ListView from "../../filesystem/filemanager/ListView.svelte";
import { fs_encode_path } from "../../filesystem/FilesystemUtil";
import { fs_encode_path, fs_node_icon } from "../../filesystem/FilesystemUtil";
let nav;
let state = {
children: [],
};
const node_click = e => {
window.location.href = "/d" + fs_encode_path(state.children[e.detail].path)
}
const node_share_click = e => {
window.location.href = "/d/" + state.children[e.detail].id
}
onMount(() => {
nav.navigate("/me", false)
})
@@ -23,10 +15,82 @@ onMount(() => {
<Navigator bind:this={nav} bind:state={state} history_enabled={false}/>
<ListView
state={state}
on:node_click={node_click}
on:node_share_click={node_share_click}
hide_edit
hide_branding
/>
<div class="directory">
{#each state.children as child, index (child.path)}
<a
href={"/d"+fs_encode_path(child.path)}
class="node"
class:node_selected={child.fm_selected}
class:hidden={child.name.startsWith(".")}
>
<img src={fs_node_icon(child, 64, 64)} class="node_icon" alt="icon"/>
<div class="node_name">
{child.name}
</div>
{#if child.id}
<a href="/d/{child.id}" class="button action_button">
<i class="icon" title="This file / directory is shared. Click to open public link">share</i>
</a>
{/if}
</a>
{/each}
</div>
<style>
.directory {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 8px;
gap: 8px;
}
.node {
display: flex;
flex: 1 1 auto;
flex-direction: row;
align-content: center;
align-items: center;
justify-content: center;
text-decoration: none;
color: var(--body_text-color);
gap: 2px;
padding: 2px;
border-radius: 8px;
width: 300px;
max-width: 100%;
border: 1px solid var(--input_background);
}
.node:hover {
background: var(--input_hover_background);
color: var(--input_text);
text-decoration: none;
}
.node > * {
flex: 0 0 auto;
}
.node_icon {
height: 32px;
width: 32px;
vertical-align: middle;
border-radius: 4px;
}
.node_name {
flex: 1 1 auto;
display: flex;
align-items: center;
word-break: break-all;
line-height: 1.2em;
}
.action_button {
margin: 0;
background: none;
color: var(--body_text_color);
box-shadow: none;
}
.hidden {
display: none;
}
</style>

4
svelte/src/user_home/dashboard/CardStatistics.svelte
View File

@@ -4,8 +4,8 @@ import Chart from "../../util/Chart.svelte";
import { color_by_name } from "../../util/Util.svelte";
import { formatDataVolume, formatThousands } from "../../util/Formatting.svelte";
export let expanded = false
$: chart_height = expanded ? "250px" : "150px"
export let card_size = 1
$: chart_height = (100 + (card_size * 50)) + "px"
let graph_views_downloads = null
let graph_bandwidth = null

137
svelte/src/user_home/dashboard/Dashboard.svelte
View File

@@ -14,36 +14,54 @@ let cards = []
const save = () => {
let storage = {
expanded: [],
hidden: [],
size: {},
}
for (const card of cards) {
if (card.expanded === true) {
storage.expanded.push(card.id)
}
}
for (const card of cards) {
if (card.hidden === true) {
storage.hidden.push(card.id)
if (card.size !== undefined && card.size !== 1) {
storage.size[card.id] = card.size
}
}
window.localStorage.setItem("dashboard_layout", JSON.stringify(storage))
}
const min_card_size = 0
const def_card_size = 1
const max_card_size = 3
const expand = i => {
if (cards[i].size === undefined) {
cards[i].size = def_card_size
}
if (cards[i].size < max_card_size) {
cards[i].size++
}
save()
}
const shrink = i => {
if (cards[i].size === undefined) {
cards[i].size = def_card_size
}
if (cards[i].size > min_card_size) {
cards[i].size--
}
save()
}
onMount(() => {
cards = [
{
id: "upload",
elem: CardUpload,
title: "Quick upload",
link: "/",
}, {
id: "filesystem_home",
elem: CardFsHome,
title: "Filesystem home",
link: "/d/me",
hidden_default: window.user.subscription.filesystem_access === false,
hidden: window.user.subscription.filesystem_access === false,
}, {
id: "account",
elem: CardAccount,
@@ -59,7 +77,7 @@ onMount(() => {
elem: CardPrepaidTransactions,
title: "Prepaid transactions",
link: "/user/prepaid/transactions",
hidden_default: window.user.subscription.type !== "prepaid"
hidden: window.user.subscription.type !== "prepaid"
}, {
id: "usage",
elem: CardUsage,
@@ -78,19 +96,19 @@ onMount(() => {
// Apply the view settings from localstorage
try {
const storage = JSON.parse(window.localStorage.getItem("dashboard_layout"))
if (storage === null) {
const layout = JSON.parse(window.localStorage.getItem("dashboard_layout"))
if (layout === null) {
return
}
for (const card of cards) {
if (storage.expanded && storage.expanded.includes(card.id)) {
card.expanded = true
}
if (storage.hidden && storage.hidden.includes(card.id)) {
card.hidden = true
if (layout.size !== undefined && layout.size[card.id] !== undefined) {
card.size = layout.size[card.id]
} else {
card.size = 1
}
}
console.log(cards)
} catch (err) {
console.warn("Failed to load dashboard settings", err)
return
@@ -99,43 +117,47 @@ onMount(() => {
</script>
<div class="cards">
{#each cards as card (card.id)}{#if !card.hidden && !card.hidden_default}
<div class="card" class:card_wide={card.expanded}>
<div class="title_box">
<h2>{card.title}</h2>
{#if card.link}
<Button link_href={card.link} icon="link" flat/>
{/if}
<Button
click={() => {card.expanded = !card.expanded; save()}}
icon={card.expanded ? "fullscreen_exit" : "fullscreen"}
flat/>
<Button
click={() => {card.hidden = !card.hidden; save()}}
icon="visibility_off"
flat/>
</div>
<div class="card_component">
<svelte:component this={card.elem} expanded={card.expanded}/>
</div>
</div>
{/if}{/each}
</div>
<div class="cards">
{#each cards as card (card.id)}
{#if card.hidden}
<div class="card">
{#each cards as card, i (card.id)}
{#if !card.hidden && card.size > 0}
<div
class="card"
class:size_1={card.size === 1}
class:size_2={card.size === 2}
class:size_3={card.size === 3}
>
<div class="title_box">
<h2>{card.title}</h2>
{#if card.link}
<Button link_href={card.link} icon="link" flat/>
{/if}
<Button click={() => {card.hidden = !card.hidden; save()}} icon="visibility" flat/>
<h2>{card.title}</h2>
<Button click={() => shrink(i)} icon="zoom_out" flat/>
<span>
{card.size === undefined ? 1 : card.size}
</span>
<Button click={() => expand(i)} icon="zoom_in" flat/>
</div>
<div class="card_component">
<svelte:component this={card.elem} card_size={card.size}/>
</div>
</div>
{/if}
{/each}
</div>
<div class="cards">
{#each cards as card, i (card.id)}
{#if card.size === 0}
<div class="card">
<div class="title_box">
{#if card.link}
<Button link_href={card.link} icon="link" flat/>
{/if}
<h2>{card.title}</h2>
<Button click={() => expand(i)} icon="visibility" flat/>
</div>
</div>
{/if}
@@ -155,29 +177,28 @@ onMount(() => {
flex: 1 0 auto;
display: flex;
flex-direction: column;
width: 26em;
max-width: 100%;
background: var(--body_background);
border-radius: 8px;
padding: 8px;
text-align: initial;
max-height: 500px;
}
.card_component {
flex: 1 1 auto;
overflow: auto;
}
.card_wide {
flex-basis: auto;
width: 100%;
max-height: none;
}
.size_1 { width: 400px; }
.size_1 > .card_component { max-height: 400px; }
.size_2 { width: 800px; }
.size_2 > .card_component { max-height: 500px; }
.size_3 { width: 1200px; }
.size_3 > .card_component { max-height: 600px; }
.title_box {
flex: 0 0 auto;
display: flex;
flex-direction: row;
align-items: flex-start;
align-items: center;
border-bottom: 1px solid var(--separator);
}
.title_box > h2 {