wbrawner/server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added help for keyboard shortcuts.

Browse source
This commit is contained in:
Thomas Tanghus 2012-07-22 00:15:28 +02:00
parent 38d38c1797
commit ab8ce89df3
3 changed files with 55 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
apps/contacts/css/contacts.css
View file

@ -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; }

20
apps/contacts/js/contacts.js
View file

@ -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;
}

32
apps/contacts/templates/index.php
View file

@ -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>