commit/galaxy-central: james_taylor: Add support for bootstrap style tabs, use tabs in edit attributes form
1 new commit in galaxy-central:
https://bitbucket.org/galaxy/galaxy-central/changeset/96bc3ef03267/ changeset: 96bc3ef03267 user: james_taylor date: 2012-07-20 20:53:30 summary: Add support for bootstrap style tabs, use tabs in edit attributes form affected #: 8 files
diff -r 6345f41828866e9dcc4c64e689eb5b17c6e0e457 -r 96bc3ef032671042f389696d510538f0f5f9b643 static/june_2007_style/base.less --- a/static/june_2007_style/base.less +++ b/static/june_2007_style/base.less @@ -40,6 +40,10 @@ color: @link_text; }
+// Overrides for links that shouldn't be underlined +.nav-tabs a { + text-decoration: none; +}
h1, h2, h3, h4 { color: @header_text;
diff -r 6345f41828866e9dcc4c64e689eb5b17c6e0e457 -r 96bc3ef032671042f389696d510538f0f5f9b643 static/june_2007_style/blue/base.css --- a/static/june_2007_style/blue/base.css +++ b/static/june_2007_style/blue/base.css @@ -252,8 +252,8 @@ .nav-tabs>li>a,.nav-pills>li>a{padding-right:12px;padding-left:12px;margin-right:2px;line-height:14px;} .nav-tabs{border-bottom:1px solid #ddd;} .nav-tabs>li{margin-bottom:-1px;} -.nav-tabs>li>a{padding-top:8px;padding-bottom:8px;line-height:16px;border:1px solid transparent;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;}.nav-tabs>li>a:hover{border-color:#eeeeee #eeeeee #dddddd;} -.nav-tabs>.active>a,.nav-tabs>.active>a:hover{color:#555555;background-color:#ffffff;border:1px solid #ddd;border-bottom-color:transparent;cursor:default;} +.nav-tabs>li>a{padding-top:8px;padding-bottom:8px;line-height:16px;border:1px solid transparent;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;}.nav-tabs>li>a:hover{border-color:#eeeeee #eeeeee #999999;} +.nav-tabs>.active>a,.nav-tabs>.active>a:hover{color:#555555;background-color:#ffffff;border:1px solid #999;border-bottom-color:transparent;cursor:default;} .nav-pills>li>a{padding-top:8px;padding-bottom:8px;margin-top:2px;margin-bottom:2px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;} .nav-pills>.active>a,.nav-pills>.active>a:hover{color:#ffffff;background-color:#303030;} .nav-stacked>li{float:none;} @@ -450,6 +450,9 @@ .btn.active,.btn:active{color:inherit;} .dropdown-menu{max-width:auto;} input[type="checkbox"],input[type="radio"]{margin-left:0.5ex;margin-right:0.5ex;} +.nav-tabs{border-bottom:1px solid #999999;} +.nav-tabs>li>a:hover{border-color:#eeeeee #eeeeee #999999;} +.nav-tabs>.active>a,.nav-tabs>.active>a:hover{border:1px solid #999999;border-bottom-color:transparent;} @font-face{font-family:'FontAwesome';src:url('../images/fonts/fontawesome-webfont.eot');src:url('../images/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),url('../images/fonts/fontawesome-webfont.woff') format('woff'),url('../images/fonts/fontawesome-webfont.ttf') format('truetype'),url('../images/fonts/fontawesome-webfont.svgz#FontAwesomeRegular') format('svg'),url('../images/fonts/fontawesome-webfont.svg#FontAwesomeRegular') format('svg');font-weight:normal;font-style:normal;}.ficon,[class^="ficon"]:before,[class*=" ficon"]:before{font-family:FontAwesome;font-weight:normal;font-style:normal;display:inline-block;} .ficon.large:before{font-size:1.3333333333333333em;} .btn [class^="ficon"],.btn [class*=" ficon"]{line-height:.9em;} @@ -606,6 +609,7 @@ body{background:#ffffff;color:#303030;background-image:url(base_bg.png);background-repeat:repeat-x;background-position:top;margin:10px;} img{border:0;} a,a:link,a:visited,a:active{text-decoration:underline;color:#303030;} +.nav-tabs a{text-decoration:none;} h1,h2,h3,h4{color:#023858;margin:0.5em 0;} h1{font-size:24px;} h2{font-size:18px;line-height:24px;}h2 small{font-size:14px;}
diff -r 6345f41828866e9dcc4c64e689eb5b17c6e0e457 -r 96bc3ef032671042f389696d510538f0f5f9b643 static/june_2007_style/bootstrap/navs.less --- a/static/june_2007_style/bootstrap/navs.less +++ b/static/june_2007_style/bootstrap/navs.less @@ -115,7 +115,7 @@ border: 1px solid transparent; .border-radius(4px 4px 0 0); &:hover { - border-color: @grayLighter @grayLighter #ddd; + border-color: @grayLighter @grayLighter #999; } } // Active state, and it's :hover to override normal :hover @@ -123,7 +123,7 @@ .nav-tabs > .active > a:hover { color: @gray; background-color: @white; - border: 1px solid #ddd; + border: 1px solid #999; border-bottom-color: transparent; cursor: default; }
diff -r 6345f41828866e9dcc4c64e689eb5b17c6e0e457 -r 96bc3ef032671042f389696d510538f0f5f9b643 static/june_2007_style/galaxy_bootstrap.less --- a/static/june_2007_style/galaxy_bootstrap.less +++ b/static/june_2007_style/galaxy_bootstrap.less @@ -97,3 +97,19 @@ margin-left: 0.5ex; margin-right: 0.5ex; } + +// Tabs -- border color is hardcoded in navs.less, change to @btnBorder here + +.nav-tabs { + border-bottom: 1px solid @btnBorder; +} +.nav-tabs > li > a { + &:hover { + border-color: @grayLighter @grayLighter @btnBorder; + } +} +.nav-tabs > .active > a, +.nav-tabs > .active > a:hover { + border: 1px solid @btnBorder; + border-bottom-color: transparent; +}
diff -r 6345f41828866e9dcc4c64e689eb5b17c6e0e457 -r 96bc3ef032671042f389696d510538f0f5f9b643 static/scripts/bootstrap.js --- /dev/null +++ b/static/scripts/bootstrap.js @@ -0,0 +1,135 @@ +/* ======================================================== + * bootstrap-tab.js v2.0.4 + * http://twitter.github.com/bootstrap/javascript.html#tabs + * ======================================================== + * Copyright 2012 Twitter, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ======================================================== */ + + +!function ($) { + + "use strict"; // jshint ;_; + + + /* TAB CLASS DEFINITION + * ==================== */ + + var Tab = function ( element ) { + this.element = $(element) + } + + Tab.prototype = { + + constructor: Tab + + , show: function () { + var $this = this.element + , $ul = $this.closest('ul:not(.dropdown-menu)') + , selector = $this.attr('data-target') + , previous + , $target + , e + + if (!selector) { + selector = $this.attr('href') + selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7 + } + + if ( $this.parent('li').hasClass('active') ) return + + previous = $ul.find('.active a').last()[0] + + e = $.Event('show', { + relatedTarget: previous + }) + + $this.trigger(e) + + if (e.isDefaultPrevented()) return + + $target = $(selector) + + this.activate($this.parent('li'), $ul) + this.activate($target, $target.parent(), function () { + $this.trigger({ + type: 'shown' + , relatedTarget: previous + }) + }) + } + + , activate: function ( element, container, callback) { + var $active = container.find('> .active') + , transition = callback + && $.support.transition + && $active.hasClass('fade') + + function next() { + $active + .removeClass('active') + .find('> .dropdown-menu > .active') + .removeClass('active') + + element.addClass('active') + + if (transition) { + element[0].offsetWidth // reflow for transition + element.addClass('in') + } else { + element.removeClass('fade') + } + + if ( element.parent('.dropdown-menu') ) { + element.closest('li.dropdown').addClass('active') + } + + callback && callback() + } + + transition ? + $active.one($.support.transition.end, next) : + next() + + $active.removeClass('in') + } + } + + + /* TAB PLUGIN DEFINITION + * ===================== */ + + $.fn.tab = function ( option ) { + return this.each(function () { + var $this = $(this) + , data = $this.data('tab') + if (!data) $this.data('tab', (data = new Tab(this))) + if (typeof option == 'string') data[option]() + }) + } + + $.fn.tab.Constructor = Tab + + + /* TAB DATA-API + * ============ */ + + $(function () { + $('body').on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) { + e.preventDefault() + $(this).tab('show') + }) + }) + +}(window.jQuery); \ No newline at end of file
diff -r 6345f41828866e9dcc4c64e689eb5b17c6e0e457 -r 96bc3ef032671042f389696d510538f0f5f9b643 static/scripts/packed/bootstrap.js --- /dev/null +++ b/static/scripts/packed/bootstrap.js @@ -0,0 +1,1 @@ +!function(b){var a=function(c){this.element=b(c)};a.prototype={constructor:a,show:function(){var i=this.element,f=i.closest("ul:not(.dropdown-menu)"),d=i.attr("data-target"),g,c,h;if(!d){d=i.attr("href");d=d&&d.replace(/.*(?=#[^\s]*$)/,"")}if(i.parent("li").hasClass("active")){return}g=f.find(".active a").last()[0];h=b.Event("show",{relatedTarget:g});i.trigger(h);if(h.isDefaultPrevented()){return}c=b(d);this.activate(i.parent("li"),f);this.activate(c,c.parent(),function(){i.trigger({type:"shown",relatedTarget:g})})},activate:function(e,d,h){var c=d.find("> .active"),g=h&&b.support.transition&&c.hasClass("fade");function f(){c.removeClass("active").find("> .dropdown-menu > .active").removeClass("active");e.addClass("active");if(g){e[0].offsetWidth;e.addClass("in")}else{e.removeClass("fade")}if(e.parent(".dropdown-menu")){e.closest("li.dropdown").addClass("active")}h&&h()}g?c.one(b.support.transition.end,f):f();c.removeClass("in")}};b.fn.tab=function(c){return this.each(function(){var e=b(this),d=e.data("tab");if(!d){e.data("tab",(d=new a(this)))}if(typeof c=="string"){d[c]()}})};b.fn.tab.Constructor=a;b(function(){b("body").on("click.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(c){c.preventDefault();b(this).tab("show")})})}(window.jQuery); \ No newline at end of file
diff -r 6345f41828866e9dcc4c64e689eb5b17c6e0e457 -r 96bc3ef032671042f389696d510538f0f5f9b643 templates/base.mako --- a/templates/base.mako +++ b/templates/base.mako @@ -26,7 +26,7 @@ ## <!--[if lt IE 7]> ## <script type='text/javascript' src="/static/scripts/IE7.js"></script> ## <![endif]--> - ${h.js( "jquery", "galaxy.base", "libs/underscore", "libs/backbone", "libs/backbone-relational", "libs/handlebars.runtime", "mvc/ui" )} + ${h.js( "jquery", "bootstrap", "galaxy.base", "libs/underscore", "libs/backbone", "libs/backbone-relational", "libs/handlebars.runtime", "mvc/ui" )} <script type="text/javascript"> // Set up needed paths. var galaxy_paths = new GalaxyPaths({
diff -r 6345f41828866e9dcc4c64e689eb5b17c6e0e457 -r 96bc3ef032671042f389696d510538f0f5f9b643 templates/dataset/edit_attributes.mako --- a/templates/dataset/edit_attributes.mako +++ b/templates/dataset/edit_attributes.mako @@ -30,7 +30,17 @@ ${render_msg( message, status )} %endif
-<div class="toolForm"> + +<ul class="nav nav-tabs"> + <li class="active"><a href="#attributes" data-toggle="tab">Attributes</a></li> + <li><a href="#convert" data-toggle="tab">Convert Format</a></li> + <li><a href="#datatype" data-toggle="tab">Datatype</a></li> + <li><a href="#permissions" data-toggle="tab">Permissions</a></li> +</ul> + +<div class="tab-content"> + +<div class="tab-pane active toolForm" id="attributes"><div class="toolFormTitle">${_('Edit Attributes')}</div><div class="toolFormBody"><form name="edit_attributes" action="${h.url_for( controller='dataset', action='edit', dataset_id=dataset_id )}" method="post"> @@ -98,12 +108,12 @@ %endif </div></div> -<p /> -<% converters = data.get_converter_types() %> -%if len( converters ) > 0: - <div class="toolForm"> - <div class="toolFormTitle">${_('Convert to new format')}</div> - <div class="toolFormBody"> + +<div class="tab-pane toolForm" id="convert"> + <div class="toolFormTitle">${_('Convert to new format')}</div> + <div class="toolFormBody"> + <% converters = data.get_converter_types() %> + %if len( converters ) > 0: <form name="convert_data" action="${h.url_for( controller='dataset', action='edit', dataset_id=dataset_id )}" method="post"><div class="form-row"><div style="float: left; width: 250px; margin-right: 10px;"> @@ -122,12 +132,13 @@ <input type="submit" name="convert_data" value="${_('Convert')}"/></div></form> - </div> + %else: + No conversions available + %endif </div> - <p /> -%endif +</div>
-<div class="toolForm"> +<div class="tab-pane toolForm" id="datatype"><div class="toolFormTitle">${_('Change data type')}</div><div class="toolFormBody"> %if data.datatype.allow_datatype_change: @@ -157,6 +168,7 @@ </div><p />
+<div class="tab-pane" id="permissions"> %if trans.app.security_agent.can_manage_dataset( current_user_roles, data.dataset ): <%namespace file="/dataset/security_common.mako" import="render_permission_form" /> ${render_permission_form( data.dataset, data.get_display_name(), h.url_for( controller='dataset', action='edit', dataset_id=dataset_id ), all_roles )} @@ -184,4 +196,7 @@ </div></div></div> +%else: + Permissions not available (not logged in) %endif +</div>
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.
galaxy-commits@lists.galaxyproject.org
-
Bitbucket