diff --git a/app/views/learning_objects/_file_upload_form.html.erb b/app/views/learning_objects/_file_upload_form.html.erb index 688c9c7603860446e544d032923161afd3a98505..5b32cd89f09d064298e029e6ad35b14a4efec2fc 100644 --- a/app/views/learning_objects/_file_upload_form.html.erb +++ b/app/views/learning_objects/_file_upload_form.html.erb @@ -1,13 +1,22 @@ <div class="row"> <div class="large-12 columns"> - <p class="lead">Select files to upload</p> - <button class="inverse small" id="browseButton">+ Add Files</button> - <button class="danger small" id="uploadFiles">Start Upload</button> - <div class="alert-box alert" data-nothingToUpload>Error Nothing To Upload, Please Add Some Files</div> - <div id="dragHere" class="panel drop-zone">Drag & Drop Here</div> - <div id="results" class="panel"></div>Status: - <div class="alert-box secondary"></div> + <p class="lead">Envie os arquivos do seu objecto educacional</p> + + <div class="alert alert-box alert-danger alert-dismissible" role="alert" data-nothingToUpload> + <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> + <strong>Ops!</strong> Você precisa selecionar pelo menos um arquivo! + </div> + + <div id="dragHere" class="panel drop-zone">Arraste e solte os arquivos de seu computador aqui.</div> + <div id="results" class="panel"></div> + + <div id="upload_message" class="alert-box secondary"></div> </div> + + <div class="large-12 columns"> + <button class="inverse small" id="browseButton">+ Selecionar arquivos</button> + <button class="danger small" id="uploadFiles">Enviar</button> + </div> </div> <style> @@ -32,6 +41,7 @@ color: #bf0000; font-weight: bold; cursor:pointer; + float: left; } button { border: none; @@ -52,7 +62,7 @@ -webkit-backface-visibility: hidden; } .meter { - color:#fff; + color:black; line-height:18px; font-size:12px; } @@ -72,6 +82,7 @@ simultaneousUploads: 4, chunkSize:1024 * 256 }); + var results = $('#results'), draggable = $('#dragHere'), uploadFile = $('#uploadFiles'), @@ -87,12 +98,14 @@ r.on('fileAdded', function (file, event) { var template = - '<div data-uniqueid="' + file.uniqueIdentifier + '">' + - '<div class="fileName">' + file.fileName + ' (' + file.file.type + ')' + '</div>' + - '<div class="large-6 right deleteFile">X</div>' + - '<div class="progress large-6">' + - '<span class="meter" style="width:0%;"></span>' + - '</div>' + + '<div class="file-container" data-uniqueid="' + file.uniqueIdentifier + '">' + + '<div class="fileName">' + file.fileName + ' (' + file.file.type + ')' + '</div>' + + '<div class="deleteFile">X</div>' + + '<div class="progress">' + + '<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">' + + '0%' + + '</div>' + + '</div>' + '</div>'; results.append(template); @@ -122,21 +135,22 @@ r.on('fileProgress', function (file) { var progress = Math.floor(file.progress() * 100); - $('[data-uniqueId=' + file.uniqueIdentifier + ']').find('.meter').css('width', progress + '%'); - $('[data-uniqueId=' + file.uniqueIdentifier + ']').find('.meter').html(' ' + progress + '%'); + $('[data-uniqueId=' + file.uniqueIdentifier + ']').find('.progress-bar').css('width', progress + '%'); + $('[data-uniqueId=' + file.uniqueIdentifier + ']').find('.progress-bar').attr('aria-valuenow', progress); + $('[data-uniqueId=' + file.uniqueIdentifier + ']').find('.progress-bar').html(' ' + progress + '%'); }); r.on('fileSuccess', function (file, message) { - $('[data-uniqueId=' + file.uniqueIdentifier + ']').find('.progress').addClass('success'); + $('[data-uniqueId=' + file.uniqueIdentifier + ']').find('.progress-bar').addClass('progress-bar-success'); }); r.on('uploadStart', function () { - $('.alert-box').text('Uploading....'); + $('#upload_message').text('Enviando, aguarde...'); }); r.on('complete', function () { - $('.alert-box').text('Done Uploading'); + $('#upload_message').text('Seus arquivos foram enviados com sucesso e estão sendo processados! Em alguns minutos eles serão publicados.'); }); })();