1 new commit in galaxy-central: https://bitbucket.org/galaxy/galaxy-central/commits/ead13267cf21/ Changeset: ead13267cf21 User: guerler Date: 2014-02-26 19:09:23 Summary: UI: Add click-event handler to tabs, Ui: Improve table wrapper, Charts: Hide tooltips on element hide, improve UI Affected #: 8 files diff -r f26afae68417905a7f662671a18ca551f39ecf5f -r ead13267cf213e10e76d2478b477b729e6f6129a config/plugins/visualizations/charts/static/app.js --- a/config/plugins/visualizations/charts/static/app.js +++ b/config/plugins/visualizations/charts/static/app.js @@ -61,9 +61,6 @@ // events var self = this; - this.config.on('change:current_view', function() { - self._showCurrent(); - }); this.config.on('change:title', function() { self._refreshTitle(); }); @@ -86,11 +83,6 @@ this.portlet.title('Charts' + title); }, - // current view - _showCurrent: function() { - - }, - // execute command execute: function(options) { }, diff -r f26afae68417905a7f662671a18ca551f39ecf5f -r ead13267cf213e10e76d2478b477b729e6f6129a config/plugins/visualizations/charts/static/library/table.js --- a/config/plugins/visualizations/charts/static/library/table.js +++ b/config/plugins/visualizations/charts/static/library/table.js @@ -33,7 +33,15 @@ this.options = Utils.merge(options, this.optionsDefault); // create new element - this.setElement(this._template(options)); + var $el = $(this._template(options)); + + // link sub-elements + this.$thead = $el.find('thead'); + this.$tbody = $el.find('tbody'); + this.$tmessage = $el.find('tmessage'); + + // set element + this.setElement($el); // initialize row this.row = $('<tr></tr>'); @@ -49,7 +57,7 @@ // header appendHeader: function() { // append header row - $(this.el).find('thead').append(this.row); + this.$thead.append(this.row); // row this.row = $('<tr></tr>'); @@ -74,14 +82,14 @@ // remove remove: function(id) { - $(this.el).find('#' + id).remove(); + this.$tbody.find('#' + id).remove(); this.row_count--; this._refresh(); }, // remove removeAll: function() { - $(this.el).find('tbody').html(''); + this.$tbody.html(''); this.row_count = 0; this._refresh(); }, @@ -89,18 +97,18 @@ // value value: function(new_value) { // get current id/value - this.before = this.$el.find('.current').attr('id'); + this.before = this.$tbody.find('.current').attr('id'); // check if new_value is defined if (new_value !== undefined) { - this.$el.find('tr').removeClass('current'); + this.$tbody.find('tr').removeClass('current'); if (new_value) { - this.$el.find('#' + new_value).addClass('current'); + this.$tbody.find('#' + new_value).addClass('current'); } } // get current id/value - var after = this.$el.find('.current').attr('id'); + var after = this.$tbody.find('.current').attr('id'); if(after === undefined) { return null; } else { @@ -114,6 +122,11 @@ } }, + // size + size: function() { + return this.$tbody.find('tr').length; + }, + // commit _commit: function(id, prepend) { // add @@ -121,9 +134,9 @@ // add row if (prepend) { - $(this.el).find('tbody').prepend(this.row); + this.$tbody.prepend(this.row); } else { - $(this.el).find('tbody').append(this.row); + this.$tbody.append(this.row); } // row @@ -161,9 +174,9 @@ // refresh _refresh: function() { if (this.row_count == 0) { - this.$el.find('tmessage').show(); + this.$tmessage.show(); } else { - this.$el.find('tmessage').hide(); + this.$tmessage.hide(); } }, diff -r f26afae68417905a7f662671a18ca551f39ecf5f -r ead13267cf213e10e76d2478b477b729e6f6129a config/plugins/visualizations/charts/static/library/ui.js --- a/config/plugins/visualizations/charts/static/library/ui.js +++ b/config/plugins/visualizations/charts/static/library/ui.js @@ -111,7 +111,7 @@ if (options.title) { str += '<div style="margin-right: 5px; margin-left: 5px;">' + '<i class="icon fa ' + options.icon + '"/> ' + - '<span style="position: relative; font-size: 0.8em; top: -1px;">' + options.title + '</span>' + + '<span style="position: relative; font-size: 0.8em; font-weight: normal; top: -1px;">' + options.title + '</span>' + '</div>'; } else { str += '<i class="icon fa ' + options.icon + '"/>'; diff -r f26afae68417905a7f662671a18ca551f39ecf5f -r ead13267cf213e10e76d2478b477b729e6f6129a config/plugins/visualizations/charts/static/views/chart.js --- a/config/plugins/visualizations/charts/static/views/chart.js +++ b/config/plugins/visualizations/charts/static/views/chart.js @@ -96,6 +96,10 @@ // save chart self._saveChart(); + + // show viewport + self.hide(); + self.app.charts_view.$el.show(); } }), 'back' : new Ui.ButtonIcon({ @@ -103,7 +107,7 @@ tooltip : 'Return to Viewer', title : 'Return', onclick : function() { - self.$el.hide(); + self.hide(); self.app.charts_view.$el.show(); } }) @@ -161,7 +165,7 @@ self.tabs.showOperation('back'); }); this.app.charts.on('remove', function(chart) { - if (self.app.charts.length == 1) { + if (self.app.charts.length == 0) { self.tabs.hideOperation('back'); } }); @@ -187,6 +191,12 @@ this._resetChart(); }, + // hide + hide: function() { + $('.tooltip').hide(); + this.$el.hide(); + }, + // update _refreshLabels: function() { var self = this; @@ -275,12 +285,6 @@ // update chart model current.copy(this.chart); - - // hide - this.$el.hide(); - - // update main - this.app.charts_view.$el.show(); } }); diff -r f26afae68417905a7f662671a18ca551f39ecf5f -r ead13267cf213e10e76d2478b477b729e6f6129a config/plugins/visualizations/charts/static/views/charts.js --- a/config/plugins/visualizations/charts/static/views/charts.js +++ b/config/plugins/visualizations/charts/static/views/charts.js @@ -19,7 +19,7 @@ self.app.chart.copy(chart); // hide this element - self.$el.hide(); + self.hide(); // show chart view self.app.chart_view.$el.show(); @@ -44,17 +44,19 @@ height : 100, operations : { 'new' : new Ui.ButtonIcon({ - icon : 'fa-plus', - tooltip: 'Create', + icon : 'fa-magic', + tooltip: 'Create a new Chart', + title: 'New', onclick: function() { - self.$el.hide(); + self.hide(); self.app.chart.reset(); self.app.chart_view.$el.show(); } }), 'delete' : new Ui.ButtonIcon({ - icon : 'fa-minus', - tooltip: 'Delete', + icon : 'fa-trash-o', + tooltip: 'Delete this Chart', + title: 'Delete', onclick: function() { // check if element has been selected @@ -109,6 +111,12 @@ }); }, + // hide + hide: function() { + $('.tooltip').hide(); + this.$el.hide(); + }, + // append append : function($el) { this.$el.append(Utils.wrap('')); @@ -134,6 +142,15 @@ _removeChart: function(chart) { // remove from to table this.table.remove(chart.id); + + // check if table is empty + if (this.table.size() == 0) { + this.hide(); + this.app.chart_view.$el.show(); + } else { + // select available chart + this.table.value(this.app.charts.last().id); + } } }); diff -r f26afae68417905a7f662671a18ca551f39ecf5f -r ead13267cf213e10e76d2478b477b729e6f6129a config/plugins/visualizations/charts/static/views/viewport.js --- a/config/plugins/visualizations/charts/static/views/viewport.js +++ b/config/plugins/visualizations/charts/static/views/viewport.js @@ -31,7 +31,8 @@ operations : { 'edit' : new Ui.ButtonIcon({ icon : 'fa-gear', - tooltip : 'Configure' + tooltip : 'Customize Chart', + title : 'Customize' }) } }); @@ -80,7 +81,7 @@ self.app.chart.copy(chart); // show edit - self.app.charts_view.$el.hide(); + self.app.charts_view.hide(); self.app.chart_view.$el.show(); }); @@ -89,6 +90,12 @@ } }, + // hide + hide: function() { + $('.tooltip').hide(); + this.$el.hide(); + }, + // add _addChart: function(chart) { // link this diff -r f26afae68417905a7f662671a18ca551f39ecf5f -r ead13267cf213e10e76d2478b477b729e6f6129a static/scripts/mvc/ui/ui-tabs.js --- a/static/scripts/mvc/ui/ui-tabs.js +++ b/static/scripts/mvc/ui/ui-tabs.js @@ -37,9 +37,14 @@ // create new element this.setElement($tabs); + // clear list + this.list = {}; + + // link this + var self = this; + // append operations if (this.options.operations) { - var self = this; $.each(this.options.operations, function(name, item) { item.$el.prop('id', name); self.$nav.append(item.$el); @@ -69,7 +74,7 @@ add: function(options) { // get tab id var id = options.id; - + // create tab object var tab = { $title : $(this._template_tab(options)), @@ -79,7 +84,7 @@ // add to list this.list[id] = tab; - + // add a new tab either before the add-new-tab tab or behind the last tab if (this.options.onnew) { this.$nav.find('#new-tab').before(tab.$title); @@ -102,12 +107,19 @@ if (options.ondel) { var $del_icon = tab.$title.find('#delete'); $del_icon.tooltip({title: 'Delete this tab', placement: 'bottom'}); - $del_icon.on('click', function(e) { + $del_icon.on('click', function() { $del_icon.tooltip('destroy'); options.ondel(); return false; }); } + + // add custom click event handler + if (options.onclick) { + tab.$title.on('click', function() { + options.onclick(); + }); + } }, // delete tab diff -r f26afae68417905a7f662671a18ca551f39ecf5f -r ead13267cf213e10e76d2478b477b729e6f6129a static/scripts/packed/mvc/ui/ui-tabs.js --- a/static/scripts/packed/mvc/ui/ui-tabs.js +++ b/static/scripts/packed/mvc/ui/ui-tabs.js @@ -1,1 +1,1 @@ -define(["utils/utils"],function(a){var b=Backbone.View.extend({visible:false,list:{},$nav:null,$content:null,first_tab:null,optionsDefault:{title_new:"",operations:null,onnew:null},initialize:function(e){this.options=a.merge(e,this.optionsDefault);var c=$(this._template(this.options));this.$nav=c.find(".tab-navigation");this.$content=c.find(".tab-content");this.setElement(c);if(this.options.operations){var d=this;$.each(this.options.operations,function(g,h){h.$el.prop("id",g);d.$nav.append(h.$el)})}if(this.options.onnew){var f=$(this._template_tab_new(this.options));this.$nav.append(f);f.tooltip({title:"Add a new tab",placement:"bottom"});f.on("click",function(g){f.tooltip("hide");d.options.onnew()})}},add:function(d){var f=d.id;var e={$title:$(this._template_tab(d)),$content:$(this._template_tab_content(d)),removable:d.ondel?true:false};this.list[f]=e;if(this.options.onnew){this.$nav.find("#new-tab").before(e.$title)}else{this.$nav.append(e.$title)}e.$content.append(d.$el);this.$content.append(e.$content);if(_.size(this.list)==1){e.$title.addClass("active");e.$content.addClass("active");this.first_tab=f}if(d.ondel){var c=e.$title.find("#delete");c.tooltip({title:"Delete this tab",placement:"bottom"});c.on("click",function(g){c.tooltip("destroy");d.ondel();return false})}},del:function(d){var c=this.list[d];c.$title.remove();c.$content.remove();delete c;if(this.first_tab==d){this.first_tab=null}if(this.first_tab!=null){this.show(this.first_tab)}},delRemovable:function(){for(var d in this.list){var c=this.list[d];if(c.removable){this.del(d)}}},show:function(c){this.$el.fadeIn("fast");this.visible=true;if(c){this.list[c].$title.find("a").tab("show")}},hide:function(){this.$el.fadeOut("fast");this.visible=false},hideOperation:function(c){this.$nav.find("#"+c).hide()},showOperation:function(c){this.$nav.find("#"+c).show()},setOperation:function(e,d){var c=this.$nav.find("#"+e);c.off("click");c.on("click",d)},title:function(e,d){var c=this.list[e].$title.find("#text");if(d){c.html(d)}return c.html()},_template:function(c){return'<div class="tabbable tabs-left"><ul class="tab-navigation nav nav-tabs"/><div class="tab-content"/></div>'},_template_tab_new:function(c){return'<li id="new-tab"><a href="javascript:void(0);"><i style="font-size: 0.8em; margin-right: 5px;" class="fa fa-plus-circle"/>'+c.title_new+"</a></li>"},_template_tab:function(d){var c='<li id="title-'+d.id+'"><a title="" href="#tab-'+d.id+'" data-toggle="tab" data-original-title=""><span id="text">'+d.title+"</span>";if(d.ondel){c+='<i id="delete" style="font-size: 0.8em; margin-left: 5px; cursor: pointer;" class="fa fa-minus-circle"/>'}c+="</a></li>";return c},_template_tab_content:function(c){return'<div id="tab-'+c.id+'" class="tab-pane"/>'}});return{View:b}}); \ No newline at end of file +define(["utils/utils"],function(a){var b=Backbone.View.extend({visible:false,list:{},$nav:null,$content:null,first_tab:null,optionsDefault:{title_new:"",operations:null,onnew:null},initialize:function(e){this.options=a.merge(e,this.optionsDefault);var c=$(this._template(this.options));this.$nav=c.find(".tab-navigation");this.$content=c.find(".tab-content");this.setElement(c);this.list={};var d=this;if(this.options.operations){$.each(this.options.operations,function(g,h){h.$el.prop("id",g);d.$nav.append(h.$el)})}if(this.options.onnew){var f=$(this._template_tab_new(this.options));this.$nav.append(f);f.tooltip({title:"Add a new tab",placement:"bottom"});f.on("click",function(g){f.tooltip("hide");d.options.onnew()})}},add:function(d){var f=d.id;var e={$title:$(this._template_tab(d)),$content:$(this._template_tab_content(d)),removable:d.ondel?true:false};this.list[f]=e;if(this.options.onnew){this.$nav.find("#new-tab").before(e.$title)}else{this.$nav.append(e.$title)}e.$content.append(d.$el);this.$content.append(e.$content);if(_.size(this.list)==1){e.$title.addClass("active");e.$content.addClass("active");this.first_tab=f}if(d.ondel){var c=e.$title.find("#delete");c.tooltip({title:"Delete this tab",placement:"bottom"});c.on("click",function(){c.tooltip("destroy");d.ondel();return false})}if(d.onclick){e.$title.on("click",function(){d.onclick()})}},del:function(d){var c=this.list[d];c.$title.remove();c.$content.remove();delete c;if(this.first_tab==d){this.first_tab=null}if(this.first_tab!=null){this.show(this.first_tab)}},delRemovable:function(){for(var d in this.list){var c=this.list[d];if(c.removable){this.del(d)}}},show:function(c){this.$el.fadeIn("fast");this.visible=true;if(c){this.list[c].$title.find("a").tab("show")}},hide:function(){this.$el.fadeOut("fast");this.visible=false},hideOperation:function(c){this.$nav.find("#"+c).hide()},showOperation:function(c){this.$nav.find("#"+c).show()},setOperation:function(e,d){var c=this.$nav.find("#"+e);c.off("click");c.on("click",d)},title:function(e,d){var c=this.list[e].$title.find("#text");if(d){c.html(d)}return c.html()},_template:function(c){return'<div class="tabbable tabs-left"><ul class="tab-navigation nav nav-tabs"/><div class="tab-content"/></div>'},_template_tab_new:function(c){return'<li id="new-tab"><a href="javascript:void(0);"><i style="font-size: 0.8em; margin-right: 5px;" class="fa fa-plus-circle"/>'+c.title_new+"</a></li>"},_template_tab:function(d){var c='<li id="title-'+d.id+'"><a title="" href="#tab-'+d.id+'" data-toggle="tab" data-original-title=""><span id="text">'+d.title+"</span>";if(d.ondel){c+='<i id="delete" style="font-size: 0.8em; margin-left: 5px; cursor: pointer;" class="fa fa-minus-circle"/>'}c+="</a></li>";return c},_template_tab_content:function(c){return'<div id="tab-'+c.id+'" class="tab-pane"/>'}});return{View:b}}); \ No newline at end of file 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.