opensource/galaxy
3
0
Fork 0
mirror of https://github.com/galaxyproject/galaxy.git synced 2026-10-24 12:13:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

History panel, current: highlight focused/active/current item, set active item on 'display,edit,rerun,info/params,visualize,report-error', cache scroll position in sessionstorage and re-render at same, allow list-panel.scrollTo to be animated and given a speed

Browse Source
This commit is contained in:
Carl Eberhard
2014-09-18 12:33:52 -04:00
parent 422ab1220f
commit 9754576eb7
14 changed files with 250 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/galaxy/scripts/mvc/dataset/dataset-li-edit.js
+18 -4
View File
@@ -257,12 +257,26 @@ var DatasetListItemEdit = _super.extend(
// ......................................................................... events
/** event map */
events : _.extend( _.clone( _super.prototype.events ), {
'click .undelete-link' : function( ev ){ this.model.undelete(); return false; },
'click .purge-link' : '_confirmPurge'
'click .undelete-link' : '_clickUndeleteLink',
'click .purge-link' : '_clickPurgeLink',
'click .edit-btn' : function( ev ){ this.trigger( 'edit', this, ev ); },
'click .delete-btn' : function( ev ){ this.trigger( 'delete', this, ev ); },
'click .rerun-btn' : function( ev ){ this.trigger( 'rerun', this, ev ); },
'click .report-err-btn' : function( ev ){ this.trigger( 'report-err', this, ev ); },
'click .visualization-btn' : function( ev ){ this.trigger( 'visualize', this, ev ); },
'click .dbkey a' : function( ev ){ this.trigger( 'edit', this, ev ); }
}),
/** listener for item purge */
_confirmPurge : function _confirmPurge( ev ){
/** listener for item undelete (in the messages section) */
_clickUndeleteLink : function( ev ){
this.model.undelete();
return false;
},
/** listener for item purge (in the messages section) */
_clickPurgeLink : function( ev ){
//TODO: confirm dialog
this.model.purge();
return false;
client/galaxy/scripts/mvc/dataset/dataset-li.js
+7
View File
@@ -313,6 +313,13 @@ var DatasetListItemView = _super.extend(
].join( '\n' ));
},
// ......................................................................... misc
events : _.extend( _.clone( _super.prototype.events ), {
'click .display-btn' : function( ev ){ this.trigger( 'display', this, ev ); },
'click .params-btn' : function( ev ){ this.trigger( 'params', this, ev ); },
'click .download-btn' : function( ev ){ this.trigger( 'download', this, ev ); }
}),
// ......................................................................... misc
/** String representation */
toString : function(){
client/galaxy/scripts/mvc/history/history-panel-edit-current.js
+62 -2
View File
@@ -14,7 +14,13 @@ var HistoryPanelPrefs = BASE_MVC.SessionStorageModel.extend(
/** should the tags editor be shown or hidden initially? */
tagsEditorShown : false,
/** should the annotation editor be shown or hidden initially? */
annotationEditorShown : false
annotationEditorShown : false,
///** what is the currently focused content (dataset or collection) in the current history?
// * (the history panel will highlight and scroll to the focused content view)
// */
//focusedContentId : null
/** Current scroll position */
scrollPosition : 0
},
toString : function(){
return 'HistoryPanelPrefs(' + JSON.stringify( this.toJSON() ) + ')';
@@ -70,6 +76,20 @@ var CurrentHistoryPanel = _super.extend(
/** sub-views that will overlay this panel (collections) */
this.panelStack = [];
/** id of currently focused content */
this.currentContentId = attributes.currentContentId || null;
//NOTE: purposely not sent to localstorage since panel recreation roughly lines up with a reset of this value
},
/** Override to cache the current scroll position with a listener */
_setUpListeners : function(){
_super.prototype._setUpListeners.call( this );
var panel = this;
this.$scrollContainer().on( 'scroll', function( ev ){
panel.preferences.set( 'scrollPosition', $( this ).scrollTop() );
});
},
// ------------------------------------------------------------------------ loading history/item models
@@ -243,11 +263,34 @@ var CurrentHistoryPanel = _super.extend(
});
},
/** Override to scroll to cached position (in prefs) after swapping */
_swapNewRender : function( $newRender ){
_super.prototype._swapNewRender.call( this, $newRender );
var panel = this;
_.delay( function(){
var pos = panel.preferences.get( 'scrollPosition' );
if( pos ){
panel.scrollTo( pos );
}
}, 10 );
//TODO: is this enough of a delay on larger histories?
return this;
},
// ------------------------------------------------------------------------ sub-views
// reverse HID order
/** Override to reverse order of views - newest contents on top */
/** Override to reverse order of views - newest contents on top
* and add the current-content highlight class to currentContentId's view
*/
_attachItems : function( $whereTo ){
var panel = this;
this.$list( $whereTo ).append( this.views.reverse().map( function( view ){
// add current content
if( panel.currentContentId && view.model.id === panel.currentContentId ){
view.$el.addClass( 'current-content' );
}
return view.$el;
}));
return this;
@@ -298,9 +341,26 @@ var CurrentHistoryPanel = _super.extend(
view.on( 'collapsed:drilldown', function( v, drilldown ){
this._collapseDrilldownPanel( drilldown );
}, this );
// when content is manipulated, make it the current-content
view.on( 'display edit params rerun report-err visualize', function( v, ev ){
this.setCurrentContent( v );
}, this );
return this;
},
/** display 'current content': add a visible highlight and store the id of a content item */
setCurrentContent : function( view ){
this.$( '.history-content.current-content' ).removeClass( 'current-content' );
if( view ){
view.$el.addClass( 'current-content' );
this.currentContentId = view.model.id;
} else {
this.currentContentId = null;
}
},
/** Handle drill down by hiding this panels list and controls and showing the sub-panel */
_expandDrilldownPanel : function( drilldown ){
this.panelStack.push( drilldown );
client/galaxy/scripts/mvc/list/list-panel.js
+11 -11
View File
@@ -679,28 +679,28 @@ var ListPanel = Backbone.View.extend( BASE_MVC.LoggableMixin ).extend(
},
/** set the current scroll position of the panel in its parent */
scrollTo : function( pos ){
this.$scrollContainer().scrollTop( pos );
scrollTo : function( pos, speed ){
speed = speed || 0;
this.$scrollContainer().animate({ scrollTop: pos }, speed );
return this;
},
/** Scrolls the panel to the top. */
scrollToTop : function(){
this.$scrollContainer().scrollTop( 0 );
return this;
scrollToTop : function( speed ){
return this.scrollTo( 0, speed );
},
/** */
scrollToItem : function( view ){
scrollToItem : function( view, speed ){
if( !view ){ return this; }
var itemTop = view.$el.offset().top;
this.$scrollContainer().scrollTop( itemTop );
return this;
//var itemTop = view.$el.offset().top;
var itemTop = view.$el.position().top;
return this.scrollTo( itemTop, speed );
},
/** Scrolls the panel to show the content with the given id. */
scrollToId : function( id ){
return this.scrollToItem( this.viewFromModelId( id ) );
scrollToId : function( id, speed ){
return this.scrollToItem( this.viewFromModelId( id ), speed );
},
// ------------------------------------------------------------------------ panel events
static/scripts/mvc/dataset/dataset-li-edit.js
+18 -4
View File
@@ -257,12 +257,26 @@ var DatasetListItemEdit = _super.extend(
// ......................................................................... events
/** event map */
events : _.extend( _.clone( _super.prototype.events ), {
'click .undelete-link' : function( ev ){ this.model.undelete(); return false; },
'click .purge-link' : '_confirmPurge'
'click .undelete-link' : '_clickUndeleteLink',
'click .purge-link' : '_clickPurgeLink',
'click .edit-btn' : function( ev ){ this.trigger( 'edit', this, ev ); },
'click .delete-btn' : function( ev ){ this.trigger( 'delete', this, ev ); },
'click .rerun-btn' : function( ev ){ this.trigger( 'rerun', this, ev ); },
'click .report-err-btn' : function( ev ){ this.trigger( 'report-err', this, ev ); },
'click .visualization-btn' : function( ev ){ this.trigger( 'visualize', this, ev ); },
'click .dbkey a' : function( ev ){ this.trigger( 'edit', this, ev ); }
}),
/** listener for item purge */
_confirmPurge : function _confirmPurge( ev ){
/** listener for item undelete (in the messages section) */
_clickUndeleteLink : function( ev ){
this.model.undelete();
return false;
},
/** listener for item purge (in the messages section) */
_clickPurgeLink : function( ev ){
//TODO: confirm dialog
this.model.purge();
return false;
static/scripts/mvc/dataset/dataset-li.js
+7
View File
@@ -313,6 +313,13 @@ var DatasetListItemView = _super.extend(
].join( '\n' ));
},
// ......................................................................... misc
events : _.extend( _.clone( _super.prototype.events ), {
'click .display-btn' : function( ev ){ this.trigger( 'display', this, ev ); },
'click .params-btn' : function( ev ){ this.trigger( 'params', this, ev ); },
'click .download-btn' : function( ev ){ this.trigger( 'download', this, ev ); }
}),
// ......................................................................... misc
/** String representation */
toString : function(){
static/scripts/mvc/history/history-panel-edit-current.js
+62 -2
View File
@@ -14,7 +14,13 @@ var HistoryPanelPrefs = BASE_MVC.SessionStorageModel.extend(
/** should the tags editor be shown or hidden initially? */
tagsEditorShown : false,
/** should the annotation editor be shown or hidden initially? */
annotationEditorShown : false
annotationEditorShown : false,
///** what is the currently focused content (dataset or collection) in the current history?
// * (the history panel will highlight and scroll to the focused content view)
// */
//focusedContentId : null
/** Current scroll position */
scrollPosition : 0
},
toString : function(){
return 'HistoryPanelPrefs(' + JSON.stringify( this.toJSON() ) + ')';
@@ -70,6 +76,20 @@ var CurrentHistoryPanel = _super.extend(
/** sub-views that will overlay this panel (collections) */
this.panelStack = [];
/** id of currently focused content */
this.currentContentId = attributes.currentContentId || null;
//NOTE: purposely not sent to localstorage since panel recreation roughly lines up with a reset of this value
},
/** Override to cache the current scroll position with a listener */
_setUpListeners : function(){
_super.prototype._setUpListeners.call( this );
var panel = this;
this.$scrollContainer().on( 'scroll', function( ev ){
panel.preferences.set( 'scrollPosition', $( this ).scrollTop() );
});
},
// ------------------------------------------------------------------------ loading history/item models
@@ -243,11 +263,34 @@ var CurrentHistoryPanel = _super.extend(
});
},
/** Override to scroll to cached position (in prefs) after swapping */
_swapNewRender : function( $newRender ){
_super.prototype._swapNewRender.call( this, $newRender );
var panel = this;
_.delay( function(){
var pos = panel.preferences.get( 'scrollPosition' );
if( pos ){
panel.scrollTo( pos );
}
}, 10 );
//TODO: is this enough of a delay on larger histories?
return this;
},
// ------------------------------------------------------------------------ sub-views
// reverse HID order
/** Override to reverse order of views - newest contents on top */
/** Override to reverse order of views - newest contents on top
* and add the current-content highlight class to currentContentId's view
*/
_attachItems : function( $whereTo ){
var panel = this;
this.$list( $whereTo ).append( this.views.reverse().map( function( view ){
// add current content
if( panel.currentContentId && view.model.id === panel.currentContentId ){
view.$el.addClass( 'current-content' );
}
return view.$el;
}));
return this;
@@ -298,9 +341,26 @@ var CurrentHistoryPanel = _super.extend(
view.on( 'collapsed:drilldown', function( v, drilldown ){
this._collapseDrilldownPanel( drilldown );
}, this );
// when content is manipulated, make it the current-content
view.on( 'display edit params rerun report-err visualize', function( v, ev ){
this.setCurrentContent( v );
}, this );
return this;
},
/** display 'current content': add a visible highlight and store the id of a content item */
setCurrentContent : function( view ){
this.$( '.history-content.current-content' ).removeClass( 'current-content' );
if( view ){
view.$el.addClass( 'current-content' );
this.currentContentId = view.model.id;
} else {
this.currentContentId = null;
}
},
/** Handle drill down by hiding this panels list and controls and showing the sub-panel */
_expandDrilldownPanel : function( drilldown ){
this.panelStack.push( drilldown );
static/scripts/mvc/list/list-panel.js
+11 -11
View File
@@ -679,28 +679,28 @@ var ListPanel = Backbone.View.extend( BASE_MVC.LoggableMixin ).extend(
},
/** set the current scroll position of the panel in its parent */
scrollTo : function( pos ){
this.$scrollContainer().scrollTop( pos );
scrollTo : function( pos, speed ){
speed = speed || 0;
this.$scrollContainer().animate({ scrollTop: pos }, speed );
return this;
},
/** Scrolls the panel to the top. */
scrollToTop : function(){
this.$scrollContainer().scrollTop( 0 );
return this;
scrollToTop : function( speed ){
return this.scrollTo( 0, speed );
},
/** */
scrollToItem : function( view ){
scrollToItem : function( view, speed ){
if( !view ){ return this; }
var itemTop = view.$el.offset().top;
this.$scrollContainer().scrollTop( itemTop );
return this;
//var itemTop = view.$el.offset().top;
var itemTop = view.$el.position().top;
return this.scrollTo( itemTop, speed );
},
/** Scrolls the panel to show the content with the given id. */
scrollToId : function( id ){
return this.scrollToItem( this.viewFromModelId( id ) );
scrollToId : function( id, speed ){
return this.scrollToItem( this.viewFromModelId( id ), speed );
},
// ------------------------------------------------------------------------ panel events
static/scripts/packed/mvc/dataset/dataset-li-edit.js
+1 -1
View File
File diff suppressed because one or more lines are too long
static/scripts/packed/mvc/dataset/dataset-li.js
+1 -1
View File
File diff suppressed because one or more lines are too long
static/scripts/packed/mvc/history/history-panel-edit-current.js
+1 -1
View File
File diff suppressed because one or more lines are too long
static/scripts/packed/mvc/list/list-panel.js
+1 -1
View File
File diff suppressed because one or more lines are too long
static/style/blue/base.css
+5 -3
View File
@@ -1954,6 +1954,9 @@ div.permissionContainer{padding-left:20px}
.history-panel .controls .list-actions .list-action-popup-btn{float:right}
.history-panel .list-item.history-content{border-width:1px 0px 0px 0px}.history-panel .list-item.history-content:last-child{border-width:1px 0px 1px 0px}
.history-panel .empty-message{margin:0px 10px 0px 10px}
.history-panel .dataset-collection .subtitle{margin-top:2px;font-size:90%;color:#777}
.history-panel .dataset-collection-panel .controls{padding:0px}
.history-panel .dataset-collection-panel .list-items{margin-top:0px}
.annotated-history-panel .controls{margin:0px}.annotated-history-panel .controls .name{font-size:150%;margin-bottom:4px}
.annotated-history-panel .controls .subtitle{color:black}.annotated-history-panel .controls .subtitle:not(:empty){margin:0px 0px 0px 4px}
.annotated-history-panel .controls .messages:not(:empty){margin-top:16px}
@@ -1965,9 +1968,8 @@ div.permissionContainer{padding-left:20px}
.annotated-history-panel table.list-items>tbody>tr>td:nth-child(2){padding:8px 16px 8px 16px;white-space:pre-wrap}
.annotated-history-panel table.list-items>tbody>tr>td>.list-item{border:0px}
.annotated-history-panel .empty-message{margin-top:8px}
.history-panel .dataset-collection .subtitle{margin-top:2px;font-size:90%;color:#777}
.history-panel .dataset-collection-panel .controls{padding:0px}
.history-panel .dataset-collection-panel .list-items{margin-top:0px}
.current-history-panel .list-item.history-content.current-content{border:2px solid black;border-bottom-width:2px}.current-history-panel .list-item.history-content.current-content .title-bar{padding:5px 8px 6px 6px}
.current-history-panel .list-item.history-content.current-content .details{padding:0px 8px 5px 6px}
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}
static/style/src/less/history.less
+45 -14
View File
@@ -488,6 +488,27 @@
}
}
// ---------------------------------------------------------------------------- collections nested in histories
.history-panel {
.dataset-collection {
.subtitle {
margin-top: 2px;
font-size: 90%;
color: #777;
}
}
.dataset-collection-panel {
.controls {
padding: 0px;
}
.list-items {
margin-top: 0px;
}
}
}
// ---------------------------------------------------------------------------- annotated-history-panel
.annotated-history-panel {
.controls {
@@ -566,21 +587,31 @@
}
// ---------------------------------------------------------------------------- collections nested in histories
.history-panel {
.dataset-collection {
.subtitle {
margin-top: 2px;
font-size: 90%;
color: #777;
// ---------------------------------------------------------------------------- current-history-panel
.current-history-panel {
.list-item.history-content.current-content {
//border-top: 2px solid black;
//border-right: 1px solid black;
//border-bottom: 2px solid black;
//border-left: 1px solid black;
//.title-bar {
// border-color: black;
// background: black;
// color: white;
//}
//position: relative;
//margin-left: -24px;
//z-index: 1000;
border: 2px solid black;
border-bottom-width: 2px;
.title-bar {
padding: 5px 8px 6px 6px;
}
}
.dataset-collection-panel {
.controls {
padding: 0px;
}
.list-items {
margin-top: 0px;
.details {
padding: 0px 8px 5px 6px;
}
}
}