Upload: Finalize Progress button, fix icon size

static/scripts/mvc/upload/upload-row.js

@@ -12,6 +12,7 @@ return Backbone.View.extend({
     status_classes : {
         init    : 'symbol fa fa-trash-o',
         queued  : 'symbol fa fa-spinner fa-spin',
+        running : 'symbol fa fa-spinner fa-spin',
         success : 'symbol fa fa-check',
         error   : 'symbol fa fa-exclamation-triangle'
     },

static/scripts/mvc/upload/upload-view.js

@@ -1,6 +1,5 @@
 // dependencies
 define(["galaxy.modal",
-        "galaxy.masthead",
         "utils/utils",
         "mvc/upload/upload-model",
         "mvc/upload/upload-row",
@@ -8,7 +7,6 @@ define(["galaxy.modal",
         "utils/uploadbox"],
        
         function(   Modal,
-                    Masthead,
                     Utils,
                     UploadModel,
                     UploadItem
@@ -58,27 +56,45 @@ var ProgressButton = Backbone.View.extend({
         this.model.on('change:status', function() {
             self._status(self.model.get('status'));
         });
+        
+        // unload event
+        var self = this;
+        window.onbeforeunload = function() {
+            var text = "";
+            if (self.options.onunload) {
+                text = self.options.onunload();
+            }
+            if (text != "")
+                return text;
+        };
     },
     
     // set status
     _status: function(value) {
         var $el = this.$el.find('.progress-bar');
+        $el.removeClass();
+        $el.addClass('progress-bar');
+        $el.addClass('progress-bar-notransition');
         if (value != '') {
             $el.addClass('progress-bar-' + value);
-        } else {
-            $el.removeClass();
-            $el.addClass('progress-bar');
         }
     },
     
     // set percentage
     _percentage: function(value) {
-        this.$el.find('.progress-bar').css({ width : value + '%' });
+        var $el = this.$el.find('.progress-bar');
+        if (value) {
+            // change to new percentage
+            $el.css({ width : value + '%' });
+        } else {
+            // reset without transition
+            $el.css({ width : '0%' });
+        }
     },
     
     // template
     _template: function(options) {
-        return  '<div style="position: absolute; width: 100px; right: 10px; top: 7px; cursor: pointer;">' +
+        return  '<div class="progress-button">' +
                     '<div class="progress">' +
                         '<div class="progress-bar"></div>' +
                     '</div>' +
@@ -154,7 +170,7 @@ return Backbone.View.extend(
         // create model
         this.button_show = new ProgressButtonModel({
             icon        : 'fa-upload',
-            tooltip     : 'Upload Files',
+            tooltip     : 'upload files',
             label       : 'Upload',
             onclick     : function(e) {
                 if (e) {
@@ -162,8 +178,9 @@ return Backbone.View.extend(
                 }
             },
             onunload    : function() {
-                if (self.counter.running > 0)
+                if (self.counter.running > 0) {
                     return "Several uploads are still processing.";
+                }
             }
         });
         
@@ -336,7 +353,7 @@ return Backbone.View.extend(
         var it = this.collection.get(index);
         
         // update status
-        it.set('state', 'running');
+        it.set('status', 'running');
     
         // get configuration
         var file_type       = it.get('extension');
@@ -478,8 +495,8 @@ return Backbone.View.extend(
         });
         
         // reset progress
-        this.button_show.set('progress', 0);
-        this.button_show.set('status', '');
+        this.button_show.set('percentage', 0);
+        this.button_show.set('status', 'success');
         
         // backup current history
         this.current_history = Galaxy.currHistoryPanel.model.get('id');
@@ -498,7 +515,10 @@ return Backbone.View.extend(
         if (this.counter.running == 0) {
             return;
         }
-        
+
+        // show upload has paused
+        this.button_show.set('status', 'info');
+
         // request pause
         this.uploadbox.stop();
         
@@ -522,6 +542,9 @@ return Backbone.View.extend(
             
             // remove from queue
             this.uploadbox.reset();
+            
+            // reset button
+            this.button_show.set('percentage', 0);
         }
     },
     

static/scripts/packed/mvc/upload/upload-row.js

@@ -1 +1 @@
-define(["mvc/upload/upload-model"],function(a){return Backbone.View.extend({options:{padding:8},status_classes:{init:"symbol fa fa-trash-o",queued:"symbol fa fa-spinner fa-spin",success:"symbol fa fa-check",error:"symbol fa fa-exclamation-triangle"},initialize:function(e,c){this.app=e;var b=this;this.model=new a.Model(c);this.setElement(this._template(c));var d=this.$el;d.find("#symbol").on("click",function(){var f=b.model.get("status");if(f=="init"||f=="success"||f=="error"){b.app.collection.remove(b.model)}});d.find("#text-content").on("keyup",function(){var f=d.find("#text-content");var h=f.val();var g=h.length;d.find("#size").html(b._formatSize(g));b.model.set("url_paste",h);b.model.set("file_size",g)});d.find("#genome").on("change",function(f){b.model.set("genome",$(f.target).val())});d.find("#extension").on("change",function(f){b.model.set("extension",$(f.target).val())});d.find("#space_to_tabs").on("change",function(f){b.model.set("space_to_tabs",$(f.target).prop("checked"))});this.model.on("change:percentage",function(){b._refreshPercentage()});this.model.on("change:status",function(){b._refreshStatus()});this.model.on("change:info",function(){b._refreshInfo()});this.model.on("change:genome",function(){b._refreshGenome()});this.model.on("remove",function(){b.remove()});this.app.collection.on("reset",function(){b.remove()})},render:function(){var h=this.model.get("file_name");var c=this.model.get("file_size");var e=this.$el;e.find("#title").html(h);e.find("#size").html(this._formatSize(c));if(c==-1){var g=e.find("#text");var f=this.options.padding;var d=e.width()-2*f;var b=e.height()-f;g.css("width",d+"px");g.css("top",b+"px");e.height(b+g.height()+2*f);g.show()}},_refreshGenome:function(){var b=this.model.get("genome");this.$el.find("#genome").val(b)},_refreshInfo:function(){var b=this.model.get("info");if(b){this.$el.find("#info").html("<strong>Failed: </strong>"+b).show()}else{this.$el.find("#info").hide()}},_refreshPercentage:function(){var b=parseInt(this.model.get("percentage"));this.$el.find(".progress-bar").css({width:b+"%"});if(b!=100){this.$el.find("#percentage").html(b+"%")}else{this.$el.find("#percentage").html("Adding to history...")}},_refreshStatus:function(){var c=this.$el;var b=this.model.get("status");var e=this.status_classes[b];var d=this.$el.find("#symbol");d.removeClass();d.addClass(e);if(b=="init"){c.find("#text-content").attr("disabled",false);c.find("#genome").attr("disabled",false);c.find("#extension").attr("disabled",false);c.find("#space_to_tabs").attr("disabled",false)}else{c.find("#text-content").attr("disabled",true);c.find("#genome").attr("disabled",true);c.find("#extension").attr("disabled",true);c.find("#space_to_tabs").attr("disabled",true)}if(b=="success"){c.addClass("success");c.find("#percentage").html("100%")}if(b=="error"){c.addClass("danger");c.find(".progress").remove()}},_formatSize:function(b){var c="";if(b>=100000000000){b=b/100000000000;c="TB"}else{if(b>=100000000){b=b/100000000;c="GB"}else{if(b>=100000){b=b/100000;c="MB"}else{if(b>=100){b=b/100;c="KB"}else{if(b>0){b=b*10;c="b"}else{return"<strong>-</strong>"}}}}}return"<strong>"+(Math.round(b)/10)+"</strong> "+c},_template:function(d){var c=this;var b='<tr id="upload-item-'+d.id+'" class="upload-item"><td><div style="position: relative;"><div id="title" class="title"></div><div id="text" class="text"><div class="text-info">You may specify a list of URLs (one per line) or paste the contents of a file.</div><textarea id="text-content" class="text-content form-control"></textarea></div></div></td><td><div id="size" class="size"></div></td>';b+='<td><select id="extension" class="extension">';for(key in c.app.select_extension){b+='<option value="'+c.app.select_extension[key][1]+'">'+c.app.select_extension[key][0]+"</option>"}b+="</select></td>";b+='<td><select id="genome" class="genome">';for(key in c.app.select_genome){b+='<option value="'+c.app.select_genome[key][1]+'">'+c.app.select_genome[key][0]+"</option>"}b+="</select></td>";b+='<td><input id="space_to_tabs" type="checkbox"></input></td><td><div id="info" class="info"><div class="progress"><div class="progress-bar progress-bar-success"></div><div id="percentage" class="percentage">0%</div></div></div></td><td><div id="symbol" class="'+this.status_classes.init+'"></div></td></tr>';return b}})});
+define(["mvc/upload/upload-model"],function(a){return Backbone.View.extend({options:{padding:8},status_classes:{init:"symbol fa fa-trash-o",queued:"symbol fa fa-spinner fa-spin",running:"symbol fa fa-spinner fa-spin",success:"symbol fa fa-check",error:"symbol fa fa-exclamation-triangle"},initialize:function(e,c){this.app=e;var b=this;this.model=new a.Model(c);this.setElement(this._template(c));var d=this.$el;d.find("#symbol").on("click",function(){var f=b.model.get("status");if(f=="init"||f=="success"||f=="error"){b.app.collection.remove(b.model)}});d.find("#text-content").on("keyup",function(){var f=d.find("#text-content");var h=f.val();var g=h.length;d.find("#size").html(b._formatSize(g));b.model.set("url_paste",h);b.model.set("file_size",g)});d.find("#genome").on("change",function(f){b.model.set("genome",$(f.target).val())});d.find("#extension").on("change",function(f){b.model.set("extension",$(f.target).val())});d.find("#space_to_tabs").on("change",function(f){b.model.set("space_to_tabs",$(f.target).prop("checked"))});this.model.on("change:percentage",function(){b._refreshPercentage()});this.model.on("change:status",function(){b._refreshStatus()});this.model.on("change:info",function(){b._refreshInfo()});this.model.on("change:genome",function(){b._refreshGenome()});this.model.on("remove",function(){b.remove()});this.app.collection.on("reset",function(){b.remove()})},render:function(){var h=this.model.get("file_name");var c=this.model.get("file_size");var e=this.$el;e.find("#title").html(h);e.find("#size").html(this._formatSize(c));if(c==-1){var g=e.find("#text");var f=this.options.padding;var d=e.width()-2*f;var b=e.height()-f;g.css("width",d+"px");g.css("top",b+"px");e.height(b+g.height()+2*f);g.show()}},_refreshGenome:function(){var b=this.model.get("genome");this.$el.find("#genome").val(b)},_refreshInfo:function(){var b=this.model.get("info");if(b){this.$el.find("#info").html("<strong>Failed: </strong>"+b).show()}else{this.$el.find("#info").hide()}},_refreshPercentage:function(){var b=parseInt(this.model.get("percentage"));this.$el.find(".progress-bar").css({width:b+"%"});if(b!=100){this.$el.find("#percentage").html(b+"%")}else{this.$el.find("#percentage").html("Adding to history...")}},_refreshStatus:function(){var c=this.$el;var b=this.model.get("status");var e=this.status_classes[b];var d=this.$el.find("#symbol");d.removeClass();d.addClass(e);if(b=="init"){c.find("#text-content").attr("disabled",false);c.find("#genome").attr("disabled",false);c.find("#extension").attr("disabled",false);c.find("#space_to_tabs").attr("disabled",false)}else{c.find("#text-content").attr("disabled",true);c.find("#genome").attr("disabled",true);c.find("#extension").attr("disabled",true);c.find("#space_to_tabs").attr("disabled",true)}if(b=="success"){c.addClass("success");c.find("#percentage").html("100%")}if(b=="error"){c.addClass("danger");c.find(".progress").remove()}},_formatSize:function(b){var c="";if(b>=100000000000){b=b/100000000000;c="TB"}else{if(b>=100000000){b=b/100000000;c="GB"}else{if(b>=100000){b=b/100000;c="MB"}else{if(b>=100){b=b/100;c="KB"}else{if(b>0){b=b*10;c="b"}else{return"<strong>-</strong>"}}}}}return"<strong>"+(Math.round(b)/10)+"</strong> "+c},_template:function(d){var c=this;var b='<tr id="upload-item-'+d.id+'" class="upload-item"><td><div style="position: relative;"><div id="title" class="title"></div><div id="text" class="text"><div class="text-info">You may specify a list of URLs (one per line) or paste the contents of a file.</div><textarea id="text-content" class="text-content form-control"></textarea></div></div></td><td><div id="size" class="size"></div></td>';b+='<td><select id="extension" class="extension">';for(key in c.app.select_extension){b+='<option value="'+c.app.select_extension[key][1]+'">'+c.app.select_extension[key][0]+"</option>"}b+="</select></td>";b+='<td><select id="genome" class="genome">';for(key in c.app.select_genome){b+='<option value="'+c.app.select_genome[key][1]+'">'+c.app.select_genome[key][0]+"</option>"}b+="</select></td>";b+='<td><input id="space_to_tabs" type="checkbox"></input></td><td><div id="info" class="info"><div class="progress"><div class="progress-bar progress-bar-success"></div><div id="percentage" class="percentage">0%</div></div></div></td><td><div id="symbol" class="'+this.status_classes.init+'"></div></td></tr>';return b}})});

static/style/blue/base.css

@@ -1250,6 +1250,10 @@ label{font-weight:normal}
 .galaxy-frame .frame .f-close{right:5px;top:3px}
 .galaxy-frame .frame .f-pin{left:6px;top:3px}
 .galaxy-frame .frame .f-resize{background:#fff;width:16px;height:16px;color:#2c3143;right:0px;bottom:0px;text-align:center;line-height:16px;border:0px}
+.progress-button{position:absolute;width:100px;right:10px;top:6px;cursor:pointer;height:19px;border:1px solid #aaa;-moz-border-radius:3px;border-radius:3px}.progress-button .progress-bar-danger{background:#f9c7c5}
+.progress-button .progress-bar-success{background:#aff1af;border:0px}
+.progress-button .progress-bar-info{background:#ffc}
+.progress-button .progress-bar-notransition{-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none}
 .upload-info{font-weight:normal;text-align:center}
 .upload-box{width:100%;height:95%;text-align:center;overflow:scroll;font-size:12px;line-height:1.33;-moz-border-radius:5px;border-radius:5px;border:1px dashed #bfbfbf;padding:10px;overflow-x:hidden;-ms-overflow-style:none}.upload-box .table{width:100%}
 .upload-box .table th{text-align:center;white-space:nowrap}
@@ -1262,7 +1266,7 @@ label{font-weight:normal}
 .upload-box .size{width:60px;white-space:nowrap}
 .upload-box .info{width:130px;font-size:11px}.upload-box .info .progress{top:1px;position:relative;width:100%;padding:0px;margin:0px}.upload-box .info .progress .progress-bar{border-radius:inherit;-moz-border-radius:inherit}
 .upload-box .info .progress .percentage{position:absolute;text-align:center;width:100%;color:#fff}
-.upload-box .symbol{cursor:pointer}
+.upload-box .symbol{font-size:1.2em;cursor:pointer}
 .libraryRow{background-color:#ebd9b2}
 .datasetHighlighted{background-color:#f9f9f9}
 .libraryItemDeleted-True{font-style:italic}

static/style/src/less/upload.less

@@ -1,3 +1,37 @@
+.progress-button {
+    position: absolute;
+    width: 100px;
+    right: 10px;
+    top: 6px;
+    cursor: pointer;
+    height: 19px;
+    border: 1px solid @input-border;
+    -moz-border-radius: @border-radius-base;
+    border-radius: @border-radius-base;
+
+    .progress-bar-danger {
+        background: @state-danger-bg;
+    }
+
+    .progress-bar-success {
+        background: @state-success-bg;
+
+        border : 0px;
+    }
+
+    .progress-bar-info {
+        background: @state-running-bg;
+    }
+
+    .progress-bar-notransition {
+        -webkit-transition: none;
+        -moz-transition: none;
+        -ms-transition: none;
+        -o-transition: none;
+        transition: none;
+    }
+}
+
 .upload-info
 {
     font-weight: normal;
@@ -99,6 +133,7 @@
     }
     
     .symbol {
+        font-size: 1.2em;
         cursor: pointer;
     }
 }

templates/webapps/galaxy/galaxy.masthead.mako

@@ -102,7 +102,7 @@
                 });
                 
                 ## add upload plugin
-                ##Galaxy.upload = new GalaxyUpload(masthead_config);
+                Galaxy.upload = new GalaxyUpload(masthead_config);
 
                 ## set up the quota meter (And fetch the current user data from trans)
                 ## add quota meter to masthead