commit/galaxy-central: carlfeberhard: UI, multi-history: move styles from mako to less
1 new commit in galaxy-central: https://bitbucket.org/galaxy/galaxy-central/commits/586064ce6704/ Changeset: 586064ce6704 User: carlfeberhard Date: 2015-02-13 19:00:42+00:00 Summary: UI, multi-history: move styles from mako to less Affected #: 6 files diff -r 0f69ba9bccae59f5a8f204573bdd8a4a9749231c -r 586064ce6704b93685f93230dc788aeda0160d41 client/galaxy/scripts/mvc/history/multi-panel.js --- a/client/galaxy/scripts/mvc/history/multi-panel.js +++ b/client/galaxy/scripts/mvc/history/multi-panel.js @@ -37,7 +37,7 @@ .css( 'margin-top', '8px' ); Galaxy.modal.$( '.modal-body' ).append( $copyIndicator ); history.copy( true, name ) -//TODO: make this unneccessary with pub-sub error + //TODO: make this unneccessary with pub-sub error .fail( function(){ alert( _l( 'History could not be copied. Please contact a Galaxy administrator' ) ); }) @@ -329,7 +329,7 @@ controlsRightTemplate : _.template([ '<div class="pull-right">', '<% if( !history.purged ){ %>', - '<div class="panel-menu order btn-group">', + '<div class="panel-menu btn-group">', '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">', '<span class="caret"></span>', '</button>', @@ -372,7 +372,7 @@ var MultiPanelColumns = Backbone.View.extend( baseMVC.LoggableMixin ).extend({ //logger : console, - className : 'multi-history-columns', + className : 'multi-panel-history', // ------------------------------------------------------------------------ set up /** Set up internals, history collection, and columns to display the history */ @@ -380,6 +380,9 @@ options = options || {}; this.log( this + '.init', options ); + // add the className here (since we gen. pass the el in options) + this.$el.addClass( this.className ); + // --- instance vars if( !options.currentHistoryId ){ throw new Error( this + ' requires a currentHistoryId in the options' ); @@ -549,7 +552,11 @@ this.collection.comparator = function __comparator( a, b ){ return sortOrder.fn( a, b, currentHistoryId ); }; + // set the sort order text this.$( '.current-order' ).text( sortOrder.text ); + if( this.$( '.more-options' ).is( ':visible' ) ){ + this.$( '.open-more-options.btn' ).popover( 'show' ); + } //NOTE: auto fires 'sort' from collection this.collection.sort( options ); @@ -815,7 +822,7 @@ /** put a text msg in the header */ renderInfo : function( msg ){ - this.$( '.header .header-info' ).text( msg ); + return this.$( '.header .header-info' ).text( msg ); }, // ------------------------------------------------------------------------ events/behaviors @@ -1061,7 +1068,6 @@ optionsPopoverTemplate : _.template([ '<div class="more-options">', - '<div class="order btn-group">', '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">', _l( 'Order histories by' ) + ' ', diff -r 0f69ba9bccae59f5a8f204573bdd8a4a9749231c -r 586064ce6704b93685f93230dc788aeda0160d41 static/scripts/mvc/history/multi-panel.js --- a/static/scripts/mvc/history/multi-panel.js +++ b/static/scripts/mvc/history/multi-panel.js @@ -37,7 +37,7 @@ .css( 'margin-top', '8px' ); Galaxy.modal.$( '.modal-body' ).append( $copyIndicator ); history.copy( true, name ) -//TODO: make this unneccessary with pub-sub error + //TODO: make this unneccessary with pub-sub error .fail( function(){ alert( _l( 'History could not be copied. Please contact a Galaxy administrator' ) ); }) @@ -329,7 +329,7 @@ controlsRightTemplate : _.template([ '<div class="pull-right">', '<% if( !history.purged ){ %>', - '<div class="panel-menu order btn-group">', + '<div class="panel-menu btn-group">', '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">', '<span class="caret"></span>', '</button>', @@ -372,7 +372,7 @@ var MultiPanelColumns = Backbone.View.extend( baseMVC.LoggableMixin ).extend({ //logger : console, - className : 'multi-history-columns', + className : 'multi-panel-history', // ------------------------------------------------------------------------ set up /** Set up internals, history collection, and columns to display the history */ @@ -380,6 +380,9 @@ options = options || {}; this.log( this + '.init', options ); + // add the className here (since we gen. pass the el in options) + this.$el.addClass( this.className ); + // --- instance vars if( !options.currentHistoryId ){ throw new Error( this + ' requires a currentHistoryId in the options' ); @@ -549,7 +552,11 @@ this.collection.comparator = function __comparator( a, b ){ return sortOrder.fn( a, b, currentHistoryId ); }; + // set the sort order text this.$( '.current-order' ).text( sortOrder.text ); + if( this.$( '.more-options' ).is( ':visible' ) ){ + this.$( '.open-more-options.btn' ).popover( 'show' ); + } //NOTE: auto fires 'sort' from collection this.collection.sort( options ); @@ -815,7 +822,7 @@ /** put a text msg in the header */ renderInfo : function( msg ){ - this.$( '.header .header-info' ).text( msg ); + return this.$( '.header .header-info' ).text( msg ); }, // ------------------------------------------------------------------------ events/behaviors @@ -1061,7 +1068,6 @@ optionsPopoverTemplate : _.template([ '<div class="more-options">', - '<div class="order btn-group">', '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">', _l( 'Order histories by' ) + ' ', diff -r 0f69ba9bccae59f5a8f204573bdd8a4a9749231c -r 586064ce6704b93685f93230dc788aeda0160d41 static/scripts/packed/mvc/history/multi-panel.js --- a/static/scripts/packed/mvc/history/multi-panel.js +++ b/static/scripts/packed/mvc/history/multi-panel.js @@ -1,1 +1,1 @@ -define(["mvc/history/history-model","mvc/history/history-panel-edit","mvc/base-mvc","utils/ajax-queue","ui/mode-button","ui/search-input"],function(d,l,z,a){function g(I,E){E=E||{};if(!(Galaxy&&Galaxy.modal)){return I.copy()}var F=I.get("name"),C="Copy of '"+F+"'";function D(K){if(!K){if(!Galaxy.modal.$("#invalid-title").size()){var J=$("<p/>").attr("id","invalid-title").css({color:"red","margin-top":"8px"}).addClass("bg-danger").text(_l("Please enter a valid history title"));Galaxy.modal.$(".modal-body").append(J)}return false}return K}function G(J){var K=$('<p><span class="fa fa-spinner fa-spin"></span> Copying history...</p>').css("margin-top","8px");Galaxy.modal.$(".modal-body").append(K);I.copy(true,J).fail(function(){alert(_l("History could not be copied. Please contact a Galaxy administrator"))}).always(function(){Galaxy.modal.hide()})}function H(){var J=Galaxy.modal.$("#copy-modal-title").val();if(!D(J)){return}G(J)}Galaxy.modal.show(_.extend({title:_l("Copying history")+' "'+F+'"',body:$(['<label for="copy-modal-title">',_l("Enter a title for the copied history"),":","</label><br />",'<input id="copy-modal-title" class="form-control" style="width: 100%" value="',C,'" />'].join("")),buttons:{Cancel:function(){Galaxy.modal.hide()},Copy:H}},E));$("#copy-modal-title").focus().select();$("#copy-modal-title").on("keydown",function(J){if(J.keyCode===13){H()}})}var B=Backbone.View.extend(z.LoggableMixin).extend({tagName:"div",className:"history-column flex-column flex-row-container",id:function q(){if(!this.model){return""}return"history-column-"+this.model.get("id")},initialize:function c(C){C=C||{};this.panel=C.panel||this.createPanel(C);this.setUpListeners()},createPanel:function u(D){D=_.extend({model:this.model,dragItems:true},D);var C=new l.HistoryPanelEdit(D);C._renderEmptyMessage=this.__patch_renderEmptyMessage;return C},__patch_renderEmptyMessage:function(E){var D=this,F=_.chain(this.model.get("state_ids")).values().flatten().value().length,C=D.$emptyMessage(E);if(!_.isEmpty(D.hdaViews)){C.hide()}else{if(F&&!this.model.contents.length){C.empty().append($('<span class="fa fa-spinner fa-spin"></span><i>loading datasets...</i>')).show()}else{if(D.searchFor){C.text(D.noneFoundMsg).show()}else{C.text(D.emptyMsg).show()}}}return C},setUpListeners:function f(){var C=this;this.once("rendered",function(){C.trigger("rendered:initial",C)});this.setUpPanelListeners()},setUpPanelListeners:function k(){var C=this;this.listenTo(this.panel,{rendered:function(){C.trigger("rendered",C)}},this)},inView:function(C,D){var F=this.$el.offset().left,E=F+this.$el.width();if(E<C){return false}if(F>D){return false}return true},$panel:function e(){return this.$(".history-panel")},render:function A(D){D=(D!==undefined)?(D):("fast");var C=this.model?this.model.toJSON():{};this.$el.html(this.template(C));this.renderPanel(D);this.setUpBehaviors();return this},setUpBehaviors:function v(){},template:function w(C){C=_.extend(C||{},{isCurrentHistory:this.currentHistory});return $(['<div class="panel-controls clear flex-row">',this.controlsLeftTemplate(C),this.controlsRightTemplate(C),"</div>",'<div class="inner flex-row flex-column-container">','<div id="history-',C.id,'" class="history-column history-panel flex-column"></div>',"</div>"].join(""))},renderPanel:function h(C){C=(C!==undefined)?(C):("fast");this.panel.setElement(this.$panel()).render(C);if(this.currentHistory){this.panel.$list().before(this.panel._renderDropTargetHelp())}return this},events:{"click .switch-to.btn":function(){this.model.setAsCurrent()},"click .delete-history":function(){var C=this;this.model._delete().fail(function(F,D,E){alert(_l("Could not delete the history")+":\n"+E)}).done(function(D){C.render()})},"click .undelete-history":function(){var C=this;this.model.undelete().fail(function(F,D,E){alert(_l("Could not undelete the history")+":\n"+E)}).done(function(D){C.render()})},"click .purge-history":function(){if(confirm(_l("This will permanently remove the data. Are you sure?"))){var C=this;this.model.purge().fail(function(F,D,E){alert(_l("Could not purge the history")+":\n"+E)}).done(function(D){C.render()})}},"click .copy-history":"copy"},copy:function s(){g(this.model)},controlsLeftTemplate:_.template(['<div class="pull-left">',"<% if( history.isCurrentHistory ){ %>",'<strong class="current-label">',_l("Current History"),"</strong>","<% } else { %>",'<button class="switch-to btn btn-default">',_l("Switch to"),"</button>","<% } %>","</div>"].join(""),{variable:"history"}),controlsRightTemplate:_.template(['<div class="pull-right">',"<% if( !history.purged ){ %>",'<div class="panel-menu order btn-group">','<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">','<span class="caret"></span>',"</button>",'<ul class="dropdown-menu pull-right" role="menu">',"<% if( !history.deleted ){ %>",'<li><a href="javascript:void(0);" class="copy-history">',_l("Copy"),"</a></li>",'<li><a href="javascript:void(0);" class="delete-history">',_l("Delete"),"</a></li>","<% } else /* if is deleted */ { %>",'<li><a href="javascript:void(0);" class="undelete-history">',_l("Undelete"),"</a></li>","<% } %>","</ul>","<% } %>","</div>","</div>"].join(""),{variable:"history"}),toString:function(){return"HistoryPanelColumn("+(this.panel?this.panel:"")+")"}});var m=Backbone.View.extend(z.LoggableMixin).extend({className:"multi-history-columns",initialize:function c(C){C=C||{};this.log(this+".init",C);if(!C.currentHistoryId){throw new Error(this+" requires a currentHistoryId in the options")}this.currentHistoryId=C.currentHistoryId;this.options={columnWidth:312,borderWidth:1,columnGap:8,headerHeight:29,footerHeight:0,controlsHeight:20};this.order=C.order||"update";this._initSortOrders();this.hdaQueue=new a.NamedAjaxQueue([],false);this.collection=null;this.setCollection(C.histories||[]);this.columnMap={};this.createColumns(C.columnOptions);this.setUpListeners()},_initSortOrders:function(){function C(D,E){return function F(H,G,I){if(H.id===I){return -1}if(G.id===I){return 1}H=D(H);G=D(G);return E.asc?((H===G)?(0):(H>G?1:-1)):((H===G)?(0):(H>G?-1:1))}}this.sortOrders={update:{text:_l("most recent first"),fn:C(function(D){return Date(D.get("update_time"))},{asc:false})},name:{text:_l("name, a to z"),fn:C(function(D){return D.get("name")},{asc:true})},"name-dsc":{text:_l("name, z to a"),fn:C(function(D){return D.get("name")},{asc:false})},size:{text:_l("size, large to small"),fn:C(function(D){return D.get("size")},{asc:false})},"size-dsc":{text:_l("size, small to large"),fn:C(function(D){return D.get("size")},{asc:true})}};return this.sortOrders},setUpListeners:function f(){},setCollection:function y(D){var C=this;C.stopListening(C.collection);C.collection=D;C.sortCollection(C.order,{silent:true});C.setUpCollectionListeners();C.trigger("new-collection",C);return C},setUpCollectionListeners:function(){var C=this,D=C.collection;C.listenTo(D,{add:C.addAsCurrentColumn,"set-as-current":C.setCurrentHistory,"change:deleted":C.handleDeletedHistory,sort:function(){C.renderColumns(0)}})},setCurrentHistory:function p(D){var C=this.columnMap[this.currentHistoryId];if(C){C.currentHistory=false;C.$el.height("")}this.currentHistoryId=D.id;var E=this.columnMap[this.currentHistoryId];E.currentHistory=true;this.sortCollection();multipanel._recalcFirstColumnHeight();return E},handleDeletedHistory:function b(D){if(D.get("deleted")){this.log("handleDeletedHistory",this.collection.includeDeleted,D);var C=this;column=C.columnMap[D.id];if(!column){return}if(column.model.id===this.currentHistoryId){}else{if(!C.collection.includeDeleted){C.removeColumn(column)}}}},sortCollection:function(C,D){if(!(C in this.sortOrders)){C="update"}this.order=C;var G=this.currentHistoryId,F=this.sortOrders[C];this.collection.comparator=function E(I,H){return F.fn(I,H,G)};this.$(".current-order").text(F.text);this.collection.sort(D);return this.collection},create:function(C){return this.collection.create({current:true})},createColumns:function r(D){D=D||{};var C=this;this.columnMap={};C.collection.each(function(E,F){var G=C.createColumn(E,D);C.columnMap[E.id]=G})},createColumn:function t(E,C){C=_.extend({},C,{model:E});var D=new B(C);if(E.id===this.currentHistoryId){D.currentHistory=true}this.setUpColumnListeners(D);return D},sortedFilteredColumns:function(C){C=C||this.filters;if(!C||!C.length){return this.sortedColumns()}var D=this;return D.sortedColumns().filter(function(G,F){var E=G.currentHistory||_.every(C.map(function(H){return H.call(G)}));return E})},sortedColumns:function(){var D=this;var C=this.collection.map(function(F,E){return D.columnMap[F.id]});return C},addColumn:function o(E,C){C=C!==undefined?C:true;var D=this.createColumn(E);this.columnMap[E.id]=D;if(C){this.renderColumns()}return D},addAsCurrentColumn:function o(E){var D=this,C=this.addColumn(E,false);this.setCurrentHistory(E);C.once("rendered",function(){D.queueHdaFetch(C)});return C},removeColumn:function x(E,D){D=D!==undefined?D:true;this.log("removeColumn",E);if(!E){return}var F=this,C=this.options.columnWidth+this.options.columnGap;E.$el.fadeOut("fast",function(){if(D){$(this).remove();F.$(".middle").width(F.$(".middle").width()-C);F.checkColumnsInView();F._recalcFirstColumnHeight()}F.stopListening(E.panel);F.stopListening(E);delete F.columnMap[E.model.id];E.remove()})},setUpColumnListeners:function n(C){var D=this;D.listenTo(C,{"in-view":D.queueHdaFetch});D.listenTo(C.panel,{"view:draggable:dragstart":function(H,F,E,G){D._dropData=JSON.parse(H.dataTransfer.getData("text"));D.currentColumnDropTargetOn()},"view:draggable:dragend":function(H,F,E,G){D._dropData=null;D.currentColumnDropTargetOff()},"droptarget:drop":function(G,H,F){var I=D._dropData.filter(function(J){return(_.isObject(J)&&J.id&&J.model_class==="HistoryDatasetAssociation")});D._dropData=null;var E=new a.NamedAjaxQueue();I.forEach(function(J){E.add({name:"copy-"+J.id,fn:function(){return F.model.contents.copy(J.id)}})});E.start();E.done(function(J){F.model.fetch()})}})},columnMapLength:function(){return Object.keys(this.columnMap).length},render:function A(D){D=D!==undefined?D:this.fxSpeed;var C=this;C.log(C+".render");C.$el.html(C.mainTemplate(C));C.renderColumns(D);C.setUpBehaviors();C.trigger("rendered",C);return C},renderColumns:function j(F){F=F!==undefined?F:this.fxSpeed;var E=this,C=E.sortedFilteredColumns();E.$(".middle").width(C.length*(this.options.columnWidth+this.options.columnGap)+this.options.columnGap+16);var D=E.$(".middle");D.empty();C.forEach(function(H,G){H.$el.appendTo(D);H.delegateEvents();E.renderColumn(H,F)});if(this.searchFor&&C.length<=1){}else{E.checkColumnsInView();this._recalcFirstColumnHeight()}return C},renderColumn:function(C,D){D=D!==undefined?D:this.fxSpeed;return C.render(D)},queueHdaFetch:function i(E){if(E.model.contents.length===0&&!E.model.get("empty")){var C={},D=_.values(E.panel.storage.get("expandedIds")).join();if(D){C.dataset_details=D}this.hdaQueue.add({name:E.model.id,fn:function(){var F=E.model.contents.fetch({data:C,silent:true});return F.done(function(G){E.panel.renderItems()})}});if(!this.hdaQueue.running){this.hdaQueue.start()}}},queueHdaFetchDetails:function(C){if((C.model.contents.length===0&&!C.model.get("empty"))||(!C.model.contents.haveDetails())){this.hdaQueue.add({name:C.model.id,fn:function(){var D=C.model.contents.fetch({data:{details:"all"},silent:true});return D.done(function(E){C.panel.renderItems()})}});if(!this.hdaQueue.running){this.hdaQueue.start()}}},renderInfo:function(C){this.$(".header .header-info").text(C)},events:{"click .done.btn":"close","click .create-new.btn":"create","click #include-deleted":"_clickToggleDeletedHistories","click .order .set-order":"_chooseOrder","click #toggle-deleted":"_clickToggleDeletedDatasets","click #toggle-hidden":"_clickToggleHiddenDatasets"},close:function(D){var C="/";if(Galaxy&&Galaxy.options&&Galaxy.options.root){C=Galaxy.options.root}else{if(galaxy_config&&galaxy_config.root){C=galaxy_config.root}}window.location=C},_clickToggleDeletedHistories:function(C){return this.toggleDeletedHistories($(C.currentTarget).is(":checked"))},toggleDeletedHistories:function(C){if(C){window.location=Galaxy.options.root+"history/view_multiple?include_deleted_histories=True"}else{window.location=Galaxy.options.root+"history/view_multiple"}},_clickToggleDeletedDatasets:function(C){return this.toggleDeletedDatasets($(C.currentTarget).is(":checked"))},toggleDeletedDatasets:function(C){C=C!==undefined?C:false;var D=this;D.sortedFilteredColumns().forEach(function(F,E){_.delay(function(){F.panel.toggleShowDeleted(C,false)},E*200)})},_clickToggleHiddenDatasets:function(C){return this.toggleHiddenDatasets($(C.currentTarget).is(":checked"))},toggleHiddenDatasets:function(C){C=C!==undefined?C:false;var D=this;D.sortedFilteredColumns().forEach(function(F,E){_.delay(function(){F.panel.toggleShowHidden(C,false)},E*200)})},_chooseOrder:function(D){var C=$(D.currentTarget).data("order");this.sortCollection(C)},setUpBehaviors:function(){var D=this;D._moreOptionsPopover();D.$("#search-histories").searchInput({name:"search-histories",placeholder:_l("search histories"),onsearch:function(E){D.searchFor=E;D.filters=[function(){return this.model.matchesAll(D.searchFor)}];D.renderColumns(0)},onclear:function(E){D.searchFor=null;D.filters=[];D.renderColumns(0)}});D.$("#search-datasets").searchInput({name:"search-datasets",placeholder:_l("search all datasets"),onfirstsearch:function(E){D.hdaQueue.clear();D.$("#search-datasets").searchInput("toggle-loading");D.searchFor=E;D.sortedFilteredColumns().forEach(function(F){F.panel.searchItems(E);D.queueHdaFetchDetails(F)});D.hdaQueue.progress(function(F){D.renderInfo([_l("searching"),(F.curr+1),_l("of"),F.total].join(" "))});D.hdaQueue.deferred.done(function(){D.renderInfo("");D.$("#search-datasets").searchInput("toggle-loading")})},onsearch:function(E){D.searchFor=E;D.sortedFilteredColumns().forEach(function(F){F.panel.searchItems(E)})},onclear:function(E){D.searchFor=null;D.sortedFilteredColumns().forEach(function(F){F.panel.clearSearch()})}});$(window).resize(function(){D._recalcFirstColumnHeight()});var C=_.debounce(_.bind(this.checkColumnsInView,this),100);this.$(".middle").parent().scroll(C)},_moreOptionsPopover:function(){return this.$(".open-more-options.btn").popover({container:".header",placement:"bottom",html:true,content:$(this.optionsPopoverTemplate(this))})},_recalcFirstColumnHeight:function(){var C=this.$(".history-column").first(),E=this.$(".middle").height(),D=C.find(".panel-controls").height();C.height(E).find(".inner").height(E-D)},_viewport:function(){var C=this.$(".middle").parent().offset().left;return{left:C,right:C+this.$(".middle").parent().width()}},columnsInView:function(){var C=this._viewport();return this.sortedFilteredColumns().filter(function(D){return D.currentHistory||D.inView(C.left,C.right)})},checkColumnsInView:function(){this.columnsInView().forEach(function(C){C.trigger("in-view",C)})},currentColumnDropTargetOn:function(){var C=this.columnMap[this.currentHistoryId];if(!C){return}C.panel.dataDropped=function(D){};C.panel.dropTargetOn()},currentColumnDropTargetOff:function(){var C=this.columnMap[this.currentHistoryId];if(!C){return}C.panel.dataDropped=l.HistoryPanelEdit.prototype.dataDrop;C.panel.dropTarget=false;C.panel.$(".history-drop-target").remove()},toString:function(){return"MultiPanelColumns("+(this.columns?this.columns.length:0)+")"},mainTemplate:_.template(['<div class="header flex-column-container">','<div class="control-column control-column-left flex-column">','<button class="create-new btn btn-default">',_l("Create new"),"</button> ",'<div id="search-histories" class="search-control"></div>','<div id="search-datasets" class="search-control"></div>','<button class="open-more-options btn btn-default">','<span class="fa fa-ellipsis-h" title="More options"></span>',"</button>","</div>",'<div class="control-column control-column-center flex-column">','<div class="header-info">',"</div>","</div>",'<div class="control-column control-column-right flex-column">','<button class="done btn btn-default">',_l("Done"),"</button>","</div>","</div>",'<div class="outer-middle flex-row flex-row-container">','<div class="middle flex-column-container flex-row"></div>',"</div>",'<div class="footer flex-column-container">',"</div>"].join(""),{variable:"view"}),optionsPopoverTemplate:_.template(['<div class="more-options">','<div class="order btn-group">','<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">',_l("Order histories by")+" ",'<span class="current-order"><%= view.sortOrders[ view.order ].text %></span> ','<span class="caret"></span>',"</button>",'<ul class="dropdown-menu" role="menu">',"<% _.each( view.sortOrders, function( order, key ){ %>",'<li><a href="javascript:void(0);" class="set-order" data-order="<%= key %>">',"<%= order.text %>","</a></li>","<% }); %>","</ul>","</div>",'<div class="checkbox"><label><input id="include-deleted" type="checkbox"','<%= view.collection.includeDeleted? " checked" : "" %>>',_l("Include deleted histories"),"</label></div>","<hr />",'<div class="checkbox"><label><input id="toggle-deleted" type="checkbox">',_l("Include deleted datasets"),"</label></div>",'<div class="checkbox"><label><input id="toggle-hidden" type="checkbox">',_l("Include hidden datasets"),"</label></div>","</div>"].join(""),{variable:"view"})});return{MultiPanelColumns:m}}); \ No newline at end of file +define(["mvc/history/history-model","mvc/history/history-panel-edit","mvc/base-mvc","utils/ajax-queue","ui/mode-button","ui/search-input"],function(d,l,z,a){function g(I,E){E=E||{};if(!(Galaxy&&Galaxy.modal)){return I.copy()}var F=I.get("name"),C="Copy of '"+F+"'";function D(K){if(!K){if(!Galaxy.modal.$("#invalid-title").size()){var J=$("<p/>").attr("id","invalid-title").css({color:"red","margin-top":"8px"}).addClass("bg-danger").text(_l("Please enter a valid history title"));Galaxy.modal.$(".modal-body").append(J)}return false}return K}function G(J){var K=$('<p><span class="fa fa-spinner fa-spin"></span> Copying history...</p>').css("margin-top","8px");Galaxy.modal.$(".modal-body").append(K);I.copy(true,J).fail(function(){alert(_l("History could not be copied. Please contact a Galaxy administrator"))}).always(function(){Galaxy.modal.hide()})}function H(){var J=Galaxy.modal.$("#copy-modal-title").val();if(!D(J)){return}G(J)}Galaxy.modal.show(_.extend({title:_l("Copying history")+' "'+F+'"',body:$(['<label for="copy-modal-title">',_l("Enter a title for the copied history"),":","</label><br />",'<input id="copy-modal-title" class="form-control" style="width: 100%" value="',C,'" />'].join("")),buttons:{Cancel:function(){Galaxy.modal.hide()},Copy:H}},E));$("#copy-modal-title").focus().select();$("#copy-modal-title").on("keydown",function(J){if(J.keyCode===13){H()}})}var B=Backbone.View.extend(z.LoggableMixin).extend({tagName:"div",className:"history-column flex-column flex-row-container",id:function q(){if(!this.model){return""}return"history-column-"+this.model.get("id")},initialize:function c(C){C=C||{};this.panel=C.panel||this.createPanel(C);this.setUpListeners()},createPanel:function u(D){D=_.extend({model:this.model,dragItems:true},D);var C=new l.HistoryPanelEdit(D);C._renderEmptyMessage=this.__patch_renderEmptyMessage;return C},__patch_renderEmptyMessage:function(E){var D=this,F=_.chain(this.model.get("state_ids")).values().flatten().value().length,C=D.$emptyMessage(E);if(!_.isEmpty(D.hdaViews)){C.hide()}else{if(F&&!this.model.contents.length){C.empty().append($('<span class="fa fa-spinner fa-spin"></span><i>loading datasets...</i>')).show()}else{if(D.searchFor){C.text(D.noneFoundMsg).show()}else{C.text(D.emptyMsg).show()}}}return C},setUpListeners:function f(){var C=this;this.once("rendered",function(){C.trigger("rendered:initial",C)});this.setUpPanelListeners()},setUpPanelListeners:function k(){var C=this;this.listenTo(this.panel,{rendered:function(){C.trigger("rendered",C)}},this)},inView:function(C,D){var F=this.$el.offset().left,E=F+this.$el.width();if(E<C){return false}if(F>D){return false}return true},$panel:function e(){return this.$(".history-panel")},render:function A(D){D=(D!==undefined)?(D):("fast");var C=this.model?this.model.toJSON():{};this.$el.html(this.template(C));this.renderPanel(D);this.setUpBehaviors();return this},setUpBehaviors:function v(){},template:function w(C){C=_.extend(C||{},{isCurrentHistory:this.currentHistory});return $(['<div class="panel-controls clear flex-row">',this.controlsLeftTemplate(C),this.controlsRightTemplate(C),"</div>",'<div class="inner flex-row flex-column-container">','<div id="history-',C.id,'" class="history-column history-panel flex-column"></div>',"</div>"].join(""))},renderPanel:function h(C){C=(C!==undefined)?(C):("fast");this.panel.setElement(this.$panel()).render(C);if(this.currentHistory){this.panel.$list().before(this.panel._renderDropTargetHelp())}return this},events:{"click .switch-to.btn":function(){this.model.setAsCurrent()},"click .delete-history":function(){var C=this;this.model._delete().fail(function(F,D,E){alert(_l("Could not delete the history")+":\n"+E)}).done(function(D){C.render()})},"click .undelete-history":function(){var C=this;this.model.undelete().fail(function(F,D,E){alert(_l("Could not undelete the history")+":\n"+E)}).done(function(D){C.render()})},"click .purge-history":function(){if(confirm(_l("This will permanently remove the data. Are you sure?"))){var C=this;this.model.purge().fail(function(F,D,E){alert(_l("Could not purge the history")+":\n"+E)}).done(function(D){C.render()})}},"click .copy-history":"copy"},copy:function s(){g(this.model)},controlsLeftTemplate:_.template(['<div class="pull-left">',"<% if( history.isCurrentHistory ){ %>",'<strong class="current-label">',_l("Current History"),"</strong>","<% } else { %>",'<button class="switch-to btn btn-default">',_l("Switch to"),"</button>","<% } %>","</div>"].join(""),{variable:"history"}),controlsRightTemplate:_.template(['<div class="pull-right">',"<% if( !history.purged ){ %>",'<div class="panel-menu btn-group">','<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">','<span class="caret"></span>',"</button>",'<ul class="dropdown-menu pull-right" role="menu">',"<% if( !history.deleted ){ %>",'<li><a href="javascript:void(0);" class="copy-history">',_l("Copy"),"</a></li>",'<li><a href="javascript:void(0);" class="delete-history">',_l("Delete"),"</a></li>","<% } else /* if is deleted */ { %>",'<li><a href="javascript:void(0);" class="undelete-history">',_l("Undelete"),"</a></li>","<% } %>","</ul>","<% } %>","</div>","</div>"].join(""),{variable:"history"}),toString:function(){return"HistoryPanelColumn("+(this.panel?this.panel:"")+")"}});var m=Backbone.View.extend(z.LoggableMixin).extend({className:"multi-panel-history",initialize:function c(C){C=C||{};this.log(this+".init",C);this.$el.addClass(this.className);if(!C.currentHistoryId){throw new Error(this+" requires a currentHistoryId in the options")}this.currentHistoryId=C.currentHistoryId;this.options={columnWidth:312,borderWidth:1,columnGap:8,headerHeight:29,footerHeight:0,controlsHeight:20};this.order=C.order||"update";this._initSortOrders();this.hdaQueue=new a.NamedAjaxQueue([],false);this.collection=null;this.setCollection(C.histories||[]);this.columnMap={};this.createColumns(C.columnOptions);this.setUpListeners()},_initSortOrders:function(){function C(D,E){return function F(H,G,I){if(H.id===I){return -1}if(G.id===I){return 1}H=D(H);G=D(G);return E.asc?((H===G)?(0):(H>G?1:-1)):((H===G)?(0):(H>G?-1:1))}}this.sortOrders={update:{text:_l("most recent first"),fn:C(function(D){return Date(D.get("update_time"))},{asc:false})},name:{text:_l("name, a to z"),fn:C(function(D){return D.get("name")},{asc:true})},"name-dsc":{text:_l("name, z to a"),fn:C(function(D){return D.get("name")},{asc:false})},size:{text:_l("size, large to small"),fn:C(function(D){return D.get("size")},{asc:false})},"size-dsc":{text:_l("size, small to large"),fn:C(function(D){return D.get("size")},{asc:true})}};return this.sortOrders},setUpListeners:function f(){},setCollection:function y(D){var C=this;C.stopListening(C.collection);C.collection=D;C.sortCollection(C.order,{silent:true});C.setUpCollectionListeners();C.trigger("new-collection",C);return C},setUpCollectionListeners:function(){var C=this,D=C.collection;C.listenTo(D,{add:C.addAsCurrentColumn,"set-as-current":C.setCurrentHistory,"change:deleted":C.handleDeletedHistory,sort:function(){C.renderColumns(0)}})},setCurrentHistory:function p(D){var C=this.columnMap[this.currentHistoryId];if(C){C.currentHistory=false;C.$el.height("")}this.currentHistoryId=D.id;var E=this.columnMap[this.currentHistoryId];E.currentHistory=true;this.sortCollection();multipanel._recalcFirstColumnHeight();return E},handleDeletedHistory:function b(D){if(D.get("deleted")){this.log("handleDeletedHistory",this.collection.includeDeleted,D);var C=this;column=C.columnMap[D.id];if(!column){return}if(column.model.id===this.currentHistoryId){}else{if(!C.collection.includeDeleted){C.removeColumn(column)}}}},sortCollection:function(C,D){if(!(C in this.sortOrders)){C="update"}this.order=C;var G=this.currentHistoryId,F=this.sortOrders[C];this.collection.comparator=function E(I,H){return F.fn(I,H,G)};this.$(".current-order").text(F.text);if(this.$(".more-options").is(":visible")){this.$(".open-more-options.btn").popover("show")}this.collection.sort(D);return this.collection},create:function(C){return this.collection.create({current:true})},createColumns:function r(D){D=D||{};var C=this;this.columnMap={};C.collection.each(function(E,F){var G=C.createColumn(E,D);C.columnMap[E.id]=G})},createColumn:function t(E,C){C=_.extend({},C,{model:E});var D=new B(C);if(E.id===this.currentHistoryId){D.currentHistory=true}this.setUpColumnListeners(D);return D},sortedFilteredColumns:function(C){C=C||this.filters;if(!C||!C.length){return this.sortedColumns()}var D=this;return D.sortedColumns().filter(function(G,F){var E=G.currentHistory||_.every(C.map(function(H){return H.call(G)}));return E})},sortedColumns:function(){var D=this;var C=this.collection.map(function(F,E){return D.columnMap[F.id]});return C},addColumn:function o(E,C){C=C!==undefined?C:true;var D=this.createColumn(E);this.columnMap[E.id]=D;if(C){this.renderColumns()}return D},addAsCurrentColumn:function o(E){var D=this,C=this.addColumn(E,false);this.setCurrentHistory(E);C.once("rendered",function(){D.queueHdaFetch(C)});return C},removeColumn:function x(E,D){D=D!==undefined?D:true;this.log("removeColumn",E);if(!E){return}var F=this,C=this.options.columnWidth+this.options.columnGap;E.$el.fadeOut("fast",function(){if(D){$(this).remove();F.$(".middle").width(F.$(".middle").width()-C);F.checkColumnsInView();F._recalcFirstColumnHeight()}F.stopListening(E.panel);F.stopListening(E);delete F.columnMap[E.model.id];E.remove()})},setUpColumnListeners:function n(C){var D=this;D.listenTo(C,{"in-view":D.queueHdaFetch});D.listenTo(C.panel,{"view:draggable:dragstart":function(H,F,E,G){D._dropData=JSON.parse(H.dataTransfer.getData("text"));D.currentColumnDropTargetOn()},"view:draggable:dragend":function(H,F,E,G){D._dropData=null;D.currentColumnDropTargetOff()},"droptarget:drop":function(G,H,F){var I=D._dropData.filter(function(J){return(_.isObject(J)&&J.id&&J.model_class==="HistoryDatasetAssociation")});D._dropData=null;var E=new a.NamedAjaxQueue();I.forEach(function(J){E.add({name:"copy-"+J.id,fn:function(){return F.model.contents.copy(J.id)}})});E.start();E.done(function(J){F.model.fetch()})}})},columnMapLength:function(){return Object.keys(this.columnMap).length},render:function A(D){D=D!==undefined?D:this.fxSpeed;var C=this;C.log(C+".render");C.$el.html(C.mainTemplate(C));C.renderColumns(D);C.setUpBehaviors();C.trigger("rendered",C);return C},renderColumns:function j(F){F=F!==undefined?F:this.fxSpeed;var E=this,C=E.sortedFilteredColumns();E.$(".middle").width(C.length*(this.options.columnWidth+this.options.columnGap)+this.options.columnGap+16);var D=E.$(".middle");D.empty();C.forEach(function(H,G){H.$el.appendTo(D);H.delegateEvents();E.renderColumn(H,F)});if(this.searchFor&&C.length<=1){}else{E.checkColumnsInView();this._recalcFirstColumnHeight()}return C},renderColumn:function(C,D){D=D!==undefined?D:this.fxSpeed;return C.render(D)},queueHdaFetch:function i(E){if(E.model.contents.length===0&&!E.model.get("empty")){var C={},D=_.values(E.panel.storage.get("expandedIds")).join();if(D){C.dataset_details=D}this.hdaQueue.add({name:E.model.id,fn:function(){var F=E.model.contents.fetch({data:C,silent:true});return F.done(function(G){E.panel.renderItems()})}});if(!this.hdaQueue.running){this.hdaQueue.start()}}},queueHdaFetchDetails:function(C){if((C.model.contents.length===0&&!C.model.get("empty"))||(!C.model.contents.haveDetails())){this.hdaQueue.add({name:C.model.id,fn:function(){var D=C.model.contents.fetch({data:{details:"all"},silent:true});return D.done(function(E){C.panel.renderItems()})}});if(!this.hdaQueue.running){this.hdaQueue.start()}}},renderInfo:function(C){return this.$(".header .header-info").text(C)},events:{"click .done.btn":"close","click .create-new.btn":"create","click #include-deleted":"_clickToggleDeletedHistories","click .order .set-order":"_chooseOrder","click #toggle-deleted":"_clickToggleDeletedDatasets","click #toggle-hidden":"_clickToggleHiddenDatasets"},close:function(D){var C="/";if(Galaxy&&Galaxy.options&&Galaxy.options.root){C=Galaxy.options.root}else{if(galaxy_config&&galaxy_config.root){C=galaxy_config.root}}window.location=C},_clickToggleDeletedHistories:function(C){return this.toggleDeletedHistories($(C.currentTarget).is(":checked"))},toggleDeletedHistories:function(C){if(C){window.location=Galaxy.options.root+"history/view_multiple?include_deleted_histories=True"}else{window.location=Galaxy.options.root+"history/view_multiple"}},_clickToggleDeletedDatasets:function(C){return this.toggleDeletedDatasets($(C.currentTarget).is(":checked"))},toggleDeletedDatasets:function(C){C=C!==undefined?C:false;var D=this;D.sortedFilteredColumns().forEach(function(F,E){_.delay(function(){F.panel.toggleShowDeleted(C,false)},E*200)})},_clickToggleHiddenDatasets:function(C){return this.toggleHiddenDatasets($(C.currentTarget).is(":checked"))},toggleHiddenDatasets:function(C){C=C!==undefined?C:false;var D=this;D.sortedFilteredColumns().forEach(function(F,E){_.delay(function(){F.panel.toggleShowHidden(C,false)},E*200)})},_chooseOrder:function(D){var C=$(D.currentTarget).data("order");this.sortCollection(C)},setUpBehaviors:function(){var D=this;D._moreOptionsPopover();D.$("#search-histories").searchInput({name:"search-histories",placeholder:_l("search histories"),onsearch:function(E){D.searchFor=E;D.filters=[function(){return this.model.matchesAll(D.searchFor)}];D.renderColumns(0)},onclear:function(E){D.searchFor=null;D.filters=[];D.renderColumns(0)}});D.$("#search-datasets").searchInput({name:"search-datasets",placeholder:_l("search all datasets"),onfirstsearch:function(E){D.hdaQueue.clear();D.$("#search-datasets").searchInput("toggle-loading");D.searchFor=E;D.sortedFilteredColumns().forEach(function(F){F.panel.searchItems(E);D.queueHdaFetchDetails(F)});D.hdaQueue.progress(function(F){D.renderInfo([_l("searching"),(F.curr+1),_l("of"),F.total].join(" "))});D.hdaQueue.deferred.done(function(){D.renderInfo("");D.$("#search-datasets").searchInput("toggle-loading")})},onsearch:function(E){D.searchFor=E;D.sortedFilteredColumns().forEach(function(F){F.panel.searchItems(E)})},onclear:function(E){D.searchFor=null;D.sortedFilteredColumns().forEach(function(F){F.panel.clearSearch()})}});$(window).resize(function(){D._recalcFirstColumnHeight()});var C=_.debounce(_.bind(this.checkColumnsInView,this),100);this.$(".middle").parent().scroll(C)},_moreOptionsPopover:function(){return this.$(".open-more-options.btn").popover({container:".header",placement:"bottom",html:true,content:$(this.optionsPopoverTemplate(this))})},_recalcFirstColumnHeight:function(){var C=this.$(".history-column").first(),E=this.$(".middle").height(),D=C.find(".panel-controls").height();C.height(E).find(".inner").height(E-D)},_viewport:function(){var C=this.$(".middle").parent().offset().left;return{left:C,right:C+this.$(".middle").parent().width()}},columnsInView:function(){var C=this._viewport();return this.sortedFilteredColumns().filter(function(D){return D.currentHistory||D.inView(C.left,C.right)})},checkColumnsInView:function(){this.columnsInView().forEach(function(C){C.trigger("in-view",C)})},currentColumnDropTargetOn:function(){var C=this.columnMap[this.currentHistoryId];if(!C){return}C.panel.dataDropped=function(D){};C.panel.dropTargetOn()},currentColumnDropTargetOff:function(){var C=this.columnMap[this.currentHistoryId];if(!C){return}C.panel.dataDropped=l.HistoryPanelEdit.prototype.dataDrop;C.panel.dropTarget=false;C.panel.$(".history-drop-target").remove()},toString:function(){return"MultiPanelColumns("+(this.columns?this.columns.length:0)+")"},mainTemplate:_.template(['<div class="header flex-column-container">','<div class="control-column control-column-left flex-column">','<button class="create-new btn btn-default">',_l("Create new"),"</button> ",'<div id="search-histories" class="search-control"></div>','<div id="search-datasets" class="search-control"></div>','<button class="open-more-options btn btn-default">','<span class="fa fa-ellipsis-h" title="More options"></span>',"</button>","</div>",'<div class="control-column control-column-center flex-column">','<div class="header-info">',"</div>","</div>",'<div class="control-column control-column-right flex-column">','<button class="done btn btn-default">',_l("Done"),"</button>","</div>","</div>",'<div class="outer-middle flex-row flex-row-container">','<div class="middle flex-column-container flex-row"></div>',"</div>",'<div class="footer flex-column-container">',"</div>"].join(""),{variable:"view"}),optionsPopoverTemplate:_.template(['<div class="more-options">','<div class="order btn-group">','<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">',_l("Order histories by")+" ",'<span class="current-order"><%= view.sortOrders[ view.order ].text %></span> ','<span class="caret"></span>',"</button>",'<ul class="dropdown-menu" role="menu">',"<% _.each( view.sortOrders, function( order, key ){ %>",'<li><a href="javascript:void(0);" class="set-order" data-order="<%= key %>">',"<%= order.text %>","</a></li>","<% }); %>","</ul>","</div>",'<div class="checkbox"><label><input id="include-deleted" type="checkbox"','<%= view.collection.includeDeleted? " checked" : "" %>>',_l("Include deleted histories"),"</label></div>","<hr />",'<div class="checkbox"><label><input id="toggle-deleted" type="checkbox">',_l("Include deleted datasets"),"</label></div>",'<div class="checkbox"><label><input id="toggle-hidden" type="checkbox">',_l("Include hidden datasets"),"</label></div>","</div>"].join(""),{variable:"view"})});return{MultiPanelColumns:m}}); \ No newline at end of file diff -r 0f69ba9bccae59f5a8f204573bdd8a4a9749231c -r 586064ce6704b93685f93230dc788aeda0160d41 static/style/blue/base.css --- a/static/style/blue/base.css +++ b/static/style/blue/base.css @@ -2097,6 +2097,34 @@ .annotated-history-panel table.list-items>tbody>tr>td>.list-item{border:0px} .annotated-history-panel .empty-message{margin-top:8px} .current-history-panel .list-item.history-content.current-content{border-left:5px solid #4E5777} +.multi-panel-history{display:flex;flex-direction:column;}.multi-panel-history .flex-row-container,.multi-panel-history .flex-column-container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-width:0px;min-height:0px;-webkit-align-items:stretch;-ms-align-items:stretch;align-items:stretch;-webkit-align-content:stretch;-ms-align-content:stretch;align-content:stretch;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start} +.multi-panel-history .flex-row-container{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column} +.multi-panel-history .flex-column-container{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row} +.multi-panel-history .flex-row,.multi-panel-history .flex-column{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-align-self:auto;-ms-flex-item-align:auto;align-self:auto} +.multi-panel-history .header,.multi-panel-history .footer{width:100%;background-color:lightgrey}.multi-panel-history .header .btn,.multi-panel-history .footer .btn{height:21px} +.multi-panel-history .header{min-height:29px;max-height:29px} +.multi-panel-history .footer{min-height:0;max-height:0} +.multi-panel-history .smaller-btn{height:20px;line-height:normal;font-size:90%;padding-top:0px;padding-bottom:0px} +.multi-panel-history .control-column{margin-top:4px}.multi-panel-history .control-column .btn{height:20px;line-height:normal;font-size:90%;padding-top:0px;padding-bottom:0px} +.multi-panel-history .control-column .search-control{display:inline-block;width:40%}.multi-panel-history .control-column .search-control .search-clear,.multi-panel-history .control-column .search-control .search-loading{margin-top:-22px} +.multi-panel-history .control-column input.search-query{font-size:90%;height:21px;line-height:normal;padding:2px 2px 1px 2px} +.multi-panel-history .control-column .open-more-options{padding:2px 6px 2px 6px;font-size:100%} +.multi-panel-history .control-column .more-options input[type=checkbox]{margin-top:2px} +.multi-panel-history .control-column .header-info{display:inline-block;padding:2px 4px 2px 4px;color:grey} +.multi-panel-history .control-column.control-column-right,.multi-panel-history .control-column.control-column-left{margin-right:8px;margin-left:8px}.multi-panel-history .control-column.control-column-right>*,.multi-panel-history .control-column.control-column-left>*{margin:0px 4px 4px 0px} +.multi-panel-history .control-column.control-column-center{text-align:center;max-height:22px;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-height:22px} +.multi-panel-history .control-column.control-column-right{text-align:right} +.multi-panel-history .outer-middle{overflow:auto} +.multi-panel-history .middle{min-width:100%;margin:0px 0px 0px 0px;background-color:white;padding:8px} +.multi-panel-history .history-column{width:312px;margin:0 8px 0 0}.multi-panel-history .history-column:first-child{position:fixed;z-index:2}.multi-panel-history .history-column:first-child .history-panel{border:1px solid black;box-shadow:4px 4px 4px rgba(96,96,96,0.3)} +.multi-panel-history .history-column:nth-child(2){margin-left:320px} +.multi-panel-history .history-column:last-child{margin-right:0px} +.multi-panel-history .history-column .panel-controls{width:100%;height:24px;border-radius:3px;background-color:white;text-align:center;flex:0 0 auto;-webkit-align-self:auto;-ms-flex-item-align:auto;align-self:auto}.multi-panel-history .history-column .panel-controls .btn{height:20px;line-height:normal;font-size:90%;padding-top:0px;padding-bottom:0px} +.multi-panel-history .history-column .panel-controls .pull-left .btn{margin-right:4px} +.multi-panel-history .history-column .panel-controls .pull-right .btn{margin-left:4px} +.multi-panel-history .history-column .panel-controls .panel-menu{z-index:1}.multi-panel-history .history-column .panel-controls .panel-menu .dropdown-menu a{text-align:left} +.multi-panel-history .history-column .panel-controls .current-label{display:inline-block;color:grey;padding-left:2px;margin-top:2px} +.multi-panel-history .history-column .history-panel{width:100%;border:1px solid #808080;border-radius:3px;background-color:#DFE5F9;overflow:auto} body.historyPage{background:#dfe5f9;color:#000;margin:5px;border:0;padding:0} div.historyLinks{margin:5px 5px} div.historyItem{margin:0 -5px;padding:8px 10px;border-top:solid #bfbfbf 1px;border-right:none;word-wrap:break-word;background:#eee}div.historyItem .state-icon{display:inline-block;vertical-align:middle;width:16px;height:16px;background-position:0 1px;background-repeat:no-repeat} diff -r 0f69ba9bccae59f5a8f204573bdd8a4a9749231c -r 586064ce6704b93685f93230dc788aeda0160d41 static/style/src/less/history.less --- a/static/style/src/less/history.less +++ b/static/style/src/less/history.less @@ -579,6 +579,235 @@ } +// ---------------------------------------------------------------------------- multi-view / multi-panel +.multi-panel-history { + @mph-column_width: 312px; + @mph-border_width: 1px; + @mph-column_gap: 8px; + @mph-header_height: 29px; + @mph-footer_height: 0; + @mph-controls_height: 20px; + + // for some reason, .flex-row-container below won't be applied to multi-panel-history since it's the enclosing node + // re-apply here + display: flex; + flex-direction: column; + + .flex-row-container, + .flex-column-container { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + + /* force ff to squish beyond content: + https://developer.mozilla.org/en-US/Firefox/Releases/34/Site_Compatibility#C... */ + min-width: 0px; + min-height: 0px; + + -webkit-align-items: stretch; + -ms-align-items: stretch; + align-items: stretch; + + -webkit-align-content: stretch; + -ms-align-content: stretch; + align-content: stretch; + + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + } + .flex-row-container { + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + } + .flex-column-container { + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + } + .flex-row, + .flex-column { + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + + -webkit-align-self: auto; + -ms-flex-item-align: auto; + align-self: auto; + } + + /* ---------------------- header & footer */ + .header, + .footer { + width: 100%; + background-color: lightgrey; + .btn { + height: 21px; + } + } + .header { + min-height: @mph-header_height; + max-height: @mph-header_height; + } + .footer { + min-height: @mph-footer_height; + max-height: @mph-footer_height; + } + + // make the buttons in the header/footers and the panel controls slightly smaller + .smaller-btn { + height: 20px; + line-height: normal; + font-size: 90%; + padding-top: 0px; + padding-bottom: 0px; + } + + // the header/footers controls + .control-column { + margin-top: 4px; + + .btn { + .smaller-btn; + } + .search-control { + display: inline-block; + width: 40%; + + .search-clear, + .search-loading { + margin-top: -22px; + } + } + input.search-query { + font-size: 90%; + height: 21px; + line-height: normal; + padding: 2px 2px 1px 2px; + } + .open-more-options { + padding: 2px 6px 2px 6px; + font-size: 100%; + } + .more-options input[type=checkbox] { + margin-top: 2px; + } + .header-info { + display: inline-block; + padding: 2px 4px 2px 4px; + color: grey; + } + + &.control-column-right, + &.control-column-left { + margin-right: 8px; + margin-left: 8px; + & > * { + margin: 0px 4px 4px 0px; + } + } + &.control-column-center { + text-align: center; + max-height: 22px; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + + /* truncate */ + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + max-height: 22px; + } + &.control-column-right { + text-align: right; + } + } + + /* ---------------------- middle */ + .outer-middle { + overflow: auto; + } + .middle { + min-width: 100%; + margin: 0px 0px 0px 0px; + background-color: white; + padding: @mph-column_gap; + } + + .history-column { + width: @mph-column_width; + margin: 0px @mph-column_gap 0px 0px; + + // current history + &:first-child { + position: fixed; + z-index : 2; + + // visually differentiate the current history + .history-panel { + border: 1px solid black; + box-shadow: 4px 4px 4px rgba( 96, 96, 96, 0.3 ); + } + } + &:nth-child(2) { + // push the column after the current away from the left (since it's fixed) + margin-left: ( @mph-column_width + @mph-column_gap ); + } + &:last-child { + margin-right: 0px; + } + + .panel-controls { + width: 100%; + height: ( @mph-controls_height + 4 ); + border-radius: 3px; + background-color: white; + text-align: center; + + flex: 0 0 auto; + + -webkit-align-self: auto; + -ms-flex-item-align: auto; + align-self: auto; + + .btn { + .smaller-btn; + } + .pull-left .btn { + margin-right: 4px; + } + .pull-right .btn { + margin-left: 4px; + } + .panel-menu { + z-index: 1; + .dropdown-menu a { + text-align: left; + } + } + .current-label { + display: inline-block; + color: grey; + padding-left: 2px; + margin-top: 2px; + } + } + .history-panel { + width: 100%; + + border: @mph-border_width solid grey; + border-radius: 3px; + background-color: #DFE5F9; + + overflow: auto; + } + } +} + + // ---------------------------------------------------------------------------- older styles //TODO: these may still apply in mobile display, workflow stuff body.historyPage { diff -r 0f69ba9bccae59f5a8f204573bdd8a4a9749231c -r 586064ce6704b93685f93230dc788aeda0160d41 templates/webapps/galaxy/history/view_multiple.mako --- a/templates/webapps/galaxy/history/view_multiple.mako +++ b/templates/webapps/galaxy/history/view_multiple.mako @@ -6,250 +6,15 @@ </%def> ## ---------------------------------------------------------------------------- -<%! - column_width = 312 - border_width = 1 - column_gap = 8 - - header_height = 29 - footer_height = 0 - - controls_height = 20 -%> - -## ---------------------------------------------------------------------------- <%def name="stylesheets()"> ${parent.stylesheets()} <style type="text/css"> + /* reset */ html, body { margin: 0px; padding: 0px; } - - .flex-row-container, - .flex-column-container { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - - /* force ff to squish beyond content: - https://developer.mozilla.org/en-US/Firefox/Releases/34/Site_Compatibility#C... */ - min-width: 0px; - min-height: 0px; - - -webkit-align-items: stretch; - -ms-align-items: stretch; - align-items: stretch; - - -webkit-align-content: stretch; - -ms-align-content: stretch; - align-content: stretch; - - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - } - .flex-row-container { - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - } - .flex-column-container { - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - } - .flex-row, - .flex-column { - -webkit-flex: 1 1 auto; - -ms-flex: 1 1 auto; - flex: 1 1 auto; - - -webkit-align-self: auto; - -ms-flex-item-align: auto; - align-self: auto; - } - .flex-row { - } - .flex-column { - } - - /* ---------------------- header & footer */ - .header, .footer { - width: 100%; - } - - /* ---------------------- header */ - .header { - background-color: lightgrey; - min-height: ${header_height}px; - max-height: ${header_height}px; - } - .control-column { - margin-top: 4px; - } - - .control-column-right, - .control-column-left { - margin-right: 8px; - margin-left: 8px; - /*background-color: green;*/ - } - - .control-column-left > * { - margin: 0px 4px 4px 0px; - } - .more-options input[type=checkbox] { - margin-top: 3px; - } - - .control-column-center { - text-align: center; - max-height: 22px; - -webkit-flex: 0 1 auto; - -ms-flex: 0 1 auto; - flex: 0 1 auto; - - /* truncate */ - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - max-height: 22px; - } - .header-info { - display: inline-block; - padding: 2px 4px 2px 4px; - color: grey; - - } - - .control-column-right { - text-align: right; - } - .control-column-right > * { - margin: 0px 0px 4px 4px; - } - - .search-control { - display: inline-block; - width: 40%; - } - .search-control .search-clear, - .search-control .search-loading { - margin-top: -22px; - } - .footer input.search-query, - .header input.search-query { - font-size: 90%; - height: 21px; - line-height: normal; - padding: 2px 2px 1px 2px; - } - - .open-more-options { - padding: 2px 6px 2px 6px; - font-size: 150%; - } - - /* ---------------------- middle */ - .outer-middle { - overflow: auto; - } - .middle { - min-width: 100%; - margin: 0px 0px 0px 0px; - background-color: white; - padding: ${column_gap}px; - } - - .history-column { - width: ${column_width}px; - margin: 0px ${column_gap}px 0px 0px; - } - .history-column:last-child { - margin-right: 0px; - } - - .panel-controls { - width: 100%; - height: ${controls_height + 4}px; - border-radius: 3px; - background-color: white; - text-align: center; - - flex: 0 0 auto; - - -webkit-align-self: auto; - -ms-flex-item-align: auto; - align-self: auto; - } - .header .btn, - .footer .btn, - .panel-controls .btn { - height: 20px; - /*line-height: ${controls_height - 2}px;*/ - line-height: normal; - font-size: 90%; - padding-top: 0px; - padding-bottom: 0px; - } - .header .btn { - height: 21px; - } - .panel-controls .pull-left .btn { - margin-right: 4px; - } - .panel-controls .pull-right .btn { - margin-left: 4px; - } - .panel-controls .panel-menu { - z-index: 1; - } - .panel-controls .panel-menu .dropdown-menu a { - text-align: left; - } - - - /* ---------------------- footer */ - .footer { - min-height: ${footer_height}px; - max-height: ${footer_height}px; - background-color: lightgrey; - } - - /* ---------------------- columns */ - .history-panel { - width: 100%; - - border: ${border_width}px solid grey; - border-radius: 3px; - background-color: #DFE5F9; - - overflow: auto; - } - - .history-column:first-child { - position: fixed; - z-index : 2; - } - .history-column:first-child .history-panel { - border: 1px solid black; - box-shadow: 4px 4px 4px rgba( 96, 96, 96, 0.3 ); - } - - .history-column:nth-child(2) { - margin-left: ${( column_width + column_gap )}px; - } - - .current-label { - display: inline-block; - color: grey; - padding-left: 2px; - margin-top: 2px; - } </style> - </%def> @@ -264,7 +29,6 @@ 'mvc/history/multi-panel' ], function( HISTORY_MODEL, MULTI_PANEL ){ $(function(){ - $( '#center' ).addClass( 'flex-row-container' ); window.historyJSONArray = bootstrapped.historyJSONArray; var historyModels = []; @@ -277,7 +41,7 @@ includeDeleted : bootstrapped.includingDeleted }); multipanel = new MULTI_PANEL.MultiPanelColumns({ - el : $( '#center' ), + el : $( '#center' ).get(0), histories : histories, //historiesJSON : historiesJSON, order : bootstrapped.order, 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