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 143 content_tag('span', (link_to _('Logout'), { :controller => 'account', :action => 'logout'}, :method => 'post'), :id => 'logout_box')
144 144 end
145 145  
146   - # FIXME
147 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 152 end
150 153  
151 154 # returns the current profile beign viewed.
... ...
app/views/layouts/application.rhtml
  Diff comments   View file @5840d76
... ... @@ -4,61 +4,136 @@
4 4 <%= javascript_include_tag :defaults %>
5 5 <%= design_all_header_tags %>
6 6 <%= javascript_include_tag 'cms' %>
7   - <%= javascript_include_tag 'menu' %>
8 7 <% if params[:controller] == 'cms' %>
9 8 <%= stylesheet_link_tag 'cms' %>
10 9 <% end %>
11 10 <%= stylesheet_link_tag 'common' %>
  11 +
12 12 <%= stylesheet_link_tag 'menu' %>
  13 + <%= javascript_include_tag 'menu' %>
13 14 </head>
14 15  
15 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 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 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 139 </html>
... ...
public/artwork/newbar/menu.html
  Diff comments   View file @5840d76
... ... @@ -7,133 +7,133 @@
7 7 <script type="text/javascript" src="menu.js"></script>
8 8 </head>
9 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 133 </div>
134 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 137 </body>
138 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 20 position: relative;
21 21 width: 760px;
22 22 left: 50%;
23   - margin-left: -400px;
24   - padding: 1em;
  23 + margin-left: -380px;
  24 + padding: 0em;
25 25 }
26 26  
27 27 #box_3 {
... ... @@ -48,10 +48,12 @@ padding-top: 10px;
48 48 }
49 49  
50 50 #footer {
51   - margin: 0px;
52   - padding: 5px;
53   - text-align: center;
54 51 clear: both;
  52 + text-align: center;
  53 + font-size: smaller;
  54 + color: #333;
  55 + margin-top: 2em;
  56 + padding: 5px;
55 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 @@
  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 @@
  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 +}
... ...