opensource/galaxy
3
0
Fork 0
mirror of https://github.com/galaxyproject/galaxy.git synced 2026-09-24 16:30:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

History panel (editable and current): show contents count and links to toggle show deleted/hidden in subtitle; minor style fixes

Browse Source
This commit is contained in:
Carl Eberhard
2014-09-29 14:45:29 -04:00
parent 1193fb177a
commit a20a83eac4
16 changed files with 141 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/galaxy/scripts/mvc/history/history-panel-edit-current.js
+8 -5
View File
@@ -398,14 +398,17 @@ var CurrentHistoryPanel = _super.extend(
//TODO: move show_deleted/hidden into panel from opt menu and remove this
/** add listeners to an external options menu (templates/webapps/galaxy/root/index.mako) */
connectToOptionsMenu : function( optionsMenu ){
var panel = this;
if( !optionsMenu ){
return this;
return panel;
}
// set a visible indication in the popupmenu for show_hidden/deleted based on the currHistoryPanel's settings
this.on( 'new-storage', function( storage, panel ){
if( optionsMenu && storage ){
optionsMenu.findItemByHtml( _l( 'Include Deleted Datasets' ) ).checked = storage.get( 'show_deleted' );
optionsMenu.findItemByHtml( _l( 'Include Hidden Datasets' ) ).checked = storage.get( 'show_hidden' );
this.on( 'new-storage show-deleted show-hidden', function(){
//TODO: global
var menu = ( Galaxy && Galaxy.historyOptionsMenu )? Galaxy.historyOptionsMenu : undefined;
if( menu ){
menu.findItemByHtml( _l( 'Include Deleted Datasets' ) ).checked = panel.showDeleted;
menu.findItemByHtml( _l( 'Include Hidden Datasets' ) ).checked = panel.showHidden;
}
});
return this;
client/galaxy/scripts/mvc/history/history-panel-edit.js
+41 -1
View File
@@ -115,6 +115,42 @@ var HistoryPanelEdit = _super.extend(
return $newRender;
},
/** override to render counts when the items are rendered */
renderItems : function( $whereTo ){
var views = _super.prototype.renderItems.call( this, $whereTo );
this._renderCounts( $whereTo );
return views;
},
/** override to show counts, what's deleted/hidden, and links to toggle those */
_renderCounts : function( $whereTo ){
//TODO: too complicated
function toggleLink( _class, text ){
return [ '<a class="', _class, '" href="javascript:void(0);">', text, '</a>' ].join( '' );
}
$whereTo = $whereTo || this.$el;
var deleted = this.collection.where({ deleted: true }),
hidden = this.collection.where({ visible: false }),
msgs = [];
if( this.views.length ){
msgs.push( [ this.views.length, _l( 'shown' ) ].join( ' ' ) );
}
if( deleted.length ){
msgs.push( ( !this.showDeleted )?
([ deleted.length, toggleLink( 'toggle-deleted-link', _l( 'deleted' ) ) ].join( ' ' ))
:( toggleLink( 'toggle-deleted-link', _l( 'hide deleted' ) ) )
);
}
if( hidden.length ){
msgs.push( ( !this.showHidden )?
([ hidden.length, toggleLink( 'toggle-hidden-link', _l( 'hidden' ) ) ].join( ' ' ))
:( toggleLink( 'toggle-hidden-link', _l( 'hide hidden' ) ) )
);
}
return $whereTo.find( '.subtitle' ).html( msgs.join( ', ' ) );
},
/** render the tags sub-view controller */
_renderTags : function( $where ){
var panel = this;
@@ -318,6 +354,7 @@ var HistoryPanelEdit = _super.extend(
* @param {Model} the item model to check
*/
_handleHdaDeletionChange : function( itemModel ){
this._renderCounts();
if( itemModel.get( 'deleted' ) && !this.showDeleted ){
this.removeItemView( itemModel );
}
@@ -327,6 +364,7 @@ var HistoryPanelEdit = _super.extend(
* @param {Model} the item model to check
*/
_handleHdaVisibleChange : function( itemModel ){
this._renderCounts();
if( itemModel.hidden() && !this.storage.showHidden ){
this.removeItemView( itemModel );
}
@@ -355,7 +393,9 @@ var HistoryPanelEdit = _super.extend(
// ------------------------------------------------------------------------ panel events
/** event map */
events : _.extend( _.clone( _super.prototype.events ), {
'click .show-selectors-btn' : 'toggleSelectors'
'click .show-selectors-btn' : 'toggleSelectors',
'click .toggle-deleted-link' : function( ev ){ this.toggleShowDeleted(); },
'click .toggle-hidden-link' : function( ev ){ this.toggleShowHidden(); }
}),
/** Update the history size display (curr. upper right of panel).
client/galaxy/scripts/mvc/history/history-panel.js
+3 -3
View File
@@ -395,6 +395,7 @@ var HistoryPanel = _super.extend(
if( store ){
this.storage.set( 'show_deleted', show );
}
this.trigger( 'show-hidden', show );
//TODO:?? to events on storage('change:show_deleted')
this.renderItems();
return this.showDeleted;
@@ -412,6 +413,7 @@ var HistoryPanel = _super.extend(
if( store ){
this.storage.set( 'show_hidden', show );
}
this.trigger( 'show-hidden', show );
//TODO:?? to events on storage('change:show_deleted')
this.renderItems();
return this.showHidden;
@@ -606,9 +608,7 @@ HistoryPanel.prototype.templates = (function(){
'<div class="title">',
'<div class="name"><%= history.name %></div>',
'</div>',
'<div class="subtitle">',
//'<%= view.collection.length %>', _l( ' items' ),
'</div>',
'<div class="subtitle"></div>',
'<div class="history-size"><%= history.nice_size %></div>',
'<div class="actions"></div>',
client/galaxy/scripts/mvc/list/list-panel.js
+1 -1
View File
@@ -484,13 +484,13 @@ var ListPanel = Backbone.View.extend( BASE_MVC.LoggableMixin ).extend(
var panel = this,
view = panel.viewFromModel( model );
if( !view ){ return undefined; }
panel.views = _.without( panel.views, view );
// potentially show the empty message if no views left
// use anonymous queue here - since remove can happen multiple times
$({}).queue( 'fx', [
function( next ){ view.$el.fadeOut( panel.fxSpeed, next ); },
function( next ){
panel.views = _.without( panel.views, view );
view.remove();
if( !panel.views.length ){
panel._renderEmptyMessage().fadeIn( panel.fxSpeed, next );
static/scripts/mvc/history/history-panel-edit-current.js
+8 -5
View File
@@ -398,14 +398,17 @@ var CurrentHistoryPanel = _super.extend(
//TODO: move show_deleted/hidden into panel from opt menu and remove this
/** add listeners to an external options menu (templates/webapps/galaxy/root/index.mako) */
connectToOptionsMenu : function( optionsMenu ){
var panel = this;
if( !optionsMenu ){
return this;
return panel;
}
// set a visible indication in the popupmenu for show_hidden/deleted based on the currHistoryPanel's settings
this.on( 'new-storage', function( storage, panel ){
if( optionsMenu && storage ){
optionsMenu.findItemByHtml( _l( 'Include Deleted Datasets' ) ).checked = storage.get( 'show_deleted' );
optionsMenu.findItemByHtml( _l( 'Include Hidden Datasets' ) ).checked = storage.get( 'show_hidden' );
this.on( 'new-storage show-deleted show-hidden', function(){
//TODO: global
var menu = ( Galaxy && Galaxy.historyOptionsMenu )? Galaxy.historyOptionsMenu : undefined;
if( menu ){
menu.findItemByHtml( _l( 'Include Deleted Datasets' ) ).checked = panel.showDeleted;
menu.findItemByHtml( _l( 'Include Hidden Datasets' ) ).checked = panel.showHidden;
}
});
return this;
static/scripts/mvc/history/history-panel-edit.js
+41 -1
View File
@@ -115,6 +115,42 @@ var HistoryPanelEdit = _super.extend(
return $newRender;
},
/** override to render counts when the items are rendered */
renderItems : function( $whereTo ){
var views = _super.prototype.renderItems.call( this, $whereTo );
this._renderCounts( $whereTo );
return views;
},
/** override to show counts, what's deleted/hidden, and links to toggle those */
_renderCounts : function( $whereTo ){
//TODO: too complicated
function toggleLink( _class, text ){
return [ '<a class="', _class, '" href="javascript:void(0);">', text, '</a>' ].join( '' );
}
$whereTo = $whereTo || this.$el;
var deleted = this.collection.where({ deleted: true }),
hidden = this.collection.where({ visible: false }),
msgs = [];
if( this.views.length ){
msgs.push( [ this.views.length, _l( 'shown' ) ].join( ' ' ) );
}
if( deleted.length ){
msgs.push( ( !this.showDeleted )?
([ deleted.length, toggleLink( 'toggle-deleted-link', _l( 'deleted' ) ) ].join( ' ' ))
:( toggleLink( 'toggle-deleted-link', _l( 'hide deleted' ) ) )
);
}
if( hidden.length ){
msgs.push( ( !this.showHidden )?
([ hidden.length, toggleLink( 'toggle-hidden-link', _l( 'hidden' ) ) ].join( ' ' ))
:( toggleLink( 'toggle-hidden-link', _l( 'hide hidden' ) ) )
);
}
return $whereTo.find( '.subtitle' ).html( msgs.join( ', ' ) );
},
/** render the tags sub-view controller */
_renderTags : function( $where ){
var panel = this;
@@ -318,6 +354,7 @@ var HistoryPanelEdit = _super.extend(
* @param {Model} the item model to check
*/
_handleHdaDeletionChange : function( itemModel ){
this._renderCounts();
if( itemModel.get( 'deleted' ) && !this.showDeleted ){
this.removeItemView( itemModel );
}
@@ -327,6 +364,7 @@ var HistoryPanelEdit = _super.extend(
* @param {Model} the item model to check
*/
_handleHdaVisibleChange : function( itemModel ){
this._renderCounts();
if( itemModel.hidden() && !this.storage.showHidden ){
this.removeItemView( itemModel );
}
@@ -355,7 +393,9 @@ var HistoryPanelEdit = _super.extend(
// ------------------------------------------------------------------------ panel events
/** event map */
events : _.extend( _.clone( _super.prototype.events ), {
'click .show-selectors-btn' : 'toggleSelectors'
'click .show-selectors-btn' : 'toggleSelectors',
'click .toggle-deleted-link' : function( ev ){ this.toggleShowDeleted(); },
'click .toggle-hidden-link' : function( ev ){ this.toggleShowHidden(); }
}),
/** Update the history size display (curr. upper right of panel).
static/scripts/mvc/history/history-panel.js
+3 -3
View File
@@ -395,6 +395,7 @@ var HistoryPanel = _super.extend(
if( store ){
this.storage.set( 'show_deleted', show );
}
this.trigger( 'show-hidden', show );
//TODO:?? to events on storage('change:show_deleted')
this.renderItems();
return this.showDeleted;
@@ -412,6 +413,7 @@ var HistoryPanel = _super.extend(
if( store ){
this.storage.set( 'show_hidden', show );
}
this.trigger( 'show-hidden', show );
//TODO:?? to events on storage('change:show_deleted')
this.renderItems();
return this.showHidden;
@@ -606,9 +608,7 @@ HistoryPanel.prototype.templates = (function(){
'<div class="title">',
'<div class="name"><%= history.name %></div>',
'</div>',
'<div class="subtitle">',
//'<%= view.collection.length %>', _l( ' items' ),
'</div>',
'<div class="subtitle"></div>',
'<div class="history-size"><%= history.nice_size %></div>',
'<div class="actions"></div>',
static/scripts/mvc/list/list-panel.js
+1 -1
View File
@@ -484,13 +484,13 @@ var ListPanel = Backbone.View.extend( BASE_MVC.LoggableMixin ).extend(
var panel = this,
view = panel.viewFromModel( model );
if( !view ){ return undefined; }
panel.views = _.without( panel.views, view );
// potentially show the empty message if no views left
// use anonymous queue here - since remove can happen multiple times
$({}).queue( 'fx', [
function( next ){ view.$el.fadeOut( panel.fxSpeed, next ); },
function( next ){
panel.views = _.without( panel.views, view );
view.remove();
if( !panel.views.length ){
panel._renderEmptyMessage().fadeIn( panel.fxSpeed, next );
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/history/history-panel-edit.js
+1 -1
View File
File diff suppressed because one or more lines are too long
static/scripts/packed/mvc/history/history-panel.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
+8 -8
View File
@@ -1854,6 +1854,7 @@ div.permissionContainer{padding-left:20px}
.list-item .selector{float:left;display:none;width:32px;height:32px;margin:0 0 -6px 0;padding:8px 0 2px 7px;font-size:80%;color:#333;cursor:pointer;vertical-align:middle}
.list-item .selector:hover{color:maroon}
.list-item .title-bar{cursor:pointer;outline:none;padding:6px 10px 6px 8px}.list-item .title-bar .title{display:inline;font-weight:bold;text-decoration:underline;word-wrap:break-word;word-break:break-all;line-height:16px}
.list-item .title-bar .subtitle{color:#777;font-size:90%}.list-item .title-bar .subtitle a{color:inherit}
.list-item .primary-actions{display:inline-block;float:right;margin:6px 10px 0}.list-item .primary-actions .icon-btn:not(:last-child){margin:0px;border-radius:0px;border-right:none}
.list-item .primary-actions .icon-btn:first-child{margin-right:0px;border-top-left-radius:3px;border-bottom-left-radius:3px}
.list-item .primary-actions .icon-btn:last-child{margin-left:0px;border-radius:0px 3px 3px 0px}
@@ -1866,7 +1867,7 @@ div.permissionContainer{padding-left:20px}
.list-panel .vertical-spacing{margin-bottom:8px}
.list-panel .controls>*:not(:empty){margin-bottom:8px}
.list-panel .controls .name{word-wrap:break-word;font-weight:bold}
.list-panel .controls .subtitle{color:#777;font-size:90%}
.list-panel .controls .subtitle{color:#777;font-size:90%}.list-panel .controls .subtitle a{color:inherit}
.list-panel .controls .actions{display:inline-block;float:right}.list-panel .controls .actions .icon-btn:not(:last-child){margin:0px;border-radius:0px;border-right:none}
.list-panel .controls .actions .icon-btn:first-child{margin-right:0px;border-top-left-radius:3px;border-bottom-left-radius:3px}
.list-panel .controls .actions .icon-btn:last-child{margin-left:0px;border-radius:0px 3px 3px 0px}
@@ -1940,12 +1941,12 @@ div.permissionContainer{padding-left:20px}
.dataset .details .dataset-peek{margin-bottom:8px;width:100%;margin:0px;border-radius:3px;background:white;color:black;font-size:10px;overflow:auto}.dataset .details .dataset-peek th{color:white;background:#5f6990}
.dataset .details .dataset-peek table,.dataset .details .dataset-peek th,.dataset .details .dataset-peek tr,.dataset .details .dataset-peek td{font-family:Monaco,Menlo,Consolas,"Courier New",monospace;font-size:10px}
.history-content.dataset .title-bar .title .hid:after,.history-content.dataset-collection .title-bar .title .hid:after{content:':'}
.history-panel .controls{margin:10px;padding:0px}.history-panel .controls .messages>*{cursor:pointer}
.history-panel .controls{margin:10px 10px 0px 10px;padding:0px}.history-panel .controls .messages{margin-bottom:0px}.history-panel .controls .messages>*{cursor:pointer}.history-panel .controls .messages>*:last-child{margin-bottom:8px}
.history-panel .controls .title{margin-bottom:4px}.history-panel .controls .title input{width:100%;margin:-3px 0 -3px -3px;font-weight:bold}
.history-panel .controls .subtitle:not(:empty){margin-top:-4px;margin-bottom:4px}
.history-panel .controls .subtitle:not(:empty){margin-top:-4px;margin-bottom:6px}
.history-panel .controls .editable-text{border:solid transparent 1px}
.history-panel .controls .editable-text:hover{cursor:pointer;border:1px dotted #999999}
.history-panel .controls .history-size{display:inline-block;color:black}
.history-panel .controls .history-size{display:inline-block;margin-top:4px;color:black}
.history-panel .controls .actions{margin-bottom:0px}
.history-panel .controls .quota-message{display:none;margin:8px 0px 5px 0px}
.history-panel .controls .tags-display,.history-panel .controls .annotation-display{display:none;margin-bottom:8px}.history-panel .controls .tags-display label,.history-panel .controls .annotation-display label{display:block;margin:0px;padding:0px;font-weight:normal;color:#555}
@@ -1954,11 +1955,11 @@ div.permissionContainer{padding-left:20px}
.history-panel .controls .tags-display input{border-radius:3px}
.history-panel .controls .annotation-display .annotation{border-radius:3px;border:1px solid rgba(153,153,153,0.5);padding:4px;white-space:pre-wrap;overflow:auto}
.history-panel .controls .annotation-display .annotation:empty:after{position:relative;top:-4px;font-size:10px;font-style:italic;color:grey;content:'Click here to edit annotation'}
.history-panel .controls .annotation-display textarea{margin:0px 0px 2px 0px;display:block;border-radius:3px;width:100%}
.history-panel .controls .annotation-display textarea{margin:0px 0px 2px 0px;border-radius:3px;width:100%}
.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 .subtitle{margin-top:2px}
.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}
@@ -2013,7 +2014,7 @@ pre.peek table,pre.peek th,pre.peek tr,pre.peek td{font-family:Monaco,Menlo,Cons
.dataset-collection-element.state-discarded{background:#eee}.dataset-collection-element.state-discarded .state-icon:before{content:"\f014"}
.dataset-collection-element.state-noPermission{background:#eee;filter:alpha(opacity=60);-moz-opacity:.60;opacity:.60}.dataset-collection-element.state-noPermission .state-icon{font-size:20px}.dataset-collection-element.state-noPermission .state-icon:before{content:"\f023"}
.dataset-collection-element.state-new{background:#eee}.dataset-collection-element.state-new .state-icon:before{content:"\f06a"}
.dataset-collection-element .title-bar .subtitle{margin-top:2px;font-size:90%;color:#777}
.dataset-collection-element .title-bar .subtitle{margin-top:2px}
.dataset-collection-element .details{display:none}
.history-content.dataset-collection.state-ok,.history-content.dataset-collection.state-failed_metadata{background:#aff1af}.history-content.dataset-collection.state-ok .state-icon,.history-content.dataset-collection.state-failed_metadata .state-icon{display:none}
.history-content.dataset-collection.state-error,.history-content.dataset-collection.state-empty{background:#f9c7c5}.history-content.dataset-collection.state-error .state-icon,.history-content.dataset-collection.state-empty .state-icon{background-color:white;border-radius:8px}.history-content.dataset-collection.state-error .state-icon:before,.history-content.dataset-collection.state-empty .state-icon:before{font-size:20px;line-height:16px;color:red;content:"\f057"}
@@ -2027,7 +2028,6 @@ pre.peek table,pre.peek th,pre.peek tr,pre.peek td{font-family:Monaco,Menlo,Cons
.dataset-collection-panel{margin:0px;padding:0px}.dataset-collection-panel .vertically-spaced{margin-top:4px}
.dataset-collection-panel .controls{padding:8px}.dataset-collection-panel .controls .navigation{margin-top:4px}.dataset-collection-panel .controls .navigation .back .fa-icon{margin-right:4px;font-size:120%;font-weight:bold;text-decoration:none}
.dataset-collection-panel .controls .title{margin-top:12px}.dataset-collection-panel .controls .title .name{font-weight:bold}
.dataset-collection-panel .controls .subtitle{color:#777}
.dataset-collection-panel .list-items{margin-top:8px}.dataset-collection-panel .list-items .dataset-collection-element{border-width:1px 0px 0px 0px}.dataset-collection-panel .list-items .dataset-collection-element:last-child{border-bottom-width:1px}
.collection-creator{height:100%;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.collection-creator ol,.collection-creator li{list-style:none;padding:0;margin:0}
.collection-creator>*:not(.popover){padding:0px 8px 0px 8px}
static/style/src/less/collections.less
-5
View File
@@ -4,8 +4,6 @@
.title-bar {
.subtitle {
margin-top: 2px;
font-size: 90%;
color: #777;
}
}
.details {
@@ -54,9 +52,6 @@
font-weight: bold;
}
}
.subtitle {
color: #777;
}
}
.list-items {
margin-top: 8px;
static/style/src/less/history.less
+13 -7
View File
@@ -373,11 +373,17 @@
.history-panel {
.controls {
margin: 10px;
margin: 10px 10px 0px 10px;
padding: 0px;
.messages > * {
cursor: pointer;
.messages {
margin-bottom: 0px;
& > * {
cursor: pointer;
&:last-child {
margin-bottom: 8px;
}
}
}
.title {
@@ -391,7 +397,7 @@
}
.subtitle:not(:empty){
margin-top: -4px;
margin-bottom: 4px;
margin-bottom: 6px;
}
.editable-text {
border: solid transparent 1px;
@@ -403,6 +409,7 @@
.history-size {
display: inline-block;
margin-top: 4px;
color: black;
}
.actions {
@@ -442,6 +449,7 @@
}
.annotation-display {
.annotation {
//display: inline-block;
border-radius: 3px;
border: 1px solid fadeout( @layout-border-color, 50% );
padding: 4px;
@@ -461,7 +469,7 @@
}
textarea {
margin: 0px 0px 2px 0px;
display: block;
//display: block;
border-radius: 3px;
width: 100%;
}
@@ -494,8 +502,6 @@
.dataset-collection {
.subtitle {
margin-top: 2px;
font-size: 90%;
color: #777;
}
}
.dataset-collection-panel {
static/style/src/less/list-item.less
+10
View File
@@ -77,6 +77,13 @@
//&:focus {
// color: maroon;
//}
.subtitle {
color: #777;
font-size: 90%;
a {
color: inherit;
}
}
}
.primary-actions {
@@ -132,6 +139,9 @@
.subtitle {
color: #777;
font-size: 90%;
a {
color: inherit;
}
}
.actions {
.icon-btn-group();