Skip to content

Commit

Permalink
Fix tool panel handling
Browse files Browse the repository at this point in the history
  • Loading branch information
@guerler
guerler committed Sep 3, 2015
1 parent d546d08 commit 910f951
Show file tree
Hide file tree
Showing 12 changed files with 141 additions and 148 deletions.
49 changes: 24 additions & 25 deletions client/galaxy/scripts/mvc/app/app-panel-tool.js
View file
@@ -1,14 +1,14 @@
define(['utils/utils', 'mvc/tools'],
function( Utils, Tools ) {
define(['utils/utils', 'mvc/tools', 'mvc/upload/upload-view'],
function( Utils, Tools, Upload ) {

// create form view
return Backbone.View.extend({
initialize: function(options) {
this.options = Utils.merge(options, {});
initialize: function( options ) {
this.options = Utils.merge( options, {} );
this.setElement( this._template() );

// create tool search, tool panel, and tool panel view.
if (Galaxy.user.valid || !Galaxy.config.require_login) {
if ( Galaxy.user.valid || !Galaxy.config.require_login ) {
var tool_search = new Tools.ToolSearch({
spinner_url : options.spinner_url,
search_url : options.search_url,
Expand All @@ -26,40 +26,39 @@ define(['utils/utils', 'mvc/tools'],
Galaxy.toolPanel = tool_panel;

// if there are tools, render panel and display everything
if (tool_panel.get('layout').size() > 0) {
if (tool_panel.get( 'layout' ).size() > 0) {
tool_panel_view.render();
this.$('.toolMenu').show();
this.$( '.toolMenu' ).show();
}
this.$('.toolMenuContainer').prepend(tool_panel_view.$el);
this.$el.append( tool_panel_view.$el );

// minsize init hint
this.$( 'a[minsizehint]' ).click( function() {
if ( parent.handle_minwidth_hint ) {
parent.handle_minwidth_hint( $(this).attr( "minsizehint" ) );
parent.handle_minwidth_hint( $(this).attr( 'minsizehint' ) );
}
});

// add upload plugin
Galaxy.upload = new Upload( options );

// define components (is used in app-view.js)
this.components = {
header : {
title : 'Tools',
buttons : [ Galaxy.upload ]
}
}
}
},

_template: function() {
return '<div class="unified-panel">' +
'<div class="unified-panel-header" unselectable="on">' +
'<div class="unified-panel-header-inner with-upload-button">' +
' Tools ' +
return '<div class="toolMenuContainer">' +
'<div class="toolMenu" style="display: none">' +
'<div id="search-no-results" style="display: none; padding-top: 5px">' +
'<em><strong>Search did not match any tools.</strong></em>' +
'</div>' +
'</div>' +
'<div class="unified-panel-body">' +
'<div class="toolMenuContainer">' +
'<div class="toolMenu" style="display: none">' +
'<div id="search-no-results" style="display: none; padding-top: 5px">' +
'<em><strong>Search did not match any tools.</strong></em>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="unified-panel-footer">' +
'testsadasdsa' +
'</div>' +
'</div>';
/*%if t.user:
<div class="toolSectionPad"></div>
Expand Down
76 changes: 36 additions & 40 deletions client/galaxy/scripts/mvc/app/app-view.js
View file
Expand Up @@ -3,9 +3,9 @@
*/
define(['utils/utils', 'mvc/ui/ui-portlet', 'mvc/ui/ui-misc',
'galaxy.masthead', 'galaxy.menu', 'mvc/ui/ui-modal', 'galaxy.frame',
'mvc/upload/upload-view', 'mvc/user/user-model','mvc/user/user-quotameter',
'mvc/user/user-model','mvc/user/user-quotameter',
'mvc/app/app-panel-history', 'mvc/app/app-panel-tool', 'mvc/app/app-panel-center'],
function( Utils, Portlet, Ui, Masthead, Menu, Modal, Frame, Upload, User, QuotaMeter, HistoryPanel, ToolPanel, CenterPanel) {
function( Utils, Portlet, Ui, Masthead, Menu, Modal, Frame, User, QuotaMeter, HistoryPanel, ToolPanel, CenterPanel) {

// create form view
return Backbone.View.extend({
Expand Down Expand Up @@ -53,38 +53,48 @@ define(['utils/utils', 'mvc/ui/ui-portlet', 'mvc/ui/ui-misc',
var centerPanel = new CenterPanel();

// append panel content
this._buildPanel( '#right', historyPanel );
this.$('#left').append( toolPanel.$el.children() );
this._buildPanel( 'left', toolPanel );
this._buildPanel( 'right', historyPanel );
this.$('#center').append( centerPanel.$el );

// add upload plugin
Galaxy.upload = new Upload( options );

// left/right panel
var lp = new Panel( {
center : this.$( '#center' ),
panel : this.$( '#left' ),
drag : this.$( '#left .unified-panel-footer > .drag' ),
toggle : this.$( '#left .unified-panel-footer > .panel-collapse' )
} );

},

_buildPanel: function( id, view ) {
var $el = this.$( id );
var components = view.components;
$el.find('.panel-header-text').html( components.header.title );
var components = Utils.merge( view.components, {
header : {
title : '',
buttons : []
}
});
var $panel = $( this._templatePanel( id ) );
$panel.find('.panel-header-text').html( components.header.title );
for ( var i in components.header.buttons ) {
$el.find('.panel-header-buttons').append( components.header.buttons[ i ].$el );
$panel.find('.panel-header-buttons').append( components.header.buttons[ i ].$el );
}
$el.find('.unified-panel-body').append( view.$el );
new Panel( {
$panel.find('.unified-panel-body').append( view.$el );
var panel = new Panel( {
center : this.$( '#center' ),
panel : this.$( id ),
drag : this.$( id + '.unified-panel-footer > .drag' ),
toggle : this.$( id + '.unified-panel-footer > .panel-collapse' ),
right : true
panel : $panel,
drag : $panel.find('.unified-panel-footer > .drag' ),
toggle : $panel.find('.unified-panel-footer > .panel-collapse' ),
right : id == 'right'
} );
this.$el.append( $panel );
},

_templatePanel: function( id ) {
return '<div id="' + id + '">' +
'<div class="unified-panel-header" unselectable="on">' +
'<div class="unified-panel-header-inner">' +
'<div class="panel-header-buttons" style="float: right"/>' +
'<div class="panel-header-text"/>' +
'</div>' +
'</div>' +
'<div class="unified-panel-body"/>' +
'<div class="unified-panel-footer">' +
'<div class="panel-collapse ' + id + '"/>' +
'<div class="drag"/>' +
'</div>' +
'</div>';
},

_template: function() {
Expand All @@ -93,21 +103,7 @@ define(['utils/utils', 'mvc/ui/ui-portlet', 'mvc/ui/ui-misc',
'<div id="masthead" class="navbar navbar-fixed-top navbar-inverse"/>' +
//'<div id="messagebox"/>' +
//'<div id="inactivebox" class="panel-warning-message"/>' +
'<div id="left"/>' +
'<div id="center" class="inbound"/>' +
'<div id="right">' +
'<div class="unified-panel-header" unselectable="on">' +
'<div class="unified-panel-header-inner history-panel-header">' +
'<div class="panel-header-buttons" style="float: right"/>' +
'<div class="panel-header-text"/>' +
'</div>' +
'</div>' +
'<div class="unified-panel-body"/>' +
'<div class="unified-panel-footer">' +
'<div class="panel-collapse right"/>' +
'<div class="drag"/>' +
'</div>' +
'</div>' +
'</div>';
}
});
Expand Down
58 changes: 28 additions & 30 deletions client/galaxy/scripts/mvc/upload/upload-button.js
View file
Expand Up @@ -18,72 +18,70 @@ var View = Backbone.View.extend({
model : null,

// initialize
initialize : function(options) {
initialize : function( options ) {
// link this
var self = this;

// create model
var model = options.model;

// create new element
this.setElement(this._template());
this.setElement( this._template() );

// add event
$(this.el).on('click', function(e) { options.onclick(e); });
this.$el.on( 'click', function( e ) { options.onclick( e ); });

// add tooltip
$(this.el).tooltip({title: model.get('tooltip'), placement: 'bottom'});
this.$el.tooltip( { title: model.get('tooltip'), placement: 'bottom' } );

// events
model.on('change:percentage', function() {
self._percentage(model.get('percentage'));
model.on( 'change:percentage', function() {
self._percentage( model.get( 'percentage' ) );
});
model.on('change:status', function() {
self._status(model.get('status'));
model.on( 'change:status', function() {
self._status( model.get( 'status' ) );
});

// unload event
var self = this;
$(window).on('beforeunload', function() {
$( window ).on( 'beforeunload', function() {
var text = "";
if (options.onunload) {
if ( options.onunload ) {
text = options.onunload();
}
if (text != "") {
if ( text != "" ) {
return text;
}
});
},

// set status
_status: function(value) {
var $el = this.$el.find('.progress-bar');
_status: function( value ) {
var $el = this.$el.find( '.progress-bar' );
$el.removeClass();
$el.addClass('progress-bar');
$el.addClass('progress-bar-notransition');
if (value != '') {
$el.addClass('progress-bar-' + value);
$el.addClass( 'progress-bar' );
$el.addClass( 'progress-bar-notransition' );
if ( value != '' ) {
$el.addClass( 'progress-bar-' + value );
}
},

// set percentage
_percentage: function(value) {
var $el = this.$el.find('.progress-bar');
$el.css({ width : value + '%' });
_percentage: function( value ) {
var $el = this.$el.find( '.progress-bar' );
$el.css( { width : value + '%' } );
},

// template
_template: function() {
return '<div style="float: right">' +
'<div class="upload-button">' +
'<div class="progress">' +
'<div class="progress-bar"></div>' +
'</div>' +
'<div id="label" class="label">' +
'<a class="panel-header-button" href="javascript:void(0)">' +
'<span class="fa fa-upload"></span>' +
'</a>' +
'</div>' +
return '<div class="upload-button">' +
'<div class="progress">' +
'<div class="progress-bar"></div>' +
'</div>' +
'<div id="label" class="label">' +
'<a class="panel-header-button" href="javascript:void(0)">' +
'<span class="fa fa-upload"></span>' +
'</a>' +
'</div>' +
'</div>';
}
Expand Down

0 comments on commit 910f951

Please sign in to comment.