From dfffbc78c36720ac557c1b121be89ebc67406d98 Mon Sep 17 00:00:00 2001
From: Reinier Balt <lrbalt@gmail.com>
Date: Thu, 19 Mar 2009 22:55:03 +0100
Subject: [PATCH] further enhance the context menu and fix showing of context
 menu on ie

---
 app/controllers/application.rb      |  6 +++++
 app/views/layouts/standard.html.erb | 10 +++++----
 app/views/todos/_todo.html.erb      | 12 +++++-----
 public/stylesheets/standard.css     | 11 +++++----
 public/stylesheets/superfish.css    | 35 +++++++++++++++++++++++++++++
 5 files changed, 60 insertions(+), 14 deletions(-)

diff --git a/app/controllers/application.rb b/app/controllers/application.rb
index 550a8fca..4e731527 100644
--- a/app/controllers/application.rb
+++ b/app/controllers/application.rb
@@ -30,6 +30,7 @@ class ApplicationController < ActionController::Base
   
   before_filter :set_session_expiration
   before_filter :set_time_zone
+  before_filter :set_zindex_counter
   prepend_before_filter :login_required
   prepend_before_filter :enable_mobile_content_negotiation
   after_filter :set_charset
@@ -262,5 +263,10 @@ class ApplicationController < ActionController::Base
   def set_time_zone
     Time.zone = current_user.prefs.time_zone if logged_in?
   end
+
+  def set_zindex_counter
+    # this counter can be used to handle the IE z-index bug
+    @z_index_counter = 10
+  end
   
 end
diff --git a/app/views/layouts/standard.html.erb b/app/views/layouts/standard.html.erb
index 3590c64a..7bc4d623 100644
--- a/app/views/layouts/standard.html.erb
+++ b/app/views/layouts/standard.html.erb
@@ -26,7 +26,6 @@
       href="<%= search_plugin_path %>" />
 
 <script type="text/javascript">
-  var sfLastUL;
 jQuery(document).ready(function() {
   jQuery('ul.sf-menu').superfish({
     delay: 250,
@@ -36,13 +35,16 @@ jQuery(document).ready(function() {
     speed: 'fast'
   });
   jQuery('ul.sf-item-menu').superfish({
-    delay: 250,
+    delay: 100,
     animation:   {opacity:'show',height:'show'},
     autoArrows: false,
     dropShadows: false,
     speed: 'fast',
-    onShow: function() {
-                sfLastUL = this;                
+    onBeforeShow: function() {
+                $(this.parent().parent().parent()).addClass("sf-item-selected");
+        },
+    onHide: function() {
+                $(this.parent().parent().parent()).removeClass("sf-item-selected");
         }
   });
   Nifty("div#todo_new_action_container","normal");
diff --git a/app/views/todos/_todo.html.erb b/app/views/todos/_todo.html.erb
index ac20eb32..95698714 100644
--- a/app/views/todos/_todo.html.erb
+++ b/app/views/todos/_todo.html.erb
@@ -5,17 +5,17 @@ suppress_project ||= false
 suppress_edit_button ||= false
 parameters = "_source_view=#{@source_view}"
 parameters += "&_tag_name=#{@tag_name}" if @source_view == 'tag'
+@z_index_counter = @z_index_counter - 1  # for IE z-index bug
 %>
 <div id="<%= dom_id(todo) %>" class="item-container">
   <div id="<%= dom_id(todo, 'line') %>">
     <%= remote_star_icon %>
     <%= remote_toggle_checkbox unless source_view_is :deferred %>
-    <ul class="sf-menu sf-item-menu"><li><%= image_tag "downarrow.png" %><ul id="ul<%= dom_id(todo) %>">
-        <li><%= link_to_remote("Edit", :url => {:controller => 'todos', :action => 'edit', :id => @todo.id}, :method => 'get', :with => "'#{parameters}'", 
-  :before => "$('ul#{dom_id(todo)}').hide(); itemContainer = this.up('.item-container'); itemContainer.startWaiting()", :complete => "itemContainer.stopWaiting();") %></li>
-        <li><%= link_to_remote "Delete", :url => {:controller => 'todos', :action => 'destroy', :id => @todo.id}, :method => 'delete', :with => "'#{parameters}'", :before => "itemContainer = this.up('.item-container'); itemContainer.startWaiting()", :complete => "itemContainer.stopWaiting();" %></li>
-        <li><%= link_to_remote "Defer 1 day", :url => {:controller => 'todos', :action => 'defer', :id => @todo.id, :days => 1, :_source_view => (@source_view.underscore.gsub(/\s+/,'_') rescue "")}, :before => "itemContainer = this.up('.item-container'); itemContainer.startWaiting()", :complete => "itemContainer.stopWaiting();" %></li>
-        <li><%= link_to_remote "Defer 7 days", :url => {:controller => 'todos', :action => 'defer', :id => @todo.id, :days => 7, :_source_view => (@source_view.underscore.gsub(/\s+/,'_') rescue "")}, :before => "itemContainer = this.up('.item-container'); itemContainer.startWaiting()", :complete => "itemContainer.stopWaiting();" %></li>
+    <ul class="sf-menu sf-item-menu"><li style="z-index:<%=@z_index_counter%>"><%= image_tag "downarrow.png", :alt=> "" %><ul id="ul<%= dom_id(todo) %>">
+        <li><%= link_to_remote("Edit", :url => {:controller => 'todos', :action => 'edit', :id => @todo.id}, :method => 'get', :with => "'#{parameters}'", :before => "$('ul#{dom_id(todo)}').hide(); var itemContainer = this.up('.item-container'); itemContainer.startWaiting()", :complete => "itemContainer.stopWaiting();") %></li>
+        <li><%= link_to_remote "Delete", :url => {:controller => 'todos', :action => 'destroy', :id => @todo.id}, :method => 'delete', :with => "'#{parameters}'", :before => "$('ul#{dom_id(todo)}').hide(); var itemContainer = this.up('.item-container'); itemContainer.startWaiting()", :complete => "itemContainer.stopWaiting();" %></li>
+        <li><%= link_to_remote "Defer 1 day", :url => {:controller => 'todos', :action => 'defer', :id => @todo.id, :days => 1, :_source_view => (@source_view.underscore.gsub(/\s+/,'_') rescue "")}, :before => "$('ul#{dom_id(todo)}').hide(); var itemContainer = this.up('.item-container'); itemContainer.startWaiting()", :complete => "itemContainer.stopWaiting();" %></li>
+        <li><%= link_to_remote "Defer 7 days", :url => {:controller => 'todos', :action => 'defer', :id => @todo.id, :days => 7, :_source_view => (@source_view.underscore.gsub(/\s+/,'_') rescue "")}, :before => "$('ul#{dom_id(todo)}').hide(); var itemContainer = this.up('.item-container'); itemContainer.startWaiting()", :complete => "itemContainer.stopWaiting();" %></li>
     </ul></ul>
     <div class="description<%= staleness_class( todo ) %>">
       <%= date_span -%>
diff --git a/public/stylesheets/standard.css b/public/stylesheets/standard.css
index 51fb3068..7066e163 100644
--- a/public/stylesheets/standard.css
+++ b/public/stylesheets/standard.css
@@ -357,6 +357,10 @@ div.item-container {
     clear: both;
 }
 
+.sf-item-selected {
+    background: #ddd;
+}
+
 a.recurring_icon {
     vertical-align: middle;
     background-color: transparent;    
@@ -375,13 +379,12 @@ input.item-checkbox {
     vertical-align: middle;
 }
 
-.description {
-    margin-left: 50px;
-    position:relative
+.description, .stale_l1, .stale_l2, .stale_l3 {
+    margin-left: 60px;
+    position:relative;    
 }
 
 .stale_l1, .stale_l2, .stale_l3 {
-    margin-left: 82px;
     padding-left: 3px;
 }
 
diff --git a/public/stylesheets/superfish.css b/public/stylesheets/superfish.css
index 2bbdee15..767999f0 100644
--- a/public/stylesheets/superfish.css
+++ b/public/stylesheets/superfish.css
@@ -13,16 +13,24 @@
 	top:			-999em;
 	width:			12em; /* left offset of submenus need to match (see below) */
 }
+
+.sf-item-menu ul {
+    width: 8em;
+    z-index: 99;
+}
+
 .sf-menu ul li {
 	width:			100%;
 }
 .sf-menu li:hover {
 	visibility:		inherit; /* fixes IE7 'sticky bug' */
 }
+
 .sf-menu li {
 	float:			left;
 	position:		relative;
 }
+
 .sf-menu a {
 	display:		block;
 	position:		relative;
@@ -63,6 +71,7 @@ ul.sf-menu li li li.sfHover ul {
 	text-decoration:none;
     line-height: 14px;
 }
+
 .sf-menu a, .sf-menu a:visited, .sf-menu ul li a  { /* visited pseudo selector so IE6 applies text colour*/
     font-weight: bold;
     margin-left: 10px;
@@ -71,11 +80,22 @@ ul.sf-menu li li li.sfHover ul {
     border-bottom: 4px solid #000;  /* make sure there is enough room for the solid */
 }
 
+.sf-item-menu a, .sf-item-menu a:visited, .sf-item-menu ul li a {
+    font-weight: normal;
+    line-height: 10px;
+    color: #000;
+    border-bottom: none;
+}
+
 .sf-menu li li, .sf-menu li ul {
     margin: 0;
 	background:		#000000;
 }
 
+.sf-item-menu li li, .sf-item-menu li ul {
+    background: #CCC;
+}
+
 .sf-menu li ul {
     margin-top: -18px;
 	padding: 0 8px 9px 0;
@@ -90,6 +110,7 @@ ul.sf-menu li li li.sfHover ul {
 	-moz-border-radius-topright: 8px;
 	-webkit-border-top-right-radius: 8px;
 	-webkit-border-top-left-radius: 8px;
+    border: 2px solid #000;
 }
 
 .sf-menu li ul li, .sf-menu li li {
@@ -98,6 +119,10 @@ ul.sf-menu li li li.sfHover ul {
     font-size: 1em;
 }
 
+.sf-item-menu li ul li, .sf-item-menu li li {
+    font-size: 0.8em;
+}
+
 .sf-menu li li li {
 	background:		#000000;
 }
@@ -107,11 +132,21 @@ ul.sf-menu li li li.sfHover ul {
     color: #CCC;
 }
 
+.sf-item-menu li:hover, .sf-item-menu li.sfHover,
+.sf-item-menu a:focus, .sf-item-menu a:hover, .sf-item-menu a:active {
+    color: #000;
+    font-weight: bold;
+}
+
 .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
     border-bottom: 4px solid #CCC;
     background: transparent;
 }
 
+.sf-item-menu a:focus, .sf-item-menu a:hover, .sf-item-menu a:active {
+    border-bottom: none;
+}
+
 /*** arrows **/
 .sf-menu a.sf-with-ul {
 	padding-right: 	2.25em;