Commit ec536ce16b7a0a4a7de8f759cf45cefcf8604b85

Authored by AntonioTerceiro
1 parent 1f86c597

ActionItem0: integrating new top bar



git-svn-id: https://svn.colivre.coop.br/svn/noosfero/trunk@404 3f533792-8f58-4932-b0fe-aaf55b0a4547
app/controllers/cms_controller.rb
1 1 class CmsController < ComatoseAdminController
  2 + self.template_root = File.join(File.dirname(__FILE__), '..', 'views')
2 3 end
... ...
app/helpers/application_helper.rb
... ... @@ -96,7 +96,7 @@ module ApplicationHelper
96 96 ( link_to_cms(_('Manage content')) ),
97 97 ( link_to (_('Manage layout')), :controller => 'edit_template' ),
98 98 ( link_to(_('My enterprises'), { :controller => 'enterprise' }) ),
99   - ].join("\n")
  99 + ].join(" | \n")
100 100 content_tag('span', links, :id => 'user_links')
101 101 end
102 102  
... ... @@ -124,6 +124,10 @@ module ApplicationHelper
124 124 content_tag('span', (link_to _('Logout'), { :controller => 'account', :action => 'logout'}, :method => 'post'), :id => 'logout_box')
125 125 end
126 126  
  127 + # renders a search box.
  128 + def search_box
  129 + end
  130 +
127 131 # FIXME
128 132 def footer
129 133 'nothing in the footer yet'
... ...
app/views/layouts/application.rhtml
... ... @@ -7,6 +7,35 @@
7 7 <%= stylesheet_link_tag 'cms' %>
8 8 <% end %>
9 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 39 </head>
11 40  
12 41 <body>
... ... @@ -23,20 +52,51 @@
23 52 <div id="frame">
24 53 <div id="menu_accessibility">
25 54 <%= _('Skip to:') %>
  55 + <%# FIXME: fix all these links!!! %>
  56 + <%= link_to _('Site accesibility'), :controller => 'accessibility' %> |
26 57 <a href="#main_content"><%= _('Content') %></a> |
27 58 <a href="#sidebar"><%= _('Navigation') %></a> |
28 59 <a href="#footer"><%= _('Footer') %></a>
29 60 </div>
30 61  
31 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> &nbsp;&nbsp;&nbsp;<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 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 96 <div id='header_content'>
38   - <!-- Aqui entra um conteudo tipo o titulo da pagina do usuário e os botoes do comatose? -->
39 97 </div>
  98 + -->
  99 +
40 100 <% if params[:controller] == 'cms' %>
41 101 <div id='boxes'>
42 102 <%= yield %>
... ...
public/stylesheets/blue_bar.css 0 → 100644
... ... @@ -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 +
... ...
public/stylesheets/common.css
... ... @@ -3,88 +3,6 @@ margin: 0px;
3 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   -
... ...