ambrose
/
file-manager
mirror of https://github.com/serverwentdown/file-manager.git
1
0
Fork 0
Code Releases Activity

Update to bootstrap 4.0.0

pull/2/head
Ambrose Chua 2018-02-15 00:31:29 +08:00
parent 544c4358d7
commit 3c13652401
15 changed files with 1152 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
node_modules/

4
assets/list.css Normal file
View File

@ -0,0 +1,4 @@
.name {
overflow: hidden;
word-wrap: break-word;
}

16
assets/multi.js
View File

@ -4,21 +4,27 @@ $(document).ready(() => {
let $select = $(".multi-select"); let $select = $(".multi-select");
let setSelected = (files) => { let setSelected = (files) => {
$(".multi-files-value").val(JSON.stringify(files)); $(".multi-files-value").val(JSON.stringify(files.map(f => f.name)));
$(".multi-files").html( $(".multi-files").html(
files.map(f => { files.map(f => {
return `<li class="list-group-item">${f}</li>`; return `<li class="list-group-item d-flex align-items-start justify-content-between"><span class="name">${f.name}</span> <span class="badge badge-pill badge-secondary">${f.size}</span></li>`;
}).join("") }).join("")
); );
}; };
$select.on("change", () => { let updateSelected = () => {
let $selected = $(".multi-select:checked"); let $selected = $(".multi-select:checked");
let files = []; let files = [];
$selected.each((i, ele) => { $selected.each((i, ele) => {
files.push($(ele).data("select")); files.push({
name: $(ele).data("select"),
size: $(ele).data("select-size")
});
}); });
setSelected(files); setSelected(files);
}); }
$select.on("change", updateSelected);
updateSelected();
}); });

5
assets/upload.css
View File

@ -1,7 +1,4 @@
.custom-file-control.file-selected:after { .custom-file-label {
display: none;
}
.custom-file-control {
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;

2
assets/upload.js
View File

@ -8,7 +8,7 @@ $(document).ready(() => {
$file.on("change", () => { $file.on("change", () => {
let file = $file[0].files[0]; let file = $file[0].files[0];
let fnElement = $file.parent().find(".custom-file-control"); let fnElement = $file.parent().find(".custom-file-label");
fnElement.addClass("file-selected"); fnElement.addClass("file-selected");
fnElement.text(file.name); fnElement.text(file.name);

1057
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@ -8,7 +8,7 @@
"dependencies": { "dependencies": {
"archiver": "^1.1.0", "archiver": "^1.1.0",
"body-parser": "^1.15.2", "body-parser": "^1.15.2",
"bootstrap": "4.0.0-alpha.4", "bootstrap": "^4.0.0",
"connect-busboy": "0.0.2", "connect-busboy": "0.0.2",
"connect-flash": "^0.1.1", "connect-flash": "^0.1.1",
"express": "^4.14.0", "express": "^4.14.0",

3
views/layouts/main.handlebars
View File

@ -8,9 +8,10 @@
<link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css" /> <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css" />
<script src="/jquery/jquery.min.js"></script> <script src="/jquery/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script> <script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/filesize/filesize.es6.js"></script> <script src="/filesize/filesize.js"></script>
<link rel="stylesheet" href="/assets/fonts.css" /> <link rel="stylesheet" href="/assets/fonts.css" />
<link rel="stylesheet" href="/assets/list.css" />
<script src="/assets/multi.js"></script> <script src="/assets/multi.js"></script>
<link rel="stylesheet" href="/assets/upload.css" /> <link rel="stylesheet" href="/assets/upload.css" />
<script src="/assets/upload.js"></script> <script src="/assets/upload.js"></script>

25
views/list.handlebars
View File

@ -1,6 +1,7 @@
{{> navbar path=path}} {{> navbar path=path}}
<main class="container" style="margin-top: 64px; margin-bottom: 64px;"> <div style="padding-top: 56px; padding-bottom: 56px;">
<main class="container my-4">
{{#each errors as |error|}} {{#each errors as |error|}}
<div class="alert alert-danger" role="alert"> <div class="alert alert-danger" role="alert">
{{error}} {{error}}
@ -14,16 +15,17 @@
<ul class="list-group"> <ul class="list-group">
{{#each files}} {{#each files}}
<li class="list-group-item"> <li class="list-group-item">
<label class="custom-control custom-checkbox"> <div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input multi-select" data-select="{{name}}"> <input type="checkbox" class="custom-control-input multi-select" data-select="{{name}}" data-select-size="{{size}}" id="check{{@index}}">
<span class="custom-control-indicator"></span> <label class="custom-control-label d-flex align-items-start justify-content-between" for="check{{@index}}">
</label> {{#if isdirectory}}
{{#if isdirectory}} <a href="{{name}}/" class="name">{{name}}/</a>
<a href="{{name}}/">{{name}}/</a> {{else}}
{{else}} <a href="{{name}}" class="name mr-auto">{{name}}</a>
<a href="{{name}}">{{name}}</a> <span class="badge badge-pill badge-secondary">{{size}}</span>
<span class="tag tag-default tag-pill pull-xs-right">{{size}}</span> {{/if}}
{{/if}} </label>
</div>
</li> </li>
{{else}} {{else}}
<li class="list-group-item"> <li class="list-group-item">
@ -32,6 +34,7 @@
{{/each}} {{/each}}
</ul> </ul>
</main> </main>
</div>
{{> toolbar}} {{> toolbar}}

2
views/partials/dialogue-delete.handlebars
View File

@ -3,10 +3,10 @@
<div class="modal-dialog modal-sm"> <div class="modal-dialog modal-sm">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">Are you sure?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
<h4 class="modal-title">Are you sure?</h4>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p>You are deleting the following files: </p> <p>You are deleting the following files: </p>

2
views/partials/dialogue-download.handlebars
View File

@ -3,10 +3,10 @@
<div class="modal-dialog modal-sm"> <div class="modal-dialog modal-sm">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">Download file archive?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
<h4 class="modal-title">Download file archive?</h4>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p>Your archive will contain the following files: </p> <p>Your archive will contain the following files: </p>

2
views/partials/dialogue-mkdir.handlebars
View File

@ -3,10 +3,10 @@
<div class="modal-dialog modal-sm"> <div class="modal-dialog modal-sm">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">Create a folder</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
<h4 class="modal-title">Create a folder</h4>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="form-group"> <div class="form-group">

8
views/partials/dialogue-upload.handlebars
View File

@ -3,17 +3,17 @@
<div class="modal-dialog modal-sm"> <div class="modal-dialog modal-sm">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">Upload a file</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
<h4 class="modal-title">Upload a file</h4>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="form-group"> <div class="form-group">
<label class="custom-file"> <div class="custom-file">
<input name="file" type="file" id="upload-file" class="custom-file-input"> <input name="file" type="file" id="upload-file" class="custom-file-input">
<span class="custom-file-control"></span> <label class="custom-file-label" for="upload-file">Choose file</label>
</label> </div>
</div> </div>
<div class="form-group upload-unhide"> <div class="form-group upload-unhide">
<label for="upload-file-size">Filesize: </label> <label for="upload-file-size">Filesize: </label>

47
views/partials/navbar.handlebars
View File

@ -1,25 +1,26 @@
<nav class="navbar navbar-dark bg-primary navbar-fixed-top"> <nav class="navbar navbar-dark bg-primary fixed-top navbar-expand-sm">
<a class="navbar-brand" href="/">File Manager</a> <a class="navbar-brand" href="/">File Manager</a>
<ul class="nav navbar-nav"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
{{#eachpath path}} <span class="navbar-toggler-icon"></span>
<li class="nav-item{{#if current}} active{{/if}}"> </button>
<a class="nav-link" href="{{path}}">{{name}}</a> <div class="collapse navbar-collapse" id="navbar">
</li> <div class="navbar-nav mr-auto">
{{/eachpath}} {{#eachpath path}}
</ul> <a class="nav-item nav-link{{#if current}} active{{/if}}" href="{{path}}">{{name}}</a>
<ul class="nav navbar-nav pull-xs-right"> {{/eachpath}}
<li class="nav-item"> </div>
{{#if isloginenabled}} <div class="navbar-nav">
{{#if isloggingin}} {{#if isloginenabled}}
<a class="nav-link" href="/@login" title="Sign in"> {{#if isloggingin}}
<span class="octicon octicon-sign-in"></span> <a class="nav-item nav-link" href="/@login" title="Sign in">
</a> <span class="octicon octicon-sign-in"></span>
{{else}} </a>
<a class="nav-link" href="/@logout" title="Sign out"> {{else}}
<span class="octicon octicon-sign-out"></span> <a class="nav-item nav-link" href="/@logout" title="Sign out">
</a> <span class="octicon octicon-sign-out"></span>
{{/if}} </a>
{{/if}} {{/if}}
</li> {{/if}}
</ul> </div>
</div>
</nav> </nav>

56
views/partials/toolbar.handlebars
View File

@ -1,28 +1,30 @@
<nav class="navbar navbar-light bg-faded navbar-fixed-bottom"> <nav class="navbar navbar-light bg-light fixed-bottom justify-content-between">
<div class="btn-group" role="group"> <div class="btn-group mr-2" role="group">
<a class="btn btn-secondary" href="@upload" data-toggle="modal" data-target="#upload"> <a class="btn btn-primary" href="@upload" data-toggle="modal" data-target="#upload">
<span class="octicon octicon-cloud-upload"></span> <span class="octicon octicon-cloud-upload"></span>
Upload Upload
</a> </a>
<a class="btn btn-secondary" href="@mkdir" data-toggle="modal" data-target="#mkdir"> <a class="btn btn-secondary" href="@mkdir" data-toggle="modal" data-target="#mkdir">
<span class="octicon octicon-file-directory"></span> <span class="octicon octicon-file-directory"></span>
New folder New folder
</a> </a>
</div> </div>
<div class="btn-group" role="group"> <div class="btn-group mr-2" role="group">
<a class="btn btn-secondary" href="@download" data-toggle="modal" data-target="#download"> <a class="btn btn-success" href="@download" data-toggle="modal" data-target="#download">
<span class="octicon octicon-file-zip"></span> <span class="octicon octicon-file-zip"></span>
Download Download
</a> </a>
<a class="btn btn-secondary" href="@delete" data-toggle="modal" data-target="#delete"> </div>
<span class="octicon octicon-trashcan"></span> <div class="btn-group mr-auto" role="group">
Delete <a class="btn btn-danger" href="@delete" data-toggle="modal" data-target="#delete">
</a> <span class="octicon octicon-trashcan"></span>
</div> Delete
<div class="btn-group pull-xs-right" role="group"> </a>
<a class="btn btn-secondary" href="./"> </div>
<span class="octicon octicon-sync"></span> <div class="btn-group" role="group">
Refresh <a class="btn btn-warning" href="./">
</a> <span class="octicon octicon-sync"></span>
</div> Refresh
</a>
</div>
</nav> </nav>