Add swipe indicator

brave · Jun 21, 2017 · 76e3f20 · 76e3f20
1 parent 2d9adb6
commit 76e3f20
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 7 deletions.
diff --git a/app/renderer/components/main/main.js b/app/renderer/components/main/main.js
@@ -204,6 +204,7 @@ class Main extends ImmutableComponent {
 
   registerSwipeListener () {
     // Navigates back/forward on macOS two- and or three-finger swipe
+    const distanceThreshold = 80
     let mouseInFrame = false
     let trackingFingers = false
     let startTime = 0
@@ -226,19 +227,35 @@ class Main extends ImmutableComponent {
       if (trackingFingers) {
         deltaX = deltaX + e.deltaX
         deltaY = deltaY + e.deltaY
+        const percent = Math.abs(deltaX) / distanceThreshold
+        if (isSwipeOnRightEdge) {
+          if (percent > 1) {
+            appActions.swipedRight(1)
+          } else {
+            appActions.swipedRight(percent)
+          }
+        } else if (isSwipeOnLeftEdge) {
+          if (percent > 1) {
+            appActions.swipedLeft(1)
+          } else {
+            appActions.swipedLeft(percent)
+          }
+        }
         time = (new Date()).getTime() - startTime
       }
     }, { passive: true })
 
     ipc.on('scroll-touch-end', () => {
-      const threshold = getSetting(settings.SWIPE_NAV_SENSITIVITY)
-      if (trackingFingers && time > threshold && Math.abs(deltaY) < 80) {
-        if (deltaX > 80 && isSwipeOnRightEdge) {
+      const timeThreshold = getSetting(settings.SWIPE_NAV_SENSITIVITY)
+      if (trackingFingers && time > timeThreshold && Math.abs(deltaY) < distanceThreshold) {
+        if (deltaX > distanceThreshold && isSwipeOnRightEdge) {
           ipc.emit(messages.SHORTCUT_ACTIVE_FRAME_FORWARD)
-        } else if (deltaX < -80 && isSwipeOnLeftEdge) {
+        } else if (deltaX < -distanceThreshold && isSwipeOnLeftEdge) {
           ipc.emit(messages.SHORTCUT_ACTIVE_FRAME_BACK)
         }
       }
+      appActions.swipedLeft(0)
+      appActions.swipedRight(0)
       trackingFingers = false
       deltaX = 0
       deltaY = 0

diff --git a/app/renderer/components/navigation/navigator.js b/app/renderer/components/navigation/navigator.js
@@ -151,6 +151,8 @@ class Navigator extends React.Component {
 
   mergeProps (state, ownProps) {
     const currentWindow = state.get('currentWindow')
+    const swipeLeftPercent = state.get('swipeLeftPercent')
+    const swipeRightPercent = state.get('swipeRightPercent')
     const activeFrame = frameStateUtil.getActiveFrame(currentWindow) || Immutable.Map()
     const activeTabId = activeFrame.get('tabId') || tabState.TAB_ID_NONE
     const activeTab = tabState.getByTabId(state, activeTabId)
@@ -186,6 +188,10 @@ class Navigator extends React.Component {
       props.totalBlocks &&
       props.shieldEnabled
     props.isWideURLbarEnabled = getSetting(settings.WIDE_URL_BAR)
+    props.swipeLeftPercent = swipeLeftPercent ? (swipeLeftPercent + 1) * 1.5 : 1
+    props.swipeRightPercent = swipeRightPercent ? (swipeRightPercent + 1) * 1.5 : 1
+    props.swipeLeftOpacity = 0.85 - (swipeLeftPercent > 0.75 ? 0.75 : swipeLeftPercent)
+    props.swipeRightOpacity = 0.85 - (swipeRightPercent > 0.75 ? 0.75 : swipeRightPercent)
 
     // used in other functions
     props.isNavigable = activeFrame && isNavigatableAboutPage(getBaseUrl(activeFrame.get('location')))
@@ -226,7 +232,11 @@ class Navigator extends React.Component {
                 navigationButtonContainer: true,
                 nav: true,
                 disabled: !this.props.canGoBack
-              })}>
+              })}
+              style={{
+                transform: this.props.canGoBack ? `scale(${this.props.swipeLeftPercent})` : `scale(1)`,
+                opacity: `${this.props.swipeLeftOpacity}`
+              }}>
               <LongPressButton
                 testId={!this.props.canGoBack ? 'backButtonDisabled' : 'backButton'}
                 l10nId='backButton'
@@ -245,7 +255,11 @@ class Navigator extends React.Component {
                 navigationButtonContainer: true,
                 nav: true,
                 disabled: !this.props.canGoForward
-              })}>
+              })}
+              style={{
+                transform: this.props.canGoForward ? `scale(${this.props.swipeRightPercent})` : `scale(1)`,
+                opacity: `${this.props.swipeRightOpacity}`
+              }}>
               <LongPressButton
                 testId={!this.props.canGoForward ? 'forwardButtonDisabled' : 'forwardButton'}
                 l10nId='forwardButton'

diff --git a/js/actions/appActions.js b/js/actions/appActions.js
@@ -1442,6 +1442,20 @@ const appActions = {
     dispatch({
       actionType: appConstants.APP_ON_CANCEL_BROWSING_DATA
     })
+  },
+
+  swipedLeft: function (percent) {
+    dispatch({
+      actionType: appConstants.APP_SWIPE_LEFT,
+      percent
+    })
+  },
+
+  swipedRight: function (percent) {
+    dispatch({
+      actionType: appConstants.APP_SWIPE_RIGHT,
+      percent
+    })
   }
 }
 

diff --git a/js/constants/appConstants.js b/js/constants/appConstants.js
@@ -134,7 +134,9 @@ const appConstants = {
   APP_UPDATE_LOG_OPENED: _,
   APP_URL_BAR_SELECTED_INDEX_CHANGED: _,
   APP_ON_TOGGLE_BROWSING_DATA: _,
-  APP_ON_CANCEL_BROWSING_DATA: _
+  APP_ON_CANCEL_BROWSING_DATA: _,
+  APP_SWIPE_LEFT: _,
+  APP_SWIPE_RIGHT: _
 }
 
 module.exports = mapValuesByKeys(appConstants)
diff --git a/js/stores/appStore.js b/js/stores/appStore.js
@@ -892,6 +892,12 @@ const handleAppAction = (action) => {
     case appConstants.APP_DEFAULT_SEARCH_ENGINE_LOADED:
       appState = appState.set('searchDetail', action.searchDetail)
       break
+    case appConstants.APP_SWIPE_LEFT:
+      appState = appState.set('swipeLeftPercent', action.percent)
+      break
+    case appConstants.APP_SWIPE_RIGHT:
+      appState = appState.set('swipeRightPercent', action.percent)
+      break
     default:
   }