UX: Show Back button above mobile progress widget

This commit is contained in:
Robin Ward 2016-12-19 14:06:19 -05:00
parent 36449aa2f2
commit 4dcb29acbf
5 changed files with 34 additions and 3 deletions

View File

@ -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'));
}
},

View File

@ -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'}}">

View File

@ -115,7 +115,8 @@
{{topic-progress
prevEvent=info.prevEvent
topic=model
expanded=info.topicProgressExpanded}}
expanded=info.topicProgressExpanded
jumpToPost=(action "jumpToPost")}}
{{/if}}
{{/topic-navigation}}

View File

@ -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 })

View File

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