commit/galaxy-central: jgoecks: 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.
1 new commit in galaxy-central: https://bitbucket.org/galaxy/galaxy-central/commits/41cbbcb90823/ Changeset: 41cbbcb90823 User: jgoecks Date: 2013-05-10 15:38:51 Summary: 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. Affected #: 6 files diff -r 75a49f8d1bd38939a426660e379da8128631cbe2 -r 41cbbcb908236c14818dfb2b3372ea545ece718b static/style/blue/base.css --- a/static/style/blue/base.css +++ b/static/style/blue/base.css @@ -831,11 +831,11 @@ .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;} diff -r 75a49f8d1bd38939a426660e379da8128631cbe2 -r 41cbbcb908236c14818dfb2b3372ea545ece718b static/style/select2.less --- a/static/style/select2.less +++ b/static/style/select2.less @@ -109,7 +109,7 @@ -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 @@ .select2-search { display: inline-block; white-space: nowrap; - z-index: 10000; + z-index: 25000; min-height: 26px; width: 100%; margin: 0; diff -r 75a49f8d1bd38939a426660e379da8128631cbe2 -r 41cbbcb908236c14818dfb2b3372ea545ece718b templates/base/base_panels.mako --- a/templates/base/base_panels.mako +++ b/templates/base/base_panels.mako @@ -52,6 +52,7 @@ ${h.js( 'libs/jquery/jquery', 'libs/json2', + 'libs/jquery/select2', 'libs/bootstrap', 'libs/underscore', 'libs/backbone/backbone', diff -r 75a49f8d1bd38939a426660e379da8128631cbe2 -r 41cbbcb908236c14818dfb2b3372ea545ece718b templates/webapps/galaxy/tool_form.mako --- a/templates/webapps/galaxy/tool_form.mako +++ b/templates/webapps/galaxy/tool_form.mako @@ -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() { diff -r 75a49f8d1bd38939a426660e379da8128631cbe2 -r 41cbbcb908236c14818dfb2b3372ea545ece718b templates/webapps/galaxy/tracks/browser.mako --- a/templates/webapps/galaxy/tracks/browser.mako +++ b/templates/webapps/galaxy/tracks/browser.mako @@ -105,10 +105,7 @@ "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"); } diff -r 75a49f8d1bd38939a426660e379da8128631cbe2 -r 41cbbcb908236c14818dfb2b3372ea545ece718b templates/webapps/galaxy/workflow/run.mako --- a/templates/webapps/galaxy/workflow/run.mako +++ b/templates/webapps/galaxy/workflow/run.mako @@ -2,7 +2,6 @@ <%def name="javascripts()"> ${parent.javascripts()} - ${h.js( "libs/jquery/select2" )} <script type="text/javascript"> $( function() { function show_tool_body(title){ 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.
participants (1)
-
commits-noreply@bitbucket.org