Bug 426953 - UX: Dropdown menu items (including context menu) should …

…show keyboard shortcuts if applicable --Signed-off-by: Elijah El-Haddad <elijahe@ca.ibm.com>
elijahe · Feb 3, 2014 · f73dd87 · f73dd87
1 parent 5ee3229
commit f73dd87
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 10 deletions.
diff --git a/bundles/org.eclipse.orion.client.ui/web/css/theme.css b/bundles/org.eclipse.orion.client.ui/web/css/theme.css
@@ -371,8 +371,8 @@ a.currentLocation:hover {
 }
 
 .dropdownArrowRight {
-	position: absolute;
-	right: 0;
+	float: right;
+	font-size: 12px;
 }
 
 .dropdownTrigger {
@@ -468,10 +468,9 @@ a.currentLocation:hover {
 
 .dropdownMenuItem, .dropdownMenuItem a {
 	display: inline-block;
-	vertical-align: baseline;
+	vertical-align: middle;
 	color: #555 !important;
-	padding: 0 5px 0;
-	line-height: 22px;
+	padding: 3px 5px;
 	cursor: pointer;
 	-webkit-touch-callout: none;
 	-webkit-user-select: none;
@@ -482,6 +481,19 @@ a.currentLocation:hover {
 	white-space: nowrap;
 }
 
+.dropdownMenuItem .dropdownKeyBinding {
+	color: grey !important; /* !important to override .dropdownMenuItem */
+	float: right;
+	font-size: 11px;
+	padding-left: 15px;
+	padding-right: 10px;
+}
+
+.dropdownMenuItem .dropdownCommandName {
+	float: left;
+	text-decoration: inherit; /* inherit hover decoration when inside an <a> */
+}
+
 .dropdownSelection {
 	background-color: #e6e6e6 !important;
 	border: 1px solid #ccc !important;

diff --git a/bundles/org.eclipse.orion.client.ui/web/orion/commandRegistry.js b/bundles/org.eclipse.orion.client.ui/web/orion/commandRegistry.js
@@ -944,7 +944,11 @@ define([
 								self._invoke(invocation);
 							};
 							if (renderType === "menu") { //$NON-NLS-0$
-								element = Commands.createCommandMenuItem(parent, command, invocation, null, onClick);
+								var bindingString = null;
+								if (keyBinding && keyBinding.keyBinding) {
+									bindingString = UIUtil.getUserKeyString(keyBinding.keyBinding);
+								}
+								element = Commands.createCommandMenuItem(parent, command, invocation, null, onClick, bindingString);
 							} else {
 								id = renderType + command.id + index;  //$NON-NLS-0$ // using the index ensures unique ids within the DOM when a command repeats for each item
 								element = Commands.createCommandItem(parent, command, invocation, id, null, renderType === "tool", onClick); //$NON-NLS-0$

diff --git a/bundles/org.eclipse.orion.client.ui/web/orion/commands.js b/bundles/org.eclipse.orion.client.ui/web/orion/commands.js
@@ -416,12 +416,22 @@ define(['require', 'orion/util', 'orion/webui/littlelib', 'orion/webui/dropdown'
 		return element;
 	}
 
-	function createCommandMenuItem(parent, command, commandInvocation, keyBinding, callback) {
+	function appendKeyBindingString(element, keyBindingString) {
+		var span = document.createElement("span"); //$NON-NLS-0$
+		span.classList.add("dropdownKeyBinding"); //$NON-NLS-0$
+		span.appendChild(document.createTextNode(keyBindingString));
+		element.appendChild(span);
+	}
+
+	function createCommandMenuItem(parent, command, commandInvocation, keyBinding, callback, keyBindingString) {
 		var element;
 		var dropdown = parent.dropdown;
 		if (command.hrefCallback) {
 			element = document.createElement("a"); //$NON-NLS-0$
-			element.appendChild(document.createTextNode(command.name));
+			var span = document.createElement("span");
+			span.appendChild(document.createTextNode(command.name));
+			span.classList.add("dropdownCommandName"); //$NON-NLS-0$
+			element.appendChild(span);
 			var href = command.hrefCallback.call(commandInvocation.handler, commandInvocation);
 			if (href.then){
 				href.then(function(l){
@@ -440,7 +450,10 @@ define(['require', 'orion/util', 'orion/webui/littlelib', 'orion/webui/dropdown'
 		} else {
 			element = document.createElement("span"); //$NON-NLS-0$
 			element.tabIndex = 0;
-			element.appendChild(document.createTextNode(command.name));
+			var span = document.createElement("span");
+			span.appendChild(document.createTextNode(command.name));
+			span.classList.add("dropdownCommandName"); //$NON-NLS-0$
+			element.appendChild(span);
 			var onClick = callback || command.callback;
 			if (onClick) {
 				command.onClick = onClick;
@@ -468,6 +481,9 @@ define(['require', 'orion/util', 'orion/webui/littlelib', 'orion/webui/dropdown'
 			});
 		}
 
+		if (keyBindingString) {
+			appendKeyBindingString(element, keyBindingString);
+		}
 		var li = document.createElement("li"); //$NON-NLS-0$
 		parent.appendChild(li);
 		li.appendChild(element); //$NON-NLS-0$

diff --git a/bundles/org.eclipse.orion.client.ui/web/orion/webui/submenutriggerbutton.html b/bundles/org.eclipse.orion.client.ui/web/orion/webui/submenutriggerbutton.html
@@ -1 +1 @@
-<li class="dropdownSubMenu"><span class="dropdownTrigger dropdownMenuItem" role="menuitem" tabindex="0">${ButtonText}<span class="dropdownArrowRight core-sprite-closedarrow"></span></span><ul class="dropdownMenu"></ul></li>
+<li class="dropdownSubMenu"><span class="dropdownTrigger dropdownMenuItem" role="menuitem" tabindex="0"><span class="dropdownCommandName">${ButtonText}</span><span class="dropdownArrowRight core-sprite-closedarrow"></span></span><ul class="dropdownMenu"></ul></li>