Merge pull request #620 from guerler/upload_001

Improve visibility of drag and drop option, simplify upload UI

client/galaxy/scripts/mvc/upload/composite/composite-row.js

@@ -19,11 +19,11 @@ define(['utils/utils',
 return Backbone.View.extend({
     // states
     status_classes : {
-        init    : 'status fa fa-exclamation text-primary',
-        ready   : 'status fa fa-check text-success',
-        running : 'status fa fa-spinner fa-spin',
-        success : 'status fa fa-check',
-        error   : 'status fa fa-exclamation-triangle'
+        init    : 'upload-mode fa fa-exclamation text-primary',
+        ready   : 'upload-mode fa fa-check text-success',
+        running : 'upload-mode fa fa-spinner fa-spin',
+        success : 'upload-mode fa fa-check',
+        error   : 'upload-mode fa fa-exclamation-triangle'
     },
 
     // initialize
@@ -37,7 +37,7 @@ return Backbone.View.extend({
         // create model
         this.model = options.model;
 
-        // add upload item
+        // add upload row
         this.setElement(this._template(options.model));
 
         // build upload functions
@@ -66,6 +66,7 @@ return Backbone.View.extend({
         // source selection popup
         this.button_menu = new Ui.ButtonMenu({
             icon        : 'fa-caret-down',
+            title       : 'Select',
             pull        : 'left'
         });
         this.$('#source').append(this.button_menu.$el);
@@ -174,8 +175,8 @@ return Backbone.View.extend({
 
     // refresh ready or not states
     _refreshReady: function() {
-        this.app.collection.each(function(item) {
-            item.set('status', (item.get('file_size') > 0) && 'ready' || 'init');
+        this.app.collection.each(function(model) {
+            model.set('status', (model.get('file_size') > 0) && 'ready' || 'init');
         });
     },
 
@@ -315,10 +316,10 @@ return Backbone.View.extend({
 
     // template
     _template: function(options) {
-        return  '<tr id="upload-item-' + options.id + '" class="upload-item">' +
+        return  '<tr id="upload-row-' + options.id + '" class="upload-row">' +
                     '<td>' +
                         '<div id="source"/>' +
-                        '<div class="text-column">' +
+                        '<div class="upload-text-column">' +
                             '<div id="text" class="text">' +
                                 '<div class="text-info">You can tell Galaxy to download data from web by entering URL in this box (one per line). You can also directly paste the contents of a file.</div>' +
                                 '<textarea id="text-content" class="text-content form-control"/>' +
@@ -329,17 +330,17 @@ return Backbone.View.extend({
                         '<div id="status"/>' +
                     '</td>' +
                     '<td>' +
-                        '<div id="file_desc" class="title"/>' +
+                        '<div id="file_desc" class="upload-title"/>' +
                     '</td>' +
                     '<td>' +
-                        '<div id="file_name" class="title"/>' +
+                        '<div id="file_name" class="upload-title"/>' +
                     '</td>' +
                     '<td>' +
-                        '<div id="file_size" class="size"/>' +
+                        '<div id="file_size" class="upload-size"/>' +
                     '</td>' +
                     '<td><div id="settings" class="upload-icon-button fa fa-gear"/></td>' +
                     '<td>' +
-                        '<div id="info" class="info">' +
+                        '<div id="info" class="upload-info">' +
                             '<div id="info-text"/>' +
                             '<div id="info-progress" class="progress">' +
                                 '<div class="progress-bar progress-bar-success"/>' +

client/galaxy/scripts/mvc/upload/composite/composite-view.js

@@ -8,7 +8,7 @@ define(['utils/utils',
 
         function(   Utils,
                     UploadModel,
-                    UploadItem,
+                    UploadRow,
                     Popover,
                     Select,
                     Ui
@@ -88,10 +88,10 @@ return Backbone.View.extend({
         });
 
         // listener for collection triggers on change in composite datatype
-        this.collection.on('add', function (item) {
-            self._eventAnnounce(item);
+        this.collection.on('add', function (model) {
+            self._eventAnnounce(model);
         });
-        this.collection.on('change add', function(item) {
+        this.collection.on('change add', function() {
             self._updateScreen();
         }).trigger('change');
 
@@ -104,15 +104,15 @@ return Backbone.View.extend({
     //
 
     // builds the basic ui with placeholder rows for each composite data type file
-    _eventAnnounce: function(item) {
+    _eventAnnounce: function(model) {
         // create view/model
-        var upload_item = new UploadItem(this, { model : item });
+        var upload_row = new UploadRow(this, { model : model });
 
-        // add upload item element to table
-        this.$('#upload-table > tbody:first').append(upload_item.$el);
+        // add upload row element to table
+        this.$('#upload-table > tbody:first').append(upload_row.$el);
 
         // render
-        upload_item.render();
+        upload_row.render();
 
         // table visibility
         if (this.collection.length > 0) {
@@ -125,9 +125,9 @@ return Backbone.View.extend({
     // start upload process
     _eventStart: function() {
         var self = this;
-        this.collection.each(function(item) {
-            item.set('genome', self.select_genome.value());
-            item.set('extension', self.select_extension.value());
+        this.collection.each(function(model) {
+            model.set('genome', self.select_genome.value());
+            model.set('extension', self.select_extension.value());
         });
         $.uploadpost({
             url      : this.app.options.nginx_upload_path,
@@ -190,11 +190,9 @@ return Backbone.View.extend({
         if (model && model.get('status') == 'running') {
             this.select_genome.disable();
             this.select_extension.disable();
-            this.$('#upload-info').html('Please wait...');
         } else {
             this.select_genome.enable();
             this.select_extension.enable();
-            this.$('#upload-info').html('You can Drag & Drop files into the rows.');
         }
         if (this.collection.where({ status : 'ready' }).length == this.collection.length && this.collection.length > 0) {
             this.btnStart.enable();
@@ -228,9 +226,6 @@ return Backbone.View.extend({
     // load html template
     _template: function() {
         return  '<div class="upload-view-composite">' +
-                    '<div class="upload-top">' +
-                        '<h6 id="upload-info" class="upload-info"/>' +
-                    '</div>' +
                     '<div id="upload-footer" class="upload-footer">' +
                         '<span class="footer-title">Composite Type:</span>' +
                         '<span id="footer-extension"/>' +

client/galaxy/scripts/mvc/upload/default/default-row.js

@@ -12,7 +12,7 @@ define(['utils/utils',
                     Select
                 ) {
 
-// item view
+// row view
 return Backbone.View.extend({
     // states
     status_classes : {
@@ -43,7 +43,7 @@ return Backbone.View.extend({
         // create model
         this.model = options.model;
 
-        // add upload item
+        // add upload row
         this.setElement(this._template(options.model));
 
         // append popup to settings icon
@@ -58,7 +58,7 @@ return Backbone.View.extend({
 
         // select genomes
         this.select_genome = new Select.View({
-            css: 'genome',
+            css: 'upload-genome',
             onchange : function(genome) {
                 self.model.set('genome', genome);
                 self.app.updateGenome(genome, true);
@@ -76,7 +76,7 @@ return Backbone.View.extend({
 
         // select extension
         this.select_extension = new Select.View({
-            css: 'extension',
+            css: 'upload-extension',
             onchange : function(extension) {
                 self.model.set('extension', extension);
                 self.app.updateExtension(extension, true);
@@ -160,7 +160,7 @@ return Backbone.View.extend({
         // remove mode class
         this.$('#mode')
             .removeClass()
-            .addClass('mode')
+            .addClass('upload-mode')
             .addClass('text-primary');
 
         // activate text field if file is new
@@ -301,30 +301,30 @@ return Backbone.View.extend({
 
     // template
     _template: function(options) {
-        return  '<tr id="upload-item-' + options.id + '" class="upload-item">' +
+        return  '<tr id="upload-row-' + options.id + '" class="upload-row">' +
                     '<td>' +
-                        '<div class="text-column">' +
+                        '<div class="upload-text-column">' +
                             '<div id="mode"/>' +
-                            '<div id="title" class="title"/>' +
+                            '<div id="title" class="upload-title"/>' +
                             '<div id="text" class="text">' +
                                 '<div class="text-info">You can tell Galaxy to download data from web by entering URL in this box (one per line). You can also directly paste the contents of a file.</div>' +
                                 '<textarea id="text-content" class="text-content form-control"/>' +
                             '</div>' +
                         '</div>' +
                     '</td>' +
                     '<td>' +
-                        '<div id="size" class="size"/>' +
+                        '<div id="size" class="upload-size"/>' +
                     '</td>' +
                     '<td>' +
-                        '<div id="extension" class="extension" style="float: left;"/>&nbsp;&nbsp' +
+                        '<div id="extension" class="upload-extension" style="float: left;"/>&nbsp;&nbsp' +
                         '<div id="extension-info" class="upload-icon-button fa fa-search"/>' +
                     '</td>' +
                     '<td>' +
-                        '<div id="genome" class="genome"/>' +
+                        '<div id="genome" class="upload-genome"/>' +
                     '</td>' +
                     '<td><div id="settings" class="upload-icon-button fa fa-gear"/></td>' +
                     '<td>' +
-                        '<div id="info" class="info">' +
+                        '<div id="info" class="upload-info">' +
                             '<div class="progress">' +
                                 '<div class="progress-bar progress-bar-success"/>' +
                                 '<div id="percentage" class="percentage">0%</div>' +

client/galaxy/scripts/mvc/upload/default/default-view.js

@@ -10,7 +10,7 @@ define(['utils/utils',
 
         function(   Utils,
                     UploadModel,
-                    UploadItem,
+                    UploadRow,
                     UploadFtp,
                     Popover,
                     Select,
@@ -30,7 +30,7 @@ return Backbone.View.extend({
     // current upload size in bytes
     upload_size: 0,
 
-    // contains upload item/row models
+    // contains upload row models
     collection : new UploadModel.Collection(),
 
     // ftp file viewer
@@ -131,8 +131,8 @@ return Backbone.View.extend({
         });
 
         // events
-        this.collection.on('remove', function(item) {
-            self._eventRemove(item);
+        this.collection.on('remove', function(model) {
+            self._eventRemove(model);
         });
 
         // setup info
@@ -162,16 +162,16 @@ return Backbone.View.extend({
         this.collection.add(new_model);
 
         // create view/model
-        var upload_item = new UploadItem(this, { model: new_model });
+        var upload_row = new UploadRow(this, { model: new_model });
 
-        // add upload item element to table
-        this.$('#upload-table > tbody:first').append(upload_item.$el);
+        // add upload row element to table
+        this.$('#upload-table > tbody:first').append(upload_row.$el);
 
         // show on screen info
         this._updateScreen();
 
         // render
-        upload_item.render();
+        upload_row.render();
     },
 
     // progress
@@ -236,9 +236,9 @@ return Backbone.View.extend({
     // queue is done
     _eventComplete: function() {
         // reset queued upload to initial status
-        this.collection.each(function(item) {
-            if(item.get('status') == 'queued') {
-                item.set('status', 'init');
+        this.collection.each(function(model) {
+            if(model.get('status') == 'queued') {
+                model.set('status', 'init');
             }
         });
 
@@ -253,10 +253,10 @@ return Backbone.View.extend({
     // events triggered by collection
     //
 
-    // remove item from upload list
-    _eventRemove: function(item) {
+    // remove model from upload list
+    _eventRemove: function(model) {
         // update status
-        var status = item.get('status');
+        var status = model.get('status');
 
         // reduce counter
         if (status == 'success') {
@@ -268,7 +268,7 @@ return Backbone.View.extend({
         }
 
         // remove from queue
-        this.uploadbox.remove(item.id);
+        this.uploadbox.remove(model.id);
 
         // show on screen info
         this._updateScreen();
@@ -349,10 +349,10 @@ return Backbone.View.extend({
         this.upload_size = 0;
         this.upload_completed = 0;
         // switch icons for new uploads
-        this.collection.each(function(item) {
-            if(item.get('status') == 'init') {
-                item.set('status', 'queued');
-                self.upload_size += item.get('file_size');
+        this.collection.each(function(model) {
+            if(model.get('status') == 'init') {
+                model.set('status', 'queued');
+                self.upload_size += model.get('file_size');
             }
         });
 
@@ -416,19 +416,19 @@ return Backbone.View.extend({
     // update extension for all models
     updateExtension: function(extension, defaults_only) {
         var self = this;
-        this.collection.each(function(item) {
-            if (item.get('status') == 'init' && (item.get('extension') == self.options.default_extension || !defaults_only)) {
-                item.set('extension', extension);
+        this.collection.each(function(model) {
+            if (model.get('status') == 'init' && (model.get('extension') == self.options.default_extension || !defaults_only)) {
+                model.set('extension', extension);
             }
         });
     },
 
     // update genome for all models
     updateGenome: function(genome, defaults_only) {
         var self = this;
-        this.collection.each(function(item) {
-            if (item.get('status') == 'init' && (item.get('genome') == self.options.default_genome || !defaults_only)) {
-                item.set('genome', genome);
+        this.collection.each(function(model) {
+            if (model.get('status') == 'init' && (model.get('genome') == self.options.default_genome || !defaults_only)) {
+                model.set('genome', genome);
             }
         });
     },
@@ -442,9 +442,9 @@ return Backbone.View.extend({
         // check default message
         if(this.counter.announce == 0) {
             if (this.uploadbox.compatible()) {
-                message = 'You can Drag & Drop files into this box.';
+                message = ' ';
             } else {
-                message = 'Unfortunately, your browser does not support multiple file uploads or drag&drop.<br>Some supported browsers are: Firefox 4+, Chrome 7+, IE 10+, Opera 12+ or Safari 6+.';
+                message = 'Browser does not support Drag & Drop. Try Firefox 4+, Chrome 7+, IE 10+, Opera 12+ or Safari 6+.';
             }
         } else {
             if (this.counter.running == 0) {
@@ -505,8 +505,10 @@ return Backbone.View.extend({
         // table visibility
         if (this.counter.announce + this.counter.success + this.counter.error > 0) {
             this.$('#upload-table').show();
+            this.$('.upload-helper').hide();
         } else {
             this.$('#upload-table').hide();
+            this.$('.upload-helper').show();
         }
     },
 
@@ -535,6 +537,7 @@ return Backbone.View.extend({
                         '<h6 id="upload-info" class="upload-info"/>' +
                     '</div>' +
                     '<div id="upload-box" class="upload-box">' +
+                        '<div class="upload-helper"><i class="fa fa-files-o"/>Drop files here</div>' +
                         '<table id="upload-table" class="ui-table-striped" style="display: none;">' +
                             '<thead>' +
                                 '<tr>' +