From ee5734dc2fa9d05c9d223fe37eb8a09c00d1bcf6 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 10 Mar 2015 03:33:31 -0400
Subject: [PATCH] Ui: Fix element styles, fix missing id

---
 client/galaxy/scripts/mvc/ui/ui-misc.js | 2 +-
 static/scripts/mvc/ui/ui-misc.js        | 2 +-
 static/scripts/packed/mvc/ui/ui-misc.js | 2 +-
 static/style/blue/base.css              | 6 +++---
 static/style/src/less/ui.less           | 3 +++
 5 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/client/galaxy/scripts/mvc/ui/ui-misc.js b/client/galaxy/scripts/mvc/ui/ui-misc.js
index f1d49263f34..920bdb87b1a 100644
--- a/client/galaxy/scripts/mvc/ui/ui-misc.js
+++ b/client/galaxy/scripts/mvc/ui/ui-misc.js
@@ -229,7 +229,7 @@ var ButtonIcon = Backbone.View.extend({
         }
 
         // string
-        var str =   '<div id="' + options.uid+ '" style="float: ' + options.floating + '; ' + width + '" class="' + options.cls + '">';
+        var str =   '<div id="' + options.id + '" style="float: ' + options.floating + '; ' + width + '" class="' + options.cls + '">';
 
         // title
         if (options.title) {
diff --git a/static/scripts/mvc/ui/ui-misc.js b/static/scripts/mvc/ui/ui-misc.js
index f1d49263f34..920bdb87b1a 100644
--- a/static/scripts/mvc/ui/ui-misc.js
+++ b/static/scripts/mvc/ui/ui-misc.js
@@ -229,7 +229,7 @@ var ButtonIcon = Backbone.View.extend({
         }
 
         // string
-        var str =   '<div id="' + options.uid+ '" style="float: ' + options.floating + '; ' + width + '" class="' + options.cls + '">';
+        var str =   '<div id="' + options.id + '" style="float: ' + options.floating + '; ' + width + '" class="' + options.cls + '">';
 
         // title
         if (options.title) {
diff --git a/static/scripts/packed/mvc/ui/ui-misc.js b/static/scripts/packed/mvc/ui/ui-misc.js
index 3cbafecd726..0b5747f402a 100644
--- a/static/scripts/packed/mvc/ui/ui-misc.js
+++ b/static/scripts/packed/mvc/ui/ui-misc.js
@@ -1 +1 @@
-define(["utils/utils","mvc/ui/ui-select-default","mvc/ui/ui-slider","mvc/ui/ui-options","mvc/ui/ui-drilldown","mvc/ui/ui-button-menu","mvc/ui/ui-button-check","mvc/ui/ui-modal"],function(e,h,i,m,l,r,d,b){var q=Backbone.View.extend({optionsDefault:{url:"",cls:""},initialize:function(s){this.options=e.merge(s,this.optionsDefault);this.setElement(this._template(this.options))},_template:function(s){return'<img class="ui-image '+s.cls+'" src="'+s.url+'"/>'}});var j=Backbone.View.extend({optionsDefault:{title:"",cls:""},initialize:function(s){this.options=e.merge(s,this.optionsDefault);this.setElement(this._template(this.options))},title:function(s){this.$el.html(s)},_template:function(s){return'<label class="ui-label '+s.cls+'">'+s.title+"</label>"},value:function(){return options.title}});var c=Backbone.View.extend({optionsDefault:{floating:"right",icon:"",tooltip:"",placement:"bottom",title:"",cls:""},initialize:function(s){this.options=e.merge(s,this.optionsDefault);this.setElement(this._template(this.options));$(this.el).tooltip({title:s.tooltip,placement:"bottom"})},_template:function(s){return'<div><span class="fa '+s.icon+'" class="ui-icon"/>&nbsp;'+s.title+"</div>"}});var g=Backbone.View.extend({optionsDefault:{id:e.uid(),title:"",floating:"right",cls:"ui-button btn btn-default",icon:""},initialize:function(s){this.options=e.merge(s,this.optionsDefault);this.setElement(this._template(this.options));$(this.el).on("click",function(){$(".tooltip").hide();if(s.onclick){s.onclick()}});$(this.el).tooltip({title:s.tooltip,placement:"bottom"})},wait:function(){this.$el.removeClass(this.options.cls).addClass("btn btn-info").prop("disabled",true);this.$(".icon").removeClass(this.options.icon).addClass("fa-spinner fa-spin");this.$(".title").html("Sending...")},unwait:function(){this.$el.removeClass("btn btn-info").addClass(this.options.cls).prop("disabled",false);this.$(".icon").removeClass("fa-spinner fa-spin").addClass(this.options.icon);this.$(".title").html(this.options.title)},_template:function(s){var t='<button id="'+s.id+'" type="submit" style="float: '+s.floating+';" type="button" class="'+s.cls+'">';if(s.icon){t+='<i class="icon fa '+s.icon+'"></i>&nbsp;'}t+='<span class="title">'+s.title+"</span></button>";return t}});var o=Backbone.View.extend({optionsDefault:{id:e.uid(),title:"",floating:"right",cls:"ui-button-icon",icon:"",tooltip:"",onclick:null},initialize:function(t){this.options=e.merge(t,this.optionsDefault);this.setElement(this._template(this.options));this.$button=this.$el.find(".button");var s=this;$(this.el).on("click",function(){$(".tooltip").hide();if(t.onclick&&!s.disabled){t.onclick()}});$(this.el).tooltip({title:t.tooltip,placement:"bottom"})},disable:function(){this.$button.addClass("disabled");this.disabled=true},enable:function(){this.$button.removeClass("disabled");this.disabled=false},setIcon:function(s){this.$("i").removeClass(this.options.icon).addClass(s);this.options.icon=s},_template:function(s){var t="";if(s.title){t="width: auto;"}var u='<div id="'+s.uid+'" style="float: '+s.floating+"; "+t+'" class="'+s.cls+'">';if(s.title){u+='<div class="button"><i class="icon fa '+s.icon+'"/>&nbsp;<span class="title">'+s.title+"</span></div>"}else{u+='<i class="icon fa '+s.icon+'"/>'}u+="</div>";return u}});var p=Backbone.View.extend({optionsDefault:{title:"",cls:""},initialize:function(s){this.options=e.merge(s,this.optionsDefault);this.setElement(this._template(this.options));$(this.el).on("click",s.onclick)},_template:function(s){return'<div><a href="javascript:void(0)" class="ui-anchor '+s.cls+'">'+s.title+"</a></div>"}});var a=Backbone.View.extend({optionsDefault:{message:null,status:"info",persistent:false},initialize:function(s){this.options=e.merge(s,this.optionsDefault);this.setElement("<div></div>");if(this.options.message){this.update(this.options)}},update:function(t){this.options=e.merge(t,this.optionsDefault);if(t.message!=""){this.$el.html(this._template(this.options));this.$el.find(".alert").append(t.message);this.$el.fadeIn();if(this.timeout){window.clearTimeout(this.timeout)}if(!t.persistent){var s=this;this.timeout=window.setTimeout(function(){if(s.$el.is(":visible")){s.$el.fadeOut()}else{s.$el.hide()}},3000)}}else{this.$el.fadeOut()}},_template:function(s){return'<div class="ui-message alert alert-'+s.status+'"/>'}});var f=Backbone.View.extend({optionsDefault:{onclick:null,searchword:""},initialize:function(t){this.options=e.merge(t,this.optionsDefault);this.setElement(this._template(this.options));var s=this;if(this.options.onclick){this.$el.on("submit",function(v){var u=s.$el.find("#search");s.options.onclick(u.val())})}},_template:function(s){return'<div class="ui-search"><form onsubmit="return false;"><input id="search" class="form-control input-sm" type="text" name="search" placeholder="Search..." value="'+s.searchword+'"><button type="submit" class="btn search-btn"><i class="fa fa-search"></i></button></form></div>'}});var n=Backbone.View.extend({optionsDefault:{type:"text",placeholder:"",disabled:false,visible:true,cls:"",area:false},initialize:function(t){this.options=e.merge(t,this.optionsDefault);this.setElement(this._template(this.options));if(this.options.value!==undefined){this.value(this.options.value)}if(this.options.disabled){this.$el.prop("disabled",true)}if(!this.options.visible){this.$el.hide()}var s=this;this.$el.on("input",function(){if(s.options.onchange){s.options.onchange(s.$el.val())}})},value:function(s){if(s!==undefined){this.$el.val(s)}return this.$el.val()},_template:function(s){if(s.area){return'<textarea id="'+s.id+'" class="ui-textarea '+s.cls+'"></textarea>'}else{return'<input id="'+s.id+'" type="'+s.type+'" value="'+s.value+'" placeholder="'+s.placeholder+'" class="ui-input '+s.cls+'">'}}});var k=Backbone.View.extend({initialize:function(s){this.options=s;this.setElement(this._template(this.options));if(this.options.value!==undefined){this.value(this.options.value)}},value:function(s){if(s!==undefined){this.$("hidden").val(s)}return this.$("hidden").val()},_template:function(t){var s='<div id="'+t.id+'" >';if(t.info){s+="<div>"+t.info+"</div>"}s+='<hidden value="'+t.value+'"/></div>';return s}});return{Anchor:p,Button:g,ButtonIcon:o,ButtonCheck:d,ButtonMenu:r,Icon:c,Image:q,Input:n,Label:j,Message:a,Modal:b,RadioButton:m.RadioButton,Checkbox:m.Checkbox,Radio:m.Radio,Searchbox:f,Select:h,Hidden:k,Slider:i,Drilldown:l}});
\ No newline at end of file
+define(["utils/utils","mvc/ui/ui-select-default","mvc/ui/ui-slider","mvc/ui/ui-options","mvc/ui/ui-drilldown","mvc/ui/ui-button-menu","mvc/ui/ui-button-check","mvc/ui/ui-modal"],function(e,h,i,m,l,r,d,b){var q=Backbone.View.extend({optionsDefault:{url:"",cls:""},initialize:function(s){this.options=e.merge(s,this.optionsDefault);this.setElement(this._template(this.options))},_template:function(s){return'<img class="ui-image '+s.cls+'" src="'+s.url+'"/>'}});var j=Backbone.View.extend({optionsDefault:{title:"",cls:""},initialize:function(s){this.options=e.merge(s,this.optionsDefault);this.setElement(this._template(this.options))},title:function(s){this.$el.html(s)},_template:function(s){return'<label class="ui-label '+s.cls+'">'+s.title+"</label>"},value:function(){return options.title}});var c=Backbone.View.extend({optionsDefault:{floating:"right",icon:"",tooltip:"",placement:"bottom",title:"",cls:""},initialize:function(s){this.options=e.merge(s,this.optionsDefault);this.setElement(this._template(this.options));$(this.el).tooltip({title:s.tooltip,placement:"bottom"})},_template:function(s){return'<div><span class="fa '+s.icon+'" class="ui-icon"/>&nbsp;'+s.title+"</div>"}});var g=Backbone.View.extend({optionsDefault:{id:e.uid(),title:"",floating:"right",cls:"ui-button btn btn-default",icon:""},initialize:function(s){this.options=e.merge(s,this.optionsDefault);this.setElement(this._template(this.options));$(this.el).on("click",function(){$(".tooltip").hide();if(s.onclick){s.onclick()}});$(this.el).tooltip({title:s.tooltip,placement:"bottom"})},wait:function(){this.$el.removeClass(this.options.cls).addClass("btn btn-info").prop("disabled",true);this.$(".icon").removeClass(this.options.icon).addClass("fa-spinner fa-spin");this.$(".title").html("Sending...")},unwait:function(){this.$el.removeClass("btn btn-info").addClass(this.options.cls).prop("disabled",false);this.$(".icon").removeClass("fa-spinner fa-spin").addClass(this.options.icon);this.$(".title").html(this.options.title)},_template:function(s){var t='<button id="'+s.id+'" type="submit" style="float: '+s.floating+';" type="button" class="'+s.cls+'">';if(s.icon){t+='<i class="icon fa '+s.icon+'"></i>&nbsp;'}t+='<span class="title">'+s.title+"</span></button>";return t}});var o=Backbone.View.extend({optionsDefault:{id:e.uid(),title:"",floating:"right",cls:"ui-button-icon",icon:"",tooltip:"",onclick:null},initialize:function(t){this.options=e.merge(t,this.optionsDefault);this.setElement(this._template(this.options));this.$button=this.$el.find(".button");var s=this;$(this.el).on("click",function(){$(".tooltip").hide();if(t.onclick&&!s.disabled){t.onclick()}});$(this.el).tooltip({title:t.tooltip,placement:"bottom"})},disable:function(){this.$button.addClass("disabled");this.disabled=true},enable:function(){this.$button.removeClass("disabled");this.disabled=false},setIcon:function(s){this.$("i").removeClass(this.options.icon).addClass(s);this.options.icon=s},_template:function(s){var t="";if(s.title){t="width: auto;"}var u='<div id="'+s.id+'" style="float: '+s.floating+"; "+t+'" class="'+s.cls+'">';if(s.title){u+='<div class="button"><i class="icon fa '+s.icon+'"/>&nbsp;<span class="title">'+s.title+"</span></div>"}else{u+='<i class="icon fa '+s.icon+'"/>'}u+="</div>";return u}});var p=Backbone.View.extend({optionsDefault:{title:"",cls:""},initialize:function(s){this.options=e.merge(s,this.optionsDefault);this.setElement(this._template(this.options));$(this.el).on("click",s.onclick)},_template:function(s){return'<div><a href="javascript:void(0)" class="ui-anchor '+s.cls+'">'+s.title+"</a></div>"}});var a=Backbone.View.extend({optionsDefault:{message:null,status:"info",persistent:false},initialize:function(s){this.options=e.merge(s,this.optionsDefault);this.setElement("<div></div>");if(this.options.message){this.update(this.options)}},update:function(t){this.options=e.merge(t,this.optionsDefault);if(t.message!=""){this.$el.html(this._template(this.options));this.$el.find(".alert").append(t.message);this.$el.fadeIn();if(this.timeout){window.clearTimeout(this.timeout)}if(!t.persistent){var s=this;this.timeout=window.setTimeout(function(){if(s.$el.is(":visible")){s.$el.fadeOut()}else{s.$el.hide()}},3000)}}else{this.$el.fadeOut()}},_template:function(s){return'<div class="ui-message alert alert-'+s.status+'"/>'}});var f=Backbone.View.extend({optionsDefault:{onclick:null,searchword:""},initialize:function(t){this.options=e.merge(t,this.optionsDefault);this.setElement(this._template(this.options));var s=this;if(this.options.onclick){this.$el.on("submit",function(v){var u=s.$el.find("#search");s.options.onclick(u.val())})}},_template:function(s){return'<div class="ui-search"><form onsubmit="return false;"><input id="search" class="form-control input-sm" type="text" name="search" placeholder="Search..." value="'+s.searchword+'"><button type="submit" class="btn search-btn"><i class="fa fa-search"></i></button></form></div>'}});var n=Backbone.View.extend({optionsDefault:{type:"text",placeholder:"",disabled:false,visible:true,cls:"",area:false},initialize:function(t){this.options=e.merge(t,this.optionsDefault);this.setElement(this._template(this.options));if(this.options.value!==undefined){this.value(this.options.value)}if(this.options.disabled){this.$el.prop("disabled",true)}if(!this.options.visible){this.$el.hide()}var s=this;this.$el.on("input",function(){if(s.options.onchange){s.options.onchange(s.$el.val())}})},value:function(s){if(s!==undefined){this.$el.val(s)}return this.$el.val()},_template:function(s){if(s.area){return'<textarea id="'+s.id+'" class="ui-textarea '+s.cls+'"></textarea>'}else{return'<input id="'+s.id+'" type="'+s.type+'" value="'+s.value+'" placeholder="'+s.placeholder+'" class="ui-input '+s.cls+'">'}}});var k=Backbone.View.extend({initialize:function(s){this.options=s;this.setElement(this._template(this.options));if(this.options.value!==undefined){this.value(this.options.value)}},value:function(s){if(s!==undefined){this.$("hidden").val(s)}return this.$("hidden").val()},_template:function(t){var s='<div id="'+t.id+'" >';if(t.info){s+="<div>"+t.info+"</div>"}s+='<hidden value="'+t.value+'"/></div>';return s}});return{Anchor:p,Button:g,ButtonIcon:o,ButtonCheck:d,ButtonMenu:r,Icon:c,Image:q,Input:n,Label:j,Message:a,Modal:b,RadioButton:m.RadioButton,Checkbox:m.Checkbox,Radio:m.Radio,Searchbox:f,Select:h,Hidden:k,Slider:i,Drilldown:l}});
\ No newline at end of file
diff --git a/static/style/blue/base.css b/static/style/blue/base.css
index 34b521f6d95..eb650bc694c 100644
--- a/static/style/blue/base.css
+++ b/static/style/blue/base.css
@@ -1419,7 +1419,7 @@ html[dir="rtl"] .select2-container-multi .select2-search-choice-close{left:auto;
 .ui-message{padding:2px 10px 2px 10px;margin:0px}
 .ui-icon{font-size:1.2em}
 .ui-button-icon{height:auto !important}.ui-button-icon ul i{font-size:1.2em;margin-right:5px;position:relative;top:1px}
-.ui-button-icon .button{margin-right:5px;margin-left:5px}.ui-button-icon .button .title{position:relative;font-size:0.8em;font-weight:normal;top:-1px}
+.ui-button-icon .button{margin-right:5px;margin-left:5px}.ui-button-icon .button .title{position:relative;font-size:0.8em;font-weight:normal;top:-1px;word-break:break-word}
 .ui-button-icon .button.disabled{filter:alpha(opacity=65);opacity:.65;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=65);filter:alpha(opacity=65)}
 .ui-button-menu .dropdown-menu{min-width:50px}
 .ui-button-menu .dropdown-item{text-align:left}
@@ -1429,12 +1429,12 @@ html[dir="rtl"] .select2-container-multi .select2-search-choice-close{left:auto;
 .ui-table tbody,.ui-table-plain tbody{cursor:pointer}
 .ui-table-plain{table-layout:fixed}.ui-table-plain tbody{cursor:auto !important}.ui-table-plain tbody td{padding:0px !important;border:none !important}
 .ui-table-plain .ui-table-section{border-left:solid 3px #ebd9b2;border-radius:5px !important;margin-bottom:5px;padding-left:10px}
-.ui-table-form-element{margin-top:5px;margin-bottom:5px;overflow:visible}.ui-table-form-element .ui-table-form-title{font-weight:bold}.ui-table-form-element .ui-table-form-title .ui-table-form-optional{cursor:pointer}.ui-table-form-element .ui-table-form-title .ui-table-form-optional .icon{margin-right:5px;font-size:1.2em}
+.ui-table-form-element{margin-top:5px;margin-bottom:5px;overflow:visible}.ui-table-form-element .ui-table-form-title{word-break:break-word;font-weight:bold}.ui-table-form-element .ui-table-form-title .ui-table-form-optional{cursor:pointer}.ui-table-form-element .ui-table-form-title .ui-table-form-optional .icon{margin-right:5px;font-size:1.2em}
 .ui-table-form-element .ui-table-form-field{margin-top:5px}
 .ui-table-form-separator{font-weight:bold;font-size:0.9em}
 .ui-table-form-info{clear:both !important}
 .ui-table-form-error{display:none}.ui-table-form-error .ui-table-form-error-text{padding-left:5px}
-.ui-portlet,.ui-portlet-repeat,.ui-portlet-limited,.ui-portlet-section,.ui-portlet-narrow{border:solid #d6b161 1px;border-radius:3px;position:relative;clear:both;width:auto;height:100%}.ui-portlet .portlet-header,.ui-portlet-limited .portlet-header,.ui-portlet-narrow .portlet-header{background:#ebd9b2;border-bottom:solid #d6b161 1px;padding:2px 8px;overflow:visible;float:right;width:100%}.ui-portlet .portlet-header .portlet-title,.ui-portlet-limited .portlet-header .portlet-title,.ui-portlet-narrow .portlet-header .portlet-title{display:inline;vertical-align:middle}.ui-portlet .portlet-header .portlet-title .portlet-title-text,.ui-portlet-limited .portlet-header .portlet-title .portlet-title-text,.ui-portlet-narrow .portlet-header .portlet-title .portlet-title-text{vertical-align:middle;line-height:22px}
+.ui-portlet,.ui-portlet-repeat,.ui-portlet-limited,.ui-portlet-section,.ui-portlet-narrow{border:solid #d6b161 1px;border-radius:3px;position:relative;clear:both;width:auto;height:100%}.ui-portlet .portlet-header,.ui-portlet-limited .portlet-header,.ui-portlet-narrow .portlet-header{background:#ebd9b2;border-bottom:solid #d6b161 1px;padding:2px 8px;overflow:visible;float:right;width:100%}.ui-portlet .portlet-header .portlet-title,.ui-portlet-limited .portlet-header .portlet-title,.ui-portlet-narrow .portlet-header .portlet-title{word-break:break-word;display:inline;vertical-align:middle}.ui-portlet .portlet-header .portlet-title .portlet-title-text,.ui-portlet-limited .portlet-header .portlet-title .portlet-title-text,.ui-portlet-narrow .portlet-header .portlet-title .portlet-title-text{vertical-align:middle;line-height:22px}
 .ui-portlet .portlet-header .portlet-title .icon,.ui-portlet-limited .portlet-header .portlet-title .icon,.ui-portlet-narrow .portlet-header .portlet-title .icon{font-size:1.2em;vertical-align:middle}
 .ui-portlet .portlet-header .portlet-operations .ui-button-icon,.ui-portlet-limited .portlet-header .portlet-operations .ui-button-icon,.ui-portlet-narrow .portlet-header .portlet-operations .ui-button-icon{margin-left:5px}
 .ui-portlet .portlet-content,.ui-portlet-limited .portlet-content,.ui-portlet-narrow .portlet-content{height:inherit;padding-left:10px;padding-right:10px;clear:both}.ui-portlet .portlet-content .content,.ui-portlet-limited .portlet-content .content,.ui-portlet-narrow .portlet-content .content{padding:0px;height:100%;width:100%}
diff --git a/static/style/src/less/ui.less b/static/style/src/less/ui.less
index 72bb0ed85e8..9cab0ec90bf 100644
--- a/static/style/src/less/ui.less
+++ b/static/style/src/less/ui.less
@@ -72,6 +72,7 @@
             font-size: 0.8em;
             font-weight: normal;
             top: -1px;
+            word-break:break-word;
         }
     }
     .button.disabled {
@@ -146,6 +147,7 @@
 // table form elements
 .ui-table-form-element {
     .ui-table-form-title {
+        word-break: break-word;
         font-weight: bold;
         .ui-table-form-optional {
             cursor: pointer;
@@ -198,6 +200,7 @@
         float: right;
         width:100%;
         .portlet-title {
+            word-break: break-word;
             display: inline;
             vertical-align: middle;
             .portlet-title-text {