From 4dcb29acbf79c2a848300118116644ab4298c3b2 Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Mon, 19 Dec 2016 14:06:19 -0500
Subject: [PATCH] UX: Show Back button above mobile progress widget

---
 .../discourse/components/topic-progress.js.es6    | 11 +++++++++++
 .../templates/components/topic-progress.hbs       |  6 ++++++
 .../javascripts/discourse/templates/topic.hbs     |  3 ++-
 .../discourse/widgets/topic-timeline.js.es6       |  2 +-
 app/assets/stylesheets/mobile/topic.scss          | 15 ++++++++++++++-
 5 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/discourse/components/topic-progress.js.es6 b/app/assets/javascripts/discourse/components/topic-progress.js.es6
index 938c7085494..8321d70148c 100644
--- a/app/assets/javascripts/discourse/components/topic-progress.js.es6
+++ b/app/assets/javascripts/discourse/components/topic-progress.js.es6
@@ -37,6 +37,13 @@ export default Ember.Component.extend({
     }
   },
 
+  @computed('progressPosition', 'topic.last_read_post_id')
+  showBackButton(position, lastReadId) {
+    if (!this.site.mobileView || !lastReadId) { return; }
+    const readPos = this.get('postStream.stream').indexOf(lastReadId) || 0;
+    return readPos > position;
+  },
+
   @observes('postStream.stream.[]')
   _updateBar() {
     Ember.run.scheduleOnce('afterRender', this, this._updateProgressBar);
@@ -140,6 +147,10 @@ export default Ember.Component.extend({
   actions: {
     toggleExpansion() {
       this.toggleProperty('expanded');
+    },
+
+    goBack() {
+      this.attrs.jumpToPost(this.get('topic.last_read_post_number'));
     }
   },
 
diff --git a/app/assets/javascripts/discourse/templates/components/topic-progress.hbs b/app/assets/javascripts/discourse/templates/components/topic-progress.hbs
index a64af643e7b..797e12f0738 100644
--- a/app/assets/javascripts/discourse/templates/components/topic-progress.hbs
+++ b/app/assets/javascripts/discourse/templates/components/topic-progress.hbs
@@ -1,3 +1,9 @@
+{{#if showBackButton}}
+  <div class='progress-back-container'>
+    {{d-button label="topic.timeline.back" class="btn-primary progress-back" action="goBack"}}
+  </div>
+{{/if}}
+
 <nav id='topic-progress' title="{{i18n 'topic.progress.title'}}" class="{{if hideProgress 'hidden'}}">
   <div class='nums'>
     <h4>{{progressPosition}}</h4><span class="{{if hugeNumberOfPosts 'hidden'}}">
diff --git a/app/assets/javascripts/discourse/templates/topic.hbs b/app/assets/javascripts/discourse/templates/topic.hbs
index e21c2e18809..32257d00723 100644
--- a/app/assets/javascripts/discourse/templates/topic.hbs
+++ b/app/assets/javascripts/discourse/templates/topic.hbs
@@ -115,7 +115,8 @@
           {{topic-progress
             prevEvent=info.prevEvent
             topic=model
-            expanded=info.topicProgressExpanded}}
+            expanded=info.topicProgressExpanded
+            jumpToPost=(action "jumpToPost")}}
         {{/if}}
       {{/topic-navigation}}
 
diff --git a/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6 b/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6
index 9c49bc7b190..8b5d45aaf54 100644
--- a/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6
+++ b/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6
@@ -175,7 +175,7 @@ createWidget('timeline-scrollarea', {
     const result = [
       this.attach('timeline-padding', { height: before }),
       this.attach('timeline-scroller', _.merge(position, {
-        showDockedButton: hasBackPosition && !showButton,
+        showDockedButton: !attrs.mobileView && hasBackPosition && !showButton,
         fullScreen: attrs.fullScreen
       })),
       this.attach('timeline-padding', { height: after })
diff --git a/app/assets/stylesheets/mobile/topic.scss b/app/assets/stylesheets/mobile/topic.scss
index 4e51a5a8f46..56eedbf56e2 100644
--- a/app/assets/stylesheets/mobile/topic.scss
+++ b/app/assets/stylesheets/mobile/topic.scss
@@ -61,6 +61,19 @@
   margin-right: 148px;
 }
 
+.progress-back-container {
+  position: fixed;
+  width: 0;
+  right: 0;
+  bottom: 40px;
+  z-index: 950;
+  margin-right: 105px;
+
+  .btn {
+    margin: 0;
+  }
+}
+
 #topic-progress-expanded {
   border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
   padding: 5px;
@@ -194,4 +207,4 @@ sup sup, sub sup, sup sub, sub sub { top: 0; }
 .topic-timeline { 
   .start-date { font-size: 120%; padding: 5px; }
   .now-date { font-size: 120%; padding: 5px; }
-}
\ No newline at end of file
+}