ActionItem0: integrating new top bar

git-svn-id: https://svn.colivre.coop.br/svn/noosfero/trunk@404 3f533792-8f58-4932-b0fe-aaf55b0a4547

ActionItem0: integrating new top bar
git-svn-id: https://svn.colivre.coop.br/svn/noosfero/trunk@404 3f533792-8f58-4932-b0fe-aaf55b0a4547
AntonioTerceiro
1 parent 1f86c597
Showing 5 changed files with 260 additions and 89 deletions Show diff stats
app/controllers/cms_controller.rb
app/helpers/application_helper.rb
app/views/layouts/application.rhtml
public/stylesheets/blue_bar.css
public/stylesheets/common.css
 class CmsController < ComatoseAdminController
+  self.template_root = File.join(File.dirname(__FILE__), '..', 'views')
 end
@@ -96,7 +96,7 @@ module ApplicationHelper
        ( link_to_cms(_('Manage content')) ),
        ( link_to (_('Manage layout')), :controller => 'edit_template' ),
        ( link_to(_('My enterprises'), { :controller => 'enterprise' }) ),
-    ].join("\n")
+    ].join(" | \n")
     content_tag('span', links, :id => 'user_links')
   end
@@ -124,6 +124,10 @@ module ApplicationHelper
     content_tag('span', (link_to _('Logout'), { :controller => 'account', :action => 'logout'}, :method => 'post'), :id => 'logout_box')
   end
+  # renders a search box.
+  def search_box
+  end
+
   # FIXME
   def footer
     'nothing in the footer yet'
@@ -7,6 +7,35 @@
       <%= stylesheet_link_tag 'cms' %>
     <% end %>
     <%= stylesheet_link_tag 'common' %>
+    <%= stylesheet_link_tag 'blue_bar' %>
+
+    <script type="text/javascript">
+      function enableSubMenus(){
+        var lis = document.getElementsByTagName('li');
+        for (var i = 0, li; li = lis[i]; i++) {
+         var link = li.getElementsByTagName('a')[0];
+          if (link) {
+            link.onfocus = function(){
+              var ul = this.parentNode.getElementsByTagName('ul')[0];
+              if (ul)
+              ul.style.display = 'block';
+            }
+            var ul = link.parentNode.getElementsByTagName('ul')[0];
+            if (ul){
+              var ullinks = ul.getElementsByTagName('a');
+              var ullinksqty = ullinks.length;
+              var lastItem = ullinks[ullinksqty - 1];
+              if (lastItem){
+              lastItem.onblur = function(){
+                this.parentNode.parentNode.style.display = '';
+              }
+              }
+            }
+          }
+        }
+      }
+      window.onload = enableSubMenus;
+    </script>
   </head>
   <body>
@@ -23,20 +52,51 @@
       <div id="frame">
         <div id="menu_accessibility">
           <%= _('Skip to:') %>
+          <%# FIXME: fix all these links!!! %>
+          <%= link_to _('Site accesibility'), :controller => 'accessibility' %> |
           <a href="#main_content"><%= _('Content') %></a> | 
           <a href="#sidebar"><%= _('Navigation') %></a> | 
           <a href="#footer"><%= _('Footer') %></a>
         </div>
         <div id="header">
-          <%= header %>
-        </div>
+          <div id="virtual_community_identification">Default Virtual Community</div>
+<div id="user_links">
+<span id="login_name">Login Name</span><br />
+<a href="#" id="perfil_edit_button">Editar Perfil</a>|<a href="#" id="logout_button">Sair</a>
+</div>
+
+<div id="bar_center_content">
+  <div id="search_bar">
+<form action="a" name="buscaBarraForm" method="get">
+Buscar: <input name="busca" id="search_input_bar" maxlength="70" type="text" value="Digite aqui sua busca..."> <SELECT NAME="lista" SIZE="1" id="search_select_bar">
+<OPTION>opção 2
+<OPTION>opção 3
+<OPTION>opção 4
+<OPTION>opção 5
+<OPTION>opção 6
+</SELECT> &nbsp;&nbsp;&nbsp;<input type="submit" id="search_button_bar" value="buscar"></form>
+</div>
+  <div id="menu_bar"><ul id="menu">
+  <li><a href="#minha_rede" id="minha_rede" class="active">Minha Rede</a> 
+  </li><li><a href="#minha_web" id="minha_web">Minha página web</a><ul>
+  <li><a href="#mudar_tema" id="mudar_tema">Modificar Tema</a></li><li><a href="#navegar_conteudo" id="navegar_conteudo" class="submenu">Navegar no conteúdo</a>
+  </li></ul> 
+  </li><li><a href="#empreendimento" id="empreendimento">Meu Empreendimento</a></li>
+  </li></ul></div>
+</div>
+
+        </div><!-- id="header" -->
         <div id='content'>
-	  <!-- <a name='main_content'/></a> -->
+          <a name='main_content'/></a>
+          
+          <!-- Aqui entra um conteudo tipo o titulo da pagina do usuário e os botoes do comatose? -->
+          <!--
           <div id='header_content'>
-            <!-- Aqui entra um conteudo tipo o titulo da pagina do usuário e os botoes do comatose? -->
           </div>
+          -->
+
           <% if params[:controller] == 'cms' %>
             <div id='boxes'>
               <%= yield %>
@@ -0,0 +1,188 @@
+/* Default Bar theme Blue Sky */
+#frame {
+  background: #fff url("../images/black_white_12px.png") repeat-x;
+}
+
+#menu_accessibility {
+  font-size: 10px;
+  color: black;
+  font-family: Sans-serif;
+  color: #545454;
+}
+
+
+#menu_accessibility a {
+  color: #545454;
+  text-decoration: none;
+}
+
+#menu_accessibility a:hover {
+  color: #000000;
+  text-decoration: underline;
+}
+
+#menu_accessibility a:focus {
+  color: #ef2929;
+  text-decoration: underline;
+}
+
+#header {
+  background: #fff url("../images/bg_blue_bar.png") left bottom repeat-x;
+  font-family: Verdana, Sans-serif;
+  height: 40px;
+  color: #ffffff;
+}
+
+#virtual_community_identification {
+float: left;
+background: url("../images/bg_blue_logo.png") left bottom no-repeat;
+vertical-align: bottom;
+font-weight:bold;
+width: 230px;
+height: 40px;
+line-height: 40px;
+padding-left: 60px;
+}
+
+#bar_center_content {
+position: relative;
+margin-left: 290px;
+margin-right: 120px;
+text-align: center;
+font-size: 13px;
+height: 40px;
+}
+
+#user_links {
+float: right;
+text-align: center;
+color: #204a87;
+font-size: 12px;
+width: 120px;
+height: 40px;
+}
+
+#user_links a {
+color: #ffffff;
+padding-left: 5px;
+padding-right: 5px;
+font-size: 10px;
+text-decoration: none;
+}
+
+#user_links a:hover {
+color: #fce94f;
+}
+
+
+/* SEARCH BAR */
+#search_bar {
+position: absolute;
+top: 0px;
+width: 380px;
+left: 50%;
+margin-left: -190px;
+height: 20px;
+text-align: center;
+color: #204a87;
+z-index: 9999;
+}
+
+#search_input_bar {
+width: 163px;
+height: 19px;
+font-size: 10px;
+border: 1px solid #545454;
+}
+
+#search_select_bar {
+height: 18px;
+font-size: 10px;
+border: 1px solid #545454;
+}
+
+#search_button_bar {
+height: 17px;
+font-size: 10px;
+border: 1px solid #545454;
+}
+
+
+/* MENU BAR */
+#menu_bar {
+position: absolute;
+top: 19px;
+width: 380px;
+left: 50%;
+font-size: 12px;
+margin-left: -190px;
+height: 20px;
+text-align: center;
+}
+
+#menu {
+margin: 0px;
+padding: 0px;
+text-align: center;
+list-style:none;
+}
+
+#menu li {
+float: left;
+font-weight: bold;
+position: relative;
+}
+
+#menu li ul {
+ display:none;
+ position:absolute;
+ list-style:none;
+ text-align: left;
+ left:0px;
+ margin:0px;
+ width: 200px;
+ padding:0px;
+}
+
+#menu li:hover ul { display:block; }
+
+#menu li:hover, #menu li a:hover, #menu a:focus {
+  background: url("../images/bg_blue_menu.png") left bottom repeat-x;
+  color: #ffffff;
+}
+
+#menu li a{
+	display:block;
+	padding:.2em .5em;
+	text-decoration:none;
+	color: #dfdfdf;
+}
+
+#menu li ul{
+	background: #bcc6d4;
+}
+
+#menu li ul a{
+	color: #204a87;
+	border: 1px solid transparent;
+}
+
+#menu li ul li {
+	width: 100%;
+}
+
+#menu li ul li a:hover {
+  background: url("../images/bg_blue_menu.png") left bottom repeat-x;
+  color: #ffffff;
+}
+
+
+/* Cores Tango
+ef2929 - Vermelho Claro
+729fcf - Azul Claro 
+3465a4 - Azul Medio
+204a87 - Azul Escuro
+fce94f - Amarelo Claro
+*/
+/* END MENU BAR */
+
@@ -3,88 +3,6 @@ margin: 0px;
 padding: 0px;
 }
-#notice {
-position: absolute;
-margin-top: 10px;
-right: 10px;
-background: #ffffa9;
-padding: 10px;
-border: 3px solid #dfdfdf;
-z-index: 9999 !important ;
+a img {
+  border: none;
 }
-
-/* Bar Blue Default */
-
-#virtual_community_identification {
-position: absolute !important;
-background: url("../images/bg_blue_logo.png") 5px no-repeat !important;
-vertical-align: bottom !important ;
-width: 230px !important ;
-height: 34px !important ;
-line-height: 34px !important ;
-padding-left: 60px !important ;
-}
-
-#virtual_community_identification:hover {
-color: #dfdfdf !important ;
-}
-
-#header {
-  position: relative !important;
-  margin: 0px !important;
-  padding: 0px !important;
-  height: 35px !important;
-  background: #fff url("../images/bg_blue_bar.png") bottom left repeat-x !important;
-  color: #ffffff !important ;
-}
-
-
-#header a {
-display: table-cell !important ;
-height: 35px !important ;
-color: #ffffff !important ;
-font-size: 10px !important ;
-font-family: Sans-serif !important ;
-font-weight: bold !important ;
-vertical-align: middle !important ;
-padding: 0px 5px 0px 5px !important ;
-text-decoration: underline !important ;
-}
-
-#user_links, #login_box {
-margin-left: 290px !important ;
-}
-
-#user_links a:hover, #user_links a:focus, #login_box a:hover, #login_box a:focus, #register_box a:hover, #register_box a:focus {
-color: #dfdfdf !important ;
-text-decoration: none !important ;
-}
-
-#logout_box a:hover, #logout_box a:focus {
-color: red !important ;
-text-decoration: none !important ;
-}
-
-#menu_accessibility {
-  background: #fff url("../images/black_white_12px.png") repeat-x !important ; 
-  font-size: 10px !important ;
-  color: black !important ;
-  font-family: Sans-serif !important ;
-  color: #545454 !important ;
-}
-
-#menu_accessibility a {
-  color: #545454 !important ;
-  text-decoration: none !important ;
-}
-
-#menu_accessibility a:hover {
-  color: #000000 !important ;
-  text-decoration: underline !important ;
-}
-
-#menu_accessibility a:focus {
-  color: red !important ;
-  text-decoration: underline !important ;
-}
-
1	class CmsController < ComatoseAdminController	1	class CmsController < ComatoseAdminController
		2	+ self.template_root = File.join(File.dirname(__FILE__), '..', 'views')
2	end	3	end
	@@ -7,6 +7,35 @@		@@ -7,6 +7,35 @@
7	<%= stylesheet_link_tag 'cms' %>	7	<%= stylesheet_link_tag 'cms' %>
8	<% end %>	8	<% end %>
9	<%= stylesheet_link_tag 'common' %>	9	<%= stylesheet_link_tag 'common' %>
		10	+ <%= stylesheet_link_tag 'blue_bar' %>
		11	+
		12	+ <script type="text/javascript">
		13	+ function enableSubMenus(){
		14	+ var lis = document.getElementsByTagName('li');
		15	+ for (var i = 0, li; li = lis[i]; i++) {
		16	+ var link = li.getElementsByTagName('a')[0];
		17	+ if (link) {
		18	+ link.onfocus = function(){
		19	+ var ul = this.parentNode.getElementsByTagName('ul')[0];
		20	+ if (ul)
		21	+ ul.style.display = 'block';
		22	+ }
		23	+ var ul = link.parentNode.getElementsByTagName('ul')[0];
		24	+ if (ul){
		25	+ var ullinks = ul.getElementsByTagName('a');
		26	+ var ullinksqty = ullinks.length;
		27	+ var lastItem = ullinks[ullinksqty - 1];
		28	+ if (lastItem){
		29	+ lastItem.onblur = function(){
		30	+ this.parentNode.parentNode.style.display = '';
		31	+ }
		32	+ }
		33	+ }
		34	+ }
		35	+ }
		36	+ }
		37	+ window.onload = enableSubMenus;
		38	+ </script>
10	</head>	39	</head>
11		40
12	<body>	41	<body>
	@@ -23,20 +52,51 @@		@@ -23,20 +52,51 @@
23	<div id="frame">	52	<div id="frame">
24	<div id="menu_accessibility">	53	<div id="menu_accessibility">
25	<%= _('Skip to:') %>	54	<%= _('Skip to:') %>
		55	+ <%# FIXME: fix all these links!!! %>
		56	+ <%= link_to _('Site accesibility'), :controller => 'accessibility' %> \|
26	<a href="#main_content"><%= _('Content') %></a> \|	57	<a href="#main_content"><%= _('Content') %></a> \|
27	<a href="#sidebar"><%= _('Navigation') %></a> \|	58	<a href="#sidebar"><%= _('Navigation') %></a> \|
28	<a href="#footer"><%= _('Footer') %></a>	59	<a href="#footer"><%= _('Footer') %></a>
29	</div>	60	</div>
30		61
31	<div id="header">	62	<div id="header">
32	- <%= header %>
33	- </div>	63	+ <div id="virtual_community_identification">Default Virtual Community</div>
		64	+<div id="user_links">
		65	+<span id="login_name">Login Name</span><br />
		66	+<a href="#" id="perfil_edit_button">Editar Perfil</a>\|<a href="#" id="logout_button">Sair</a>
		67	+</div>
		68	+
		69	+<div id="bar_center_content">
		70	+ <div id="search_bar">
		71	+<form action="a" name="buscaBarraForm" method="get">
		72	+Buscar: <input name="busca" id="search_input_bar" maxlength="70" type="text" value="Digite aqui sua busca..."> <SELECT NAME="lista" SIZE="1" id="search_select_bar">
		73	+<OPTION>opção 2
		74	+<OPTION>opção 3
		75	+<OPTION>opção 4
		76	+<OPTION>opção 5
		77	+<OPTION>opção 6
		78	+</SELECT>    <input type="submit" id="search_button_bar" value="buscar"></form>
		79	+</div>
		80	+ <div id="menu_bar"><ul id="menu">
		81	+ <li><a href="#minha_rede" id="minha_rede" class="active">Minha Rede</a>
		82	+ </li><li><a href="#minha_web" id="minha_web">Minha página web</a><ul>
		83	+ <li><a href="#mudar_tema" id="mudar_tema">Modificar Tema</a></li><li><a href="#navegar_conteudo" id="navegar_conteudo" class="submenu">Navegar no conteúdo</a>
		84	+ </li></ul>
		85	+ </li><li><a href="#empreendimento" id="empreendimento">Meu Empreendimento</a></li>
		86	+ </li></ul></div>
		87	+</div>
		88	+
		89	+ </div><!-- id="header" -->
34		90
35	<div id='content'>	91	<div id='content'>
36	- <!-- <a name='main_content'/></a> -->	92	+ <a name='main_content'/></a>
		93	+
		94	+ <!-- Aqui entra um conteudo tipo o titulo da pagina do usuário e os botoes do comatose? -->
		95	+ <!--
37	<div id='header_content'>	96	<div id='header_content'>
38	- <!-- Aqui entra um conteudo tipo o titulo da pagina do usuário e os botoes do comatose? -->
39	</div>	97	</div>
		98	+ -->
		99	+
40	<% if params[:controller] == 'cms' %>	100	<% if params[:controller] == 'cms' %>
41	<div id='boxes'>	101	<div id='boxes'>
42	<%= yield %>	102	<%= yield %>
@@ -0,0 +1,188 @@		@@ -0,0 +1,188 @@
	1	+/* Default Bar theme Blue Sky */
	2	+#frame {
	3	+ background: #fff url("../images/black_white_12px.png") repeat-x;
	4	+}
	5	+
	6	+#menu_accessibility {
	7	+ font-size: 10px;
	8	+ color: black;
	9	+ font-family: Sans-serif;
	10	+ color: #545454;
	11	+}
	12	+
	13	+
	14	+#menu_accessibility a {
	15	+ color: #545454;
	16	+ text-decoration: none;
	17	+}
	18	+
	19	+#menu_accessibility a:hover {
	20	+ color: #000000;
	21	+ text-decoration: underline;
	22	+}
	23	+
	24	+#menu_accessibility a:focus {
	25	+ color: #ef2929;
	26	+ text-decoration: underline;
	27	+}
	28	+
	29	+#header {
	30	+ background: #fff url("../images/bg_blue_bar.png") left bottom repeat-x;
	31	+ font-family: Verdana, Sans-serif;
	32	+ height: 40px;
	33	+ color: #ffffff;
	34	+}
	35	+
	36	+#virtual_community_identification {
	37	+float: left;
	38	+background: url("../images/bg_blue_logo.png") left bottom no-repeat;
	39	+vertical-align: bottom;
	40	+font-weight:bold;
	41	+width: 230px;
	42	+height: 40px;
	43	+line-height: 40px;
	44	+padding-left: 60px;
	45	+}
	46	+
	47	+#bar_center_content {
	48	+position: relative;
	49	+margin-left: 290px;
	50	+margin-right: 120px;
	51	+text-align: center;
	52	+font-size: 13px;
	53	+height: 40px;
	54	+}
	55	+
	56	+#user_links {
	57	+float: right;
	58	+text-align: center;
	59	+color: #204a87;
	60	+font-size: 12px;
	61	+width: 120px;
	62	+height: 40px;
	63	+}
	64	+
	65	+#user_links a {
	66	+color: #ffffff;
	67	+padding-left: 5px;
	68	+padding-right: 5px;
	69	+font-size: 10px;
	70	+text-decoration: none;
	71	+}
	72	+
	73	+#user_links a:hover {
	74	+color: #fce94f;
	75	+}
	76	+
	77	+
	78	+/* SEARCH BAR */
	79	+#search_bar {
	80	+position: absolute;
	81	+top: 0px;
	82	+width: 380px;
	83	+left: 50%;
	84	+margin-left: -190px;
	85	+height: 20px;
	86	+text-align: center;
	87	+color: #204a87;
	88	+z-index: 9999;
	89	+}
	90	+
	91	+#search_input_bar {
	92	+width: 163px;
	93	+height: 19px;
	94	+font-size: 10px;
	95	+border: 1px solid #545454;
	96	+}
	97	+
	98	+#search_select_bar {
	99	+height: 18px;
	100	+font-size: 10px;
	101	+border: 1px solid #545454;
	102	+}
	103	+
	104	+#search_button_bar {
	105	+height: 17px;
	106	+font-size: 10px;
	107	+border: 1px solid #545454;
	108	+}
	109	+
	110	+
	111	+/* MENU BAR */
	112	+#menu_bar {
	113	+position: absolute;
	114	+top: 19px;
	115	+width: 380px;
	116	+left: 50%;
	117	+font-size: 12px;
	118	+margin-left: -190px;
	119	+height: 20px;
	120	+text-align: center;
	121	+}
	122	+
	123	+#menu {
	124	+margin: 0px;
	125	+padding: 0px;
	126	+text-align: center;
	127	+list-style:none;
	128	+}
	129	+
	130	+#menu li {
	131	+float: left;
	132	+font-weight: bold;
	133	+position: relative;
	134	+}
	135	+
	136	+#menu li ul {
	137	+ display:none;
	138	+ position:absolute;
	139	+ list-style:none;
	140	+ text-align: left;
	141	+ left:0px;
	142	+ margin:0px;
	143	+ width: 200px;
	144	+ padding:0px;
	145	+}
	146	+
	147	+#menu li:hover ul { display:block; }
	148	+
	149	+#menu li:hover, #menu li a:hover, #menu a:focus {
	150	+ background: url("../images/bg_blue_menu.png") left bottom repeat-x;
	151	+ color: #ffffff;
	152	+}
	153	+
	154	+#menu li a{
	155	+ display:block;
	156	+ padding:.2em .5em;
	157	+ text-decoration:none;
	158	+ color: #dfdfdf;
	159	+}
	160	+
	161	+#menu li ul{
	162	+ background: #bcc6d4;
	163	+}
	164	+
	165	+#menu li ul a{
	166	+ color: #204a87;
	167	+ border: 1px solid transparent;
	168	+}
	169	+
	170	+#menu li ul li {
	171	+ width: 100%;
	172	+}
	173	+
	174	+#menu li ul li a:hover {
	175	+ background: url("../images/bg_blue_menu.png") left bottom repeat-x;
	176	+ color: #ffffff;
	177	+}
	178	+
	179	+
	180	+/* Cores Tango
	181	+ef2929 - Vermelho Claro
	182	+729fcf - Azul Claro
	183	+3465a4 - Azul Medio
	184	+204a87 - Azul Escuro
	185	+fce94f - Amarelo Claro
	186	+*/
	187	+/* END MENU BAR */
	188	+
	@@ -3,88 +3,6 @@ margin: 0px;		@@ -3,88 +3,6 @@ margin: 0px;
3	padding: 0px;	3	padding: 0px;
4	}	4	}
5		5
6	-#notice {
7	-position: absolute;
8	-margin-top: 10px;
9	-right: 10px;
10	-background: #ffffa9;
11	-padding: 10px;
12	-border: 3px solid #dfdfdf;
13	-z-index: 9999 !important ;	6	+a img {
		7	+ border: none;
14	}	8	}
15	-
16	-/* Bar Blue Default */
17	-
18	-#virtual_community_identification {
19	-position: absolute !important;
20	-background: url("../images/bg_blue_logo.png") 5px no-repeat !important;
21	-vertical-align: bottom !important ;
22	-width: 230px !important ;
23	-height: 34px !important ;
24	-line-height: 34px !important ;
25	-padding-left: 60px !important ;
26	-}
27	-
28	-#virtual_community_identification:hover {
29	-color: #dfdfdf !important ;
30	-}
31	-
32	-#header {
33	- position: relative !important;
34	- margin: 0px !important;
35	- padding: 0px !important;
36	- height: 35px !important;
37	- background: #fff url("../images/bg_blue_bar.png") bottom left repeat-x !important;
38	- color: #ffffff !important ;
39	-}
40	-
41	-
42	-#header a {
43	-display: table-cell !important ;
44	-height: 35px !important ;
45	-color: #ffffff !important ;
46	-font-size: 10px !important ;
47	-font-family: Sans-serif !important ;
48	-font-weight: bold !important ;
49	-vertical-align: middle !important ;
50	-padding: 0px 5px 0px 5px !important ;
51	-text-decoration: underline !important ;
52	-}
53	-
54	-#user_links, #login_box {
55	-margin-left: 290px !important ;
56	-}
57	-
58	-#user_links a:hover, #user_links a:focus, #login_box a:hover, #login_box a:focus, #register_box a:hover, #register_box a:focus {
59	-color: #dfdfdf !important ;
60	-text-decoration: none !important ;
61	-}
62	-
63	-#logout_box a:hover, #logout_box a:focus {
64	-color: red !important ;
65	-text-decoration: none !important ;
66	-}
67	-
68	-#menu_accessibility {
69	- background: #fff url("../images/black_white_12px.png") repeat-x !important ;
70	- font-size: 10px !important ;
71	- color: black !important ;
72	- font-family: Sans-serif !important ;
73	- color: #545454 !important ;
74	-}
75	-
76	-#menu_accessibility a {
77	- color: #545454 !important ;
78	- text-decoration: none !important ;
79	-}
80	-
81	-#menu_accessibility a:hover {
82	- color: #000000 !important ;
83	- text-decoration: underline !important ;
84	-}
85	-
86	-#menu_accessibility a:focus {
87	- color: red !important ;
88	- text-decoration: underline !important ;
89	-}
90	-