Add label to back button, change behaviour

The back button longer shows if the user hasn't actually navigated anywhere. e.g. if they come in directly to a discussion, it will be hidden.

framework/core/js/forum/src/components/DiscussionPage.js

@@ -159,6 +159,7 @@ export default class DiscussionPage extends Page {
   show(discussion) {
     this.discussion = discussion;
 
+    app.history.push('discussion', discussion.title());
     app.setTitle(discussion.title());
     app.setTitleCount(0);
 
@@ -273,7 +274,7 @@ export default class DiscussionPage extends Page {
     m.route(url, true);
     window.history.replaceState(null, document.title, url);
 
-    app.history.push('discussion');
+    app.history.push('discussion', discussion.title());
 
     // If the user hasn't read past here before, then we'll update their read
     // state and redraw.

framework/core/js/forum/src/components/IndexPage.js

@@ -54,7 +54,7 @@ export default class IndexPage extends Page {
       app.cache.discussionList = new DiscussionList({params});
     }
 
-    app.history.push('index');
+    app.history.push('index', app.translator.trans('core.forum.header.discussions_button'));
 
     this.bodyClass = 'App--index';
   }

framework/core/js/forum/src/components/UserPage.js

@@ -74,6 +74,7 @@ export default class UserPage extends Page {
   show(user) {
     this.user = user;
 
+    app.history.push('user', user.username());
     app.setTitle(user.username());
 
     m.redraw();

framework/core/js/forum/src/initializers/boot.js

@@ -31,7 +31,6 @@ export default function boot(app) {
   }
 
   app.routes[defaultAction].path = '/';
-  app.history.push(defaultAction, '/');
 
   m.startComputation();
 

framework/core/js/forum/src/utils/History.js

@@ -24,21 +24,32 @@ export default class History {
    * Get the item on the top of the stack.
    *
    * @return {Object}
-   * @protected
+   * @public
    */
-  getTop() {
+  getCurrent() {
     return this.stack[this.stack.length - 1];
   }
 
+  /**
+   * Get the previous item on the stack.
+   *
+   * @return {Object}
+   * @public
+   */
+  getPrevious() {
+    return this.stack[this.stack.length - 2];
+  }
+
   /**
    * Push an item to the top of the stack.
    *
    * @param {String} name The name of the route.
+   * @param {String} title The title of the route.
    * @param {String} [url] The URL of the route. The current URL will be used if
    *     not provided.
    * @public
    */
-  push(name, url = m.route()) {
+  push(name, title, url = m.route()) {
     // If we're pushing an item with the same name as second-to-top item in the
     // stack, we will assume that the user has clicked the 'back' button in
     // their browser. In this case, we don't want to push a new item, so we will
@@ -51,11 +62,11 @@ export default class History {
 
     // If we're pushing an item with the same name as the top item in the stack,
     // then we'll overwrite it with the new URL.
-    const top = this.getTop();
+    const top = this.getCurrent();
     if (top && top.name === name) {
-      top.url = url;
+      Object.assign(top, {url, title});
     } else {
-      this.stack.push({name, url});
+      this.stack.push({name, url, title});
     }
   }
 
@@ -77,7 +88,7 @@ export default class History {
   back() {
     this.stack.pop();
 
-    m.route(this.getTop().url);
+    m.route(this.getCurrent().url);
   }
 
   /**
@@ -97,7 +108,7 @@ export default class History {
    * @public
    */
   home() {
-    this.stack.splice(1);
+    this.stack.splice(0);
 
     m.route('/');
   }

framework/core/js/lib/components/Navigation.js

@@ -47,11 +47,13 @@ export default class Navigation extends Component {
    */
   getBackButton() {
     const {history} = app;
+    const previous = history.getPrevious() || {};
 
     return LinkButton.component({
-      className: 'Button Button--icon Navigation-back',
+      className: 'Button Navigation-back ' + (previous.title ? '' : 'Button--icon'),
       href: history.backUrl(),
       icon: 'chevron-left',
+      children: previous.title,
       config: () => {},
       onclick: e => {
         if (e.shiftKey || e.ctrlKey || e.metaKey || e.which === 2) return;

framework/core/less/lib/Navigation.less

@@ -2,6 +2,9 @@
   z-index: 3 !important; // z-index of an active .btn-group .btn is 2
   border-radius: @border-radius !important;
   .transition(border-radius 0.2s);
+  max-width: 150px;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .Navigation-pin {
   opacity: 0;