Download as
Browse Code »

Commit 394ec6d8b1bd86c61925175b46a2107fa62acdef

Authored by AurelioAHeckert
1 parent 0e06b2d0
Exists in staging and in 42 other branches all_pending_tasks_api, api-articles-period, api_roles, caching-rails4, captcha_serpro_plugin, comments_permissions, content-manager-hostspot, elasticsearch, elasticsearch_api, elasticsearch_categories, elasticsearch_filter, elasticsearch_sort, elasticsearch_to_merge, elasticsearch_view, environment-exposes-api, export-comment-api, export-comment-paragraph, export_data, external_followers, federation-webfinger, federation_followers, federation_followers_backend, federation_oauth_provider, federation_webfinger, fix_event_date_issue, fix_notification_email, fix_string_downcase_and_upcase, follower_permition, json_cookie_serializer, login-captcha, master, master_profile_followers, oauth_external_login, oauth_login, private-scraps, private-scraps-rebase, production, production-vendorized, profile_api_improvements, tasks_keep_filter_params, user_mention, webfinger_server

ActionItem152: top bar rework 90% done 

git-svn-id: https://svn.colivre.coop.br/svn/noosfero/trunk@1185 3f533792-8f58-4932-b0fe-aaf55b0a4547
Showing 8 changed files with 194 additions and 318 deletions   Show diff stats
app/helpers/application_helper.rb
  Diff comments   View file @394ec6d
... ... @@ -112,15 +112,14 @@ module ApplicationHelper
112 112 def shortcut_header_links
113 113 if logged_in?
114 114 [
115   - ( link_to_myprofile( content_tag('span', _('My profile')), {}, nil, { :id => 'icon_go_home'} ) ),
116   - # MUDAR, O ID acima deve ser no Link <a id=...
  115 + ( link_to_myprofile( content_tag('span', _('My profile')), {}, nil, { :id => 'link_go_home'} ) ),
117 116 # O ID icon_accessibility tambem tem que aparcer e testei o link nao ta funcionado.
118   - ( link_to content_tag('span', _('Admin')), { :controller => 'admin_panel' }, :id => 'icon_admin' if current_user.person.is_admin?),
119   - ( link_to content_tag('span', _('Logout')), { :controller => 'account', :action => 'logout'}, :id => 'icon_logout', :method => 'post'),
  117 + ( link_to content_tag('span', _('Admin')), { :controller => 'admin_panel' }, :id => 'link_admin_panel' if current_user.person.is_admin?),
  118 + ( link_to content_tag('span', _('Logout')), { :controller => 'account', :action => 'logout'}, :id => 'link_logout'),
120 119 ]
121 120 else
122 121 [
123   - ( link_to content_tag('span', _('Login')), { :controller => 'account', :action => 'login' }, :id => 'icon_login' ),
  122 + ( link_to content_tag('span', _('Login')), { :controller => 'account', :action => 'login' }, :id => 'link_login' ),
124 123 ]
125 124 end.join(" ")
126 125 end
... ...
app/views/layouts/application.rhtml
  Diff comments   View file @394ec6d
1 1 <html>
2 2 <head>
3 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
4   - <title>
5   - <% if @category %>
6   - Noosfero &rarr; <%= @category.full_name %>
7   - <% else %>
  4 + <title>
  5 + <%- if @category -%>
  6 + Noosfero &rarr; <%= @category.full_name -%>
  7 + <%- else -%>
8 8 Noosfero
9   - <% end %>
  9 + <%- end -%>
10 10 </title>
11 11 <meta name="description" content="FIXME: Descriptions of Noosfero" />
12 12 <meta name="keywords" content="Noosfero, Community, Open Source" />
... ... @@ -26,45 +26,44 @@
26 26 <body class='category<%= category_color %>'>
27 27  
28 28 <% unless flash[:notice].nil? %>
29   - <div id='notice' onClick="Element.hide('notice');">
  29 + <div id='notice' onclick="Element.hide('notice');">
30 30 <%= flash[:notice] %>
31 31 <%= javascript_tag(visual_effect(:fade, "notice", :duration => 15)) %>
32 32 </div>
33 33 <% end %>
34 34  
  35 + <div id='accessibility_menu'>
  36 + <a href='#content' id='link_go_content'><span><%= _('Go to content') %></span></a>
  37 + </div><!-- accessibility_menu -->
  38 +
  39 + <div id='path_category'>
  40 + <% if @category -%>
  41 + <%= @category.full_name(" &rarr; ") %>
  42 + <% end -%>
  43 + <%= javascript_tag(visual_effect(:fade, "path_category", :duration => 10)) %>
  44 + </div>
  45 +
35 46 <div id="wrap">
36 47  
37 48 <div id='noosfero_bar' style='position: absolute;'>
38   - <div id='accessibility_bar'>
39   - <div id='accessibility_menu'>
40   - <a href='#content' id='icon_go_content'><span><%= _('Go to content') %></span></a>
41   - <!-- <%= shortcut_header_links %> -->
42   - </div><!-- accessibility_menu -->
43   - <div id='path_category'>
44   - <% if @category %>
45   - <%= @category.full_name %>
46   - <% end %>
47   - <%= javascript_tag(visual_effect(:fade, "path_category", :duration => 10)) %>
48   - </div>
49   - </div><!-- accessibility_bar -->
50   - <div id='search_box'>
51   - <%= search_box %>
52   - </div><!-- id='search_box' -->
53 49  
54 50 <div id='navigation_bar'>
55   - <SCRIPT LANGUAGE="JavaScript"> <!-- FIXME: Tirar o script daqui caso seja solucao adotada -->
56   - function posset(chkbox, group) {
57   - var posSetting = (chkbox.checked) ? "fixed" : "absolute"
58   - document.getElementById(group).style.position = posSetting
59   - }
60   - </SCRIPT>
61   - <INPUT TYPE="checkbox" NAME="Fix" VALUE="0" onClick="posset(this, 'noosfero_bar')" style='float: left;'>
62 51 <%= render :file => 'shared/categories_menu' %>
63 52 </div><!-- id='navigation_bar' -->
64   -
65 53 <script type="text/javascript">
66 54 prepareMenu('navigation_bar', { timeout: 5 });
67 55 </script>
  56 +
  57 + <!-- div id='search_box'>
  58 + We will not need it...
  59 + <%= search_box %>
  60 + </div>< !-- id='search_box' -->
  61 +
  62 + <div id='user_box'>
  63 + <%= shortcut_header_links %>
  64 + <a href="javascript:alert('to do...')" id="open_search"><span>Search</span></a>
  65 + </div><!-- id='user_box' -->
  66 +
68 67 </div><!-- id="noosfero_bar" -->
69 68  
70 69 <div id='frame'><!-- Frame que envolve toda pagina de um usuario -->
... ...
app/views/shared/categories_menu.rhtml
  Diff comments   View file @394ec6d
1   -<%= image_tag 'noosfero.png', :style => 'float: left;' %>
2   -<ul>
3   - <li id='category'>Noosfero <ul><li><%= shortcut_header_links %></li></ul></li>
  1 +<ul id='cat_menu'>
  2 + <a href='/' id='link_to_home'><span><%= _("Go Home") %></span></a>
4 3 <% @environment.display_categories.each do |item| %>
5   - <li id='category<%= item.display_color %>' <%= 'class="active"' if (@category && (@category.top_ancestor == item)) %> >
  4 + <li id='category<%= item.display_color %>'<%= ' class="active"' if (@category && (@category.top_ancestor == item)) %>>
6 5 <%= item.name %>
7 6 <ul>
8 7 <% item.children.each do |child| %>
... ...
public/images/bolota.gif 0 → 100644
View file @394ec6d

70 Bytes
public/stylesheets/common.css
  Diff comments   View file @394ec6d
1 1 body {
2   -margin: 0px;
3   -padding: 0px;
  2 + margin: 0px;
  3 + padding: 0px;
4 4 }
5 5  
6 6 #notice {
7   -cursor: pointer;
8   -}
  7 + cursor: pointer;
  8 +}
9 9  
10 10 #wrap {
11   -margin:0px;
  11 + border: 3px solid #2A5896;
  12 +}
  13 +body.category1 #wrap {
  14 + border-color: #E26B00;
  15 +}
  16 +body.category2 #wrap {
  17 + border-color: #61B60E;
  18 +}
  19 +body.category3 #wrap {
  20 + border-color: #694371;
  21 +}
  22 +body.category4 #wrap {
  23 + border-color: #B80000;
12 24 }
13 25  
14 26 a img {
... ... @@ -19,17 +31,17 @@ a:hover img {
19 31 }
20 32  
21 33 #environment_identification {
22   -position: absolute !important;
23   -background: url("../images/bg_blue_logo.png") 5px no-repeat !important;
24   -vertical-align: bottom !important ;
25   -width: 230px !important ;
26   -height: 34px !important ;
27   -line-height: 34px !important ;
28   -padding-left: 60px !important ;
  34 + position: absolute !important;
  35 + background: url("../images/bg_blue_logo.png") 5px no-repeat !important;
  36 + vertical-align: bottom !important ;
  37 + width: 230px !important ;
  38 + height: 34px !important ;
  39 + line-height: 34px !important ;
  40 + padding-left: 60px !important ;
29 41 }
30 42  
31 43 #environment_identification:hover {
32   -color: #dfdfdf !important ;
  44 + color: #DFDFDF !important ;
33 45 }
34 46  
35 47 div.fieldWithErrors {
... ... @@ -59,38 +71,38 @@ div#errorExplanation h2 {
59 71 }
60 72  
61 73 div#footer {
62   -background: #ffffff url("../images/bg_footer.png") repeat-x !important;
63   -background-position: 0px 0px;
64   -font-family: Verdana, Arial, Serif-sans;
65   -margin: 0px !important;
66   -padding: 5px !important;
67   -text-align: center !important;
68   -clear: both !important;
69   -font-size: 10px !important;
70   -color: #545454 !important;
  74 + background: #ffffff url("../images/bg_footer.png") repeat-x !important;
  75 + background-position: 0px 0px;
  76 + font-family: Verdana, Arial, Serif-sans;
  77 + margin: 0px !important;
  78 + padding: 5px !important;
  79 + text-align: center !important;
  80 + clear: both !important;
  81 + font-size: 10px !important;
  82 + color: #545454 !important;
71 83 }
72 84  
73 85 div#footer a {
74   -color: #545454;
75   -text-decoration: none;
76   -border-bottom: 1px dotted #545454;
  86 + color: #545454;
  87 + text-decoration: none;
  88 + border-bottom: 1px dotted #545454;
77 89 }
78 90  
79 91 div#footer a:hover {
80   -color: #000000;
81   -border: 0px;
  92 + color: #000000;
  93 + border: 0px;
82 94 }
83 95  
84 96 div#footer ul {
85   -margin: 0px;
86   -padding: 0px;
  97 + margin: 0px;
  98 + padding: 0px;
87 99 }
88 100  
89 101 div#footer li {
90   -display: block;
91   -float: right;
92   -margin-right: 20px;
93   -height: 20px;
  102 + display: block;
  103 + float: right;
  104 + margin-right: 20px;
  105 + height: 20px;
94 106 }
95 107  
96 108 /* file manager (big) style */
... ...
public/stylesheets/help.css
  Diff comments   View file @394ec6d
  1 +
1 2 div.help_message {
2 3 z-index: 10000;
3 4 width: 600;
... ...
public/stylesheets/menu.css
  Diff comments   View file @394ec6d
1   -/* Geral Bar */
2   -#noosfero_bar {
3   - width: 100%;
4   - height: 40px;
5   - padding: 0px;
6   - margin-left: -3px;
7   - _margin-left: -0px;
8   - margin-top: -3px;
9   - font-family: Sans, Verdana, Arial;
10   - z-index: 9999;
11   -}
12   -
13   -/* Accessibility Bar */
14   -
15   -#accessibility_bar {
16   -position: absolute;
17   -top: 35px;
18   -margin-left: 15px;
19   -height: 20px;
20   -line-height: 20px;
21   -font-size: 12px !important ;
22   -font-family: Sans, Verdana, Arial !important ;
23   -vertical-align: middle !important ;
24   -text-align: left;
25   -}
26   -
27   -#accessibility_bar a {
28   -text-decoration: none;
29   -color: #dfdfdf;
30   -padding-left: 9px;
31   -background: url("../images/ico_enterlink.gif") no-repeat;
32   -background-position: 0px 6px;
33   -padding-right: 4px;
34   -}
35   -
36   -#accessibility_bar a:hover {
37   -color: #ffffff;
38   -text-decoration: underline;
  1 +#accessibility_menu {
  2 + position: absolute;
  3 + font-size: 1px;
39 4 }
40 5  
41 6 #path_category {
42   -font-weight: bold;
43   -color: #545454;
44   -z-index: 2000;
45   -padding-top: 4px;
  7 + position: absolute;
  8 + top: 45px;
  9 + left: 50px;
  10 + font-weight: bold;
46 11 }
47 12  
48   -/* Menu Itens Accessibility */
49   -
50   -#accessibility_menu {
51   - float: right;
52   - text-align: right;
53   - margin-right: 10px;
54   - font-family: Verdana, Arial, Serif-sans;
55   - font-size: 9px;
56   - color: #545454;
57   - font-weight: normal;
  13 +#noosfero_bar {
  14 + position: absolute;
  15 + left: 3px;
  16 + right: 3px;
  17 + height: 22px;
  18 + z-index: 9999;
  19 + background-color: #3465A4;
58 20 }
59 21  
60   -#accessibility_menu a#icon_go_home {
61   -background: url("../images/ico_enterlink.gif") no-repeat;
62   -}
63   -
64   -#accessibility_menu a {
65   - color: black;
  22 +#link_to_home {
  23 + position: absolute;
  24 + top: 0px;
  25 + left: 0px;
  26 + display: block;
  27 + width: 30px;
  28 + height: 100%;
  29 + background: url(/images/noosfero.png) 0px 50% no-repeat;
  30 + text-align: center;
  31 + color: transparent;
  32 + font-size: 0px;
  33 +}
  34 +
  35 +body.category #noosfero_bar { background-color: #2A5896 }
  36 +
  37 +body.category1 #noosfero_bar { background-color: #E26B00 }
  38 +#category1 .linkSubMenu,
  39 +#category1 ul { background-color: #F57900 }
  40 +#category1:hover .linkSubMenu,
  41 +#category1:hover ul { background-color: #CE5C00 }
  42 +
  43 +body.category2 #noosfero_bar { background-color: #58A80A }
  44 +#category2 .linkSubMenu,
  45 +#category2 ul { background-color: #61B60E }
  46 +#category2:hover .linkSubMenu,
  47 +#category2:hover ul { background-color: #4E9A06 }
  48 +
  49 +body.category3 #noosfero_bar { background-color: #694371 }
  50 +#category3 .linkSubMenu,
  51 +#category3 ul { background-color: #75507B }
  52 +#category3:hover .linkSubMenu,
  53 +#category3:hover ul { background-color: #5C3566 }
  54 +
  55 +body.category4 #noosfero_bar { background-color: #B80000 }
  56 +#category4 .linkSubMenu,
  57 +#category4 ul { background-color: #CC0000 }
  58 +#category4:hover .linkSubMenu,
  59 +#category4:hover ul { background-color: #A40000 }
  60 +
  61 +#user_box {
  62 + position: absolute;
  63 + top: 0px;
  64 + right: 0px;
  65 +}
  66 +
  67 +#user_box a:link,
  68 +#user_box a:visited {
  69 + font-size: 11px;
  70 + font-weight: bold;
  71 + text-decoration: none;
  72 + line-height: 22px;
  73 + color: #FFF;
  74 + margin-right: 10px;
  75 + opacity: 0.7;
66 76 }
67   -
68   -#accessibility_menu a:hover span {
69   - color: white;
  77 +#user_box a:hover,
  78 +#user_box a:active {
  79 + opacity: 1;
70 80 }
71 81  
72   -/* Itens Navigation Bar */
73   -
74   -#navigation_bar {
  82 +#cat_menu {
  83 + padding: 0px;
  84 + margin: 0px;
75 85 width: 100%;
76   - padding: 0px !important;
77   - height: 35px;
78   - vertical-align: middle;
79   - line-height: 35px;
80   - z-index: 995;
81 86 }
82 87  
83   -#navigation_bar ul {
84   - padding: 0px !important;
85   - margin: 0px !important;
86   - z-index: 996;
  88 +#cat_menu a {
  89 + font-weight: bold;
  90 + line-height: 22px;
  91 + text-decoration: none;
  92 + color: #FFF;
87 93 }
88 94  
89   -#navigation_bar ul li {
90   - list-style: none;
91   - display: inline;
92   - font-size: 17px;
93   - margin-right: 5px;
94   -}
  95 +#category1 ul a:hover, #category1 a:active { color: #FDD79E }
  96 +#category2 ul a:hover, #category2 a:active { color: #C4F099 }
  97 +#category3 ul a:hover, #category3 a:active { color: #D6BFD3 }
  98 +#category4 ul a:hover, #category4 a:active { color: #F79494 }
95 99  
96   -#navigation_bar ul li a {
  100 +.linkSubMenu {
  101 + cursor: default;
97 102 float: left;
98 103 display: block;
99   - cursor: default;
100   - margin-top: 5px;
101 104 margin-left: 5px;
102   - text-align: center;
103   - height: 30px;
104   - padding-left: 5px;
105   - padding-right: 5px;
106   - line-height: 30px;
107   - vertical-align: middle;
108   - color: #fff;
109   - text-decoration: none;
110   -}
111   -
112   -#navigation_bar ul ul {
113   -position: absolute;
114   -top: 35px;
115   -margin: 0px;
116   -padding: 0px;
117   -width: 100%;
118   -left: 0px;
119   -display: none;
120   -z-index: 997;
  105 + padding: 0px 5px;
  106 + height: 100%;
  107 + position: relative;
  108 + left: 50px;
121 109 }
122 110  
123   -#navigation_bar ul li ul li {
124   - text-align: center;
125   -}
126   -
127   -#navigation_bar ul li ul li a {
128   - display: inline;
129   - cursor: pointer;
130   - width: auto;
131   - padding-left: 5px;
132   - padding-right: 5px;
133   - margin: 0px;
134   - text-align: center;
135   -}
136   -
137   -#search_box {
138   -position: absolute;
139   -top: 8px;
140   -right: 8px;
141   -margin: 0px;
142   -z-index: 998;
143   -}
144   -#search_box form, #search_box input {
145   - display: inline;
146   -}
147   -#search_box .button {
148   - color: white;
149   - width: 24px;
  111 +#cat_menu li {
150 112 padding: 0px;
151 113 margin: 0px;
152   -}
153   -#search_box .button:hover {
154   - color: black;
155   -}
156   -
157   -#input_search {
158   -border: 1px solid transparent;
159   -color: #545454;
160   -background-color: #efefef;
161   -width: 130px;
162   -font-size: 12px;
163   -}
164   -
165   -#input_search:hover, #input_search:focus {
166   -border: 1px solid white;
167   -color: black;
168   -background-color: white;
169   -}
170   -
171   -/* Itens Colors Change */
172   -
173   -/* ITEM 0 */
174   -body.category #navigation_bar,
175   -li#category a {
176   -background-color: #3465a4;
177   -}
178   -
179   -li#category:hover a, li#category a:focus,
180   -li#category ul {
181   - background-color: #245090 !important;
182   -}
183   -
184   -body.category #wrap {
185   -border: 3px solid #245090 !important;
186   -}
187   -li#category ul li a {
188   - color: white;
189   - background-color: #245090;
190   - border-right: 1px solid white;
191   -}
192   -li#category ul li a:hover {
193   - color: black;
194   -}
195   -
196   -/* ITEM 1 - Orange */
197   -body.category1 #navigation_bar,
198   -li#category1 a { background-color: #f57900; }
199   -
200   -li#category1:hover a, li#category1 a:focus,
201   -li#category1 ul {
202   - background-color: #da6303 !important;
203   -}
204   -body.category1 #wrap {
205   -border: 3px solid #da6303 !important;
206   -}
207   -li#category1 ul li a {
208   - color: white;
209   - background-color: #da6303;
210   - border-right: 1px solid white;
211   -}
212   -li#category1 ul li a:hover {
213   - color: black;
  114 + list-style: none;
  115 + display: inline;
214 116 }
215 117  
216   -/* ITEM 2 - Green */
217   -body.category2 #navigation_bar,
218   -li#category2 a {
219   - background-color: #71b737 !important;
  118 +#cat_menu ul {
  119 + display: none;
  120 + position: absolute;
  121 + top: 22px;
  122 + left: 0px;
  123 + width: 100%;
  124 + padding: 0px 0px 0px 20px;
  125 + margin: 0px;
220 126 }
221 127  
222   -li#category2:hover a, li#category2 a:focus,
223   -li#category2 ul {
224   - background-color: #4e9a06 !important;
225   -}
226   -body.category2 #wrap {
227   -border: 3px solid #4e9a06 !important;
228   -}
229   -li#category2 ul li a {
230   - color: white;
231   - background-color: #4e9a06;
232   - border-right: 1px solid white;
233   -}
234   -li#category2 ul li a:hover {
235   - color: black;
  128 +/*
  129 +#cat_menu ul li {
  130 + padding: 0px;
  131 + margin: 0px;
236 132 }
  133 +*/
237 134  
238   -/* ITEM 3 - Purple */
239   -body.category3 #navigation_bar,
240   -li#category3 a {
241   - background-color: #75507b !important;
242   -}
243 135  
244   -li#category3:hover a, li#category3 a:focus,
245   -li#category3 ul {
246   - background-color: #633a6d !important;
247   -}
248   -body.category3 #wrap {
249   -border: 3px solid #633a6d !important;
250   -}
251   -li#category3 ul li a {
252   - color: white;
253   - background-color: #633a6d;
254   - border-right: 1px solid white;
255   -}
256   -li#category3 ul li a:hover {
257   - color: black;
  136 +#cat_menu ul a {
  137 + background: url(/images/bolota.gif) 0% 50% no-repeat;
  138 + padding-left: 15px;
  139 + margin-left: -11px;
258 140 }
259   -
260   -/* ITEM 4 - Red */
261   -body.category4 #navigation_bar,
262   -li#category4 a {
263   - background-color: #cc0000 !important;
  141 +#cat_menu ul span {
  142 + background: url(/images/bolota.gif) 100% 50% no-repeat;
  143 + padding-right: 15px;
264 144 }
265 145  
266   -li#category4:hover a, li#category4 a:focus,
267   -li#category4 ul {
268   - background-color: #ae0303 !important;
269   -}
270   -body.category4 #wrap {
271   -border: 3px solid #ae0303 !important;
272   -}
273   -li#category4 ul li a {
274   - color: white;
275   - background-color: #ae0303;
276   - border-right: 1px solid white;
277   -}
278   -li#category4 ul li a:hover {
279   - color: black;
280   -}
... ...
public/stylesheets/search.css
  Diff comments   View file @394ec6d
  1 +
1 2 .search-relevance {
2 3 font-size: smaller;
3 4 font-style: italic;
... ...