Revert "Add timeline menu toggle to nav panel"

This reverts commit 98cb9abac7.

CHANGELOG.md

@@ -27,7 +27,6 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ### Changed
 - Display 'people voted' instead of 'votes' for multi-choice polls
-- Changed the "Timelines" link in side panel to toggle show all timeline options inside the panel
 - Renamed "Timeline" to "Home Timeline" to be more clear
 - Optimized chat to not get horrible performance after keeping the same chat open for a long time
 - When opening emoji picker or react picker, it automatically focuses the search field

src/components/nav_panel/nav_panel.js

@@ -1,4 +1,4 @@
-import TimelineMenuContent from '../timeline_menu/timeline_menu_content.vue'
+import { timelineNames } from '../timeline_menu/timeline_menu.js'
 import { mapState, mapGetters } from 'vuex'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -7,12 +7,10 @@ import {
   faGlobe,
   faBookmark,
   faEnvelope,
-  faChevronDown,
-  faChevronUp,
+  faHome,
   faComments,
   faBell,
-  faInfoCircle,
-  faStream
+  faInfoCircle
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
@@ -20,12 +18,10 @@ library.add(
   faGlobe,
   faBookmark,
   faEnvelope,
-  faChevronDown,
-  faChevronUp,
+  faHome,
   faComments,
   faBell,
-  faInfoCircle,
-  faStream
+  faInfoCircle
 )
 
 const NavPanel = {
@@ -34,20 +30,16 @@ const NavPanel = {
       this.$store.dispatch('startFetchingFollowRequests')
     }
   },
-  components: {
-    TimelineMenuContent
-  },
-  data () {
-    return {
-      showTimelines: false
-    }
-  },
-  methods: {
-    toggleTimelines () {
-      this.showTimelines = !this.showTimelines
-    }
-  },
   computed: {
+    onTimelineRoute () {
+      return !!timelineNames()[this.$route.name]
+    },
+    timelinesRoute () {
+      if (this.$store.state.interface.lastTimeline) {
+        return this.$store.state.interface.lastTimeline
+      }
+      return this.currentUser ? 'friends' : 'public-timeline'
+    },
     ...mapState({
       currentUser: state => state.users.currentUser,
       followRequestCount: state => state.api.followRequests.length,

src/components/nav_panel/nav_panel.vue

@@ -3,33 +3,19 @@
     <div class="panel panel-default">
       <ul>
         <li v-if="currentUser || !privateMode">
-          <button
-            class="button-unstyled menu-item"
-            @click="toggleTimelines"
+          <router-link
+            :to="{ name: timelinesRoute }"
+            :class="onTimelineRoute && 'router-link-active'"
           >
             <FAIcon
               fixed-width
               class="fa-scale-110"
-              icon="stream"
+              icon="home"
             />{{ $t("nav.timelines") }}
-            <FAIcon
-              class="timelines-chevron"
-              fixed-width
-              :icon="showTimelines ? 'chevron-up' : 'chevron-down'"
-            />
-          </button>
-          <div
-            v-show="showTimelines"
-            class="timelines-background"
-          >
-            <TimelineMenuContent class="timelines" />
-          </div>
+          </router-link>
         </li>
         <li v-if="currentUser">
-          <router-link
-            class="menu-item"
-            :to="{ name: 'interactions', params: { username: currentUser.screen_name } }"
-          >
+          <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
             <FAIcon
               fixed-width
               class="fa-scale-110"
@@ -38,10 +24,7 @@
           </router-link>
         </li>
         <li v-if="currentUser && pleromaChatMessagesAvailable">
-          <router-link
-            class="menu-item"
-            :to="{ name: 'chats', params: { username: currentUser.screen_name } }"
-          >
+          <router-link :to="{ name: 'chats', params: { username: currentUser.screen_name } }">
             <div
               v-if="unreadChatCount"
               class="badge badge-notification"
@@ -56,10 +39,7 @@
           </router-link>
         </li>
         <li v-if="currentUser && currentUser.locked">
-          <router-link
-            class="menu-item"
-            :to="{ name: 'friend-requests' }"
-          >
+          <router-link :to="{ name: 'friend-requests' }">
             <FAIcon
               fixed-width
               class="fa-scale-110"
@@ -74,10 +54,7 @@
           </router-link>
         </li>
         <li>
-          <router-link
-            class="menu-item"
-            :to="{ name: 'about' }"
-          >
+          <router-link :to="{ name: 'about' }">
             <FAIcon
               fixed-width
               class="fa-scale-110"
@@ -114,14 +91,14 @@
     border-color: var(--border, $fallback--border);
     padding: 0;
 
-    &:first-child .menu-item {
+    &:first-child a {
       border-top-right-radius: $fallback--panelRadius;
       border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
       border-top-left-radius: $fallback--panelRadius;
       border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
     }
 
-    &:last-child .menu-item {
+    &:last-child a {
       border-bottom-right-radius: $fallback--panelRadius;
       border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
       border-bottom-left-radius: $fallback--panelRadius;
@@ -133,15 +110,13 @@
     border: none;
   }
 
-  .menu-item {
+  a {
     display: block;
     box-sizing: border-box;
+    align-items: stretch;
     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;
@@ -171,25 +146,6 @@
     }
   }
 
-  .timelines-chevron {
-    margin-left: 0.8em;
-    font-size: 1.1em;
-  }
-
-  .timelines-background {
-    padding: 0 0 0 0.6em;
-    background-color: $fallback--lightBg;
-    background-color: var(--selectedMenu, $fallback--lightBg);
-    border-top: 1px solid;
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
-  }
-
-  .timelines {
-    background-color: $fallback--bg;
-    background-color: var(--bg, $fallback--bg);
-  }
-
   .fa-scale-110 {
     margin-right: 0.8em;
   }

src/components/timeline_menu/timeline_menu.js

@@ -1,17 +1,29 @@
 import Popover from '../popover/popover.vue'
-import TimelineMenuContent from './timeline_menu_content.vue'
+import { mapState } from 'vuex'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
+  faUsers,
+  faGlobe,
+  faBookmark,
+  faEnvelope,
+  faHome,
   faChevronDown
 } from '@fortawesome/free-solid-svg-icons'
 
-library.add(faChevronDown)
+library.add(
+  faUsers,
+  faGlobe,
+  faBookmark,
+  faEnvelope,
+  faHome,
+  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',
+    'friends': 'nav.timeline',
     'bookmarks': 'nav.bookmarks',
     'dms': 'nav.dms',
     'public-timeline': 'nav.public_tl',
@@ -21,8 +33,7 @@ export const timelineNames = () => {
 
 const TimelineMenu = {
   components: {
-    Popover,
-    TimelineMenuContent
+    Popover
   },
   data () {
     return {
@@ -30,6 +41,9 @@ const TimelineMenu = {
     }
   },
   created () {
+    if (this.currentUser && this.currentUser.locked) {
+      this.$store.dispatch('startFetchingFollowRequests')
+    }
     if (timelineNames()[this.$route.name]) {
       this.$store.dispatch('setLastTimeline', this.$route.name)
     }
@@ -61,6 +75,13 @@ const TimelineMenu = {
       const i18nkey = timelineNames()[this.$route.name]
       return i18nkey ? this.$t(i18nkey) : route
     }
+  },
+  computed: {
+    ...mapState({
+      currentUser: state => state.users.currentUser,
+      privateMode: state => state.instance.private,
+      federating: state => state.instance.federating
+    })
   }
 }
 

src/components/timeline_menu/timeline_menu.vue

@@ -9,26 +9,74 @@
     @show="openMenu"
     @close="() => isOpen = false"
   >
-    <template v-slot:content>
-      <div class="timeline-menu-popover popover-default">
-        <TimelineMenuContent />
-      </div>
-    </template>
-    <template v-slot:trigger>
-      <button class="button-unstyled title timeline-menu-title">
-        <span class="timeline-title">{{ timelineName() }}</span>
-        <span>
-          <FAIcon
-            size="sm"
-            icon="chevron-down"
-          />
-        </span>
-        <span
-          class="click-blocker"
-          @click="blockOpen"
+    <div
+      slot="content"
+      class="timeline-menu-popover panel panel-default"
+    >
+      <ul>
+        <li v-if="currentUser">
+          <router-link :to="{ name: 'friends' }">
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding "
+              icon="home"
+            />{{ $t("nav.timeline") }}
+          </router-link>
+        </li>
+        <li v-if="currentUser">
+          <router-link :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 :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>
+        <li v-if="currentUser || !privateMode">
+          <router-link :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 :to="{ name: 'public-external-timeline' }">
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding "
+              icon="globe"
+            />{{ $t("nav.twkn") }}
+          </router-link>
+        </li>
+      </ul>
+    </div>
+    <div
+      slot="trigger"
+      class="title timeline-menu-title"
+    >
+      <span class="timeline-title">{{ timelineName() }}</span>
+      <span>
+        <FAIcon
+          size="sm"
+          icon="chevron-down"
         />
-      </button>
-    </template>
+      </span>
+      <span
+        class="click-blocker"
+        @click="blockOpen"
+      />
+    </div>
   </Popover>
 </template>
 

src/components/timeline_menu/timeline_menu_content.js

@@ -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

src/components/timeline_menu/timeline_menu_content.vue

@@ -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>