diff --git a/client/galaxy/scripts/mvc/form/form-section.js b/client/galaxy/scripts/mvc/form/form-section.js index 09495f379ad..d7b32b3d191 100644 --- a/client/galaxy/scripts/mvc/form/form-section.js +++ b/client/galaxy/scripts/mvc/form/form-section.js @@ -168,57 +168,20 @@ define(['utils/utils', /** Add a customized section */ _addSection: function(input_def) { - var self = this; - - // create sub section - var sub_section = new View(self.app, { - inputs : input_def.inputs - }); - - // delete button - var button_visible = new Ui.ButtonIcon({ - icon : 'fa-eye-slash', - tooltip : 'Show/hide section', - cls : 'ui-button-icon-plain' - }); - - // create portlet for sub section var portlet = new Portlet.View({ - title : input_def.title || input_def.name, - cls : 'ui-portlet-section', - collapsible : true, - collapsed : true, - operations : { - button_visible: button_visible - } + title : input_def.title || input_def.name, + cls : 'ui-portlet-section', + collapsible : true, + collapsible_button : true, + collapsed : !input_def.expanded }); - portlet.append( sub_section.$el ); + portlet.append( new View( this.app, { inputs: input_def.inputs } ).$el ); portlet.append( $( '
' ).addClass( 'ui-form-info' ).html( input_def.help ) ); - portlet.setOperation( 'button_visible', function() { - if( portlet.collapsed ) { - portlet.expand(); - } else { - portlet.collapse(); - } - }); - - // add expansion event handler - portlet.on( 'expanded', function() { - button_visible.setIcon( 'fa-eye' ); - }); - portlet.on( 'collapsed', function() { - button_visible.setIcon( 'fa-eye-slash' ); - }); this.app.on( 'expand', function( input_id ) { ( portlet.$( '#' + input_id ).length > 0 ) && portlet.expand(); }); - - // show sub section if requested - input_def.expanded && portlet.expand(); - - // create table row - this.table.add(portlet.$el); - this.table.append(input_def.id); + this.table.add( portlet.$el ); + this.table.append( input_def.id ); }, /** Add a single input field element @@ -231,12 +194,15 @@ define(['utils/utils', name : input_def.name, label : input_def.label || input_def.name, value : input_def.value, - text_value : input_def.text_value || input_def.value, + text_value : input_def.text_value, collapsible_value : input_def.collapsible_value, collapsible_preview : input_def.collapsible_preview, help : input_def.help, argument : input_def.argument, disabled : input_def.disabled, + color : input_def.color, + style : input_def.style, + backdrop : input_def.backdrop, field : field }); this.app.element_list[id] = input_element; diff --git a/client/galaxy/scripts/mvc/form/form-view.js b/client/galaxy/scripts/mvc/form/form-view.js index 1acea228c2e..daee82326b4 100644 --- a/client/galaxy/scripts/mvc/form/form-view.js +++ b/client/galaxy/scripts/mvc/form/form-view.js @@ -8,7 +8,7 @@ define(['utils/utils', 'mvc/ui/ui-portlet', 'mvc/ui/ui-misc', 'mvc/form/form-sec this.options = Utils.merge(options, { initial_errors : false, cls : 'ui-portlet-limited', - icon : '' + icon : null }); this.modal = ( parent.Galaxy && parent.Galaxy.modal ) || new Ui.Modal.View(); this.setElement('
'); diff --git a/client/galaxy/scripts/mvc/tool/tool-form-base.js b/client/galaxy/scripts/mvc/tool/tool-form-base.js index 26c29c35f00..8f8a146760d 100644 --- a/client/galaxy/scripts/mvc/tool/tool-form-base.js +++ b/client/galaxy/scripts/mvc/tool/tool-form-base.js @@ -36,7 +36,7 @@ define(['utils/utils', 'utils/deferred', 'mvc/ui/ui-misc', 'mvc/form/form-view', var self = this; this.options = Utils.merge(options, this.options); this.options = Utils.merge({ - icon : ( (options.icon === undefined) && 'fa-wrench' ) || '', + icon : options.icon, title : '' + options.name + ' ' + options.description + ' (Galaxy Version ' + options.version + ')', operations : this._operations(), onchange : function() { diff --git a/client/galaxy/scripts/mvc/ui/ui-portlet.js b/client/galaxy/scripts/mvc/ui/ui-portlet.js index 380a7f3aaa4..51aca68d009 100644 --- a/client/galaxy/scripts/mvc/ui/ui-portlet.js +++ b/client/galaxy/scripts/mvc/ui/ui-portlet.js @@ -1,206 +1,207 @@ -define(['utils/utils'], function( Utils ) { +define([ 'utils/utils', 'mvc/ui/ui-misc' ], function( Utils, Ui ) { var View = Backbone.View.extend({ visible : false, initialize : function( options ) { var self = this; - this.options = Utils.merge( options, { - id : Utils.uid(), - title : '', - icon : '', - buttons : null, - body : null, - scrollable : true, - nopadding : false, - operations : null, - placement : 'bottom', - cls : 'ui-portlet', - operations_flt : 'right', - collapsible : false, - collapsed : false + this.model = options && options.model || new Backbone.Model( { + id : Utils.uid(), + cls : 'ui-portlet', + title : '', + icon : '', + buttons : null, + body : null, + scrollable : true, + nopadding : false, + operations : null, + collapsible : false, + collapsible_button : false, + collapsed : false + } ).set( options ); + this.setElement( this._template() ); + + // link all dom elements + this.$body = this.$( '.portlet-body' ); + this.$title_text = this.$( '.portlet-title-text' ); + this.$title_icon = this.$( '.portlet-title-icon' ); + this.$header = this.$( '.portlet-header' ); + this.$content = this.$( '.portlet-content' ); + this.$footer = this.$( '.portlet-footer' ); + this.$backdrop = this.$( '.portlet-backdrop' ); + this.$buttons = this.$( '.portlet-buttons' ); + this.$operations = this.$( '.portlet-operations' ); + + // add body to component list + this.model.get( 'body' ) && this.append( this.model.get( 'body' ) ); + + // add icon for collapsible option + this.collapsible_button = new Ui.ButtonIcon({ + icon : 'fa-eye', + tooltip : 'Collapse/Expand', + cls : 'ui-button-icon-plain', + onclick : function() { self[ self.collapsed ? 'expand' : 'collapse' ]() } }); - this.setElement( this._template( this.options ) ); + this.render(); + }, - // link content - this.$body = this.$( '.portlet-body' ); - this.$title = this.$( '.portlet-title-text' ); - this.$header = this.$( '.portlet-header' ); - this.$content = this.$( '.portlet-content' ); - this.$footer = this.$( '.portlet-footer' ); + render: function() { + var self = this; + var options = this.model.attributes; + this.$el.removeClass().addClass( options.cls ).attr( 'id', options.id ); + this.$header[ options.title ? 'show' : 'hide' ](); + this.$title_text.html( options.title ); + _.each( [ this.$content, this.$body ], function( $el ) { + $el[ options.nopadding ? 'addClass' : 'removeClass' ]( 'no-padding' ); + }); - // set content padding - if ( this.options.nopadding ) { - this.$content.css( 'padding', '0px' ); - this.$body.css( 'padding', '0px' ); + // render title icon + if ( options.icon ) { + this.$title_icon.removeClass().addClass( 'portlet-title-icon fa' ).addClass( options.icon ).show(); + } else { + this.$title_icon.hide(); } - // append buttons - this.$buttons = this.$( '.portlet-buttons' ); - if ( this.options.buttons ) { - $.each( this.options.buttons, function( name, item ) { + // make portlet collapsible + this.$title_text[ options.collapsible ? 'addClass' : 'removeClass' ]( 'no-highlight collapsible' ).off(); + if ( options.collapsible ) { + this.$title_text.on( 'click', function() { self[ self.collapsed ? 'expand' : 'collapse' ]() } ); + options.collapsed ? this.collapse() : this.expand(); + } + + // render buttons + if ( options.buttons ) { + this.$buttons.empty().show(); + $.each( this.model.get( 'buttons' ), function( name, item ) { item.$el.prop( 'id', name ); self.$buttons.append( item.$el ); }); } else { - this.$buttons.remove(); + this.$buttons.hide(); } - // append operations - this.$operations = this.$( '.portlet-operations' ); - if ( this.options.operations ) { - $.each( this.options.operations, function( name, item ) { + // render operations + this.$operations.empty; + if ( options.collapsible_button ) { + this.$operations.append( this.collapsible_button.$el ); + } + if ( options.operations ) { + $.each( options.operations, function( name, item ) { item.$el.prop( 'id', name ); self.$operations.append( item.$el ); }); } - - // add body - this.options.body && this.append( this.options.body ); - - // make portlet collapsible - this.collapsed = false; - if ( this.options.collapsible ) { - this.$title.addClass( 'no-highlight' ).css({ - 'cursor' : 'pointer', - 'text-decoration' : 'underline' - }); - this.$title.on( 'click', function() { - if ( self.collapsed ) { self.expand(); } else { self.collapse(); } - }); - this.options.collapsed && this.collapse(); - } + return this; }, - // append + /** Append new doms to body */ append: function( $el ) { this.$body.append( $el ); }, - // remove all content + /** Remove all content */ empty: function() { this.$body.empty(); }, - // header + /** Return header element */ header: function() { return this.$header; }, - // body + /** Return body element */ body: function() { return this.$body; }, - // footer + /** Return footer element */ footer: function() { return this.$footer; }, - // show + /** Show portlet */ show: function(){ this.visible = true; this.$el.fadeIn( 'fast' ); }, - // hide + /** Hide portlet */ hide: function(){ this.visible = false; this.$el.fadeOut( 'fast' ); }, - // enable buttons + /** Enable a particular button */ enableButton: function( id ) { this.$buttons.find( '#' + id ).prop( 'disabled', false ); }, - // disable buttons + /** Disable a particular button */ disableButton: function( id ) { this.$buttons.find( '#' + id ).prop( 'disabled', true ); }, - // hide operation + /** Hide a particular operation */ hideOperation: function( id ) { this.$operations.find( '#' + id ).hide(); }, - // show operation + /** Show a particular operation */ showOperation: function( id ) { this.$operations.find( '#' + id ).show(); }, - // set operation + /** Replaces the event callback of an existing operation */ setOperation: function( id, callback ) { - var $el = this.$operations.find( '#' + id ); - $el.off( 'click' ); - $el.on( 'click', callback ); + this.$operations.find( '#' + id ).off( 'click' ).on( 'click', callback ); }, - // title + /** Change title */ title: function( new_title ) { - var $el = this.$title; - if ( new_title ) { - $el.html( new_title ); - } - return $el.html(); + new_title && this.$title_text.html( new_title ); + return this.$title_text.html(); }, - // collapse portlet + /** Collapse portlet */ collapse: function() { this.collapsed = true; this.$content.height( '0%' ); this.$body.hide(); this.$footer.hide(); - this.trigger( 'collapsed' ); + this.collapsible_button.setIcon( 'fa-eye-slash' ); }, - // expand portlet + /** Expand portlet */ expand: function() { this.collapsed = false; this.$content.height( '100%' ); this.$body.fadeIn( 'fast' ); this.$footer.fadeIn( 'fast' ); - this.trigger( 'expanded' ); + this.collapsible_button.setIcon( 'fa-eye' ); }, - // disable content access + /** Disable content access */ disable: function() { - this.$( '.portlet-backdrop' ).show(); + this.$backdrop.show(); }, - // enable content access + /** Enable content access */ enable: function() { - this.$( '.portlet-backdrop' ).hide(); + this.$backdrop.hide(); }, - // fill regular modal template - _template: function( options ) { - var tmpl = '
'; - if ( options.title ) { - tmpl += '
' + - '
' + - '
'; - if ( options.icon ) { - tmpl += ' '; - } - tmpl += '' + options.title + '' + - '
' + - '
'; - } - tmpl += '
'; - if ( options.placement == 'top' ) { - tmpl += '
'; - } - tmpl += '
'; - if ( options.placement == 'bottom' ) { - tmpl += '
'; - } - tmpl += '
' + - '