timeline panel nav (#131)

Reviewed-on: AkkomaGang/pleroma-fe#131
2022-08-17 08:41:36 +00:00 · 2022-08-17 08:41:36 +00:00 · 64fdde52f6
parent ca0b730605
commit 64fdde52f6
15 changed files with 349 additions and 21 deletions
--- a/package.json
+++ b/package.json
@ -19,7 +19,7 @@
    "@babel/runtime": "7.17.8",
    "@chenfengyuan/vue-qrcode": "2.0.0",
    "@fortawesome/fontawesome-svg-core": "1.3.0",
-    "@fortawesome/free-regular-svg-icons": "5.15.4",
+    "@fortawesome/free-regular-svg-icons": "^6.1.2",
    "@fortawesome/free-solid-svg-icons": "5.15.4",
    "@fortawesome/vue-fontawesome": "3.0.1",
    "@kazvmoe-infra/pinch-zoom-element": "1.2.0",
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/src/components/desktop_nav/desktop_nav.vue
@ -54,17 +54,6 @@
              :title="$t('nav.public_tl')"
            />
          </router-link>
-          <router-link
-            :to="{ name: 'public-external-timeline' }"
-            class="nav-icon"
-          >
-            <FAIcon
-              fixed-width
-              class="fa-scale-110 fa-old-padding"
-              icon="globe"
-              :title="$t('nav.twkn')"
-            />
-          </router-link>
          <router-link
            v-if="currentUser"
            :to="{ name: 'bubble-timeline' }"
@ -77,6 +66,17 @@
              :title="$t('nav.bubble_timeline')"
            />
          </router-link>
+          <router-link
+            :to="{ name: 'public-external-timeline' }"
+            class="nav-icon"
+          >
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="globe"
+              :title="$t('nav.twkn')"
+            />
+          </router-link>
        </div>
      </div>
      <router-link
@ -105,6 +105,7 @@
        >
          <router-link
            class="nav-icon"
+            v-if="currentUser"
            :to="{ name: 'interactions', params: { username: currentUser.screen_name } }"
          >
            <FAIcon
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@ -13,13 +13,13 @@
          <span v-if="user.is_local">
            <button
              class="button-default dropdown-item"
-              @click="toggleRight(&quot;admin&quot;)"
+              @click="toggleRight('admin')"
            >
              {{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }}
            </button>
            <button
              class="button-default dropdown-item"
-              @click="toggleRight(&quot;moderator&quot;)"
+              @click="toggleRight('moderator')"
            >
              {{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }}
            </button>
@ -167,6 +167,7 @@

 .moderation-tools-popover {
  height: 100%;
+  z-index: 999;
  .trigger {
    display: flex !important;
    height: 100%;
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@ -49,6 +49,14 @@
            {{ $t('settings.show_nav_shortcuts') }}
          </BooleanSetting>
        </li>
+        <li>
+          <BooleanSetting
+            path="showPanelNavShortcuts"
+            expert="1"
+          >
+            {{ $t('settings.show_panel_nav_shortcuts') }}
+          </BooleanSetting>
+        </li>
        <li>
          <BooleanSetting
            path="showWiderShortcuts"
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@ -2,6 +2,7 @@ import Status from '../status/status.vue'
 import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js'
 import Conversation from '../conversation/conversation.vue'
 import TimelineMenu from '../timeline_menu/timeline_menu.vue'
+import TimelineMenuTabs from '../timeline_menu_tabs/timeline_menu_tabs.vue'
 import TimelineQuickSettings from './timeline_quick_settings.vue'
 import { debounce, throttle, keyBy } from 'lodash'
 import { library } from '@fortawesome/fontawesome-svg-core'
@ -39,6 +40,7 @@ const Timeline = {
    Status,
    Conversation,
    TimelineMenu,
+    TimelineMenuTabs,
    TimelineQuickSettings
  },
  computed: {
@ -85,6 +87,9 @@ const Timeline = {
    },
    virtualScrollingEnabled () {
      return this.$store.getters.mergedConfig.virtualScrolling
+    },
+    showPanelNavShortcuts () {
+      return this.$store.getters.mergedConfig.showPanelNavShortcuts
    }
  },
  created () {
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@ -1,7 +1,11 @@
 <template>
  <div :class="['Timeline', classes.root]">
    <div :class="classes.header">
-      <TimelineMenu v-if="!embedded" />
+      <template v-if="!embedded">
+        <TimelineMenuTabs v-if="showPanelNavShortcuts" />
+        <TimelineMenu v-else />
+      </template>
+
      <button
        v-if="showLoadButton"
        class="button-default loadmore-button"
--- a/src/components/timeline_menu_tabs/timeline_menu_content.js
+++ b/src/components/timeline_menu_tabs/timeline_menu_content.js
@ -0,0 +1,30 @@
+import { mapState } from 'vuex'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faUsers,
+  faGlobe,
+  faBookmark,
+  faEnvelope,
+  faHome
+} from '@fortawesome/free-solid-svg-icons'
+import { faCircle } from '@fortawesome/free-regular-svg-icons'
+library.add(
+  faUsers,
+  faGlobe,
+  faBookmark,
+  faEnvelope,
+  faHome,
+  faCircle
+)
+
+const TimelineMenuContent = {
+  computed: {
+    ...mapState({
+      currentUser: state => state.users.currentUser,
+      privateMode: state => state.instance.private,
+      federating: state => state.instance.federating
+    })
+  }
+}
+
+export default TimelineMenuContent
--- a/src/components/timeline_menu_tabs/timeline_menu_content.vue
+++ b/src/components/timeline_menu_tabs/timeline_menu_content.vue
@ -0,0 +1,114 @@
+<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"
+        />
+        <span
+          :title="$t('nav.home_timeline_description')"
+          :aria-label="$t('nav.home_timeline_description')"
+        >{{ $t("nav.home_timeline") }}</span>
+      </router-link>
+    </li>
+    <li v-if="currentUser">
+      <router-link
+        class="menu-item"
+        :to="{ name: 'bubble-timeline' }"
+      >
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 fa-old-padding "
+          :icon="['far', 'circle']"
+        />
+        <span
+          :title="$t('nav.bubble_timeline_description')"
+          :aria-label="$t('nav.bubble_timeline_description')"
+        >{{ $t("nav.bubble_timeline") }}</span>
+      </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"
+        />
+        <span
+          :title="$t('nav.public_timeline_description')"
+          :aria-label="$t('nav.public_timeline_description')"
+        >{{ $t("nav.public_tl") }}</span>
+      </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"
+        />
+        <span
+          :title="$t('nav.twkn_timeline_description')"
+          :aria-label="$t('nav.twkn_timeline_description')"
+        >{{ $t("nav.twkn") }}</span>
+      </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"
+        />
+        <span
+          :title="$t('nav.bookmarks')"
+          :aria-label="$t('nav.bookmarks')"
+        >{{ $t("nav.bookmarks") }}</span>
+      </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"
+        />
+        <span
+          :title="$t('nav.dms')"
+          :aria-label="$t('nav.dms')"
+        >{{ $t("nav.dms") }}</span>
+      </router-link>
+    </li>
+  </ul>
+</template>
+
+<script src="./timeline_menu_content.js" ></script>
+
+<style lang="scss">
+@import "../../_variables.scss";
+.timeline-desc {
+  text-decoration: none;
+  color: var(--text, $fallback--text);
+  padding-left: 1em;
+  display: block;
+  background-color: scale(var(--bg, $fallback--bg), 0.1);
+  padding-bottom: 0.4em;
+}
+</style>
--- a/src/components/timeline_menu_tabs/timeline_menu_tabs.js
+++ b/src/components/timeline_menu_tabs/timeline_menu_tabs.js
@ -0,0 +1,61 @@
+import Popover from '../popover/popover.vue'
+import TimelineMenuContent from './timeline_menu_content.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faChevronDown
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(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',
+    'bookmarks': 'nav.bookmarks',
+    'dms': 'nav.dms',
+    'public-timeline': 'nav.public_tl',
+    'public-external-timeline': 'nav.twkn',
+    'bubble-timeline': 'nav.bubble_timeline'
+  }
+}
+
+const TimelineMenuTabs = {
+  components: {
+    Popover,
+    TimelineMenuContent
+  },
+  data () {
+    return {
+      isOpen: false
+    }
+  },
+  created () {
+    if (timelineNames()[this.$route.name]) {
+      this.$store.dispatch('setLastTimeline', this.$route.name)
+    }
+  },
+  computed: {
+    currentUser () {
+      return this.$store.state.users.currentUser
+    },
+    privateMode () {
+      return this.$store.state.instance.private
+    }
+  },
+  methods: {
+    timelineName () {
+      const route = this.$route.name
+      if (route === 'tag-timeline') {
+        return '#' + this.$route.params.tag
+      }
+      if (route === 'list-timeline') {
+        return this.$store.getters.findListTitle(this.$route.params.id)
+      }
+      const i18nkey = timelineNames()[this.$route.name]
+      return i18nkey ? this.$t(i18nkey) : route
+    }
+  }
+}
+
+export default TimelineMenuTabs
--- a/src/components/timeline_menu_tabs/timeline_menu_tabs.vue
+++ b/src/components/timeline_menu_tabs/timeline_menu_tabs.vue
@ -0,0 +1,96 @@
+<template>
+  <div
+    v-if="currentUser || !privateMode"
+    class="nav-items timeline-menu-tabs"
+  >
+    <router-link
+      v-if="currentUser"
+      :to="{ name: 'friends' }"
+      class="nav-icon"
+    >
+      <FAIcon
+        fixed-width
+        class="fa-scale-110 fa-old-padding"
+        icon="home"
+        :title="$t('nav.home_timeline_description')"
+      />
+    </router-link>
+    <router-link
+      :to="{ name: 'public-timeline' }"
+      class="nav-icon"
+    >
+      <FAIcon
+        fixed-width
+        class="fa-scale-110 fa-old-padding"
+        icon="users"
+        :title="$t('nav.public_timeline_description')"
+      />
+    </router-link>
+    <router-link
+      v-if="currentUser"
+      :to="{ name: 'bubble-timeline' }"
+      class="nav-icon"
+    >
+      <FAIcon
+        fixed-width
+        class="fa-scale-110 fa-old-padding"
+        :icon="['far', 'circle']"
+        :title="$t('nav.bubble_timeline_description')"
+      />
+    </router-link>
+    <router-link
+      :to="{ name: 'public-external-timeline' }"
+      class="nav-icon"
+    >
+      <FAIcon
+        fixed-width
+        class="fa-scale-110 fa-old-padding"
+        icon="globe"
+        :title="$t('nav.twkn_timeline_description')"
+      />
+    </router-link>
+    <span class="timeline-title">{{ timelineName() }}</span>
+  </div>
+</template>
+
+<script src="./timeline_menu_tabs.js" ></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.timeline-menu-tabs {
+  .nav-icon {
+    margin-left: 0.7em;
+    width: 2em;
+    height: 100%;
+    text-align: center;
+
+    &.router-link-active {
+      border-bottom: 2px solid var(--selectedMenuText, $fallback--text);
+      padding-bottom: 0.8em;
+
+      .svg-inline--fa {
+        font-weight: bolder;
+        color: $fallback--text;
+        color: var(--selectedMenuText, $fallback--text);
+        --lightText: var(--selectedMenuLightText, $fallback--lightText);
+      }
+    }
+  }
+
+  .timeline-title {
+    margin-left: 1em;
+    font-size: 1.2em;
+    font-weight: bold;
+    color: var(--selectedMenuText, $fallback--text);
+    color: var(--selectedMenuText, $fallback--text);
+    --lightText: var(--selectedMenuLightText, $fallback--lightText);
+  }
+
+  @media all and (max-width: 900px) {
+    .timeline-title {
+      display: none;
+    }
+  }
+}
+</style>
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@ -69,6 +69,7 @@ export default {
      return `${serverUrl.protocol}//${serverUrl.host}/main/ostatus`
    },
    loggedIn () {
+      console.log({ ...this.$store.state.users.currentUser })
      return this.$store.state.users.currentUser
    },
    dailyAvg () {
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@ -245,7 +245,7 @@
            </button>
          </div>
          <ModerationTools
-            v-if="loggedIn.role === &quot;admin&quot;"
+            v-if="loggedIn.role === 'admin'"
            :user="user"
          />
        </div>
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@ -616,6 +616,7 @@
        "show_admin_badge": "Show \"Admin\" badge in my profile",
        "show_moderator_badge": "Show \"Moderator\" badge in my profile",
        "show_nav_shortcuts": "Show extra navigation shortcuts in top panel",
+        "show_panel_nav_shortcuts": "Show timeline navigation shortcuts at the top of the panel",
        "show_scrollbars": "Show side column's scrollbars",
        "show_wider_shortcuts": "Show wider gap between top panel shortcuts",
        "show_yous": "Show (You)s",
--- a/src/modules/config.js
+++ b/src/modules/config.js
@ -37,6 +37,7 @@ export const defaultState = {
  collapseMessageWithSubject: undefined, // instance default
  padEmoji: true,
  showNavShortcuts: undefined, // instance default
+  showPanelNavShortcuts: undefined, // instance default
  showWiderShortcuts: undefined, // instance default
  hideSiteFavicon: undefined, // instance default
  hideSiteName: undefined, // instance default
--- a/yarn.lock
+++ b/yarn.lock
@ -1085,6 +1085,11 @@
    minimatch "^3.1.2"
    strip-json-comments "^3.1.1"

+"@fortawesome/fontawesome-common-types@6.1.2":
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.2.tgz#c1095b1bbabf19f37f9ff0719db38d92a410bcfe"
+  integrity sha512-wBaAPGz1Awxg05e0PBRkDRuTsy4B3dpBm+zreTTyd9TH4uUM27cAL4xWyWR0rLJCrRwzVsQ4hF3FvM6rqydKPA==
+
 "@fortawesome/fontawesome-common-types@^0.2.36":
  version "0.2.36"
  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz#b44e52db3b6b20523e0c57ef8c42d315532cb903"
@ -1102,12 +1107,12 @@
  dependencies:
    "@fortawesome/fontawesome-common-types" "^0.3.0"

-"@fortawesome/free-regular-svg-icons@5.15.4":
-  version "5.15.4"
-  resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.15.4.tgz#b97edab436954333bbeac09cfc40c6a951081a02"
-  integrity sha512-9VNNnU3CXHy9XednJ3wzQp6SwNwT3XaM26oS4Rp391GsxVYA+0oDR2J194YCIWf7jNRCYKjUCOduxdceLrx+xw==
+"@fortawesome/free-regular-svg-icons@^6.1.2":
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.1.2.tgz#9f04009098addcc11d0d185126f058ed042c3099"
+  integrity sha512-xR4hA+tAwsaTHGfb+25H1gVU/aJ0Rzu+xIUfnyrhaL13yNQ7TWiI2RvzniAaB+VGHDU2a+Pk96Ve+pkN3/+TTQ==
  dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.2.36"
+    "@fortawesome/fontawesome-common-types" "6.1.2"

 "@fortawesome/free-solid-svg-icons@5.15.4":
  version "5.15.4"