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

add file viewers and improve directory viewer

Browse Source
This commit is contained in:
Wim Brand
2020-11-11 23:45:52 +01:00
parent e6809b3fe4
commit d839b3016b
8 changed files with 1612 additions and 749 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
res/static/svelte/filesystem.css
View File

@@ -1,6 +1,8 @@
.file_viewer.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33{position:absolute;display:flex;flex-direction:column;top:0;right:0;bottom:0;left:0;overflow:hidden}.file_viewer.svelte-1vxdz33>.file_viewer_headerbar.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33{flex-grow:0;flex-shrink:0;display:flex;flex-direction:row;text-align:left;z-index:10;box-shadow:none}.file_viewer.svelte-1vxdz33>.file_viewer_headerbar.svelte-1vxdz33>.svelte-1vxdz33.svelte-1vxdz33{flex-grow:0;flex-shrink:0;margin-left:6px;margin-right:6px;display:inline}.file_viewer.svelte-1vxdz33>.file_viewer_headerbar.svelte-1vxdz33>.file_viewer_headerbar_title.svelte-1vxdz33.svelte-1vxdz33{flex-grow:1;flex-shrink:1;display:flex;flex-direction:column;overflow:hidden;line-height:1.2em;white-space:nowrap;text-overflow:ellipsis;justify-content:center}.button_home.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33::after{content:"pixeldrain"}@media(max-width: 600px){.button_home.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33::after{content:"pd"}}.file_viewer.svelte-1vxdz33>.list_navigator.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33{flex-grow:0;flex-shrink:0;position:relative;display:none;width:100%;background-color:var(--layer_1_color);text-align:center;line-height:1em;overflow-x:auto;overflow-y:hidden;z-index:50;white-space:nowrap}.file_viewer.svelte-1vxdz33>.file_viewer_window.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33{flex-grow:1;flex-shrink:1;position:relative;display:inline-block;width:auto;height:auto;margin:0;z-index:9}.file_viewer.svelte-1vxdz33>.file_viewer_window.svelte-1vxdz33>.file_viewer_file_preview.svelte-1vxdz33.svelte-1vxdz33{position:absolute;left:0;right:0;top:0;bottom:0;display:inline-block;min-height:100px;min-width:100px;text-align:center;vertical-align:middle;transition:left 0.5s;overflow:hidden;box-shadow:inset 2px 2px 8px var(--shadow_color)}.file_viewer.svelte-1vxdz33>.file_viewer_window.svelte-1vxdz33>.file_viewer_file_preview.svelte-1vxdz33>.center.svelte-1vxdz33{position:relative;display:block;margin:auto;max-width:100%;max-height:100%;top:50%;transform:translateY(-50%)}.toolbar.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33{position:absolute;width:8em;z-index:49;overflow:hidden;float:left;background-color:var(--layer_1_color);left:-8em;bottom:0;top:0;padding:0;text-align:left;transition:left 0.5s}.toolbar.toolbar_visible.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33{left:0}.file_viewer.svelte-1vxdz33>.file_viewer_window.svelte-1vxdz33>.file_viewer_file_preview.toolbar_visible.svelte-1vxdz33.svelte-1vxdz33{left:8em}.toolbar.svelte-1vxdz33>div.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33{position:absolute;left:0;top:0;bottom:0;right:-30px;overflow-y:scroll;overflow-x:hidden}.toolbar.svelte-1vxdz33>div.svelte-1vxdz33>div.svelte-1vxdz33.svelte-1vxdz33{position:absolute;left:0;top:0;width:8em;height:auto;text-align:center}.toolbar_button.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33{text-align:left}.toolbar_label.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33{text-align:left;padding-left:10px;font-size:0.8em;line-height:0.7em;margin-top:0.5em}.toolbar_statistic.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33{text-align:center}
.file_viewer.svelte-15t34ei.svelte-15t34ei.svelte-15t34ei{position:absolute;display:flex;flex-direction:column;top:0;right:0;bottom:0;left:0;overflow:hidden}.file_viewer.svelte-15t34ei>.file_viewer_headerbar.svelte-15t34ei.svelte-15t34ei{flex-grow:0;flex-shrink:0;display:flex;flex-direction:row;text-align:left;z-index:10;box-shadow:none;padding:4px}.file_viewer.svelte-15t34ei>.file_viewer_headerbar.svelte-15t34ei>.svelte-15t34ei{flex-grow:0;flex-shrink:0;margin-left:4px;margin-right:4px;display:inline;align-self:center}.file_viewer.svelte-15t34ei>.file_viewer_headerbar.svelte-15t34ei>.file_viewer_headerbar_title.svelte-15t34ei{flex-grow:1;flex-shrink:1;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;flex-direction:row}.breadcrumb.svelte-15t34ei.svelte-15t34ei.svelte-15t34ei{border-radius:1em;min-width:1em;text-align:center;line-height:1.2em;padding:3px 8px;margin:2px 6px}.breadcrumb_button.svelte-15t34ei.svelte-15t34ei.svelte-15t34ei{cursor:pointer;background-color:var(--layer_2_color);transition:0.2s background-color}.breadcrumb_button.svelte-15t34ei.svelte-15t34ei.svelte-15t34ei:hover,.breadcrumb_button.svelte-15t34ei.svelte-15t34ei.svelte-15t34ei:focus,.breadcrumb_button.svelte-15t34ei.svelte-15t34ei.svelte-15t34ei:active{background-color:var(--input_color)}.breadcrumb_last.svelte-15t34ei.svelte-15t34ei.svelte-15t34ei{background-color:var(--highlight_color);color:var(--highlight_text_color)}.button_home.svelte-15t34ei.svelte-15t34ei.svelte-15t34ei::after{content:"pixeldrain"}@media(max-width: 600px){.button_home.svelte-15t34ei.svelte-15t34ei.svelte-15t34ei::after{content:"pd"}}.file_viewer.svelte-15t34ei>.list_navigator.svelte-15t34ei.svelte-15t34ei{flex-grow:0;flex-shrink:0;position:relative;display:none;width:100%;background-color:var(--layer_1_color);text-align:center;line-height:1em;overflow-x:auto;overflow-y:hidden;z-index:50;white-space:nowrap}.file_viewer.svelte-15t34ei>.file_viewer_window.svelte-15t34ei.svelte-15t34ei{flex-grow:1;flex-shrink:1;position:relative;display:inline-block;width:auto;height:auto;margin:0;z-index:9}.file_viewer.svelte-15t34ei>.file_viewer_window.svelte-15t34ei>.file_viewer_file_preview.svelte-15t34ei{position:absolute;left:0;right:0;top:0;bottom:0;display:inline-block;min-height:100px;min-width:100px;text-align:center;vertical-align:middle;transition:left 0.5s;overflow:hidden;box-shadow:inset 2px 2px 8px var(--shadow_color)}.toolbar.svelte-15t34ei.svelte-15t34ei.svelte-15t34ei{position:absolute;width:8em;z-index:49;overflow:hidden;float:left;background-color:var(--layer_1_color);left:-8em;bottom:0;top:0;padding:0;text-align:left;transition:left 0.5s}.toolbar.toolbar_visible.svelte-15t34ei.svelte-15t34ei.svelte-15t34ei{left:0}.file_viewer.svelte-15t34ei>.file_viewer_window.svelte-15t34ei>.file_viewer_file_preview.toolbar_visible.svelte-15t34ei{left:8em}.toolbar.svelte-15t34ei>div.svelte-15t34ei.svelte-15t34ei{position:absolute;left:0;top:0;bottom:0;right:-30px;overflow-y:scroll;overflow-x:hidden}.toolbar.svelte-15t34ei>div.svelte-15t34ei>div.svelte-15t34ei{position:absolute;left:0;top:0;width:8em;height:auto;text-align:center}.toolbar_button.svelte-15t34ei.svelte-15t34ei.svelte-15t34ei{text-align:left}.toolbar_label.svelte-15t34ei.svelte-15t34ei.svelte-15t34ei{text-align:left;padding-left:10px;font-size:0.8em;line-height:0.7em;margin-top:0.5em}.toolbar_statistic.svelte-15t34ei.svelte-15t34ei.svelte-15t34ei{text-align:center}
.sharebar.svelte-gnq1s2{position:absolute;width:7em;left:-8em;bottom:0;top:0;overflow-y:scroll;overflow-x:hidden;float:left;background-color:var(--layer_1_color);box-shadow:inset 1px 1px var(--layer_1_shadow) var(--shadow_color);text-align:center;z-index:48;overflow:hidden;transition:left 0.5s}.visible.svelte-gnq1s2{left:8em}
.container.svelte-1afjvoj.svelte-1afjvoj{height:100%;width:100%;padding:0;overflow-y:auto;text-align:center}.toolbar.svelte-1afjvoj.svelte-1afjvoj{position:relative;display:inline-block;max-width:800px;width:100%;margin:20px 0 0 0;box-sizing:border-box}.directory.svelte-1afjvoj.svelte-1afjvoj{position:relative;display:inline-block;max-width:800px;width:100%;margin:20px 0 40px 0;text-align:left;background-color:var(--layer_2_color);box-shadow:1px 1px var(--layer_2_shadow) var(--shadow_color);box-sizing:border-box}.node.svelte-1afjvoj.svelte-1afjvoj{position:relative;height:40px;overflow:hidden;margin:4px;padding:4px;box-sizing:border-box;cursor:pointer}.node.svelte-1afjvoj.svelte-1afjvoj:hover:not(.node_selected){background-color:var(--input_color_dark);color:var(--input_text_color);text-decoration:none}.node.svelte-1afjvoj>div.svelte-1afjvoj{height:100%;overflow:hidden;padding:0;line-height:32px;box-sizing:border-box;display:inline-block;text-overflow:ellipsis;white-space:nowrap}.node.svelte-1afjvoj>img.svelte-1afjvoj{max-height:100%;margin-right:6px;width:auto;min-width:auto;float:left;display:block}
.container.svelte-11r8rw7{height:100%;width:100%;margin:50px 0 0 0;padding:0;overflow-y:auto;text-align:center}.player.svelte-11r8rw7{width:90%}
.hidden.svelte-6g6w4.svelte-6g6w4{visibility:hidden}.container.svelte-6g6w4.svelte-6g6w4{height:100%;width:100%;padding:0;overflow-y:auto;text-align:center}.width_container.svelte-6g6w4.svelte-6g6w4{position:relative;display:inline-block;max-width:94%;width:1000px;margin:0;padding:0}.toolbar.svelte-6g6w4.svelte-6g6w4{position:relative;display:inline-flex;flex-direction:row;width:100%;margin:16px 0 0 0;padding:0;box-sizing:border-box}.toolbar.svelte-6g6w4>.svelte-6g6w4{flex:0 0 auto}.toolbar_spacer.svelte-6g6w4.svelte-6g6w4{flex:1 1 auto}.directory.svelte-6g6w4.svelte-6g6w4{position:relative;overflow-x:auto;overflow-y:hidden;width:100%;margin:16px 0 16px 0;text-align:left;background-color:var(--layer_2_color);box-shadow:1px 1px var(--layer_2_shadow) var(--shadow_color);box-sizing:border-box}.node.svelte-6g6w4.svelte-6g6w4{display:table-row;text-decoration:none;color:var(--text-color);padding:6px;box-sizing:border-box}.node.svelte-6g6w4.svelte-6g6w4:not(:last-child){border-bottom:1px solid var(--layer_3_color)}.node.svelte-6g6w4.svelte-6g6w4:hover:not(.node_selected){background-color:var(--input_color_dark);color:var(--input_text_color);text-decoration:none}.node.node_selected.svelte-6g6w4.svelte-6g6w4{background-color:var(--highlight_color);color:var(--highlight_text_color)}td.svelte-6g6w4.svelte-6g6w4{padding:4px;vertical-align:middle}.node_icon.svelte-6g6w4.svelte-6g6w4{height:32px;width:auto;vertical-align:middle}.node_name.svelte-6g6w4.svelte-6g6w4{width:100%;overflow:hidden;line-height:1.2em}.node_size.svelte-6g6w4.svelte-6g6w4{min-width:50px;white-space:nowrap}
.container.svelte-xjzx7h{position:relative;display:block;height:100%;width:100%;text-align:center;overflow:hidden}.container.zoom.svelte-xjzx7h{overflow:auto}.image.svelte-xjzx7h{position:relative;display:block;margin:auto;max-width:100%;max-height:100%;top:50%;cursor:pointer;transform:translateY(-50%);box-shadow:1px 1px var(--layer_3_shadow) var(--shadow_color)}.image.zoom.svelte-xjzx7h{max-width:none;max-height:none;top:0;cursor:move;transform:none}
.background.svelte-tirhyp{position:fixed;text-align:center;top:0;right:0;bottom:0;left:0;background-color:rgba(0, 0, 0, 0.5)}.window.svelte-tirhyp{position:absolute;z-index:inherit;display:flex;flex-direction:column;background-color:var(--layer_2_color);max-height:100%;max-width:100%;margin:0 auto;top:20%;left:50%;transform:translate(-50%, -20%);padding:0;box-sizing:border-box;text-align:left;box-shadow:var(--shadow_color) 0px 0px 50px}.header.svelte-tirhyp{flex-grow:0;flex-shrink:0;display:flex;flex-direction:row;padding:1px}.title.svelte-tirhyp{flex-grow:1;flex-shrink:1;display:flex;flex-direction:row;align-items:center;justify-content:center;font-size:1.2em;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.button_close.svelte-tirhyp{flex-grow:0;flex-shrink:0}.body.svelte-tirhyp{flex-grow:1;flex-shrink:1;overflow:auto;padding:10px}
svg.svelte-1pco739{color:var(--highlight_color);fill:currentColor}

1953
res/static/svelte/filesystem.js
View File

File diff suppressed because it is too large Load Diff

2
res/template/filesystem_svelte.html
View File

@@ -22,7 +22,7 @@
{{.OGData}}
<script>
const initialNode = {{.Other}};
const apiEndpoint = '{{.APIEndpoint}}';
window.apiEndpoint = '{{.APIEndpoint}}';
</script>
<link rel='stylesheet' href='/res/svelte/filesystem.css'>