From 59828a101d0a7ad3f0c86ebd6b13f1c4478c4418 Mon Sep 17 00:00:00 2001
From: Jason <84899178+jasonhenriquez@users.noreply.github.com>
Date: Thu, 16 Sep 2021 22:58:03 +0000
Subject: [PATCH] Implements color clues for history navigation arrows (#1579)

Co-authored-by: Preston <freetubeapp@protonmail.com>
---
 src/renderer/App.js                          |  8 +++--
 src/renderer/components/top-nav/top-nav.js   | 31 ++++++++++++++++++++
 src/renderer/components/top-nav/top-nav.sass |  6 ++++
 src/renderer/components/top-nav/top-nav.vue  |  6 ++--
 4 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/src/renderer/App.js b/src/renderer/App.js
index 33af3ec8..d4b97d6d 100644
--- a/src/renderer/App.js
+++ b/src/renderer/App.js
@@ -138,6 +138,10 @@ export default Vue.extend({
           this.checkForNewBlogPosts()
         }, 500)
       })
+
+      this.$router.afterEach((to, from) => {
+        this.$refs.topNav.navigateHistory()
+      })
     })
   },
   methods: {
@@ -278,10 +282,10 @@ export default Vue.extend({
       if (event.altKey) {
         switch (event.code) {
           case 'ArrowRight':
-            window.history.forward()
+            this.$refs.topNav.historyForward()
             break
           case 'ArrowLeft':
-            window.history.back()
+            this.$refs.topNav.historyBack()
             break
         }
       }
diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js
index 36175a51..72e1de21 100644
--- a/src/renderer/components/top-nav/top-nav.js
+++ b/src/renderer/components/top-nav/top-nav.js
@@ -20,6 +20,8 @@ export default Vue.extend({
       windowWidth: 0,
       showFilters: false,
       searchFilterValueChanged: false,
+      historyIndex: 1,
+      isForwardOrBack: false,
       searchSuggestionsDataList: []
     }
   },
@@ -257,12 +259,41 @@ export default Vue.extend({
       this.searchFilterValueChanged = filterValueChanged
     },
 
+    navigateHistory: function() {
+      if (!this.isForwardOrBack) {
+        this.historyIndex = window.history.length
+        $('#historyArrowBack').removeClass('fa-arrow-left')
+        $('#historyArrowForward').addClass('fa-arrow-right')
+      } else {
+        this.isForwardOrBack = false
+      }
+    },
+
     historyBack: function () {
+      this.isForwardOrBack = true
       window.history.back()
+
+      if (this.historyIndex > 1) {
+        this.historyIndex--
+        $('#historyArrowForward').removeClass('fa-arrow-right')
+        if (this.historyIndex === 1) {
+          $('#historyArrowBack').addClass('fa-arrow-left')
+        }
+      }
     },
 
     historyForward: function () {
+      this.isForwardOrBack = true
       window.history.forward()
+
+      if (this.historyIndex < window.history.length) {
+        this.historyIndex++
+        $('#historyArrowBack').removeClass('fa-arrow-left')
+
+        if (this.historyIndex === window.history.length) {
+          $('#historyArrowForward').addClass('fa-arrow-right')
+        }
+      }
     },
 
     toggleSideNav: function () {
diff --git a/src/renderer/components/top-nav/top-nav.sass b/src/renderer/components/top-nav/top-nav.sass
index 19877f86..b926d722 100644
--- a/src/renderer/components/top-nav/top-nav.sass
+++ b/src/renderer/components/top-nav/top-nav.sass
@@ -38,6 +38,12 @@
   width: 1em
   height: 1em
 
+  &.fa-arrow-left, &.fa-arrow-right
+    color: gray
+    opacity: 0.5
+    pointer-events: none
+    user-select: none
+
   @include top-nav-is-colored
     color: var(--text-with-main-color)
 
diff --git a/src/renderer/components/top-nav/top-nav.vue b/src/renderer/components/top-nav/top-nav.vue
index a714ad77..731f2645 100644
--- a/src/renderer/components/top-nav/top-nav.vue
+++ b/src/renderer/components/top-nav/top-nav.vue
@@ -13,7 +13,8 @@
         @keypress="toggleSideNav"
       />
       <font-awesome-icon
-        class="navBackIcon navIcon"
+        id="historyArrowBack"
+        class="navBackIcon navIcon fa-arrow-left"
         icon="arrow-left"
         role="button"
         tabindex="0"
@@ -22,7 +23,8 @@
         @keypress="historyBack"
       />
       <font-awesome-icon
-        class="navForwardIcon navIcon"
+        id="historyArrowForward"
+        class="navForwardIcon navIcon fa-arrow-right"
         icon="arrow-right"
         role="button"
         tabindex="0"