diff options
Diffstat (limited to 'src/components/nav_panel')
| -rw-r--r-- | src/components/nav_panel/nav_panel.js | 25 | ||||
| -rw-r--r-- | src/components/nav_panel/nav_panel.vue | 42 |
2 files changed, 36 insertions, 31 deletions
diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js index aa3f7605..d9268585 100644 --- a/src/components/nav_panel/nav_panel.js +++ b/src/components/nav_panel/nav_panel.js @@ -1,25 +1,18 @@ -import followRequestFetcher from '../../services/follow_request_fetcher/follow_request_fetcher.service' +import { mapState } from 'vuex' const NavPanel = { created () { if (this.currentUser && this.currentUser.locked) { - const store = this.$store - const credentials = store.state.users.currentUser.credentials - - followRequestFetcher.startFetching({ store, credentials }) + this.$store.dispatch('startFetchingFollowRequest') } }, - computed: { - currentUser () { - return this.$store.state.users.currentUser - }, - chat () { - return this.$store.state.chat.channel - }, - followRequestCount () { - return this.$store.state.api.followRequests.length - } - } + computed: mapState({ + currentUser: state => state.users.currentUser, + chat: state => state.chat.channel, + followRequestCount: state => state.api.followRequests.length, + privateMode: state => state.instance.private, + federating: state => state.instance.federating + }) } export default NavPanel diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue index 7a7212fb..034259d9 100644 --- a/src/components/nav_panel/nav_panel.vue +++ b/src/components/nav_panel/nav_panel.vue @@ -2,37 +2,45 @@ <div class="nav-panel"> <div class="panel panel-default"> <ul> - <li v-if='currentUser'> + <li v-if="currentUser"> <router-link :to="{ name: 'friends' }"> - {{ $t("nav.timeline") }} + <i class="button-icon icon-home-2" /> {{ $t("nav.timeline") }} </router-link> </li> - <li v-if='currentUser'> - <router-link :to="{ name: 'mentions', params: { username: currentUser.screen_name } }"> - {{ $t("nav.mentions") }} + <li v-if="currentUser"> + <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'> + <li v-if="currentUser"> <router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }"> - {{ $t("nav.dms") }} + <i class="button-icon icon-mail-alt" /> {{ $t("nav.dms") }} </router-link> </li> - <li v-if='currentUser && currentUser.locked'> + <li v-if="currentUser && currentUser.locked"> <router-link :to="{ name: 'friend-requests' }"> - {{ $t("nav.friend_requests")}} - <span v-if='followRequestCount > 0' class="badge follow-request-count"> - {{followRequestCount}} + <i class="button-icon icon-user-plus" /> {{ $t("nav.friend_requests") }} + <span + v-if="followRequestCount > 0" + class="badge follow-request-count" + > + {{ followRequestCount }} </span> </router-link> </li> - <li> + <li v-if="currentUser || !privateMode"> <router-link :to="{ name: 'public-timeline' }"> - {{ $t("nav.public_tl") }} + <i class="button-icon icon-users" /> {{ $t("nav.public_tl") }} </router-link> </li> - <li> + <li v-if="federating && !privateMode"> <router-link :to="{ name: 'public-external-timeline' }"> - {{ $t("nav.twkn") }} + <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") }} </router-link> </li> </ul> @@ -105,4 +113,8 @@ } } } + +.nav-panel .button-icon:before { + width: 1.1em; +} </style> |