🖼️ — Modify UI for zip feature
This commit is contained in:
parent
386437391a
commit
76ce6f4072
|
@ -110,6 +110,7 @@ function zipClicking () {
|
||||||
$('#zipname').val('documents.zip');
|
$('#zipname').val('documents.zip');
|
||||||
$('#zipname-input').addClass('hide');
|
$('#zipname-input').addClass('hide');
|
||||||
$('#zipping').addClass('hide');
|
$('#zipping').addClass('hide');
|
||||||
|
$('#files').removeClass('m6').addClass('m12');
|
||||||
$('#zip-parts').html('');
|
$('#zip-parts').html('');
|
||||||
$('#delete-day').attr('disabled', null);
|
$('#delete-day').attr('disabled', null);
|
||||||
$('#first-view').attr('disabled', null);
|
$('#first-view').attr('disabled', null);
|
||||||
|
@ -160,6 +161,7 @@ function uploadZip(e) {
|
||||||
if (!$('#zipping').hasClass('hide')) {
|
if (!$('#zipping').hasClass('hide')) {
|
||||||
window.zip = null;
|
window.zip = null;
|
||||||
$('#zipping').addClass('hide');
|
$('#zipping').addClass('hide');
|
||||||
|
$('#files').removeClass('m6').addClass('m12');
|
||||||
$('#zipname-input').addClass('hide');
|
$('#zipname-input').addClass('hide');
|
||||||
$('#zip-compressing').addClass('hide');
|
$('#zip-compressing').addClass('hide');
|
||||||
$('#uploadZip').removeClass('hide');
|
$('#uploadZip').removeClass('hide');
|
||||||
|
@ -230,6 +232,7 @@ function handleFiles(f) {
|
||||||
window.zip = new JSZip();
|
window.zip = new JSZip();
|
||||||
}
|
}
|
||||||
$('#zipping').removeClass('hide');
|
$('#zipping').removeClass('hide');
|
||||||
|
$('#files').removeClass('m12').addClass('m6');
|
||||||
for (var i = 0; i < f.length; i++) {
|
for (var i = 0; i < f.length; i++) {
|
||||||
var element = f.item(i);
|
var element = f.item(i);
|
||||||
var filename = element.name;
|
var filename = element.name;
|
||||||
|
@ -699,5 +702,6 @@ $(document).ready(function() {
|
||||||
$('#zip-compressing').addClass('hide');
|
$('#zip-compressing').addClass('hide');
|
||||||
$('#file-browser-button').attr('disabled', null);
|
$('#file-browser-button').attr('disabled', null);
|
||||||
$('#file-browser-span').removeClass('disabled');
|
$('#file-browser-span').removeClass('disabled');
|
||||||
|
$('#files').removeClass('m6').addClass('m12');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -117,32 +117,34 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
<div id="files">
|
<div class="row">
|
||||||
<h2><%= l('Drop files here') %></h2>
|
<div id="files" class="col s12 m12">
|
||||||
<p id="max-file-size"></p>
|
<h2><%= l('Drop files here') %></h2>
|
||||||
<p><small><%= l('or') %></small></p>
|
<p id="max-file-size"></p>
|
||||||
<label>
|
<p><small><%= l('or') %></small></p>
|
||||||
<span id="file-browser-span" class="btn disabled waves-effect waves-light"><%= l('Click to open the file browser') %></span>
|
<label>
|
||||||
<input type="file" id="file-browser-button" multiple disabled>
|
<span id="file-browser-span" class="btn disabled waves-effect waves-light"><%= l('Click to open the file browser') %></span>
|
||||||
</label>
|
<input type="file" id="file-browser-button" multiple disabled>
|
||||||
</div>
|
</label>
|
||||||
<div id="zipping" class="hide">
|
</div>
|
||||||
<div class="card">
|
<div id="zipping" class="col s12 m6 hide">
|
||||||
<div>
|
<div class="card">
|
||||||
<a href="#" id="reset-zipping">
|
<div>
|
||||||
<i class="right mdi-navigation-close small"></i>
|
<a href="#" id="reset-zipping">
|
||||||
</a>
|
<i class="right mdi-navigation-close small"></i>
|
||||||
<div class="card-content">
|
</a>
|
||||||
<span class="card-title" id="zip-name">documents.zip</span> (<span id="zip-size"></span>)
|
<div class="card-content">
|
||||||
<p id="zip-compressing" class="hide">
|
<span class="card-title" id="zip-name">documents.zip</span> (<span id="zip-size"></span>)
|
||||||
<button class="btn-floating pulse"><i class="mdi-content-archive"></i></button>
|
<p id="zip-compressing" class="hide">
|
||||||
<%= l('Compressing zip file…') %>
|
<button class="btn-floating pulse"><i class="mdi-content-archive"></i></button>
|
||||||
</p>
|
<%= l('Compressing zip file…') %>
|
||||||
<div class="col s12 m6 text-left input-field right">
|
</p>
|
||||||
<a href="#" id="uploadZip" class="btn waves-effect waves-light"><%= l('Upload generated zip file') %></a>
|
<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>
|
</div>
|
||||||
<ul id="zip-parts">
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue