Commit 9ec083f6f5e194d8b3a712ec397ba633a3ee166b

Authored by AurelioAHeckert
1 parent 7d27aebe

ActionItem152: mais na barra!

git-svn-id: https://svn.colivre.coop.br/svn/noosfero/trunk@1194 3f533792-8f58-4932-b0fe-aaf55b0a4547
app/helpers/application_helper.rb
... ... @@ -129,7 +129,7 @@ module ApplicationHelper
129 129 ]
130 130 else
131 131 [
132   - ( link_to _("%s's home") % @environment.name, { :controller=>"home" }, :id=>"link_to_envhome" ),
  132 + #( link_to _("%s's home") % @environment.name, { :controller=>"home" }, :id=>"link_to_envhome" ),
133 133 ( link_to content_tag('span', _('Login')), { :controller => 'account', :action => 'login' }, :id => 'link_login' ),
134 134 search_link,
135 135 ]
... ...
app/views/shared/categories_menu.rhtml
1 1 <ul id='cat_menu'>
2   - <%= link_to( "<span>"+ _("Go Home") +"</span>", {:controller=>"home"}, :id=>"menu_link_to_envhome", :title=>@environment.name) %>
  2 + <%= link_to( "<span>"+ @environment.name() +"</span>", {:controller=>"home"}, :id=>"menu_link_to_envhome", :title=>@environment.name) %>
3 3 <% @environment.display_categories.each do |item| %>
4 4 <li id='category<%= item.display_color %>'<%= ' class="active"' if (@category && (@category.top_ancestor == item)) %>>
5 5 <%= item.name %>
... ...
public/images/borda-esq-aba-azul.gif 0 → 100644

179 Bytes

public/images/borda-esq-aba-laranja.gif 0 → 100644

200 Bytes

public/images/borda-esq-aba-lilas.gif 0 → 100644

200 Bytes

public/images/borda-esq-aba-verde.gif 0 → 100644

200 Bytes

public/images/borda-esq-aba-vermelho.gif 0 → 100644

200 Bytes

public/images/icons-bar/ico-edit.gif

155 Bytes | W: | H:

135 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
public/images/icons-bar/ico-enter.gif 0 → 100644

123 Bytes

public/images/icons-bar/ico-exit.gif

126 Bytes | W: | H:

140 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
public/images/icons-bar/ico-search.gif 0 → 100644

142 Bytes

public/images/white-pixel.gif 0 → 100644

35 Bytes

public/javascripts/menu.js
1 1 function prepareMenu(id, options) {
2 2  
3   - var menuCloseTimeout = options.timeout || 333;
  3 + var menuCloseTimeout = options.timeout || 33;
4 4  
5 5 if ( document.all ) {
6 6 // add a class for work arround msie&#180;s css bugs
... ... @@ -20,9 +20,11 @@ function prepareMenu(id, options) {
20 20 link.href = "#";
21 21 link.className = "linkSubMenu";
22 22 linkText.parentNode.insertBefore( link, linkText );
23   - link.appendChild( linkText );
24 23 link.parentNode.style.zIndex = zIndex++;
25 24 link.subMenu = ul;
  25 + var span = document.createElement("span");
  26 + span.appendChild( linkText );
  27 + link.appendChild( span );
26 28 ul.linkControle = link;
27 29 link.openSubMenu =
28 30 function ( isMouseClick ) {
... ... @@ -35,12 +37,17 @@ function prepareMenu(id, options) {
35 37 return false;
36 38 }
37 39 } else {
  40 + link.className += " menu-opened"
38 41 this.subMenu.style.display = "block";
39 42 clearTimeout(this.timeOutClose);
40 43 clearTimeout(this.subMenu.timeOutClose);
41 44 }
42 45 }
43   - link.closeSubMenu = function(){ this.subMenu.style.display = "none" }
  46 + link.closeSubMenu =
  47 + function(){
  48 + this.subMenu.style.display = "none";
  49 + link.className = link.className.replace( / menu-opened/g, "" );
  50 + }
44 51  
45 52 //link.onclick = function(){ this.openSubMenu(true); return false }Is not working
46 53  
... ... @@ -56,7 +63,8 @@ function prepareMenu(id, options) {
56 63 this.timeOutClose = setTimeout( this.closeSubMenu.bind(this), menuCloseTimeout );
57 64 };
58 65  
59   - ul.closeSubMenu = function(){ this.style.display = "none" }
  66 + //ul.closeSubMenu = function(){ this.style.display = "none" }
  67 + ul.closeSubMenu = function(){ this.linkControle.closeSubMenu() }
60 68  
61 69 ul.onmouseover = ul.onfocus =
62 70 function () {
... ... @@ -68,7 +76,7 @@ function prepareMenu(id, options) {
68 76 function () {
69 77 if ( this.blurCalledByIEWorkArroundBug ) { return false }
70 78 this.blurCalledByIEWorkArroundBug = true;
71   - this.timeOutClose = setTimeout( this.closeSubMenu.bind(this), 333 );
  79 + this.timeOutClose = setTimeout( this.closeSubMenu.bind(this), menuCloseTimeout );
72 80 };
73 81 });
74 82  
... ... @@ -99,7 +107,7 @@ function prepareMenu(id, options) {
99 107 };
100 108 a.onblur = function() {
101 109 forceUlBlurFromLink(this);
102   - this.timeOutClose = setTimeout( this.closeSubMenu.bind(this), 333 );
  110 + this.timeOutClose = setTimeout( this.closeSubMenu.bind(this), menuCloseTimeout );
103 111 };
104 112 } else {
105 113 a.onfocus = function() { forceUlFocusFromLink(this) };
... ...
public/stylesheets/common.css
... ... @@ -14,7 +14,7 @@ body.category1 #wrap {
14 14 border-color: #E26B00;
15 15 }
16 16 body.category2 #wrap {
17   - border-color: #61B60E;
  17 + border-color: #58A80A;
18 18 }
19 19 body.category3 #wrap {
20 20 border-color: #694371;
... ...
public/stylesheets/menu.css
... ... @@ -19,31 +19,27 @@
19 19 height: 22px;
20 20 z-index: 4500;
21 21 background-color: #3465A4;
  22 + font-size: 11px;
  23 + letter-spacing: -1px;
  24 + background: url(/images/white-pixel.gif) 0px 100% repeat-x;
22 25 }
23 26  
24 27 #menu_link_to_envhome {
25   - position: absolute;
26   - top: 0px;
27   - left: 0px;
  28 + float: left;
28 29 display: block;
29   - width: 35px;
  30 + padding-left: 36px;
30 31 height: 100%;
31   - background: url(/images/icons-bar/ico-fbes-fundo-azul.gif) 0px 50% no-repeat;
  32 + background: url(/images/icons-bar/ico-fbes-fundo-azul.gif) 0px 0% no-repeat;
32 33 text-align: center;
33 34 color: transparent;
34   - font-size: 0px;
35 35 text-decoration: none;
36 36 }
37 37 body.category1 #menu_link_to_envhome { background-image: url(/images/icons-bar/ico-fbes-fundo-laranja.gif) }
38 38 body.category2 #menu_link_to_envhome { background-image: url(/images/icons-bar/ico-fbes-fundo-verde.gif) }
39 39 body.category3 #menu_link_to_envhome { background-image: url(/images/icons-bar/ico-fbes-fundo-lilas.gif) }
40 40 body.category4 #menu_link_to_envhome { background-image: url(/images/icons-bar/ico-fbes-fundo-vermelho.gif) }
41   -#menu_link_to_envhome span {
42   - position: relative;
43   - left: -100px;
44   -}
45 41  
46   -body.category #noosfero_bar { background-color: #2A5896 }
  42 +body.category #noosfero_bar { background-color: #2A5896 }
47 43  
48 44 body.category1 #noosfero_bar { background-color: #E26B00 }
49 45 #category1 .linkSubMenu,
... ... @@ -69,6 +65,11 @@ body.category4 #noosfero_bar { background-color: #B80000 }
69 65 #category4:hover .linkSubMenu,
70 66 #category4:hover ul { background-color: #A40000 }
71 67  
  68 +body.category1 .linkSubMenu { background-image: url(/images/borda-esq-aba-laranja.gif) }
  69 +body.category2 .linkSubMenu { background-image: url(/images/borda-esq-aba-verde.gif) }
  70 +body.category3 .linkSubMenu { background-image: url(/images/borda-esq-aba-lilas.gif) }
  71 +body.category4 .linkSubMenu { background-image: url(/images/borda-esq-aba-vermelho.gif) }
  72 +
72 73 #user_box {
73 74 position: absolute;
74 75 top: 0px;
... ... @@ -77,33 +78,35 @@ body.category4 #noosfero_bar { background-color: #B80000 }
77 78  
78 79 #user_box a:link,
79 80 #user_box a:visited {
80   - font-size: 11px;
81 81 font-weight: bold;
82 82 text-decoration: none;
83 83 line-height: 20px;
84 84 color: #FFF;
85   - margin-right: 10px;
  85 + margin-right: 20px;
  86 + padding-left: 21px;
86 87 opacity: 0.7;
87 88 display: block;
88 89 float: left;
89 90 height: 20px;
  91 + background-position: 0px 0%;
  92 + background-repeat: no-repeat;
90 93 }
  94 +
91 95 #user_box a:hover,
92 96 #user_box a:active {
93 97 opacity: 1;
94 98 }
95 99  
96 100 #user_box a#link_to_envhome {
97   - margin-right: 50px;
  101 + margin-right: 40px;
98 102 }
99 103  
100   -#link_go_home,
101   -#link_go_home:hover {
  104 +#user_box #link_go_home,
  105 +#user_box #link_go_home:hover {
102 106 position: relative;
103 107 padding: 0px;
104   - margin: 0px;
105 108 }
106   -#link_go_home img {
  109 +#user_box #link_go_home img {
107 110 position: absolute;
108 111 top: -1px;
109 112 left: -23px;
... ... @@ -113,15 +116,10 @@ body.category4 #noosfero_bar { background-color: #B80000 }
113 116 top: -1px;
114 117 }
115 118  
116   -#link_edit_profile {
117   - padding-left: 20px;
118   - background: url(/images/icons-bar/ico-edit.gif) 0px 0% no-repeat;
119   -}
120   -
121   -#link_logout {
122   - padding-left: 20px;
123   - background: url(/images/icons-bar/ico-exit.gif) 0px 0% no-repeat;
124   -}
  119 +#link_login { background-image: url(/images/icons-bar/ico-enter.gif) }
  120 +#open_search { background-image: url(/images/icons-bar/ico-search.gif) }
  121 +#link_edit_profile { background-image: url(/images/icons-bar/ico-edit.gif) }
  122 +#link_logout { background-image: url(/images/icons-bar/ico-exit.gif) }
125 123  
126 124 #cat_menu {
127 125 padding: 0px;
... ... @@ -136,9 +134,13 @@ body.category4 #noosfero_bar { background-color: #B80000 }
136 134 color: #FFF;
137 135 }
138 136  
  137 +#category1 .menu-opened,
139 138 #category1 ul a:hover, #category1 a:active { color: #FDD79E }
  139 +#category2 .menu-opened,
140 140 #category2 ul a:hover, #category2 a:active { color: #C4F099 }
  141 +#category3 .menu-opened,
141 142 #category3 ul a:hover, #category3 a:active { color: #D6BFD3 }
  143 +#category4 .menu-opened,
142 144 #category4 ul a:hover, #category4 a:active { color: #F79494 }
143 145  
144 146 .linkSubMenu {
... ... @@ -146,10 +148,23 @@ body.category4 #noosfero_bar { background-color: #B80000 }
146 148 float: left;
147 149 display: block;
148 150 margin-left: 5px;
149   - padding: 0px 5px;
150   - height: 100%;
151 151 position: relative;
152   - left: 50px;
  152 + left: 10px;
  153 + background-position: 0% 0%;
  154 + background-repeat: no-repeat;
  155 + background-image: url(/images/borda-esq-aba-azul.gif);
  156 + border-right: 1px solid #FFF;
  157 +}
  158 +.linkSubMenu span {
  159 + display: block;
  160 + line-height: 22px;
  161 + padding: 0px 5px;
  162 + background-position: 0% 100%;
  163 + background-repeat: repeat-x;
  164 + background-image: url(/images/white-pixel.gif);
  165 +}
  166 +.menu-opened span {
  167 + background-image: none;
153 168 }
154 169  
155 170 #cat_menu li {
... ... @@ -157,6 +172,8 @@ body.category4 #noosfero_bar { background-color: #B80000 }
157 172 margin: 0px;
158 173 list-style: none;
159 174 display: inline;
  175 + font-size: 14px;
  176 + letter-spacing: 0px;
160 177 }
161 178  
162 179 #cat_menu ul {
... ... @@ -164,9 +181,14 @@ body.category4 #noosfero_bar { background-color: #B80000 }
164 181 position: absolute;
165 182 top: 22px;
166 183 left: 0px;
167   - width: 100%;
168   - padding: 0px 0px 0px 20px;
  184 + right: 0px;
  185 + padding: 0px 0px 2px 20px;
169 186 margin: 0px;
  187 + border: 1px solid #FFF;
  188 + border-top: none;
  189 +}
  190 +.msie #cat_menu ul {
  191 + width: 100%;
170 192 }
171 193  
172 194 #cat_menu ul a {
... ...