diff --git a/app/assets/javascripts/discourse/components/topic-navigation.js.es6 b/app/assets/javascripts/discourse/components/topic-navigation.js.es6
index 5e72830c017..1dd1e812160 100644
--- a/app/assets/javascripts/discourse/components/topic-navigation.js.es6
+++ b/app/assets/javascripts/discourse/components/topic-navigation.js.es6
@@ -49,7 +49,7 @@ export default Ember.Component.extend({
if (this.get('info.topicProgressExpanded')) {
$(window).on('click.hide-fullscreen', (e) => {
if ( $(e.target).is('.topic-timeline') ||
- !$(e.target).parents().is('.timeline-container, #topic-progress-wrapper')) {
+ !$(e.target).parents().is('#topic-progress-wrapper')) {
this._collapseFullscreen();
}
});
diff --git a/app/assets/javascripts/discourse/controllers/topic.js.es6 b/app/assets/javascripts/discourse/controllers/topic.js.es6
index 8761c6c9a2b..787196c4a03 100644
--- a/app/assets/javascripts/discourse/controllers/topic.js.es6
+++ b/app/assets/javascripts/discourse/controllers/topic.js.es6
@@ -43,6 +43,7 @@ export default Ember.Controller.extend(SelectedPostsCount, BufferedContent, {
'convertToPrivateMessage',
'jumpTop',
'jumpToPost',
+ 'jumpToPostPrompt',
'jumpToIndex',
'jumpBottom',
'replyToPost',
@@ -425,6 +426,14 @@ export default Ember.Controller.extend(SelectedPostsCount, BufferedContent, {
this._jumpToPostId(this.get('model.postStream.stream')[index-1]);
},
+ jumpToPostPrompt() {
+ const postText = prompt(I18n.t('topic.progress.jump_prompt_long'));
+ if (postText === null) { return; }
+ const postNumber = parseInt(postText, 10);
+ if (postNumber === 0) { return; }
+ this._jumpToPostId(this.get('model.postStream').findPostIdForPostNumber(postNumber));
+ },
+
jumpToPost(postNumber) {
this._jumpToPostId(this.get('model.postStream').findPostIdForPostNumber(postNumber));
},
diff --git a/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6 b/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6
index a9ed81102b4..d85ba5d9d90 100644
--- a/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6
+++ b/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6
@@ -59,7 +59,13 @@ createWidget('timeline-scroller', {
contents.push(h('div.timeline-ago', timelineDate(date)));
}
- return [ h('div.timeline-handle'), h('div.timeline-scroller-content', contents) ];
+ let result = [ h('div.timeline-handle'), h('div.timeline-scroller-content', contents) ];
+
+ if (attrs.fullScreen) {
+ result = [result[1], result[0]];
+ }
+
+ return result;
},
drag(e) {
@@ -140,7 +146,7 @@ createWidget('timeline-scrollarea', {
const result = [
this.attach('timeline-padding', { height: before }),
- this.attach('timeline-scroller', position),
+ this.attach('timeline-scroller', _.merge(position, {fullScreen: attrs.fullScreen})),
this.attach('timeline-padding', { height: after })
];
@@ -221,8 +227,11 @@ export default createWidget('topic-timeline', {
let result = [];
- if (attrs.mobileView) {
- const titleHTML = new RawHtml({ html: `${topic.get('fancyTitle')}` });
+ if (attrs.fullScreen) {
+ let titleHTML = "";
+ if (attrs.mobileView) {
+ titleHTML = new RawHtml({ html: `${topic.get('fancyTitle')}` });
+ }
result.push(h('h3.title', titleHTML));
}
@@ -236,21 +245,23 @@ export default createWidget('topic-timeline', {
}
const bottomAge = relativeAge(new Date(topic.last_posted_at), { addAgo: true, defaultFormat: timelineDate });
- result = result.concat([this.attach('link', {
+ let scroller = [h('div.timeline-date-wrapper', this.attach('link', {
className: 'start-date',
rawLabel: timelineDate(createdAt),
action: 'jumpTop'
- }),
+ })),
this.attach('timeline-scrollarea', attrs),
- this.attach('link', {
+ h('div.timeline-date-wrapper', this.attach('link', {
className: 'now-date',
rawLabel: bottomAge,
action: 'jumpBottom'
- })]);
+ }))];
- if (currentUser) {
- const controls = [];
- if (!attrs.fullScreen && attrs.topic.get('details.can_create_post')) {
+ result = result.concat([h('div.timeline-scrollarea-wrapper', scroller)]);
+
+ const controls = [];
+ if (currentUser && !attrs.fullScreen) {
+ if (attrs.topic.get('details.can_create_post')) {
controls.push(this.attach('button', {
className: 'btn create',
icon: 'reply',
@@ -259,9 +270,21 @@ export default createWidget('topic-timeline', {
}));
}
- if (currentUser && !attrs.fullScreen) {
+ if (currentUser) {
controls.push(this.attach('topic-notifications-button', { topic }));
}
+ }
+
+ if (attrs.fullScreen) {
+ controls.push(this.attach('button', {
+ className: 'btn jump-to-post',
+ title: 'topic.progress.jump_prompt_long',
+ label: 'topic.progress.jump_prompt',
+ action: 'jumpToPostPrompt'
+ }));
+ }
+
+ if (controls.length > 0) {
result.push(h('div.timeline-footer-controls', controls));
}
diff --git a/app/assets/stylesheets/common/topic-timeline.scss b/app/assets/stylesheets/common/topic-timeline.scss
index 3aa43fd0557..c9486bfaec0 100644
--- a/app/assets/stylesheets/common/topic-timeline.scss
+++ b/app/assets/stylesheets/common/topic-timeline.scss
@@ -32,6 +32,11 @@
&.timeline-fullscreen.show {
max-height: 700px;
transition: max-height 0.4s ease-out;
+ .topic-timeline {
+ .timeline-footer-controls {
+ display: inherit;
+ }
+ }
}
&.timeline-fullscreen {
@@ -44,15 +49,83 @@
left: 0;
right: 0;
border-top: 1px solid dark-light-choose(scale-color($primary, $lightness: 90%), scale-color($secondary, $lightness: 90%));
- padding-top: 15px;
+ padding-top: 20px;
z-index: 100000;
- .timeline-scrollarea {
- max-width: 200px;
- }
.topic-timeline {
- width: auto;
- margin-left: 1.5em;
- margin-right: 1.5em;
+ width: 100%;
+ margin-left: 0;
+ margin-right: 0;
+ display: table;
+ .timeline-date-wrapper {
+ float: right;
+ text-align: right;
+ font-size: 1.1em;
+ }
+ .title {
+ margin-top: 0;
+ padding-left: 1em;
+ display: table-cell;
+ vertical-align: top;
+ line-height: 1.3em;
+ }
+ .timeline-last-read {
+ right: 0px;
+ margin-left: 0;
+ i.progress {
+ margin-right: -3px;
+ margin-left: 1em;
+ }
+ }
+ .timeline-footer-controls {
+ display: none;
+ position: absolute;
+ bottom: 10px;
+ left: 10px;
+
+ button {
+ float: none;
+ display: block;
+ margin-bottom: 10px;
+ }
+ }
+ .timeline-scrollarea-wrapper {
+ display: table-cell;
+ padding-bottom: 20px;
+ padding-right: 1.5em;
+ width: 100px;
+ }
+ .timeline-scrollarea {
+ border-left: 0;
+ border-right-style: solid;
+ border-right-width: 1px;
+ max-width: 120px;
+ float: right;
+
+ .timeline-scroller {
+ position: relative;
+ margin-right: -1.5em;
+ padding-right: 1.5em;
+ justify-content: flex-end;
+ .timeline-scroller-content {
+ text-align: right;
+ padding-left: 0;
+ padding-right: 1em;
+ }
+ .timeline-handle {
+ float: none;
+ width: 11px;
+ position: relative;
+ right: -6px;
+ }
+ }
+ }
+ }
+
+
+ .timeline-scrollarea-wrapper::after {
+ content: "";
+ display: table;
+ clear: both;
}
}