Download as
Browse Code »

Commit 2390ac5546527cf6542e8a724ba946c9a2e8cf88

Authored by AurelioAHeckert
1 parent 6ff873e1
Exists in master and in 29 other branches add_member_task_reject_details, admin_visible_profile, article-list-template, community_notifications, contact_admin_translation, event_fixes, fix_comments_pagination, fix_rails4_organization_ratings, fix_sign_up_form, follow_step_fix, forum_topic_creation, mirror_block_improvements, multi_env_on_remote_user, new_security, noosfero_spb_ci, organization_ratings_improvements, organization_ratings_link_to_profile_stable-spb-1.3, organization_ratings_translations_fix, profile_api_improvements, ratings_minor_fixes, remote_user_fix, send_email_to_admins, stable-spb-1.3, stable-spb-1.3-fixes, stable-spb-1.4, stable-spb-1.5, suggest_rejected_value, web_steps_improvements, xss_terminate_custom_options

ActionItem152: User Menuuuuuuu!!! 

git-svn-id: https://svn.colivre.coop.br/svn/noosfero/trunk@1279 3f533792-8f58-4932-b0fe-aaf55b0a4547
Showing 12 changed files with 140 additions and 95 deletions   Show diff stats
app/helpers/application_helper.rb
  Diff comments   View file @2390ac5
... ... @@ -335,4 +335,16 @@ module ApplicationHelper
335 335 @controller.send(:user)
336 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 350 end
... ...
app/views/layouts/application.rhtml
  Diff comments   View file @2390ac5
... ... @@ -10,14 +10,11 @@
10 10 </title>
11 11 <meta name="description" content="FIXME: Descriptions of Noosfero" />
12 12 <meta name="keywords" content="Noosfero, Community, Open Source" />
13   - <%= stylesheet_link_tag 'common' %>
14   - <%= stylesheet_link_tag 'help' %>
15   - <%= stylesheet_link_tag 'menu' %>
16   - <%= stylesheet_link_tag 'button' %>
17   - <%= stylesheet_link_tag 'search' %>
18   - <%= stylesheet_link_tag 'blocks' %>
19   - <%= stylesheet_link_tag 'forms' %>
20   - <%= stylesheet_link_tag 'login-box' %>
  13 + <%#
  14 + stylesheet_import is better then stylesheet_link_tag because the stylesheet
  15 + must be loaded before the page show.
  16 + %>
  17 + <%= stylesheet_import %w( common help menu button search blocks forms login-box ) %>
21 18 <%=
22 19 # Load the controller's css file if it exists:
23 20 css = "controller_"+ @controller.controller_name() +".css"
... ... @@ -30,6 +27,7 @@
30 27  
31 28 <%= javascript_include_tag(:defaults) %>
32 29 <%= javascript_include_tag 'menu' %>
  30 + <%= javascript_include_tag 'auto-open-menu' %>
33 31 <%= include_lightbox_header %>
34 32 <%# cms stuff %>
35 33 <% if params[:controller] == 'cms' %>
... ... @@ -42,6 +40,14 @@
42 40 " controller_"+ @controller.controller_name() +
43 41 " action_"+ @controller.controller_name() +"_"+ @controller.action_name()
44 42 %>' onload='noosfero_init();'>
  43 + <script type="text/javascript">
  44 + /* Adds a class to "msie" to the body element if a Microsoft browser is
  45 + * detected. This is needed to workaround several of their limitations.
  46 + */
  47 + if ( navigator.appName.indexOf("Microsoft") > -1 ) {
  48 + document.body.className += " msie";
  49 + }
  50 + </script>
45 51  
46 52 <% unless flash[:notice].nil? %>
47 53 <div id='notice' onclick="Element.hide('notice');">
... ...
app/views/shared/categories_menu.rhtml
  Diff comments   View file @2390ac5
... ... @@ -20,5 +20,5 @@
20 20 </div><!-- fim id="assets_menu_list" -->
21 21 <div id="assets_menu_layout_iten"></div>
22 22 </div><!-- fim id="assets_menu" -->
23   -<%= javascript_include_tag 'assets-menu' %>
24 23  
  24 +<script> setAutoOpenMenu( $("assets_menu") ); </script>
... ...
app/views/shared/user_menu.rhtml
  Diff comments   View file @2390ac5
1   -<div id="user_menu" class="top_extra_menu">
  1 +<div id="user_menu" class="top_extra_menu AOM_paddingBottom_6">
2 2  
3 3 <% if logged_in? %>
4 4 <%=
... ... @@ -8,24 +8,24 @@
8 8 '" alt="'+ current_user.login() +' Icon-Photo" title="" height="20" border="0"/>'+
9 9 current_user.login, current_user.login, :id=>'link_go_home', :class => 'user_menu_first_link'
10 10 %>
11   - <ul>
12   - <li><a href="#"><span class="icon-menu-blog"></span> Meu Blog</a></li>
13   - <%=
14   - '<li>'+ link_to_myprofile( '<span class="icon-menu-ctrl-panel"></span>'+ _('control panel'),
15   - {}, nil, :id => 'link_edit_profile' ) +'</li>'+
16   - '<li>'+ lightbox_link_to( '<span class="icon-menu-logout"></span>'+ _('Logout'),
17   - { :controller => 'account', :action => 'logout_popup'}, :id => 'link_logout' ) +'</li>'
18   - %>
19   - <%=
20   - '<li>'+ link_to( '<span class="icon-menu-"></span>'+ _('Admin'),
21   - { :controller => 'admin_panel' }, :id => 'link_admin_panel' ) +
22   - '</li>' if user.is_admin?
23   - %>
24   - <li><%= link_to( '<span class="icon-menu-"></span>'+_('Edit Profile'),
25   - :controller => 'profile_editor', :profile => user.identifier, :action => 'edit' ) %></li>
26   - <li><%= link_to( '<span class="icon-menu-"></span>'+_('Consumed Products'),
27   - :profile => user.identifier, :controller => 'consumed_products' ) %></li>
28   - </ul>
  11 + <div id="user_menu_ul">
  12 + <ul>
  13 + <li><a href="#"><span class="icon-menu-blog"></span> Meu Blog</a></li>
  14 + <li><%= link_to_myprofile( '<span class="icon-menu-ctrl-panel"></span>'+ _('control panel'),
  15 + {}, nil, :id => 'link_edit_profile' ) %></li>
  16 + <li><%= link_to( '<span class="icon-menu-"></span>'+_('Edit Profile'),
  17 + :controller => 'profile_editor', :profile => user.identifier, :action => 'edit' ) %></li>
  18 + <li><%= link_to( '<span class="icon-menu-"></span>'+_('Consumed Products'),
  19 + :profile => user.identifier, :controller => 'consumed_products' ) %></li>
  20 + <%=
  21 + '<li>'+ link_to( '<span class="icon-menu-"></span>'+ _('Admin'),
  22 + { :controller => 'admin_panel' }, :id => 'link_admin_panel' ) +
  23 + '</li>' if user.is_admin?
  24 + %>
  25 + <li><%= lightbox_link_to( '<span class="icon-menu-logout"></span>'+ _('Logout'),
  26 + { :controller => 'account', :action => 'logout_popup'}, :id => 'link_logout' ) %></li>
  27 + </ul>
  28 + </div><!-- id="user_menu_ul" -->
29 29  
30 30 <% else %>
31 31  
... ... @@ -36,3 +36,5 @@
36 36 <% end %>
37 37  
38 38 </div><!-- fim id="user_menu" -->
  39 +
  40 +<script> setAutoOpenMenu( $("user_menu") ); </script>
... ...
public/designs/icons/default/edit-HC.gif
View file @2390ac5

135 Bytes | W: | H:

123 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
public/designs/icons/default/enter-HC.gif
View file @2390ac5

123 Bytes | W: | H:

916 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
public/designs/icons/default/exit-HC.gif
View file @2390ac5

140 Bytes | W: | H:

132 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
public/designs/icons/default/search-HC.gif
View file @2390ac5

142 Bytes | W: | H:

139 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
public/javascripts/application.js
  Diff comments   View file @2390ac5
... ... @@ -3,16 +3,6 @@
3 3  
4 4 function noosfero_init() {
5 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 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 22 }
33 23 }
34 24 }
  25 +
... ...
public/javascripts/assets-menu.js
View file @6ff873e
... ... @@ -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   -
public/javascripts/auto-open-menu.js 0 → 100644
  Diff comments   View file @2390ac5
... ... @@ -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 +}
... ...
public/stylesheets/menu.css
  Diff comments   View file @2390ac5
... ... @@ -224,25 +224,34 @@ body.category3 .top_extra_menu a:hover { background: #75507B; color: #FFF }
224 224 body.category4 #user_box a:hover,
225 225 body.category4 .top_extra_menu a:hover { background: #CC0000; color: #FFF }
226 226  
  227 +#user_box a img,
227 228 #user_box a span,
228 229 .top_extra_menu a span {
229 230 position: absolute;
230 231 top: 0px;
231 232 left: 0px;
232   - display: block;
233 233 width: 18px;
234 234 height: 18px;
  235 + display: block;
235 236 float: left;
236 237 background-repeat: no-repeat;
237 238 background-position: 50% 50%;
238 239 opacity: 0.7;
239 240 filter: alpha(opacity=70);
240 241 }
  242 +#user_box a img,
241 243 #user_box a:hover span,
242 244 .top_extra_menu a:hover span {
243 245 opacity: 1;
244 246 filter: alpha(opacity=100);
245 247 }
  248 +#user_box a img {
  249 + border: none;
  250 + top: -1px;
  251 + left: -1px;
  252 + width: 20px;
  253 + height: 20px;
  254 +}
246 255  
247 256 /* * * User Box * * * * * * * * * * * */
248 257  
... ... @@ -271,43 +280,45 @@ body.category4 .top_extra_menu a:hover { background: #CC0000; color: #FFF }
271 280 width: 170px;
272 281 }
273 282  
274   -.user_menu_first_link {
275   - margin-left: 4px;
  283 +#user_box a.user_menu_first_link {
  284 + margin-left: 25px;
  285 + display: inline;
276 286 }
277 287 #user_menu .user_menu_first_link:hover {
278 288 background: none;
279 289 }
280 290  
281   -#user_menu a img {
282   - float: left;
283   - border: none;
284   - margin: -1px 2px 0px 0px;
285   - opacity: 0.7;
286   - filter: alpha(opacity=70);
  291 +#user_box a#link_go_home {
  292 + line-height: 22px;
  293 + top: -3px;
  294 + overflow: visible;
287 295 }
288   -#user_menu a:hover img {
289   - opacity: 1;
290   - filter: alpha(opacity=100);
  296 +.msie #link_go_home img {
  297 + margin-top: 3px;
291 298 }
292 299  
293   -#user_menu ul {
  300 +#user_menu_ul {
294 301 position: absolute;
295 302 top: 21px;
296 303 right: 0px;
  304 + background: url(/images/top-bar/assets-menu-bg-azul.gif) 0% 100%;
  305 + border-right: 1px solid #FFF;
  306 +}
  307 +
  308 +#user_menu ul {
297 309 width: 150px;
298 310 max-width: 140px;
299   - padding: 0px 4px 5px 5px;
  311 + height: 0px;
  312 + overflow: hidden;
  313 + padding: 0px 4px 0px 5px;
300 314 margin: 0px;
301   - border: 1px solid #FFF;
302   - border-top: none;
303   - background: #2A5896;
304 315 }
  316 +.msie #user_menu ul {
  317 + height: 1px;
  318 +}
  319 +
305 320 #user_menu li {
306 321 width: 100%;
307 322 overflow: hidden;
308 323 }
309 324  
310   -#user_menu a {
311   - Xposition: relative;
312   - Xwidth: 100%;
313   -}
... ...