+
+
+
![]()
+
diff --git a/src/components/conversation-page/conversation-page.js b/src/components/conversation-page/conversation-page.js
index 1da70ce95..8f996be12 100644
--- a/src/components/conversation-page/conversation-page.js
+++ b/src/components/conversation-page/conversation-page.js
@@ -5,12 +5,8 @@ const conversationPage = {
Conversation
},
computed: {
- statusoid () {
- const id = this.$route.params.id
- const statuses = this.$store.state.statuses.allStatusesObject
- const status = statuses[id]
-
- return status
+ statusId () {
+ return this.$route.params.id
}
}
}
diff --git a/src/components/conversation-page/conversation-page.vue b/src/components/conversation-page/conversation-page.vue
index 532f785c2..8cc0a55fe 100644
--- a/src/components/conversation-page/conversation-page.vue
+++ b/src/components/conversation-page/conversation-page.vue
@@ -2,7 +2,7 @@
diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 49fa86128..72ee9c390 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -1,4 +1,4 @@
-import { reduce, filter, findIndex, clone } from 'lodash'
+import { reduce, filter, findIndex, clone, get } from 'lodash'
import Status from '../status/status.vue'
const sortById = (a, b) => {
@@ -39,10 +39,11 @@ const conversation = {
}
},
props: [
- 'statusoid',
+ 'statusId',
'collapsable',
'isPage',
- 'pinnedStatusIdsObject'
+ 'pinnedStatusIdsObject',
+ 'inProfile'
],
created () {
if (this.isPage) {
@@ -51,21 +52,17 @@ const conversation = {
},
computed: {
status () {
- return this.statusoid
+ return this.$store.state.statuses.allStatusesObject[this.statusId]
},
- statusId () {
- if (this.statusoid.retweeted_status) {
- return this.statusoid.retweeted_status.id
+ originalStatusId () {
+ if (this.status.retweeted_status) {
+ return this.status.retweeted_status.id
} else {
- return this.statusoid.id
+ return this.statusId
}
},
conversationId () {
- if (this.statusoid.retweeted_status) {
- return this.statusoid.retweeted_status.statusnet_conversation_id
- } else {
- return this.statusoid.statusnet_conversation_id
- }
+ return this.getConversationId(this.statusId)
},
conversation () {
if (!this.status) {
@@ -77,7 +74,7 @@ const conversation = {
}
const conversation = clone(this.$store.state.statuses.conversationsObject[this.conversationId])
- const statusIndex = findIndex(conversation, { id: this.statusId })
+ const statusIndex = findIndex(conversation, { id: this.originalStatusId })
if (statusIndex !== -1) {
conversation[statusIndex] = this.status
}
@@ -110,7 +107,15 @@ const conversation = {
Status
},
watch: {
- status: 'fetchConversation',
+ statusId (newVal, oldVal) {
+ const newConversationId = this.getConversationId(newVal)
+ const oldConversationId = this.getConversationId(oldVal)
+ if (newConversationId && oldConversationId && newConversationId === oldConversationId) {
+ this.setHighlight(this.originalStatusId)
+ } else {
+ this.fetchConversation()
+ }
+ },
expanded (value) {
if (value) {
this.fetchConversation()
@@ -120,24 +125,25 @@ const conversation = {
methods: {
fetchConversation () {
if (this.status) {
- this.$store.state.api.backendInteractor.fetchConversation({ id: this.status.id })
+ this.$store.state.api.backendInteractor.fetchConversation({ id: this.statusId })
.then(({ ancestors, descendants }) => {
this.$store.dispatch('addNewStatuses', { statuses: ancestors })
this.$store.dispatch('addNewStatuses', { statuses: descendants })
+ this.setHighlight(this.originalStatusId)
})
- .then(() => this.setHighlight(this.statusId))
} else {
- const id = this.$route.params.id
- this.$store.state.api.backendInteractor.fetchStatus({ id })
- .then((status) => this.$store.dispatch('addNewStatuses', { statuses: [status] }))
- .then(() => this.fetchConversation())
+ this.$store.state.api.backendInteractor.fetchStatus({ id: this.statusId })
+ .then((status) => {
+ this.$store.dispatch('addNewStatuses', { statuses: [status] })
+ this.fetchConversation()
+ })
}
},
getReplies (id) {
return this.replies[id] || []
},
focused (id) {
- return (this.isExpanded) && id === this.status.id
+ return (this.isExpanded) && id === this.statusId
},
setHighlight (id) {
if (!id) return
@@ -149,6 +155,10 @@ const conversation = {
},
toggleExpanded () {
this.expanded = !this.expanded
+ },
+ getConversationId (statusId) {
+ const status = this.$store.state.statuses.allStatusesObject[statusId]
+ return get(status, 'retweeted_status.statusnet_conversation_id', get(status, 'statusnet_conversation_id'))
}
}
}
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index f184c0717..0f1de55fd 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -26,6 +26,7 @@
:in-conversation="isExpanded"
:highlight="getHighlight()"
:replies="getReplies(status.id)"
+ :in-profile="inProfile"
class="status-fadein panel-body"
@goto="setHighlight"
@toggleExpanded="toggleExpanded"
diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
index 25c21403c..a586b8191 100644
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@@ -1,6 +1,7 @@
import Completion from '../../services/completion/completion.js'
import EmojiPicker from '../emoji_picker/emoji_picker.vue'
import { take } from 'lodash'
+import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
/**
* EmojiInput - augmented inputs for emoji and autocomplete support in inputs
@@ -144,6 +145,7 @@ const EmojiInput = {
input.elm.addEventListener('paste', this.onPaste)
input.elm.addEventListener('keyup', this.onKeyUp)
input.elm.addEventListener('keydown', this.onKeyDown)
+ input.elm.addEventListener('click', this.onClickInput)
input.elm.addEventListener('transitionend', this.onTransition)
input.elm.addEventListener('compositionupdate', this.onCompositionUpdate)
},
@@ -155,6 +157,7 @@ const EmojiInput = {
input.elm.removeEventListener('paste', this.onPaste)
input.elm.removeEventListener('keyup', this.onKeyUp)
input.elm.removeEventListener('keydown', this.onKeyDown)
+ input.elm.removeEventListener('click', this.onClickInput)
input.elm.removeEventListener('transitionend', this.onTransition)
input.elm.removeEventListener('compositionupdate', this.onCompositionUpdate)
}
@@ -162,6 +165,9 @@ const EmojiInput = {
methods: {
triggerShowPicker () {
this.showPicker = true
+ this.$nextTick(() => {
+ this.scrollIntoView()
+ })
// This temporarily disables "click outside" handler
// since external trigger also means click originates
// from outside, thus preventing picker from opening
@@ -173,6 +179,9 @@ const EmojiInput = {
togglePicker () {
this.input.elm.focus()
this.showPicker = !this.showPicker
+ if (this.showPicker) {
+ this.scrollIntoView()
+ }
},
replace (replacement) {
const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement)
@@ -267,6 +276,37 @@ const EmojiInput = {
this.highlighted = 0
}
},
+ scrollIntoView () {
+ const rootRef = this.$refs['picker'].$el
+ /* Scroller is either `window` (replies in TL), sidebar (main post form,
+ * replies in notifs) or mobile post form. Note that getting and setting
+ * scroll is different for `Window` and `Element`s
+ */
+ const scrollerRef = this.$el.closest('.sidebar-scroller') ||
+ this.$el.closest('.post-form-modal-view') ||
+ window
+ const currentScroll = scrollerRef === window
+ ? scrollerRef.scrollY
+ : scrollerRef.scrollTop
+ const scrollerHeight = scrollerRef === window
+ ? scrollerRef.innerHeight
+ : scrollerRef.offsetHeight
+
+ const scrollerBottomBorder = currentScroll + scrollerHeight
+ // We check where the bottom border of root element is, this uses findOffset
+ // to find offset relative to scrollable container (scroller)
+ const rootBottomBorder = rootRef.offsetHeight + findOffset(rootRef, scrollerRef).top
+
+ const bottomDelta = Math.max(0, rootBottomBorder - scrollerBottomBorder)
+ // could also check top delta but there's no case for it
+ const targetScroll = currentScroll + bottomDelta
+
+ if (scrollerRef === window) {
+ scrollerRef.scroll(0, targetScroll)
+ } else {
+ scrollerRef.scrollTop = targetScroll
+ }
+ },
onTransition (e) {
this.resize()
},
@@ -360,6 +400,9 @@ const EmojiInput = {
this.resize()
this.$emit('input', e.target.value)
},
+ onClickInput (e) {
+ this.showPicker = false
+ },
onClickOutside (e) {
if (this.disableClickOutside) return
this.showPicker = false
diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index 53b38573a..13530e8b7 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -67,9 +67,10 @@
position: absolute;
top: 0;
right: 0;
- margin: 0 .25em;
+ margin: .2em .25em;
font-size: 16px;
cursor: pointer;
+ line-height: 24px;
&:hover i {
color: $fallback--text;
@@ -78,7 +79,7 @@
}
.emoji-picker-panel {
position: absolute;
- z-index: 9;
+ z-index: 20;
margin-top: 2px;
&.hide {
@@ -89,7 +90,7 @@
.autocomplete {
&-panel {
position: absolute;
- z-index: 9;
+ z-index: 20;
margin-top: 2px;
&.hide {
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 6c43dd970..42f20130c 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -77,13 +77,16 @@