diff options
Diffstat (limited to 'src/components/timeline')
| -rw-r--r-- | src/components/timeline/timeline.js | 33 | ||||
| -rw-r--r-- | src/components/timeline/timeline.vue | 81 |
2 files changed, 88 insertions, 26 deletions
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js index 19d9a9ac..8df48f7f 100644 --- a/src/components/timeline/timeline.js +++ b/src/components/timeline/timeline.js @@ -1,7 +1,20 @@ import Status from '../status/status.vue' import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js' import Conversation from '../conversation/conversation.vue' -import { throttle } from 'lodash' +import { throttle, keyBy } from 'lodash' + +export const getExcludedStatusIdsByPinning = (statuses, pinnedStatusIds) => { + const ids = [] + if (pinnedStatusIds && pinnedStatusIds.length > 0) { + for (let status of statuses) { + if (!pinnedStatusIds.includes(status.id)) { + break + } + ids.push(status.id) + } + } + return ids +} const Timeline = { props: [ @@ -11,7 +24,8 @@ const Timeline = { 'userId', 'tag', 'embedded', - 'count' + 'count', + 'pinnedStatusIds' ], data () { return { @@ -39,6 +53,15 @@ const Timeline = { body: ['timeline-body'].concat(!this.embedded ? ['panel-body'] : []), footer: ['timeline-footer'].concat(!this.embedded ? ['panel-footer'] : []) } + }, + // id map of statuses which need to be hidden in the main list due to pinning logic + excludedStatusIdsObject () { + const ids = getExcludedStatusIdsByPinning(this.timeline.visibleStatuses, this.pinnedStatusIds) + // Convert id array to object + return keyBy(ids) + }, + pinnedStatusIdsObject () { + return keyBy(this.pinnedStatusIds) } }, components: { @@ -78,13 +101,15 @@ const Timeline = { }, methods: { handleShortKey (e) { + // Ignore when input fields are focused + if (['textarea', 'input'].includes(e.target.tagName.toLowerCase())) return if (e.key === '.') this.showNewStatuses() }, showNewStatuses () { if (this.newStatusCount === 0) return if (this.timeline.flushMarker !== 0) { - this.$store.commit('clearTimeline', { timeline: this.timelineName }) + this.$store.commit('clearTimeline', { timeline: this.timelineName, excludeUserId: true }) this.$store.commit('queueFlush', { timeline: this.timelineName, id: 0 }) this.fetchOlderStatuses() } else { @@ -137,7 +162,7 @@ const Timeline = { if (top < 15 && !this.paused && !(this.unfocused && this.$store.state.config.pauseOnUnfocused) - ) { + ) { this.showNewStatuses() } else { this.paused = true diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index e6a8d458..4ad51714 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -2,41 +2,78 @@ <div :class="classes.root"> <div :class="classes.header"> <div class="title"> - {{title}} + {{ title }} </div> - <div @click.prevent class="loadmore-error alert error" v-if="timelineError"> - {{$t('timeline.error_fetching')}} + <div + v-if="timelineError" + class="loadmore-error alert error" + @click.prevent + > + {{ $t('timeline.error_fetching') }} </div> - <button @click.prevent="showNewStatuses" class="loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError"> - {{$t('timeline.show_new')}}{{newStatusCountStr}} + <button + v-if="timeline.newStatusCount > 0 && !timelineError" + class="loadmore-button" + @click.prevent="showNewStatuses" + > + {{ $t('timeline.show_new') }}{{ newStatusCountStr }} </button> - <div @click.prevent class="loadmore-text faint" v-if="!timeline.newStatusCount > 0 && !timelineError"> - {{$t('timeline.up_to_date')}} + <div + v-if="!timeline.newStatusCount > 0 && !timelineError" + class="loadmore-text faint" + @click.prevent + > + {{ $t('timeline.up_to_date') }} </div> </div> <div :class="classes.body"> <div class="timeline"> - <conversation - v-for="status in timeline.visibleStatuses" - class="status-fadein" - :key="status.id" - :statusoid="status" - :collapsable="true" - /> + <template v-for="statusId in pinnedStatusIds"> + <conversation + v-if="timeline.statusesObject[statusId]" + :key="statusId + '-pinned'" + class="status-fadein" + :statusoid="timeline.statusesObject[statusId]" + :collapsable="true" + :pinned-status-ids-object="pinnedStatusIdsObject" + /> + </template> + <template v-for="status in timeline.visibleStatuses"> + <conversation + v-if="!excludedStatusIdsObject[status.id]" + :key="status.id" + class="status-fadein" + :statusoid="status" + :collapsable="true" + /> + </template> </div> </div> <div :class="classes.footer"> - <div v-if="count===0" class="new-status-notification text-center panel-footer faint"> - {{$t('timeline.no_statuses')}} + <div + v-if="count===0" + class="new-status-notification text-center panel-footer faint" + > + {{ $t('timeline.no_statuses') }} </div> - <div v-else-if="bottomedOut" class="new-status-notification text-center panel-footer faint"> - {{$t('timeline.no_more_statuses')}} + <div + v-else-if="bottomedOut" + class="new-status-notification text-center panel-footer faint" + > + {{ $t('timeline.no_more_statuses') }} </div> - <a v-else-if="!timeline.loading" href="#" v-on:click.prevent='fetchOlderStatuses()'> - <div class="new-status-notification text-center panel-footer">{{$t('timeline.load_older')}}</div> + <a + v-else-if="!timeline.loading" + href="#" + @click.prevent="fetchOlderStatuses()" + > + <div class="new-status-notification text-center panel-footer">{{ $t('timeline.load_older') }}</div> </a> - <div v-else class="new-status-notification text-center panel-footer"> - <i class="icon-spin3 animate-spin"/> + <div + v-else + class="new-status-notification text-center panel-footer" + > + <i class="icon-spin3 animate-spin" /> </div> </div> </div> |