|
|
1 | NO CONTENT: new file 100644, binary diff hidden |
|
|
1 | NO CONTENT: new file 100644, binary diff hidden |
| @@ -9,8 +9,17 | |||
|
|
9 | 9 | :onclick => "showTab('#{tab[:name]}'); this.blur(); return false;" %></li> |
|
|
10 | 10 | <% end -%> |
|
|
11 | 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 | 16 | </div> |
|
|
13 | 17 | |
|
|
18 | <script> | |
|
|
19 | Event.observe(window, 'load', function() { displayTabsButtons(); }); | |
|
|
20 | Event.observe(window, 'resize', function() { displayTabsButtons(); }); | |
|
|
21 | </script> | |
|
|
22 | ||
|
|
14 | 23 | <% tabs.each do |tab| -%> |
|
|
15 | 24 | <%= content_tag('div', render(:partial => tab[:partial], :locals => {:tab => tab} ), |
|
|
16 | 25 | :id => "tab-content-#{tab[:name]}", |
| @@ -73,6 +73,55 function showTab(name) { | |||
|
|
73 | 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 | 125 | function setPredecessorFieldsVisibility() { |
|
|
77 | 126 | relationType = $('relation_relation_type'); |
|
|
78 | 127 | if (relationType && relationType.value == "precedes") { |
| @@ -486,8 +486,8 p.pourcent {font-size: 80%;} | |||
|
|
486 | 486 | p.progress-info {clear: left; font-style: italic; font-size: 80%;} |
|
|
487 | 487 | |
|
|
488 | 488 | /***** Tabs *****/ |
|
|
489 | #content .tabs {height: 2.6em; border-bottom: 1px solid #bbbbbb; margin-bottom:1.2em; position:relative;} | |
|
|
490 | #content .tabs ul {margin:0; position:absolute; bottom:-2px; padding-left:1em;} | |
|
|
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; width: 2000px;} | |
|
|
491 | 491 | #content .tabs>ul { bottom:-1px; } /* others */ |
|
|
492 | 492 | #content .tabs ul li { |
|
|
493 | 493 | float:left; |
| @@ -524,6 +524,31 border-bottom: 1px solid #fff; | |||
|
|
524 | 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 | 552 | /***** Auto-complete *****/ |
|
|
528 | 553 | div.autocomplete { |
|
|
529 | 554 | position:absolute; |
General Comments 0
You need to be logged in to leave comments.
Login now