From 9ec083f6f5e194d8b3a712ec397ba633a3ee166b Mon Sep 17 00:00:00 2001
From: AurelioAHeckert <AurelioAHeckert@3f533792-8f58-4932-b0fe-aaf55b0a4547>
Date: Tue, 15 Jan 2008 23:27:21 +0000
Subject: [PATCH] ActionItem152: mais na barra!

---
 app/helpers/application_helper.rb        |  2 +-
 app/views/shared/categories_menu.rhtml   |  2 +-
 public/images/borda-esq-aba-azul.gif     | Bin 0 -> 179 bytes
 public/images/borda-esq-aba-laranja.gif  | Bin 0 -> 200 bytes
 public/images/borda-esq-aba-lilas.gif    | Bin 0 -> 200 bytes
 public/images/borda-esq-aba-verde.gif    | Bin 0 -> 200 bytes
 public/images/borda-esq-aba-vermelho.gif | Bin 0 -> 200 bytes
 public/images/icons-bar/ico-edit.gif     | Bin 155 -> 0 bytes
 public/images/icons-bar/ico-enter.gif    | Bin 0 -> 123 bytes
 public/images/icons-bar/ico-exit.gif     | Bin 126 -> 0 bytes
 public/images/icons-bar/ico-search.gif   | Bin 0 -> 142 bytes
 public/images/white-pixel.gif            | Bin 0 -> 35 bytes
 public/javascripts/menu.js               | 20 ++++++++++++++------
 public/stylesheets/common.css            |  2 +-
 public/stylesheets/menu.css              | 86 ++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------------
 15 files changed, 71 insertions(+), 41 deletions(-)
 create mode 100644 public/images/borda-esq-aba-azul.gif
 create mode 100644 public/images/borda-esq-aba-laranja.gif
 create mode 100644 public/images/borda-esq-aba-lilas.gif
 create mode 100644 public/images/borda-esq-aba-verde.gif
 create mode 100644 public/images/borda-esq-aba-vermelho.gif
 create mode 100644 public/images/icons-bar/ico-enter.gif
 create mode 100644 public/images/icons-bar/ico-search.gif
 create mode 100644 public/images/white-pixel.gif

diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index e8832b4..464a430 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -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,
       ]
diff --git a/app/views/shared/categories_menu.rhtml b/app/views/shared/categories_menu.rhtml
index 7d90408..f50c3b8 100644
--- a/app/views/shared/categories_menu.rhtml
+++ b/app/views/shared/categories_menu.rhtml
@@ -1,5 +1,5 @@
 <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 %>
diff --git a/public/images/borda-esq-aba-azul.gif b/public/images/borda-esq-aba-azul.gif
new file mode 100644
index 0000000..0c356ae
Binary files /dev/null and b/public/images/borda-esq-aba-azul.gif differ
diff --git a/public/images/borda-esq-aba-laranja.gif b/public/images/borda-esq-aba-laranja.gif
new file mode 100644
index 0000000..8e4fb79
Binary files /dev/null and b/public/images/borda-esq-aba-laranja.gif differ
diff --git a/public/images/borda-esq-aba-lilas.gif b/public/images/borda-esq-aba-lilas.gif
new file mode 100644
index 0000000..e6494a3
Binary files /dev/null and b/public/images/borda-esq-aba-lilas.gif differ
diff --git a/public/images/borda-esq-aba-verde.gif b/public/images/borda-esq-aba-verde.gif
new file mode 100644
index 0000000..8bef63a
Binary files /dev/null and b/public/images/borda-esq-aba-verde.gif differ
diff --git a/public/images/borda-esq-aba-vermelho.gif b/public/images/borda-esq-aba-vermelho.gif
new file mode 100644
index 0000000..6bd2b0f
Binary files /dev/null and b/public/images/borda-esq-aba-vermelho.gif differ
diff --git a/public/images/icons-bar/ico-edit.gif b/public/images/icons-bar/ico-edit.gif
index d352493..f2c4a12 100644
Binary files a/public/images/icons-bar/ico-edit.gif and b/public/images/icons-bar/ico-edit.gif differ
diff --git a/public/images/icons-bar/ico-enter.gif b/public/images/icons-bar/ico-enter.gif
new file mode 100644
index 0000000..ba8dd56
Binary files /dev/null and b/public/images/icons-bar/ico-enter.gif differ
diff --git a/public/images/icons-bar/ico-exit.gif b/public/images/icons-bar/ico-exit.gif
index cfa5de8..1d5776d 100644
Binary files a/public/images/icons-bar/ico-exit.gif and b/public/images/icons-bar/ico-exit.gif differ
diff --git a/public/images/icons-bar/ico-search.gif b/public/images/icons-bar/ico-search.gif
new file mode 100644
index 0000000..2535a43
Binary files /dev/null and b/public/images/icons-bar/ico-search.gif differ
diff --git a/public/images/white-pixel.gif b/public/images/white-pixel.gif
new file mode 100644
index 0000000..08fc23e
Binary files /dev/null and b/public/images/white-pixel.gif differ
diff --git a/public/javascripts/menu.js b/public/javascripts/menu.js
index 6150637..ae2d4b3 100644
--- a/public/javascripts/menu.js
+++ b/public/javascripts/menu.js
@@ -1,6 +1,6 @@
 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) };
diff --git a/public/stylesheets/common.css b/public/stylesheets/common.css
index 5fe0a0e..6dd18c2 100644
--- a/public/stylesheets/common.css
+++ b/public/stylesheets/common.css
@@ -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;
diff --git a/public/stylesheets/menu.css b/public/stylesheets/menu.css
index 594fbd2..7bf9128 100644
--- a/public/stylesheets/menu.css
+++ b/public/stylesheets/menu.css
@@ -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 {
--
libgit2 0.21.2