From be52976215fddc873ee95dd1a337838773245eae Mon Sep 17 00:00:00 2001 From: Anthony Tseng Date: Tue, 20 Jun 2017 14:28:39 -0700 Subject: [PATCH] Provide a swipe navigation distance setting for users to config along with swipe progress indicator fixes #9615 #2477 Auditors: @cezaraugusto, @bbondy, @bradleyrichter Test Plan: 1. Adjust swipe navigation distance setting in about:preferences#advanced 2. And swipe to navigate by different settings It shouldn't show up on linux and window --- .../locales/en-US/preferences.properties | 3 ++ app/renderer/components/main/main.js | 25 ++++++++++-- .../components/navigation/navigator.js | 26 ++++++++++++- .../components/preferences/advancedTab.js | 39 +++++++++++++++++++ js/actions/appActions.js | 14 +++++++ js/constants/appConfig.js | 1 + js/constants/appConstants.js | 4 +- js/constants/settings.js | 1 + js/stores/appStore.js | 6 +++ 9 files changed, 113 insertions(+), 6 deletions(-) diff --git a/app/extensions/brave/locales/en-US/preferences.properties b/app/extensions/brave/locales/en-US/preferences.properties index 01185562ce7..8a27cc9c648 100644 --- a/app/extensions/brave/locales/en-US/preferences.properties +++ b/app/extensions/brave/locales/en-US/preferences.properties @@ -270,6 +270,9 @@ useHardwareAcceleration=Use hardware acceleration when available * useSmoothScroll=Enable smooth scrolling * defaultZoomLevel=Default zoom level toolbarUserInterfaceScale=Toolbar and UI elements scale +swipeNavigationDistance=Swipe Navigation Distance +short=Short +long=Long en-US=English (U.S.) nl-NL=Dutch (Netherlands) pt-BR=Portuguese (Brazil) diff --git a/app/renderer/components/main/main.js b/app/renderer/components/main/main.js index 5760814cc99..b8e4458eaed 100644 --- a/app/renderer/components/main/main.js +++ b/app/renderer/components/main/main.js @@ -222,18 +222,37 @@ class Main extends ImmutableComponent { if (trackingFingers) { deltaX = deltaX + e.deltaX deltaY = deltaY + e.deltaY + const distanceThreshold = getSetting(settings.SWIPE_NAV_DISTANCE) + 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', () => { - if (trackingFingers && time > 30 && Math.abs(deltaY) < 80) { - if (deltaX > 70 && isSwipeOnRightEdge) { + const distanceThreshold = getSetting(settings.SWIPE_NAV_DISTANCE) + const timeThreshold = 80 + if (trackingFingers && time > timeThreshold && Math.abs(deltaY) < distanceThreshold) { + if (deltaX > distanceThreshold && isSwipeOnRightEdge) { ipc.emit(messages.SHORTCUT_ACTIVE_FRAME_FORWARD) - } else if (deltaX < -70 && 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 index 93a30e009b4..aec3fcb53df 100644 --- a/app/renderer/components/navigation/navigator.js +++ b/app/renderer/components/navigation/navigator.js @@ -152,6 +152,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 activeFrameKey = activeFrame.get('key') const activeTabId = activeFrame.get('tabId') || tabState.TAB_ID_NONE @@ -190,6 +192,18 @@ class Navigator extends React.Component { props.isWideURLbarEnabled = getSetting(settings.WIDE_URL_BAR) props.showNavigationBar = activeFrameKey !== undefined && state.get('siteSettings') !== undefined + props.swipeLeftPercent = swipeLeftPercent ? (swipeLeftPercent + 1) * 1.2 : 1 + props.swipeRightPercent = swipeRightPercent ? (swipeRightPercent + 1) * 1.2 : 1 + // 0.85 is the default button opacity in less/navigationBar.less + // Remove this magic number once we migrate to Aphrodite + props.swipeLeftOpacity = 0.85 - (swipeLeftPercent > 0.65 ? 0.65 : swipeLeftPercent) + props.swipeRightOpacity = 0.85 - (swipeRightPercent > 0.65 ? 0.65 : swipeRightPercent) + if (swipeLeftPercent === 1) { + props.swipeLeftOpacity = 0.85 + } + if (swipeRightPercent === 1) { + props.swipeRightOpacity = 0.85 + } // used in other functions props.isNavigable = activeFrame && isNavigatableAboutPage(getBaseUrl(activeFrame.get('location'))) @@ -230,7 +244,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}` + }}> + })} + style={{ + transform: this.props.canGoForward ? `scale(${this.props.swipeRightPercent})` : `scale(1)`, + opacity: `${this.props.swipeRightOpacity}` + }}> } + get swipeNavigationDistanceSetting () { + if (platformUtil.isDarwin()) { + return
+ + + + + + + + +
+ } + + return null + } + render () { return
@@ -62,6 +86,8 @@ class AdvancedTab extends ImmutableComponent { + {this.swipeNavigationDistanceSetting} + @@ -80,6 +106,19 @@ const styles = StyleSheet.create({ paddingBottom: '40px' }, + swipeNavigation: { + display: 'flex', + alignItems: 'center' + }, + + swipeNavigation__shortLabel: { + marginRight: '5px' + }, + + swipeNavigation__longLabel: { + marginLeft: '5px' + }, + moreInfo: { display: 'flex', flex: 1, diff --git a/js/actions/appActions.js b/js/actions/appActions.js index eb4e78cd606..40ebbb7ad4b 100644 --- a/js/actions/appActions.js +++ b/js/actions/appActions.js @@ -1455,6 +1455,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/appConfig.js b/js/constants/appConfig.js index 6c8985f0c5f..34f4feefda7 100644 --- a/js/constants/appConfig.js +++ b/js/constants/appConfig.js @@ -195,6 +195,7 @@ module.exports = { 'advanced.auto-suggest-sites': true, 'advanced.hide-lower-sites': true, 'advanced.toolbar-ui-scale': 'normal', + 'advanced.swipe-swipe-nav-distance': 101, 'shutdown.clear-history': false, 'shutdown.clear-downloads': false, 'shutdown.clear-cache': false, diff --git a/js/constants/appConstants.js b/js/constants/appConstants.js index 5792689780c..de32438fb0a 100644 --- a/js/constants/appConstants.js +++ b/js/constants/appConstants.js @@ -135,7 +135,9 @@ const appConstants = { APP_URL_BAR_SELECTED_INDEX_CHANGED: _, APP_ON_TOGGLE_BROWSING_DATA: _, APP_ON_CANCEL_BROWSING_DATA: _, - APP_SET_SKIP_SYNC: _ + APP_SET_SKIP_SYNC: _, + APP_SWIPE_LEFT: _, + APP_SWIPE_RIGHT: _ } module.exports = mapValuesByKeys(appConstants) diff --git a/js/constants/settings.js b/js/constants/settings.js index 5024b1cb55b..bc233877d0c 100644 --- a/js/constants/settings.js +++ b/js/constants/settings.js @@ -78,6 +78,7 @@ const settings = { MINIMUM_VISITS: 'advanced.minimum-visits', AUTO_SUGGEST_SITES: 'advanced.auto-suggest-sites', TOOLBAR_UI_SCALE: 'advanced.toolbar-ui-scale', + SWIPE_NAV_DISTANCE: 'advanced.swipe-nav-distance', // Sync settings SYNC_ENABLED: 'sync.enabled', SYNC_DEVICE_NAME: 'sync.device-name', diff --git a/js/stores/appStore.js b/js/stores/appStore.js index c86635c0cbe..df3b3f572e0 100644 --- a/js/stores/appStore.js +++ b/js/stores/appStore.js @@ -899,6 +899,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: }