Merge branch 'upload-learning-object' of...

Merge branch 'upload-learning-object' of gitlab.c3sl.ufpr.br:portalmec/portalmec into upload-learning-object

app/views/learning_objects/_file_upload_form.html.erb

 <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 &amp; 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">&times;</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('&nbsp;' + 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('&nbsp;' + 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.');
     });
 
   })();