🖼️ — Modify UI for zip feature

This commit is contained in:
Luc Didry 2019-08-02 16:25:29 +02:00
parent 386437391a
commit 76ce6f4072
No known key found for this signature in database
GPG Key ID: EA868E12D0257E3C
2 changed files with 31 additions and 25 deletions

View File

@ -110,6 +110,7 @@ function zipClicking () {
$('#zipname').val('documents.zip');
$('#zipname-input').addClass('hide');
$('#zipping').addClass('hide');
$('#files').removeClass('m6').addClass('m12');
$('#zip-parts').html('');
$('#delete-day').attr('disabled', null);
$('#first-view').attr('disabled', null);
@ -160,6 +161,7 @@ function uploadZip(e) {
if (!$('#zipping').hasClass('hide')) {
window.zip = null;
$('#zipping').addClass('hide');
$('#files').removeClass('m6').addClass('m12');
$('#zipname-input').addClass('hide');
$('#zip-compressing').addClass('hide');
$('#uploadZip').removeClass('hide');
@ -230,6 +232,7 @@ function handleFiles(f) {
window.zip = new JSZip();
}
$('#zipping').removeClass('hide');
$('#files').removeClass('m12').addClass('m6');
for (var i = 0; i < f.length; i++) {
var element = f.item(i);
var filename = element.name;
@ -699,5 +702,6 @@ $(document).ready(function() {
$('#zip-compressing').addClass('hide');
$('#file-browser-button').attr('disabled', null);
$('#file-browser-span').removeClass('disabled');
$('#files').removeClass('m6').addClass('m12');
});
});

View File

@ -117,32 +117,34 @@
</div>
</div>
</form>
<div id="files">
<h2><%= l('Drop files here') %></h2>
<p id="max-file-size"></p>
<p><small><%= l('or') %></small></p>
<label>
<span id="file-browser-span" class="btn disabled waves-effect waves-light"><%= l('Click to open the file browser') %></span>
<input type="file" id="file-browser-button" multiple disabled>
</label>
</div>
<div id="zipping" class="hide">
<div class="card">
<div>
<a href="#" id="reset-zipping">
<i class="right mdi-navigation-close small"></i>
</a>
<div class="card-content">
<span class="card-title" id="zip-name">documents.zip</span> (<span id="zip-size"></span>)
<p id="zip-compressing" class="hide">
<button class="btn-floating pulse"><i class="mdi-content-archive"></i></button>
<%= l('Compressing zip file…') %>
</p>
<div class="col s12 m6 text-left input-field right">
<a href="#" id="uploadZip" class="btn waves-effect waves-light"><%= l('Upload generated zip file') %></a>
<div class="row">
<div id="files" class="col s12 m12">
<h2><%= l('Drop files here') %></h2>
<p id="max-file-size"></p>
<p><small><%= l('or') %></small></p>
<label>
<span id="file-browser-span" class="btn disabled waves-effect waves-light"><%= l('Click to open the file browser') %></span>
<input type="file" id="file-browser-button" multiple disabled>
</label>
</div>
<div id="zipping" class="col s12 m6 hide">
<div class="card">
<div>
<a href="#" id="reset-zipping">
<i class="right mdi-navigation-close small"></i>
</a>
<div class="card-content">
<span class="card-title" id="zip-name">documents.zip</span> (<span id="zip-size"></span>)
<p id="zip-compressing" class="hide">
<button class="btn-floating pulse"><i class="mdi-content-archive"></i></button>
<%= l('Compressing zip file…') %>
</p>
<ul id="zip-parts">
</ul>
<div class="right-align">
<a href="#" id="uploadZip" class="btn waves-effect waves-light"><%= l('Upload generated zip file') %></a>
</div>
</div>
<ul id="zip-parts">
</ul>
</div>
</div>
</div>