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>

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
     },

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 {
+    &.router-link-active {
-      margin-left: 2em;
+      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 {
+  .-wide {
-    grid-area: sitename;
+    .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 {

src/components/desktop_nav/desktop_nav.vue

@@ -5,16 +5,79 @@
     :class="{ '-logoLeft': logoLeft }"
     @click="scrollToTop()"
   >
-    <div class="inner-nav">
+    <div
-      <div class="item sitename">
+      class="inner-nav"
+      :class="{ '-wide': showWiderShortcuts }"
+    >
+      <div class="item nav-left-wrapper">
         <router-link
-          v-if="!hideSitename"
+          class="site-brand"
-          class="site-name"
           :to="{ name: 'root' }"
           active-class="home"
+        >
+          <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>

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: {

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"

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,

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>

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
     },

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;
+    }
   }
 }

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>

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') }}

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,

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>

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",

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,

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',