diff --git a/app/views/common/_tabs.rhtml b/app/views/common/_tabs.rhtml index f9ef5dd35..c99c6a9f4 100644 --- a/app/views/common/_tabs.rhtml +++ b/app/views/common/_tabs.rhtml @@ -9,8 +9,17 @@ :onclick => "showTab('#{tab[:name]}'); this.blur(); return false;" %> <% end -%> + + + <% tabs.each do |tab| -%> <%= content_tag('div', render(:partial => tab[:partial], :locals => {:tab => tab} ), :id => "tab-content-#{tab[:name]}", diff --git a/public/images/bullet_arrow_left.png b/public/images/bullet_arrow_left.png new file mode 100644 index 000000000..4b0b40f87 Binary files /dev/null and b/public/images/bullet_arrow_left.png differ diff --git a/public/images/bullet_arrow_right.png b/public/images/bullet_arrow_right.png new file mode 100644 index 000000000..02fac3b4f Binary files /dev/null and b/public/images/bullet_arrow_right.png differ diff --git a/public/javascripts/application.js b/public/javascripts/application.js index cc75c8180..1a5e0c04f 100644 --- a/public/javascripts/application.js +++ b/public/javascripts/application.js @@ -73,6 +73,55 @@ function showTab(name) { return false; } +function moveTabRight(el) { + var lis = Element.up(el, 'div.tabs').down('ul').childElements(); + var tabsWidth = 0; + var i; + for (i=0; i0) { + lis[i-1].show(); + } +} + +function displayTabsButtons() { + var lis; + var tabsWidth = 0; + var i; + $$('div.tabs').each(function(el) { + lis = el.down('ul').childElements(); + for (i=0; iul { bottom:-1px; } /* others */ #content .tabs ul li { float:left; @@ -524,6 +524,31 @@ border-bottom: 1px solid #fff; background-color: #fff; } +div.tabs-buttons { position:absolute; right: 0; width: 48px; height: 24px; background: white; bottom: -1px; } + +button.tab-left, button.tab-right { + font-size: 0.9em; + cursor: pointer; + height:24px; + border: 1px solid #ccc; + border-bottom: 1px solid #bbbbbb; + position:absolute; + padding:4px; + width: 20px; +} + +button.tab-left { + right: 20px; + bottom: 0; + background: #eeeeee url(../images/bullet_arrow_left.png) no-repeat 50% 50%; +} + +button.tab-right { + right: 0; + bottom: 0; + background: #eeeeee url(../images/bullet_arrow_right.png) no-repeat 50% 50%;} +} + /***** Auto-complete *****/ div.autocomplete { position:absolute;