2018-06-25 23:05:18 +02:00
|
|
|
{{define "file_manager"}}<!DOCTYPE html>
|
2020-01-17 20:32:21 +01:00
|
|
|
<html lang="en">
|
2018-06-25 23:05:18 +02:00
|
|
|
<head>
|
|
|
|
|
{{template "meta_tags" "File Manager"}}
|
2019-02-18 13:37:41 +01:00
|
|
|
{{template "user_style" .}}
|
2018-07-09 23:19:16 +02:00
|
|
|
<style>
|
2019-12-10 14:47:11 +01:00
|
|
|
#page_body {
|
|
|
|
|
height: 100%;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2020-01-30 22:55:32 +01:00
|
|
|
#button_toggle_navigation {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
2018-07-09 23:19:16 +02:00
|
|
|
.file_manager {
|
|
|
|
|
position: absolute;
|
2019-07-17 23:19:57 +02:00
|
|
|
padding: 0;
|
2019-12-10 14:47:11 +01:00
|
|
|
background-color: var(--layer_1_color);
|
2018-07-09 23:19:16 +02:00
|
|
|
box-shadow: #000000 8px 8px 50px 5px;
|
2020-01-30 22:55:32 +01:00
|
|
|
left:3%;
|
|
|
|
|
top:3%;
|
|
|
|
|
right:3%;
|
|
|
|
|
bottom:3%;
|
2019-12-10 14:47:11 +01:00
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
2018-07-09 23:19:16 +02:00
|
|
|
}
|
2020-01-30 22:55:32 +01:00
|
|
|
@media (max-width: 800px) {
|
|
|
|
|
.file_manager {
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2018-07-09 23:19:16 +02:00
|
|
|
.file_manager > .nav_bar {
|
2019-12-10 14:47:11 +01:00
|
|
|
flex-shrink: 0;
|
2018-07-09 23:19:16 +02:00
|
|
|
display: flex;
|
2020-01-28 22:36:29 +01:00
|
|
|
flex-direction: row;
|
|
|
|
|
}
|
|
|
|
|
.file_manager > .nav_bar > .spacer {width: 8px;}
|
|
|
|
|
.file_manager > .nav_bar > .breadcrumbs {
|
|
|
|
|
flex-grow: .8;
|
|
|
|
|
flex-shrink: 1;
|
2020-01-30 22:55:32 +01:00
|
|
|
min-width: 0;
|
2020-01-28 22:36:29 +01:00
|
|
|
}
|
|
|
|
|
.file_manager > .nav_bar > .input_search {
|
|
|
|
|
flex-grow: .2;
|
|
|
|
|
flex-shrink: 1;
|
2020-01-30 22:55:32 +01:00
|
|
|
min-width: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.file_manager > .directory_sorters {
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
position: relative;
|
2018-07-09 23:19:16 +02:00
|
|
|
}
|
2020-01-30 22:55:32 +01:00
|
|
|
.file_manager > .directory_sorters > div {
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
flex-grow: 1;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
margin: 4px 12px;
|
|
|
|
|
border-bottom: 1px solid var(--input_color);
|
|
|
|
|
}
|
|
|
|
|
|
2018-10-10 23:05:49 +02:00
|
|
|
.file_manager > .directory_area {
|
2019-12-10 14:47:11 +01:00
|
|
|
flex-shrink: 1;
|
2020-01-28 22:36:29 +01:00
|
|
|
flex-grow: 1;
|
2019-07-17 23:19:57 +02:00
|
|
|
margin: 0;
|
2020-01-29 11:57:33 +01:00
|
|
|
padding: 0;
|
2018-10-10 23:05:49 +02:00
|
|
|
overflow-x: hidden;
|
|
|
|
|
overflow-y: scroll;
|
|
|
|
|
text-align: left;
|
2020-01-28 22:36:29 +01:00
|
|
|
box-sizing: border-box;
|
2019-12-10 14:47:11 +01:00
|
|
|
}
|
2020-01-30 22:55:32 +01:00
|
|
|
.file_manager > .directory_area > div {
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
2019-12-10 14:47:11 +01:00
|
|
|
.file_manager > .status_bar {
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
text-align: left;
|
|
|
|
|
}
|
2018-07-09 23:19:16 +02:00
|
|
|
|
2020-01-28 22:36:29 +01:00
|
|
|
.node {
|
|
|
|
|
position: relative;
|
2020-01-30 22:55:32 +01:00
|
|
|
height: 32px;
|
2020-01-28 22:36:29 +01:00
|
|
|
overflow: hidden;
|
2020-01-30 22:55:32 +01:00
|
|
|
border-radius: 4px;
|
|
|
|
|
margin: 6px;
|
2020-01-28 22:36:29 +01:00
|
|
|
box-sizing: border-box;
|
|
|
|
|
display: block;
|
|
|
|
|
color: var(--text_color);
|
|
|
|
|
}
|
|
|
|
|
.node:hover {background-color: var(--input_color_dark); text-decoration: none;}
|
|
|
|
|
.node > span {vertical-align: middle;}
|
|
|
|
|
.node > img {
|
|
|
|
|
max-height: 100%;
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
float: left;
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.spinner {
|
2020-01-30 22:55:32 +01:00
|
|
|
position: absolute;
|
2020-01-28 22:36:29 +01:00
|
|
|
display: block;
|
|
|
|
|
margin: auto;
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
max-height: 100%;
|
|
|
|
|
top: 50%;
|
2020-01-30 22:55:32 +01:00
|
|
|
left: 50%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
2020-01-28 22:36:29 +01:00
|
|
|
width: 100px;
|
|
|
|
|
height: 100px;
|
2018-10-10 23:05:49 +02:00
|
|
|
}
|
2018-07-09 23:19:16 +02:00
|
|
|
</style>
|
2018-06-25 23:05:18 +02:00
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
2020-01-28 22:36:29 +01:00
|
|
|
<template id="tpl_spinner"><div id="spinner" class="spinner">{{template `spinner.svg` .}}</div></template>
|
|
|
|
|
|
2019-12-10 14:47:11 +01:00
|
|
|
{{template "page_menu" .}}
|
|
|
|
|
|
|
|
|
|
<div id="page_body" class="page_body">
|
2020-01-28 22:36:29 +01:00
|
|
|
<div id="file_manager" class="file_manager">
|
|
|
|
|
<div id="nav_bar" class="nav_bar highlight_light">
|
2020-01-30 22:55:32 +01:00
|
|
|
<button id="btn_menu" onclick="toggleMenu();">☰</button>
|
2020-01-28 22:36:29 +01:00
|
|
|
<div class="spacer"></div>
|
|
|
|
|
<button id="btn_back" >⇐</button id="btn_forward">
|
|
|
|
|
<button id="btn_up" >⇑</button id="btn_forward">
|
|
|
|
|
<button id="btn_forward">⇒</button>
|
|
|
|
|
<div class="spacer"></div>
|
|
|
|
|
<button id="btn_home">🏠</button>
|
|
|
|
|
<div class="spacer"></div>
|
2019-12-10 14:47:11 +01:00
|
|
|
<input class="breadcrumbs" type="text" value="/{{.Username}}/Documents"/>
|
2020-01-28 22:36:29 +01:00
|
|
|
<div class="spacer"></div>
|
|
|
|
|
<input id="input_search" class="input_search" type="text" placeholder="Search..."/>
|
|
|
|
|
<div class="spacer"></div>
|
|
|
|
|
<button id="btn_reload">↻</button>
|
2019-12-10 14:47:11 +01:00
|
|
|
</div>
|
2020-01-30 22:55:32 +01:00
|
|
|
<div id="directory_sorters" class="directory_sorters"></div>
|
2020-01-28 22:36:29 +01:00
|
|
|
<div id="directory_area" class="directory_area"></div>
|
|
|
|
|
<div id="directory_footer" class="status_bar highlight_light"></div>
|
2018-07-09 23:19:16 +02:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2020-01-28 22:36:29 +01:00
|
|
|
<script>
|
|
|
|
|
'use strict';
|
|
|
|
|
let apiEndpoint = '{{.APIEndpoint}}';
|
|
|
|
|
{{template `util.js`}}
|
|
|
|
|
{{template `FileManager.js`}}
|
|
|
|
|
|
2020-01-30 22:55:32 +01:00
|
|
|
let fm = null;
|
2020-01-28 22:36:29 +01:00
|
|
|
window.addEventListener("load", () => {
|
2020-01-30 22:55:32 +01:00
|
|
|
fm = new FileManager(document.getElementById("file_manager"));
|
2020-01-28 22:36:29 +01:00
|
|
|
fm.getUserFiles();
|
|
|
|
|
});
|
|
|
|
|
</script>
|
2018-06-25 23:05:18 +02:00
|
|
|
{{template "analytics"}}
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
{{end}}
|
