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

support new thumbnail api

Browse Source
This commit is contained in:
Wim Brand
2019-12-10 14:47:11 +01:00
parent dc744b65e4
commit 4c33b0841e
12 changed files with 149 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
res/template/account/file_manager.html
View File

@@ -5,33 +5,46 @@
{{template "user_style" .}}
<script type="text/javascript">var apiEndpoint = '{{.APIEndpoint}}';</script>
<style>
#page_body {
height: 100%;
padding: 0;
}
.file_manager {
position: absolute;
padding: 0;
background-color: var(--body_color);
background-color: var(--layer_1_color);
box-shadow: #000000 8px 8px 50px 5px;
left:100px;
top:100px;
right: 100px;
min-width: 600px;
max-width: 1000px;
left:50px;
top:50px;
right: 50px;
bottom: 50px;
display: flex;
flex-direction: column;
}
.file_manager > .nav_bar {
flex-shrink: 0;
display: flex;
flex-direction: row
}
.file_manager > .nav_bar :first-child {margin-left: 5px;}
.file_manager > .nav_bar :last-child {margin-right: 5px;}
.file_manager > .nav_bar > .breadcrumbs {flex: 1; margin: 1px 10px; min-width: 100px;}
.file_manager > .status_bar {text-align: left;}
.file_manager > .directory_area {
flex-shrink: 1;
margin: 0;
padding: 5px;
max-height: 500px;
overflow-x: hidden;
overflow-y: scroll;
text-align: left;
}
.file_manager > .directory_area > .file_button {
margin: 5px;
}
.file_manager > .status_bar {
flex-shrink: 0;
text-align: left;
}
.file_button {
height: 20px;
@@ -44,36 +57,42 @@
</head>
<body>
{{template "page_top" .}}
<br/>
<div class="file_manager">
<div class="nav_bar highlight_light">
<button>⇐</button>
<button>⇑</button>
<button style="margin-right: 16px;">⇒</button>
<button>🏠</button>
<input class="breadcrumbs" type="text" value="/{{.Username}}/Documents"/>
<button>↻</button>
<button>🔎</button>
<button style="margin-left: 16px;">_</button>
<button>☐</button>
<button class="button_red">✕</button>
</div>
<div class="directory_area">
{{$files := .PixelAPI.UserFiles 0 1000}}
{{range $files.Files}}
<a class="file_button" href="/u/{{.ID}}" target="_blank">
<img src="{{$.APIEndpoint}}/file/{{.ID}}/thumbnail" alt="{{.Name}}" />
{{.Name}}
</a>
{{end}}
</div>
<div class="status_bar highlight_light">
13 items (5 directories, 7 files). Total size: 1.23 GB
{{template "page_menu" .}}
<div id="page_body" class="page_body">
<div class="file_manager">
<div class="nav_bar highlight_light">
<button>⇐</button>
<button>⇑</button>
<button style="margin-right: 16px;">⇒</button>
<button>🏠</button>
<input class="breadcrumbs" type="text" value="/{{.Username}}/Documents"/>
<button>↻</button>
<button>🔎</button>
<button style="margin-left: 16px;">_</button>
<button>☐</button>
<button class="button_red">✕</button>
</div>
<div class="directory_area">
{{$size := 0}}
{{$count := 0}}
{{$files := .PixelAPI.UserFiles 0 10000}}
{{range $files.Files}}
{{$size = add $size .Size}}
{{$count = add $count 1}}
<a class="file_button" href="/u/{{.ID}}" target="_blank">
<img src="{{$.APIEndpoint}}/file/{{.ID}}/thumbnail?width=16&height=16" alt="{{.Name}}" />
{{.Name}}
</a>
{{end}}
</div>
<div class="status_bar highlight_light">
{{$count}} items (0 directories, {{$count}} files). Total size: {{formatData $size}}
</div>
</div>
</div>
{{template "page_bottom" .}}
{{template "analytics"}}
</body>
</html>

2
res/template/account/user_files.html
View File

@@ -37,7 +37,7 @@
{{range $files.Files}}<!--
--><a class="file_button" href="/u/{{.ID}}" target="_blank">
<img src="{{$.APIEndpoint}}/file/{{.ID}}/thumbnail" alt="{{.Name}}" />
<img src="{{$.APIEndpoint}}/file/{{.ID}}/thumbnail?width=80&height=80" alt="{{.Name}}" />
<span style="color: var(--highlight_color);">{{.Name}}</span>
<br/>
{{.DateUpload.Format "2006-01-02 15:04:05"}}

4
res/template/account/user_home.html
View File

@@ -23,7 +23,7 @@
{{$files := .PixelAPI.UserFiles 0 15}}
{{range $files.Files}}<!--
--><a class="file_button" href="/u/{{.ID}}" target="_blank">
<img src="{{$.APIEndpoint}}/file/{{.ID}}/thumbnail" alt="{{.Name}}" />
<img src="{{$.APIEndpoint}}/file/{{.ID}}/thumbnail?width=80&height=80" alt="{{.Name}}" />
<span style="color: var(--highlight_color);">{{.Name}}</span>
<br/>
{{.DateUpload.Format "2006-01-02 15:04:05"}}
@@ -37,7 +37,7 @@
{{$lists := .PixelAPI.UserLists 0 15}}
{{range $lists.Lists}}<!--
--><a class="file_button" href="/l/{{.ID}}" target="_blank">
<img src="{{$.APIEndpoint}}/list/{{.ID}}/thumbnail" alt="{{.Title}}" />
<img src="{{$.APIEndpoint}}/list/{{.ID}}/thumbnail?width=80&height=80" alt="{{.Title}}" />
<span style="color: var(--highlight_color);">{{.Title}}</span>
({{.FileCount}} Files)
<br/>

2
res/template/account/user_lists.html
View File

@@ -30,7 +30,7 @@
{{range $lists.Lists}}<!--
--><a class="file_button" href="/l/{{.ID}}" target="_blank">
<img src="{{$.APIEndpoint}}/list/{{.ID}}/thumbnail" alt="{{.Title}}" />
<img src="{{$.APIEndpoint}}/list/{{.ID}}/thumbnail?width=80&height=80" alt="{{.Title}}" />
<span style="color: var(--highlight_color);">{{.Title}}</span>
({{.FileCount}} Files)
<br/>

29
res/template/fragments/api/file.html
View File

@@ -174,15 +174,16 @@
{{end}}
{{define "api-file-id-thumbnail-get"}}
<details class="api_doc_details request_get">
<summary><span class="method">GET</span>/file/{id}/thumbnail</summary>
<summary><span class="method">GET</span>/file/{id}/thumbnail?width=xxx&height=xxx</summary>
<div>
<h3>Description</h3>
<p>
Returns a PNG thumbnail image representing the file.
The thumbnail is always 100*100 px. If the source file
is parsable by imagemagick the thumbnail will be
generated from the file, if not it will be a generic
mime type icon.
Returns a PNG thumbnail image representing the file. The thumbnail
image will be 128x128 px by default. You can specify the width and
height with parameters in the URL. The width and height parameters
need to be a multiple of 16. So the allowed values are 16, 32, 48,
64, 80, 96, 112 and 128. If a thumbnail cannot be generated for the
file you will be redirected to a mime type image of 128x128 px.
</p>
<h3>Parameters</h3>
<table>
@@ -198,10 +199,24 @@
<td>URL</td>
<td>ID of the file to get a thumbnail for</td>
</tr>
<tr>
<td>width</td>
<td>false</td>
<td>URL</td>
<td>Width of the thumbnail image</td>
</tr>
<tr>
<td>id</td>
<td>false</td>
<td>URL</td>
<td>Height of the thumbnail image</td>
</tr>
</table>
<h3>Returns</h3>
<p>
A PNG image of 100*100 px.
A PNG image if a thumbnail can be generated. If a thumbnail cannot
be generated you will get a 301 redirect to an image representing
the type of the file.
</p>
</div>
</details>

35
res/template/fragments/page_wrap.html
View File

@@ -1,5 +1,4 @@
{{define "page_top"}}
<!-- <div id="page_wrapper"> -->
{{define "page_menu"}}
<button id="button_toggle_navigation" class="button_toggle_navigation" onclick="toggleMenu();">☰</button>
<div id="page_navigation" class="page_navigation">
<a href="/">Home</a>
@@ -19,23 +18,10 @@
<a href="/api">API</a>
<a href="/appearance">Appearance</a>
</div>
<div id="page_body" class="page_body">
{{end}}
{{define "page_bottom"}}
<div class="highlight_dark">
Pixeldrain is a product by <a href="//fornaxian.com" target="_blank">Fornaxian Technologies</a> |
Twitter:&nbsp;<a href="https://twitter.com/Fornax96" target="_blank">@Fornax96</a>
Reddit:&nbsp;<a href="https://reddit.com/r/pixeldrain" target="_blank">/r/pixeldrain</a>
Medium:&nbsp;<a href="https://medium.com/pixeldrain" target="_blank">Pixeldrain</a>
</div>
</div><!-- end page_body -->
<!-- </div>end page_wrapper -->
<script>
var nav = document.getElementById("page_navigation");
var body = document.getElementById("page_body");
function toggleMenu() {
var nav = document.getElementById("page_navigation");
var body = document.getElementById("page_body");
if (nav.offsetLeft === 0) {
// Menu is visible
@@ -50,3 +36,18 @@
}
</script>
{{end}}
{{define "page_top"}}
{{template "page_menu" .}}
<div id="page_body" class="page_body">
{{end}}
{{define "page_bottom"}}
<div class="highlight_dark">
Pixeldrain is a product by <a href="//fornaxian.com" target="_blank">Fornaxian Technologies</a> |
Twitter:&nbsp;<a href="https://twitter.com/Fornax96" target="_blank">@Fornax96</a>
Reddit:&nbsp;<a href="https://reddit.com/r/pixeldrain" target="_blank">/r/pixeldrain</a>
Medium:&nbsp;<a href="https://medium.com/pixeldrain" target="_blank">Pixeldrain</a>
</div>
</div><!-- end page_body -->
{{end}}