Added AJAX based context menu on the project issue list that provide shortcuts for editing, re-assigning, changing the status or the priority, moving or deleting an issue.

The context menu shows up when right-clicking an issue (Opera users have to use Ctrl + left-click instead since right-click can't be reassigned for this browser).
Works with Firefox 2, IE 7 (not perfect), Opera 9 and Safari 2. IE 6 doesn't display submenus.

git-svn-id: http://redmine.rubyforge.org/svn/trunk@872 e93f8b46-1217-0410-a6f0-8f06a7374b81

4 files changed, 99 insertions, 2 deletions

diff --git a/public/images/sub.gif b/public/images/sub.gif
new file mode 100644
index 000000000..52e4065d5
--- /dev/null
+++ b/public/images/sub.gif
diff --git a/public/javascripts/context_menu.js b/public/javascripts/context_menu.js
new file mode 100644
index 000000000..a6e39c512
--- /dev/null
+++ b/public/javascripts/context_menu.js
@@ -0,0 +1,44 @@
+ContextMenu = Class.create();
+ContextMenu.prototype = {
+	initialize: function (options) {
+		this.options = Object.extend({selector: '.hascontextmenu'}, options || { });
+		
+		Event.observe(document, 'click', function(e){
+		    var t = Event.findElement(e, 'a');
+		    if ((t != document) && (Element.hasClassName(t, 'disabled') || Element.hasClassName(t, 'submenu'))) {
+                Event.stop(e);
+		    } else {
+       			$('context-menu').hide();
+    			if (this.selection) {
+                    this.selection.removeClassName('context-menu-selection');
+    			}
+			}
+			
+		}.bind(this));
+		
+		$$(this.options.selector).invoke('observe', (window.opera ? 'click' : 'contextmenu'), function(e){
+			if (window.opera && !e.ctrlKey) {
+				return;
+			}
+			this.show(e);
+		}.bind(this));
+		
+	},
+	show: function(e) {
+		Event.stop(e);
+		Element.hide('context-menu');
+		if (this.selection) {
+		 this.selection.removeClassName('context-menu-selection');
+		}
+		$('context-menu').style['left'] = (Event.pointerX(e) + 'px');
+		$('context-menu').style['top'] = (Event.pointerY(e) + 'px');		
+		Element.update('context-menu', '');
+
+		var tr = Event.findElement(e, 'tr');
+		tr.addClassName('context-menu-selection');
+		this.selection = tr;
+		var id = tr.id.substring(6, tr.id.length);
+		/* TODO: do not hard code path */
+		new Ajax.Updater('context-menu', '../../issues/context_menu/' + id, {asynchronous:true, evalScripts:true, onComplete:function(request){Effect.Appear('context-menu', {duration: 0.20})}})		
+	}
+}
diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index cf0c3baf5..d1041f162 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -42,7 +42,7 @@ h4, .wiki h3 {font-size: 12px;padding: 2px 10px 1px 0px;margin-bottom: 5px; bord
 #sidebar hr{ width: 100%; margin: 0 auto; height: 1px; background: #ccc; border: 0; }
 * html #sidebar hr{ width: 95%; position: relative; left: -6px; color: #ccc; }
 
-#content { width: 80%; background: url(../images/contentbg.png) repeat-x; background-color: #fff; margin: 0px; border-right: 1px solid #ddd; padding: 6px 10px 10px 10px; position: relative; z-index: 10; height:600px; min-height: 600px;}
+#content { width: 80%; background: url(../images/contentbg.png) repeat-x; background-color: #fff; margin: 0px; border-right: 1px solid #ddd; padding: 6px 10px 10px 10px; z-index: 10; height:600px; min-height: 600px;}
 * html #content{ width: 80%; padding-left: 0; margin-top: 0px; padding: 6px 10px 10px 10px;}
 html>body #content {
 height: auto;
@@ -154,7 +154,7 @@ width: 200px;
 div.attachments p { margin:4px 0 2px 0; }
 
 /***** Flash & error messages ****/
-#errorExplanation, div.flash, div.nodata {
+#errorExplanation, div.flash, .nodata {
     padding: 4px 4px 4px 30px;
     margin-bottom: 12px;
 	font-size: 1.1em;
@@ -454,6 +454,7 @@ vertical-align: middle;
 .icon-lock  { background-image: url(../images/locked.png); }
 .icon-unlock  { background-image: url(../images/unlock.png); }
 .icon-note  { background-image: url(../images/note.png); }
+.icon-checked  { background-image: url(../images/true.png); }
 
 .icon22-projects { background-image: url(../images/22x22/projects.png); }
 .icon22-users { background-image: url(../images/22x22/users.png); }
diff --git a/public/stylesheets/context_menu.css b/public/stylesheets/context_menu.css
new file mode 100644
index 000000000..52cac79ee
--- /dev/null
+++ b/public/stylesheets/context_menu.css
@@ -0,0 +1,52 @@
+#context-menu { position: absolute; }
+
+#context-menu ul, #context-menu li, #context-menu a {
+	display:block;
+	margin:0;
+	padding:0;
+	border:0;
+}
+
+#context-menu ul {
+	width:150px;
+	border-top:1px solid #ddd;
+	border-left:1px solid #ddd;
+	border-bottom:1px solid #777;
+	border-right:1px solid #777;
+	background:white;
+	list-style:none;
+}
+
+#context-menu li {
+	position:relative;
+	padding:1px;
+	z-index:9;
+}
+#context-menu li.folder ul {
+	position:absolute;
+	left:128px; /* IE */
+	top:-2px;
+}
+#context-menu li.folder>ul { left:148px; }
+
+#context-menu a {
+	border:1px solid white;
+	text-decoration:none;
+	background-repeat: no-repeat;
+	background-position: 1px 50%;
+	padding: 2px 0px 2px 20px;
+	width:100%; /* IE */
+}
+#context-menu li>a { width:auto; } /* others */
+#context-menu a.disabled, #context-menu a.disabled:hover {color: #ccc;}
+#context-menu li a.submenu { background:url("../images/sub.gif") right no-repeat; }
+#context-menu a:hover { border-color:gray; background-color:#eee; color:#2A5685; }
+#context-menu li.folder a:hover { background-color:#eee; }	
+#context-menu li.folder:hover { z-index:10; }		
+#context-menu ul ul, #context-menu  li:hover ul ul { display:none; }
+#context-menu li:hover ul, #context-menu li:hover li:hover ul {	display:block; }
+
+/* selected element */
+.context-menu-selection { background-color:#507AAA !important; color:#f8f8f8 !important; }
+.context-menu-selection a, .context-menu-selection a:hover { color:#f8f8f8 !important; }
+.context-menu-selection:hover { background-color:#507AAA !important; color:#f8f8f8  !important; }