##// END OF EJS Templates
jro_apps » redmine
RSS
Adds buttons to scroll the tabs when they overflow....
Jean-Philippe Lang -
r3060:1c11d3403e4e
parent child
Show More
Side by Side Unified
Context file:
r3060:1c11d3403e4e Loading diff...:
Show file before | Show file after | Hide comments
1 NO CONTENT: new file 100644, binary diff hidden
NO CONTENT: new file 100644, binary diff hidden
Show file before | Show file after | Hide comments
1 NO CONTENT: new file 100644, binary diff hidden
NO CONTENT: new file 100644, binary diff hidden
Show file before | Show file after | Hide comments
@@ -9,8 +9,17
9 :onclick => "showTab('#{tab[:name]}'); this.blur(); return false;" %></li>
9 :onclick => "showTab('#{tab[:name]}'); this.blur(); return false;" %></li>
10 <% end -%>
10 <% end -%>
11 </ul>
11 </ul>
12 <div class="tabs-buttons" style="display:none;">
13 <button class="tab-left" onclick="moveTabLeft(this);"></button>
14 <button class="tab-right" onclick="moveTabRight(this);"></button>
15 </div>
12 </div>
16 </div>
13
17
18 <script>
19 Event.observe(window, 'load', function() { displayTabsButtons(); });
20 Event.observe(window, 'resize', function() { displayTabsButtons(); });
21 </script>
22
14 <% tabs.each do |tab| -%>
23 <% tabs.each do |tab| -%>
15 <%= content_tag('div', render(:partial => tab[:partial], :locals => {:tab => tab} ),
24 <%= content_tag('div', render(:partial => tab[:partial], :locals => {:tab => tab} ),
16 :id => "tab-content-#{tab[:name]}",
25 :id => "tab-content-#{tab[:name]}",
Show file before | Show file after | Hide comments
@@ -73,6 +73,55 function showTab(name) {
73 return false;
73 return false;
74 }
74 }
75
75
76 function moveTabRight(el) {
77 var lis = Element.up(el, 'div.tabs').down('ul').childElements();
78 var tabsWidth = 0;
79 var i;
80 for (i=0; i<lis.length; i++) {
81 if (lis[i].visible()) {
82 tabsWidth += lis[i].getWidth() + 6;
83 }
84 }
85 if (tabsWidth < Element.up(el, 'div.tabs').getWidth() - 60) {
86 return;
87 }
88 i=0;
89 while (i<lis.length && !lis[i].visible()) {
90 i++;
91 }
92 lis[i].hide();
93 }
94
95 function moveTabLeft(el) {
96 var lis = Element.up(el, 'div.tabs').down('ul').childElements();
97 var i = 0;
98 while (i<lis.length && !lis[i].visible()) {
99 i++;
100 }
101 if (i>0) {
102 lis[i-1].show();
103 }
104 }
105
106 function displayTabsButtons() {
107 var lis;
108 var tabsWidth = 0;
109 var i;
110 $$('div.tabs').each(function(el) {
111 lis = el.down('ul').childElements();
112 for (i=0; i<lis.length; i++) {
113 if (lis[i].visible()) {
114 tabsWidth += lis[i].getWidth() + 6;
115 }
116 }
117 if (tabsWidth < el.getWidth() - 60) {
118 el.down('div.tabs-buttons').hide();
119 } else {
120 el.down('div.tabs-buttons').show();
121 }
122 });
123 }
124
76 function setPredecessorFieldsVisibility() {
125 function setPredecessorFieldsVisibility() {
77 relationType = $('relation_relation_type');
126 relationType = $('relation_relation_type');
78 if (relationType && relationType.value == "precedes") {
127 if (relationType && relationType.value == "precedes") {
Show file before | Show file after | Hide comments
@@ -486,8 +486,8 p.pourcent {font-size: 80%;}
486 p.progress-info {clear: left; font-style: italic; font-size: 80%;}
486 p.progress-info {clear: left; font-style: italic; font-size: 80%;}
487
487
488 /***** Tabs *****/
488 /***** Tabs *****/
489 #content .tabs {height: 2.6em; border-bottom: 1px solid #bbbbbb; margin-bottom:1.2em; position:relative;}
489 #content .tabs {height: 2.6em; border-bottom: 1px solid #bbbbbb; margin-bottom:1.2em; position:relative; overflow:hidden;}
490 #content .tabs ul {margin:0; position:absolute; bottom:-2px; padding-left:1em;}
490 #content .tabs ul {margin:0; position:absolute; bottom:-2px; padding-left:1em; width: 2000px;}
491 #content .tabs>ul { bottom:-1px; } /* others */
491 #content .tabs>ul { bottom:-1px; } /* others */
492 #content .tabs ul li {
492 #content .tabs ul li {
493 float:left;
493 float:left;
@@ -524,6 +524,31 border-bottom: 1px solid #fff;
524 background-color: #fff;
524 background-color: #fff;
525 }
525 }
526
526
527 div.tabs-buttons { position:absolute; right: 0; width: 48px; height: 24px; background: white; bottom: -1px; }
528
529 button.tab-left, button.tab-right {
530 font-size: 0.9em;
531 cursor: pointer;
532 height:24px;
533 border: 1px solid #ccc;
534 border-bottom: 1px solid #bbbbbb;
535 position:absolute;
536 padding:4px;
537 width: 20px;
538 }
539
540 button.tab-left {
541 right: 20px;
542 bottom: 0;
543 background: #eeeeee url(../images/bullet_arrow_left.png) no-repeat 50% 50%;
544 }
545
546 button.tab-right {
547 right: 0;
548 bottom: 0;
549 background: #eeeeee url(../images/bullet_arrow_right.png) no-repeat 50% 50%;}
550 }
551
527 /***** Auto-complete *****/
552 /***** Auto-complete *****/
528 div.autocomplete {
553 div.autocomplete {
529 position:absolute;
554 position:absolute;
General Comments 0
You need to be logged in to leave comments. Login now