diff --git a/ghost/admin/assets/sass/helpers/animations.scss b/ghost/admin/assets/sass/helpers/animations.scss index d6eae8455c..fd1749862d 100755 --- a/ghost/admin/assets/sass/helpers/animations.scss +++ b/ghost/admin/assets/sass/helpers/animations.scss @@ -56,4 +56,18 @@ .fade-out { animation: fade-out 0.5s; animation-fill-mode: forwards; +} + + +// +// Fade out inset box shadow for content page keyboard focus +// -------------------------------------------------- + +@keyframes keyboard-focus-style-fade-out { + from { + box-shadow: inset 0 0 30px 1px lighten($midgrey, 20%); + } + to { + box-shadow: none; + } } \ No newline at end of file diff --git a/ghost/admin/assets/sass/layouts/content.scss b/ghost/admin/assets/sass/layouts/content.scss index 4a15e1f844..4f0eb5f017 100644 --- a/ghost/admin/assets/sass/layouts/content.scss +++ b/ghost/admin/assets/sass/layouts/content.scss @@ -63,6 +63,21 @@ } } + &.keyboard-focused { + // This has to be a pseudo element to sit over the top of everything else in the content list + &:before { + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 500; + pointer-events: none; + animation: keyboard-focus-style-fade-out 1.5s 1 forwards; + } + } + .btn-green { @include icon($i-add); position: absolute; @@ -196,13 +211,17 @@ overflow: auto; -webkit-overflow-scrolling: touch; background: #fff; - + @media (max-width: 900px) { width: 100%; border: none; overflow: visible; } + &.keyboard-focused { + animation: keyboard-focus-style-fade-out 1.5s 1 forwards; + } + .unfeatured { @include icon($i-unfeatured, 14px); vertical-align: -6%; diff --git a/ghost/admin/controllers/posts.js b/ghost/admin/controllers/posts.js index ef6399d439..c99d22c0b2 100644 --- a/ghost/admin/controllers/posts.js +++ b/ghost/admin/controllers/posts.js @@ -20,6 +20,9 @@ function publishedAtCompare(item1, item2) { } var PostsController = Ember.ArrayController.extend(PaginationControllerMixin, { + // See PostsRoute's shortcuts + postListFocused: Ember.computed.equal('keyboardFocus', 'postList'), + postContentFocused: Ember.computed.equal('keyboardFocus', 'postContent'), // this will cause the list to re-sort when any of these properties change on any of the models sortProperties: ['status', 'published_at', 'updated_at'], diff --git a/ghost/admin/routes/posts.js b/ghost/admin/routes/posts.js index c40a0ee320..c62f9a9568 100644 --- a/ghost/admin/routes/posts.js +++ b/ghost/admin/routes/posts.js @@ -60,23 +60,46 @@ PostsRoute = Ember.Route.extend(SimpleAuth.AuthenticatedRouteMixin, ShortcutsRou this.transitionTo('posts.post', posts.objectAt(newPosition)); }, + scrollContent: function (amount) { + var content = Ember.$('.js-content-preview'), + scrolled = content.scrollTop(); + + content.scrollTop(scrolled + 50 * amount); + }, + shortcuts: { 'up, k': 'moveUp', 'down, j': 'moveDown', + left: 'focusList', + right: 'focusContent', c: 'newPost' }, actions: { + focusList: function () { + this.controller.set('keyboardFocus', 'postList'); + }, + focusContent: function () { + this.controller.set('keyboardFocus', 'postContent'); + }, newPost: function () { this.transitionTo('editor.new'); }, moveUp: function () { - this.stepThroughPosts(-1); + if (this.controller.get('postContentFocused')) { + this.scrollContent(-1); + } else { + this.stepThroughPosts(-1); + } }, moveDown: function () { - this.stepThroughPosts(1); + if (this.controller.get('postContentFocused')) { + this.scrollContent(1); + } else { + this.stepThroughPosts(1); + } } } }); diff --git a/ghost/admin/templates/posts.hbs b/ghost/admin/templates/posts.hbs index 8bb4870b5f..a0663cf350 100644 --- a/ghost/admin/templates/posts.hbs +++ b/ghost/admin/templates/posts.hbs @@ -4,7 +4,7 @@