From 2390ac5546527cf6542e8a724ba946c9a2e8cf88 Mon Sep 17 00:00:00 2001 From: AurelioAHeckert Date: Mon, 28 Jan 2008 23:37:15 +0000 Subject: [PATCH] ActionItem152: User Menuuuuuuu!!! --- app/helpers/application_helper.rb | 12 ++++++++++++ app/views/layouts/application.rhtml | 22 ++++++++++++++-------- app/views/shared/categories_menu.rhtml | 2 +- app/views/shared/user_menu.rhtml | 40 +++++++++++++++++++++------------------- public/designs/icons/default/edit-HC.gif | Bin 135 -> 0 bytes public/designs/icons/default/enter-HC.gif | Bin 123 -> 0 bytes public/designs/icons/default/exit-HC.gif | Bin 140 -> 0 bytes public/designs/icons/default/search-HC.gif | Bin 142 -> 0 bytes public/javascripts/application.js | 11 +---------- public/javascripts/assets-menu.js | 36 ------------------------------------ public/javascripts/auto-open-menu.js | 59 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ public/stylesheets/menu.css | 53 ++++++++++++++++++++++++++++++++--------------------- 12 files changed, 140 insertions(+), 95 deletions(-) delete mode 100644 public/javascripts/assets-menu.js create mode 100644 public/javascripts/auto-open-menu.js diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 1d758a2..a5fec11 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -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 diff --git a/app/views/layouts/application.rhtml b/app/views/layouts/application.rhtml index a68d2c3..6d94f76 100644 --- a/app/views/layouts/application.rhtml +++ b/app/views/layouts/application.rhtml @@ -10,14 +10,11 @@ - <%= 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();'> + <% unless flash[:notice].nil? %>
diff --git a/app/views/shared/categories_menu.rhtml b/app/views/shared/categories_menu.rhtml index f9ea6f4..befdb3d 100644 --- a/app/views/shared/categories_menu.rhtml +++ b/app/views/shared/categories_menu.rhtml @@ -20,5 +20,5 @@
-<%= javascript_include_tag 'assets-menu' %> + diff --git a/app/views/shared/user_menu.rhtml b/app/views/shared/user_menu.rhtml index 09f787c..0a3b61b 100644 --- a/app/views/shared/user_menu.rhtml +++ b/app/views/shared/user_menu.rhtml @@ -1,4 +1,4 @@ -
+
<% 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' %> -
    -
  • Meu Blog
    • - <%= - '
  • '+ link_to_myprofile( ''+ _('control panel'), - {}, nil, :id => 'link_edit_profile' ) +'
    • '+ - '
  • '+ lightbox_link_to( ''+ _('Logout'), - { :controller => 'account', :action => 'logout_popup'}, :id => 'link_logout' ) +'
    • ' - %> - <%= - '
  • '+ link_to( ''+ _('Admin'), - { :controller => 'admin_panel' }, :id => 'link_admin_panel' ) + - '
    • ' if user.is_admin? - %> -
  • <%= link_to( ''+_('Edit Profile'), - :controller => 'profile_editor', :profile => user.identifier, :action => 'edit' ) %>
    • -
  • <%= link_to( ''+_('Consumed Products'), - :profile => user.identifier, :controller => 'consumed_products' ) %>
    • -
+
+
    +
  • Meu Blog
    • +
  • <%= link_to_myprofile( ''+ _('control panel'), + {}, nil, :id => 'link_edit_profile' ) %>
    • +
  • <%= link_to( ''+_('Edit Profile'), + :controller => 'profile_editor', :profile => user.identifier, :action => 'edit' ) %>
    • +
  • <%= link_to( ''+_('Consumed Products'), + :profile => user.identifier, :controller => 'consumed_products' ) %>
    • + <%= + '
  • '+ link_to( ''+ _('Admin'), + { :controller => 'admin_panel' }, :id => 'link_admin_panel' ) + + '
    • ' if user.is_admin? + %> +
  • <%= lightbox_link_to( ''+ _('Logout'), + { :controller => 'account', :action => 'logout_popup'}, :id => 'link_logout' ) %>
    • +
+
<% else %> @@ -36,3 +36,5 @@ <% end %>
+ + diff --git a/public/designs/icons/default/edit-HC.gif b/public/designs/icons/default/edit-HC.gif index f2c4a12..4e99416 100644 Binary files a/public/designs/icons/default/edit-HC.gif and b/public/designs/icons/default/edit-HC.gif differ diff --git a/public/designs/icons/default/enter-HC.gif b/public/designs/icons/default/enter-HC.gif index ba8dd56..8c5331a 100644 Binary files a/public/designs/icons/default/enter-HC.gif and b/public/designs/icons/default/enter-HC.gif differ diff --git a/public/designs/icons/default/exit-HC.gif b/public/designs/icons/default/exit-HC.gif index 1d5776d..27b0819 100644 Binary files a/public/designs/icons/default/exit-HC.gif and b/public/designs/icons/default/exit-HC.gif differ diff --git a/public/designs/icons/default/search-HC.gif b/public/designs/icons/default/search-HC.gif index 2535a43..fb88ed7 100644 Binary files a/public/designs/icons/default/search-HC.gif and b/public/designs/icons/default/search-HC.gif differ diff --git a/public/javascripts/application.js b/public/javascripts/application.js index 688b866..29d8e26 100644 --- a/public/javascripts/application.js +++ b/public/javascripts/application.js @@ -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() { } } } + diff --git a/public/javascripts/assets-menu.js b/public/javascripts/assets-menu.js deleted file mode 100644 index 8d1a3fd..0000000 --- a/public/javascripts/assets-menu.js +++ /dev/null @@ -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 ); - } -} - diff --git a/public/javascripts/auto-open-menu.js b/public/javascripts/auto-open-menu.js new file mode 100644 index 0000000..f5a159e --- /dev/null +++ b/public/javascripts/auto-open-menu.js @@ -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 ); + } + } + +} diff --git a/public/stylesheets/menu.css b/public/stylesheets/menu.css index 6b0eb45..6524a1b 100644 --- a/public/stylesheets/menu.css +++ b/public/stylesheets/menu.css @@ -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%; -} -- libgit2 0.21.2