you can now pin lists
This commit is contained in:
Henry Jameson
parent
04f8c2d29d
commit
77127e2a58
11 changed files with 103 additions and 249 deletions
|
|
@ -1,6 +1,8 @@
|
|||
import TimelineMenuContent from '../timeline_menu/timeline_menu_content.vue'
|
||||
import ListsMenuContent from '../lists_menu/lists_menu_content.vue'
|
||||
import { getListEntries, ListsMenuContent } from '../lists_menu/lists_menu_content.vue'
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
import { TIMELINES, ROOT_ITEMS } from 'src/components/navigation/navigation.js'
|
||||
import { filterNavigation } from 'src/components/navigation/filter.js'
|
||||
import NavigationEntry from 'src/components/navigation/navigation_entry.vue'
|
||||
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
|
|
@ -30,67 +32,6 @@ library.add(
|
|||
faStream,
|
||||
faList
|
||||
)
|
||||
|
||||
export const TIMELINES = {
|
||||
home: {
|
||||
route: 'friends',
|
||||
anonRoute: 'public-timeline',
|
||||
icon: 'home',
|
||||
label: 'nav.home_timeline',
|
||||
criteria: ['!private']
|
||||
},
|
||||
public: {
|
||||
route: 'public-timeline',
|
||||
anon: true,
|
||||
icon: 'users',
|
||||
label: 'nav.public_tl',
|
||||
criteria: ['!private']
|
||||
},
|
||||
twkn: {
|
||||
route: 'public-external-timeline',
|
||||
anon: true,
|
||||
icon: 'globe',
|
||||
label: 'nav.twkn',
|
||||
criteria: ['!private', 'federating']
|
||||
},
|
||||
bookmarks: {
|
||||
route: 'bookmarks',
|
||||
icon: 'bookmark',
|
||||
label: 'nav.bookmarks'
|
||||
},
|
||||
dms: {
|
||||
route: 'dms',
|
||||
icon: 'envelope',
|
||||
label: 'nav.dms'
|
||||
}
|
||||
}
|
||||
export const ROOT_ITEMS = {
|
||||
interactions: {
|
||||
route: 'interactions',
|
||||
icon: 'bell',
|
||||
label: 'nav.interactions'
|
||||
},
|
||||
chats: {
|
||||
route: 'chats',
|
||||
icon: 'comments',
|
||||
label: 'nav.chats',
|
||||
badgeGetter: 'unreadChatCount'
|
||||
},
|
||||
friendRequests: {
|
||||
route: 'friend-requests',
|
||||
icon: 'user-plus',
|
||||
label: 'nav.friend_requests',
|
||||
criteria: ['lockedUser'],
|
||||
badgeGetter: 'followRequestCount'
|
||||
},
|
||||
about: {
|
||||
route: 'about',
|
||||
anon: true,
|
||||
icon: 'info-circle',
|
||||
label: 'nav.about'
|
||||
}
|
||||
}
|
||||
|
||||
const NavPanel = {
|
||||
created () {
|
||||
if (this.currentUser && this.currentUser.locked) {
|
||||
|
|
@ -98,8 +39,8 @@ const NavPanel = {
|
|||
}
|
||||
},
|
||||
components: {
|
||||
TimelineMenuContent,
|
||||
ListsMenuContent
|
||||
ListsMenuContent,
|
||||
NavigationEntry
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
|
@ -134,6 +75,7 @@ const NavPanel = {
|
|||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
lists: getListEntries,
|
||||
currentUser: state => state.users.currentUser,
|
||||
followRequestCount: state => state.api.followRequests.length,
|
||||
privateMode: state => state.instance.private,
|
||||
|
|
@ -143,31 +85,36 @@ const NavPanel = {
|
|||
collapsed: state => state.serverSideStorage.prefsStorage.simple.collapseNav
|
||||
}),
|
||||
rootItems () {
|
||||
return Object
|
||||
.entries({ ...ROOT_ITEMS })
|
||||
.map(([k, v]) => ({ ...v, name: k }))
|
||||
.filter(({ criteria, anon, anonRoute }) => {
|
||||
const set = new Set(criteria || [])
|
||||
if (!this.federating && set.has('federating')) return false
|
||||
if (this.private && set.has('!private')) return false
|
||||
if (!this.currentUser && !(anon || anonRoute)) return false
|
||||
if ((!this.currentUser || !this.currentUser.locked) && set.has('lockedUser')) return false
|
||||
return true
|
||||
})
|
||||
return filterNavigation(
|
||||
Object
|
||||
.entries({ ...ROOT_ITEMS })
|
||||
.map(([k, v]) => ({ ...v, name: k })),
|
||||
{
|
||||
isFederating: this.federating,
|
||||
isPrivate: this.private,
|
||||
currentUser: this.currentUser
|
||||
}
|
||||
)
|
||||
},
|
||||
pinnedList () {
|
||||
return Object
|
||||
.entries({ ...TIMELINES, ...ROOT_ITEMS })
|
||||
.filter(([k]) => this.pinnedItems.has(k))
|
||||
.map(([k, v]) => ({ ...v, name: k }))
|
||||
.filter(({ criteria, anon, anonRoute }) => {
|
||||
const set = new Set(criteria || [])
|
||||
if (!this.federating && set.has('federating')) return false
|
||||
if (this.private && set.has('!private')) return false
|
||||
if (!this.currentUser && !(anon || anonRoute)) return false
|
||||
if (this.currentUser && !this.currentUser.locked && set.has('locked')) return false
|
||||
return true
|
||||
})
|
||||
return filterNavigation(
|
||||
[
|
||||
...Object
|
||||
.entries({
|
||||
...TIMELINES,
|
||||
...ROOT_ITEMS
|
||||
})
|
||||
.filter(([k]) => this.pinnedItems.has(k))
|
||||
.map(([k, v]) => ({ ...v, name: k })),
|
||||
...this.lists.filter((k) => this.pinnedItems.has(k.name))
|
||||
|
||||
],
|
||||
{
|
||||
isFederating: this.federating,
|
||||
isPrivate: this.private,
|
||||
currentUser: this.currentUser
|
||||
}
|
||||
)
|
||||
},
|
||||
...mapGetters(['unreadChatCount'])
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,13 +5,18 @@
|
|||
<span>
|
||||
<span v-for="item in pinnedList" :key="item.name" class="pinned-item">
|
||||
<router-link
|
||||
:to="{ name: (currentUser || item.anon) ? item.route : item.anonRoute, params: { username: currentUser.screen_name } }"
|
||||
:to="item.routeObject || { name: (currentUser || item.anon) ? item.route : item.anonRoute, params: { username: currentUser.screen_name } }"
|
||||
>
|
||||
<FAIcon
|
||||
v-if="item.icon"
|
||||
fixed-width
|
||||
class="fa-scale-110 fa-old-padding "
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
:icon="item.icon"
|
||||
/>
|
||||
<span
|
||||
v-if="item.iconLetter"
|
||||
class="iconLetter fa-scale-110 fa-old-padding"
|
||||
>{{ item.iconLetter }}</span>
|
||||
</router-link>
|
||||
</span>
|
||||
</span>
|
||||
|
|
@ -48,7 +53,9 @@
|
|||
v-show="showTimelines"
|
||||
class="timelines-background"
|
||||
>
|
||||
<TimelineMenuContent class="timelines" :content="timelinesList" />
|
||||
<ul class="timelines">
|
||||
<NavigationEntry v-for="item in timelinesList" :key="item.name" :show-pin="true" :item="item" />
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li v-if="currentUser">
|
||||
|
|
@ -81,34 +88,10 @@
|
|||
v-show="showLists"
|
||||
class="timelines-background"
|
||||
>
|
||||
<ListsMenuContent class="timelines" />
|
||||
<ListsMenuContent :showPin="true" class="timelines" />
|
||||
</div>
|
||||
</li>
|
||||
<li v-for="item in rootItems" :key="item.name">
|
||||
<router-link
|
||||
class="menu-item"
|
||||
:to="{ name: (currentUser || item.anon) ? item.route : item.anonRoute, params: { username: currentUser.screen_name } }"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
class="fa-scale-110 fa-old-padding "
|
||||
:icon="item.icon"
|
||||
/>{{ $t(item.label) }}
|
||||
<button
|
||||
type="button"
|
||||
class="button-unstyled"
|
||||
@click.stop.prevent="togglePin(item.name)"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
class="fa-scale-110 fa-old-padding "
|
||||
:class="{ 'veryfaint': !isPinned(item.name) }"
|
||||
:transform="!isPinned(item.name) ? 'rotate-45' : ''"
|
||||
icon="thumbtack"
|
||||
/>
|
||||
</button>
|
||||
</router-link>
|
||||
</li>
|
||||
<NavigationEntry v-for="item in rootItems" :key="item.name" :show-pin="true" :item="item" />
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -220,16 +203,13 @@
|
|||
margin-right: 0.8em;
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
right: 0.6rem;
|
||||
top: 1.25em;
|
||||
}
|
||||
|
||||
.pinned-item {
|
||||
.router-link-exact-active .svg-inline--fa {
|
||||
color: $fallback--text;
|
||||
color: var(--selectedMenuText, $fallback--text);
|
||||
.router-link-active {
|
||||
& .svg-inline--fa,
|
||||
& .iconLetter {
|
||||
color: $fallback--text;
|
||||
color: var(--selectedMenuText, $fallback--text);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue