Redo desktop nav, add options for site name and favicon (#83)

Reviewed-on: AkkomaGang/pleroma-fe#83 Co-authored-by: eris <femmediscord@gmail.com> Co-committed-by: eris <femmediscord@gmail.com>
2022-08-14 23:24:59 +00:00 · 2022-08-14 23:24:59 +00:00 · ca0b730605
commit ca0b730605
parent 4dcca7cf53
16 changed files with 251 additions and 41 deletions
--- a/src/components/desktop_nav/desktop_nav.js
+++ b/src/components/desktop_nav/desktop_nav.js
@ -5,12 +5,16 @@ import {
  faSignOutAlt,
  faHome,
  faComments,
-  faBell,
  faUserPlus,
  faBullhorn,
  faSearch,
  faTachometerAlt,
  faCog,
+  faGlobe,
+  faBolt,
+  faUsers,
+  faCommentMedical,
+  faBookmark,
  faInfoCircle
 } from '@fortawesome/free-solid-svg-icons'

@ -19,12 +23,16 @@ library.add(
  faSignOutAlt,
  faHome,
  faComments,
-  faBell,
  faUserPlus,
  faBullhorn,
  faSearch,
  faTachometerAlt,
  faCog,
+  faGlobe,
+  faBolt,
+  faUsers,
+  faCommentMedical,
+  faBookmark,
  faInfoCircle
 )

@ -65,7 +73,22 @@ export default {
      })
    },
    logo () { return this.$store.state.instance.logo },
+    mergedConfig () {
+      return this.$store.getters.mergedConfig
+    },
    sitename () { return this.$store.state.instance.name },
+    showNavShortcuts () {
+      return this.mergedConfig.showNavShortcuts
+    },
+    showWiderShortcuts () {
+      return this.mergedConfig.showWiderShortcuts
+    },
+    hideSiteFavicon () {
+      return this.mergedConfig.hideSiteFavicon
+    },
+    hideSiteName () {
+      return this.mergedConfig.hideSiteName
+    },
    hideSitename () { return this.$store.state.instance.hideSitename },
    logoLeft () { return this.$store.state.instance.logoLeft },
    currentUser () { return this.$store.state.users.currentUser },
@ -75,10 +98,6 @@ export default {
    scrollToTop () {
      window.scrollTo(0, 0)
    },
-    logout () {
-      this.$router.replace('/main/public')
-      this.$store.dispatch('logout')
-    },
    onSearchBarToggled (hidden) {
      this.searchBarHidden = hidden
    },
--- a/src/components/desktop_nav/desktop_nav.scss
+++ b/src/components/desktop_nav/desktop_nav.scss
@ -15,16 +15,16 @@
    display: grid;
    grid-template-rows: var(--navbar-height);
    grid-template-columns: 2fr auto 2fr;
-    grid-template-areas: "sitename logo actions";
+    grid-template-areas: "nav-left logo actions";
    box-sizing: border-box;
    padding: 0 1.2em;
    margin: auto;
-    max-width: 980px;
+    max-width: 1110px;
  }

  &.-logoLeft .inner-nav {
    grid-template-columns: auto 2fr 2fr;
-    grid-template-areas: "logo sitename actions";
+    grid-template-areas: "logo nav-left actions";
  }

  .button-default {
@ -84,14 +84,21 @@
  }

  .nav-icon {
-    margin-left: 1em;
+    margin-left: 0.2em;
    width: 2em;
    height: 100%;
-    font-size: 130%;
    text-align: center;

-    &-logout {
-      margin-left: 2em;
+    &.router-link-active {
+      font-size: 1.2em;
+      margin-top: 0.05em;
+
+      .svg-inline--fa {
+        font-weight: bolder;
+        color: $fallback--text;
+        color: var(--selectedMenuText, $fallback--text);
+        --lightText: var(--selectedMenuLightText, $fallback--lightText);
+      }
    }

    .svg-inline--fa {
@ -100,8 +107,25 @@
    }
  }

-  .sitename {
-    grid-area: sitename;
+  .-wide {
+    .nav-icon {
+      margin-left: 0.7em;
+    }
+  }
+
+  .left {
+    padding-left: 5px;
+    display: flex;
+  }
+
+  .nav-left-wrapper {
+    grid-area: nav-left;
+
+    .favicon {
+      height: 28px;
+      vertical-align: middle;
+      padding-right: 5px;
+    }
  }

  .actions {
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/src/components/desktop_nav/desktop_nav.vue
@ -5,16 +5,79 @@
    :class="{ '-logoLeft': logoLeft }"
    @click="scrollToTop()"
  >
-    <div class="inner-nav">
-      <div class="item sitename">
+    <div
+      class="inner-nav"
+      :class="{ '-wide': showWiderShortcuts }"
+    >
+      <div class="item nav-left-wrapper">
        <router-link
-          v-if="!hideSitename"
-          class="site-name"
+          class="site-brand"
          :to="{ name: 'root' }"
          active-class="home"
        >
-          {{ sitename }}
+          <img
+            v-if="!hideSiteFavicon"
+            class="favicon"
+            src="/favicon.png"
+          >
+          <span
+            v-if="!hideSiteName"
+            class="site-name"
+          >
+            {{ sitename }}
+          </span>
        </router-link>
+        <div
+          v-if="(currentUser || !privateMode) && showNavShortcuts"
+          class="nav-items left"
+        >
+          <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')"
+            />
+          </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_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' }"
+            class="nav-icon"
+          >
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="circle"
+              :title="$t('nav.bubble_timeline')"
+            />
+          </router-link>
+        </div>
      </div>
      <router-link
        class="logo"
@ -36,6 +99,46 @@
          @toggled="onSearchBarToggled"
          @click.stop
        />
+        <div
+          v-if="(currentUser || !privateMode) && showNavShortcuts"
+          class="nav-items right"
+        >
+          <router-link
+            class="nav-icon"
+            :to="{ name: 'interactions', params: { username: currentUser.screen_name } }"
+          >
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="bolt"
+              :title="$t('nav.interactions')"
+            />
+          </router-link>
+          <router-link
+            v-if="currentUser"
+            :to="{ name: 'lists' }"
+            class="nav-icon"
+          >
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="list"
+              :title="$t('nav.lists')"
+            />
+          </router-link>
+          <router-link
+            v-if="currentUser"
+            :to="{ name: 'bookmarks' }"
+            class="nav-icon"
+          >
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="bookmark"
+              :title="$t('nav.bookmarks')"
+            />
+          </router-link>
+        </div>
        <button
          class="button-unstyled nav-icon"
          @click.stop="openSettingsModal"
@ -61,18 +164,6 @@
            :title="$t('nav.administration')"
          />
        </a>
-        <button
-          v-if="currentUser"
-          class="button-unstyled nav-icon nav-icon-logout"
-          @click.prevent="logout"
-        >
-          <FAIcon
-            fixed-width
-            class="fa-scale-110 fa-old-padding"
-            icon="sign-out-alt"
-            :title="$t('login.logout')"
-          />
-        </button>
      </div>
    </div>
  </nav>
--- a/src/components/mobile_nav/mobile_nav.js
+++ b/src/components/mobile_nav/mobile_nav.js
@ -41,7 +41,12 @@ const MobileNav = {
    unseenNotificationsCount () {
      return this.unseenNotifications.length
    },
-    hideSitename () { return this.$store.state.instance.hideSitename },
+    mergedConfig () {
+      return this.$store.getters.mergedConfig
+    },
+    hideSiteName () {
+      return this.mergedConfig.hideSiteName
+    },
    sitename () { return this.$store.state.instance.name }
  },
  methods: {
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@ -22,7 +22,7 @@
          />
        </button>
        <router-link
-          v-if="!hideSitename"
+          v-if="!hideSiteName"
          class="site-name"
          :to="{ name: 'root' }"
          active-class="home"
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@ -10,7 +10,7 @@ import {
  faChevronDown,
  faChevronUp,
  faComments,
-  faBell,
+  faBolt,
  faInfoCircle,
  faStream,
  faList,
@ -25,7 +25,7 @@ library.add(
  faChevronDown,
  faChevronUp,
  faComments,
-  faBell,
+  faBolt,
  faInfoCircle,
  faStream,
  faList,
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@ -45,7 +45,7 @@
            <FAIcon
              fixed-width
              class="fa-scale-110"
-              icon="bell"
+              icon="bolt"
            />{{ $t("nav.interactions") }}
          </router-link>
        </li>
--- a/src/components/settings_modal/settings_modal.js
+++ b/src/components/settings_modal/settings_modal.js
@ -14,6 +14,7 @@ import {
  faTimes,
  faFileUpload,
  faFileDownload,
+  faSignOutAlt,
  faChevronDown
 } from '@fortawesome/free-solid-svg-icons'
 import {
@ -28,6 +29,7 @@ library.add(
  faWindowMinimize,
  faFileUpload,
  faFileDownload,
+  faSignOutAlt,
  faChevronDown
 )

@ -66,6 +68,11 @@ const SettingsModal = {
    closeModal () {
      this.$store.dispatch('closeSettingsModal')
    },
+    logout () {
+      this.$router.replace('/main/public')
+      this.$store.dispatch('closeSettingsModal')
+      this.$store.dispatch('logout')
+    },
    peekModal () {
      this.$store.dispatch('togglePeekSettingsModal')
    },
@ -150,6 +157,7 @@ const SettingsModal = {
    }
  },
  computed: {
+    currentUser () { return this.$store.state.users.currentUser },
    currentSaveStateNotice () {
      return this.$store.state.interface.settings.currentSaveStateNotice
    },
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@ -71,5 +71,11 @@
      display: flex;
      flex-grow: 1;
    }
+
+    .logout-button {
+      position: absolute;
+      right: 20px;
+      padding-right: 10px;
+    }
  }
 }
--- a/src/components/settings_modal/settings_modal.vue
+++ b/src/components/settings_modal/settings_modal.vue
@ -111,6 +111,20 @@
          id="unscrolled-content"
          class="extra-content"
        />
+        <button
+          v-if="currentUser"
+          class="button-default logout-button"
+          :title="$t('login.logout')"
+          :aria-label="$t('login.logout')"
+          @click.prevent="logout"
+        >
+          <FAIcon
+            fixed-width
+            class="fa-scale-110 fa-old-padding"
+            icon="sign-out-alt"
+          />
+          <span>{{ $t('login.logout') }}</span>
+        </button>
      </div>
    </div>
  </Modal>
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@ -25,6 +25,38 @@
            {{ $t('settings.hide_wallpaper') }}
          </BooleanSetting>
        </li>
+        <li>
+          <BooleanSetting
+            path="hideSiteFavicon"
+            expert="1"
+          >
+            {{ $t('settings.hide_site_favicon') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting
+            path="hideSiteName"
+            expert="1"
+          >
+            {{ $t('settings.hide_site_name') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting
+            path="showNavShortcuts"
+            expert="1"
+          >
+            {{ $t('settings.show_nav_shortcuts') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting
+            path="showWiderShortcuts"
+            expert="1"
+          >
+            {{ $t('settings.show_wider_shortcuts') }}
+          </BooleanSetting>
+        </li>
        <li>
          <BooleanSetting path="stopGifs">
            {{ $t('settings.stop_gifs') }}
--- a/src/components/side_drawer/side_drawer.js
+++ b/src/components/side_drawer/side_drawer.js
@ -8,7 +8,7 @@ import {
  faSignOutAlt,
  faHome,
  faComments,
-  faBell,
+  faBolt,
  faUserPlus,
  faBullhorn,
  faSearch,
@ -23,7 +23,7 @@ library.add(
  faSignOutAlt,
  faHome,
  faComments,
-  faBell,
+  faBolt,
  faUserPlus,
  faBullhorn,
  faSearch,
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@ -74,7 +74,7 @@
            <FAIcon
              fixed-width
              class="fa-scale-110 fa-old-padding"
-              icon="bell"
+              icon="bolt"
            /> {{ $t("nav.interactions") }}
          </router-link>
        </li>
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@ -461,6 +461,8 @@
        "hide_muted_threads": "Hide muted threads",
        "hide_post_stats": "Hide post statistics (e.g. the number of favorites)",
        "hide_shoutbox": "Hide instance shoutbox",
+        "hide_site_favicon": "Hide instance favicon in top panel",
+        "hide_site_name": "Hide instance name in top panel",
        "hide_threads_with_blocked_users": "Hide threads mentioning blocked users",
        "hide_user_stats": "Hide user statistics (e.g. the number of followers)",
        "hide_wallpaper": "Hide instance wallpaper",
@ -613,7 +615,9 @@
        "settings": "Settings",
        "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_scrollbars": "Show side column's scrollbars",
+        "show_wider_shortcuts": "Show wider gap between top panel shortcuts",
        "show_yous": "Show (You)s",
        "stop_gifs": "Pause animated images until you hover on them",
        "streaming": "Automatically show new posts when scrolled to the top",
--- a/src/modules/config.js
+++ b/src/modules/config.js
@ -36,6 +36,10 @@ export const defaultState = {
  muteBotStatuses: undefined, // instance default
  collapseMessageWithSubject: undefined, // instance default
  padEmoji: true,
+  showNavShortcuts: undefined, // instance default
+  showWiderShortcuts: undefined, // instance default
+  hideSiteFavicon: undefined, // instance default
+  hideSiteName: undefined, // instance default
  hideAttachments: false,
  hideAttachmentsInConv: false,
  maxThumbnails: 16,
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@ -34,7 +34,8 @@ const defaultState = {
  hideWordFilteredPosts: false,
  hidePostStats: false,
  hideBotIndication: false,
-  hideSitename: false,
+  hideSiteFavicon: false,
+  hideSiteName: false,
  hideUserStats: false,
  muteBotStatuses: false,
  loginMethod: 'password',
@ -50,6 +51,8 @@ const defaultState = {
  scopeCopy: true,
  showFeaturesPanel: true,
  showInstanceSpecificPanel: false,
+  showNavShortcuts: true,
+  showWiderShortcuts: true,
  sidebarRight: false,
  subjectLineBehavior: 'email',
  theme: 'pleroma-dark',