Navigation update + preferences storage (and some minor fixes) See merge request pleroma/pleroma-fe!1592merge-requests/1699/head
commit
8b25febe36
@ -1,79 +0,0 @@
|
|||||||
import { mapState, mapGetters } from 'vuex'
|
|
||||||
import BasicUserCard from '../basic_user_card/basic_user_card.vue'
|
|
||||||
import UserAvatar from '../user_avatar/user_avatar.vue'
|
|
||||||
import ListsUserSearch from '../lists_user_search/lists_user_search.vue'
|
|
||||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
|
||||||
import {
|
|
||||||
faSearch,
|
|
||||||
faChevronLeft
|
|
||||||
} from '@fortawesome/free-solid-svg-icons'
|
|
||||||
|
|
||||||
library.add(
|
|
||||||
faSearch,
|
|
||||||
faChevronLeft
|
|
||||||
)
|
|
||||||
|
|
||||||
const ListsNew = {
|
|
||||||
components: {
|
|
||||||
BasicUserCard,
|
|
||||||
UserAvatar,
|
|
||||||
ListsUserSearch
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
title: '',
|
|
||||||
userIds: [],
|
|
||||||
selectedUserIds: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
users () {
|
|
||||||
return this.userIds.map(userId => this.findUser(userId))
|
|
||||||
},
|
|
||||||
selectedUsers () {
|
|
||||||
return this.selectedUserIds.map(userId => this.findUser(userId))
|
|
||||||
},
|
|
||||||
...mapState({
|
|
||||||
currentUser: state => state.users.currentUser
|
|
||||||
}),
|
|
||||||
...mapGetters(['findUser'])
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
goBack () {
|
|
||||||
this.$emit('cancel')
|
|
||||||
},
|
|
||||||
onInput () {
|
|
||||||
this.search(this.query)
|
|
||||||
},
|
|
||||||
selectUser (user) {
|
|
||||||
if (this.selectedUserIds.includes(user.id)) {
|
|
||||||
this.removeUser(user.id)
|
|
||||||
} else {
|
|
||||||
this.addUser(user)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
isSelected (user) {
|
|
||||||
return this.selectedUserIds.includes(user.id)
|
|
||||||
},
|
|
||||||
addUser (user) {
|
|
||||||
this.selectedUserIds.push(user.id)
|
|
||||||
},
|
|
||||||
removeUser (userId) {
|
|
||||||
this.selectedUserIds = this.selectedUserIds.filter(id => id !== userId)
|
|
||||||
},
|
|
||||||
onResults (results) {
|
|
||||||
this.userIds = results
|
|
||||||
},
|
|
||||||
createList () {
|
|
||||||
// the API has two different endpoints for "creating a list with a name"
|
|
||||||
// and "updating the accounts on the list".
|
|
||||||
this.$store.dispatch('createList', { title: this.title })
|
|
||||||
.then((list) => {
|
|
||||||
this.$store.dispatch('setListAccounts', { id: list.id, accountIds: this.selectedUserIds })
|
|
||||||
this.$router.push({ name: 'lists-timeline', params: { id: list.id } })
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ListsNew
|
|
@ -1,95 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="panel-default panel list-new">
|
|
||||||
<div
|
|
||||||
ref="header"
|
|
||||||
class="panel-heading"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
class="button-unstyled go-back-button"
|
|
||||||
@click="goBack"
|
|
||||||
>
|
|
||||||
<FAIcon
|
|
||||||
size="lg"
|
|
||||||
icon="chevron-left"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="input-wrap">
|
|
||||||
<input
|
|
||||||
ref="title"
|
|
||||||
v-model="title"
|
|
||||||
:placeholder="$t('lists.title')"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="member-list">
|
|
||||||
<div
|
|
||||||
v-for="user in selectedUsers"
|
|
||||||
:key="user.id"
|
|
||||||
class="member"
|
|
||||||
>
|
|
||||||
<BasicUserCard
|
|
||||||
:user="user"
|
|
||||||
:class="isSelected(user) ? 'selected' : ''"
|
|
||||||
@click.capture.prevent="selectUser(user)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<ListsUserSearch
|
|
||||||
@results="onResults"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
v-for="user in users"
|
|
||||||
:key="user.id"
|
|
||||||
class="member"
|
|
||||||
>
|
|
||||||
<BasicUserCard
|
|
||||||
:user="user"
|
|
||||||
:class="isSelected(user) ? 'selected' : ''"
|
|
||||||
@click.capture.prevent="selectUser(user)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
:disabled="title && title.length === 0"
|
|
||||||
class="btn button-default"
|
|
||||||
@click="createList"
|
|
||||||
>
|
|
||||||
{{ $t('lists.create') }}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script src="./lists_new.js"></script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
@import '../../_variables.scss';
|
|
||||||
|
|
||||||
.list-new {
|
|
||||||
.search-icon {
|
|
||||||
margin-right: 0.3em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.member-list {
|
|
||||||
padding-bottom: 0.7rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.basic-user-card:hover,
|
|
||||||
.basic-user-card.selected {
|
|
||||||
cursor: pointer;
|
|
||||||
background-color: var(--selectedPost, $fallback--lightBg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.go-back-button {
|
|
||||||
text-align: center;
|
|
||||||
line-height: 1;
|
|
||||||
height: 100%;
|
|
||||||
align-self: start;
|
|
||||||
width: var(--__panel-heading-height-inner);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
margin: 0.5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
@ -0,0 +1,18 @@
|
|||||||
|
export const filterNavigation = (list = [], { hasChats, isFederating, isPrivate, currentUser }) => {
|
||||||
|
return list.filter(({ criteria, anon, anonRoute }) => {
|
||||||
|
const set = new Set(criteria || [])
|
||||||
|
if (!isFederating && set.has('federating')) return false
|
||||||
|
if (isPrivate && set.has('!private')) return false
|
||||||
|
if (!currentUser && !(anon || anonRoute)) return false
|
||||||
|
if ((!currentUser || !currentUser.locked) && set.has('lockedUser')) return false
|
||||||
|
if (!hasChats && set.has('chats')) return false
|
||||||
|
return true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export const getListEntries = state => state.lists.allLists.map(list => ({
|
||||||
|
name: 'list-' + list.id,
|
||||||
|
routeObject: { name: 'lists-timeline', params: { id: list.id } },
|
||||||
|
labelRaw: list.title,
|
||||||
|
iconLetter: list.title[0]
|
||||||
|
}))
|
@ -0,0 +1,75 @@
|
|||||||
|
export const USERNAME_ROUTES = new Set([
|
||||||
|
'bookmarks',
|
||||||
|
'dms',
|
||||||
|
'interactions',
|
||||||
|
'notifications',
|
||||||
|
'chat',
|
||||||
|
'chats',
|
||||||
|
'user-profile'
|
||||||
|
])
|
||||||
|
|
||||||
|
export const TIMELINES = {
|
||||||
|
home: {
|
||||||
|
route: 'friends',
|
||||||
|
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'
|
||||||
|
},
|
||||||
|
favorites: {
|
||||||
|
routeObject: { name: 'user-profile', query: { tab: 'favorites' } },
|
||||||
|
icon: 'star',
|
||||||
|
label: 'user_card.favorites'
|
||||||
|
},
|
||||||
|
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',
|
||||||
|
criteria: ['chats']
|
||||||
|
},
|
||||||
|
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'
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,47 @@
|
|||||||
|
import { mapState } from 'vuex'
|
||||||
|
import { USERNAME_ROUTES } from 'src/components/navigation/navigation.js'
|
||||||
|
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||||
|
import { faThumbtack } from '@fortawesome/free-solid-svg-icons'
|
||||||
|
|
||||||
|
library.add(faThumbtack)
|
||||||
|
|
||||||
|
const NavigationEntry = {
|
||||||
|
props: ['item', 'showPin'],
|
||||||
|
methods: {
|
||||||
|
isPinned (value) {
|
||||||
|
return this.pinnedItems.has(value)
|
||||||
|
},
|
||||||
|
togglePin (value) {
|
||||||
|
if (this.isPinned(value)) {
|
||||||
|
this.$store.commit('removeCollectionPreference', { path: 'collections.pinnedNavItems', value })
|
||||||
|
} else {
|
||||||
|
this.$store.commit('addCollectionPreference', { path: 'collections.pinnedNavItems', value })
|
||||||
|
}
|
||||||
|
this.$store.dispatch('pushServerSideStorage')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
routeTo () {
|
||||||
|
if (!this.item.route && !this.item.routeObject) return null
|
||||||
|
let route
|
||||||
|
if (this.item.routeObject) {
|
||||||
|
route = this.item.routeObject
|
||||||
|
} else {
|
||||||
|
route = { name: (this.item.anon || this.currentUser) ? this.item.route : this.item.anonRoute }
|
||||||
|
}
|
||||||
|
if (USERNAME_ROUTES.has(route.name)) {
|
||||||
|
route.params = { username: this.currentUser.screen_name, name: this.currentUser.screen_name }
|
||||||
|
}
|
||||||
|
return route
|
||||||
|
},
|
||||||
|
getters () {
|
||||||
|
return this.$store.getters
|
||||||
|
},
|
||||||
|
...mapState({
|
||||||
|
currentUser: state => state.users.currentUser,
|
||||||
|
pinnedItems: state => new Set(state.serverSideStorage.prefsStorage.collections.pinnedNavItems)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default NavigationEntry
|
@ -0,0 +1,120 @@
|
|||||||
|
<template>
|
||||||
|
<li class="NavigationEntry">
|
||||||
|
<component
|
||||||
|
:is="routeTo ? 'router-link' : 'button'"
|
||||||
|
class="menu-item button-unstyled"
|
||||||
|
:to="routeTo"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
<FAIcon
|
||||||
|
v-if="item.icon"
|
||||||
|
fixed-width
|
||||||
|
class="fa-scale-110 menu-icon"
|
||||||
|
:icon="item.icon"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
v-if="item.iconLetter"
|
||||||
|
class="icon iconLetter fa-scale-110 menu-icon"
|
||||||
|
>{{ item.iconLetter }}
|
||||||
|
</span>
|
||||||
|
<span class="label">
|
||||||
|
{{ item.labelRaw || $t(item.label) }}
|
||||||
|
</span>
|
||||||
|
<slot />
|
||||||
|
<div
|
||||||
|
v-if="item.badgeGetter && getters[item.badgeGetter]"
|
||||||
|
class="badge badge-notification"
|
||||||
|
>
|
||||||
|
{{ getters[item.badgeGetter] }}
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
v-if="showPin && currentUser"
|
||||||
|
type="button"
|
||||||
|
class="button-unstyled extra-button"
|
||||||
|
:title="$t(isPinned ? 'general.unpin' : 'general.pin' )"
|
||||||
|
:aria-pressed="!!isPinned"
|
||||||
|
@click.stop.prevent="togglePin(item.name)"
|
||||||
|
>
|
||||||
|
<FAIcon
|
||||||
|
v-if="showPin && currentUser"
|
||||||
|
fixed-width
|
||||||
|
class="fa-scale-110"
|
||||||
|
:class="{ 'veryfaint': !isPinned(item.name) }"
|
||||||
|
:transform="!isPinned(item.name) ? 'rotate-45' : ''"
|
||||||
|
icon="thumbtack"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</component>
|
||||||
|
</li>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script src="./navigation_entry.js"></script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import '../../_variables.scss';
|
||||||
|
|
||||||
|
.NavigationEntry {
|
||||||
|
.label {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-icon {
|
||||||
|
margin-right: 0.8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.extra-button {
|
||||||
|
width: 3em;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-right: -0.8em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-item {
|
||||||
|
display: flex;
|
||||||
|
box-sizing: border-box;
|
||||||
|
align-items: baseline;
|
||||||
|
height: 3.5em;
|
||||||
|
line-height: 3.5em;
|
||||||
|
padding: 0 1em;
|
||||||
|
width: 100%;
|
||||||
|
color: $fallback--link;
|
||||||
|
color: var(--link, $fallback--link);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $fallback--lightBg;
|
||||||
|
background-color: var(--selectedMenu, $fallback--lightBg);
|
||||||
|
color: $fallback--link;
|
||||||
|
color: var(--selectedMenuText, $fallback--link);
|
||||||
|
--faint: var(--selectedMenuFaintText, $fallback--faint);
|
||||||
|
--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
|
||||||
|
--lightText: var(--selectedMenuLightText, $fallback--lightText);
|
||||||
|
|
||||||
|
.menu-icon {
|
||||||
|
--icon: var(--text, $fallback--icon);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.router-link-active {
|
||||||
|
font-weight: bolder;
|
||||||
|
background-color: $fallback--lightBg;
|
||||||
|
background-color: var(--selectedMenu, $fallback--lightBg);
|
||||||
|
color: $fallback--text;
|
||||||
|
color: var(--selectedMenuText, $fallback--text);
|
||||||
|
--faint: var(--selectedMenuFaintText, $fallback--faint);
|
||||||
|
--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
|
||||||
|
--lightText: var(--selectedMenuLightText, $fallback--lightText);
|
||||||
|
|
||||||
|
.menu-icon {
|
||||||
|
--icon: var(--text, $fallback--icon);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,88 @@
|
|||||||
|
import { mapState } from 'vuex'
|
||||||
|
import { TIMELINES, ROOT_ITEMS, USERNAME_ROUTES } from 'src/components/navigation/navigation.js'
|
||||||
|
import { getListEntries, filterNavigation } from 'src/components/navigation/filter.js'
|
||||||
|
|
||||||
|
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||||
|
import {
|
||||||
|
faUsers,
|
||||||
|
faGlobe,
|
||||||
|
faBookmark,
|
||||||
|
faEnvelope,
|
||||||
|
faComments,
|
||||||
|
faBell,
|
||||||
|
faInfoCircle,
|
||||||
|
faStream,
|
||||||
|
faList
|
||||||
|
} from '@fortawesome/free-solid-svg-icons'
|
||||||
|
|
||||||
|
library.add(
|
||||||
|
faUsers,
|
||||||
|
faGlobe,
|
||||||
|
faBookmark,
|
||||||
|
faEnvelope,
|
||||||
|
faComments,
|
||||||
|
faBell,
|
||||||
|
faInfoCircle,
|
||||||
|
faStream,
|
||||||
|
faList
|
||||||
|
)
|
||||||
|
|
||||||
|
const NavPanel = {
|
||||||
|
props: ['limit'],
|
||||||
|
methods: {
|
||||||
|
getRouteTo (item) {
|
||||||
|
if (item.routeObject) {
|
||||||
|
return item.routeObject
|
||||||
|
}
|
||||||
|
const route = { name: (item.anon || this.currentUser) ? item.route : item.anonRoute }
|
||||||
|
if (USERNAME_ROUTES.has(route.name)) {
|
||||||
|
route.params = { username: this.currentUser.screen_name }
|
||||||
|
}
|
||||||
|
return route
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
getters () {
|
||||||
|
return this.$store.getters
|
||||||
|
},
|
||||||
|
...mapState({
|
||||||
|
lists: getListEntries,
|
||||||
|
currentUser: state => state.users.currentUser,
|
||||||
|
followRequestCount: state => state.api.followRequests.length,
|
||||||
|
privateMode: state => state.instance.private,
|
||||||
|
federating: state => state.instance.federating,
|
||||||
|
pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable,
|
||||||
|
pinnedItems: state => new Set(state.serverSideStorage.prefsStorage.collections.pinnedNavItems)
|
||||||
|
}),
|
||||||
|
pinnedList () {
|
||||||
|
if (!this.currentUser) {
|
||||||
|
return [
|
||||||
|
{ ...TIMELINES.public, name: 'public' },
|
||||||
|
{ ...TIMELINES.twkn, name: 'twkn' },
|
||||||
|
{ ...ROOT_ITEMS.about, name: 'about' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
return filterNavigation(
|
||||||
|
[
|
||||||
|
...Object
|
||||||
|
.entries({ ...TIMELINES })
|
||||||
|
.filter(([k]) => this.pinnedItems.has(k))
|
||||||
|
.map(([k, v]) => ({ ...v, name: k })),
|
||||||
|
...this.lists.filter((k) => this.pinnedItems.has(k.name)),
|
||||||
|
...Object
|
||||||
|
.entries({ ...ROOT_ITEMS })
|
||||||
|
.filter(([k]) => this.pinnedItems.has(k))
|
||||||
|
.map(([k, v]) => ({ ...v, name: k }))
|
||||||
|
],
|
||||||
|
{
|
||||||
|
hasChats: this.pleromaChatMessagesAvailable,
|
||||||
|
isFederating: this.federating,
|
||||||
|
isPrivate: this.privateMode,
|
||||||
|
currentUser: this.currentUser
|
||||||
|
}
|
||||||
|
).slice(0, this.limit)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default NavPanel
|
@ -0,0 +1,76 @@
|
|||||||
|
<template>
|
||||||
|
<span class="NavigationPins">
|
||||||
|
<router-link
|
||||||
|
v-for="item in pinnedList"
|
||||||
|
:key="item.name"
|
||||||
|
class="pinned-item"
|
||||||
|
:to="getRouteTo(item)"
|
||||||
|
:title="item.labelRaw || $t(item.label)"
|
||||||
|
>
|
||||||
|
<FAIcon
|
||||||
|
v-if="item.icon"
|
||||||
|
fixed-width
|
||||||
|
:icon="item.icon"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
v-if="item.iconLetter"
|
||||||
|
class="iconLetter fa-scale-110 fa-old-padding"
|
||||||
|
>{{ item.iconLetter }}</span>
|
||||||
|
<div
|
||||||
|
v-if="item.badgeGetter && getters[item.badgeGetter]"
|
||||||
|
class="alert-dot"
|
||||||
|
/>
|
||||||
|
</router-link>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script src="./navigation_pins.js"></script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import '../../_variables.scss';
|
||||||
|
.NavigationPins {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
overflow: hidden;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.alert-dot {
|
||||||
|
border-radius: 100%;
|
||||||
|
height: 0.5em;
|
||||||
|
width: 0.5em;
|
||||||
|
position: absolute;
|
||||||
|
right: calc(50% - 0.25em);
|
||||||
|
top: calc(50% - 0.25em);
|
||||||
|
margin-left: 6px;
|
||||||
|
margin-top: -6px;
|
||||||
|
background-color: $fallback--cRed;
|
||||||
|
background-color: var(--badgeNotification, $fallback--cRed);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pinned-item {
|
||||||
|
position: relative;
|
||||||
|
flex: 1 0 3em;
|
||||||
|
min-width: 2em;
|
||||||
|
text-align: center;
|
||||||
|
overflow: visible;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
& .svg-inline--fa,
|
||||||
|
& .iconLetter {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.router-link-active {
|
||||||
|
color: $fallback--text;
|
||||||
|
color: var(--selectedMenuText, $fallback--text);
|
||||||
|
border-bottom: 4px solid;
|
||||||
|
|
||||||
|
& .svg-inline--fa,
|
||||||
|
& .iconLetter {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -1,29 +0,0 @@
|
|||||||
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
|
|
@ -1,66 +0,0 @@
|
|||||||
<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>
|
|
@ -0,0 +1,93 @@
|
|||||||
|
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||||
|
import { faChevronRight } from '@fortawesome/free-solid-svg-icons'
|
||||||
|
import { mapState } from 'vuex'
|
||||||
|
|
||||||
|
import DialogModal from '../dialog_modal/dialog_modal.vue'
|
||||||
|
import Popover from '../popover/popover.vue'
|
||||||
|
|
||||||
|
library.add(faChevronRight)
|
||||||
|
|
||||||
|
const UserListMenu = {
|
||||||
|
props: [
|
||||||
|
'user'
|
||||||
|
],
|
||||||
|
data () {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
DialogModal,
|
||||||
|
Popover
|
||||||
|
},
|
||||||
|
created () {
|
||||||
|
this.$store.dispatch('fetchUserInLists', this.user.id)
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState({
|
||||||
|
allLists: state => state.lists.allLists
|
||||||
|
}),
|
||||||
|
inListsSet () {
|
||||||
|
return new Set(this.user.inLists.map(x => x.id))
|
||||||
|
},
|
||||||
|
lists () {
|
||||||
|
if (!this.user.inLists) return []
|
||||||
|
return this.allLists.map(list => ({
|
||||||
|
...list,
|
||||||
|
inList: this.inListsSet.has(list.id)
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toggleList (listId) {
|
||||||
|
if (this.inListsSet.has(listId)) {
|
||||||
|
this.$store.dispatch('removeListAccount', { accountId: this.user.id, listId }).then((response) => {
|
||||||
|
if (!response.ok) { return }
|
||||||
|
this.$store.dispatch('fetchUserInLists', this.user.id)
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.$store.dispatch('addListAccount', { accountId: this.user.id, listId }).then((response) => {
|
||||||
|
if (!response.ok) { return }
|
||||||
|
this.$store.dispatch('fetchUserInLists', this.user.id)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
toggleRight (right) {
|
||||||
|
const store = this.$store
|
||||||
|
if (this.user.rights[right]) {
|
||||||
|
store.state.api.backendInteractor.deleteRight({ user: this.user, right }).then(response => {
|
||||||
|
if (!response.ok) { return }
|
||||||
|
store.commit('updateRight', { user: this.user, right, value: false })
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
store.state.api.backendInteractor.addRight({ user: this.user, right }).then(response => {
|
||||||
|
if (!response.ok) { return }
|
||||||
|
store.commit('updateRight', { user: this.user, right, value: true })
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
toggleActivationStatus () {
|
||||||
|
this.$store.dispatch('toggleActivationStatus', { user: this.user })
|
||||||
|
},
|
||||||
|
deleteUserDialog (show) {
|
||||||
|
this.showDeleteUserDialog = show
|
||||||
|
},
|
||||||
|
deleteUser () {
|
||||||
|
const store = this.$store
|
||||||
|
const user = this.user
|
||||||
|
const { id, name } = user
|
||||||
|
store.state.api.backendInteractor.deleteUser({ user })
|
||||||
|
.then(e => {
|
||||||
|
this.$store.dispatch('markStatusesAsDeleted', status => user.id === status.user.id)
|
||||||
|
const isProfile = this.$route.name === 'external-user-profile' || this.$route.name === 'user-profile'
|
||||||
|
const isTargetUser = this.$route.params.name === name || this.$route.params.id === id
|
||||||
|
if (isProfile && isTargetUser) {
|
||||||
|
window.history.back()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
setToggled (value) {
|
||||||
|
this.toggled = value
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default UserListMenu
|
@ -0,0 +1,38 @@
|
|||||||
|
<template>
|
||||||
|
<div class="UserListMenu">
|
||||||
|
<Popover
|
||||||
|
trigger="hover"
|
||||||
|
placement="left"
|
||||||
|
remove-padding
|
||||||
|
>
|
||||||
|
<template #content>
|
||||||
|
<div class="dropdown-menu">
|
||||||
|
<button
|
||||||
|
v-for="list in lists"
|
||||||
|
:key="list.id"
|
||||||
|
class="button-default dropdown-item"
|
||||||
|
@click="toggleList(list.id)"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="menu-checkbox"
|
||||||
|
:class="{ 'menu-checkbox-checked': list.inList }"
|
||||||
|
/>
|
||||||
|
{{ list.title }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #trigger>
|
||||||
|
<button class="btn button-default dropdown-item -has-submenu">
|
||||||
|
{{ $t('lists.manage_lists') }}
|
||||||
|
<FAIcon
|
||||||
|
class="chevron-icon"
|
||||||
|
size="lg"
|
||||||
|
icon="chevron-right"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</template>
|
||||||
|
</Popover>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script src="./user_list_menu.js"></script>
|
Loading…
Reference in new issue