Adds buttons to scroll the tabs when they overflow.

git-svn-id: svn+ssh://rubyforge.org/var/svn/redmine/trunk@3174 e93f8b46-1217-0410-a6f0-8f06a7374b81

diff --git a/app/views/common/_tabs.rhtml b/app/views/common/_tabs.rhtml
index f9ef5dd35a029dc09d3deb76460f5b91bb3786c9..c99c6a9f491cc90384f8f337f9eca479f33d3d55 100644 (file)
--- a/app/views/common/_tabs.rhtml
+++ b/app/views/common/_tabs.rhtml
@@ -9,8 +9,17 @@
                                     :onclick => "showTab('#{tab[:name]}'); this.blur(); return false;" %></li>
   <% end -%>
   </ul>
+  <div class="tabs-buttons" style="display:none;">
+       <button class="tab-left" onclick="moveTabLeft(this);"></button>
+       <button class="tab-right" onclick="moveTabRight(this);"></button>
+  </div>
 </div>
 
+<script>
+       Event.observe(window, 'load', function() { displayTabsButtons(); });
+       Event.observe(window, 'resize', function() { displayTabsButtons(); }); 
+</script>
+
 <% 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 (file)
index 0000000..4b0b40f
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 (file)
index 0000000..02fac3b
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 cc75c81800177418ca38a6603fe5d2f99d2ecfe7..1a5e0c04f1679fe49eb7f17fd85837cbadbe69c5 100644 (file)
--- 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; i<lis.length; i++) {
+               if (lis[i].visible()) {
+                       tabsWidth += lis[i].getWidth() + 6;
+               }
+       }
+       if (tabsWidth < Element.up(el, 'div.tabs').getWidth() - 60) {
+               return;
+       }
+       i=0;
+       while (i<lis.length && !lis[i].visible()) {
+               i++;
+       }
+       lis[i].hide();
+}
+
+function moveTabLeft(el) {
+       var lis = Element.up(el, 'div.tabs').down('ul').childElements();
+       var i = 0;
+       while (i<lis.length && !lis[i].visible()) {
+               i++;
+       }
+       if (i>0) {
+               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; i<lis.length; i++) {
+                       if (lis[i].visible()) {
+                               tabsWidth += lis[i].getWidth() + 6;
+                       }
+               }
+               if (tabsWidth < el.getWidth() - 60) {
+                       el.down('div.tabs-buttons').hide();
+               } else {
+                       el.down('div.tabs-buttons').show();
+               }
+       });
+}
+
 function setPredecessorFieldsVisibility() {
     relationType = $('relation_relation_type');
     if (relationType && relationType.value == "precedes") {

diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index c3e7ca81fd106f9c5784aa2303734f9c68ff9289..1e1ab61cbae63bcbbca1de07cae86adb9e2f353c 100644 (file)
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -486,8 +486,8 @@ p.pourcent {font-size: 80%;}
 p.progress-info {clear: left; font-style: italic; font-size: 80%;}
 
 /***** Tabs *****/
-#content .tabs {height: 2.6em; border-bottom: 1px solid #bbbbbb; margin-bottom:1.2em; position:relative;}
-#content .tabs ul {margin:0; position:absolute; bottom:-2px; padding-left:1em;}
+#content .tabs {height: 2.6em; border-bottom: 1px solid #bbbbbb; margin-bottom:1.2em; position:relative; overflow:hidden;}
+#content .tabs ul {margin:0; position:absolute; bottom:-2px; padding-left:1em; width: 2000px;}
 #content .tabs>ul { 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;