From 1c11d3403e4ed3518d51ef3d44cefc3cb1f6d548 Mon Sep 17 00:00:00 2001
From: Jean-Philippe Lang <jp_lang@yahoo.fr>
Date: Mon, 14 Dec 2009 20:13:29 +0000
Subject: [PATCH] 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
---
 app/views/common/_tabs.rhtml         |   9 +++++
 public/images/bullet_arrow_left.png  | Bin 0 -> 1032 bytes
 public/images/bullet_arrow_right.png | Bin 0 -> 1033 bytes
 public/javascripts/application.js    |  49 +++++++++++++++++++++++++++
 public/stylesheets/application.css   |  29 ++++++++++++++--
 5 files changed, 85 insertions(+), 2 deletions(-)
 create mode 100644 public/images/bullet_arrow_left.png
 create mode 100644 public/images/bullet_arrow_right.png

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;" %></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
index 0000000000000000000000000000000000000000..4b0b40f8784538c67e8ce53dec07c10d5aed61c4
GIT binary patch
literal 1032
zcmV+j1o!)iP)<h;3K|Lk000e1NJLTq000mG000mO1ONa4wfZ;e00009a7bBm000XU
z000XU0RWnu7ytkR7->U8P*7-ZbZ>KLZ*U+<Lqi~Na&Km7Y-Iodc-muNV4mRU;^fLC
zz`#&YR8r&~<QN$d8KuB}o`H>lnSp_Ufq@}0xwybFAi#%#fq@|}KQEO56)-X|e7nZL
z$iTqBa9P*U#mSX{G{Bl%P*lRez;J+pfx##xwK$o9f#C}S14DXwNkIt%17i#W1A|CX
zc0maP17iUL1A|C*NRTrF17iyV0~1e4YDEbH0|SF|enDkXW_m`6f}y3QrGjHhep0GJ
zaAk2xYHqQDXI^rCQ9*uDVo7QW0|Nup4h9AW240u^5(W3f%sd4n162kpgNVo|1qcff
zJ_s=cNG>fZg9jx8g8+j9g8_pBLjXe}Lp{R+hNBE`7{wV~7)u#fFy3PlV+vxLz;uCG
zm^qSpA@ds+OO_6nTdaDlt*rOhEZL^9ePa)2-_4=K(Z%tFGm-NGmm}8}ZcXk5JW@PU
zd4+f<@d@)y<Co!IETAK>L(o<5icqT158+-B6_LH7;i6x}CW#w~Uy-Pgl#@Irl`kzV
zeL|*8R$ca%T%Wv){2zs_iiJvgN^h0dsuZZ2sQy$tsNSU!s;Q*;LF<6_B%M@UD?LHI
zSNcZ`78uqV#TeU~$eS{ozBIdFzSClf<pirb>s*^S+dw;4dus<{M;#|MXC)T}S9v!D
zcV!QCPhBq)ZyO(X-(bH4|NMaZz==UigLj2o41F2S6d@OB6%`R(5i>J(Puzn9wnW{e
zu;hl6HK{k#IWjCVGqdJqU(99Cv(K+6*i`tgSi2;vbXD1#3jNBGs$DgVwO(~o>mN4i
zHPtkqZIx>)Y(Ls5-Br|mx>vQYvH$Kwn@O`L|D75??eGkZnf<fA&q<hjdcOIBrHe!s
zw=Vg%EOYt2l_9H6uW?zsZ@uM)ZJSIsZ`o?HZTk+Zo%?sY?m4?JZ2yCUIfs58X+I`@
ze8oxYQ|HbkpZ#@y(nak{N3SGa{daxNO`BVH@6_K@zJKCj-ea*R`=4dL5P5m<b^crV
zcNac1eKP(0>g$5<;Xeg_o%+-I&+-3%01W^SH2RkDT>t<8AY({UO#lFTB>(_`g8%^e
z{{R4h=>PzAFaQARU;qF*m;eA5Z<1fdMgRZ+YDq*vRCwBA{Lg?NFfq_v0ShX3jRenK
zPA+>!941VW_<o0(>lZF7swKYNXX9pN_=!uw_siTIoD9Dhe&AB@!}!tn7Yx4`zT;9b
z?a_CQhu>c^e8cU{Nsqp3Kfdq{#R$eh5Yz+}00sbo;vrQN5$5Xv0000<MNUMnLSTY<
C=(j2W

literal 0
HcmV?d00001

diff --git a/public/images/bullet_arrow_right.png b/public/images/bullet_arrow_right.png
new file mode 100644
index 0000000000000000000000000000000000000000..02fac3b4fa67a3a9d88875eb9f080656f6b7f299
GIT binary patch
literal 1033
zcmV+k1or!hP)<h;3K|Lk000e1NJLTq000mG000mO1ONa4wfZ;e00009a7bBm000XU
z000XU0RWnu7ytkR7->U8P*7-ZbZ>KLZ*U+<Lqi~Na&Km7Y-Iodc-muNV4mRU;^fLC
zz`#&YR8r&~<QN$d8KuB}o`H>lnSp_Ufq@}0xwybFAi#%#fq@|}KQEO56)-X|e7nZL
z$iTqBa9P*U#mSX{G{Bl%P*lRez;J+pfx##xwK$o9f#C}S14DXwNkIt%17i#W1A|CX
zc0maP17iUL1A|C*NRTrF17iyV0~1e4YDEbH0|SF|enDkXW_m`6f}y3QrGjHhep0GJ
zaAk2xYHqQDXI^rCQ9*uDVo7QW0|Nup4h9AW240u^5(W3f%sd4n162kpgNVo|1qcff
zJ_s=cNG>fZg9jx8g8+j9g8_pBLjXe}Lp{R+hNBE`7{wV~7)u#fFy3PlV+vxLz;uCG
zm^qSpA@ds+OO_6nTdaDlt*rOhEZL^9ePa)2-_4=K(Z%tFGm-NGmm}8}ZcXk5JW@PU
zd4+f<@d@)y<Co!IETAK>L(o<5icqT158+-B6_LH7;i6x}CW#w~Uy-Pgl#@Irl`kzV
zeL|*8R$ca%T%Wv){2zs_iiJvgN^h0dsuZZ2sQy$tsNSU!s;Q*;LF<6_B%M@UD?LHI
zSNcZ`78uqV#TeU~$eS{ozBIdFzSClf<pirb>s*^S+dw;4dus<{M;#|MXC)T}S9v!D
zcV!QCPhBq)ZyO(X-(bH4|NMaZz==UigLj2o41F2S6d@OB6%`R(5i>J(Puzn9wnW{e
zu;hl6HK{k#IWjCVGqdJqU(99Cv(K+6*i`tgSi2;vbXD1#3jNBGs$DgVwO(~o>mN4i
zHPtkqZIx>)Y(Ls5-Br|mx>vQYvH$Kwn@O`L|D75??eGkZnf<fA&q<hjdcOIBrHe!s
zw=Vg%EOYt2l_9H6uW?zsZ@uM)ZJSIsZ`o?HZTk+Zo%?sY?m4?JZ2yCUIfs58X+I`@
ze8oxYQ|HbkpZ#@y(nak{N3SGa{daxNO`BVH@6_K@zJKCj-ea*R`=4dL5P5m<b^crV
zcNac1eKP(0>g$5<;Xeg_o%+-I&+-3%01W^SH2RkDT>t<8AY({UO#lFTB>(_`g8%^e
z{{R4h=>PzAFaQARU;qF*m;eA5Z<1fdMgRZ+Ye_^wRCwBA{Lg?NFfk0g0v2RW|F@4f
zKLz#O$7uo=r>p_z)jT=e3K+y0<T*KSWXa)Bz{$YIAi*HV$#E8k0uBZ?hVKkte{kyJ
za3nj!Z-!rAxm3zt;84KE@ckR7O6&_{F~&g<7k~i(tT-3Uu23(h00000NkvXXu0mjf
DpB}XJ

literal 0
HcmV?d00001

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; 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 c3e7ca81f..1e1ab61cb 100644
--- 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;