diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/nav_panel/nav_panel.vue | 20 | ||||
| -rw-r--r-- | src/components/timeline/timeline.js | 10 | ||||
| -rw-r--r-- | src/components/timeline/timeline.vue | 4 | ||||
| -rw-r--r-- | src/components/timeline_menu/timeline_menu.js | 30 | ||||
| -rw-r--r-- | src/components/timeline_menu/timeline_menu.vue | 62 |
5 files changed, 104 insertions, 22 deletions
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue index 8cd04dc7..ed70f019 100644 --- a/src/components/nav_panel/nav_panel.vue +++ b/src/components/nav_panel/nav_panel.vue @@ -7,14 +7,14 @@ <i class="button-icon icon-home-2" /> {{ $t("nav.timeline") }} </router-link> </li> - <li v-if="currentUser"> - <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }"> - <i class="button-icon icon-bell-alt" /> {{ $t("nav.interactions") }} + <li v-else-if="!privateMode"> + <router-link :to="{ name: 'public-timeline' }"> + <i class="button-icon icon-users" /> {{ $t("nav.public_tl") }} </router-link> </li> <li v-if="currentUser"> - <router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }"> - <i class="button-icon icon-mail-alt" /> {{ $t("nav.dms") }} + <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }"> + <i class="button-icon icon-bell-alt" /> {{ $t("nav.interactions") }} </router-link> </li> <li v-if="currentUser && currentUser.locked"> @@ -28,16 +28,6 @@ </span> </router-link> </li> - <li v-if="currentUser || !privateMode"> - <router-link :to="{ name: 'public-timeline' }"> - <i class="button-icon icon-users" /> {{ $t("nav.public_tl") }} - </router-link> - </li> - <li v-if="federating && (currentUser || !privateMode)"> - <router-link :to="{ name: 'public-external-timeline' }"> - <i class="button-icon icon-globe" /> {{ $t("nav.twkn") }} - </router-link> - </li> <li> <router-link :to="{ name: 'about' }"> <i class="button-icon icon-info-circled" /> {{ $t("nav.about") }} diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js index d6519f4a..3a7a4268 100644 --- a/src/components/timeline/timeline.js +++ b/src/components/timeline/timeline.js @@ -1,6 +1,7 @@ import Status from '../status/status.vue' import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js' import Conversation from '../conversation/conversation.vue' +import TimelineMenu from '../timeline_menu/timeline_menu.vue' import { throttle, keyBy } from 'lodash' export const getExcludedStatusIdsByPinning = (statuses, pinnedStatusIds) => { @@ -35,6 +36,11 @@ const Timeline = { bottomedOut: false } }, + components: { + Status, + Conversation, + TimelineMenu + }, computed: { timelineError () { return this.$store.state.statuses.error @@ -74,10 +80,6 @@ const Timeline = { return keyBy(this.pinnedStatusIds) } }, - components: { - Status, - Conversation - }, created () { const store = this.$store const credentials = store.state.users.currentUser.credentials diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index 111c0976..f8baaf19 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -1,9 +1,7 @@ <template> <div :class="classes.root"> <div :class="classes.header"> - <div class="title"> - {{ title }} - </div> + <TimelineMenu /> <div v-if="timelineError" class="loadmore-error alert error" diff --git a/src/components/timeline_menu/timeline_menu.js b/src/components/timeline_menu/timeline_menu.js new file mode 100644 index 00000000..912dd79a --- /dev/null +++ b/src/components/timeline_menu/timeline_menu.js @@ -0,0 +1,30 @@ +import Popover from '../popover/popover.vue' +import { mapState } from 'vuex' + +const TimelineMenu = { + components: { + Popover + }, + created () { + if (this.currentUser && this.currentUser.locked) { + this.$store.dispatch('startFetchingFollowRequests') + } + }, + computed: { + ...mapState({ + currentUser: state => state.users.currentUser, + privateMode: state => state.instance.private, + federating: state => state.instance.federating + }), + timelineNamesForRoute () { + return { + 'friends': this.$t('nav.timeline'), + 'dms': this.$t('nav.dms'), + 'public-timeline': this.$t('nav.public_tl'), + 'public-external-timeline': this.$t('nav.twkn') + } + } + } +} + +export default TimelineMenu diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue new file mode 100644 index 00000000..dfdf7180 --- /dev/null +++ b/src/components/timeline_menu/timeline_menu.vue @@ -0,0 +1,62 @@ +<template> + <Popover + trigger="click" + class="timeline-menu" + popover-class="nav-panel timeline-menu-popover" + > + <div slot="content"> + <ul> + <li v-if="currentUser"> + <router-link :to="{ name: 'friends' }"> + <i class="button-icon icon-home-2" /> {{ $t("nav.timeline") }} + </router-link> + </li> + <li v-if="currentUser"> + <router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }"> + <i class="button-icon icon-mail-alt" /> {{ $t("nav.dms") }} + </router-link> + </li> + <li v-if="currentUser || !privateMode"> + <router-link :to="{ name: 'public-timeline' }"> + <i class="button-icon icon-users" /> {{ $t("nav.public_tl") }} + </router-link> + </li> + <li v-if="federating && (currentUser || !privateMode)"> + <router-link :to="{ name: 'public-external-timeline' }"> + <i class="button-icon icon-globe" /> {{ $t("nav.twkn") }} + </router-link> + </li> + </ul> + </div> + <div + slot="trigger" + class="title timeline-menu-title" + > + {{ timelineNamesForRoute[$route.name] }} + <i class="icon-down-open" /> + </div> + </Popover> +</template> + +<script src="./timeline_menu.js" ></script> + +<style lang="scss"> +@import '../../_variables.scss'; + +.timeline-menu { + flex-grow: 1; + .timeline-menu-popover { + width: 20rem; + font-size: 1rem; + margin-left: -0.6em; + margin-top: 0.6em; + } + + .timeline-menu-title { + flex-grow: 0; + width: 20rem; + margin: 0; + } +} + +</style> |