ActionItem152: assets menu e outras coisinhas...

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

ActionItem152: assets menu e outras coisinhas...
git-svn-id: https://svn.colivre.coop.br/svn/noosfero/trunk@1260 3f533792-8f58-4932-b0fe-aaf55b0a4547
AurelioAHeckert
1 parent fc5d7084
Showing 15 changed files with 163 additions and 14 deletions Show diff stats
app/helpers/application_helper.rb
app/helpers/assets_helper.rb
app/helpers/boxes_helper.rb
app/views/box_organizer/index.rhtml
app/views/shared/categories_menu.rhtml
public/designs/icons/default/album-HC.gif
public/designs/icons/default/blog-HC.gif
public/designs/icons/default/enterprise-HC.gif
public/designs/icons/default/menu-without-ico-HC.gif
public/designs/icons/default/product-HC.gif
public/designs/icons/default/style.css
public/designs/templates/default/stylesheets/style.css
public/img-source/assets-menu.xcf
public/javascripts/assets-menu.js
public/stylesheets/menu.css
@@ -10,6 +10,8 @@ module ApplicationHelper
   include FormsHelper
+  include AssetsHelper
+  
   # Displays context help. You can pass the content of the help message as the
   # first parameter or using template code inside a block passed to this
   # method. *Note*: the block is ignored if <tt>content</tt> is not
@@ -0,0 +1,15 @@
+module AssetsHelper
+
+  def generate_assets_menu()
+    '
+      <li><a href="#"><span class="ico-menu-blog"></span> Blogs</a></li>
+      <li><a href="#"><span class="ico-menu-album"></span> Albuns</a></li>
+      <li><a href="#"><span class="ico-menu-product"></span> Produtos</a></li>
+      <li><a href="#"><span class="ico-menu-enterprise"></span> Empreendimentos</a></li>
+      <li><a href="#"><span class="ico-menu-"></span> bli 5</a></li>
+      <li><a href="#"><span class="ico-menu-"></span> bli 6</a></li>
+      <li><a href="#"><span class="ico-menu-"></span> bli 7</a></li>
+    '
+  end
+
+end
@@ -20,7 +20,7 @@ module BoxesHelper
   def display_boxes(holder, main_content)
     boxes = holder.boxes.first(holder.boxes_limit)
-    content = boxes.map { |item| display_box(item, main_content) }.join("\n")
+    content = boxes.reverse.map { |item| display_box(item, main_content) }.join("\n")
     content = main_content if (content.blank?)
     content_tag('div', content, :class => 'boxes', :id => 'boxes' )
   end
-<h2><%= _('Organizing visual design')%></h2>
+<h1><%= _('Organizing visual design')%></h1>
 <% button_bar do %>
   <%= lightbox_button('add', _('Add a block'), { :action => 'add_block' }) %>
-<ul id='cat_menu'>
+<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)) %>>
+    <li id="category<%= item.display_color %>"<%= ' class="active"' if (@category && (@category.top_ancestor == item)) %>>
       <%= item.name %>
       <ul>
         <% item.children.each do |child| %>
@@ -10,4 +10,15 @@
       </ul>
     </li>
   <% end %>
-</ul>
+</ul><!-- fim id="cat_menu" -->
+
+<div id="assets_menu">
+  <div id="assets_menu_list">
+    <ul id="assets_menu_ul">
+      <%= generate_assets_menu %>
+    </ul>
+  </div><!-- fim id="assets_menu_list" -->
+  <div id="assets_menu_layout_iten"></div>
+</div><!-- fim id="assets_menu" -->
+<%= javascript_include_tag 'assets-menu' %>
+
@@ -19,4 +19,8 @@
 .icon-search  { background-image: url(gnome-search.png);       }
 .icon-ok      { background-image: url(gtk-ok.png);             }
 .icon-login   { background-image: url(key-HC.gif);             }
-
+.ico-menu-           { background-image: url(menu-without-ico-HC.gif) }
+.ico-menu-blog       { background-image: url(blog-HC.gif);            }
+.ico-menu-album      { background-image: url(album-HC.gif);           }
+.ico-menu-product    { background-image: url(product-HC.gif);         }
+.ico-menu-enterprise { background-image: url(enterprise-HC.gif);      }
@@ -9,17 +9,12 @@
 }
 .box-2 {
-  position: absolute;
-  top: 0px;
-  left: 0px;
+  float: left;
   width: 270px;
-  margin-left: 10px;
 }
 .box-3 {
-  position: absolute;
-  top: 0px;
-  right: 10px;
+  float: right;
   width: 200px;
 }
@@ -0,0 +1,36 @@
+
+var amul = document.getElementById( "assets_menu_ul" );
+amul.h = 56;
+amul.minSize = 56;
+amul.maxSize = amul.getElementsByTagName("li").length * 19;
+window.amul = amul;
+
+amul.onmouseover = function () {
+  clearTimeout( this.timeoutClose );
+  if ( this.h < this.maxSize ) {
+    this.h += 10;
+    this.style.height = this.h +"px";
+    this.timeoutOpen = setTimeout( "window.amul.onmouseover()", 33 );
+  } else {
+    this.h = this.maxSize;
+    this.style.height = this.h +"px";
+  }
+}
+
+amul.onmouseout = function ( doIt ) {
+  clearTimeout( this.timeoutOpen );
+  if ( doIt ) {
+    if ( this.h > this.minSize ) {
+      this.h -= 10;
+      this.style.height = this.h +"px";
+      this.timeoutClose = setTimeout( "window.amul.onmouseout(true)", 33 );
+    } else {
+      this.h = this.minSize;
+      this.style.height = this.h +"px";
+    }
+  } else {
+    // Work arround IE bug
+    this.timeoutClose = setTimeout( "window.amul.onmouseout(true)", 200 );
+  }
+}
+
@@ -177,7 +177,7 @@ body.category4 .linkSubMenu { background-image: url(/images/borda-esq-aba-vermel
   top: 22px;
   left: 0px;
   right: 0px;
-  padding: 0px 0px 2px 20px;
+  padding: 0px 170px 2px 20px;
   margin: 0px;
   border: 1px solid #FFF;
   border-top: none;
@@ -196,3 +196,89 @@ body.category4 .linkSubMenu { background-image: url(/images/borda-esq-aba-vermel
   padding-right: 15px;
 }
+/* * * Assets Menu * * * * * * * * * * * */
+
+#assets_menu {
+  position: absolute;
+  top: 21px;
+  right: 0px;
+  padding: 0px 0px 0px 10px;
+}
+
+#assets_menu_layout_iten {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 11px;
+  height: 11px;
+  overflow: hidden;
+  background: url(/images/top-bar/assets-menu-top-azul.gif);
+}
+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)     }
+body.category3 #assets_menu_layout_iten { background: url(/images/top-bar/assets-menu-top-lilas.gif)     }
+body.category4 #assets_menu_layout_iten { background: url(/images/top-bar/assets-menu-top-vermelho.gif)  }
+
+#assets_menu_list {
+  padding: 2px 0px 6px 5px;
+  background: url(/images/top-bar/assets-menu-bg-azul.gif) 0% 100%;
+}
+body.category1 #assets_menu_list { background-image: url(/images/top-bar/assets-menu-bg-laranja.gif)   }
+body.category2 #assets_menu_list { background-image: url(/images/top-bar/assets-menu-bg-verde.gif)     }
+body.category3 #assets_menu_list { background-image: url(/images/top-bar/assets-menu-bg-lilas.gif)     }
+body.category4 #assets_menu_list { background-image: url(/images/top-bar/assets-menu-bg-vermelho.gif)  }
+
+#assets_menu ul {
+  margin: 0px;
+  padding: 0px;
+  overflow: hidden;
+  height: 56px;
+  width: 170px;
+  max-width: 165px;
+}
+
+#assets_menu li {
+  margin: 0px;
+  padding: 1px 0px 0px 0px;
+  list-style: none;
+}
+
+#assets_menu a {
+  font-size: 12px;
+  font-weight: bold;
+  text-decoration: none;
+  color: #B8CFE7;
+  display: block;
+  padding-left: 0px;
+  height: 18px;
+}
+body.category1 #assets_menu a { color: #FDD79E }
+body.category2 #assets_menu a { color: #C4F099 }
+body.category3 #assets_menu a { color: #D6BFD3 }
+body.category4 #assets_menu a { color: #F79494 }
+#assets_menu a:hover {
+  background: #3465A4;
+  color: #FFF;
+}
+body.category1 #assets_menu a:hover { background: #F57900; color: #FFF }
+body.category2 #assets_menu a:hover { background: #61B60E; color: #FFF }
+body.category3 #assets_menu a:hover { background: #75507B; color: #FFF }
+body.category4 #assets_menu a:hover { background: #CC0000; color: #FFF }
+
+#assets_menu a span {
+  display: block;
+  width: 18px;
+  height: 18px;
+  float: left;
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  margin-right: 2px;
+  opacity: 0.7;
+	filter: alpha(opacity=70);
+}
+#assets_menu a:hover span {
+  opacity: 1;
+	filter: alpha(opacity=100);
+}
+
+
	@@ -10,6 +10,8 @@ module ApplicationHelper		@@ -10,6 +10,8 @@ module ApplicationHelper
10		10
11	include FormsHelper	11	include FormsHelper
12		12
		13	+ include AssetsHelper
		14	+
13	# Displays context help. You can pass the content of the help message as the	15	# Displays context help. You can pass the content of the help message as the
14	# first parameter or using template code inside a block passed to this	16	# first parameter or using template code inside a block passed to this
15	# method. Note: the block is ignored if <tt>content</tt> is not	17	# method. Note: the block is ignored if <tt>content</tt> is not
@@ -0,0 +1,15 @@		@@ -0,0 +1,15 @@
	1	+module AssetsHelper
	2	+
	3	+ def generate_assets_menu()
	4	+ '
	5	+ <li><a href="#"><span class="ico-menu-blog"></span> Blogs</a></li>
	6	+ <li><a href="#"><span class="ico-menu-album"></span> Albuns</a></li>
	7	+ <li><a href="#"><span class="ico-menu-product"></span> Produtos</a></li>
	8	+ <li><a href="#"><span class="ico-menu-enterprise"></span> Empreendimentos</a></li>
	9	+ <li><a href="#"><span class="ico-menu-"></span> bli 5</a></li>
	10	+ <li><a href="#"><span class="ico-menu-"></span> bli 6</a></li>
	11	+ <li><a href="#"><span class="ico-menu-"></span> bli 7</a></li>
	12	+ '
	13	+ end
	14	+
	15	+end
	@@ -20,7 +20,7 @@ module BoxesHelper		@@ -20,7 +20,7 @@ module BoxesHelper
20		20
21	def display_boxes(holder, main_content)	21	def display_boxes(holder, main_content)
22	boxes = holder.boxes.first(holder.boxes_limit)	22	boxes = holder.boxes.first(holder.boxes_limit)
23	- content = boxes.map { \|item\| display_box(item, main_content) }.join("\n")	23	+ content = boxes.reverse.map { \|item\| display_box(item, main_content) }.join("\n")
24	content = main_content if (content.blank?)	24	content = main_content if (content.blank?)
25	content_tag('div', content, :class => 'boxes', :id => 'boxes' )	25	content_tag('div', content, :class => 'boxes', :id => 'boxes' )
26	end	26	end
1	-<h2><%= _('Organizing visual design')%></h2>	1	+<h1><%= _('Organizing visual design')%></h1>
2		2
3	<% button_bar do %>	3	<% button_bar do %>
4	<%= lightbox_button('add', _('Add a block'), { :action => 'add_block' }) %>	4	<%= lightbox_button('add', _('Add a block'), { :action => 'add_block' }) %>
1	-<ul id='cat_menu'>	1	+<ul id="cat_menu">
2	<%= link_to( "<span>"+ @environment.name() +"</span>", {:controller=>"home"}, :id=>"menu_link_to_envhome", :title=>@environment.name) %>	2	<%= link_to( "<span>"+ @environment.name() +"</span>", {:controller=>"home"}, :id=>"menu_link_to_envhome", :title=>@environment.name) %>
3	<% @environment.display_categories.each do \|item\| %>	3	<% @environment.display_categories.each do \|item\| %>
4	- <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)) %>>
5	<%= item.name %>	5	<%= item.name %>
6	<ul>	6	<ul>
7	<% item.children.each do \|child\| %>	7	<% item.children.each do \|child\| %>
	@@ -10,4 +10,15 @@		@@ -10,4 +10,15 @@
10	</ul>	10	</ul>
11	</li>	11	</li>
12	<% end %>	12	<% end %>
13	-</ul>	13	+</ul><!-- fim id="cat_menu" -->
		14	+
		15	+<div id="assets_menu">
		16	+ <div id="assets_menu_list">
		17	+ <ul id="assets_menu_ul">
		18	+ <%= generate_assets_menu %>
		19	+ </ul>
		20	+ </div><!-- fim id="assets_menu_list" -->
		21	+ <div id="assets_menu_layout_iten"></div>
		22	+</div><!-- fim id="assets_menu" -->
		23	+<%= javascript_include_tag 'assets-menu' %>
		24	+
	@@ -19,4 +19,8 @@		@@ -19,4 +19,8 @@
19	.icon-search { background-image: url(gnome-search.png); }	19	.icon-search { background-image: url(gnome-search.png); }
20	.icon-ok { background-image: url(gtk-ok.png); }	20	.icon-ok { background-image: url(gtk-ok.png); }
21	.icon-login { background-image: url(key-HC.gif); }	21	.icon-login { background-image: url(key-HC.gif); }
22	-	22	+.ico-menu- { background-image: url(menu-without-ico-HC.gif) }
		23	+.ico-menu-blog { background-image: url(blog-HC.gif); }
		24	+.ico-menu-album { background-image: url(album-HC.gif); }
		25	+.ico-menu-product { background-image: url(product-HC.gif); }
		26	+.ico-menu-enterprise { background-image: url(enterprise-HC.gif); }
@@ -0,0 +1,36 @@		@@ -0,0 +1,36 @@
	1	+
	2	+var amul = document.getElementById( "assets_menu_ul" );
	3	+amul.h = 56;
	4	+amul.minSize = 56;
	5	+amul.maxSize = amul.getElementsByTagName("li").length * 19;
	6	+window.amul = amul;
	7	+
	8	+amul.onmouseover = function () {
	9	+ clearTimeout( this.timeoutClose );
	10	+ if ( this.h < this.maxSize ) {
	11	+ this.h += 10;
	12	+ this.style.height = this.h +"px";
	13	+ this.timeoutOpen = setTimeout( "window.amul.onmouseover()", 33 );
	14	+ } else {
	15	+ this.h = this.maxSize;
	16	+ this.style.height = this.h +"px";
	17	+ }
	18	+}
	19	+
	20	+amul.onmouseout = function ( doIt ) {
	21	+ clearTimeout( this.timeoutOpen );
	22	+ if ( doIt ) {
	23	+ if ( this.h > this.minSize ) {
	24	+ this.h -= 10;
	25	+ this.style.height = this.h +"px";
	26	+ this.timeoutClose = setTimeout( "window.amul.onmouseout(true)", 33 );
	27	+ } else {
	28	+ this.h = this.minSize;
	29	+ this.style.height = this.h +"px";
	30	+ }
	31	+ } else {
	32	+ // Work arround IE bug
	33	+ this.timeoutClose = setTimeout( "window.amul.onmouseout(true)", 200 );
	34	+ }
	35	+}
	36	+
	@@ -177,7 +177,7 @@ body.category4 .linkSubMenu { background-image: url(/images/borda-esq-aba-vermel		@@ -177,7 +177,7 @@ body.category4 .linkSubMenu { background-image: url(/images/borda-esq-aba-vermel
177	top: 22px;	177	top: 22px;
178	left: 0px;	178	left: 0px;
179	right: 0px;	179	right: 0px;
180	- padding: 0px 0px 2px 20px;	180	+ padding: 0px 170px 2px 20px;
181	margin: 0px;	181	margin: 0px;
182	border: 1px solid #FFF;	182	border: 1px solid #FFF;
183	border-top: none;	183	border-top: none;
	@@ -196,3 +196,89 @@ body.category4 .linkSubMenu { background-image: url(/images/borda-esq-aba-vermel		@@ -196,3 +196,89 @@ body.category4 .linkSubMenu { background-image: url(/images/borda-esq-aba-vermel
196	padding-right: 15px;	196	padding-right: 15px;
197	}	197	}
198		198
		199	+/* * * Assets Menu * * * * * * * * * * * */
		200	+
		201	+#assets_menu {
		202	+ position: absolute;
		203	+ top: 21px;
		204	+ right: 0px;
		205	+ padding: 0px 0px 0px 10px;
		206	+}
		207	+
		208	+#assets_menu_layout_iten {
		209	+ position: absolute;
		210	+ top: 0px;
		211	+ left: 0px;
		212	+ width: 11px;
		213	+ height: 11px;
		214	+ overflow: hidden;
		215	+ background: url(/images/top-bar/assets-menu-top-azul.gif);
		216	+}
		217	+body.category1 #assets_menu_layout_iten { background: url(/images/top-bar/assets-menu-top-laranja.gif) }
		218	+body.category2 #assets_menu_layout_iten { background: url(/images/top-bar/assets-menu-top-verde.gif) }
		219	+body.category3 #assets_menu_layout_iten { background: url(/images/top-bar/assets-menu-top-lilas.gif) }
		220	+body.category4 #assets_menu_layout_iten { background: url(/images/top-bar/assets-menu-top-vermelho.gif) }
		221	+
		222	+#assets_menu_list {
		223	+ padding: 2px 0px 6px 5px;
		224	+ background: url(/images/top-bar/assets-menu-bg-azul.gif) 0% 100%;
		225	+}
		226	+body.category1 #assets_menu_list { background-image: url(/images/top-bar/assets-menu-bg-laranja.gif) }
		227	+body.category2 #assets_menu_list { background-image: url(/images/top-bar/assets-menu-bg-verde.gif) }
		228	+body.category3 #assets_menu_list { background-image: url(/images/top-bar/assets-menu-bg-lilas.gif) }
		229	+body.category4 #assets_menu_list { background-image: url(/images/top-bar/assets-menu-bg-vermelho.gif) }
		230	+
		231	+#assets_menu ul {
		232	+ margin: 0px;
		233	+ padding: 0px;
		234	+ overflow: hidden;
		235	+ height: 56px;
		236	+ width: 170px;
		237	+ max-width: 165px;
		238	+}
		239	+
		240	+#assets_menu li {
		241	+ margin: 0px;
		242	+ padding: 1px 0px 0px 0px;
		243	+ list-style: none;
		244	+}
		245	+
		246	+#assets_menu a {
		247	+ font-size: 12px;
		248	+ font-weight: bold;
		249	+ text-decoration: none;
		250	+ color: #B8CFE7;
		251	+ display: block;
		252	+ padding-left: 0px;
		253	+ height: 18px;
		254	+}
		255	+body.category1 #assets_menu a { color: #FDD79E }
		256	+body.category2 #assets_menu a { color: #C4F099 }
		257	+body.category3 #assets_menu a { color: #D6BFD3 }
		258	+body.category4 #assets_menu a { color: #F79494 }
		259	+#assets_menu a:hover {
		260	+ background: #3465A4;
		261	+ color: #FFF;
		262	+}
		263	+body.category1 #assets_menu a:hover { background: #F57900; color: #FFF }
		264	+body.category2 #assets_menu a:hover { background: #61B60E; color: #FFF }
		265	+body.category3 #assets_menu a:hover { background: #75507B; color: #FFF }
		266	+body.category4 #assets_menu a:hover { background: #CC0000; color: #FFF }
		267	+
		268	+#assets_menu a span {
		269	+ display: block;
		270	+ width: 18px;
		271	+ height: 18px;
		272	+ float: left;
		273	+ background-repeat: no-repeat;
		274	+ background-position: 50% 50%;
		275	+ margin-right: 2px;
		276	+ opacity: 0.7;
		277	+ filter: alpha(opacity=70);
		278	+}
		279	+#assets_menu a:hover span {
		280	+ opacity: 1;
		281	+ filter: alpha(opacity=100);
		282	+}
		283	+
		284	+