commit/galaxy-central: guerler: Update of the new upload front end, fix data viewer
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.
participants (1)
-
commits-noreply＠bitbucket.org