diff options
| -rw-r--r-- | apps/contacts/css/contacts.css | 9 | ||||
| -rw-r--r-- | apps/contacts/js/contacts.js | 20 | ||||
| -rw-r--r-- | apps/contacts/templates/index.php | 32 |
3 files changed, 55 insertions, 6 deletions
diff --git a/apps/contacts/css/contacts.css b/apps/contacts/css/contacts.css index 927e7309807..ddae27da211 100644 --- a/apps/contacts/css/contacts.css +++ b/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; } diff --git a/apps/contacts/js/contacts.js b/apps/contacts/js/contacts.js index 1aa4c2a32d9..dcfd8e71d96 100644 --- a/apps/contacts/js/contacts.js +++ b/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; } diff --git a/apps/contacts/templates/index.php b/apps/contacts/templates/index.php index 1bc4a195534..b2dde12684c 100644 --- a/apps/contacts/templates/index.php +++ b/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> |