MirrorMirror
/
lufi
mirror of https://framagit.org/fiat-tux/hat-softwares/lufi.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'new-zip-ui' into 'development' 

🖼️ — Modify UI for zip feature

See merge request fiat-tux/hat-softwares/lufi!30
This commit is contained in:
Luc Didry 2019-08-03 11:12:06 +02:00
parent 386437391a 76ce6f4072
commit 2a39284d92
2 changed files with 31 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
themes/default/public/js/lufi-up.js
View File

@ -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');
}); });
}); });

52
themes/default/templates/index.html.ep
View File

@ -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>