Add timeline menu toggle to nav panel
This commit is contained in:
parent
aa240f935f
commit
98cb9abac7
|
@ -10,6 +10,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
|
||||||
|
|
||||||
### Changed
|
### Changed
|
||||||
- Display 'people voted' instead of 'votes' for multi-choice polls
|
- Display 'people voted' instead of 'votes' for multi-choice polls
|
||||||
|
- Changed the "Timelines" link in side panel to toggle show all timeline options inside the panel
|
||||||
|
- Renamed "Timeline" to "Home Timeline" to be more clear
|
||||||
|
|
||||||
## [2.2.3] - 2021-01-18
|
## [2.2.3] - 2021-01-18
|
||||||
### Added
|
### Added
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { timelineNames } from '../timeline_menu/timeline_menu.js'
|
import TimelineMenuContent from '../timeline_menu/timeline_menu_content.vue'
|
||||||
import { mapState, mapGetters } from 'vuex'
|
import { mapState, mapGetters } from 'vuex'
|
||||||
|
|
||||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||||
|
@ -7,10 +7,12 @@ import {
|
||||||
faGlobe,
|
faGlobe,
|
||||||
faBookmark,
|
faBookmark,
|
||||||
faEnvelope,
|
faEnvelope,
|
||||||
faHome,
|
faChevronDown,
|
||||||
|
faChevronUp,
|
||||||
faComments,
|
faComments,
|
||||||
faBell,
|
faBell,
|
||||||
faInfoCircle
|
faInfoCircle,
|
||||||
|
faStream
|
||||||
} from '@fortawesome/free-solid-svg-icons'
|
} from '@fortawesome/free-solid-svg-icons'
|
||||||
|
|
||||||
library.add(
|
library.add(
|
||||||
|
@ -18,10 +20,12 @@ library.add(
|
||||||
faGlobe,
|
faGlobe,
|
||||||
faBookmark,
|
faBookmark,
|
||||||
faEnvelope,
|
faEnvelope,
|
||||||
faHome,
|
faChevronDown,
|
||||||
|
faChevronUp,
|
||||||
faComments,
|
faComments,
|
||||||
faBell,
|
faBell,
|
||||||
faInfoCircle
|
faInfoCircle,
|
||||||
|
faStream
|
||||||
)
|
)
|
||||||
|
|
||||||
const NavPanel = {
|
const NavPanel = {
|
||||||
|
@ -30,16 +34,20 @@ const NavPanel = {
|
||||||
this.$store.dispatch('startFetchingFollowRequests')
|
this.$store.dispatch('startFetchingFollowRequests')
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
components: {
|
||||||
onTimelineRoute () {
|
TimelineMenuContent
|
||||||
return !!timelineNames()[this.$route.name]
|
|
||||||
},
|
},
|
||||||
timelinesRoute () {
|
data () {
|
||||||
if (this.$store.state.interface.lastTimeline) {
|
return {
|
||||||
return this.$store.state.interface.lastTimeline
|
showTimelines: false
|
||||||
}
|
}
|
||||||
return this.currentUser ? 'friends' : 'public-timeline'
|
|
||||||
},
|
},
|
||||||
|
methods: {
|
||||||
|
toggleTimelines () {
|
||||||
|
this.showTimelines = !this.showTimelines
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
...mapState({
|
...mapState({
|
||||||
currentUser: state => state.users.currentUser,
|
currentUser: state => state.users.currentUser,
|
||||||
followRequestCount: state => state.api.followRequests.length,
|
followRequestCount: state => state.api.followRequests.length,
|
||||||
|
|
|
@ -3,19 +3,33 @@
|
||||||
<div class="panel panel-default">
|
<div class="panel panel-default">
|
||||||
<ul>
|
<ul>
|
||||||
<li v-if="currentUser || !privateMode">
|
<li v-if="currentUser || !privateMode">
|
||||||
<router-link
|
<button
|
||||||
:to="{ name: timelinesRoute }"
|
class="button-unstyled menu-item"
|
||||||
:class="onTimelineRoute && 'router-link-active'"
|
@click="toggleTimelines"
|
||||||
>
|
>
|
||||||
<FAIcon
|
<FAIcon
|
||||||
fixed-width
|
fixed-width
|
||||||
class="fa-scale-110"
|
class="fa-scale-110"
|
||||||
icon="home"
|
icon="stream"
|
||||||
/>{{ $t("nav.timelines") }}
|
/>{{ $t("nav.timelines") }}
|
||||||
</router-link>
|
<FAIcon
|
||||||
|
class="timelines-chevron"
|
||||||
|
fixed-width
|
||||||
|
:icon="showTimelines ? 'chevron-up' : 'chevron-down'"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
<div
|
||||||
|
v-show="showTimelines"
|
||||||
|
class="timelines-background"
|
||||||
|
>
|
||||||
|
<TimelineMenuContent class="timelines" />
|
||||||
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li v-if="currentUser">
|
<li v-if="currentUser">
|
||||||
<router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
|
<router-link
|
||||||
|
class="menu-item"
|
||||||
|
:to="{ name: 'interactions', params: { username: currentUser.screen_name } }"
|
||||||
|
>
|
||||||
<FAIcon
|
<FAIcon
|
||||||
fixed-width
|
fixed-width
|
||||||
class="fa-scale-110"
|
class="fa-scale-110"
|
||||||
|
@ -24,7 +38,10 @@
|
||||||
</router-link>
|
</router-link>
|
||||||
</li>
|
</li>
|
||||||
<li v-if="currentUser && pleromaChatMessagesAvailable">
|
<li v-if="currentUser && pleromaChatMessagesAvailable">
|
||||||
<router-link :to="{ name: 'chats', params: { username: currentUser.screen_name } }">
|
<router-link
|
||||||
|
class="menu-item"
|
||||||
|
:to="{ name: 'chats', params: { username: currentUser.screen_name } }"
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
v-if="unreadChatCount"
|
v-if="unreadChatCount"
|
||||||
class="badge badge-notification"
|
class="badge badge-notification"
|
||||||
|
@ -39,7 +56,10 @@
|
||||||
</router-link>
|
</router-link>
|
||||||
</li>
|
</li>
|
||||||
<li v-if="currentUser && currentUser.locked">
|
<li v-if="currentUser && currentUser.locked">
|
||||||
<router-link :to="{ name: 'friend-requests' }">
|
<router-link
|
||||||
|
class="menu-item"
|
||||||
|
:to="{ name: 'friend-requests' }"
|
||||||
|
>
|
||||||
<FAIcon
|
<FAIcon
|
||||||
fixed-width
|
fixed-width
|
||||||
class="fa-scale-110"
|
class="fa-scale-110"
|
||||||
|
@ -54,7 +74,10 @@
|
||||||
</router-link>
|
</router-link>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<router-link :to="{ name: 'about' }">
|
<router-link
|
||||||
|
class="menu-item"
|
||||||
|
:to="{ name: 'about' }"
|
||||||
|
>
|
||||||
<FAIcon
|
<FAIcon
|
||||||
fixed-width
|
fixed-width
|
||||||
class="fa-scale-110"
|
class="fa-scale-110"
|
||||||
|
@ -91,14 +114,14 @@
|
||||||
border-color: var(--border, $fallback--border);
|
border-color: var(--border, $fallback--border);
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
&:first-child a {
|
&:first-child .menu-item {
|
||||||
border-top-right-radius: $fallback--panelRadius;
|
border-top-right-radius: $fallback--panelRadius;
|
||||||
border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
|
border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
|
||||||
border-top-left-radius: $fallback--panelRadius;
|
border-top-left-radius: $fallback--panelRadius;
|
||||||
border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
|
border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-child a {
|
&:last-child .menu-item {
|
||||||
border-bottom-right-radius: $fallback--panelRadius;
|
border-bottom-right-radius: $fallback--panelRadius;
|
||||||
border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
|
border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
|
||||||
border-bottom-left-radius: $fallback--panelRadius;
|
border-bottom-left-radius: $fallback--panelRadius;
|
||||||
|
@ -110,13 +133,15 @@
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
.menu-item {
|
||||||
display: block;
|
display: block;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
align-items: stretch;
|
|
||||||
height: 3.5em;
|
height: 3.5em;
|
||||||
line-height: 3.5em;
|
line-height: 3.5em;
|
||||||
padding: 0 1em;
|
padding: 0 1em;
|
||||||
|
width: 100%;
|
||||||
|
color: $fallback--link;
|
||||||
|
color: var(--link, $fallback--link);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: $fallback--lightBg;
|
background-color: $fallback--lightBg;
|
||||||
|
@ -146,6 +171,25 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.timelines-chevron {
|
||||||
|
margin-left: 0.8em;
|
||||||
|
font-size: 1.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timelines-background {
|
||||||
|
padding: 0 0 0 0.6em;
|
||||||
|
background-color: $fallback--lightBg;
|
||||||
|
background-color: var(--selectedMenu, $fallback--lightBg);
|
||||||
|
border-top: 1px solid;
|
||||||
|
border-color: $fallback--border;
|
||||||
|
border-color: var(--border, $fallback--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.timelines {
|
||||||
|
background-color: $fallback--bg;
|
||||||
|
background-color: var(--bg, $fallback--bg);
|
||||||
|
}
|
||||||
|
|
||||||
.fa-scale-110 {
|
.fa-scale-110 {
|
||||||
margin-right: 0.8em;
|
margin-right: 0.8em;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,29 +1,17 @@
|
||||||
import Popover from '../popover/popover.vue'
|
import Popover from '../popover/popover.vue'
|
||||||
import { mapState } from 'vuex'
|
import TimelineMenuContent from './timeline_menu_content.vue'
|
||||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||||
import {
|
import {
|
||||||
faUsers,
|
|
||||||
faGlobe,
|
|
||||||
faBookmark,
|
|
||||||
faEnvelope,
|
|
||||||
faHome,
|
|
||||||
faChevronDown
|
faChevronDown
|
||||||
} from '@fortawesome/free-solid-svg-icons'
|
} from '@fortawesome/free-solid-svg-icons'
|
||||||
|
|
||||||
library.add(
|
library.add(faChevronDown)
|
||||||
faUsers,
|
|
||||||
faGlobe,
|
|
||||||
faBookmark,
|
|
||||||
faEnvelope,
|
|
||||||
faHome,
|
|
||||||
faChevronDown
|
|
||||||
)
|
|
||||||
|
|
||||||
// Route -> i18n key mapping, exported and not in the computed
|
// Route -> i18n key mapping, exported and not in the computed
|
||||||
// because nav panel benefits from the same information.
|
// because nav panel benefits from the same information.
|
||||||
export const timelineNames = () => {
|
export const timelineNames = () => {
|
||||||
return {
|
return {
|
||||||
'friends': 'nav.timeline',
|
'friends': 'nav.home_timeline',
|
||||||
'bookmarks': 'nav.bookmarks',
|
'bookmarks': 'nav.bookmarks',
|
||||||
'dms': 'nav.dms',
|
'dms': 'nav.dms',
|
||||||
'public-timeline': 'nav.public_tl',
|
'public-timeline': 'nav.public_tl',
|
||||||
|
@ -33,7 +21,8 @@ export const timelineNames = () => {
|
||||||
|
|
||||||
const TimelineMenu = {
|
const TimelineMenu = {
|
||||||
components: {
|
components: {
|
||||||
Popover
|
Popover,
|
||||||
|
TimelineMenuContent
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
@ -41,9 +30,6 @@ const TimelineMenu = {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created () {
|
created () {
|
||||||
if (this.currentUser && this.currentUser.locked) {
|
|
||||||
this.$store.dispatch('startFetchingFollowRequests')
|
|
||||||
}
|
|
||||||
if (timelineNames()[this.$route.name]) {
|
if (timelineNames()[this.$route.name]) {
|
||||||
this.$store.dispatch('setLastTimeline', this.$route.name)
|
this.$store.dispatch('setLastTimeline', this.$route.name)
|
||||||
}
|
}
|
||||||
|
@ -75,13 +61,6 @@ const TimelineMenu = {
|
||||||
const i18nkey = timelineNames()[this.$route.name]
|
const i18nkey = timelineNames()[this.$route.name]
|
||||||
return i18nkey ? this.$t(i18nkey) : route
|
return i18nkey ? this.$t(i18nkey) : route
|
||||||
}
|
}
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
...mapState({
|
|
||||||
currentUser: state => state.users.currentUser,
|
|
||||||
privateMode: state => state.instance.private,
|
|
||||||
federating: state => state.instance.federating
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -13,53 +13,7 @@
|
||||||
slot="content"
|
slot="content"
|
||||||
class="timeline-menu-popover panel panel-default"
|
class="timeline-menu-popover panel panel-default"
|
||||||
>
|
>
|
||||||
<ul>
|
<TimelineMenuContent />
|
||||||
<li v-if="currentUser">
|
|
||||||
<router-link :to="{ name: 'friends' }">
|
|
||||||
<FAIcon
|
|
||||||
fixed-width
|
|
||||||
class="fa-scale-110 fa-old-padding "
|
|
||||||
icon="home"
|
|
||||||
/>{{ $t("nav.timeline") }}
|
|
||||||
</router-link>
|
|
||||||
</li>
|
|
||||||
<li v-if="currentUser">
|
|
||||||
<router-link :to="{ name: 'bookmarks'}">
|
|
||||||
<FAIcon
|
|
||||||
fixed-width
|
|
||||||
class="fa-scale-110 fa-old-padding "
|
|
||||||
icon="bookmark"
|
|
||||||
/>{{ $t("nav.bookmarks") }}
|
|
||||||
</router-link>
|
|
||||||
</li>
|
|
||||||
<li v-if="currentUser">
|
|
||||||
<router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
|
|
||||||
<FAIcon
|
|
||||||
fixed-width
|
|
||||||
class="fa-scale-110 fa-old-padding "
|
|
||||||
icon="envelope"
|
|
||||||
/>{{ $t("nav.dms") }}
|
|
||||||
</router-link>
|
|
||||||
</li>
|
|
||||||
<li v-if="currentUser || !privateMode">
|
|
||||||
<router-link :to="{ name: 'public-timeline' }">
|
|
||||||
<FAIcon
|
|
||||||
fixed-width
|
|
||||||
class="fa-scale-110 fa-old-padding "
|
|
||||||
icon="users"
|
|
||||||
/>{{ $t("nav.public_tl") }}
|
|
||||||
</router-link>
|
|
||||||
</li>
|
|
||||||
<li v-if="federating && (currentUser || !privateMode)">
|
|
||||||
<router-link :to="{ name: 'public-external-timeline' }">
|
|
||||||
<FAIcon
|
|
||||||
fixed-width
|
|
||||||
class="fa-scale-110 fa-old-padding "
|
|
||||||
icon="globe"
|
|
||||||
/>{{ $t("nav.twkn") }}
|
|
||||||
</router-link>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
slot="trigger"
|
slot="trigger"
|
||||||
|
|
|
@ -0,0 +1,29 @@
|
||||||
|
import { mapState } from 'vuex'
|
||||||
|
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||||
|
import {
|
||||||
|
faUsers,
|
||||||
|
faGlobe,
|
||||||
|
faBookmark,
|
||||||
|
faEnvelope,
|
||||||
|
faHome
|
||||||
|
} from '@fortawesome/free-solid-svg-icons'
|
||||||
|
|
||||||
|
library.add(
|
||||||
|
faUsers,
|
||||||
|
faGlobe,
|
||||||
|
faBookmark,
|
||||||
|
faEnvelope,
|
||||||
|
faHome
|
||||||
|
)
|
||||||
|
|
||||||
|
const TimelineMenuContent = {
|
||||||
|
computed: {
|
||||||
|
...mapState({
|
||||||
|
currentUser: state => state.users.currentUser,
|
||||||
|
privateMode: state => state.instance.private,
|
||||||
|
federating: state => state.instance.federating
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default TimelineMenuContent
|
|
@ -0,0 +1,66 @@
|
||||||
|
<template>
|
||||||
|
<ul>
|
||||||
|
<li v-if="currentUser">
|
||||||
|
<router-link
|
||||||
|
class="menu-item"
|
||||||
|
:to="{ name: 'friends' }"
|
||||||
|
>
|
||||||
|
<FAIcon
|
||||||
|
fixed-width
|
||||||
|
class="fa-scale-110 fa-old-padding "
|
||||||
|
icon="home"
|
||||||
|
/>{{ $t("nav.home_timeline") }}
|
||||||
|
</router-link>
|
||||||
|
</li>
|
||||||
|
<li v-if="currentUser || !privateMode">
|
||||||
|
<router-link
|
||||||
|
class="menu-item"
|
||||||
|
:to="{ name: 'public-timeline' }"
|
||||||
|
>
|
||||||
|
<FAIcon
|
||||||
|
fixed-width
|
||||||
|
class="fa-scale-110 fa-old-padding "
|
||||||
|
icon="users"
|
||||||
|
/>{{ $t("nav.public_tl") }}
|
||||||
|
</router-link>
|
||||||
|
</li>
|
||||||
|
<li v-if="federating && (currentUser || !privateMode)">
|
||||||
|
<router-link
|
||||||
|
class="menu-item"
|
||||||
|
:to="{ name: 'public-external-timeline' }"
|
||||||
|
>
|
||||||
|
<FAIcon
|
||||||
|
fixed-width
|
||||||
|
class="fa-scale-110 fa-old-padding "
|
||||||
|
icon="globe"
|
||||||
|
/>{{ $t("nav.twkn") }}
|
||||||
|
</router-link>
|
||||||
|
</li>
|
||||||
|
<li v-if="currentUser">
|
||||||
|
<router-link
|
||||||
|
class="menu-item"
|
||||||
|
:to="{ name: 'bookmarks'}"
|
||||||
|
>
|
||||||
|
<FAIcon
|
||||||
|
fixed-width
|
||||||
|
class="fa-scale-110 fa-old-padding "
|
||||||
|
icon="bookmark"
|
||||||
|
/>{{ $t("nav.bookmarks") }}
|
||||||
|
</router-link>
|
||||||
|
</li>
|
||||||
|
<li v-if="currentUser">
|
||||||
|
<router-link
|
||||||
|
class="menu-item"
|
||||||
|
:to="{ name: 'dms', params: { username: currentUser.screen_name } }"
|
||||||
|
>
|
||||||
|
<FAIcon
|
||||||
|
fixed-width
|
||||||
|
class="fa-scale-110 fa-old-padding "
|
||||||
|
icon="envelope"
|
||||||
|
/>{{ $t("nav.dms") }}
|
||||||
|
</router-link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script src="./timeline_menu_content.js" ></script>
|
|
@ -124,6 +124,7 @@
|
||||||
"dms": "Direct Messages",
|
"dms": "Direct Messages",
|
||||||
"public_tl": "Public Timeline",
|
"public_tl": "Public Timeline",
|
||||||
"timeline": "Timeline",
|
"timeline": "Timeline",
|
||||||
|
"home_timeline": "Home Timeline",
|
||||||
"twkn": "Known Network",
|
"twkn": "Known Network",
|
||||||
"bookmarks": "Bookmarks",
|
"bookmarks": "Bookmarks",
|
||||||
"user_search": "User Search",
|
"user_search": "User Search",
|
||||||
|
|
Loading…
Reference in New Issue