ActionItem152: mais na barra!

git-svn-id: https://svn.colivre.coop.br/svn/noosfero/trunk@1194 3f533792-8f58-4932-b0fe-aaf55b0a4547

ActionItem152: mais na barra!
git-svn-id: https://svn.colivre.coop.br/svn/noosfero/trunk@1194 3f533792-8f58-4932-b0fe-aaf55b0a4547
AurelioAHeckert
1 parent 7d27aebe
Showing 15 changed files with 71 additions and 41 deletions Show diff stats
app/helpers/application_helper.rb
app/views/shared/categories_menu.rhtml
public/images/borda-esq-aba-azul.gif
public/images/borda-esq-aba-laranja.gif
public/images/borda-esq-aba-lilas.gif
public/images/borda-esq-aba-verde.gif
public/images/borda-esq-aba-vermelho.gif
public/images/icons-bar/ico-edit.gif
public/images/icons-bar/ico-enter.gif
public/images/icons-bar/ico-exit.gif
public/images/icons-bar/ico-search.gif
public/images/white-pixel.gif
public/javascripts/menu.js
public/stylesheets/common.css
public/stylesheets/menu.css
@@ -129,7 +129,7 @@ module ApplicationHelper
       ]
     else
       [
-        ( link_to _("%s's home") % @environment.name, { :controller=>"home" }, :id=>"link_to_envhome" ),
+        #( link_to _("%s's home") % @environment.name, { :controller=>"home" }, :id=>"link_to_envhome" ),
         ( link_to content_tag('span', _('Login')), { :controller => 'account', :action => 'login' }, :id => 'link_login' ),
         search_link,
       ]
 <ul id='cat_menu'>
-  <%= link_to( "<span>"+ _("Go Home") +"</span>", {:controller=>"home"}, :id=>"menu_link_to_envhome", :title=>@environment.name) %>
+  <%= link_to( "<span>"+ @environment.name() +"</span>", {:controller=>"home"}, :id=>"menu_link_to_envhome", :title=>@environment.name) %>
   <% @environment.display_categories.each do |item| %>
     <li id='category<%= item.display_color %>'<%= ' class="active"' if (@category && (@category.top_ancestor == item)) %>>
       <%= item.name %>
 function prepareMenu(id, options) {
-    var menuCloseTimeout = options.timeout || 333;
+    var menuCloseTimeout = options.timeout || 33;
     if ( document.all ) {
         // add a class for work arround msie&#180;s css bugs
@@ -20,9 +20,11 @@ function prepareMenu(id, options) {
         link.href = "#";
         link.className = "linkSubMenu";
         linkText.parentNode.insertBefore( link, linkText );
-        link.appendChild( linkText );
         link.parentNode.style.zIndex = zIndex++;
         link.subMenu = ul;
+        var span = document.createElement("span");
+        span.appendChild( linkText );
+        link.appendChild( span );
         ul.linkControle = link;
         link.openSubMenu =
             function ( isMouseClick ) {
@@ -35,12 +37,17 @@ function prepareMenu(id, options) {
                         return false;
                     }
                 } else {
+                    link.className += " menu-opened"
                     this.subMenu.style.display = "block";
                     clearTimeout(this.timeOutClose);
                     clearTimeout(this.subMenu.timeOutClose);
                 }
             }
-        link.closeSubMenu = function(){ this.subMenu.style.display = "none" }
+        link.closeSubMenu =
+            function(){
+              this.subMenu.style.display = "none";
+              link.className = link.className.replace( / menu-opened/g, "" );
+            }
         //link.onclick = function(){ this.openSubMenu(true); return false }Is not working
@@ -56,7 +63,8 @@ function prepareMenu(id, options) {
                 this.timeOutClose = setTimeout( this.closeSubMenu.bind(this), menuCloseTimeout );
             };
-        ul.closeSubMenu = function(){ this.style.display = "none" }
+        //ul.closeSubMenu = function(){ this.style.display = "none" }
+        ul.closeSubMenu = function(){ this.linkControle.closeSubMenu() }
         ul.onmouseover = ul.onfocus =
             function () {
@@ -68,7 +76,7 @@ function prepareMenu(id, options) {
             function () {
                 if ( this.blurCalledByIEWorkArroundBug ) { return false }
                 this.blurCalledByIEWorkArroundBug = true;
-                this.timeOutClose = setTimeout( this.closeSubMenu.bind(this), 333 );
+                this.timeOutClose = setTimeout( this.closeSubMenu.bind(this), menuCloseTimeout );
             };
     });
@@ -99,7 +107,7 @@ function prepareMenu(id, options) {
                 };
                 a.onblur = function() {
                     forceUlBlurFromLink(this);
-                    this.timeOutClose = setTimeout( this.closeSubMenu.bind(this), 333 );
+                    this.timeOutClose = setTimeout( this.closeSubMenu.bind(this), menuCloseTimeout );
                 };
             } else {
                 a.onfocus = function() { forceUlFocusFromLink(this) };
@@ -14,7 +14,7 @@ body.category1 #wrap {
   border-color: #E26B00;
 }
 body.category2 #wrap {
-  border-color: #61B60E;
+  border-color: #58A80A;
 }
 body.category3 #wrap {
   border-color: #694371;
@@ -19,31 +19,27 @@
   height: 22px;
   z-index: 4500;
   background-color: #3465A4;
+  font-size: 11px;
+  letter-spacing: -1px;
+  background: url(/images/white-pixel.gif) 0px 100% repeat-x;
 }
 #menu_link_to_envhome {
-  position: absolute;
-  top: 0px;
-  left: 0px;
+  float: left;
   display: block;
-  width: 35px;
+  padding-left: 36px;
   height: 100%;
-  background: url(/images/icons-bar/ico-fbes-fundo-azul.gif) 0px 50% no-repeat;
+  background: url(/images/icons-bar/ico-fbes-fundo-azul.gif) 0px 0% no-repeat;
   text-align: center;
   color: transparent;
-  font-size: 0px;
   text-decoration: none;
 }
 body.category1 #menu_link_to_envhome { background-image: url(/images/icons-bar/ico-fbes-fundo-laranja.gif)  }
 body.category2 #menu_link_to_envhome { background-image: url(/images/icons-bar/ico-fbes-fundo-verde.gif)    }
 body.category3 #menu_link_to_envhome { background-image: url(/images/icons-bar/ico-fbes-fundo-lilas.gif)    }
 body.category4 #menu_link_to_envhome { background-image: url(/images/icons-bar/ico-fbes-fundo-vermelho.gif) }
-#menu_link_to_envhome span {
-  position: relative;
-  left: -100px;
-}
-body.category #noosfero_bar { background-color: #2A5896 }
+body.category   #noosfero_bar { background-color: #2A5896 }
 body.category1  #noosfero_bar { background-color: #E26B00 }
 #category1       .linkSubMenu,
@@ -69,6 +65,11 @@ body.category4  #noosfero_bar { background-color: #B80000 }
 #category4:hover .linkSubMenu,
 #category4:hover ul           { background-color: #A40000 }
+body.category1 .linkSubMenu { background-image: url(/images/borda-esq-aba-laranja.gif)  }
+body.category2 .linkSubMenu { background-image: url(/images/borda-esq-aba-verde.gif)    }
+body.category3 .linkSubMenu { background-image: url(/images/borda-esq-aba-lilas.gif)    }
+body.category4 .linkSubMenu { background-image: url(/images/borda-esq-aba-vermelho.gif) }
+
 #user_box {
   position: absolute;
   top: 0px;
@@ -77,33 +78,35 @@ body.category4  #noosfero_bar { background-color: #B80000 }
 #user_box a:link,
 #user_box a:visited {
-  font-size: 11px;
   font-weight: bold;
   text-decoration: none;
   line-height: 20px;
   color: #FFF;
-  margin-right: 10px;
+  margin-right: 20px;
+  padding-left: 21px;
   opacity: 0.7;
   display: block;
   float: left;
   height: 20px;
+  background-position: 0px 0%;
+  background-repeat: no-repeat;
 }
+
 #user_box a:hover,
 #user_box a:active {
   opacity: 1;
 }
 #user_box a#link_to_envhome {
-  margin-right: 50px;
+  margin-right: 40px;
 }
-#link_go_home,
-#link_go_home:hover {
+#user_box #link_go_home,
+#user_box #link_go_home:hover {
   position: relative;
   padding: 0px;
-  margin: 0px;
 }
-#link_go_home img {
+#user_box #link_go_home img {
   position: absolute;
   top: -1px;
   left: -23px;
@@ -113,15 +116,10 @@ body.category4  #noosfero_bar { background-color: #B80000 }
   top: -1px;
 }
-#link_edit_profile {
-  padding-left: 20px;
-  background: url(/images/icons-bar/ico-edit.gif) 0px 0% no-repeat;
-}
-
-#link_logout {
-  padding-left: 20px;
-  background: url(/images/icons-bar/ico-exit.gif) 0px 0% no-repeat;
-}
+#link_login        { background-image: url(/images/icons-bar/ico-enter.gif)  }
+#open_search       { background-image: url(/images/icons-bar/ico-search.gif) }
+#link_edit_profile { background-image: url(/images/icons-bar/ico-edit.gif)   }
+#link_logout       { background-image: url(/images/icons-bar/ico-exit.gif)   }
 #cat_menu {
   padding: 0px;
@@ -136,9 +134,13 @@ body.category4  #noosfero_bar { background-color: #B80000 }
   color: #FFF;
 }
+#category1 .menu-opened,
 #category1 ul a:hover, #category1 a:active { color: #FDD79E }
+#category2 .menu-opened,
 #category2 ul a:hover, #category2 a:active { color: #C4F099 }
+#category3 .menu-opened,
 #category3 ul a:hover, #category3 a:active { color: #D6BFD3 }
+#category4 .menu-opened,
 #category4 ul a:hover, #category4 a:active { color: #F79494 }
 .linkSubMenu {
@@ -146,10 +148,23 @@ body.category4  #noosfero_bar { background-color: #B80000 }
   float: left;
   display: block;
   margin-left: 5px;
-  padding: 0px 5px;
-  height: 100%;
   position: relative;
-  left: 50px;
+  left: 10px;
+  background-position: 0% 0%;
+  background-repeat: no-repeat;
+  background-image: url(/images/borda-esq-aba-azul.gif);
+  border-right: 1px solid #FFF;
+}
+.linkSubMenu span {
+  display: block;
+  line-height: 22px;
+  padding: 0px 5px;
+  background-position: 0% 100%;
+  background-repeat: repeat-x;
+  background-image: url(/images/white-pixel.gif);
+}
+.menu-opened span {
+  background-image: none;
 }
 #cat_menu li {
@@ -157,6 +172,8 @@ body.category4  #noosfero_bar { background-color: #B80000 }
   margin: 0px;
   list-style: none;
   display: inline;
+  font-size: 14px;
+  letter-spacing: 0px;
 }
 #cat_menu ul {
@@ -164,9 +181,14 @@ body.category4  #noosfero_bar { background-color: #B80000 }
   position: absolute;
   top: 22px;
   left: 0px;
-  width: 100%;
-  padding: 0px 0px 0px 20px;
+  right: 0px;
+  padding: 0px 0px 2px 20px;
   margin: 0px;
+  border: 1px solid #FFF;
+  border-top: none;
+}
+.msie #cat_menu ul {
+  width: 100%;
 }
 #cat_menu ul a {
	@@ -129,7 +129,7 @@ module ApplicationHelper		@@ -129,7 +129,7 @@ module ApplicationHelper
129	]	129	]
130	else	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	( link_to content_tag('span', _('Login')), { :controller => 'account', :action => 'login' }, :id => 'link_login' ),	133	( link_to content_tag('span', _('Login')), { :controller => 'account', :action => 'login' }, :id => 'link_login' ),
134	search_link,	134	search_link,
135	]	135	]
1	<ul id='cat_menu'>	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	<% @environment.display_categories.each do \|item\| %>	3	<% @environment.display_categories.each do \|item\| %>
4	<li id='category<%= item.display_color %>'<%= ' class="active"' if (@category && (@category.top_ancestor == item)) %>>	4	<li id='category<%= item.display_color %>'<%= ' class="active"' if (@category && (@category.top_ancestor == item)) %>>
5	<%= item.name %>	5	<%= item.name %>
	@@ -14,7 +14,7 @@ body.category1 #wrap {		@@ -14,7 +14,7 @@ body.category1 #wrap {
14	border-color: #E26B00;	14	border-color: #E26B00;
15	}	15	}
16	body.category2 #wrap {	16	body.category2 #wrap {
17	- border-color: #61B60E;	17	+ border-color: #58A80A;
18	}	18	}
19	body.category3 #wrap {	19	body.category3 #wrap {
20	border-color: #694371;	20	border-color: #694371;