New content screen prototype (#503)

refs TryGhost/Ghost#7860

- remove preview pane from content screen
- add basic post status filters
- replace custom infinite scroll with ember-infinity and increase trigger threshold for improved scroll behaviour

Commits:
* basic content list + filter using existing infinite scroll and pagination
* swap our custom pagination + infinite loader for `ember-infinity`
* minor cleanups
* reset scroll position when changing filter
* fix tests
* remove client-side sorting step as we no longer have a live collection
* remove unused `mobile-index-route`
* add acceptance tests for content screen filters

app/components/gh-posts-list-item.js

@@ -1,21 +1,16 @@
-import $ from 'jquery';
 import Ember from 'ember';
 import Component from 'ember-component';
 import {htmlSafe} from 'ember-string';
 import computed, {alias, equal} from 'ember-computed';
 import injectService from 'ember-service/inject';
 
-import ActiveLinkMixin from 'ember-cli-active-link-wrapper/mixins/active-link';
-import {invokeAction} from 'ember-invoke-action';
-
 // ember-cli-shims doesn't export these
 const {Handlebars, ObjectProxy, PromiseProxyMixin} = Ember;
 
 const ObjectPromiseProxy = ObjectProxy.extend(PromiseProxyMixin);
 
-export default Component.extend(ActiveLinkMixin, {
+export default Component.extend({
     tagName: 'li',
-    classNameBindings: ['isFeatured:featured', 'isPage:page'],
 
     post: null,
     previewIsHidden: false,
@@ -54,45 +49,5 @@ export default Component.extend(ActiveLinkMixin, {
 
     doubleClick() {
         this.sendAction('onDoubleClick', this.get('post'));
-    },
-
-    didInsertElement() {
-        this._super(...arguments);
-        this.addObserver('active', this, this.scrollIntoView);
-    },
-
-    willDestroyElement() {
-        this._super(...arguments);
-        this.removeObserver('active', this, this.scrollIntoView);
-        if (this.get('post.isDeleted') && this.get('onDelete')) {
-            invokeAction(this, 'onDelete');
-        }
-    },
-
-    scrollIntoView() {
-        if (!this.get('active')) {
-            return;
-        }
-
-        let element = this.$();
-        let offset = element.offset().top;
-        let elementHeight = element.height();
-        let container = $('.js-content-scrollbox');
-        let containerHeight = container.height();
-        let currentScroll = container.scrollTop();
-        let isBelowTop, isAboveBottom, isOnScreen;
-
-        isAboveBottom = offset < containerHeight;
-        isBelowTop = offset > elementHeight;
-
-        isOnScreen = isBelowTop && isAboveBottom;
-
-        if (!isOnScreen) {
-            // Scroll so that element is centered in container
-            // 40 is the amount of padding on the container
-            container.clearQueue().animate({
-                scrollTop: currentScroll + offset - 40 - containerHeight / 2
-            });
-        }
     }
 });

app/controllers/posts.js

@@ -1,26 +1,5 @@
-import Ember from 'ember';
 import Controller from 'ember-controller';
-import computed, {equal} from 'ember-computed';
-import injectService from 'ember-service/inject';
-
-const {compare} = Ember;
 
 export default Controller.extend({
-    feature: injectService(),
-
-    showDeletePostModal: false,
-
-    // See PostsRoute's shortcuts
-    postListFocused: equal('keyboardFocus', 'postList'),
-    postContentFocused: equal('keyboardFocus', 'postContent'),
-
-    sortedPosts: computed('model.@each.{status,publishedAtUTC,isNew,updatedAtUTC}', function () {
-        return this.get('model').toArray().sort(compare);
-    }),
 
-    actions: {
-        toggleDeletePostModal() {
-            this.toggleProperty('showDeletePostModal');
-        }
-    }
 });

app/controllers/posts/index.js

@@ -0,0 +1,23 @@
+import Controller from 'ember-controller';
+import computed from 'ember-computed';
+import injectService from 'ember-service/inject';
+
+export default Controller.extend({
+
+    queryParams: ['type'],
+    type: null,
+
+    session: injectService(),
+
+    showDeletePostModal: false,
+
+    showingAll: computed('type', function () {
+        return this.get('type') === null;
+    }),
+
+    actions: {
+        toggleDeletePostModal() {
+            this.toggleProperty('showDeletePostModal');
+        }
+    }
+});

app/mixins/pagination.js

@@ -30,12 +30,17 @@ export default Mixin.create({
     }),
 
     init() {
-        let paginationSettings = this.get('paginationSettings');
-        let settings = assign({}, defaultPaginationSettings, paginationSettings);
+        // don't merge defaults if paginationSettings is a CP
+        if (!this.paginationSettings.isDescriptor) {
+            let paginationSettings = this.get('paginationSettings');
+            let settings = assign({}, defaultPaginationSettings, paginationSettings);
+
+            this.set('paginationSettings', settings);
+        }
 
-        this._super(...arguments);
-        this.set('paginationSettings', settings);
         this.set('paginationMeta', {});
+
+        this._super(...arguments);
     },
 
     reportLoadError(error) {

app/router.js

@@ -31,9 +31,7 @@ GhostRouter.map(function () {
     this.route('reset', {path: '/reset/:token'});
     this.route('about', {path: '/about'});
 
-    this.route('posts', {path: '/'}, function () {
-        this.route('post', {path: ':post_id'});
-    });
+    this.route('posts', {path: '/'}, function() {});
 
     this.route('editor', function () {
         this.route('new', {path: ''});

app/routes/posts.js

@@ -1,100 +1,5 @@
-import $ from 'jquery';
 import AuthenticatedRoute from 'ghost-admin/routes/authenticated';
-import ShortcutsRoute from 'ghost-admin/mixins/shortcuts-route';
-import PaginationMixin from 'ghost-admin/mixins/pagination';
 
-export default AuthenticatedRoute.extend(ShortcutsRoute, PaginationMixin, {
-    titleToken: 'Content',
-
-    paginationModel: 'post',
-    paginationSettings: {
-        status: 'all',
-        staticPages: 'all'
-    },
-
-    model() {
-        let paginationSettings = this.get('paginationSettings');
-
-        return this.get('session.user').then((user) => {
-            if (user.get('isAuthor')) {
-                paginationSettings.filter = paginationSettings.filter
-                    ? `${paginationSettings.filter}+author:${user.get('slug')}` : `author:${user.get('slug')}`;
-            }
-
-            return this.loadFirstPage().then(() => {
-                // using `.filter` allows the template to auto-update when new models are pulled in from the server.
-                // we just need to 'return true' to allow all models by default.
-                return this.store.filter('post', (post) => {
-                    if (user.get('isAuthor')) {
-                        return post.isAuthoredByUser(user);
-                    }
-
-                    return true;
-                });
-            });
-        });
-    },
-
-    stepThroughPosts(step) {
-        let currentPost = this.get('controller.currentPost');
-        let posts = this.get('controller.sortedPosts');
-        let length = posts.get('length');
-        let newPosition = posts.indexOf(currentPost) + step;
-
-        // if we are on the first or last item
-        // just do nothing (desired behavior is to not
-        // loop around)
-        if (newPosition >= length) {
-            return;
-        } else if (newPosition < 0) {
-            return;
-        }
-
-        this.transitionTo('posts.post', posts.objectAt(newPosition));
-    },
-
-    scrollContent(amount) {
-        let content = $('.js-content-preview');
-        let scrolled = content.scrollTop();
-
-        content.scrollTop(scrolled + 50 * amount);
-    },
-
-    shortcuts: {
-        'up, k': 'moveUp',
-        'down, j': 'moveDown',
-        left: 'focusList',
-        right: 'focusContent',
-        c: 'newPost'
-    },
-
-    actions: {
-        focusList() {
-            this.controller.set('keyboardFocus', 'postList');
-        },
-
-        focusContent() {
-            this.controller.set('keyboardFocus', 'postContent');
-        },
-
-        newPost() {
-            this.transitionTo('editor.new');
-        },
-
-        moveUp() {
-            if (this.controller.get('postContentFocused')) {
-                this.scrollContent(-1);
-            } else {
-                this.stepThroughPosts(-1);
-            }
-        },
-
-        moveDown() {
-            if (this.controller.get('postContentFocused')) {
-                this.scrollContent(1);
-            } else {
-                this.stepThroughPosts(1);
-            }
-        }
-    }
+export default AuthenticatedRoute.extend({
+    titleToken: 'Content'
 });