Merge pull request #323 from lightningrodlabs/keyboard-nav-preference

Add Preference to Use Coordinates Instead of Modal for Keyboar Navigation

Author: kbonnici

web/src/components/Preferences/Preferences.js

@@ -4,7 +4,12 @@ import './Preferences.scss'
 import Icon from '../Icon/Icon'
 import Button from '../Button/Button'
 import Modal from '../Modal/Modal'
-import { MOUSE, TRACKPAD } from '../../redux/ephemeral/local-preferences/reducer'
+import {
+  COORDINATES,
+  MODAL,
+  MOUSE,
+  TRACKPAD,
+} from '../../redux/ephemeral/local-preferences/reducer'
 import PreferenceSelect, {
   PreferenceSelectExtra,
   PreferenceSelectOption,
@@ -52,7 +57,7 @@ function Descriptions({ navigation }) {
   )
 }
 
-function Internal({ navigation, setNavigationSelected, save }) {
+function NavigationModeInternal({ navigation, setNavigationSelected }) {
   const options = (
     <>
       <PreferenceSelectOption
@@ -73,7 +78,6 @@ function Internal({ navigation, setNavigationSelected, save }) {
   )
   return (
     <div className="preferences-content-wrapper">
-      <div className="preferences-title">Preferences</div>
       <PreferenceSelect
         iconName="panning.svg"
         title="Navigation Mode"
@@ -82,41 +86,87 @@ function Internal({ navigation, setNavigationSelected, save }) {
         options={options}
         descriptions={<Descriptions navigation={navigation} />}
       />
-      <div className="preferences-save-button">
-        <Button onClick={save} text="Save Changes" />
-      </div>
+    </div>
+  )
+}
+
+function KeyboardNavigationModeInternal({
+  keyboardNavigation,
+  setKeyboardNavigationSelected,
+}) {
+  const options = (
+    <>
+      <PreferenceSelectOption
+        active={keyboardNavigation === MODAL}
+        onClick={() => setKeyboardNavigationSelected(MODAL)}
+        iconName="trackpad.svg"
+        iconExtraClassName="navigation-mode-option-icon-trackpad"
+        title="Use a Modal"
+      />
+      <PreferenceSelectOption
+        active={keyboardNavigation === COORDINATES}
+        onClick={() => setKeyboardNavigationSelected(COORDINATES)}
+        iconName="mouse.svg"
+        iconExtraClassName="navigation-mode-option-icon-mouse"
+        title="Use Coordinates"
+      />
+    </>
+  )
+  return (
+    <div className="preferences-content-wrapper">
+      <PreferenceSelect
+        iconName="panning.svg"
+        title="Keyboard Navigation Mode"
+        subtitle="Select your preferred method of using the keyboard to navigate from parent to child, and vice-versa"
+        options={options}
+      />
     </div>
   )
 }
 
 export default function Preferences({
   navigation,
+  keyboardNavigation,
   setNavigationPreference,
+  setKeyboardNavigationPreference,
   showPreferences,
   setShowPreferences,
 }) {
   // hold an internal version of the preferences state, so that we can toggle it, before saving it
   const [navigationSelected, setNavigationSelected] = useState(navigation)
+  const [keyboardNavigationSelected, setKeyboardNavigationSelected] = useState(
+    keyboardNavigation
+  )
 
   const save = () => {
     setNavigationPreference(navigationSelected)
+    setKeyboardNavigationPreference(keyboardNavigationSelected)
     setShowPreferences(false)
   }
   const close = () => {
     // reset navigation selected to
     // whatever the canonical state of navigation preference
     // is equal to
     setNavigationSelected(navigation)
+    setKeyboardNavigationSelected(keyboardNavigation)
     setShowPreferences(false)
   }
 
   return (
     <Modal white active={showPreferences} onClose={close}>
-      <Internal
+      <div className="preferences-title">Preferences</div>
+      <NavigationModeInternal
         navigation={navigationSelected}
         setNavigationSelected={setNavigationSelected}
-        save={save}
       />
+      <KeyboardNavigationModeInternal
+        keyboardNavigation={keyboardNavigationSelected}
+        setKeyboardNavigationSelected={setKeyboardNavigationSelected}
+      />
+
+      <div className="preferences-save-button">
+        <Button onClick={save} text="Save Changes" />
+      </div>
     </Modal>
   )
 }

web/src/event-listeners/index.ts

@@ -45,7 +45,11 @@ import {
   closeExpandedView,
   openExpandedView,
 } from '../redux/ephemeral/expanded-view/actions'
-import { MOUSE, TRACKPAD } from '../redux/ephemeral/local-preferences/reducer'
+import {
+  COORDINATES,
+  MOUSE,
+  TRACKPAD,
+} from '../redux/ephemeral/local-preferences/reducer'
 
 import { setOutcomeClone } from '../redux/ephemeral/outcome-clone/actions'
 
@@ -116,6 +120,15 @@ function handleMouseUpForOutcomeForm({
   )
 }
 
+function leftMostOutcome(
+  outcomeActionHashes: ActionHashB64[],
+  state: RootState
+): ActionHashB64 {
+  return _.minBy(outcomeActionHashes, (actionHash) => {
+    return state.ui.layout.coordinates[actionHash].x
+  })
+}
+
 // outcomes is ComputedOutcomes in an object, keyed by their actionHash
 export default function setupEventListeners(
   store: any,
@@ -141,6 +154,10 @@ export default function setupEventListeners(
     )
   }
 
+  function getKeyboardNavigationPreference(state: RootState): string {
+    return state.ui.localPreferences.keyboardNavigation
+  }
+
   function panAndZoom(actionHash: string) {
     store.dispatch(animatePanAndZoom(actionHash, false))
   }
@@ -177,9 +194,14 @@ export default function setupEventListeners(
           )
           if (childrenActionHashes.length) {
             event.stopPropagation()
-            if (childrenActionHashes.length === 1)
+            const keyboardNavPreference = getKeyboardNavigationPreference(state)
+            if (childrenActionHashes.length === 1) {
               panAndZoom(childrenActionHashes[0])
-            else {
+            } else if (keyboardNavPreference === COORDINATES) {
+              // navigate to the left-most child
+              const leftMostChild = leftMostOutcome(childrenActionHashes, state)
+              panAndZoom(leftMostChild)
+            } else {
               store.dispatch(setNavModalOpenChildren(childrenActionHashes))
             }
           }
@@ -196,9 +218,14 @@ export default function setupEventListeners(
           )
           if (parentsActionHashes.length) {
             event.stopPropagation()
-            if (parentsActionHashes.length === 1)
+            const keyboardNavPreference = getKeyboardNavigationPreference(state)
+            if (parentsActionHashes.length === 1) {
               panAndZoom(parentsActionHashes[0])
-            else {
+            } else if (keyboardNavPreference === COORDINATES) {
+              // navigate to the left most parent
+              const leftMostParent = leftMostOutcome(parentsActionHashes, state)
+              panAndZoom(leftMostParent)
+            } else {
               store.dispatch(setNavModalOpenParents(parentsActionHashes))
             }
           }

web/src/redux/ephemeral/local-preferences/actions.js

@@ -1,13 +1,23 @@
 const SET_NAVIGATION_PREFERENCE = 'set_navigation_preference'
+const SET_KEYBOARD_NAVIGATION_PREFERENCE = 'set_keyboard_navigation_preference'
 
-function setNavigationPreference (preference) {
+function setNavigationPreference(preference) {
   return {
     type: SET_NAVIGATION_PREFERENCE,
-    payload: preference
+    payload: preference,
+  }
+}
+
+function setKeyboardNavigationPreference(preference) {
+  return {
+    type: SET_KEYBOARD_NAVIGATION_PREFERENCE,
+    payload: preference,
   }
 }
 
 export {
   SET_NAVIGATION_PREFERENCE,
+  SET_KEYBOARD_NAVIGATION_PREFERENCE,
   setNavigationPreference,
+  setKeyboardNavigationPreference,
 }

web/src/redux/ephemeral/local-preferences/reducer.js renamed to web/src/redux/ephemeral/local-preferences/reducer.ts

@@ -1,4 +1,7 @@
-import { SET_NAVIGATION_PREFERENCE } from './actions'
+import {
+  SET_KEYBOARD_NAVIGATION_PREFERENCE,
+  SET_NAVIGATION_PREFERENCE,
+} from './actions'
 
 const LOCAL_STORAGE_PREFIX = 'acorn-'
 const getLocalItem = (key) => {
@@ -8,12 +11,21 @@ const setLocalItem = (key, value) => {
   localStorage.setItem(`${LOCAL_STORAGE_PREFIX}${key}`, value)
 }
 
+const KEYBOARD_NAV_KEY = 'keyboardNavigationPreference'
+export const COORDINATES = 'coordinates'
+export const MODAL = 'modal'
+export type KeyboardNavigationPreference = typeof COORDINATES | typeof MODAL
+
 const NAV_KEY = 'navigationPreference'
 export const MOUSE = 'mouse'
 export const TRACKPAD = 'trackpad'
+export type NavigationPreference = typeof MOUSE | typeof TRACKPAD
 
 const defaultState = {
+  // default to trackpad navigation
   navigation: getLocalItem(NAV_KEY) || TRACKPAD,
+  // default to modal keyboard navigation
+  keyboardNavigation: getLocalItem(KEYBOARD_NAV_KEY) || MODAL,
 }
 
 export default function (state = defaultState, action) {
@@ -27,6 +39,13 @@ export default function (state = defaultState, action) {
         ...state,
         navigation: payload,
       }
+
+    case SET_KEYBOARD_NAVIGATION_PREFERENCE:
+      setLocalItem(KEYBOARD_NAV_KEY, payload)
+      return {
+        ...state,
+        keyboardNavigation: payload,
+      }
     default:
       return state
   }

web/src/routes/App.component.tsx

@@ -40,6 +40,14 @@ import useFinishMigrationChecker from '../hooks/useFinishMigrationChecker'
 import useFileDownloaded from '../hooks/useFileDownloaded'
 import UpdateModalContext from '../context/UpdateModalContext'
 import { ViewingReleaseNotes } from '../components/UpdateModal/UpdateModal'
+import {
+  COORDINATES,
+  KeyboardNavigationPreference,
+  MODAL,
+  MOUSE,
+  NavigationPreference,
+  TRACKPAD,
+} from '../redux/ephemeral/local-preferences/reducer.js'
 
 export type AppStateProps = {
   profilesCellIdString: string
@@ -54,7 +62,8 @@ export type AppStateProps = {
   agentAddress: AgentPubKeyB64
   whoami: WireRecord<Profile>
   hasFetchedForWhoami: boolean
-  navigationPreference: 'mouse' | 'trackpad'
+  navigationPreference: NavigationPreference
+  keyboardNavigationPreference: KeyboardNavigationPreference
   inviteMembersModalShowing: null | string // will be the passphrase if defined
   hasMigratedSharedProject: boolean
   hiddenAchievedOutcomes: CellIdString[]
@@ -64,7 +73,10 @@ export type AppStateProps = {
 
 export type AppDispatchProps = {
   dispatch: any
-  setNavigationPreference: (preference: 'mouse' | 'trackpad') => void
+  setNavigationPreference: (preference: NavigationPreference) => void
+  setKeyboardNavigationPreference: (
+    preference: typeof COORDINATES | typeof MODAL
+  ) => void
   hideInviteMembersModal: () => void
   openInviteMembersModal: (passphrase: string) => void
   goToOutcome: (outcomeActionHash: ActionHashB64) => void
@@ -95,6 +107,8 @@ const App: React.FC<AppProps> = ({
   updateWhoami,
   navigationPreference,
   setNavigationPreference,
+  keyboardNavigationPreference,
+  setKeyboardNavigationPreference,
   inviteMembersModalShowing,
   openInviteMembersModal,
   hideInviteMembersModal,
@@ -213,7 +227,12 @@ const App: React.FC<AppProps> = ({
               <Route
                 path="/run-update"
                 render={() => (
-                  <VersionUpdateLeaving updateVersionInfo={updateVersionInfo} triggerAMigrationCheck={finishMigrationChecker.triggerACheck} />
+                  <VersionUpdateLeaving
+                    updateVersionInfo={updateVersionInfo}
+                    triggerAMigrationCheck={
+                      finishMigrationChecker.triggerACheck
+                    }
+                  />
                 )}
               />
               <Route
@@ -222,7 +241,9 @@ const App: React.FC<AppProps> = ({
                   <VersionUpdateEntering
                     hasCheckedForMigration={finishMigrationChecker.hasChecked}
                     migrationData={finishMigrationChecker.dataForNeedsMigration}
-                    migrationDataFileName={finishMigrationChecker.migrationDataFileName}
+                    migrationDataFileName={
+                      finishMigrationChecker.migrationDataFileName
+                    }
                   />
                 )}
               />
@@ -237,6 +258,8 @@ const App: React.FC<AppProps> = ({
                 agentAddress,
                 navigationPreference,
                 setNavigationPreference,
+                keyboardNavigationPreference,
+                setKeyboardNavigationPreference,
                 showProfileEditForm,
                 setShowProfileEditForm,
                 showPreferences,

web/src/routes/App.connector.ts

@@ -4,7 +4,10 @@ import { ActionHashB64 } from '../types/shared'
 import { LayeringAlgorithm, Profile } from '../types'
 
 import { updateWhoami } from '../redux/persistent/profiles/who-am-i/actions'
-import { setNavigationPreference } from '../redux/ephemeral/local-preferences/actions'
+import {
+  setKeyboardNavigationPreference,
+  setNavigationPreference,
+} from '../redux/ephemeral/local-preferences/actions'
 import selectEntryPoints, {
   selectActiveProjectMembers,
 } from '../redux/persistent/projects/entry-points/select'
@@ -35,7 +38,7 @@ function mapStateToProps(state: RootState): AppStateProps {
       activeProject,
       activeEntryPoints,
       inviteMembersModal,
-      localPreferences: { navigation },
+      localPreferences: { navigation, keyboardNavigation },
     },
     cells: { profiles: profilesCellIdString },
   } = state
@@ -74,7 +77,7 @@ function mapStateToProps(state: RootState): AppStateProps {
 
   const selectedLayeringAlgo = activeProjectMeta
     ? activeProjectMeta.layeringAlgorithm
-    : "LongestPath"
+    : 'LongestPath'
 
   return {
     profilesCellIdString,
@@ -85,6 +88,7 @@ function mapStateToProps(state: RootState): AppStateProps {
     hasFetchedForWhoami,
     agentAddress: state.agentAddress,
     navigationPreference: navigation,
+    keyboardNavigationPreference: keyboardNavigation,
     inviteMembersModalShowing: inviteMembersModal.passphrase,
     members,
     presentMembers,
@@ -101,6 +105,9 @@ function mapDispatchToProps(dispatch): AppDispatchProps {
     setNavigationPreference: (preference) => {
       return dispatch(setNavigationPreference(preference))
     },
+    setKeyboardNavigationPreference: (preference) => {
+      return dispatch(setKeyboardNavigationPreference(preference))
+    },
     goToOutcome: (outcomeActionHash) => {
       return dispatch(animatePanAndZoom(outcomeActionHash, true))
     },