Select2 enhancements: (a) bump up z-index so that select2 works in modal dialogs; (b) add select2 to base_panels for pervasive access and remove from individual templates; and (c) use select2 in Trackster and discontinue use of custom jQuery combobox.

This commit is contained in:
Jeremy Goecks
2013-05-10 09:38:51 -04:00
parent 48ce61706f
commit d25ab705b2
6 changed files with 7 additions and 10 deletions
+2 -2
View File
@@ -831,11 +831,11 @@ ul.icons{list-style-type:none;text-indent:-0.75em;}ul.icons li [class^="fa-icon-
.select2-container .select2-choice span{margin-right:26px;display:block;overflow:hidden;white-space:nowrap;-o-text-overflow:ellipsis;-ms-text-overflow:ellipsis;text-overflow:ellipsis;}
.select2-container .select2-choice abbr{display:block;position:absolute;right:26px;top:8px;width:12px;height:12px;font-size:1px;background:url('../images/select2.png') right top no-repeat;cursor:pointer;text-decoration:none;border:0;outline:0;}
.select2-container .select2-choice abbr:hover{background-position:right -11px;cursor:pointer;}
.select2-drop{background:#fff;color:#000;border:1px solid #aaa;border-top:0;position:absolute;top:100%;-webkit-box-shadow:0 4px 5px rgba(0, 0, 0, 0.15);-moz-box-shadow:0 4px 5px rgba(0, 0, 0, 0.15);-o-box-shadow:0 4px 5px rgba(0, 0, 0, 0.15);box-shadow:0 4px 5px rgba(0, 0, 0, 0.15);z-index:9999;width:100%;margin-top:-1px;-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;}
.select2-drop{background:#fff;color:#000;border:1px solid #aaa;border-top:0;position:absolute;top:100%;-webkit-box-shadow:0 4px 5px rgba(0, 0, 0, 0.15);-moz-box-shadow:0 4px 5px rgba(0, 0, 0, 0.15);-o-box-shadow:0 4px 5px rgba(0, 0, 0, 0.15);box-shadow:0 4px 5px rgba(0, 0, 0, 0.15);z-index:24999;width:100%;margin-top:-1px;-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;}
.select2-drop.select2-drop-above{-webkit-border-radius:4px 4px 0px 0px;-moz-border-radius:4px 4px 0px 0px;border-radius:4px 4px 0px 0px;margin-top:1px;border-top:1px solid #aaa;border-bottom:0;-webkit-box-shadow:0 -4px 5px rgba(0, 0, 0, 0.15);-moz-box-shadow:0 -4px 5px rgba(0, 0, 0, 0.15);-o-box-shadow:0 -4px 5px rgba(0, 0, 0, 0.15);box-shadow:0 -4px 5px rgba(0, 0, 0, 0.15);}
.select2-container .select2-choice div{-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;background:#ccc;background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0, #cccccc), color-stop(0.6, #eeeeee));background-image:-webkit-linear-gradient(center bottom, #cccccc 0%, #eeeeee 60%);background-image:-moz-linear-gradient(center bottom, #cccccc 0%, #eeeeee 60%);background-image:-o-linear-gradient(bottom, #cccccc 0%, #eeeeee 60%);background-image:-ms-linear-gradient(top, #cccccc 0%, #eeeeee 60%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#eeeeee', GradientType=0);background-image:linear-gradient(top, #cccccc 0%, #eeeeee 60%);border-left:1px solid #aaa;position:absolute;right:0;top:0;display:block;height:100%;width:18px;}
.select2-container .select2-choice div b{background:url('../images/select2.png') no-repeat 0 1px;display:block;width:100%;height:100%;}
.select2-search{display:inline-block;white-space:nowrap;z-index:10000;min-height:26px;width:100%;margin:0;padding-left:4px;padding-right:4px;}
.select2-search{display:inline-block;white-space:nowrap;z-index:25000;min-height:26px;width:100%;margin:0;padding-left:4px;padding-right:4px;}
.select2-search-hidden{display:block;position:absolute;left:-10000px;}
.select2-search input{background:#ffffff url('../images/select2.png') no-repeat 100% -22px;background:url('../images/select2.png') no-repeat 100% -22px,-webkit-gradient(linear, left bottom, left top, color-stop(0.85, #ffffff), color-stop(0.99, #eeeeee));background:url('../images/select2.png') no-repeat 100% -22px,-webkit-linear-gradient(center bottom, #ffffff 85%, #eeeeee 99%);background:url('../images/select2.png') no-repeat 100% -22px,-moz-linear-gradient(center bottom, #ffffff 85%, #eeeeee 99%);background:url('../images/select2.png') no-repeat 100% -22px,-o-linear-gradient(bottom, #ffffff 85%, #eeeeee 99%);background:url('../images/select2.png') no-repeat 100% -22px,-ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%);background:url('../images/select2.png') no-repeat 100% -22px,linear-gradient(top, #ffffff 85%, #eeeeee 99%);padding:4px 20px 4px 5px;outline:0;border:1px solid #aaa;font-family:sans-serif;font-size:1em;width:100%;margin:0;height:auto !important;min-height:26px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;}
.select2-drop.select2-drop-above .select2-search input{margin-top:4px;}
+2 -2
View File
@@ -109,7 +109,7 @@ Version: 3.2 Timestamp: Mon Sep 10 10:38:04 PDT 2012
-moz-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
-o-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
z-index: 9999;
z-index: 24999;
width:100%;
margin-top:-1px;
@@ -166,7 +166,7 @@ Version: 3.2 Timestamp: Mon Sep 10 10:38:04 PDT 2012
.select2-search {
display: inline-block;
white-space: nowrap;
z-index: 10000;
z-index: 25000;
min-height: 26px;
width: 100%;
margin: 0;
+1
View File
@@ -52,6 +52,7 @@
${h.js(
'libs/jquery/jquery',
'libs/json2',
'libs/jquery/select2',
'libs/bootstrap',
'libs/underscore',
'libs/backbone/backbone',
+1 -1
View File
@@ -13,7 +13,7 @@
<%def name="javascripts()">
${parent.javascripts()}
${h.js( "galaxy.panels", "libs/jquery/select2", "libs/jquery/jstorage" )}
${h.js( "galaxy.panels", "libs/jquery/jstorage" )}
<script type="text/javascript">
$(function() {
$(window).bind("refresh_on_change", function() {
+1 -4
View File
@@ -105,10 +105,7 @@ ${render_trackster_js_files()}
"Create": function() { $(document).trigger("convert_to_values"); continue_fn(); }
});
$("#new-title").focus();
$("select[name='dbkey']").combobox({
appendTo: $("#overlay"),
size: 40
});
$("select[name='dbkey']").select2({ width: 'resolve'});
// To support the large number of options for dbkey, enable scrolling in overlay.
$("#overlay").css("overflow", "auto");
}
@@ -2,7 +2,6 @@
<%def name="javascripts()">
${parent.javascripts()}
${h.js( "libs/jquery/select2" )}
<script type="text/javascript">
$( function() {
function show_tool_body(title){