Feature: add jump to post modal on mobile

This commit is contained in:
Jeff Wong 2018-06-13 17:56:14 -07:00
parent 8fc08aad09
commit 160898acf3
5 changed files with 19 additions and 9 deletions

View File

@ -63,6 +63,9 @@ export default Ember.Component.extend({
if ( !$target.is('.widget-button') && if ( !$target.is('.widget-button') &&
!$parents.is('.widget-button') && !$parents.is('.widget-button') &&
!$parents.is('.dropdown-menu') && !$parents.is('.dropdown-menu') &&
!$parents.is('#discourse-modal') &&
!$target.is('#discourse-modal') &&
!$parents.is('.modal-footer') &&
( (
$target.is('.topic-timeline') || $target.is('.topic-timeline') ||
!$parents.is('#topic-progress-wrapper') !$parents.is('#topic-progress-wrapper')

View File

@ -4,6 +4,10 @@ export default Ember.Controller.extend(ModalFunctionality, {
model: null, model: null,
postNumber: null, postNumber: null,
onShow: () => {
Ember.run.next(() => $('#post-jump').focus());
},
actions: { actions: {
jump() { jump() {
const max = this.get("topic.postStream.filteredPostsCount"); const max = this.get("topic.postStream.filteredPostsCount");

View File

@ -13,6 +13,7 @@ import { extractLinkMeta } from 'discourse/lib/render-topic-featured-link';
import { popupAjaxError } from 'discourse/lib/ajax-error'; import { popupAjaxError } from 'discourse/lib/ajax-error';
import { spinnerHTML } from 'discourse/helpers/loading-spinner'; import { spinnerHTML } from 'discourse/helpers/loading-spinner';
import { userPath } from 'discourse/lib/url'; import { userPath } from 'discourse/lib/url';
import showModal from 'discourse/lib/show-modal';
let customPostMessageCallbacks = {}; let customPostMessageCallbacks = {};
@ -469,13 +470,15 @@ export default Ember.Controller.extend(BufferedContent, {
}, },
jumpToPostPrompt() { jumpToPostPrompt() {
const postText = prompt(I18n.t('topic.progress.jump_prompt_long')); const topic = this.get('model');
if (postText === null) { return; } const controller = showModal('jump-to-post');
controller.setProperties({
const postIndex = parseInt(postText, 10); topic: topic,
if (postIndex === 0) { return; } postNumber: null,
jumpToIndex: (index) => {
this._jumpToIndex(postIndex); this.send('jumpToIndex', index);
}
});
}, },
jumpToPost(postNumber) { jumpToPost(postNumber) {

View File

@ -1,5 +1,5 @@
{{#d-modal-body title="topic.progress.jump_prompt_long"}} {{#d-modal-body title="topic.progress.jump_prompt_long"}}
{{text-field value=postNumber insert-newline="jump"}} {{input id="post-jump" type="number" value=postNumber insert-newline="jump"}}
<span class='input-hint-text'> <span class='input-hint-text'>
{{i18n "topic.progress.jump_prompt_of" count=topic.postStream.filteredPostsCount}} {{i18n "topic.progress.jump_prompt_of" count=topic.postStream.filteredPostsCount}}
</span> </span>

View File

@ -67,7 +67,6 @@ $line-height-large: 1.4; // Normal or small text
$z-layers: ( $z-layers: (
"max": 9999, "max": 9999,
"fullscreen": 1700,
"modal": ( "modal": (
"tooltip": 1600, "tooltip": 1600,
"popover": 1500, "popover": 1500,
@ -75,6 +74,7 @@ $z-layers: (
"content": 1300, "content": 1300,
"overlay": 1200 "overlay": 1200
), ),
"fullscreen": 1150,
"mobile-composer": 1100, "mobile-composer": 1100,
"header": 1000, "header": 1000,
"tooltip": 600, "tooltip": 600,