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

some usability fixes

Browse Source
This commit is contained in:
Wim Brand
2018-09-11 21:35:44 +02:00
parent 3f8617ee86
commit 7cc7bd6821
7 changed files with 114 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
res/static/res/img/bytecounter.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 7.7 KiB

36
res/static/res/script/DetailsWindow.js
View File

@@ -2,25 +2,47 @@ var DetailsWindow = {
visible: false, visible: false,
toggle: function () { toggle: function () {
if (this.visible) { if (this.visible) {
$("#info-popup").fadeOut(500); $("#info_popup").fadeOut(500);
$("#btnDetails").removeClass("button_highlight"); $("#btnDetails").removeClass("button_highlight");
this.visible = false; this.visible = false;
} else { } else {
$("#info-popup").fadeIn(500); $("#info_popup").fadeIn(500);
$("#btnDetails").addClass("button_highlight"); $("#btnDetails").addClass("button_highlight");
this.visible = true; this.visible = true;
} }
}, },
setDetails: function (file) { setDetails: function (file) {
var fileInfo = "<table>" if (Viewer.isList) {
// Lists give incomplete file information, so we have to request
// more details in the background. File descriptions only exist in
// lists, so for that we use the data provided in the page source
$.ajax({
dataType: "json",
url: apiEndpoint + "/file/" + file.id + "/info",
success: function(data){
$("#info_file_details").html(
"<table>"
+ "<tr><td>Name<td><td>" + escapeHTML(data.file_name) + "</td></tr>"
+ "<tr><td>Url<td><td><a href=\"/u/" + data.id + "\">/u/" + data.id + "</a></td></tr>"
+ "<tr><td>Mime Type<td><td>" + escapeHTML(data.mime_type) + "</td></tr>"
+ "<tr><td>Id<td><td>" + data.id + "</td></tr>"
+ "<tr><td>Size<td><td class=\"bytecounter\">" + data.file_size + "</td></tr>"
+ "<tr><td>Upload Date<td><td>" + data.date_upload + "</td></tr>"
+ "<tr><td>Description<td><td>" + escapeHTML(file.description) + "</td></tr>"
+ "</table>"
);
}
});
} else {
$("#info_file_details").html(
"<table>"
+ "<tr><td>Name<td><td>" + escapeHTML(file.file_name) + "</td></tr>" + "<tr><td>Name<td><td>" + escapeHTML(file.file_name) + "</td></tr>"
+ "<tr><td>Url<td><td><a href=\"/u/" + file.id + "\">Open</a></td></tr>"
+ "<tr><td>Mime Type<td><td>" + escapeHTML(file.mime_type) + "</td></tr>" + "<tr><td>Mime Type<td><td>" + escapeHTML(file.mime_type) + "</td></tr>"
+ "<tr><td>Id<td><td>" + file.id + "</td></tr>" + "<tr><td>Id<td><td>" + file.id + "</td></tr>"
+ "<tr><td>Size<td><td class=\"bytecounter\">" + file.file_size + "</td></tr>" + "<tr><td>Size<td><td class=\"bytecounter\">" + file.file_size + "</td></tr>"
+ "<tr><td>Upload Date<td><td>" + file.date_upload + "</td></tr>" + "<tr><td>Upload Date<td><td>" + file.date_upload + "</td></tr>"
+ "<tr><td>Description<td><td>" + escapeHTML(file.desc) + "</td></tr>" + "</table>"
+ "</table>"; );
$("#info-fileDetails").html(fileInfo); }
} }
}; };

2
res/static/res/script/ListNavigator.js
View File

@@ -211,7 +211,7 @@ var ListNavigator = {
$("#toolbar").animate( {top: navHeight},{"duration": 1500, "queue": false}); $("#toolbar").animate( {top: navHeight},{"duration": 1500, "queue": false});
$("#button-expand-toolbar").animate({top: navHeight},{"duration": 1500, "queue": false}); $("#button-expand-toolbar").animate({top: navHeight},{"duration": 1500, "queue": false});
$("#sharebar").animate( {top: navHeight},{"duration": 1500, "queue": false}); $("#sharebar").animate( {top: navHeight},{"duration": 1500, "queue": false});
$("#info-popup").css("top", "120px"); $("#info_popup").css("top", "120px");
}, 100); }, 100);
} }
}; };

3
res/static/res/style/viewer.css
View File

@@ -182,7 +182,7 @@ body{
|| MISC COMPONENTS || || MISC COMPONENTS ||
===================== */ ===================== */
.full-popup{ .full_popup{
position: fixed; position: fixed;
display: none; display: none;
background-color: var(--background_color); background-color: var(--background_color);
@@ -233,6 +233,7 @@ table > tbody > tr {border: none !important;}
color: var(--text_color); color: var(--text_color);
font-size: 16px; font-size: 16px;
font-family: 'Ubuntu', sans-serif; font-family: 'Ubuntu', sans-serif;
line-height: 20px;
text-align: right; text-align: right;
display: inline-block; display: inline-block;
background-image: url("/res/img/bytecounter.png"); background-image: url("/res/img/bytecounter.png");

38
res/template/file_viewer.html
View File

@@ -32,6 +32,8 @@
<meta property="og:image:url" content="{{.OGData.Image}}" /> <meta property="og:image:url" content="{{.OGData.Image}}" />
<meta property="article:author" content="Fornax96" /> <meta property="article:author" content="Fornax96" />
<link rel="image_src" href="{{.OGData.Image}}" /> <link rel="image_src" href="{{.OGData.Image}}" />
<script type="text/javascript">var apiEndpoint = '{{.APIEndpoint}}';</script>
</head> </head>
<body> <body>
@@ -122,15 +124,45 @@
</button> </button>
</div> </div>
<div id="info-popup" class="full-popup"> <div id="info_popup" class="full_popup">
<img alt="Close" src="/res/img/cross.png" <img alt="Close" src="/res/img/cross.png"
style="position: absolute; top: 5px; right: 5px; width: 40px; height: 40px; cursor: pointer;" style="position: absolute; top: 5px; right: 5px; width: 40px; height: 40px; cursor: pointer;"
onclick="DetailsWindow.toggle();"/> onclick="DetailsWindow.toggle();"/>
Click the help button again to close this overlay.<br/> Click the help button again to close this overlay.<br/>
<h3>File Info</h3> <h3>File Info</h3>
<span id="info-fileDetails"></span> <span id="info_file_details"></span>
<span id="info-about">{{template "file_info_popup"}}</span> <span id="info_about">
<h3>About</h3>
Pixeldrain is a file sharing platform.
<a href="/" target="_blank">Visit the home page for more information.</a>
<h3>Keyboard Controls</h3>
<table>
<tr><td colspan="2">File Shortcuts</td></tr>
<tr><td>c</td><td> = Copy URL of this page</td></tr>
<tr><td>i</td><td> = Toggle details window (this window)</td></tr>
<tr><td>s</td><td> = Download the file you are currently viewing</td></tr>
<tr><td colspan="2">List Shortcuts</td></tr>
<tr><td>a or &#8592;</td><td> = View previous item in list</td></tr>
<tr><td>d or &#8594;</td><td> = View next item in list</td></tr>
<tr><td>r</td><td> = Toggle shuffle (<b><u>r</u></b>andom)</td></tr>
<tr><td>SHIFT + s</td><td> = Download all the files in the list as a zip archive</td></tr>
</table>
<h3>Credits</h3>
All server side code written by
<a target="_blank" href="https://fornaxian.com/">Fornax (me)</a>.
<br/>
<br/>
Code syntax highlighting is by
<a target="_blank" href="https://github.com/google/code-prettify">Google Code-prettify</a>.
<br/>
<br/>
Thanks to the Mozilla team for their wonderful PDF viewer
<a target="_blank" href="https://github.com/mozilla/pdf.js">pdf.js</a>.
<br/>
</span>
</div> </div>
<div id="filepreview"> <div id="filepreview">

2
webcontroller/fileViewer.go
View File

@@ -56,6 +56,7 @@ func (wc *WebController) serveFileViewer(w http.ResponseWriter, r *http.Request,
"APIResponse": listdata, "APIResponse": listdata,
"Type": "list", "Type": "list",
"OGData": ogData.FromFile(*finfo[0]), "OGData": ogData.FromFile(*finfo[0]),
"APIEndpoint": wc.conf.APIURLExternal,
}) })
} else { } else {
err = wc.templates.Get().ExecuteTemplate(w, "file_viewer", map[string]interface{}{ err = wc.templates.Get().ExecuteTemplate(w, "file_viewer", map[string]interface{}{
@@ -63,6 +64,7 @@ func (wc *WebController) serveFileViewer(w http.ResponseWriter, r *http.Request,
"APIResponse": finfo[0], "APIResponse": finfo[0],
"Type": "file", "Type": "file",
"OGData": ogData.FromFile(*finfo[0]), "OGData": ogData.FromFile(*finfo[0]),
"APIEndpoint": wc.conf.APIURLExternal,
}) })
} }
if err != nil { if err != nil {

1
webcontroller/listViewer.go
View File

@@ -35,6 +35,7 @@ func (wc *WebController) serveListViewer(w http.ResponseWriter, r *http.Request,
"APIResponse": listdata, "APIResponse": listdata,
"Type": "list", "Type": "list",
"OGData": ogData.FromList(*list), "OGData": ogData.FromList(*list),
"APIEndpoint": wc.conf.APIURLExternal,
}) })
if err != nil { if err != nil {
log.Error("Error executing template file_viewer: %s", err) log.Error("Error executing template file_viewer: %s", err)