diff --git a/src/components/friends_timeline/friends_timeline.vue b/src/components/friends_timeline/friends_timeline.vue index 03e518c63eea0fd93a5477951124d81778ce3197..af8ba5fee5371da8ea78868b50e1fd5b0218fe77 100644 --- a/src/components/friends_timeline/friends_timeline.vue +++ b/src/components/friends_timeline/friends_timeline.vue @@ -2,7 +2,7 @@ <div class="timeline panel panel-default"> <div class="panel-heading">Friends Timeline</div> <div class="panel-body"> - <Timeline v-bind:timeline="timeline" /> + <Timeline v-bind:timeline="timeline" v-bind:timeline-name="'friends'"/> </div> </div> </template> diff --git a/src/components/public_timeline/public_timeline.vue b/src/components/public_timeline/public_timeline.vue index 4aab0943e82ea3b1afb1e7c4a1ecb004edf075fd..22a2a2b8fc101f254ba4d9d45cef3bbbb3be6e45 100644 --- a/src/components/public_timeline/public_timeline.vue +++ b/src/components/public_timeline/public_timeline.vue @@ -2,7 +2,7 @@ <div class="timeline panel panel-default"> <div class="panel-heading">Public Timeline</div> <div class="panel-body"> - <Timeline v-bind:timeline="timeline" /> + <Timeline v-bind:timeline="timeline" v-bind:timeline-name="'public'"/> </div> </div> </template> diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js index fd36d0db951127f595acef7769a9f42a5f80579e..433bca11a63992ec92f5da5c72edceac02b190a0 100644 --- a/src/components/timeline/timeline.js +++ b/src/components/timeline/timeline.js @@ -2,10 +2,16 @@ import Status from '../status/status.vue' const Timeline = { props: [ - 'timeline' + 'timeline', + 'timelineName' ], components: { Status + }, + methods: { + showNewStatuses () { + this.$store.commit('showNewStatuses', { timeline: this.timelineName }) + } } } diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index 562656f692ae999d0b9c9f097a280ca262e21d4a..216982f69fd7e7393222a66a09833f818a4188d7 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -1,5 +1,12 @@ <template> <div class="timeline"> + <a href="#" v-on:click.prevent='showNewStatuses()' v-if="timeline.newStatusCount > 0"> + <div class="new-status-notification"> + <p class="text-center" > + {{timeline.newStatusCount}} new statuses + </p> + </div> + </a> <status v-for="status in timeline.visibleStatuses" v-bind:status="status"></status> </div> </template> diff --git a/src/modules/statuses.js b/src/modules/statuses.js index 8109d90664e538ba860bc2cd3bb680e2466be6de..dc0b224b5077e92c5ad973c181f1a4a6b92ba3bc 100644 --- a/src/modules/statuses.js +++ b/src/modules/statuses.js @@ -1,4 +1,4 @@ -import { last, intersectionBy, sortBy, unionBy, toInteger, groupBy, differenceBy, each, find } from 'lodash' +import { slice, last, intersectionBy, sortBy, unionBy, toInteger, groupBy, differenceBy, each, find } from 'lodash' // import moment from 'moment' const defaultState = { @@ -93,6 +93,12 @@ const statuses = { addNewStatuses (state, { statuses, showImmediately = false, timeline }) { state.timelines[timeline] = addStatusesToTimeline(statuses, showImmediately, state.timelines[timeline]) state.allStatuses = unionBy(state.timelines[timeline].statuses, state.allStatuses.id) + }, + showNewStatuses (state, { timeline }) { + const oldTimeline = (state.timelines[timeline]) + + oldTimeline.newStatusCount = 0 + oldTimeline.visibleStatuses = slice(oldTimeline.statuses, 0, 50) } } }