Navigation history dropdowns

src/renderer/App.js

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue'
+import { defineComponent, nextTick } from 'vue'
 import { mapActions, mapMutations } from 'vuex'
 import FtFlexBox from './components/ft-flex-box/ft-flex-box.vue'
 import TopNav from './components/top-nav/top-nav.vue'
@@ -200,13 +200,16 @@ export default defineComponent({
       })
 
       this.$router.afterEach((to, from) => {
-        this.$refs.topNav?.navigateHistory()
+        this.$refs.topNav?.trackHistoryNavigation(to)
       })
 
       this.$router.onReady(() => {
         if (this.$router.currentRoute.path === '/') {
           this.$router.replace({ path: this.landingPage })
         }
+
+        // initialize navigation history with starting route
+        nextTick(() => this.$store.commit('pushSessionNavigationHistoryState', this.$router.currentRoute))
       })
     })
   },

src/renderer/components/ft-icon-button/ft-icon-button.js

@@ -2,6 +2,8 @@ import { defineComponent } from 'vue'
 import FtPrompt from '../ft-prompt/ft-prompt.vue'
 import { sanitizeForHtmlId } from '../../helpers/accessibility'
 
+const LONG_CLICK_BOUNDARY_MS = 500
+
 export default defineComponent({
   name: 'FtIconButton',
   components: {
@@ -55,21 +57,27 @@ export default defineComponent({
     dropdownOptions: {
       // Array of objects with these properties
       // - type: ('labelValue'|'divider', default to 'labelValue' for less typing)
-      // - label: String (if type == 'labelValue')
-      // - value: String (if type == 'labelValue')
+      // - label: String (if type === 'labelValue')
+      // - value: String (if type === 'labelValue')
+      // - (OPTIONAL) active: Number (if type === 'labelValue')
       type: Array,
       default: () => { return [] }
     },
     dropdownModalOnMobile: {
       type: Boolean,
       default: false
+    },
+    openOnRightOrLongClick: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['click', 'disabled-click'],
   data: function () {
     return {
       dropdownShown: false,
-      mouseDownOnIcon: false,
+      blockLeftClick: false,
+      longPressTimer: null,
       useModal: false
     }
   },
@@ -91,14 +99,24 @@ export default defineComponent({
       this.dropdownShown = false
     },
 
-    handleIconClick: function () {
+    handleIconClick: function (event, isRightOrLongClick = false) {
       if (this.disabled) {
         this.$emit('disabled-click')
         return
       }
-      if (this.forceDropdown || (this.dropdownOptions.length > 0)) {
-        this.dropdownShown = !this.dropdownShown
 
+      if (this.blockLeftClick) {
+        return
+      }
+
+      if (this.longPressTimer != null) {
+        clearTimeout(this.longPressTimer)
+        this.longPressTimer = null
+      }
+
+      if ((!this.openOnRightOrLongClick || (this.openOnRightOrLongClick && isRightOrLongClick)) &&
+       (this.forceDropdown || this.dropdownOptions.length > 0)) {
+        this.dropdownShown = !this.dropdownShown
         if (this.dropdownShown && !this.useModal) {
           // wait until the dropdown is visible
           // then focus it so we can hide it automatically when it loses focus
@@ -111,24 +129,38 @@ export default defineComponent({
       }
     },
 
-    handleIconMouseDown: function () {
-      if (this.disabled) { return }
-      if (this.dropdownShown) {
-        this.mouseDownOnIcon = true
+    handleIconPointerDown: function (event) {
+      if (!this.openOnRightOrLongClick) { return }
+      if (event.button === 2) { // right button click
+        this.handleIconClick(null, true)
+      } else if (event.button === 0) { // left button click
+        this.longPressTimer = setTimeout(() => {
+          this.handleIconClick(null, true)
+
+          // prevent a long press that ends on the icon button from firing the handleIconClick handler
+          window.addEventListener('pointerup', this.preventButtonClickAfterLongPress, { once: true })
+          window.addEventListener('pointercancel', () => {
+            window.removeEventListener('pointerup', this.preventButtonClickAfterLongPress)
+          }, { once: true })
+        }, LONG_CLICK_BOUNDARY_MS)
       }
     },
 
+    // prevent the handleIconClick handler from firing for an instant
+    preventButtonClickAfterLongPress: function () {
+      this.blockLeftClick = true
+      setTimeout(() => { this.blockLeftClick = false }, 0)
+    },
+
     handleDropdownFocusOut: function () {
-      if (this.mouseDownOnIcon) {
-        this.mouseDownOnIcon = false
-      } else if (!this.$refs.dropdown.matches(':focus-within')) {
+      if (this.dropdownShown && !this.$refs.ftIconButton.matches(':focus-within')) {
         this.dropdownShown = false
       }
     },
 
     handleDropdownEscape: function () {
-      this.$refs.iconButton.focus()
-      // handleDropdownFocusOut will hide the dropdown for us
+      this.dropdownShown = false
+      this.$refs.ftIconButton.firstElementChild.focus()
     },
 
     handleDropdownClick: function ({ url, index }) {

src/renderer/components/ft-icon-button/ft-icon-button.scss

@@ -4,6 +4,7 @@
   flex-flow: row wrap;
   justify-content: space-evenly;
   position: relative;
+  line-height: normal;
   user-select: none;
 }
 
@@ -24,12 +25,13 @@
 
     &:not(.disabled) {
       &:hover,
-      &:focus-visible {
+      &:focus-visible,
+      &.pressed {
         background-color: var(--side-nav-hover-color);
         color: var(--side-nav-hover-text-color);
       }
 
-      &:active {
+      &.active {
         background-color: var(--side-nav-active-color);
         color: var(--side-nav-active-text-color);
       }
@@ -38,12 +40,13 @@
 
   &.base-no-default:not(.disabled) {
     &:hover,
-    &:focus-visible {
+    &:focus-visible,
+    &.pressed {
       background-color: var(--side-nav-hover-color);
       color: var(--side-nav-hover-text-color);
     }
 
-    &:active {
+    &.active {
       background-color: var(--side-nav-active-color);
       color: var(--side-nav-active-text-color);
     }
@@ -55,11 +58,12 @@
 
     &:not(.disabled) {
       &:hover,
-      &:focus-visible {
+      &:focus-visible,
+      &.pressed {
         background-color: var(--primary-color-hover);
       }
 
-      &:active {
+      &.active {
         background-color: var(--primary-color-active);
       }
     }
@@ -72,11 +76,12 @@
 
     &:not(.disabled) {
       &:hover,
-      &:focus-visible {
+      &:focus-visible,
+      &.pressed {
         background-color: var(--accent-color-hover);
       }
 
-      &:active {
+      &.active {
         background-color: var(--accent-color-active);
       }
     }
@@ -88,11 +93,12 @@
 
     &:not(.disabled) {
       &:hover,
-      &:focus-visible {
+      &:focus-visible,
+      &.pressed {
         background-color: var(--destructive-hover-color);
       }
 
-      &:active {
+      &.active {
         background-color: var(--destructive-active-color);
       }
     }
@@ -148,6 +154,17 @@
     padding: 0;
   }
 
+  :has(.active) {
+    .checkmarkColumn {
+      min-inline-size: 12px;
+    }
+
+    .listItem {
+      display: flex;
+      gap: 6px;
+    }
+  }
+
   .listItem {
     cursor: pointer;
     margin: 0;
@@ -157,12 +174,20 @@
     white-space: nowrap;
 
     &:hover,
-    &:focus-visible {
+    &:focus-visible,
+    &.pressed,
+    &.active {
       background-color: var(--side-nav-hover-color);
       color: var(--side-nav-hover-text-color);
       transition: background 0.2s ease-in;
     }
 
+    &.active {
+      font-weight: 600;
+      display: flex;
+      gap: 6px;
+    }
+
     &:active {
       background-color: var(--side-nav-active-color);
       color: var(--side-nav-active-text-color);

src/renderer/components/ft-icon-button/ft-icon-button.vue

@@ -1,13 +1,17 @@
 <template>
-  <div class="ftIconButton">
+  <div
+    ref="ftIconButton"
+    class="ftIconButton"
+    @focusout="handleDropdownFocusOut"
+  >
     <font-awesome-icon
-      ref="iconButton"
       class="iconButton"
       :title="title"
       :icon="icon"
       :class="{
         [theme]: true,
         shadow: useShadow,
+        pressed: openOnRightOrLongClick && dropdownShown,
         disabled
       }"
       :style="{
@@ -18,8 +22,9 @@
       role="button"
       :aria-disabled="disabled"
       :aria-expanded="dropdownShown"
+      @pointerdown="handleIconPointerDown"
+      @contextmenu.prevent=""
       @click="handleIconClick"
-      @mousedown="handleIconMouseDown"
       @keydown.enter.prevent="handleIconClick"
       @keydown.space.prevent="handleIconClick"
     />
@@ -43,9 +48,13 @@
               :id="sanitizeForHtmlId(title + '-' + index)"
               :key="index"
               role="option"
-              aria-selected="false"
+              :aria-selected="option.active"
               tabindex="-1"
-              :class="option.type === 'divider' ? 'listItemDivider' : 'listItem'"
+              :class="{
+                listItemDivider: option.type === 'divider',
+                listItem: option.type !== 'divider',
+                active: option.active
+              }"
               @click="handleDropdownClick({url: option.value, index: index})"
               @keydown.enter="handleDropdownClick({url: option.value, index: index})"
               @keydown.space="handleDropdownClick({url: option.value, index: index})"
@@ -67,7 +76,6 @@
           bottom: dropdownPositionY === 'bottom',
           top: dropdownPositionY === 'top'
         }"
-        @focusout="handleDropdownFocusOut"
         @keydown.esc.stop="handleDropdownEscape"
       >
         <slot>
@@ -81,13 +89,23 @@
               :id="sanitizeForHtmlId(title + '-' + index)"
               :key="index"
               :role="option.type === 'divider' ? 'separator' : 'option'"
-              aria-selected="false"
+              :aria-selected="option.active"
               :tabindex="option.type === 'divider' ? '-1' : '0'"
-              :class="option.type === 'divider' ? 'listItemDivider' : 'listItem'"
+              :class="{
+                listItemDivider: option.type === 'divider',
+                listItem: option.type !== 'divider',
+                active: option.active
+              }"
               @click="handleDropdownClick({url: option.value, index: index}, $event)"
               @keydown.enter="handleDropdownClick({url: option.value, index: index}, $event)"
               @keydown.space="handleDropdownClick({url: option.value, index: index}, $event)"
             >
+              <div class="checkmarkColumn">
+                <font-awesome-icon
+                  v-if="option.active"
+                  :icon="['fas', 'check']"
+                />
+              </div>
               {{ option.type === 'divider' ? '' : option.label }}
             </li>
           </ul>