ActionItem152: User Menuuuuuuu!!!

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

ActionItem152: User Menuuuuuuu!!!
git-svn-id: https://svn.colivre.coop.br/svn/noosfero/trunk@1279 3f533792-8f58-4932-b0fe-aaf55b0a4547
AurelioAHeckert
1 parent 6ff873e1
Showing 12 changed files with 140 additions and 95 deletions Show diff stats
app/helpers/application_helper.rb
app/views/layouts/application.rhtml
app/views/shared/categories_menu.rhtml
app/views/shared/user_menu.rhtml
public/designs/icons/default/edit-HC.gif
public/designs/icons/default/enter-HC.gif
public/designs/icons/default/exit-HC.gif
public/designs/icons/default/search-HC.gif
public/javascripts/application.js
public/javascripts/assets-menu.js
public/javascripts/auto-open-menu.js
public/stylesheets/menu.css
@@ -335,4 +335,16 @@ module ApplicationHelper
     @controller.send(:user)
   end
+
+  def stylesheet_import(*sources)
+    options = sources.last.is_a?(Hash) ? sources.pop.stringify_keys : { }
+    content_tag( 'style', 
+      "\n" +
+      sources.flatten.collect do |source|
+        source = '  @import url('+ stylesheet_path(source.to_s()) +");\n";
+      end.join(),
+      { "type" => "text/css" }.merge(options)
+    )
+  end
+
 end
@@ -10,14 +10,11 @@
     </title>
     <meta name="description" content="FIXME: Descriptions of Noosfero" />
     <meta name="keywords" content="Noosfero, Community, Open Source" />
-    <%= stylesheet_link_tag 'common' %>
-    <%= stylesheet_link_tag 'help'   %>
-    <%= stylesheet_link_tag 'menu'   %>
-    <%= stylesheet_link_tag 'button' %>
-    <%= stylesheet_link_tag 'search' %>
-    <%= stylesheet_link_tag 'blocks' %>
-    <%= stylesheet_link_tag 'forms'  %>
-    <%= stylesheet_link_tag 'login-box' %>
+    <%#
+     stylesheet_import is better then stylesheet_link_tag because the stylesheet
+     must be loaded before the page show.
+    %>
+    <%= stylesheet_import %w( common help menu button search blocks forms login-box ) %>
     <%=
       # Load the controller's css file if it exists:
       css = "controller_"+ @controller.controller_name() +".css"
@@ -30,6 +27,7 @@
     <%= javascript_include_tag(:defaults) %>
     <%= javascript_include_tag 'menu' %>
+    <%= javascript_include_tag 'auto-open-menu' %>
     <%= include_lightbox_header %>
     <%# cms stuff %>
     <% if params[:controller] == 'cms' %>
@@ -42,6 +40,14 @@
     " controller_"+ @controller.controller_name() +
     " action_"+ @controller.controller_name() +"_"+ @controller.action_name()
     %>' onload='noosfero_init();'>
+    <script type="text/javascript">
+      /* Adds a class to "msie" to the body element if a Microsoft browser is
+       * detected. This is needed to workaround several of their limitations.
+       */
+      if ( navigator.appName.indexOf("Microsoft") > -1 ) {
+        document.body.className += " msie";
+      }
+    </script>
     <% unless flash[:notice].nil? %>
       <div id='notice' onclick="Element.hide('notice');">
@@ -20,5 +20,5 @@
   </div><!-- fim id="assets_menu_list" -->
   <div id="assets_menu_layout_iten"></div>
 </div><!-- fim id="assets_menu" -->
-<%= javascript_include_tag 'assets-menu' %>
+<script> setAutoOpenMenu( $("assets_menu") ); </script>
-<div id="user_menu" class="top_extra_menu">
+<div id="user_menu" class="top_extra_menu AOM_paddingBottom_6">
 <% if logged_in? %>
   <%=
@@ -8,24 +8,24 @@
     '" alt="'+ current_user.login() +' Icon-Photo" title="" height="20" border="0"/>'+
     current_user.login, current_user.login, :id=>'link_go_home', :class => 'user_menu_first_link'
   %>
-  <ul>
-    <li><a href="#"><span class="icon-menu-blog"></span> Meu Blog</a></li>
-    <%=
-      '<li>'+ link_to_myprofile( '<span class="icon-menu-ctrl-panel"></span>'+ _('control panel'),
-                                 {}, nil, :id => 'link_edit_profile' ) +'</li>'+
-      '<li>'+ lightbox_link_to( '<span class="icon-menu-logout"></span>'+ _('Logout'),
-                                { :controller => 'account', :action => 'logout_popup'}, :id => 'link_logout' ) +'</li>'
-    %>
-    <%=
-      '<li>'+ link_to( '<span class="icon-menu-"></span>'+ _('Admin'),
-                       { :controller => 'admin_panel' }, :id => 'link_admin_panel' ) +
-      '</li>' if user.is_admin?
-    %>
-    <li><%= link_to( '<span class="icon-menu-"></span>'+_('Edit Profile'),
-                    :controller => 'profile_editor', :profile => user.identifier, :action => 'edit' ) %></li>
-    <li><%= link_to( '<span class="icon-menu-"></span>'+_('Consumed Products'),
-                    :profile => user.identifier, :controller => 'consumed_products' ) %></li>
-  </ul>
+  <div id="user_menu_ul">
+    <ul>
+      <li><a href="#"><span class="icon-menu-blog"></span> Meu Blog</a></li>
+      <li><%= link_to_myprofile( '<span class="icon-menu-ctrl-panel"></span>'+ _('control panel'),
+                                   {}, nil, :id => 'link_edit_profile' ) %></li>
+      <li><%= link_to( '<span class="icon-menu-"></span>'+_('Edit Profile'),
+                      :controller => 'profile_editor', :profile => user.identifier, :action => 'edit' ) %></li>
+      <li><%= link_to( '<span class="icon-menu-"></span>'+_('Consumed Products'),
+                      :profile => user.identifier, :controller => 'consumed_products' ) %></li>
+      <%=
+        '<li>'+ link_to( '<span class="icon-menu-"></span>'+ _('Admin'),
+                         { :controller => 'admin_panel' }, :id => 'link_admin_panel' ) +
+        '</li>' if user.is_admin?
+      %>
+      <li><%= lightbox_link_to( '<span class="icon-menu-logout"></span>'+ _('Logout'),
+                                  { :controller => 'account', :action => 'logout_popup'}, :id => 'link_logout' ) %></li>
+    </ul>
+  </div><!-- id="user_menu_ul" -->
 <% else %>
@@ -36,3 +36,5 @@
 <% end %>
 </div><!-- fim id="user_menu" -->
+
+<script> setAutoOpenMenu( $("user_menu") ); </script>
@@ -3,16 +3,6 @@
 function noosfero_init() {
   focus_first_field();
-  detect_internet_explorer();
-}
-
-/* Adds a class to "msie" to the body element if a Microsoft browser is
- * detected. This is needed to workaround several of their limitations.
- */
-function detect_internet_explorer() {
-  if ( navigator.appName.indexOf("Microsoft") > -1 ) {
-    document.body.className += " msie";
-  }
 }
 /* If applicable, find the first field in which the user can type and move the
@@ -32,3 +22,4 @@ function focus_first_field() {
     }
   }
 }
+
@@ -1,36 +0,0 @@
-
-var amul = document.getElementById( "assets_menu_ul" );
-amul.h = 56;
-amul.minSize = 56;
-amul.maxSize = amul.getElementsByTagName("li").length * 19;
-window.amul = amul;
-
-amul.onmouseover = function () {
-  clearTimeout( this.timeoutClose );
-  if ( this.h < this.maxSize ) {
-    this.h += 10;
-    this.style.height = this.h +"px";
-    this.timeoutOpen = setTimeout( "window.amul.onmouseover()", 33 );
-  } else {
-    this.h = this.maxSize;
-    this.style.height = this.h +"px";
-  }
-}
-
-amul.onmouseout = function ( doIt ) {
-  clearTimeout( this.timeoutOpen );
-  if ( doIt ) {
-    if ( this.h > this.minSize ) {
-      this.h -= 10;
-      this.style.height = this.h +"px";
-      this.timeoutClose = setTimeout( "window.amul.onmouseout(true)", 33 );
-    } else {
-      this.h = this.minSize;
-      this.style.height = this.h +"px";
-    }
-  } else {
-    // Work arround IE bug
-    this.timeoutClose = setTimeout( "window.amul.onmouseout(true)", 200 );
-  }
-}
-
@@ -0,0 +1,59 @@
+
+function setAutoOpenMenu( menu ) {
+
+  var mul = menu.getElementsByTagName("ul")[0];
+  if ( !mul ) return false;
+
+  mul.h = mul.clientHeight; // remember the current height to a faster animation
+  mul.minSize = mul.clientHeight;
+  var vli = mul.getElementsByTagName("li");
+  mul.paddingBottom = parseInt( menu.className.replace( /.*AOM_paddingBottom_([^\s]+).*/, "$1" ) );
+  mul.maxSize = ( vli.length * ( vli[1].offsetTop - vli[0].offsetTop ) );
+
+  window["autoOpenMenu-"+menu.id] = menu;
+  menu.mul = mul;
+
+  if ( mul.minSize == 1 ) {
+    // Work arround bug for IE - ie sux - ie sux - ie sux - ie sux -ie sux -ie sux -ie sux - ie sux!!!
+    mul.h = 12;
+    setTimeout('m = window[\'autoOpenMenu-'+menu.id+'\']; m.onmouseout()', 10);
+  }
+
+  menu.isIE = ( navigator.appName.indexOf("Microsoft") > -1 );
+
+  menu.onmouseover = function () {
+    clearTimeout( this.timeoutClose );
+    var mul = this.mul;
+    if ( mul.paddingBottom ) mul.parentNode.style.paddingBottom = mul.paddingBottom +"px";
+    if ( mul.h < mul.maxSize ) {
+      mul.h += 10;
+      mul.style.height = mul.h +"px";
+      this.timeoutOpen = setTimeout( "window['autoOpenMenu-"+this.id+"'].onmouseover()", 33 );
+    } else {
+      mul.h = mul.maxSize;
+      mul.style.height = mul.h +"px";
+    }
+  }
+
+  menu.onmouseout = function ( doIt ) {
+    clearTimeout( this.timeoutOpen );
+    var mul = this.mul;
+    if ( doIt ) {
+      if ( mul.h > mul.minSize ) {
+        mul.h -= 10;
+        if ( mul.h < 0 ) mul.h = 0;
+        if ( this.isIE ) if ( mul.h < 1 ) mul.h = 1;
+        mul.style.height = mul.h +"px";
+        this.timeoutClose = setTimeout( "window['autoOpenMenu-"+this.id+"'].onmouseout(true)", 33 );
+      } else {
+        mul.h = mul.minSize;
+        mul.style.height = mul.h +"px";
+        if ( mul.paddingBottom ) mul.parentNode.style.paddingBottom = "0px";
+      }
+    } else {
+      // Work arround IE bug
+      this.timeoutClose = setTimeout( "window['autoOpenMenu-"+this.id+"'].onmouseout(true)", 200 );
+    }
+  }
+
+}
@@ -224,25 +224,34 @@ body.category3 .top_extra_menu a:hover { background: #75507B; color: #FFF }
 body.category4 #user_box a:hover,
 body.category4 .top_extra_menu a:hover { background: #CC0000; color: #FFF }
+#user_box a img,
 #user_box a span,
 .top_extra_menu a span {
 	position: absolute;
 	top: 0px;
 	left: 0px;
-  display: block;
   width: 18px;
   height: 18px;
+  display: block;
   float: left;
   background-repeat: no-repeat;
   background-position: 50% 50%;
   opacity: 0.7;
 	filter: alpha(opacity=70);
 }
+#user_box a img,
 #user_box a:hover span,
 .top_extra_menu a:hover span {
   opacity: 1;
 	filter: alpha(opacity=100);
 }
+#user_box a img {
+  border: none;
+  top: -1px;
+  left: -1px;
+	width: 20px;
+	height: 20px;
+}
 /* * * User Box * * * * * * * * * * * */
@@ -271,43 +280,45 @@ body.category4 .top_extra_menu a:hover { background: #CC0000; color: #FFF }
   width: 170px;
 }
-.user_menu_first_link {
-  margin-left: 4px;
+#user_box a.user_menu_first_link {
+  margin-left: 25px;
+  display: inline;
 }
 #user_menu .user_menu_first_link:hover {
   background: none;
 }
-#user_menu a img {
-  float: left;
-  border: none;
-  margin: -1px 2px 0px 0px;
-  opacity: 0.7;
-	filter: alpha(opacity=70);
+#user_box a#link_go_home {
+  line-height: 22px;
+  top: -3px;
+  overflow: visible;
 }
-#user_menu a:hover img {
-  opacity: 1;
-	filter: alpha(opacity=100);
+.msie #link_go_home img {
+  margin-top: 3px;
 }
-#user_menu ul {
+#user_menu_ul {
   position: absolute;
   top: 21px;
   right: 0px;
+  background: url(/images/top-bar/assets-menu-bg-azul.gif) 0% 100%;
+  border-right: 1px solid #FFF;
+}
+
+#user_menu ul {
   width: 150px;
   max-width: 140px;
-  padding: 0px 4px 5px 5px;
+  height: 0px;
+  overflow: hidden;
+  padding: 0px 4px 0px 5px;
   margin: 0px;
-  border: 1px solid #FFF;
-  border-top: none;
-  background: #2A5896;
 }
+.msie #user_menu ul {
+  height: 1px;
+}
+
 #user_menu li {
   width: 100%;
   overflow: hidden;
 }
-#user_menu a {
-  Xposition: relative;
-  Xwidth: 100%;
-}
	@@ -335,4 +335,16 @@ module ApplicationHelper		@@ -335,4 +335,16 @@ module ApplicationHelper
335	@controller.send(:user)	335	@controller.send(:user)
336	end	336	end
337		337
		338	+
		339	+ def stylesheet_import(*sources)
		340	+ options = sources.last.is_a?(Hash) ? sources.pop.stringify_keys : { }
		341	+ content_tag( 'style',
		342	+ "\n" +
		343	+ sources.flatten.collect do \|source\|
		344	+ source = ' @import url('+ stylesheet_path(source.to_s()) +");\n";
		345	+ end.join(),
		346	+ { "type" => "text/css" }.merge(options)
		347	+ )
		348	+ end
		349	+
338	end	350	end
	@@ -20,5 +20,5 @@		@@ -20,5 +20,5 @@
20	</div><!-- fim id="assets_menu_list" -->	20	</div><!-- fim id="assets_menu_list" -->
21	<div id="assets_menu_layout_iten"></div>	21	<div id="assets_menu_layout_iten"></div>
22	</div><!-- fim id="assets_menu" -->	22	</div><!-- fim id="assets_menu" -->
23	-<%= javascript_include_tag 'assets-menu' %>
24		23
		24	+<script> setAutoOpenMenu( $("assets_menu") ); </script>
	@@ -3,16 +3,6 @@		@@ -3,16 +3,6 @@
3		3
4	function noosfero_init() {	4	function noosfero_init() {
5	focus_first_field();	5	focus_first_field();
6	- detect_internet_explorer();
7	-}
8	-
9	-/* Adds a class to "msie" to the body element if a Microsoft browser is
10	- * detected. This is needed to workaround several of their limitations.
11	- */
12	-function detect_internet_explorer() {
13	- if ( navigator.appName.indexOf("Microsoft") > -1 ) {
14	- document.body.className += " msie";
15	- }
16	}	6	}
17		7
18	/* If applicable, find the first field in which the user can type and move the	8	/* If applicable, find the first field in which the user can type and move the
	@@ -32,3 +22,4 @@ function focus_first_field() {		@@ -32,3 +22,4 @@ function focus_first_field() {
32	}	22	}
33	}	23	}
34	}	24	}
		25	+
	@@ -1,36 +0,0 @@	@@ -1,36 +0,0 @@
1	-
2	-var amul = document.getElementById( "assets_menu_ul" );
3	-amul.h = 56;
4	-amul.minSize = 56;
5	-amul.maxSize = amul.getElementsByTagName("li").length * 19;
6	-window.amul = amul;
7	-
8	-amul.onmouseover = function () {
9	- clearTimeout( this.timeoutClose );
10	- if ( this.h < this.maxSize ) {
11	- this.h += 10;
12	- this.style.height = this.h +"px";
13	- this.timeoutOpen = setTimeout( "window.amul.onmouseover()", 33 );
14	- } else {
15	- this.h = this.maxSize;
16	- this.style.height = this.h +"px";
17	- }
18	-}
19	-
20	-amul.onmouseout = function ( doIt ) {
21	- clearTimeout( this.timeoutOpen );
22	- if ( doIt ) {
23	- if ( this.h > this.minSize ) {
24	- this.h -= 10;
25	- this.style.height = this.h +"px";
26	- this.timeoutClose = setTimeout( "window.amul.onmouseout(true)", 33 );
27	- } else {
28	- this.h = this.minSize;
29	- this.style.height = this.h +"px";
30	- }
31	- } else {
32	- // Work arround IE bug
33	- this.timeoutClose = setTimeout( "window.amul.onmouseout(true)", 200 );
34	- }
35	-}
36	-
@@ -0,0 +1,59 @@		@@ -0,0 +1,59 @@
	1	+
	2	+function setAutoOpenMenu( menu ) {
	3	+
	4	+ var mul = menu.getElementsByTagName("ul")[0];
	5	+ if ( !mul ) return false;
	6	+
	7	+ mul.h = mul.clientHeight; // remember the current height to a faster animation
	8	+ mul.minSize = mul.clientHeight;
	9	+ var vli = mul.getElementsByTagName("li");
	10	+ mul.paddingBottom = parseInt( menu.className.replace( /.AOM_paddingBottom_([^\s]+)./, "$1" ) );
	11	+ mul.maxSize = ( vli.length * ( vli[1].offsetTop - vli[0].offsetTop ) );
	12	+
	13	+ window["autoOpenMenu-"+menu.id] = menu;
	14	+ menu.mul = mul;
	15	+
	16	+ if ( mul.minSize == 1 ) {
	17	+ // Work arround bug for IE - ie sux - ie sux - ie sux - ie sux -ie sux -ie sux -ie sux - ie sux!!!
	18	+ mul.h = 12;
	19	+ setTimeout('m = window[\'autoOpenMenu-'+menu.id+'\']; m.onmouseout()', 10);
	20	+ }
	21	+
	22	+ menu.isIE = ( navigator.appName.indexOf("Microsoft") > -1 );
	23	+
	24	+ menu.onmouseover = function () {
	25	+ clearTimeout( this.timeoutClose );
	26	+ var mul = this.mul;
	27	+ if ( mul.paddingBottom ) mul.parentNode.style.paddingBottom = mul.paddingBottom +"px";
	28	+ if ( mul.h < mul.maxSize ) {
	29	+ mul.h += 10;
	30	+ mul.style.height = mul.h +"px";
	31	+ this.timeoutOpen = setTimeout( "window['autoOpenMenu-"+this.id+"'].onmouseover()", 33 );
	32	+ } else {
	33	+ mul.h = mul.maxSize;
	34	+ mul.style.height = mul.h +"px";
	35	+ }
	36	+ }
	37	+
	38	+ menu.onmouseout = function ( doIt ) {
	39	+ clearTimeout( this.timeoutOpen );
	40	+ var mul = this.mul;
	41	+ if ( doIt ) {
	42	+ if ( mul.h > mul.minSize ) {
	43	+ mul.h -= 10;
	44	+ if ( mul.h < 0 ) mul.h = 0;
	45	+ if ( this.isIE ) if ( mul.h < 1 ) mul.h = 1;
	46	+ mul.style.height = mul.h +"px";
	47	+ this.timeoutClose = setTimeout( "window['autoOpenMenu-"+this.id+"'].onmouseout(true)", 33 );
	48	+ } else {
	49	+ mul.h = mul.minSize;
	50	+ mul.style.height = mul.h +"px";
	51	+ if ( mul.paddingBottom ) mul.parentNode.style.paddingBottom = "0px";
	52	+ }
	53	+ } else {
	54	+ // Work arround IE bug
	55	+ this.timeoutClose = setTimeout( "window['autoOpenMenu-"+this.id+"'].onmouseout(true)", 200 );
	56	+ }
	57	+ }
	58	+
	59	+}