Added help for keyboard shortcuts.

apps/contacts/css/contacts.css

@@ -125,3 +125,12 @@ input[type="checkbox"] { width: 20px; height: 20px; vertical-align: bottom; }
 .typelist[type="button"] { float: left; max-width: 10em; border: 0; background-color: #fff; color: #bbb} /* for multiselect */
 .typelist[type="button"]:hover { color: #777; } /* for multiselect */
 .addresslist { clear: both; font-weight: bold; }
+#ninjahelp { position: absolute; bottom: 0; left: 0; right: 0; padding: 1em; margin: 1em; border: thin solid #eee; border-radius: 5px; background-color: #DBDBDB; opacity: 0.9; }
+#ninjahelp .close { position: absolute; top: 5px; right: 5px; height: 20px; width: 20px; }
+#ninjahelp h2, .help-section h3 { width: 100%; font-weight: bold; text-align: center; }
+#ninjahelp h2 { font-size: 1.4em; }
+.help-section { width: 45%; min-width: 35em; float: left; }
+.help-section h3 { font-size: 1.2em; }
+.help-section dl { width: 100%; float: left; clear: right; margin: 0; padding: 0; cursor: normal; }
+.help-section dt { display: table-cell; clear: left; float: left; width: 35%; margin: 0; padding: 0.2em; text-align: right; text-overflow: ellipsis; vertical-align: text-bottom; font-weight: bold: }
+.help-section dd { display: table-cell; clear: right; float: left; margin: 0; padding: 0.2em; white-space: nowrap; vertical-align: text-bottom; }

apps/contacts/js/contacts.js

@@ -1711,6 +1711,10 @@ $(document).ready(function(){
 	$('#contacts_newcontact').click(Contacts.UI.Card.editNew);
 	$('#contacts_newcontact').keydown(Contacts.UI.Card.editNew);
 
+	$('#ninjahelp .close').on('click keydown',function() {
+		$('#ninjahelp').hide();
+	});
+
 	$(document).on('keyup', function(event) {
 		console.log(event.which + ' ' + event.target.nodeName);
 		if(event.target.nodeName.toUpperCase() != 'BODY'
@@ -1721,8 +1725,13 @@ $(document).ready(function(){
 		/**
 		 * To add:
 		 * (Shift)n/p: next/prev addressbook
+		 * u (85): hide/show leftcontent
+		 * f (70): add field
 		 */
 		switch(event.which) {
+			case 27: // Esc
+				$('#ninjahelp').hide();
+				break;
 			case 46:
 				if(event.shiftKey) {
 					Contacts.UI.Card.delayedDelete();
@@ -1737,19 +1746,21 @@ $(document).ready(function(){
 			case 75: // k
 				Contacts.UI.Contacts.next();
 				break;
-			case 38: // up
 			case 65: // a
 				if(event.shiftKey) {
 					// add addressbook
+					Contacts.UI.notImplemented();
 					break;
 				}
 				Contacts.UI.Card.editNew();
 				break;
+			case 38: // up
 			case 74: // j
 				Contacts.UI.Contacts.previous();
 				break;
 			case 78: // n
 				// next addressbook
+				Contacts.UI.notImplemented();
 				break;
 			case 13: // Enter
 			case 79: // o
@@ -1760,16 +1771,13 @@ $(document).ready(function(){
 				break;
 			case 80: // p
 				// prev addressbook
+				Contacts.UI.notImplemented();
 				break;
 			case 82: // r
 				Contacts.UI.Contacts.update({cid:Contacts.UI.Card.id});
 				break;
 			case 191: // ?
-				console.log("Keyboard shorcuts:\nk or up key: Previous contact");
-				console.log("j or down key: Next contact");
-				console.log("o or Enter key: Expand/collapse");
-				console.log("n: New contact");
-				console.log("Shift-Delete: Delete current contact");
+				$('#ninjahelp').toggle('fast');
 				break;
 		}
 

apps/contacts/templates/index.php

@@ -32,6 +32,38 @@
 			echo $this->inc('part.no_contacts');
 		}
 	?>
+	<div class="hidden" id="ninjahelp">
+		<a class="close" tabindex="0" role="button">
+			<img class="svg" src="core/img/actions/delete.svg" alt="<?php echo $l->t('Close'); ?>" />
+		</a>
+		<h2><?php echo $l->t('Keyboard shortcuts'); ?></h2>
+		<div class="help-section">
+			<h3><?php echo $l->t('Navigation'); ?></h3>
+			<dl>
+				<dt>j/Down/Space</dt>
+				<dd><?php echo $l->t('Next contact in list'); ?></dd>
+				<dt>k/Up/Shift-Space</dt>
+				<dd><?php echo $l->t('Previous contact in list'); ?></dd>
+				<dt>o/Enter</dt>
+				<dd><?php echo $l->t('Expand/collapse current addressbook'); ?></dd>
+				<dt>n/p</dt>
+				<dd><?php echo $l->t('Next/previous addressbook'); ?></dd>
+			</dl>
+		</div>
+		<div class="help-section">
+			<h3><?php echo $l->t('Actions'); ?></h3>
+			<dl>
+				<dt>r</dt>
+				<dd><?php echo $l->t('Refresh contacts list'); ?></dd>
+				<dt>a</dt>
+				<dd><?php echo $l->t('Add new contact'); ?></dd>
+				<dt>Shift-a</dt>
+				<dd><?php echo $l->t('Add new addressbook'); ?></dd>
+				<dt>Shift-Delete</dt>
+				<dd><?php echo $l->t('Delete current contact'); ?></dd>
+			</dl>
+		</div>
+	</div>
 </div>
 <!-- Dialogs -->
 <div id="dialog_holder"></div>