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

Split filesystem up in components

Browse Source 
Also thumbnails work now
This commit is contained in:
Fornax
2023-05-17 15:34:56 +02:00
parent c4cd2e1ee5
commit 277637511c
18 changed files with 711 additions and 595 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,48 +1,10 @@
<script>
import { createEventDispatcher } from "svelte"
import { fs_node_icon, fs_node_type } from "../FilesystemUtil";
let dispatch = createEventDispatcher()
export let state
export let show_hidden = false
const node_icon = node => {
if (node.type === "dir") {
// Folders with an ID are publically shared, use the shared folder icon
if (node.id) {
return "/res/img/mime/folder-remote.png"
} else {
return "/res/img/mime/folder.png"
}
}
switch (node.file_type) {
case "image/gif":
return "/res/img/mime/image-gif.png"
case "image/png", "image/apng":
return "/res/img/mime/image-png.png"
case "image/jpeg":
return "/res/img/mime/image-jpeg.png"
case "application/pdf":
return "/res/img/mime/pdf.png"
case "application/ogg":
return "/res/img/mime/audio.png"
}
if (node.file_type.startsWith("audio/")) {
return "/res/img/mime/audio.png"
} else if (node.file_type.startsWith("video/")) {
return "/res/img/mime/video.png"
} else if (node.file_type.startsWith("text/")) {
return "/res/img/mime/text.png"
} else if (node.file_type.startsWith("image/")) {
return "/res/img/mime/image-png.png"
} else if (node.file_type.startsWith("application/")) {
return "/res/img/mime/archive.png"
}
return "/res/img/mime/empty.png"
}
</script>
<div class="gallery">
@@ -56,7 +18,8 @@ const node_icon = node => {
>
<div
class="icon_container"
style="background-image: url('{node_icon(child)}?width=256&height=256');">
class:cover={fs_node_type(child) === "image" || fs_node_type(child) === "video"}
style='background-image: url("{fs_node_icon(state.root.id, child)}");'>
</div>
{child.name}
</a>
@@ -106,6 +69,9 @@ const node_icon = node => {
font-size: 22px;
text-align: left;
}
.icon_container.cover {
background-size: cover;
}
.hidden {
display: none;
}