mirror of
https://github.com/swisspol/GCDWebServer.git
synced 2026-04-24 00:00:04 +08:00
First pass at new Web Uploader UX
This commit is contained in:
Pierre-Olivier Latour
@@ -25,109 +25,132 @@
|
||||
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
-->
|
||||
|
||||
<!DOCTYPE HTML>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>%title%</title>
|
||||
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>My Site</title>
|
||||
<link rel="stylesheet" href="css/bootstrap.css">
|
||||
<link rel="stylesheet" href="css/bootstrap-theme.css">
|
||||
<link rel="stylesheet" href="css/jquery.fileupload.css">
|
||||
<link rel="stylesheet" href="css/jquery.fileupload-ui.css">
|
||||
<link rel="stylesheet" href="css/index.css">
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script type="text/javascript" src="js/html5shiv.min.js"></script>
|
||||
<script type="text/javascript" src="js/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
<script type="text/javascript" src="js/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
|
||||
<script type="text/javascript" src="js/tmpl.min.js"></script>
|
||||
<script type="text/javascript" src="js/jquery.iframe-transport.js"></script>
|
||||
<script type="text/javascript" src="js/jquery.jeditable.js"></script>
|
||||
<script type="text/javascript" src="js/jquery.fileupload.js"></script>
|
||||
<script type="text/javascript" src="js/jquery.fileupload-process.js"></script>
|
||||
<script type="text/javascript" src="js/jquery.fileupload-ui.js"></script>
|
||||
<script type="text/javascript" src="js/jquery.iframe-transport.js"></script>
|
||||
<script type="text/javascript" src="js/bootstrap.min.js"></script>
|
||||
<script type="text/javascript" src="js/tmpl.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
var _device = "%device%";
|
||||
</script>
|
||||
<script type="text/javascript" src="js/index.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<p class="title">%title%</p>
|
||||
|
||||
<div class="page-header">
|
||||
<h1>%title%</h1>
|
||||
</div>
|
||||
|
||||
<p class="header">%header%</p>
|
||||
<form id="fileupload" method="POST" enctype="multipart/form-data">
|
||||
<div class="row fileupload-buttonbar">
|
||||
<div class="col-sm-8">
|
||||
<span class="btn btn-success fileinput-button">
|
||||
<i class="glyphicon glyphicon-plus"></i>
|
||||
<span>Upload Files…</span>
|
||||
<input type="file" name="files[]" multiple>
|
||||
</span>
|
||||
<button type="reset" class="btn btn-warning cancel">
|
||||
<i class="glyphicon glyphicon-ban-circle"></i>
|
||||
<span>Cancel Uploads</span>
|
||||
|
||||
<div id="alerts"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-8">
|
||||
<div class="btn-toolbar">
|
||||
<button type="button" class="btn btn-primary fileinput-button">
|
||||
<span class="glyphicon glyphicon-upload"></span> Upload Files…
|
||||
<input id="fileupload" type="file" name="files[]" multiple>
|
||||
</button>
|
||||
<button type="button" class="btn btn-success" id="create-folder">
|
||||
<span class="glyphicon glyphicon-folder-close"></span> Create Folder…
|
||||
</button>
|
||||
<button type="button" class="btn btn-default" id="reload">
|
||||
<span class="glyphicon glyphicon-refresh"></span> Refresh
|
||||
</button>
|
||||
<img src="img/loading.gif" class="fileupload-process"></img>
|
||||
</div>
|
||||
<div class="col-sm-4 fileupload-progress fade">
|
||||
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar progress-bar-success" style="width:0%;"></div>
|
||||
</div>
|
||||
<div class="progress-extended"> </div>
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
<table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
|
||||
</form>
|
||||
<div class="col-sm-4">
|
||||
<div class="progress progress-striped active uploading">
|
||||
<div class="progress-bar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" id="progress-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel panel-default uploading">
|
||||
<div class="panel-heading">File Uploads in Progress</div>
|
||||
<table class="table table-striped"><tbody id="uploads"></tbody></table>
|
||||
</div>
|
||||
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<ol class="breadcrumb" id="path"></ol>
|
||||
</div>
|
||||
<table class="table table-striped"><tbody id="listing"></tbody></table>
|
||||
</div>
|
||||
|
||||
<p class="footer">%footer%</p>
|
||||
|
||||
</div>
|
||||
|
||||
<script id="template-upload" type="text/x-tmpl">
|
||||
{% for (var i=0, file; file=o.files[i]; i++) { %}
|
||||
<tr class="template-upload fade">
|
||||
<td class="file-name">
|
||||
<p class="name">{%=file.name%}</p>
|
||||
<strong class="error text-danger"></strong>
|
||||
<script type="text/x-tmpl" id="template-listing">
|
||||
<tr class="row-file" data-path="{%=o.path%}" data-name="{%=o.name%}">
|
||||
<td class="column-icon">
|
||||
{% if (o.size != null) { %}
|
||||
<button type="button" class="btn btn-default btn-xs button-download">
|
||||
<span class="glyphicon glyphicon-download"></span>
|
||||
</button>
|
||||
{% } else { %}
|
||||
<button type="button" class="btn btn-default btn-xs button-open">
|
||||
<span class="glyphicon glyphicon-folder-open"></span>
|
||||
</button>
|
||||
{% } %}
|
||||
</td>
|
||||
<td class="file-status">
|
||||
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
|
||||
<div class="progress-bar progress-bar-success" style="width:0%;"></div>
|
||||
</div>
|
||||
<td class="column-name"><p class="edit">{%=o.name%}</p></td>
|
||||
<td class="column-size">
|
||||
{% if (o.size != null) { %}
|
||||
<p>{%=formatFileSize(o.size)%}</p>
|
||||
{% } %}
|
||||
</td>
|
||||
<td class="file-action">
|
||||
<button class="btn btn-warning cancel">
|
||||
<i class="glyphicon glyphicon-ban-circle"></i>
|
||||
<span>Cancel</span>
|
||||
<td class="column-delete">
|
||||
<button type="button" class="btn btn-danger btn-xs button-delete">
|
||||
<span class="glyphicon glyphicon-trash"></span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{% } %}
|
||||
</script>
|
||||
|
||||
<script id="template-download" type="text/x-tmpl">
|
||||
{% for (var i=0, file; file=o.files[i]; i++) { %}
|
||||
<tr class="template-download fade">
|
||||
<td class="file-name">
|
||||
<p class="name">
|
||||
{% if (file.url) { %}
|
||||
<a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}">{%=file.name%}</a>
|
||||
{% } else { %}
|
||||
<span>{%=file.name%}</span>
|
||||
{% } %}
|
||||
</p>
|
||||
{% if (file.error) { %}
|
||||
<div><span class="label label-danger">Error</span> {%=file.error%}</div>
|
||||
{% } %}
|
||||
</td>
|
||||
<td class="file-status">
|
||||
<p class="size">{%=o.formatFileSize(file.size)%}</p>
|
||||
</td>
|
||||
<td class="file-action">
|
||||
{% if (file.deleteUrl) { %}
|
||||
<button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}">
|
||||
<i class="glyphicon glyphicon-trash"></i>
|
||||
<span>Delete</span>
|
||||
</button>
|
||||
{% } %}
|
||||
<script type="text/x-tmpl" id="template-uploads">
|
||||
<tr class="row-file">
|
||||
<td class="column-icon">
|
||||
<button type="button" class="btn btn-warning btn-xs button-cancel">
|
||||
<span class="glyphicon glyphicon-ban-circle"></span>
|
||||
</button>
|
||||
</td>
|
||||
<td class="column-path"><p>{%=o.path%}</p></td>
|
||||
<td class="column-progress">
|
||||
<div class="progress">
|
||||
<div class="progress-bar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" id="progress-bar"></div>
|
||||
</div>
|
||||
</ts>
|
||||
</tr>
|
||||
{% } %}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
<script type="text/x-tmpl" id="template-alert">
|
||||
<div class="alert alert-{%=o.level%} alert-dismissable">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
|
||||
<strong>{%=o.title%}</strong>{%=o.description%}
|
||||
</div>
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user