+
+
+ {{ user.name }}
-
+
@{{user.screen_name}}
@@ -26,15 +26,15 @@
diff --git a/src/components/block_card/block_card.js b/src/components/block_card/block_card.js
index 11fa27b4..c459ff1b 100644
--- a/src/components/block_card/block_card.js
+++ b/src/components/block_card/block_card.js
@@ -9,7 +9,7 @@ const BlockCard = {
},
computed: {
user () {
- return this.$store.getters.userById(this.userId)
+ return this.$store.getters.findUser(this.userId)
},
blocked () {
return this.user.statusnet_blocking
diff --git a/src/components/conversation-page/conversation-page.js b/src/components/conversation-page/conversation-page.js
index 8f1ac3d9..1da70ce9 100644
--- a/src/components/conversation-page/conversation-page.js
+++ b/src/components/conversation-page/conversation-page.js
@@ -1,5 +1,4 @@
import Conversation from '../conversation/conversation.vue'
-import { find } from 'lodash'
const conversationPage = {
components: {
@@ -8,8 +7,8 @@ const conversationPage = {
computed: {
statusoid () {
const id = this.$route.params.id
- const statuses = this.$store.state.statuses.allStatuses
- const status = find(statuses, {id})
+ const statuses = this.$store.state.statuses.allStatusesObject
+ const status = statuses[id]
return status
}
diff --git a/src/components/conversation-page/conversation-page.vue b/src/components/conversation-page/conversation-page.vue
index b03eea28..9e322cf5 100644
--- a/src/components/conversation-page/conversation-page.vue
+++ b/src/components/conversation-page/conversation-page.vue
@@ -1,5 +1,9 @@
-
+
diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 48b8aaaa..69058bf6 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -1,9 +1,12 @@
-import { reduce, filter } from 'lodash'
+import { reduce, filter, findIndex } from 'lodash'
+import { set } from 'vue'
import Status from '../status/status.vue'
const sortById = (a, b) => {
- const seqA = Number(a.id)
- const seqB = Number(b.id)
+ const idA = a.type === 'retweet' ? a.retweeted_status.id : a.id
+ const idB = b.type === 'retweet' ? b.retweeted_status.id : b.id
+ const seqA = Number(idA)
+ const seqB = Number(idB)
const isSeqA = !Number.isNaN(seqA)
const isSeqB = !Number.isNaN(seqB)
if (isSeqA && isSeqB) {
@@ -13,29 +16,53 @@ const sortById = (a, b) => {
} else if (!isSeqA && isSeqB) {
return 1
} else {
- return a.id < b.id ? -1 : 1
+ return idA < idB ? -1 : 1
}
}
-const sortAndFilterConversation = (conversation) => {
- conversation = filter(conversation, (status) => status.type !== 'retweet')
+const sortAndFilterConversation = (conversation, statusoid) => {
+ if (statusoid.type === 'retweet') {
+ conversation = filter(
+ conversation,
+ (status) => (status.type === 'retweet' || status.id !== statusoid.retweeted_status.id)
+ )
+ } else {
+ conversation = filter(conversation, (status) => status.type !== 'retweet')
+ }
return conversation.filter(_ => _).sort(sortById)
}
const conversation = {
data () {
return {
- highlight: null
+ highlight: null,
+ expanded: false,
+ converationStatusIds: []
}
},
props: [
'statusoid',
- 'collapsable'
+ 'collapsable',
+ 'isPage'
],
+ created () {
+ if (this.isPage) {
+ this.fetchConversation()
+ }
+ },
computed: {
status () {
return this.statusoid
},
+ idsToShow () {
+ if (this.converationStatusIds.length > 0) {
+ return this.converationStatusIds
+ } else if (this.statusId) {
+ return [this.statusId]
+ } else {
+ return []
+ }
+ },
statusId () {
if (this.statusoid.retweeted_status) {
return this.statusoid.retweeted_status.id
@@ -48,10 +75,22 @@ const conversation = {
return []
}
- const conversationId = this.status.statusnet_conversation_id
- const statuses = this.$store.state.statuses.allStatuses
- const conversation = filter(statuses, { statusnet_conversation_id: conversationId })
- return sortAndFilterConversation(conversation)
+ if (!this.isExpanded) {
+ return [this.status]
+ }
+
+ const statusesObject = this.$store.state.statuses.allStatusesObject
+ const conversation = this.idsToShow.reduce((acc, id) => {
+ acc.push(statusesObject[id])
+ return acc
+ }, [])
+
+ const statusIndex = findIndex(conversation, { id: this.statusId })
+ if (statusIndex !== -1) {
+ conversation[statusIndex] = this.status
+ }
+
+ return sortAndFilterConversation(conversation, this.status)
},
replies () {
let i = 1
@@ -69,23 +108,34 @@ const conversation = {
i++
return result
}, {})
+ },
+ isExpanded () {
+ return this.expanded || this.isPage
}
},
components: {
Status
},
- created () {
- this.fetchConversation()
- },
watch: {
- '$route': 'fetchConversation'
+ '$route': 'fetchConversation',
+ expanded (value) {
+ if (value) {
+ this.fetchConversation()
+ }
+ }
},
methods: {
fetchConversation () {
if (this.status) {
- const conversationId = this.status.statusnet_conversation_id
- this.$store.state.api.backendInteractor.fetchConversation({id: conversationId})
- .then((statuses) => this.$store.dispatch('addNewStatuses', { statuses }))
+ this.$store.state.api.backendInteractor.fetchConversation({id: this.status.id})
+ .then(({ancestors, descendants}) => {
+ this.$store.dispatch('addNewStatuses', { statuses: ancestors })
+ this.$store.dispatch('addNewStatuses', { statuses: descendants })
+ set(this, 'converationStatusIds', [].concat(
+ ancestors.map(_ => _.id).filter(_ => _ !== this.statusId),
+ this.statusId,
+ descendants.map(_ => _.id).filter(_ => _ !== this.statusId)))
+ })
.then(() => this.setHighlight(this.statusId))
} else {
const id = this.$route.params.id
@@ -98,10 +148,19 @@ const conversation = {
return this.replies[id] || []
},
focused (id) {
- return id === this.statusId
+ return (this.isExpanded) && id === this.status.id
},
setHighlight (id) {
this.highlight = id
+ },
+ getHighlight () {
+ return this.isExpanded ? this.highlight : null
+ },
+ toggleExpanded () {
+ this.expanded = !this.expanded
+ if (!this.expanded) {
+ this.setHighlight(null)
+ }
}
}
}
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 5528fef6..c39a3ed9 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -1,26 +1,42 @@
-
-
+
+
+
diff --git a/src/components/emoji-input/emoji-input.js b/src/components/emoji-input/emoji-input.js
new file mode 100644
index 00000000..a5bb6eaf
--- /dev/null
+++ b/src/components/emoji-input/emoji-input.js
@@ -0,0 +1,107 @@
+import Completion from '../../services/completion/completion.js'
+import { take, filter, map } from 'lodash'
+
+const EmojiInput = {
+ props: [
+ 'value',
+ 'placeholder',
+ 'type',
+ 'classname'
+ ],
+ data () {
+ return {
+ highlighted: 0,
+ caret: 0
+ }
+ },
+ computed: {
+ suggestions () {
+ const firstchar = this.textAtCaret.charAt(0)
+ if (firstchar === ':') {
+ if (this.textAtCaret === ':') { return }
+ const matchedEmoji = filter(this.emoji.concat(this.customEmoji), (emoji) => emoji.shortcode.startsWith(this.textAtCaret.slice(1)))
+ if (matchedEmoji.length <= 0) {
+ return false
+ }
+ return map(take(matchedEmoji, 5), ({shortcode, image_url, utf}, index) => ({
+ shortcode: `:${shortcode}:`,
+ utf: utf || '',
+ // eslint-disable-next-line camelcase
+ img: utf ? '' : this.$store.state.instance.server + image_url,
+ highlighted: index === this.highlighted
+ }))
+ } else {
+ return false
+ }
+ },
+ textAtCaret () {
+ return (this.wordAtCaret || {}).word || ''
+ },
+ wordAtCaret () {
+ const word = Completion.wordAtPosition(this.value, this.caret - 1) || {}
+ return word
+ },
+ emoji () {
+ return this.$store.state.instance.emoji || []
+ },
+ customEmoji () {
+ return this.$store.state.instance.customEmoji || []
+ }
+ },
+ methods: {
+ replace (replacement) {
+ const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement)
+ this.$emit('input', newValue)
+ this.caret = 0
+ },
+ replaceEmoji (e) {
+ const len = this.suggestions.length || 0
+ if (this.textAtCaret === ':' || e.ctrlKey) { return }
+ if (len > 0) {
+ e.preventDefault()
+ const emoji = this.suggestions[this.highlighted]
+ const replacement = emoji.utf || (emoji.shortcode + ' ')
+ const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement)
+ this.$emit('input', newValue)
+ this.caret = 0
+ this.highlighted = 0
+ }
+ },
+ cycleBackward (e) {
+ const len = this.suggestions.length || 0
+ if (len > 0) {
+ e.preventDefault()
+ this.highlighted -= 1
+ if (this.highlighted < 0) {
+ this.highlighted = this.suggestions.length - 1
+ }
+ } else {
+ this.highlighted = 0
+ }
+ },
+ cycleForward (e) {
+ const len = this.suggestions.length || 0
+ if (len > 0) {
+ if (e.shiftKey) { return }
+ e.preventDefault()
+ this.highlighted += 1
+ if (this.highlighted >= len) {
+ this.highlighted = 0
+ }
+ } else {
+ this.highlighted = 0
+ }
+ },
+ onKeydown (e) {
+ e.stopPropagation()
+ },
+ onInput (e) {
+ this.$emit('input', e.target.value)
+ },
+ setCaret ({target: {selectionStart}}) {
+ this.caret = selectionStart
+ }
+ }
+}
+
+export default EmojiInput
diff --git a/src/components/emoji-input/emoji-input.vue b/src/components/emoji-input/emoji-input.vue
new file mode 100644
index 00000000..338b77cd
--- /dev/null
+++ b/src/components/emoji-input/emoji-input.vue
@@ -0,0 +1,64 @@
+
+
+
+
+
+
+
diff --git a/src/components/follow_card/follow_card.js b/src/components/follow_card/follow_card.js
index 425c9c3e..ac4e265a 100644
--- a/src/components/follow_card/follow_card.js
+++ b/src/components/follow_card/follow_card.js
@@ -1,4 +1,5 @@
import BasicUserCard from '../basic_user_card/basic_user_card.vue'
+import RemoteFollow from '../remote_follow/remote_follow.vue'
import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
const FollowCard = {
@@ -14,13 +15,17 @@ const FollowCard = {
}
},
components: {
- BasicUserCard
+ BasicUserCard,
+ RemoteFollow
},
computed: {
isMe () { return this.$store.state.users.currentUser.id === this.user.id },
following () { return this.updated ? this.updated.following : this.user.following },
showFollow () {
return !this.following || this.updated && !this.updated.following
+ },
+ loggedIn () {
+ return this.$store.state.users.currentUser
}
},
methods: {
diff --git a/src/components/follow_card/follow_card.vue b/src/components/follow_card/follow_card.vue
index 6cb064eb..9f314fd3 100644
--- a/src/components/follow_card/follow_card.vue
+++ b/src/components/follow_card/follow_card.vue
@@ -4,9 +4,12 @@
{{ isMe ? $t('user_card.its_you') : $t('user_card.follows_you') }}
+
+
+
-