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

Ui: Fix title function in portlets

Browse Source
This commit is contained in:
Aysam Guerler
2014-02-24 02:17:36 -05:00
parent 8590ae14dd
commit fd9cc0264a
7 changed files with 50 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config/plugins/visualizations/charts/static/app.js
+17 -1
View File
@@ -40,7 +40,7 @@ return Backbone.View.extend(
// create portlet
if (!this.options.config.widget) {
this.portlet = new Portlet.View({icon : 'fa-bar-chart-o', title : 'Charts'});
this.portlet = new Portlet.View({icon : 'fa-bar-chart-o'});
} else {
this.portlet = $('<div></div>');
}
@@ -64,6 +64,22 @@ return Backbone.View.extend(
this.config.on('change:current_view', function() {
self._showCurrent();
});
this.config.on('change:title', function() {
self._refreshTitle();
});
// render
this.render();
},
// render
render: function() {
this._refreshTitle();
},
// refresh title
_refreshTitle: function() {
this.portlet.title('Charts - ' + this.config.get('title'));
},
// current view
config/plugins/visualizations/charts/static/models/config.js
+2 -1
View File
@@ -9,7 +9,8 @@ return Backbone.Model.extend(
defaults : {
query_limit : 20,
query_pace : 1000,
query_max : 5
query_max : 5,
title : 'Create a new chart'
}
});
config/plugins/visualizations/charts/static/views/chart.js
+15 -7
View File
@@ -23,11 +23,6 @@ return Backbone.View.extend(
// configure options
this.options = Utils.merge(options, this.optionsDefault);
// main elements
this.message = new Ui.Message();
this.title = new Ui.Input({placeholder: 'Chart title'});
this.dataset = new Ui.Input({value : app.options.dataset.id, disabled: true, visible: false});
//
// table with chart types
//
@@ -115,9 +110,21 @@ return Backbone.View.extend(
}
});
// construct element
//
// main/default tab
//
// construct elements
this.title = new Ui.Input({
placeholder: 'Chart title',
onchange: function() {
self.app.config.set('title', self.title.value());
}
});
this.dataset = new Ui.Input({value : app.options.dataset.id, disabled: true, visible: false});
// append element
var $settings = $('<div/>');
$settings.append(Utils.wrap(this.message.$el));
$settings.append(Utils.wrap((new Ui.Label({ title : 'Provide a chart title:'})).$el));
$settings.append(Utils.wrap(this.title.$el));
$settings.append(Utils.wrap((new Ui.Label({ title : 'Select a chart type:'})).$el));
@@ -140,6 +147,7 @@ return Backbone.View.extend(
var self = this;
this.chart.on('change:title', function(chart) {
self.title.value(chart.get('title'));
self.app.config.set('title', chart.get('title'));
});
this.chart.on('change:type', function(chart) {
self.table.value(chart.get('type'));
config/plugins/visualizations/charts/static/views/charts.js
+7
View File
@@ -25,6 +25,13 @@ return Backbone.View.extend(
self.app.chart_view.$el.show();
},
onchange : function(chart_id) {
// get chart
var chart = self.app.charts.get(chart_id);
// update main title
self.app.config.set('title', chart.get('title'));
// show viewport
self.app.viewport_view.show(chart_id);
}
});
config/plugins/visualizations/charts/static/views/viewport.js
+1 -2
View File
@@ -25,8 +25,7 @@ return Backbone.View.extend(
// add table to portlet
this.portlet = new Portlet.View({
title : '',
icon : 'fa-signal',
title : 'title',
height : this.options.height,
overflow : 'hidden',
operations : {
static/scripts/mvc/ui/ui-portlet.js
+7 -3
View File
@@ -10,7 +10,7 @@ var View = Backbone.View.extend(
// defaults options
optionsDefault: {
title : '',
icon : 'fa-tasks',
icon : '',
buttons : null,
body : null,
height : null,
@@ -20,6 +20,7 @@ var View = Backbone.View.extend(
},
// elements
$title : null,
$content : null,
$buttons : null,
$operations : null,
@@ -35,6 +36,9 @@ var View = Backbone.View.extend(
// link content
this.$content = this.$el.find('#content');
// link title
this.$title = this.$el.find('#title-text');
// set content height
if (this.options.height) {
this.$el.find('#body').css('height', this.options.height);
@@ -128,7 +132,7 @@ var View = Backbone.View.extend(
// title
title: function(new_title) {
var $el = this.$el.find('#title');
var $el = this.$title;
if (new_title) {
$el.html(new_title);
}
@@ -147,7 +151,7 @@ var View = Backbone.View.extend(
if (options.icon)
tmpl += '<i style="padding-top: 3px; float: left; font-size: 1.2em" class="icon fa ' + options.icon + '">&nbsp;</i>';
tmpl += '<div id="title" style="padding-top: 2px; float: left;">' + options.title + '</div>';
tmpl += '<div id="title-text" style="padding-top: 2px; float: left;">' + options.title + '</div>';
tmpl += '</div>' +
'</div>';
static/scripts/packed/mvc/ui/ui-portlet.js
+1 -1
View File
@@ -1 +1 @@
define(["utils/utils"],function(a){var b=Backbone.View.extend({visible:false,optionsDefault:{title:"",icon:"fa-tasks",buttons:null,body:null,height:null,operations:null,placement:"bottom",overflow:"auto"},$content:null,$buttons:null,$operations:null,initialize:function(d){this.options=a.merge(d,this.optionsDefault);this.setElement(this._template(this.options));this.$content=this.$el.find("#content");if(this.options.height){this.$el.find("#body").css("height",this.options.height);this.$el.find("#content").css("overflow",this.options.overflow)}this.$buttons=$(this.el).find("#buttons");if(this.options.buttons){var c=this;$.each(this.options.buttons,function(e,f){f.$el.prop("id",e);c.$buttons.append(f.$el)})}else{this.$buttons.remove()}this.$operations=$(this.el).find("#operations");if(this.options.operations){var c=this;$.each(this.options.operations,function(e,f){f.$el.prop("id",e);c.$operations.append(f.$el)})}if(this.options.body){this.append(this.options.body)}},append:function(c){this.$content.append(a.wrap(c))},content:function(){return this.$content},show:function(){this.$el.fadeIn("fast");this.visible=true},hide:function(){this.$el.fadeOut("fast");this.visible=false},enableButton:function(c){this.$buttons.find("#"+c).prop("disabled",false)},disableButton:function(c){this.$buttons.find("#"+c).prop("disabled",true)},hideOperation:function(c){this.$operations.find("#"+c).hide()},showOperation:function(c){this.$operations.find("#"+c).show()},setOperation:function(e,d){var c=this.$operations.find("#"+e);c.off("click");c.on("click",d)},title:function(d){var c=this.$el.find("#title");if(d){c.html(d)}return c.html()},_template:function(d){var c='<div class="toolForm">';if(d.title||d.icon){c+='<div id="title" class="toolFormTitle" style="overflow:hidden;"><div id="operations" style="float: right;"></div><div style="overflow: hidden">';if(d.icon){c+='<i style="padding-top: 3px; float: left; font-size: 1.2em" class="icon fa '+d.icon+'">&nbsp;</i>'}c+='<div id="title" style="padding-top: 2px; float: left;">'+d.title+"</div>";c+="</div></div>"}c+='<div id="body" class="toolFormBody">';if(d.placement=="top"){c+='<div id="buttons" class="buttons" style="height: 50px; padding: 10px;"></div>'}c+='<div id="content" class="content" style="height: inherit; padding: 10px;"></div>';if(d.placement=="bottom"){c+='<div id="buttons" class="buttons" style="height: 50px; padding: 10px;"></div>'}c+="</div></div>";return c}});return{View:b}});
define(["utils/utils"],function(a){var b=Backbone.View.extend({visible:false,optionsDefault:{title:"",icon:"",buttons:null,body:null,height:null,operations:null,placement:"bottom",overflow:"auto"},$title:null,$content:null,$buttons:null,$operations:null,initialize:function(d){this.options=a.merge(d,this.optionsDefault);this.setElement(this._template(this.options));this.$content=this.$el.find("#content");this.$title=this.$el.find("#title-text");if(this.options.height){this.$el.find("#body").css("height",this.options.height);this.$el.find("#content").css("overflow",this.options.overflow)}this.$buttons=$(this.el).find("#buttons");if(this.options.buttons){var c=this;$.each(this.options.buttons,function(e,f){f.$el.prop("id",e);c.$buttons.append(f.$el)})}else{this.$buttons.remove()}this.$operations=$(this.el).find("#operations");if(this.options.operations){var c=this;$.each(this.options.operations,function(e,f){f.$el.prop("id",e);c.$operations.append(f.$el)})}if(this.options.body){this.append(this.options.body)}},append:function(c){this.$content.append(a.wrap(c))},content:function(){return this.$content},show:function(){this.$el.fadeIn("fast");this.visible=true},hide:function(){this.$el.fadeOut("fast");this.visible=false},enableButton:function(c){this.$buttons.find("#"+c).prop("disabled",false)},disableButton:function(c){this.$buttons.find("#"+c).prop("disabled",true)},hideOperation:function(c){this.$operations.find("#"+c).hide()},showOperation:function(c){this.$operations.find("#"+c).show()},setOperation:function(e,d){var c=this.$operations.find("#"+e);c.off("click");c.on("click",d)},title:function(d){var c=this.$title;if(d){c.html(d)}return c.html()},_template:function(d){var c='<div class="toolForm">';if(d.title||d.icon){c+='<div id="title" class="toolFormTitle" style="overflow:hidden;"><div id="operations" style="float: right;"></div><div style="overflow: hidden">';if(d.icon){c+='<i style="padding-top: 3px; float: left; font-size: 1.2em" class="icon fa '+d.icon+'">&nbsp;</i>'}c+='<div id="title-text" style="padding-top: 2px; float: left;">'+d.title+"</div>";c+="</div></div>"}c+='<div id="body" class="toolFormBody">';if(d.placement=="top"){c+='<div id="buttons" class="buttons" style="height: 50px; padding: 10px;"></div>'}c+='<div id="content" class="content" style="height: inherit; padding: 10px;"></div>';if(d.placement=="bottom"){c+='<div id="buttons" class="buttons" style="height: 50px; padding: 10px;"></div>'}c+="</div></div>";return c}});return{View:b}});