Skip to content

PUBLIC / surfer-okd

Go to a project
Commit 8a3d0eee by Johannes Zellner
Options

Make folder listing sortable

1 parent c03cdd30
Expand all
Inline Side-by-side
Showing with 30 additions and 17 deletions
frontend/css/style.css
...@@ -39,10 +39,6 @@ pre { ...@@ -39,10 +39,6 @@ pre {
cursor: pointer; cursor: pointer;
} }
th {
vertical-align: middle !important;
}
.main { .main {
margin-bottom: 40px; margin-bottom: 40px;
} }
...@@ -65,7 +61,8 @@ footer:hover { ...@@ -65,7 +61,8 @@ footer:hover {
opacity: 1; opacity: 1;
} }
th { td {
vertical-align: middle !important;
overflow: hidden; overflow: hidden;
} }
...@@ -77,3 +74,11 @@ th { ...@@ -77,3 +74,11 @@ th {
tr:hover .entry-toolbar { tr:hover .entry-toolbar {
opacity: 1; opacity: 1;
} }
table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after {
content: " \25B4\25BE"
}
th {
cursor: pointer;
}
frontend/index.html
...@@ -160,34 +160,34 @@ ...@@ -160,34 +160,34 @@
</center> </center>
</div> </div>
<div class="col-lg-12" v-show="!busy"> <div class="col-lg-12" v-show="!busy">
<table class="table table-hover table-condensed"> <table class="table table-hover table-condensed sortable">
<thead> <thead>
<tr> <tr>
<th>Type</th> <th>Type</th>
<th>Name</th> <th>Name</th>
<th>Size</th> <th class="sorttable_numeric">Size</th>
<th>Modified</th> <th class="sorttable_numeric">Modified</th>
<th>&nbsp;</th> <th class="sorttable_nosort" style="text-align: right;">Actions</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr v-show="entries.length === 0"> <tr v-show="entries.length === 0">
<th colspan="5"><i>Empty folder</i></th> <td colspan="5"><i>Empty folder</i></td>
</tr> </tr>
<tr v-for="entry in entries" v-on:click="open(entry)" class="hand"> <tr v-for="entry in entries" v-on:click="open(entry)" class="hand">
<th> <td sorttable_customkey="{{ entry.extension }}">
<img v-bind:src="entry.previewUrl" height="48px" width="48px"/> <img v-bind:src="entry.previewUrl" height="48px" width="48px"/>
</th> </td>
<th>{{ entry.filePath }}</th> <td>{{ entry.filePath }}</td>
<th>{{ entry.size | prettyFileSize }}</th> <td sorttable_customkey="{{ entry.size }}">{{ entry.size | prettyFileSize }}</td>
<th><span v-my-tooltip="foobar" data-toggle="tooltip" title="{{ entry.mtime }}">{{ entry.mtime | prettyDate }}</span></th> <td><span v-my-tooltip="foobar" data-toggle="tooltip" title="{{ entry.mtime }}">{{ entry.mtime | prettyDate }}</span></td>
<th style="text-align: right;"> <td style="text-align: right;">
<span class="entry-toolbar"> <span class="entry-toolbar">
<button class="btn btn-sm btn-default" v-on:click.stop="download(entry)" title="Download" v-show="entry.isFile"><i class="fa fa-download"></i></button> <button class="btn btn-sm btn-default" v-on:click.stop="download(entry)" title="Download" v-show="entry.isFile"><i class="fa fa-download"></i></button>
<button class="btn btn-sm btn-default" v-on:click.stop="renameAsk(entry)" title="Rename"><i class="fa fa-pencil"></i></button> <button class="btn btn-sm btn-default" v-on:click.stop="renameAsk(entry)" title="Rename"><i class="fa fa-pencil"></i></button>
<button class="btn btn-sm btn-danger" v-on:click.stop="delAsk(entry)" title="Delete"><i class="fa fa-trash"></i></button> <button class="btn btn-sm btn-danger" v-on:click.stop="delAsk(entry)" title="Delete"><i class="fa fa-trash"></i></button>
</span> </span>
</th> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -205,6 +205,7 @@ ...@@ -205,6 +205,7 @@
<script src="/_admin/js/vue.min.js"></script> <script src="/_admin/js/vue.min.js"></script>
<script src="/_admin/js/filesize.min.js"></script> <script src="/_admin/js/filesize.min.js"></script>
<script src="/_admin/js/superagent.js"></script> <script src="/_admin/js/superagent.js"></script>
<script src="/_admin/js/sorttable.js"></script>
<script src="/_admin/js/app.js"></script> <script src="/_admin/js/app.js"></script>
</body> </body>
......
frontend/js/app.js
...@@ -85,6 +85,12 @@ function getPreviewUrl(entry, basePath) { ...@@ -85,6 +85,12 @@ function getPreviewUrl(entry, basePath) {
return path + 'unknown.png'; return path + 'unknown.png';
} }
// simple extension detection, does not work with double extension like .tar.gz
function getExtension(entry) {
if (entry.isFile) return entry.filePath.slice(entry.filePath.lastIndexOf('.') + 1);
return '';
}
function refresh() { function refresh() {
loadDirectory(app.path); loadDirectory(app.path);
} }
...@@ -103,6 +109,7 @@ function loadDirectory(filePath) { ...@@ -103,6 +109,7 @@ function loadDirectory(filePath) {
result.body.entries.sort(function (a, b) { return a.isDirectory && b.isFile ? -1 : 1; }); result.body.entries.sort(function (a, b) { return a.isDirectory && b.isFile ? -1 : 1; });
app.entries = result.body.entries.map(function (entry) { app.entries = result.body.entries.map(function (entry) {
entry.previewUrl = getPreviewUrl(entry, filePath); entry.previewUrl = getPreviewUrl(entry, filePath);
entry.extension = getExtension(entry);
return entry; return entry;
}); });
app.path = filePath; app.path = filePath;
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!