diff options
Diffstat (limited to 'src/components/nav_panel')
| -rw-r--r-- | src/components/nav_panel/nav_panel.js | 111 | ||||
| -rw-r--r-- | src/components/nav_panel/nav_panel.vue | 140 |
2 files changed, 169 insertions, 82 deletions
diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js index abeff6bf..758f9af4 100644 --- a/src/components/nav_panel/nav_panel.js +++ b/src/components/nav_panel/nav_panel.js @@ -31,6 +31,66 @@ library.add( 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) { @@ -43,8 +103,11 @@ const NavPanel = { }, data () { return { + collapsed: false, showTimelines: false, - showLists: false + showLists: false, + timelinesList: Object.entries(TIMELINES).map(([k, v]) => ({ ...v, name: k })), + rootList: Object.entries(ROOT_ITEMS).map(([k, v]) => ({ ...v, name: k })) } }, methods: { @@ -53,19 +116,57 @@ const NavPanel = { }, toggleLists () { this.showLists = !this.showLists + }, + toggleCollapse () { + this.collapsed = !this.collapsed + }, + isPinned (item) { + return this.pinnedItems.has(item) + }, + togglePin (item) { + if (this.isPinned(item)) { + this.$store.commit('removeCollectionPreference', { path: 'collections.pinnedNavItems', value: item }) + } else { + this.$store.commit('addCollectionPreference', { path: 'collections.pinnedNavItems', value: item }) + } } }, computed: { - listsNavigation () { - return this.$store.getters.mergedConfig.listsNavigation - }, ...mapState({ 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 + pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable, + pinnedItems: state => new Set(state.serverSideStorage.prefsStorage.collections.pinnedNavItems) }), + 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 + }) + }, + 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 + }) + }, ...mapGetters(['unreadChatCount']) } } diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue index 9322e233..99a4571e 100644 --- a/src/components/nav_panel/nav_panel.vue +++ b/src/components/nav_panel/nav_panel.vue @@ -1,7 +1,33 @@ <template> <div class="NavPanel"> <div class="panel panel-default"> - <ul> + <div class="panel-heading"> + <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 } }" + > + <FAIcon + fixed-width + class="fa-scale-110 fa-old-padding " + :icon="item.icon" + /> + </router-link> + </span> + </span> + <div class="spacer"/> + <button + class="button-unstyled" + @click="toggleCollapse" + > + <FAIcon + class="timelines-chevron" + fixed-width + :icon="collapsed ? 'chevron-down' : 'chevron-up'" + /> + </button> + </div> + <ul class="panel-body" v-if="!collapsed"> <li v-if="currentUser || !privateMode"> <button class="button-unstyled menu-item" @@ -22,29 +48,34 @@ v-show="showTimelines" class="timelines-background" > - <TimelineMenuContent class="timelines" /> + <TimelineMenuContent class="timelines" :content="timelinesList" /> </div> </li> - <li v-if="currentUser && listsNavigation"> + <li v-if="currentUser"> <button class="button-unstyled menu-item" @click="toggleLists" > - <router-link - :to="{ name: 'lists' }" - @click.stop - > <FAIcon fixed-width class="fa-scale-110" icon="list" />{{ $t("nav.lists") }} - </router-link> <FAIcon class="timelines-chevron" fixed-width :icon="showLists ? 'chevron-up' : 'chevron-down'" /> + <router-link + :to="{ name: 'lists' }" + @click.stop + > + <FAIcon + class="timelines-chevron" + fixed-width + icon="wrench" + /> + </router-link> </button> <div v-show="showLists" @@ -53,83 +84,31 @@ <ListsMenuContent class="timelines" /> </div> </li> - <li v-if="currentUser && !listsNavigation"> + <li v-for="item in rootItems" :key="item.name"> <router-link - :to="{ name: 'lists' }" - @click.stop + 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 - class="button-unstyled menu-item" - @click="toggleLists" - > + type="button" + class="button-unstyled" + @click.stop.prevent="togglePin(item.name)" + > <FAIcon fixed-width - class="fa-scale-110" - icon="list" - />{{ $t("nav.lists") }} + class="fa-scale-110 fa-old-padding " + :class="{ 'veryfaint': !isPinned(item.name) }" + :transform="!isPinned(item.name) ? 'rotate-45' : ''" + icon="thumbtack" + /> </button> </router-link> </li> - <li v-if="currentUser"> - <router-link - class="menu-item" - :to="{ name: 'interactions', params: { username: currentUser.screen_name } }" - > - <FAIcon - fixed-width - class="fa-scale-110" - icon="bell" - />{{ $t("nav.interactions") }} - </router-link> - </li> - <li v-if="currentUser && pleromaChatMessagesAvailable"> - <router-link - class="menu-item" - :to="{ name: 'chats', params: { username: currentUser.screen_name } }" - > - <div - v-if="unreadChatCount" - class="badge badge-notification" - > - {{ unreadChatCount }} - </div> - <FAIcon - fixed-width - class="fa-scale-110" - icon="comments" - />{{ $t("nav.chats") }} - </router-link> - </li> - <li v-if="currentUser && currentUser.locked"> - <router-link - class="menu-item" - :to="{ name: 'friend-requests' }" - > - <FAIcon - fixed-width - class="fa-scale-110" - icon="user-plus" - />{{ $t("nav.friend_requests") }} - <span - v-if="followRequestCount > 0" - class="badge badge-notification" - > - {{ followRequestCount }} - </span> - </router-link> - </li> - <li> - <router-link - class="menu-item" - :to="{ name: 'about' }" - > - <FAIcon - fixed-width - class="fa-scale-110" - icon="info-circle" - />{{ $t("nav.about") }} - </router-link> - </li> </ul> </div> </div> @@ -246,5 +225,12 @@ right: 0.6rem; top: 1.25em; } + + .pinned-item { + .router-link-exact-active .svg-inline--fa { + color: $fallback--text; + color: var(--selectedMenuText, $fallback--text); + } + } } </style> |