basic version done, needs cleanup from nav panel styles

This commit is contained in:
Shpuld Shpuldson 2020-07-02 18:03:02 +03:00
parent e1cf6bd41c
commit 961099d34a
5 changed files with 104 additions and 22 deletions

View File

@ -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") }}

View File

@ -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

View File

@ -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"

View File

@ -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

View File

@ -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>