[galaxy-commits] commit/galaxy-central: guerler: Update of the new upload front end, fix data viewer

10 Oct 2013

1 new commit in galaxy-central:

https://bitbucket.org/galaxy/galaxy-central/commits/450c04224d6c/
Changeset:   450c04224d6c
User:        guerler
Date:        2013-10-10 19:34:36
Summary:     Update of the new upload front end, fix data viewer
Affected #:  6 files

diff -r 33af3a5b36df7207ec469d635779329a73117f73 -r 450c04224d6cd0f2c8c7964cedcd0eeafd98c873 static/scripts/galaxy.modal.js

--- a/static/scripts/galaxy.modal.js
+++ b/static/scripts/galaxy.modal.js
@@ -11,13 +11,16 @@
     // base element
     elMain: '#everything',
     
-    // defaults inputs
+    // defaults options
     optionsDefault: {
         title       : "galaxy-modal",
         body        : "",
         backdrop    : true
     },
     
+    // options
+    options : {},
+    
     // initialize
     initialize : function(options) {
         // create
@@ -31,16 +34,18 @@
         this.initialize(options);
 
         // fix height
-        this.$body.css('max-height', $(document).height() / 2);
+        var maxHeight = $(document).height() / 2;
+        this.$body.css('max-height', maxHeight);
         
-        // set max-height so that modal does not exceed window size and is in middle of page.
-        /*/ TODO: this could perhaps be handled better using CSS.
-        this.$body.css( "max-height",
-                    $(window).height() -
-                    this.$footer.outerHeight() -
-                    this.$header.outerHeight() -
-                    parseInt( this.$dialog.css( "padding-top" ), 10 ) -
-                    parseInt( this.$dialog.css( "padding-bottom" ), 10 ));*/
+        // fix height if available
+        if (this.options.height < maxHeight)
+            this.$body.css('height', this.options.height);
+        else
+            this.$body.css('height', maxHeight);
+        
+        // remove scroll bar
+        if (this.options.height)
+            this.$body.css('overflow', 'hidden');
         
         // show
         if (this.visible)
@@ -64,18 +69,18 @@
     // create
     create: function(options) {
         // configure options
-        options = _.defaults(options, this.optionsDefault);
+        this.options = _.defaults(options, this.optionsDefault);
         
         // check for progress bar request
-        if (options.body == 'progress')
-            options.body = $('<div class="progress progress-striped active"><div class="progress-bar progress-bar-info" style="width:100%"></div></div>');
+        if (this.options.body == 'progress')
+            this.options.body = $('<div class="progress progress-striped active"><div class="progress-bar progress-bar-info" style="width:100%"></div></div>');
             
         // remove former element
         if (this.$el)
             this.$el.remove();
         
         // create new element
-        this.setElement(this.template(options.title));
+        this.setElement(this.template(this.options.title));
         
         // link elements
         this.$body = (this.$el).find('.modal-body');
@@ -84,24 +89,20 @@
         this.$backdrop = (this.$el).find('.modal-backdrop');
         
         // append body
-        this.$body.html(options.body);
-
-        // fix height if available
-        if (options.height)
-            this.$body.css('height', options.height);
+        this.$body.html(this.options.body);
         
         // fix min-width so that modal cannot shrink considerably if new content is loaded.
         this.$body.css('min-width', this.$body.width());
 
         // configure background
-        if (!options.backdrop)
+        if (!this.options.backdrop)
             this.$backdrop.removeClass('in');
                         
         // append buttons
-        if (options.buttons) {
+        if (this.options.buttons) {
             // link functions
             var self = this;
-            $.each(options.buttons, function(name, value) {
+            $.each(this.options.buttons, function(name, value) {
                  self.$buttons.append($('<button id="' + String(name).toLowerCase() + '"></button>').text(name).click(value)).append(" ");
             });
         } else

diff -r 33af3a5b36df7207ec469d635779329a73117f73 -r 450c04224d6cd0f2c8c7964cedcd0eeafd98c873 static/scripts/galaxy.upload.js
--- a/static/scripts/galaxy.upload.js
+++ b/static/scripts/galaxy.upload.js
@@ -19,15 +19,16 @@
     
     // extension types
     select_extension : {
-        ''      : 'Auto-detect',
+        'auto'  : 'Auto-detect',
         'bed'   : 'bed',
         'ab1'   : 'ab1'
     },
     
     // states
     state : {
-        init  : 'fa-icon-trash',
-        done  : 'fa-icon-caret-down'
+        init : 'fa-icon-trash',
+        success : 'fa-icon-ok',
+        error : 'fa-icon-warning-sign'
     },
     
     // counter
@@ -94,7 +95,7 @@
         var id = '#upload-' + index;
 
         // add upload item
-        $(this.el).append(this.template_file(id, this.select_extension));
+        $(this.el).find('tbody:last').append(this.template_row(id, this.select_extension));
         
         // scroll to bottom
         //$(this.el).scrollTop($(this.el).prop('scrollHeight'));
@@ -106,15 +107,15 @@
         it.fadeIn();
         
         // update title
-        it.find('.title').html(file.name);
-        
-        // configure select field
-        //it.find('#extension').select2();
+        it.find('#title').html(file.name);
+    
+        // update info
+        it.find('#size').html(this.size_to_string (file.size));
         
         // add functionality to remove button
         var self = this;
-        it.find('.symbol').on('click', function() { self.event_remove (index) });
-    
+        it.find('#symbol').on('click', function() { self.event_remove (index) });
+        
         // initialize progress
         this.event_progress(index, file, 0);
         
@@ -141,6 +142,10 @@
             extension       : it.find('#extension').val()
         }
         
+        // configure url
+        var current_history = Galaxy.currHistoryPanel.model.get('id');
+        this.uploadbox.configure({url : galaxy_config.root + "api/histories/" + current_history + "/contents"});
+        
         // return additional data to be send with file
         return data;
     },
@@ -157,8 +162,8 @@
         // update progress
         it.find('.progress-bar').css({ width : percentage + '%' });
         
-        // update info
-        it.find('.info').html(percentage + '% of ' + this.size_to_string (file.size));
+        // update value
+        it.find('#percentage').html(percentage + '%');
     },
     
     // success
@@ -184,16 +189,15 @@
         var it = this.get_upload_item(index);
         
         // update progress frame
-        it.addClass('panel-success');
-        it.removeClass('panel-default');
+        it.addClass('success');
         
         // update icon
-        var sy = it.find('.symbol');
+        var sy = it.find('#symbol');
         sy.removeClass('fa-icon-spin');
         sy.removeClass('fa-icon-spinner');
         
         // set status
-        sy.addClass(this.state.done);
+        sy.addClass(this.state.success);
     },
     
     // error
@@ -216,22 +220,21 @@
         var it = this.get_upload_item(index);
         
         // update progress frame
-        it.addClass('panel-danger');
-        it.removeClass('panel-default');
+        it.addClass('danger');
         
         // remove progress bar
         it.find('.progress').remove();
         
         // write error message
-        it.find('.error').html('<strong>Failed:</strong> ' + message);
+        it.find('#info').html('<strong>Failed: </strong>' + message).show();
         
         // update icon
-        var sy = it.find('.symbol');
+        var sy = it.find('#symbol');
         sy.removeClass('fa-icon-spin');
         sy.removeClass('fa-icon-spinner');
         
         // set status
-        sy.addClass(this.state.done);
+        sy.addClass(this.state.error);
     },
     
     // start upload process
@@ -242,27 +245,22 @@
             return;
             
         // switch icons for new uploads
+        var items = $(this.el).find('.upload-item');
         var self = this;
-        $(this.el).find('.symbol').each(function()
+        items.each(function()
         {
-            if($(this).hasClass(self.state.init))
+            var symbol = $(this).find('#symbol');
+            if(symbol.hasClass(self.state.init))
             {
-                $(this).removeClass(self.state.init);
-                $(this).addClass('fa-icon-spinner');
-                $(this).addClass('fa-icon-spin');
+                symbol.removeClass(self.state.init);
+                symbol.addClass('fa-icon-spinner');
+                symbol.addClass('fa-icon-spin');
             }
         });
         
-        // hide configuration
-        $(this.el).find('.panel-body').hide();
-        
         // update running
         this.counter.running = this.counter.announce;
         this.update_screen();
-                
-        // configure url
-        var current_history = Galaxy.currHistoryPanel.model.get('id');
-        this.uploadbox.configure({url : galaxy_config.root + "api/histories/" + current_history + "/contents"});
         
         // initiate upload procedure in plugin
         this.uploadbox.upload();
@@ -283,9 +281,9 @@
         if (this.counter.running == 0)
         {
             // remove from screen
-            var panels = $(this.el).find('.panel');
-            panels.fadeOut({complete: function() { panels.remove(); }});
-        
+            var items = $(this.el).find('.upload-item');
+            $(this.el).find('table').fadeOut({ complete : function() { items.remove(); }});
+            
             // reset counter
             this.counter.reset();
         
@@ -302,18 +300,18 @@
     {
         // get item
         var it = this.get_upload_item(index);
-        var sy = it.find('.symbol');
+        var sy = it.find('#symbol');
                 
         // only remove from queue if not in processing line
-        if (sy.hasClass(this.state.init) || sy.hasClass(this.state.done))
+        if (sy.hasClass(this.state.init) || sy.hasClass(this.state.success) || sy.hasClass(this.state.error))
         {
             // reduce counter
-            if (it.hasClass('panel-default'))
+            if (it.hasClass('success'))
+                this.counter.success--;
+            else if (it.hasClass('danger'))
+                this.counter.error--;
+            else
                 this.counter.announce--;
-            else if (it.hasClass('panel-success'))
-                this.counter.success--;
-            else if (it.hasClass('panel-danger'))
-                this.counter.error--;
             
             // show on screen info
             this.update_screen();
@@ -340,14 +338,14 @@
             this.modal = new mod_modal.GalaxyModal(
             {
                 title   : 'Upload files from your local drive',
-                body    : this.template('upload-box'),
+                body    : this.template('upload-box', 'upload-info'),
                 buttons : {
                     'Select' : function() {self.uploadbox.select()},
                     'Upload' : function() {self.event_upload()},
                     'Reset'  : function() {self.event_reset()},
                     'Close'  : function() {self.modal.hide()}
                 },
-                height : '250px'
+                height : '350'
             });
         
             // set element
@@ -441,45 +439,61 @@
             this.modal.enableButton('Select');
         else
             this.modal.disableButton('Select');
+            
+        // table visibility
+        if (this.counter.announce + this.counter.success + this.counter.error > 0)
+            $(this.el).find('table').show();
+        else
+            $(this.el).find('table').hide();
     },
 
     // load html template
-    template: function(id)
+    template: function(id, idInfo)
     {
-        return  '<div id="' + id + '" class="upload-box"></div><h6 id="upload-info" class="upload-info"></h6>';
+        return  '<div id="' + id + '" class="upload-box">' +
+                    '<table class="table table-striped" style="display: none;">' +
+                        '<thead>' +
+                            '<tr>' +
+                                '<th>Name</th>' +
+                                '<th>Size</th>' +
+                                '<th>Type</th>' +
+                                '<th>Space→Tab</th>' +
+                                '<th>Progress</th>' +
+                                '<th></th>' +
+                            '</tr>' +
+                        '</thead>' +
+                        '<tbody></tbody>' +
+                    '</table>' +
+                '</div>' +
+                '<h6 id="' + idInfo + '" class="upload-info"></h6>';
     },
     
-    // load html template
-    template_file: function(id, select_extension)
+    template_row: function(id, select_extension)
     {
-        // start template
-        var tmpl =  '<div id="' + id.substr(1) + '" class="panel panel-default">' +
-                        '<div class="panel-heading">' +
-                            '<h5 class="title"></h5>' +
-                            '<h5 class="info"></h5>' +
-                            '<div class="symbol ' + this.state.init + '"></div>' +
-                        '</div>' +
-                        '<div class="panel-body">' +
-                            '<div class="menu">' +
-                                'Select file type: ' +
-                                '<select id="extension">';
-        
+        // construct template
+        var tmpl = '<tr id="' + id.substr(1) + '" class="upload-item">' +
+                        '<td><div id="title" class="title"></div></td>' +
+                        '<td><div id="size" class="size"></div></td>' +
+                        '<td>' +
+                            '<select id="extension">';
+
         // add file types to selection
         for (key in select_extension)
-            tmpl +=                 '<option value="' + key + '">' + select_extension[key] + '</option>';
-
-        // continue template
-        tmpl +=                 '</select>, ' +
-                                '<span>Convert space to tabs: <input id="space_to_tabs" type="checkbox"></input></span>' +
+            tmpl +=             '<option value="' + key + '">' + select_extension[key] + '</option>';
+            
+        tmpl +=             '</select>' +
+                        '</td>' +
+                        '<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>' +
-                        '</div>' +
-                        '<div class="panel-footer">' +
-                            '<div class="progress">' +
-                                '<div class="progress-bar progress-bar-success"></div>' +
-                            '</div>' +
-                            '<h6 class="error"></h6>' +
-                        '</div>' +
-                    '</div>';
+                        '</td>' +
+                        '<td><div id="symbol" class="symbol ' + this.state.init + '"></div></td>' +
+                    '</tr>';
         
         // return html string
         return tmpl;

diff -r 33af3a5b36df7207ec469d635779329a73117f73 -r 450c04224d6cd0f2c8c7964cedcd0eeafd98c873 static/scripts/mvc/data.js
--- a/static/scripts/mvc/data.js
+++ b/static/scripts/mvc/data.js
@@ -183,10 +183,12 @@
         var column_types = this.model.get_metadata('column_types');
         if (colspan !== undefined) {
             $cell.attr('colspan', colspan).addClass('stringalign');
-        } else if (column_types !== undefined && index < column_types.length) {
-            if (column_types[index] === 'str' || column_types === 'list') {
-                /* Left align all str columns, right align the rest */
-                $cell.addClass('stringalign');
+        } else if (column_types) {
+            if (index < column_types.length) {
+                if (column_types[index] === 'str' || column_types === 'list') {
+                    /* Left align all str columns, right align the rest */
+                    $cell.addClass('stringalign');
+                }
             }
         }
         return $cell;

diff -r 33af3a5b36df7207ec469d635779329a73117f73 -r 450c04224d6cd0f2c8c7964cedcd0eeafd98c873 static/scripts/utils/galaxy.uploadbox.js
--- a/static/scripts/utils/galaxy.uploadbox.js
+++ b/static/scripts/utils/galaxy.uploadbox.js
@@ -20,8 +20,7 @@
         success         : function() {},
         error           : function(index, file, message) { alert(message); },
         complete        : function() {},
-        error_browser   : "Your browser does not support drag-and-drop file uploads.",
-        error_filesize  : "This file is too large (>250MB). Please use an FTP client to upload it.",
+        error_filesize  : "File exceeds 250MB. Please use an FTP client.",
         error_default   : "Please make sure the file is available."
     }
 

diff -r 33af3a5b36df7207ec469d635779329a73117f73 -r 450c04224d6cd0f2c8c7964cedcd0eeafd98c873 static/style/blue/base.css
--- a/static/style/blue/base.css
+++ b/static/style/blue/base.css
@@ -1125,12 +1125,14 @@
 .galaxy-frame .frame .f-pin{left:6px;top:1px}
 .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}
 .upload-info{font-weight:normal;text-align:center}
-.upload-box{width:100%;height:95%;max-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:20px}.upload-box .panel{display:none}.upload-box .panel .panel-heading{position:relative;height:19px;padding:5px}.upload-box .panel .panel-heading .title{position:absolute;top:2px;font-weight:normal;text-align:left;margin:0px;max-width:300px;overflow:hidden}
-.upload-box .panel .panel-heading .info{position:absolute;top:3px;font-weight:normal;right:20px;text-align:right;margin:0px}
-.upload-box .panel .panel-heading .symbol{position:absolute;cursor:pointer;top:0px;right:3px}
-.upload-box .panel .panel-body{position:relative;padding:5px}
-.upload-box .panel .panel-footer{position:relative;height:20px;padding:0px}.upload-box .panel .panel-footer .progress{height:10px;margin:5px}
-.upload-box .panel .panel-footer .error{font-weight:normal;margin:2px}
+.upload-box{width:100%;height:90%;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}.upload-box .table{width:100%}
+.upload-box .table th{text-align:center;white-space:nowrap}
+.upload-box .table td{margin:0px;paddign:0px}
+.upload-box .title{width:150px;word-wrap:break-word;font-size:11px}
+.upload-box .size{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}
 .unselectable{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}
 .parent-width{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:100%;*width:90%}
 .clear:before,.clear:after{content:" ";display:table;}

diff -r 33af3a5b36df7207ec469d635779329a73117f73 -r 450c04224d6cd0f2c8c7964cedcd0eeafd98c873 static/style/src/less/upload.less
--- a/static/style/src/less/upload.less
+++ b/static/style/src/less/upload.less
@@ -7,8 +7,7 @@
 .upload-box
 {
     width           : 100%;
-    height          : 95%;
-    max-height      : 95%;
+    height          : 90%;
     text-align      : center;
     overflow        : scroll;
     font-size       : @font-size-base;
@@ -16,71 +15,58 @@
     -moz-border-radius: @border-radius-large;
     border-radius   : @border-radius-large;
     border          : 1px dashed @btn-default-border;
-    padding         : 20px;
+    padding         : 10px;
+    
+    .table {
+        width : 100%;
+    }
+    
+    .table th {
+        text-align: center;
+        white-space: nowrap;
+    }
+    
+    .table td {
+        margin: 0px;
+        paddign: 0px;
+    }
+    
+    .title {
+        width: 150px;
+        word-wrap: break-word;
+        font-size : @font-size-small;
+    }
+    
+    .size {
+        white-space: nowrap;
+    }
+    
+    .info {
+        width: 130px;
+        font-size : @font-size-small;
 
-    .panel
-    {
-        display: none;
-
-        .panel-heading
-        {
+        .progress {
+            top:1px;
             position: relative;
-            height: 19px;
-            padding: 5px;
-
-            .title
-            {
-                position: absolute;
-                top: 2px;
-                font-weight: normal;
-                text-align: left;
-                margin: 0px;
-                max-width: 300px;
-                overflow: hidden;
-            }
-
-            .info
-            {
-                position: absolute;
-                top: 3px;
-                font-weight: normal;
-                right: 20px;
-                text-align: right;
-                margin: 0px;
-            }
-
-            .symbol
-            {
-                position: absolute;
-                cursor: pointer;
-                top: 0px;
-                right: 3px;
-            }
-        }
-
-        .panel-body
-        {
-            position: relative;
-            padding: 5px;
-        }
-
-        .panel-footer
-        {
-            position:relative;
-            height: 20px;
+            width: 100%;
             padding: 0px;
+            margin: 0px;
             
-            .progress
-            {
-                height: 10px;
-                margin: 5px;
+            .progress-bar {
+                border-radius: inherit;
+                -moz-border-radius: inherit;
             }
             
-            .error
-            {
-                font-weight: normal;
-                margin: 2px;
+            .percentage {
+                position: absolute;
+                text-align: center;
+                width: 100%;
+                color: @white;
             }
         }
     }
+    
+    .symbol {
+        cursor: pointer;
+    }
 }
\ No newline at end of file

Repository URL: https://bitbucket.org/galaxy/galaxy-central/

--

This is a commit notification from bitbucket.org. You are receiving
this because you have the service enabled, addressing the recipient of
this email.

    

[galaxy-commits] commit/galaxy-central: guerler: Update of the new upload front end, fix data viewer

commits-noreply＠bitbucket.org