diff options
| -rw-r--r-- | README.md | 2 | ||||
| -rw-r--r-- | src/components/conversation/conversation.js | 8 | ||||
| -rw-r--r-- | src/components/conversation/conversation.vue | 2 | ||||
| -rw-r--r-- | src/components/status/status.js | 31 | ||||
| -rw-r--r-- | src/components/status/status.vue | 12 | ||||
| -rw-r--r-- | src/components/user_card_content/user_card_content.vue | 5 |
6 files changed, 47 insertions, 13 deletions
@@ -2,7 +2,7 @@ > A Qvitter-style frontend for certain GS servers. - + # FOR ADMINS diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index 281b0183..f3aeb216 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -8,6 +8,11 @@ const sortAndFilterConversation = (conversation) => { } const conversation = { + data () { + return { + highlight: this.statusoid.id + } + }, props: [ 'statusoid', 'collapsable' @@ -54,6 +59,9 @@ const conversation = { } else { return (id === this.statusoid.id) } + }, + setHighlight (id) { + this.highlight = Number(id) } } } diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue index 726cfb65..8b1e00ac 100644 --- a/src/components/conversation/conversation.vue +++ b/src/components/conversation/conversation.vue @@ -8,7 +8,7 @@ </div> <div class="panel-body"> <div class="timeline"> - <status v-for="status in conversation" :key="status.id" :statusoid="status" :expandable='false' :focused="focused(status.id)" :inConversation='true'></status> + <status v-for="status in conversation" @goto="setHighlight" :key="status.id" :statusoid="status" :expandable='false' :focused="focused(status.id)" :inConversation='true' :highlight="highlight"></status> </div> </div> </div> diff --git a/src/components/status/status.js b/src/components/status/status.js index bb026fe1..5e7bde53 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -11,7 +11,8 @@ const Status = { 'statusoid', 'expandable', 'inConversation', - 'focused' + 'focused', + 'highlight' ], data: () => ({ replying: false, @@ -53,6 +54,16 @@ const Status = { return { borderBottomColor: this.$store.state.config.colors['base02'] } + }, + isFocused () { + // retweet or root of an expanded conversation + if (this.focused) { + return true + } else if (!this.inConversation) { + return false + } + // use conversation highlight only when in conversation + return this.status.id === this.highlight } }, components: { @@ -75,6 +86,10 @@ const Status = { toggleReplying () { this.replying = !this.replying }, + gotoOriginal () { + // only handled by conversation, not status_or_conversation + this.$emit('goto', this.status.in_reply_to_status_id) + }, toggleExpanded () { this.$emit('toggleExpanded') }, @@ -84,6 +99,20 @@ const Status = { toggleUserExpanded () { this.userExpanded = !this.userExpanded } + }, + watch: { + 'highlight': function (id) { + id = Number(id) + if (this.status.id === id) { + let rect = this.$el.getBoundingClientRect() + if (rect.top < 100) { + window.scrollBy(0, rect.top - 200) + } else if (rect.bottom > window.innerHeight - 100) { + // will be useful when scrolling down to replies or root posts is in + window.scrollBy(0, rect.bottom + 200) + } + } + } } } diff --git a/src/components/status/status.vue b/src/components/status/status.vue index b471888a..db33a200 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -1,5 +1,5 @@ <template> - <div class="status-el base00-background base03-border" v-if="!status.deleted" v-bind:class="[{ 'base01-background': focused }, { 'status-conversation': inConversation }]" > + <div class="status-el base00-background base03-border" v-if="!status.deleted" v-bind:class="[{ 'base01-background': isFocused }, { 'status-conversation': inConversation }]" > <template v-if="muted"> <div class="media status container muted"> <small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small> @@ -35,12 +35,10 @@ {{status.in_reply_to_screen_name}} </router-link> </small> - <template v-if="isReply"> - <small> - <router-link :to="{ name: 'conversation', params: { id: status.in_reply_to_status_id } }"> - <i class="icon-reply"></i> - </router-link> - </small> + <template v-if="isReply && !expandable"> + <small> + <a href="#" @click.prevent="gotoOriginal" ><i class="icon-reply"></i></a> + </small> </template> - <small> diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue index 8c971d53..7b89a7f2 100644 --- a/src/components/user_card_content/user_card_content.vue +++ b/src/components/user_card_content/user_card_content.vue @@ -79,9 +79,8 @@ return this.$store.state.users.currentUser }, dailyAvg () { - return Math.round( - this.user.statuses_count / ((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000)) - ) + const days = Math.ceil((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000)) + return Math.round(this.user.statuses_count / days) } }, methods: { |