Download as
Browse Code »

Commit 5840d762607aad6281fa665e8d1dee44deb4c3a1

Authored by AntonioTerceiro
1 parent da79e4ad
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

ActionItem70: adding initial implementation of top bar 



git-svn-id: https://svn.colivre.coop.br/svn/noosfero/trunk@505 3f533792-8f58-4932-b0fe-aaf55b0a4547
Showing 23 changed files with 586 additions and 169 deletions   Show diff stats
app/helpers/application_helper.rb
  Diff comments   View file @5840d76
@@ -143,9 +143,12 @@ module ApplicationHelper @@ -143,9 +143,12 @@ module ApplicationHelper
143 content_tag('span', (link_to _('Logout'), { :controller => 'account', :action => 'logout'}, :method => 'post'), :id => 'logout_box') 143 content_tag('span', (link_to _('Logout'), { :controller => 'account', :action => 'logout'}, :method => 'post'), :id => 'logout_box')
144 end 144 end
145 145
146 - # FIXME  
147 def footer 146 def footer
148 - 'nothing in the footer yet' 147 + # FIXME: add some information from the environment
  148 + [
  149 + content_tag('div', 'some information about this environment'),
  150 + content_tag('div', _('%s, version %s' % [ link_to(Noosfero::PROJECT, 'http://www.colivre.coop.br/Noosfero'), Noosfero::VERSION])),
  151 + ].join("\n")
149 end 152 end
150 153
151 # returns the current profile beign viewed. 154 # returns the current profile beign viewed.
app/views/layouts/application.rhtml
  Diff comments   View file @5840d76
@@ -4,61 +4,136 @@ @@ -4,61 +4,136 @@
4 <%= javascript_include_tag :defaults %> 4 <%= javascript_include_tag :defaults %>
5 <%= design_all_header_tags %> 5 <%= design_all_header_tags %>
6 <%= javascript_include_tag 'cms' %> 6 <%= javascript_include_tag 'cms' %>
7 - <%= javascript_include_tag 'menu' %>  
8 <% if params[:controller] == 'cms' %> 7 <% if params[:controller] == 'cms' %>
9 <%= stylesheet_link_tag 'cms' %> 8 <%= stylesheet_link_tag 'cms' %>
10 <% end %> 9 <% end %>
11 <%= stylesheet_link_tag 'common' %> 10 <%= stylesheet_link_tag 'common' %>
  11 +
12 <%= stylesheet_link_tag 'menu' %> 12 <%= stylesheet_link_tag 'menu' %>
  13 + <%= javascript_include_tag 'menu' %>
13 </head> 14 </head>
14 15
15 <body onload='javascript: if (document.forms[0] != null && document.forms[0].elements[0] != null) { document.forms[0].elements[0].focus(); }'> 16 <body onload='javascript: if (document.forms[0] != null && document.forms[0].elements[0] != null) { document.forms[0].elements[0].focus(); }'>
16 - <%= image_tag 'loading.gif', :id => 'spinner', :style => "display:none; float:right;" %>  
17 - <div id="wrap" class='category_blue'>  
18 - <% unless flash[:notice].nil? %>  
19 - <div id='notice'>  
20 - <%= flash[:notice] %>  
21 - <div class='button'>  
22 - <%= link_to_function( content_tag(:span, _('Close') ), visual_effect(:fade, "notice", :duration => 0.5), :id => 'button_close_notice' ) %>  
23 - </div>  
24 - </div>  
25 - <% end %>  
26 - <div id="frame">  
27 - <div id="menu_accessibility">  
28 - <%= _('Skip to:') %>  
29 - <a href="#main_content"><%= _('Content') %></a> |  
30 - <a href="#sidebar"><%= _('Navigation') %></a> |  
31 - <a href="#footer"><%= _('Footer') %></a>  
32 - </div>  
33 17
34 - <div id="header">  
35 - <%= header %> 18 + <% unless flash[:notice].nil? %>
  19 + <div id='notice'>
  20 + <%= flash[:notice] %>
  21 + <div class='button'>
  22 + <%= link_to_function( content_tag(:span, _('Close') ), visual_effect(:fade, "notice", :duration => 0.5), :id => 'button_close_notice' ) %>
36 </div> 23 </div>
  24 + </div>
  25 + <% end %>
37 26
38 - <div id='content'>  
39 - <!-- <a name='main_content'/></a> -->  
40 - <!-- Aqui entra um conteudo tipo o titulo da pagina do usuário e os botoes do comatose? -->  
41 - <!--  
42 - <div id='header_content'>  
43 - </div>  
44 - -->  
45 - <% if params[:controller] == 'cms' %>  
46 - <div id='boxes'>  
47 - <%= yield %>  
48 - </div>  
49 - <% else %>  
50 - <%= design_display(yield) %>  
51 - <% end %>  
52 - </div> 27 + <%= image_tag 'loading.gif', :id => 'spinner', :style => "display:none; float:right;", :alt => _('Image for Loading...') %>
53 28
54 - <div id="footer">  
55 - <!-- <a name='footer'/></a> -->  
56 - <%= footer %>  
57 - <%= design_display_icon('back', :action => 'list')%> 29 + <div id="wrap" class='category1'>
  30 + <div id='noosfero_bar' class='category1'>
  31 + <div id='accessibility_menu'>
  32 + <a href='#'>Acessibilidade</a>
  33 + <a href='#'>Central de Buscas</a>
  34 + <a href='#'>Ir para conteúdo</a>
  35 + </div><!-- accessibility_menu -->
  36 +
  37 + <div id='navigation_bar'>
  38 + <ul>
  39 +
  40 + <li id='category1' class='active'>
  41 + Noosfero
  42 + <ul>
  43 + <li><a href=''><span>Iteam 1</span></a></li>
  44 + <li><a href=''><span>Itemdasd 2</span></a></li>
  45 + <li><a href=''><span>Iteaam 3</span></a></li>
  46 + <li><a href=''><span>Iteaam 4</span></a></li>
  47 + <li><a href=''><span>Itemdasds 5</span></a></li>
  48 + <li><a href=''><span>Itesdm 2</span></a></li>
  49 + <li><a href=''><span>Iteam 3</span></a></li>
  50 + <li><a href=''><span>Iteasdasdm 4</span></a></li>
  51 + <li><a href=''><span>Itesdasm 5</span></a></li>
  52 + <li><a href=''><span>Itesdm 2</span></a></li>
  53 + <li><a href=''><span>Itedsadm 3</span></a></li>
  54 + <li><a href=''><span>Itedsm 4</span></a></li>
  55 + <li><a href=''><span>Itessdsm 5</span></a></li>
  56 + <li><a href=''><span>Itessasm 2</span></a></li>
  57 + <li><a href=''><span>Isssssstesm 3</span></a></li>
  58 + <li><a href=''><span>Iteasdm 3</span></a></li>
  59 + <li><a href=''><span>Itessm 4</span></a></li>
  60 + <li><a href=''><span>Iteasdm 5</span></a></li>
  61 + </ul>
  62 + </li>
  63 +
  64 + <li id='category2'>
  65 + Territorios
  66 + <ul>
  67 + <li><a href=''><span>Item 1</span></a></li>
  68 + <li><a href=''><span>Itssssem 2</span></a></li>
  69 + <li><a href=''><span>Itsssssem 3</span></a></li>
  70 + <li><a href=''><span>Item 4</span></a></li>
  71 + <li><a href=''><span>Itssssem 5</span></a></li>
  72 + </ul>
  73 + </li>
  74 +
  75 + <li id='category3'>
  76 + Lalala
  77 + <ul>
  78 + <li><a href=''><span>Item 1</span></a></li>
  79 + <li><a href=''><span>Issstem 2</span></a></li>
  80 + <li><a href=''><span>Itsssem 3</span></a></li>
  81 + <li><a href=''><span>Item 4</span></a></li>
  82 + <li><a href=''><span>Itssem 5</span></a></li>
  83 + </ul>
  84 + </li>
  85 +
  86 + <li id='category4'>
  87 + Lalala
  88 + <ul>
  89 + <li><a href=''><span>Iaaaatem 1</span></a></li>
  90 + <li><a href=''><span>Item 2</span></a></li>
  91 + <li><a href=''><span>Itaaaem 3</span></a></li>
  92 + <li><a href=''><span>Itaaem 4</span></a></li>
  93 + <li><a href=''><span>Itaaaaaaaaem 5</span></a></li>
  94 + </ul>
  95 + </li>
  96 + </ul>
  97 + </div><!-- id='navigation_bar' -->
  98 +
  99 + <script type="text/javascript">
  100 + prepareMenu('navigation_bar');
  101 + </script>
  102 +
  103 + <div id='search_box'>
  104 + <form action="" method="GET">
  105 + <input type='text' name='q' value='sua busca aqui ...'>
  106 + <input type='submit' value='Buscar'>
  107 + </form>
  108 + </div><!-- id='search_box' -->
  109 + </div><!-- id="noosfero_bar" -->
  110 +
  111 + <%# <div id="header"> %>
  112 + <%# header %>
  113 + <%# </div> %>
  114 +
  115 + <div id='content'>
  116 + <!-- <a name='main_content'/></a> -->
  117 + <!-- Aqui entra um conteudo tipo o titulo da pagina do usuário e os botoes do comatose? -->
  118 + <!--
  119 + <div id='header_content'>
58 </div> 120 </div>
59 - </div>  
60 - </div>  
61 - <%= image_tag 'loading.gif', :id => 'spinner', :style => "display:none; float:right;", :alt => _('Image for Loading...') %>  
62 - </body> 121 + -->
  122 + <% if params[:controller] == 'cms' %>
  123 + <div id='boxes'>
  124 + <%= yield %>
  125 + </div>
  126 + <% else %>
  127 + <%= design_display(yield) %>
  128 + <% end %>
  129 + </div><!-- id="content" -->
  130 +
  131 + <div id="footer">
  132 + <!-- <a name='footer'/></a> -->
  133 + <%= footer %>
  134 + </div><!-- id="footer" -->
  135 +
  136 + </div><!-- id="wrap" -->
63 137
  138 + </body>
64 </html> 139 </html>
public/artwork/newbar/menu.html
  Diff comments   View file @5840d76
@@ -7,133 +7,133 @@ @@ -7,133 +7,133 @@
7 <script type="text/javascript" src="menu.js"></script> 7 <script type="text/javascript" src="menu.js"></script>
8 </head> 8 </head>
9 <body> 9 <body>
10 -<div id="wrap" class='category1'>  
11 -  
12 -<div id='noosfero_bar' class='category1'>  
13 - <div id='accessibility_menu'>  
14 - <a href='#'>Acessibilidade</a>  
15 - <a href='#'>Central de Buscas</a>  
16 - <a href='#'>Ir para conteúdo</a>  
17 - </div><!-- accessibility_menu -->  
18 10
19 - <div id='navigation_bar'>  
20 - <ul>  
21 - <li id='category1' class='active'>  
22 - Noosfero  
23 - <ul>  
24 - <li><a href=''><span>Iteam 1</span></a></li>  
25 - <li><a href=''><span>Itemdasd 2</span></a></li>  
26 - <li><a href=''><span>Iteaam 3</span></a></li>  
27 - <li><a href=''><span>Iteaam 4</span></a></li>  
28 - <li><a href=''><span>Itemdasds 5</span></a></li>  
29 - <li><a href=''><span>Itesdm 2</span></a></li>  
30 - <li><a href=''><span>Iteam 3</span></a></li>  
31 - <li><a href=''><span>Iteasdasdm 4</span></a></li>  
32 - <li><a href=''><span>Itesdasm 5</span></a></li>  
33 - <li><a href=''><span>Itesdm 2</span></a></li>  
34 - <li><a href=''><span>Itedsadm 3</span></a></li>  
35 - <li><a href=''><span>Itedsm 4</span></a></li>  
36 - <li><a href=''><span>Itessdsm 5</span></a></li>  
37 - <li><a href=''><span>Itessasm 2</span></a></li>  
38 - <li><a href=''><span>Isssssstesm 3</span></a></li>  
39 - <li><a href=''><span>Iteasdm 3</span></a></li>  
40 - <li><a href=''><span>Itessm 4</span></a></li>  
41 - <li><a href=''><span>Iteasdm 5</span></a></li>  
42 - </ul>  
43 - </li>  
44 -  
45 - <li id='category2'>  
46 - Territorios  
47 - <ul>  
48 - <li><a href=''><span>Item 1</span></a></li>  
49 - <li><a href=''><span>Itssssem 2</span></a></li>  
50 - <li><a href=''><span>Itsssssem 3</span></a></li>  
51 - <li><a href=''><span>Item 4</span></a></li>  
52 - <li><a href=''><span>Itssssem 5</span></a></li>  
53 - </ul>  
54 - </li>  
55 -  
56 - <li id='category3'>  
57 - Lalala  
58 - <ul>  
59 - <li><a href=''><span>Item 1</span></a></li>  
60 - <li><a href=''><span>Issstem 2</span></a></li>  
61 - <li><a href=''><span>Itsssem 3</span></a></li>  
62 - <li><a href=''><span>Item 4</span></a></li>  
63 - <li><a href=''><span>Itssem 5</span></a></li>  
64 - </ul>  
65 - </li>  
66 -  
67 - <li id='category4'>  
68 - Lalala  
69 - <ul>  
70 - <li><a href=''><span>Iaaaatem 1</span></a></li>  
71 - <li><a href=''><span>Item 2</span></a></li>  
72 - <li><a href=''><span>Itaaaem 3</span></a></li>  
73 - <li><a href=''><span>Itaaem 4</span></a></li>  
74 - <li><a href=''><span>Itaaaaaaaaem 5</span></a></li>  
75 - </ul>  
76 - </li>  
77 - </ul>  
78 - </div><!-- id='navigation_bar' -->  
79 - <script type="text/javascript">  
80 - prepareMenu('navigation_bar');  
81 - </script> 11 + <div id="wrap" class='category1'>
  12 + <div id='noosfero_bar' class='category1'>
  13 + <div id='accessibility_menu'>
  14 + <a href='#'>Acessibilidade</a>
  15 + <a href='#'>Central de Buscas</a>
  16 + <a href='#'>Ir para conteúdo</a>
  17 + </div><!-- accessibility_menu -->
82 18
83 - <div id='search_box'>  
84 - <form action="" method="GET">  
85 - <input type='text' name='q' value='sua busca aqui ...'>  
86 - <input type='submit' value='Buscar'>  
87 - </form>  
88 - </div><!-- id='search_box' -->  
89 -</div>  
90 - <div id="header">  
91 - <div id="virtual_community_identification">Default Virtual Community</div>  
92 - </div>  
93 -  
94 - <div id='content'>  
95 - <!-- <a name='main_content'/></a> -->  
96 - <!-- Aqui entra um conteudo tipo o titulo da pagina do usuário e os botoes do comatose? -->  
97 - <!--  
98 - <div id='header_content'>  
99 - </div>  
100 - --> 19 + <div id='navigation_bar'>
  20 + <ul>
  21 + <li id='category1' class='active'>
  22 + Noosfero
  23 + <ul>
  24 + <li><a href=''><span>Iteam 1</span></a></li>
  25 + <li><a href=''><span>Itemdasd 2</span></a></li>
  26 + <li><a href=''><span>Iteaam 3</span></a></li>
  27 + <li><a href=''><span>Iteaam 4</span></a></li>
  28 + <li><a href=''><span>Itemdasds 5</span></a></li>
  29 + <li><a href=''><span>Itesdm 2</span></a></li>
  30 + <li><a href=''><span>Iteam 3</span></a></li>
  31 + <li><a href=''><span>Iteasdasdm 4</span></a></li>
  32 + <li><a href=''><span>Itesdasm 5</span></a></li>
  33 + <li><a href=''><span>Itesdm 2</span></a></li>
  34 + <li><a href=''><span>Itedsadm 3</span></a></li>
  35 + <li><a href=''><span>Itedsm 4</span></a></li>
  36 + <li><a href=''><span>Itessdsm 5</span></a></li>
  37 + <li><a href=''><span>Itessasm 2</span></a></li>
  38 + <li><a href=''><span>Isssssstesm 3</span></a></li>
  39 + <li><a href=''><span>Iteasdm 3</span></a></li>
  40 + <li><a href=''><span>Itessm 4</span></a></li>
  41 + <li><a href=''><span>Iteasdm 5</span></a></li>
  42 + </ul>
  43 + </li>
101 44
102 - <div id="boxes"><h1>Account options</h1>  
103 -<h1>Account options</h1>  
104 -<h1>Account options</h1>  
105 -<h1>Account options</h1>  
106 -<h1>Account options</h1>  
107 -<h1>Account options</h1>  
108 -<h1>Account options</h1>  
109 -<h1>Account options</h1>  
110 -<h1>Account options</h1>  
111 -<h1>Account options</h1>  
112 -<h1>Account options</h1>  
113 -<h1>Account options</h1>  
114 -<h1>Account options</h1>  
115 -<h1>Account options</h1>  
116 -<h1>Account options</h1>  
117 -<h1>Account options</h1>  
118 -<h1>Account options</h1>  
119 -<h1>Account options</h1>  
120 -<h1>Account options</h1>  
121 -<h1>Account options</h1>  
122 -<h1>Account options</h1>  
123 -  
124 -</div> 45 + <li id='category2'>
  46 + Territorios
  47 + <ul>
  48 + <li><a href=''><span>Item 1</span></a></li>
  49 + <li><a href=''><span>Itssssem 2</span></a></li>
  50 + <li><a href=''><span>Itsssssem 3</span></a></li>
  51 + <li><a href=''><span>Item 4</span></a></li>
  52 + <li><a href=''><span>Itssssem 5</span></a></li>
  53 + </ul>
  54 + </li>
  55 +
  56 + <li id='category3'>
  57 + Lalala
  58 + <ul>
  59 + <li><a href=''><span>Item 1</span></a></li>
  60 + <li><a href=''><span>Issstem 2</span></a></li>
  61 + <li><a href=''><span>Itsssem 3</span></a></li>
  62 + <li><a href=''><span>Item 4</span></a></li>
  63 + <li><a href=''><span>Itssem 5</span></a></li>
  64 + </ul>
  65 + </li>
125 66
126 - </div> 67 + <li id='category4'>
  68 + Lalala
  69 + <ul>
  70 + <li><a href=''><span>Iaaaatem 1</span></a></li>
  71 + <li><a href=''><span>Item 2</span></a></li>
  72 + <li><a href=''><span>Itaaaem 3</span></a></li>
  73 + <li><a href=''><span>Itaaem 4</span></a></li>
  74 + <li><a href=''><span>Itaaaaaaaaem 5</span></a></li>
  75 + </ul>
  76 + </li>
  77 + </ul>
  78 + </div><!-- id='navigation_bar' -->
  79 +
  80 + <script type="text/javascript">
  81 + prepareMenu('navigation_bar');
  82 + </script>
  83 +
  84 + <div id='search_box'>
  85 + <form action="" method="GET">
  86 + <input type='text' name='q' value='sua busca aqui ...'>
  87 + <input type='submit' value='Buscar'>
  88 + </form>
  89 + </div><!-- id='search_box' -->
  90 + </div><!-- id="noosfero_bar" -->
  91 +
  92 + <div id="header">
  93 + <div id="virtual_community_identification">Default Virtual Community</div>
  94 + </div>
  95 +
  96 + <div id='content'>
  97 + <!-- <a name='main_content'/></a> -->
  98 + <!-- Aqui entra um conteudo tipo o titulo da pagina do usuário e os botoes do comatose? -->
  99 + <!--
  100 + <div id='header_content'>
  101 + </div>
  102 + -->
  103 +
  104 + <div id="boxes"><h1>Account options</h1>
  105 + <h1>Account options</h1>
  106 + <h1>Account options</h1>
  107 + <h1>Account options</h1>
  108 + <h1>Account options</h1>
  109 + <h1>Account options</h1>
  110 + <h1>Account options</h1>
  111 + <h1>Account options</h1>
  112 + <h1>Account options</h1>
  113 + <h1>Account options</h1>
  114 + <h1>Account options</h1>
  115 + <h1>Account options</h1>
  116 + <h1>Account options</h1>
  117 + <h1>Account options</h1>
  118 + <h1>Account options</h1>
  119 + <h1>Account options</h1>
  120 + <h1>Account options</h1>
  121 + <h1>Account options</h1>
  122 + <h1>Account options</h1>
  123 + <h1>Account options</h1>
  124 + <h1>Account options</h1>
  125 + </div>
  126 + </div>
127 127
128 - <div id="footer">  
129 - <!-- <a name='footer'/></a> -->  
130 - nothing in the footer yet  
131 - <div action="list" class="none_back back"></div>  
132 - </div> 128 + <div id="footer">
  129 + <!-- <a name='footer'/></a> -->
  130 + nothing in the footer yet
  131 + <div action="list" class="none_back back">
  132 + </div>
133 </div> 133 </div>
134 </div> 134 </div>
135 - <img alt="Image for Loading..." id="spinner" src="/images/loading.gif?1186069142" style="display:none; float:right;" />  
136 135
  136 + <img alt="Image for Loading..." id="spinner" src="/images/loading.gif?1186069142" style="display:none; float:right;" />
137 </body> 137 </body>
138 </html> 138 </html>
139 139
public/designs/templates/default/images/bg_bgheader.png
View file @da79e4a

229 Bytes
public/designs/templates/default/images/bg_content.png
View file @da79e4a

225 Bytes
public/designs/templates/default/images/bg_footer.png
View file @da79e4a

168 Bytes
public/designs/templates/default/images/bg_header.png
View file @da79e4a

23.3 KB
public/designs/templates/default/stylesheets/style.css
  Diff comments   View file @5840d76
@@ -20,8 +20,8 @@ padding-top: 10px; @@ -20,8 +20,8 @@ padding-top: 10px;
20 position: relative; 20 position: relative;
21 width: 760px; 21 width: 760px;
22 left: 50%; 22 left: 50%;
23 - margin-left: -400px;  
24 - padding: 1em; 23 + margin-left: -380px;
  24 + padding: 0em;
25 } 25 }
26 26
27 #box_3 { 27 #box_3 {
@@ -48,10 +48,12 @@ padding-top: 10px; @@ -48,10 +48,12 @@ padding-top: 10px;
48 } 48 }
49 49
50 #footer { 50 #footer {
51 - margin: 0px;  
52 - padding: 5px;  
53 - text-align: center;  
54 clear: both; 51 clear: both;
  52 + text-align: center;
  53 + font-size: smaller;
  54 + color: #333;
  55 + margin-top: 2em;
  56 + padding: 5px;
55 background: #c5d0df url("../images/bg_footer.png") top left repeat-x; 57 background: #c5d0df url("../images/bg_footer.png") top left repeat-x;
56 } 58 }
57 59
public/images/bg_bgheader.png 0 → 100644
View file @5840d76

229 Bytes
public/images/bg_content.png 0 → 100644
View file @5840d76

225 Bytes
public/images/bg_footer.png 0 → 100644
View file @5840d76

168 Bytes
public/images/bg_header.png 0 → 100644
View file @5840d76

23.3 KB
public/images/bg_item_bar_blue_active.png 0 → 100644
View file @5840d76

215 Bytes
public/images/bg_item_bar_blue_off.png 0 → 100644
View file @5840d76

223 Bytes
public/images/bg_item_bar_blue_on.png 0 → 100644
View file @5840d76

225 Bytes
public/images/bg_item_bar_red_active.png 0 → 100644
View file @5840d76

212 Bytes
public/images/bg_item_bar_red_off.png 0 → 100644
View file @5840d76

211 Bytes
public/images/bg_item_bar_red_on.png 0 → 100644
View file @5840d76

217 Bytes
public/images/bg_noosfero_bar.png 0 → 100644
View file @5840d76

238 Bytes
public/images/bg_noosfero_bar_red.png 0 → 100644
View file @5840d76

229 Bytes
public/images/icon_enter_mini.png 0 → 100644
View file @5840d76

278 Bytes
public/javascripts/menu.js 0 → 100644
  Diff comments   View file @5840d76
@@ -0,0 +1,110 @@ @@ -0,0 +1,110 @@
  1 +function prepareMenu(id) {
  2 +
  3 + if ( document.all ) {
  4 + // add a class for work arround msie&#180;s css bugs
  5 + $(id).className += " msie";
  6 + }
  7 +
  8 + var zIndex = 10;
  9 +
  10 + $$("#" + id + " ul ul").each( function( ul ) { // para cada UL de sub-menu faça:
  11 + // Pega o link que abre este sub-menu:
  12 + var linkText = ul.parentNode.firstChild;
  13 + // Retira espaço em branco sobrando nas bordas deste:
  14 + linkText.nodeValue = linkText.nodeValue.replace( /^\s*|\s*$/g, "" );
  15 +
  16 + // Create a link to open this sub-menu:
  17 + var link = document.createElement("a");
  18 + link.href = "#";
  19 + link.className = "linkSubMenu";
  20 + linkText.parentNode.insertBefore( link, linkText );
  21 + link.appendChild( linkText );
  22 + link.parentNode.style.zIndex = zIndex++;
  23 + link.subMenu = ul;
  24 + ul.linkControle = link;
  25 +
  26 + link.openSubMenu =
  27 + function ( isMouseClick ) {
  28 + if( this.subMenu.style.display == "block" ) {
  29 + if( isMouseClick ) {
  30 + this.subMenu.style.display = "none";
  31 + } else {
  32 + clearTimeout(this.timeOutClose);
  33 + clearTimeout(this.subMenu.timeOutClose);
  34 + return false;
  35 + }
  36 + } else {
  37 + this.subMenu.style.display = "block";
  38 + clearTimeout(this.timeOutClose);
  39 + clearTimeout(this.subMenu.timeOutClose);
  40 + }
  41 + }
  42 + link.closeSubMenu = function(){ this.subMenu.style.display = "none" }
  43 +
  44 + link.onclick = function(){ this.openSubMenu(true); return false }
  45 +
  46 + // onmouseout e onmouseover manipulam o menu para pessoas normais
  47 + // onblur e onfocus manipulam o menu para pessoas que precisam navegar com tab
  48 +
  49 + link.onmouseover = link.onfocus =
  50 + function () {
  51 + this.openSubMenu(false);
  52 + };
  53 + link.onmouseout = link.onblur =
  54 + function () {
  55 + this.timeOutClose = setTimeout( this.closeSubMenu.bind(this), 333 );
  56 + };
  57 +
  58 + ul.closeSubMenu = function(){ this.style.display = "none" }
  59 +
  60 + ul.onmouseover = ul.onfocus =
  61 + function () {
  62 + this.blurCalledByIEWorkArroundBug = false;
  63 + clearTimeout(this.timeOutClose);
  64 + clearTimeout(this.linkControle.timeOutClose);
  65 + };
  66 + ul.onmouseout = ul.onblur =
  67 + function () {
  68 + if ( this.blurCalledByIEWorkArroundBug ) { return false }
  69 + this.blurCalledByIEWorkArroundBug = true;
  70 + this.timeOutClose = setTimeout( this.closeSubMenu.bind(this), 333 );
  71 + };
  72 + });
  73 +
  74 +
  75 + ////// INI - Work Arround Bug da disgraça do M$IE /////////////////////
  76 + if ( document.all ) {
  77 + function forceUlFocusFromLink ( a ) {
  78 + var stop = false;
  79 + a.ancestors().each( function(el) {
  80 + if ( el.id == "menu" ) { stop = true }
  81 + if ( ! stop && el.onfocus ) { el.onfocus() }
  82 + } );
  83 + }
  84 + function forceUlBlurFromLink ( a ) {
  85 + var stop = false;
  86 + a.ancestors().each( function(el) {
  87 + if ( el.id == "menu" ) { stop = true }
  88 + if ( ! stop && el.onblur ) { el.onblur() }
  89 + } );
  90 + }
  91 + $$("#" + id + " ul ul a").each( function( a ) {
  92 + // os links do sub menu forçarão o foco do ul
  93 + if ( a.className == "linkSubMenu" ) {
  94 + a.onfocus = function() {
  95 + forceUlFocusFromLink(this);
  96 + this.openSubMenu(false);
  97 + };
  98 + a.onblur = function() {
  99 + forceUlBlurFromLink(this);
  100 + this.timeOutClose = setTimeout( this.closeSubMenu.bind(this), 333 );
  101 + };
  102 + } else {
  103 + a.onfocus = function() { forceUlFocusFromLink(this) };
  104 + a.onblur = function() { forceUlBlurFromLink(this) };
  105 + }
  106 + });
  107 + }
  108 +
  109 +}
  110 +////// END - Work Arround Bug da disgraça do M$IE /////////////////////
public/stylesheets/menu.css 0 → 100644
  Diff comments   View file @5840d76
@@ -0,0 +1,227 @@ @@ -0,0 +1,227 @@
  1 +body {
  2 +margin:0px;
  3 +padding: 0px;
  4 +}
  5 +
  6 +/* Core do Tango na Barra
  7 +* Azul Escuro - 204a87
  8 +*/
  9 +
  10 +#noosfero_bar {
  11 + position: fixed;
  12 + background: #204a87 url("../images/bg_noosfero_bar.png") repeat-x;
  13 + top: -3px;
  14 + height: 35px;
  15 + margin-left: -3px;
  16 + margin-top: 3px;
  17 + margin-right: 3px;
  18 + padding: 0px;
  19 + font-family: serif-Sans, Verdana, Arial;
  20 +}
  21 +
  22 +#noosfero_bar *:focus {
  23 + color: red !important;
  24 +}
  25 +
  26 +#accessibility_menu {
  27 + float: left;
  28 + font-size: 10px;
  29 + padding: 1px;
  30 + color: #dfdfdf;
  31 +}
  32 +
  33 +#accessibility_menu a {
  34 + padding-left: 7px;
  35 + margin-left: 2px;
  36 + background: url("../images/icon_enter_mini.png") 0px 5px no-repeat;
  37 + color: #dfdfdf;
  38 + text-decoration: none;
  39 +}
  40 +
  41 +#accessibility_menu a:hover {
  42 + color: #fff;
  43 +}
  44 +
  45 +#navigation_bar ul {
  46 + float: right;
  47 + margin: 7px;
  48 + padding: 0px;
  49 + right: 0px;
  50 + text-align: right;
  51 + top: 0px;
  52 +}
  53 +
  54 +#navigation_bar ul li {
  55 + list-style: none;
  56 + display: inline;
  57 + font-size: 17px;
  58 + margin-right: 5px;
  59 +}
  60 +
  61 +#navigation_bar ul li a {
  62 + padding-left: 5px;
  63 + padding-right: 5px;
  64 + padding-top: -2px;
  65 + padding-bottom: 3px;
  66 + color: #fff;
  67 + text-decoration: none;
  68 +}
  69 +
  70 +#navigation_bar ul li ul {
  71 + padding: 10px;
  72 +}
  73 +
  74 +#navigation_bar ul li ul li {
  75 + display: block;
  76 + float: right;
  77 + margin: 5px;
  78 +}
  79 +
  80 +
  81 +/* ITEM 1 */
  82 +
  83 +#noosfero_bar.category1 {
  84 + background: #204a87 url("../images/bg_noosfero_bar.png") repeat-x;
  85 +}
  86 +
  87 +/* FIXME: add another categories */
  88 +#wrap.category1 {
  89 +border: 6px solid #204a87 !important;
  90 +}
  91 +
  92 +#category1 a {
  93 + border: 1px outset #6692c4;
  94 + background: #204a87 url("../images/bg_item_bar_blue_off.png") repeat-x;
  95 +}
  96 +
  97 +#category1 a:hover, li#category1.active a:hover {
  98 + border: 1px inset #6692c4 !important;
  99 + background: #3b6096 url("../images/bg_item_bar_blue_on.png") repeat-x !important;
  100 +}
  101 +
  102 +li#category1.active a {
  103 + border: 1px inset #6692c4;
  104 + background: #719ece url("../images/bg_item_bar_blue_active.png") repeat-x;
  105 +}
  106 +
  107 +li#category1 ul li a {
  108 + border: 1px outset #6692c4 !important;
  109 + background: #204a87 url("../images/bg_item_bar_blue_off.png") repeat-x !important;
  110 +}
  111 +
  112 +#category1 ul {
  113 + background: #204a87 url("../images/bg_noosfero_bar.png") repeat-x;
  114 +}
  115 +
  116 +
  117 +/* ITEM 2 red */
  118 +
  119 +#noosfero_bar.category2 {
  120 + background: #a40000 url("../images/bg_noosfero_bar_red.png") repeat-x;
  121 +}
  122 +
  123 +#wrap.category2 {
  124 +border: 3px solid #a40000 !important;
  125 +}
  126 +
  127 +#category2 a {
  128 + border: 1px outset #a40000;
  129 + background: #a40000 url("../images/bg_item_bar_red_off.png") repeat-x;
  130 +}
  131 +
  132 +#category2 a:hover, li#category2.active a:hover {
  133 + border: 1px inset #a40000;
  134 + background: #ae1c1c url("../images/bg_item_bar_red_on.png") repeat-x;
  135 +}
  136 +
  137 +li#category2.active a {
  138 + border: 1px inset #a40000;
  139 + background: #ee2828 url("../images/bg_item_bar_red_active.png") repeat-x;
  140 +}
  141 +
  142 +#category2 ul {
  143 + background: #a40000 url("../images/bg_noosfero_bar_red.png") repeat-x;
  144 +}
  145 +
  146 +
  147 +/* ITEM 3 */
  148 +
  149 +#noosfero_bar.category3 {
  150 + background: #204a87 url("../images/bg_noosfero_bar.png") repeat-x;
  151 +}
  152 +
  153 +#wrap.category3 {
  154 +border: 3px solid #204a87 !important;
  155 +}
  156 +
  157 +#category3 a {
  158 + border: 1px outset #6692c4;
  159 + background: #204a87 url("../images/bg_item_bar_blue_off.png") repeat-x;
  160 +}
  161 +
  162 +#category3 a:hover, li#category3.active a:hover {
  163 + border: 1px inset #6692c4 !important;
  164 + background: #3b6096 url("../images/bg_item_bar_blue_on.png") repeat-x !important;
  165 +}
  166 +
  167 +li#category3.active a {
  168 + border: 1px inset #6692c4;
  169 + background: #719ece url("../images/bg_item_bar_blue_active.png") repeat-x;
  170 +}
  171 +
  172 +li#category3 ul li a {
  173 + border: 1px outset #6692c4 !important;
  174 + background: #204a87 url("../images/bg_item_bar_blue_off.png") repeat-x !important;
  175 +}
  176 +
  177 +#category3 ul {
  178 + background: #204a87 url("../images/bg_noosfero_bar.png") repeat-x;
  179 +}
  180 +
  181 +
  182 +/* ITEM 4 red */
  183 +
  184 +#noosfero_bar.category4 {
  185 + background: #a40000 url("../images/bg_noosfero_red.png") repeat-x;
  186 +}
  187 +
  188 +#wrap.category4 {
  189 +border: 3px solid #a40000 !important;
  190 +}
  191 +
  192 +#category4 a {
  193 + border: 1px outset #a40000;
  194 + background: #a40000 url("../images/bg_item_bar_red_off.png") repeat-x;
  195 +}
  196 +
  197 +#category4 a:hover, li#category4.active a:hover {
  198 + border: 1px inset #a40000;
  199 + background: #ae1c1c url("../images/bg_item_bar_red_on.png") repeat-x;
  200 +}
  201 +
  202 +li#category4.active a {
  203 + border: 1px inset #a40000;
  204 + background: #ee2828 url("../images/bg_item_bar_red_active.png") repeat-x;
  205 +}
  206 +
  207 +#category4 ul {
  208 + background: #a40000 url("../images/bg_noosfero_bar_red.png") repeat-x;
  209 +}
  210 +
  211 +#navigation_bar ul ul {
  212 +margin: 0px;
  213 +padding: 0px;
  214 +width: 100%;
  215 +left: 0px;
  216 +position: absolute;
  217 +margin-top: 34px;
  218 +display: none;
  219 +}
  220 +
  221 +#search_box {
  222 +display: none;
  223 +clear: both;
  224 +}
  225 +
  226 +#content {
  227 +}