Keyboard shortcuts! With lots of pretty images.

This commit is contained in:
Samuel Clay 2010-10-12 20:13:33 -04:00
parent 2b955f526f
commit 101730cef7
9 changed files with 84 additions and 20 deletions

View file

@ -2991,16 +2991,26 @@ background: transparent;
/* = Keyboard Shortcuts Modal = */
/* ============================ */
.NB-modal-keyboard .NB-keyboard-shortcut {
width: 240px;
float: left;
margin-right: 10px;
.NB-modal-keyboard .NB-keyboard-group {
clear: both;
margin: 16px 0 0 0;
overflow: hidden;
background-color: #F0F0F0;
padding: 8px;
}
.NB-modal-keyboard .NB-keyboard-shortcut {
width: 270px;
float: left;
margin-right: 20px;
}
.NB-modal-keyboard .NB-keyboard-shortcut.NB-last {
margin-right: 0;
}
.NB-modal-keyboard .NB-keyboard-shortcut .NB-keyboard-shortcut-key {
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-top: 1px solid #717171;
border-left: 1px solid #717171;
border-bottom: 1px solid #303030;
@ -3009,7 +3019,7 @@ background: transparent;
color: #FFF;
text-shadow: 1px 1px 0 #000;
font-weight: bold;
padding: 6px;
padding: 4px 6px;
float: left;
margin: 0 4px 0 0;
}
@ -3021,13 +3031,19 @@ background: transparent;
.NB-modal-keyboard .NB-keyboard-shortcut .NB-keyboard-shortcut-explanation {
float: right;
font-size: 12px;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
margin: 8px 0 0 0;
margin: 6px 0 0 0;
color: #404030;
text-shadow: 1px 1px 0 #E0E0E0;
}
.NB-modal-keyboard .NB-keyboard-shortcut .NB-keyboard-shortcut-image {
clear: both;
}
.NB-modal-keyboard .NB-keyboard-shortcut .NB-keyboard-shortcut-image img {
margin: 8px 0 0 0;
border: 1px solid #202020;
width: 238px;
width: 268px;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.2 KiB

After

Width:  |  Height:  |  Size: 5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

View file

@ -1875,6 +1875,7 @@
},
open_feed_link: function(feed_id, $fd) {
if (!feed_id) feed_id = this.active_feed;
this.mark_feed_as_read(feed_id);
var feed = this.model.get_feed(feed_id);
window.open(feed['feed_link'], '_blank');
@ -3681,6 +3682,14 @@
e.preventDefault();
self.switch_taskbar_view_direction(1);
});
$document.bind('keydown', 'enter', function(e) {
e.preventDefault();
self.open_feed_link();
});
$document.bind('keydown', 'return', function(e) {
e.preventDefault();
self.open_feed_link();
});
$document.bind('keydown', 'space', function(e) {
e.preventDefault();
self.page_in_story(0.4, 1);

View file

@ -22,32 +22,70 @@ NEWSBLUR.ReaderKeyboard.prototype = {
$.make('h2', { className: 'NB-modal-title' }, 'Keyboard shortcuts'),
$.make('div', { className: 'NB-keyboard-group' }, [
$.make('div', { className: 'NB-keyboard-shortcut' }, [
$.make('div', { className: 'NB-keyboard-shortcut-explanation' }, 'Next/Preview story'),
$.make('div', { className: 'NB-keyboard-shortcut-explanation' }, 'Next story'),
$.make('div', { className: 'NB-keyboard-shortcut-key' }, [
'u',
'↓',
$.make('span', 'or'),
'j'
]),
$.make('div', { className: 'NB-keyboard-shortcut-image' }, [
$.make('img', { src: NEWSBLUR.Globals.MEDIA_URL + '/img/reader/keyboard_down.png', width: 268, height: 65 })
])
]),
$.make('div', { className: 'NB-keyboard-shortcut NB-last' }, [
$.make('div', { className: 'NB-keyboard-shortcut-explanation' }, 'Previous story'),
$.make('div', { className: 'NB-keyboard-shortcut-key' }, [
'd',
'↑',
$.make('span', 'or'),
'k'
]),
$.make('div', { className: 'NB-keyboard-shortcut-image' }, [
$.make('img', { src: NEWSBLUR.Globals.MEDIA_URL + '/img/reader/keyboard_updown.png' })
$.make('img', { src: NEWSBLUR.Globals.MEDIA_URL + '/img/reader/keyboard_up.png', width: 268, height: 65 })
])
]),
])
]),
$.make('div', { className: 'NB-keyboard-group' }, [
$.make('div', { className: 'NB-keyboard-shortcut' }, [
$.make('div', { className: 'NB-keyboard-shortcut-explanation' }, 'Switch views'),
$.make('div', { className: 'NB-keyboard-shortcut-key' }, [
'<'
'←'
]),
$.make('div', { className: 'NB-keyboard-shortcut-key' }, [
'>'
'→'
]),
$.make('div', { className: 'NB-keyboard-shortcut-image' }, [
$.make('img', { src: NEWSBLUR.Globals.MEDIA_URL + '/img/reader/keyboard_leftright.png' })
$.make('img', { src: NEWSBLUR.Globals.MEDIA_URL + '/img/reader/keyboard_leftright.png', width: 268, height: 29 })
])
]),
$.make('div', { className: 'NB-keyboard-shortcut NB-last' }, [
$.make('div', { className: 'NB-keyboard-shortcut-explanation' }, 'Open Site'),
$.make('div', { className: 'NB-keyboard-shortcut-key' }, [
'enter'
]),
$.make('div', { className: 'NB-keyboard-shortcut-image' }, [
$.make('img', { src: NEWSBLUR.Globals.MEDIA_URL + '/img/reader/keyboard_enter.png', width: 268, height: 29 })
])
])
]),
$.make('div', { className: 'NB-keyboard-group' }, [
$.make('div', { className: 'NB-keyboard-shortcut' }, [
$.make('div', { className: 'NB-keyboard-shortcut-explanation' }, 'Page down'),
$.make('div', { className: 'NB-keyboard-shortcut-key' }, [
'space'
]),
$.make('div', { className: 'NB-keyboard-shortcut-image' }, [
$.make('img', { src: NEWSBLUR.Globals.MEDIA_URL + '/img/reader/keyboard_space.png', width: 268, height: 87 })
])
]),
$.make('div', { className: 'NB-keyboard-shortcut NB-last' }, [
$.make('div', { className: 'NB-keyboard-shortcut-explanation' }, 'Page up'),
$.make('div', { className: 'NB-keyboard-shortcut-key' }, [
'shift',
$.make('span', '+'),
'space'
]),
$.make('div', { className: 'NB-keyboard-shortcut-image' }, [
$.make('img', { src: NEWSBLUR.Globals.MEDIA_URL + '/img/reader/keyboard_shiftspace.png', width: 268, height: 87 })
])
])
])
@ -65,6 +103,7 @@ NEWSBLUR.ReaderKeyboard.prototype = {
dialog.overlay.fadeIn(200, function () {
dialog.container.fadeIn(200);
dialog.data.fadeIn(200);
$(window).resize();
});
},
'onShow': function(dialog) {