diff --git a/media/css/reader.css b/media/css/reader.css index 0b701ce72..eaecb01b5 100644 --- a/media/css/reader.css +++ b/media/css/reader.css @@ -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; } \ No newline at end of file diff --git a/media/img/reader/keyboard_down.png b/media/img/reader/keyboard_down.png new file mode 100644 index 000000000..e17f8418e Binary files /dev/null and b/media/img/reader/keyboard_down.png differ diff --git a/media/img/reader/keyboard_enter.png b/media/img/reader/keyboard_enter.png new file mode 100644 index 000000000..8eac43106 Binary files /dev/null and b/media/img/reader/keyboard_enter.png differ diff --git a/media/img/reader/keyboard_leftright.png b/media/img/reader/keyboard_leftright.png index 2c83eaca7..331337a4c 100644 Binary files a/media/img/reader/keyboard_leftright.png and b/media/img/reader/keyboard_leftright.png differ diff --git a/media/img/reader/keyboard_shiftspace.png b/media/img/reader/keyboard_shiftspace.png new file mode 100644 index 000000000..d130ff01a Binary files /dev/null and b/media/img/reader/keyboard_shiftspace.png differ diff --git a/media/img/reader/keyboard_space.png b/media/img/reader/keyboard_space.png new file mode 100644 index 000000000..252b7dab9 Binary files /dev/null and b/media/img/reader/keyboard_space.png differ diff --git a/media/img/reader/keyboard_up.png b/media/img/reader/keyboard_up.png new file mode 100644 index 000000000..be12e962a Binary files /dev/null and b/media/img/reader/keyboard_up.png differ diff --git a/media/js/newsblur/reader.js b/media/js/newsblur/reader.js index 2a1c98f3a..81f6eb871 100644 --- a/media/js/newsblur/reader.js +++ b/media/js/newsblur/reader.js @@ -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); diff --git a/media/js/newsblur/reader_keyboard.js b/media/js/newsblur/reader_keyboard.js index f8a0f9462..0cd9bd9c7 100644 --- a/media/js/newsblur/reader_keyboard.js +++ b/media/js/newsblur/reader_keyboard.js @@ -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) {