ActionItem413: more code adaptetion for a better user experience

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

ActionItem413: more code adaptetion for a better user experience
git-svn-id: https://svn.colivre.coop.br/svn/noosfero/trunk@2056 3f533792-8f58-4932-b0fe-aaf55b0a4547
AurelioAHeckert
1 parent fb2196ad
Showing 20 changed files with 200 additions and 171 deletions Show diff stats
app/views/account/login.rhtml
app/views/layouts/application.rhtml
app/views/search/_display_results.rhtml
app/views/shared/categories_menu.rhtml
public/designs/icons/default/style.css
public/designs/templates/default/stylesheets/style.css
public/designs/themes/ecosol/stylesheets/common.css
public/designs/themes/ecosol/stylesheets/menu.css
public/designs/themes/zen3/stylesheets/blocks/profile-list-block.css
public/designs/themes/zen3/stylesheets/common.css
public/designs/themes/zen3/stylesheets/controller_search.css
public/designs/themes/zen3/stylesheets/menu.css
public/javascripts/auto-open-menu.js
public/javascripts/lightbox.js
public/stylesheets/button.css
public/stylesheets/common.css
public/stylesheets/controller_search.css
public/stylesheets/help.css
public/stylesheets/menu.css
script/change-theme
@@ -11,10 +11,12 @@
    :html => { :help => _('If you are a registered user, enter your username and password to be authenticated.')+'<p/>'+_('To join on this environment, click on "<b>I want to be an user!</b>".')+'<p/>'+_('If you forgot your password, click on "<b>I forgot my password!</b>" link.') } do |f| %>
 <%= f.text_field :login,
+                 :id => ( lightbox? ? 'lightbox_' : '' ) + 'user_login',
                  :help => _('Here goes the nickname that you give on the registration.'),
                  :onchange => 'this.value = convToValidLogin( this.value )' %>
 <%= f.password_field :password,
+                     :id => ( lightbox? ? 'lightbox_' : '' ) + 'user_password',
                      :help => _('your password is personal, protect it.') %>
 <% button_bar do %>
@@ -36,7 +38,7 @@
 <% if lightbox? %>
   <script type='text/javascript'>
-    $('login').focus();
+    $("lightbox_user_login").focus();
   </script>
 <% end %>
@@ -93,6 +93,10 @@
         </div>
         <div id="navigation_bar">
+          <%= link_to "<span>"+ @environment.name() +"</span>",
+                      { :controller=>"home" },
+                        :id=>"menu_link_to_envhome",
+                        :title=>@environment.name  %>
           <%= render :file => 'shared/categories_menu' %>
         </div><!-- id='navigation_bar' -->
         <script type="text/javascript">
@@ -105,7 +109,6 @@
         <div id="user_box">
           <%= render :file => 'shared/user_menu' %>
-          <%= theme_opt_menu_search %>
         </div><!-- id='user_box' -->
         <a href="#" id="btShowHelp" class="icon-help32on help-on"
@@ -15,7 +15,7 @@
         <% if @results.size != 1 %>
           <h3>
             <%= @names[name] %>
-            <%= link_to _('(more ...)'), params.merge(:action => 'index', :find_in => [ name ]) %>
+            <%= icon_button :more, _('more...'), params.merge(:action => 'index', :find_in => [ name ]) %>
           </h3>
         <% end %>
       <% end %>
 <ul id="cat_menu">
-  <%= link_to( "<span>"+ @environment.name() +"</span>", {:controller=>"home"}, :id=>"menu_link_to_envhome", :title=>@environment.name) %>
   <% @environment.display_categories.each do |item| %>
     <li id="category<%= item.display_color %>"<%= ' class="active"' if (@category && (@category.top_ancestor == item)) %>>
       <%= item.name %>
@@ -17,6 +16,7 @@
 </ul><!-- fim id="cat_menu" -->
 <div id="assets_menu">
+  <%= theme_opt_menu_search %>
   <div id="assets_menu_list" class="top_extra_menu">
     <ul id="assets_menu_ul">
       <%= generate_assets_menu %>
@@ -14,6 +14,7 @@
 .icon-back      { background-image: url(go-back-HC.gif)          }
 .icon-next      { background-image: url(gtk-media-next-ltr.png)  }
 .icon-add       { background-image: url(add-HC.gif)              }
+.icon-more      { background-image: url(add-HC.gif)              }
 .icon-up        { background-image: url(go-up-HC.gif)            }
 .icon-up-red    { background-image: url(go-up-red-HC.gif)        }
 .icon-down      { background-image: url(go-down-HC.gif)          }
@@ -18,7 +18,6 @@
 }
 .box-3 {
-  margin-top: 20px;
   float: right;
   width: 200px;
 }
@@ -33,6 +33,10 @@ body.category2 #wrap { background-image: url(&quot;../images/bg-top-verde.png&quot;);    }
 body.category3 #wrap { background-image: url("../images/bg-top-lilas.png");    }
 body.category4 #wrap { background-image: url("../images/bg-top-vermelho.png"); }
+.box-3 {
+  padding-top: 35px;
+}
+
 #path_category {
   position: absolute;
   top: 40px;
+#navigation_bar {
+  top: 3px;
+  left: 3px;
+  right: 3px;
+}
 #menu_link_to_envhome {
   display: block;
@@ -13,11 +18,6 @@ body.category2 #menu_link_to_envhome { background-image: url(../images/ico-fbes-
 body.category3 #menu_link_to_envhome { background-image: url(../images/ico-fbes-fundo-lilas.gif)    }
 body.category4 #menu_link_to_envhome { background-image: url(../images/ico-fbes-fundo-vermelho.gif) }
-#noosfero_bar {
-  left: 3px;
-  right: 3px;
-}
-
 body.category1  #noosfero_bar { background-color: #E26B00 }
 #category1       .linkSubMenu,
 #category1       ul           { background-color: #F57900 }
@@ -62,9 +62,6 @@ body.category4 .linkSubMenu { background-image: url(../images/borda-esq-aba-verm
 #assets_menu {
   overflow: hidden; /* MSIE workarround bug */
 }
-#assets_menu ul {
-  height: 55px;
-}
 body.category1 #assets_menu_layout_iten { background: url(../images/top-bar/assets-menu-top-laranja.gif)   }
 body.category2 #assets_menu_layout_iten { background: url(../images/top-bar/assets-menu-top-verde.gif)     }
 .common-profile-list-block li a {
-  border: 2px solid #FFF;
+  border: 2px solid transparent;
   color: #C00;
   -moz-border-radius: 4px;
 }
+.msie6 .common-profile-list-block li a {
+  border: 2px solid #FFF;
+}
 .common-profile-list-block li a:hover {
   border: 2px solid #C00;
 body {
-  background: #9ca09a; #A1A59F; /* #BABDB6; #888A85; */
+  background: #9CA09A;
 }
 #wrap {
@@ -19,6 +19,10 @@ body {
 /* * * Content * * * * * * * * * * * * * * * * * * * */
+#content {
+  padding: 0px 0px 15px 0px;
+}
+
 #content h1, #content h2, #content h3,
 #content h4, #content h5, #content h6 {
   margin: 10px 0px;
@@ -5,7 +5,7 @@
 #view-category,
 #search-results {
-  padding: 0% 2% 10px 2%;
+  padding: 0% 2%;
 }
 #view-category a,
 #noosfero_bar {
   height: 34px;
-  z-index: 100;
   font-size: 12px;
-  letter-spacing: -1px;
   background: #F57900 url(../images/menu-bg.png) 0% 100% repeat-x;
 }
@@ -23,11 +21,98 @@
 }
+/* * * Assets Menu * * * * * * * * * * * */
+
+#assets_menu {
+  width: 180px;
+  position: absolute;
+  top: 7px;
+  right: 160px;
+  padding: 0px;
+}
+.msie6 #assets_menu {
+  margin-right: 160px;
+}
+
+#assets_menu_layout_iten {
+  display: none;
+}
+
+#assets_menu_list {
+  padding: 0px;
+  background: transparent;
+}
+
+#assets_menu ul {
+  height: auto;
+  max-width: none;
+  width: auto;
+  overflow: visible;
+}
+#assets_menu li {
+  margin: 0px;
+  padding: 0px 4px;
+  float: left;
+  width: 22px;
+  height: 20px;
+  position: relative;
+}
+
+#assets_menu a {
+  letter-spacing: 0px;
+  color: #FFF;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  overflow: visible;
+  opacity: 0.6;
+	filter: alpha(opacity=60);
+}
+.msie #assets_menu a {
+  width: 100px;
+  height: 20px;
+  margin-left: 0px;
+  cursor: pointer;
+}
+#assets_menu a:hover {
+  background: transparent;
+  opacity: 1;
+	filter: alpha(opacity=100);
+}
+.msie #assets_menu a:hover {
+  height: 44px;
+}
+
+#assets_menu a strong {
+  position: absolute;
+  top: 22px;
+  left: -10px;
+  background: #F57900;
+  border: 1px solid #A40000;
+  padding: 1px 5px;
+  display: none;
+}
+.msie #assets_menu a strong {
+  left: 0px;
+}
+
+.msie #assets_menu a span {
+  left: 10px;
+}
+
+#assets_menu a:hover strong {
+  display: block;
+  -moz-border-radius: 4px;
+}
+
 /* * * Menu Search Box * * * * * * * * * * * */
 #simple-search {
+  position: absolute;
+  top: -1px;
+  left: 190px;
   margin: 0px;
-  padding: 5px 0px 0px 0px;
+  padding: 0px;
 }
 #simple-search input {
@@ -35,6 +120,8 @@
   padding-top: 2px;
   height: 16px;
   border: 1px solid #A40000;
+  border-right: 1px solid #900;
+  border-bottom: 1px solid #800;
   background: #F57900 url(../images/search.gif) 1px 90% no-repeat;
   color: #000;
   text-align: center;
@@ -61,8 +148,9 @@
 /* * * User Menu * * * * * * * * * * * */
 #user_menu {
-  top: 4px;
-  right: 350px;
+  position: absolute;
+  top: 0px;
+  left: -180px;
   width: 150px;
   overflow: hidden;
   padding: 2px 0px;
@@ -86,19 +174,17 @@
 }
 #user_menu_head img {
-  margin-left: -20px;
+  margin-left: 0px;
 }
-.msie #user_menu_head img {
-  margin-left: 5px;
+.msie6 #user_menu_head img {
+  margin-left: 4px;
 }
 #user_menu_head span {
   color: #FFF;
   opacity: 0.6;
 	filter: alpha(opacity=60);
-}
-.msie #user_menu_head span {
-  margin-left: 24px;
+  margin-left: 16px;
 }
 #user_menu a {
@@ -143,92 +229,6 @@
   display: none; /* do not show this link in the fist page */
 }
-/* * * Assets Menu * * * * * * * * * * * */
-
-#assets_menu {
-  position: absolute;
-  top: 7px;
-  right: 160px;
-  padding: 0px;
-}
-.msie6 #assets_menu {
-  margin-right: 170px;
-}
-.msie7 #assets_menu {
-  margin-right: 10px;
-}
-
-#assets_menu_layout_iten {
-  display: none;
-}
-
-#assets_menu_list {
-  padding: 0px;
-  background: transparent;
-}
-
-#assets_menu ul {
-  height: auto;
-  max-width: none;
-  width: auto;
-  overflow: visible;
-}
-#assets_menu li {
-  margin: 0px;
-  padding: 0px 4px;
-  float: left;
-  width: 22px;
-  height: 20px;
-  position: relative;
-}
-
-#assets_menu a {
-  letter-spacing: 0px;
-  color: #FFF;
-  position: absolute;
-  left: 0px;
-  top: 0px;
-  overflow: visible;
-  opacity: 0.6;
-	filter: alpha(opacity=60);
-}
-.msie #assets_menu a {
-  width: 100px;
-  height: 20px;
-  margin-left: 0px;
-  cursor: pointer;
-}
-#assets_menu a:hover {
-  background: transparent;
-  opacity: 1;
-	filter: alpha(opacity=100);
-}
-.msie #assets_menu a:hover {
-  height: 40px;
-}
-
-#assets_menu a strong {
-  position: absolute;
-  top: 20px;
-  left: -10px;
-  background: #F57900;
-  border: 1px solid #A40000;
-  padding: 1px 4px;
-  display: none;
-}
-.msie #assets_menu a strong {
-  left: 0px;
-}
-
-.msie #assets_menu a span {
-  left: 10px;
-}
-
-#assets_menu a:hover strong {
-  display: block;
-  -moz-border-radius: 4px;
-}
-
 /* * * Language Selector * * * * * * * * * */
 #language-selector {
@@ -27,6 +27,7 @@ function setAutoOpenMenu( menu ) {
     this.className = this.className.replace( / closed/g, "" );
     if ( !/menu-opened/.test(this.className) ) { this.className += " opened" }
     var mul = this.mul;
+    mul.style.display = "block";
     if ( mul.paddingBottom ) mul.parentNode.style.paddingBottom = mul.paddingBottom +"px";
     if ( mul.h < mul.maxSize ) {
       mul.h += mul.inc;
@@ -48,6 +49,7 @@ function setAutoOpenMenu( menu ) {
       if ( mul.h > mul.minSize ) {
         mul.h -= mul.inc++;
         if ( mul.h < 0 ) mul.h = 0;
+        if ( mul.h == 0 ) mul.style.display = "none";
         if ( this.isIE ) if ( mul.h < 1 ) mul.h = 1;
         mul.style.height = mul.h +"px";
         this.timeoutClose = setTimeout( "window['autoOpenMenu-"+this.id+"'].onmouseout(true)", 33 );
@@ -199,4 +199,4 @@ function addLightboxMarkup() {
 						  '</div>';
 	bod.appendChild(overlay);
 	bod.appendChild(lb);
-}
 \ No newline at end of file
+}
@@ -19,11 +19,7 @@ input.button {
 .button span {
   display: none;
 }
-.msie .button span {
-  display: inline;
-  width: 0px;
-  overflow: hidden;
-}
+
 .button.with-text span,
 .msie .button.with-text span {
   display: inline;
@@ -18,7 +18,7 @@ body {
 }
 #header {
-  height: 60px;
+  padding: 10px;
 }
 #design_boxes {
@@ -25,6 +25,13 @@
 #search-results h3 {
   margin: 20px 0px 0px 20px;
+  position: relative;
+}
+
+#search-results h3 .button {
+  position: absolute;
+  right: 0px;
+  bottom: 0px;
 }
 .search-results-box {
 #btShowHelp {
+  z-index: 100;
   position: absolute;
   top: 2px;
   right: 2px;
@@ -8,19 +8,26 @@
 }
 #noosfero_bar {
-  position: absolute;
-  left: 0px;
-  right: 0px;
   height: 22px;
-  z-index: 100;
   font-size: 11px;
   letter-spacing: -1px;
   background: #2A5896 url(../images/white-pixel.gif) 0px 100% repeat-x;
 }
 #navigation_bar {
-  width: 100%; /* MSIE workarround bug */
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  z-index: 100;
 }
+#navigation_bar a {
+  font-weight: bold;
+  line-height: 22px;
+  text-decoration: none;
+  color: #FFF;
+}
+
 #menu_link_to_envhome {
   float: left;
@@ -30,9 +37,9 @@
   padding: 0px;
   margin: 0px;
 }
-.msie #cat_menu {
+.msie6 #cat_menu {
   width: 100%;
-  position: relative;
+  margin-top: -22px;
 }
 #cat_menu .linkSubMenu,
@@ -40,13 +47,6 @@
   background-color: #5380B8;
 }
-#cat_menu a {
-  font-weight: bold;
-  line-height: 22px;
-  text-decoration: none;
-  color: #FFF;
-}
-
 .linkSubMenu {
   cursor: default;
   float: left;
@@ -59,6 +59,10 @@
   background-image: url(../images/borda-esq-aba-azul.gif);
   border-right: 1px solid #FFF;
 }
+.msie6 .linkSubMenu {
+  position: relative;
+  left: 100px;
+}
 .linkSubMenu span {
   display: block;
   line-height: 22px;
@@ -91,37 +95,42 @@
   border: 1px solid #FFF;
   border-top: none;
 }
-.msie #cat_menu ul {
-  /* width: 100%; */
-}
 #cat_menu ul a {
   background: url(../images/bolota.gif) 0% 50% no-repeat;
   padding-left: 15px;
   margin-left: -10px;
+  white-space: nowrap;
 }
 #cat_menu ul span {
   background: url(../images/bolota.gif) 100% 50% no-repeat;
   padding-right: 15px;
 }
-/* * * Assets Menu * * * * * * * * * * * */
+/* * * Assets Menu and User Box * * * * * * * * * * * */
 #assets_menu {
   position: absolute;
-  top: 21px;
+  top: 0px;
   right: 0px;
   padding: 0px 0px 0px 10px;
   border: none; /* work arround IE Bug */
   background: transparent; /* work arround IE Bug */
+  width: 150px;
 }
 .msie6 #assets_menu {
   right: -1px;
 }
+#assets_menu a#open_search {
+  display: block;
+  height: 21px;
+  margin-left: 5px;
+}
+
 #assets_menu_layout_iten {
   position: absolute;
-  top: 0px;
+  top: 21px;
   left: 0px;
   width: 11px;
   height: 11px;
@@ -137,10 +146,12 @@
 #assets_menu ul {
   margin: 0px;
   padding: 0px;
+  position: relative; /* work arround IE Bug */
   overflow: hidden;
   height: 56px;
-  max-width: 135px;
-  width: 136px;
+}
+.msie #assets_menu ul {
+  height: 55px;
 }
 .top_extra_menu li {
@@ -149,11 +160,20 @@
   list-style: none;
 }
+#user_box {
+  position: absolute;
+  top: 3px;
+  right: 170px;
+  width: 150px;
+  z-index: 100;
+}
+
 #user_menu_head,
 #user_box a,
 #assets_menu a,
 .top_extra_menu a {
   font-size: 12px;
+  line-height: 18px;
   font-weight: bold;
   text-decoration: none;
   color: #B8CFE7;
@@ -178,7 +198,7 @@
 #user_box img,
 #user_box a span,
-.top_extra_menu a span {
+#assets_menu a span {
 	position: absolute;
 	top: 0px;
 	left: 0px;
@@ -191,51 +211,31 @@
   opacity: 0.7;
 	filter: alpha(opacity=70);
 }
+#assets_menu a#open_search span {
+	top: 1px;
+}
 /*.msie5 #user_box img,*/
 .msie5 #user_box a span,
-.msie5 .top_extra_menu a span {
+.msie5 #assets_menu a span {
   display: none;
 }
 #user_box img,
 #user_box a:hover span,
-.top_extra_menu a:hover span {
+#assets_menu a:hover span {
   opacity: 1;
 	filter: alpha(opacity=100);
 }
 #user_box img {
   border: none;
-  top: -1px;
+  top: -2px;
   left: -1px;
 	width: 20px;
 	height: 20px;
 }
-/* * * User Box * * * * * * * * * * * */
-
-#user_box {
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  width: 150px;
-}
-
-#open_search {
-  position: absolute;
-  top: 2px;
-  left: 14px;
-  float: left;
-}
-#user_box #open_search:hover {
-  background: none;
-}
-
 /* * * User Menu * * * * * * * * * * * */
 #user_menu {
-  position: absolute;
-  top: 0px;
-  right: 150px;
-  width: 170px;
   border: none; /* work arround IE Bug */
   background: transparent; /* work arround IE Bug */
 }
@@ -247,11 +247,12 @@
 #user_menu_head span {
   position: relative;
   top: 1px;
+  left: 1px;
 }
 #user_menu_head,
 #user_box a#link_login {
-  margin-left: 25px;
+  margin-left: 4px;
   display: inline;
 }
 #user_menu a#link_login:hover {
@@ -279,6 +280,7 @@
   width: 150px;
   max-width: 140px;
   height: 0px;
+  position: relative; /* work arround IE Bug */
   overflow: hidden;
   padding: 0px 4px 0px 5px;
   margin: 0px;
@@ -298,6 +300,7 @@
   position: absolute;
   left: 90px;
   top: 5px;
+  z-index: 100;
   font-size: 10px;
   opacity: 0.7;
 	filter: alpha(opacity=70);
 #!/bin/bash
+t_ini="$1"
+
 cd "$( dirname $0 )/../public/designs/themes/"
 test -L default && rm default
@@ -14,7 +16,12 @@ done
 ok=false
 while ! [ -L default ]; do
-  read t
+  if [ "$t_ini" = "" ]; then
+    read t
+  else
+    t="$t_ini"
+    t_ini=""
+  fi
   n=0
   ls -1 | while read theme; do
     let n++
	@@ -15,7 +15,7 @@		@@ -15,7 +15,7 @@
15	<% if @results.size != 1 %>	15	<% if @results.size != 1 %>
16	<h3>	16	<h3>
17	<%= @names[name] %>	17	<%= @names[name] %>
18	- <%= link_to _('(more ...)'), params.merge(:action => 'index', :find_in => [ name ]) %>	18	+ <%= icon_button :more, _('more...'), params.merge(:action => 'index', :find_in => [ name ]) %>
19	</h3>	19	</h3>
20	<% end %>	20	<% end %>
21	<% end %>	21	<% end %>
	@@ -18,7 +18,6 @@		@@ -18,7 +18,6 @@
18	}	18	}
19		19
20	.box-3 {	20	.box-3 {
21	- margin-top: 20px;
22	float: right;	21	float: right;
23	width: 200px;	22	width: 200px;
24	}	23	}
	@@ -5,7 +5,7 @@		@@ -5,7 +5,7 @@
5		5
6	#view-category,	6	#view-category,
7	#search-results {	7	#search-results {
8	- padding: 0% 2% 10px 2%;	8	+ padding: 0% 2%;
9	}	9	}
10		10
11	#view-category a,	11	#view-category a,
	@@ -199,4 +199,4 @@ function addLightboxMarkup() {		@@ -199,4 +199,4 @@ function addLightboxMarkup() {
199	'</div>';	199	'</div>';
200	bod.appendChild(overlay);	200	bod.appendChild(overlay);
201	bod.appendChild(lb);	201	bod.appendChild(lb);
202	-}
203	\ No newline at end of file	202	\ No newline at end of file
		203	+}
	@@ -18,7 +18,7 @@ body {		@@ -18,7 +18,7 @@ body {
18	}	18	}
19		19
20	#header {	20	#header {
21	- height: 60px;	21	+ padding: 10px;
22	}	22	}
23		23
24	#design_boxes {	24	#design_boxes {
	@@ -25,6 +25,13 @@		@@ -25,6 +25,13 @@
25		25
26	#search-results h3 {	26	#search-results h3 {
27	margin: 20px 0px 0px 20px;	27	margin: 20px 0px 0px 20px;
		28	+ position: relative;
		29	+}
		30	+
		31	+#search-results h3 .button {
		32	+ position: absolute;
		33	+ right: 0px;
		34	+ bottom: 0px;
28	}	35	}
29		36
30	.search-results-box {	37	.search-results-box {
1		1
2	#btShowHelp {	2	#btShowHelp {
		3	+ z-index: 100;
3	position: absolute;	4	position: absolute;
4	top: 2px;	5	top: 2px;
5	right: 2px;	6	right: 2px;
1	#!/bin/bash	1	#!/bin/bash
2		2
		3	+t_ini="$1"
		4	+
3	cd "$( dirname $0 )/../public/designs/themes/"	5	cd "$( dirname $0 )/../public/designs/themes/"
4		6
5	test -L default && rm default	7	test -L default && rm default
	@@ -14,7 +16,12 @@ done		@@ -14,7 +16,12 @@ done
14	ok=false	16	ok=false
15	while ! [ -L default ]; do	17	while ! [ -L default ]; do
16		18
17	- read t	19	+ if [ "$t_ini" = "" ]; then
		20	+ read t
		21	+ else
		22	+ t="$t_ini"
		23	+ t_ini=""
		24	+ fi
18	n=0	25	n=0
19	ls -1 \| while read theme; do	26	ls -1 \| while read theme; do
20	let n++	27	let n++