timeline panel nav (#131)
Reviewed-on: https://akkoma.dev/AkkomaGang/pleroma-fe/pulls/131
This commit is contained in:
floatingghost
parent
ca0b730605
commit
64fdde52f6
15 changed files with 349 additions and 21 deletions
30
src/components/timeline_menu_tabs/timeline_menu_content.js
Normal file
30
src/components/timeline_menu_tabs/timeline_menu_content.js
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
import { mapState } from 'vuex'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faUsers,
|
||||
faGlobe,
|
||||
faBookmark,
|
||||
faEnvelope,
|
||||
faHome
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
import { faCircle } from '@fortawesome/free-regular-svg-icons'
|
||||
library.add(
|
||||
faUsers,
|
||||
faGlobe,
|
||||
faBookmark,
|
||||
faEnvelope,
|
||||
faHome,
|
||||
faCircle
|
||||
)
|
||||
|
||||
const TimelineMenuContent = {
|
||||
computed: {
|
||||
...mapState({
|
||||
currentUser: state => state.users.currentUser,
|
||||
privateMode: state => state.instance.private,
|
||||
federating: state => state.instance.federating
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export default TimelineMenuContent
|
||||
114
src/components/timeline_menu_tabs/timeline_menu_content.vue
Normal file
114
src/components/timeline_menu_tabs/timeline_menu_content.vue
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
<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"
|
||||
/>
|
||||
<span
|
||||
:title="$t('nav.home_timeline_description')"
|
||||
:aria-label="$t('nav.home_timeline_description')"
|
||||
>{{ $t("nav.home_timeline") }}</span>
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-if="currentUser">
|
||||
<router-link
|
||||
class="menu-item"
|
||||
:to="{ name: 'bubble-timeline' }"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
class="fa-scale-110 fa-old-padding "
|
||||
:icon="['far', 'circle']"
|
||||
/>
|
||||
<span
|
||||
:title="$t('nav.bubble_timeline_description')"
|
||||
:aria-label="$t('nav.bubble_timeline_description')"
|
||||
>{{ $t("nav.bubble_timeline") }}</span>
|
||||
</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"
|
||||
/>
|
||||
<span
|
||||
:title="$t('nav.public_timeline_description')"
|
||||
:aria-label="$t('nav.public_timeline_description')"
|
||||
>{{ $t("nav.public_tl") }}</span>
|
||||
</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"
|
||||
/>
|
||||
<span
|
||||
:title="$t('nav.twkn_timeline_description')"
|
||||
:aria-label="$t('nav.twkn_timeline_description')"
|
||||
>{{ $t("nav.twkn") }}</span>
|
||||
</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"
|
||||
/>
|
||||
<span
|
||||
:title="$t('nav.bookmarks')"
|
||||
:aria-label="$t('nav.bookmarks')"
|
||||
>{{ $t("nav.bookmarks") }}</span>
|
||||
</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"
|
||||
/>
|
||||
<span
|
||||
:title="$t('nav.dms')"
|
||||
:aria-label="$t('nav.dms')"
|
||||
>{{ $t("nav.dms") }}</span>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script src="./timeline_menu_content.js" ></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../_variables.scss";
|
||||
.timeline-desc {
|
||||
text-decoration: none;
|
||||
color: var(--text, $fallback--text);
|
||||
padding-left: 1em;
|
||||
display: block;
|
||||
background-color: scale(var(--bg, $fallback--bg), 0.1);
|
||||
padding-bottom: 0.4em;
|
||||
}
|
||||
</style>
|
||||
61
src/components/timeline_menu_tabs/timeline_menu_tabs.js
Normal file
61
src/components/timeline_menu_tabs/timeline_menu_tabs.js
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
import Popover from '../popover/popover.vue'
|
||||
import TimelineMenuContent from './timeline_menu_content.vue'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faChevronDown
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(faChevronDown)
|
||||
|
||||
// Route -> i18n key mapping, exported and not in the computed
|
||||
// because nav panel benefits from the same information.
|
||||
export const timelineNames = () => {
|
||||
return {
|
||||
'friends': 'nav.home_timeline',
|
||||
'bookmarks': 'nav.bookmarks',
|
||||
'dms': 'nav.dms',
|
||||
'public-timeline': 'nav.public_tl',
|
||||
'public-external-timeline': 'nav.twkn',
|
||||
'bubble-timeline': 'nav.bubble_timeline'
|
||||
}
|
||||
}
|
||||
|
||||
const TimelineMenuTabs = {
|
||||
components: {
|
||||
Popover,
|
||||
TimelineMenuContent
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
isOpen: false
|
||||
}
|
||||
},
|
||||
created () {
|
||||
if (timelineNames()[this.$route.name]) {
|
||||
this.$store.dispatch('setLastTimeline', this.$route.name)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentUser () {
|
||||
return this.$store.state.users.currentUser
|
||||
},
|
||||
privateMode () {
|
||||
return this.$store.state.instance.private
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
timelineName () {
|
||||
const route = this.$route.name
|
||||
if (route === 'tag-timeline') {
|
||||
return '#' + this.$route.params.tag
|
||||
}
|
||||
if (route === 'list-timeline') {
|
||||
return this.$store.getters.findListTitle(this.$route.params.id)
|
||||
}
|
||||
const i18nkey = timelineNames()[this.$route.name]
|
||||
return i18nkey ? this.$t(i18nkey) : route
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default TimelineMenuTabs
|
||||
96
src/components/timeline_menu_tabs/timeline_menu_tabs.vue
Normal file
96
src/components/timeline_menu_tabs/timeline_menu_tabs.vue
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
<template>
|
||||
<div
|
||||
v-if="currentUser || !privateMode"
|
||||
class="nav-items timeline-menu-tabs"
|
||||
>
|
||||
<router-link
|
||||
v-if="currentUser"
|
||||
:to="{ name: 'friends' }"
|
||||
class="nav-icon"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="home"
|
||||
:title="$t('nav.home_timeline_description')"
|
||||
/>
|
||||
</router-link>
|
||||
<router-link
|
||||
:to="{ name: 'public-timeline' }"
|
||||
class="nav-icon"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="users"
|
||||
:title="$t('nav.public_timeline_description')"
|
||||
/>
|
||||
</router-link>
|
||||
<router-link
|
||||
v-if="currentUser"
|
||||
:to="{ name: 'bubble-timeline' }"
|
||||
class="nav-icon"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
:icon="['far', 'circle']"
|
||||
:title="$t('nav.bubble_timeline_description')"
|
||||
/>
|
||||
</router-link>
|
||||
<router-link
|
||||
:to="{ name: 'public-external-timeline' }"
|
||||
class="nav-icon"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="globe"
|
||||
:title="$t('nav.twkn_timeline_description')"
|
||||
/>
|
||||
</router-link>
|
||||
<span class="timeline-title">{{ timelineName() }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./timeline_menu_tabs.js" ></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../_variables.scss';
|
||||
|
||||
.timeline-menu-tabs {
|
||||
.nav-icon {
|
||||
margin-left: 0.7em;
|
||||
width: 2em;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
|
||||
&.router-link-active {
|
||||
border-bottom: 2px solid var(--selectedMenuText, $fallback--text);
|
||||
padding-bottom: 0.8em;
|
||||
|
||||
.svg-inline--fa {
|
||||
font-weight: bolder;
|
||||
color: $fallback--text;
|
||||
color: var(--selectedMenuText, $fallback--text);
|
||||
--lightText: var(--selectedMenuLightText, $fallback--lightText);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-title {
|
||||
margin-left: 1em;
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
color: var(--selectedMenuText, $fallback--text);
|
||||
color: var(--selectedMenuText, $fallback--text);
|
||||
--lightText: var(--selectedMenuLightText, $fallback--lightText);
|
||||
}
|
||||
|
||||
@media all and (max-width: 900px) {
|
||||
.timeline-title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue