Merge pull request #4285 from novaugust/read-draft-shortcuts

Go between post list / post content with keyboard

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

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%;

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'],
 

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);
+            }
         }
     }
 });

ghost/admin/templates/posts.hbs

@@ -4,7 +4,7 @@
 </header>
 
 <div class="page-content">
-    <section class="content-list js-content-list">
+    <section {{bind-attr class=":content-list :js-content-list postListFocused:keyboard-focused"}}>
         <header class="floatingheader">
             <section class="content-filter">
                 <small>All Posts</small>
@@ -36,7 +36,7 @@
         </ol>
         {{/view}}
     </section>
-    <section class="content-preview js-content-preview">
+    <section {{bind-attr class=":content-preview :js-content-preview postContentFocused:keyboard-focused"}}>
         {{outlet}}
     </section>
 </div>