From 25932cf7c41cdd25d756e6677cefaac19fcfea69 Mon Sep 17 00:00:00 2001 From: Toby Zerner Date: Mon, 2 Nov 2015 18:08:55 +1030 Subject: [PATCH] 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. --- js/forum/src/components/DiscussionPage.js | 3 ++- js/forum/src/components/IndexPage.js | 2 +- js/forum/src/components/UserPage.js | 1 + js/forum/src/initializers/boot.js | 1 - js/forum/src/utils/History.js | 27 ++++++++++++++++------- js/lib/components/Navigation.js | 4 +++- less/lib/Navigation.less | 3 +++ 7 files changed, 29 insertions(+), 12 deletions(-) diff --git a/js/forum/src/components/DiscussionPage.js b/js/forum/src/components/DiscussionPage.js index e859fd409..e67718570 100644 --- a/js/forum/src/components/DiscussionPage.js +++ b/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. diff --git a/js/forum/src/components/IndexPage.js b/js/forum/src/components/IndexPage.js index b66942040..e26fdffdd 100644 --- a/js/forum/src/components/IndexPage.js +++ b/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'; } diff --git a/js/forum/src/components/UserPage.js b/js/forum/src/components/UserPage.js index 330c47791..08c808564 100644 --- a/js/forum/src/components/UserPage.js +++ b/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(); diff --git a/js/forum/src/initializers/boot.js b/js/forum/src/initializers/boot.js index a6051106b..b6bebd3c4 100644 --- a/js/forum/src/initializers/boot.js +++ b/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(); diff --git a/js/forum/src/utils/History.js b/js/forum/src/utils/History.js index ab30bc490..0de757ccb 100644 --- a/js/forum/src/utils/History.js +++ b/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('/'); } diff --git a/js/lib/components/Navigation.js b/js/lib/components/Navigation.js index 7c09a3185..4a6bf2269 100644 --- a/js/lib/components/Navigation.js +++ b/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; diff --git a/less/lib/Navigation.less b/less/lib/Navigation.less index cfef7754b..506a0a9b8 100755 --- a/less/lib/Navigation.less +++ b/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;