Commit 394ec6d8b1bd86c61925175b46a2107fa62acdef

Authored by AurelioAHeckert
1 parent 0e06b2d0

ActionItem152: top bar rework 90% done

git-svn-id: https://svn.colivre.coop.br/svn/noosfero/trunk@1185 3f533792-8f58-4932-b0fe-aaf55b0a4547
app/helpers/application_helper.rb
@@ -112,15 +112,14 @@ module ApplicationHelper @@ -112,15 +112,14 @@ module ApplicationHelper
112 def shortcut_header_links 112 def shortcut_header_links
113 if logged_in? 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 # O ID icon_accessibility tambem tem que aparcer e testei o link nao ta funcionado. 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 else 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 end.join(" ") 124 end.join(" ")
126 end 125 end
app/views/layouts/application.rhtml
1 <html> 1 <html>
2 <head> 2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 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 Noosfero 8 Noosfero
9 - <% end %> 9 + <%- end -%>
10 </title> 10 </title>
11 <meta name="description" content="FIXME: Descriptions of Noosfero" /> 11 <meta name="description" content="FIXME: Descriptions of Noosfero" />
12 <meta name="keywords" content="Noosfero, Community, Open Source" /> 12 <meta name="keywords" content="Noosfero, Community, Open Source" />
@@ -26,45 +26,44 @@ @@ -26,45 +26,44 @@
26 <body class='category<%= category_color %>'> 26 <body class='category<%= category_color %>'>
27 27
28 <% unless flash[:notice].nil? %> 28 <% unless flash[:notice].nil? %>
29 - <div id='notice' onClick="Element.hide('notice');"> 29 + <div id='notice' onclick="Element.hide('notice');">
30 <%= flash[:notice] %> 30 <%= flash[:notice] %>
31 <%= javascript_tag(visual_effect(:fade, "notice", :duration => 15)) %> 31 <%= javascript_tag(visual_effect(:fade, "notice", :duration => 15)) %>
32 </div> 32 </div>
33 <% end %> 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 <div id="wrap"> 46 <div id="wrap">
36 47
37 <div id='noosfero_bar' style='position: absolute;'> 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 <div id='navigation_bar'> 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 <%= render :file => 'shared/categories_menu' %> 51 <%= render :file => 'shared/categories_menu' %>
63 </div><!-- id='navigation_bar' --> 52 </div><!-- id='navigation_bar' -->
64 -  
65 <script type="text/javascript"> 53 <script type="text/javascript">
66 prepareMenu('navigation_bar', { timeout: 5 }); 54 prepareMenu('navigation_bar', { timeout: 5 });
67 </script> 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 </div><!-- id="noosfero_bar" --> 67 </div><!-- id="noosfero_bar" -->
69 68
70 <div id='frame'><!-- Frame que envolve toda pagina de um usuario --> 69 <div id='frame'><!-- Frame que envolve toda pagina de um usuario -->
app/views/shared/categories_menu.rhtml
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 <% @environment.display_categories.each do |item| %> 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 <%= item.name %> 5 <%= item.name %>
7 <ul> 6 <ul>
8 <% item.children.each do |child| %> 7 <% item.children.each do |child| %>
public/images/bolota.gif 0 → 100644

70 Bytes

public/stylesheets/common.css
1 body { 1 body {
2 -margin: 0px;  
3 -padding: 0px; 2 + margin: 0px;
  3 + padding: 0px;
4 } 4 }
5 5
6 #notice { 6 #notice {
7 -cursor: pointer;  
8 -} 7 + cursor: pointer;
  8 +}
9 9
10 #wrap { 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 a img { 26 a img {
@@ -19,17 +31,17 @@ a:hover img { @@ -19,17 +31,17 @@ a:hover img {
19 } 31 }
20 32
21 #environment_identification { 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 #environment_identification:hover { 43 #environment_identification:hover {
32 -color: #dfdfdf !important ; 44 + color: #DFDFDF !important ;
33 } 45 }
34 46
35 div.fieldWithErrors { 47 div.fieldWithErrors {
@@ -59,38 +71,38 @@ div#errorExplanation h2 { @@ -59,38 +71,38 @@ div#errorExplanation h2 {
59 } 71 }
60 72
61 div#footer { 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 div#footer a { 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 div#footer a:hover { 91 div#footer a:hover {
80 -color: #000000;  
81 -border: 0px; 92 + color: #000000;
  93 + border: 0px;
82 } 94 }
83 95
84 div#footer ul { 96 div#footer ul {
85 -margin: 0px;  
86 -padding: 0px; 97 + margin: 0px;
  98 + padding: 0px;
87 } 99 }
88 100
89 div#footer li { 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 /* file manager (big) style */ 108 /* file manager (big) style */
public/stylesheets/help.css
  1 +
1 div.help_message { 2 div.help_message {
2 z-index: 10000; 3 z-index: 10000;
3 width: 600; 4 width: 600;
public/stylesheets/menu.css
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 #path_category { 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 width: 100%; 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 float: left; 102 float: left;
98 display: block; 103 display: block;
99 - cursor: default;  
100 - margin-top: 5px;  
101 margin-left: 5px; 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 padding: 0px; 112 padding: 0px;
151 margin: 0px; 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
  1 +
1 .search-relevance { 2 .search-relevance {
2 font-size: smaller; 3 font-size: smaller;
3 font-style: italic; 4 font-style: italic;