diff --git a/src/App.scss b/src/App.scss index c75c990ac5..4c9a8884ea 100644 --- a/src/App.scss +++ b/src/App.scss @@ -117,8 +117,15 @@ h4 { margin: 0; } +.iconLetter { + display: inline-block; + text-align: center; + font-weight: 1000; +} + i[class*=icon-], -.svg-inline--fa { +.svg-inline--fa, +.iconLetter { color: $fallback--icon; color: var(--icon, $fallback--icon); } @@ -746,13 +753,15 @@ option { } .fa-scale-110 { - &.svg-inline--fa { + &.svg-inline--fa, + &.iconLetter { font-size: 1.1em; } } .fa-old-padding { - &.svg-inline--fa { + &.svg-inline--fa, + &.iconLetter { padding: 0 0.3em; } } diff --git a/src/components/lists_menu/lists_menu_content.js b/src/components/lists_menu/lists_menu_content.js index 37e7868cbd..99fea0f0c6 100644 --- a/src/components/lists_menu/lists_menu_content.js +++ b/src/components/lists_menu/lists_menu_content.js @@ -1,28 +1,26 @@ import { mapState } from 'vuex' -import { library } from '@fortawesome/fontawesome-svg-core' -import { - faUsers, - faGlobe, - faBookmark, - faEnvelope, - faHome -} from '@fortawesome/free-solid-svg-icons' +import NavigationEntry from 'src/components/navigation/navigation_entry.vue' -library.add( - faUsers, - faGlobe, - faBookmark, - faEnvelope, - faHome -) +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] +})) -const ListsMenuContent = { +export const ListsMenuContent = { + props: [ + 'showPin' + ], created () { this.$store.dispatch('startFetchingLists') }, + components: { + NavigationEntry + }, computed: { ...mapState({ - lists: state => state.lists.allLists, + lists: getListEntries, currentUser: state => state.users.currentUser, privateMode: state => state.instance.private, federating: state => state.instance.federating diff --git a/src/components/lists_menu/lists_menu_content.vue b/src/components/lists_menu/lists_menu_content.vue index e910d6eb28..9c58b092b9 100644 --- a/src/components/lists_menu/lists_menu_content.vue +++ b/src/components/lists_menu/lists_menu_content.vue @@ -1,17 +1,7 @@ diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js index 7cc3122d92..109981130e 100644 --- a/src/components/nav_panel/nav_panel.js +++ b/src/components/nav_panel/nav_panel.js @@ -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']) } diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue index 99a4571e19..767ba6ec98 100644 --- a/src/components/nav_panel/nav_panel.vue +++ b/src/components/nav_panel/nav_panel.vue @@ -5,13 +5,18 @@ + {{ item.iconLetter }} @@ -48,7 +53,9 @@ v-show="showTimelines" class="timelines-background" > - +
  • @@ -81,34 +88,10 @@ v-show="showLists" class="timelines-background" > - +
  • -
  • - - {{ $t(item.label) }} - - -
  • + @@ -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); + } } } } diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js index 8f6cae66b9..ee590c4bb2 100644 --- a/src/components/timeline/timeline.js +++ b/src/components/timeline/timeline.js @@ -28,6 +28,7 @@ const Timeline = { 'footerSlipgate' // reference to an element where we should put our footer ], data () { + console.log(this.timelineName) return { paused: false, unfocused: false, diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index 627cafbbb2..fad3ff13d3 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -1,7 +1,7 @@