Merge pull request #761 from guardian/lg-swipe-issues

Swipe on the issue from the issues menu to close the menu

projects/Mallard/src/navigation/helpers/base.tsx

@@ -98,19 +98,16 @@ export interface IssueNavigationProps {
 interface NavigateToIssueProps {
     navigation: NavigationScreenProp<{}>
     navigationProps: IssueNavigationProps
-    shouldShowMoreIssuesBtn?: boolean
     setIssueId: (path: PathToIssue) => void
 }
 
 const navigateToIssue = ({
     navigation,
     navigationProps,
-    shouldShowMoreIssuesBtn = true,
     setIssueId,
 }: NavigateToIssueProps) => {
     navigation.navigate(routeNames.Issue, {
         ...navigationProps,
-        shouldShowMoreIssuesBtn,
     })
     if (navigationProps.path) {
         setIssueId(navigationProps.path)

projects/Mallard/src/navigation/navigators/underlay.tsx

@@ -1,5 +1,11 @@
 import React from 'react'
-import { Animated, StyleSheet } from 'react-native'
+import {
+    Animated,
+    Dimensions,
+    StyleSheet,
+    TouchableWithoutFeedback,
+    View,
+} from 'react-native'
 import {
     createStackNavigator,
     NavigationContainer,
@@ -9,14 +15,16 @@ import {
 } from 'react-navigation'
 import { ariaHidden } from 'src/helpers/a11y'
 import { supportsTransparentCards } from 'src/helpers/features'
+import { safeInterpolation } from 'src/helpers/math'
+import { Breakpoints } from 'src/theme/breakpoints'
 import { color } from 'src/theme/color'
+import { addStaticRouter } from '../helpers/base'
 import {
-    NavigatorWrapper,
     addStaticRouterWithPosition,
+    NavigatorWrapper,
 } from '../helpers/transition'
-import { screenInterpolator } from './underlay/transition'
-import { addStaticRouter } from '../helpers/base'
-import { safeInterpolation } from 'src/helpers/math'
+import { sidebarWidth } from './underlay/positions'
+import { screenInterpolator, topLayerTransition } from './underlay/transition'
 
 const overlayStyles = StyleSheet.create({
     root: {
@@ -26,10 +34,7 @@ const overlayStyles = StyleSheet.create({
     },
 })
 
-const addStaticRouterWithOverlay: NavigatorWrapper = (
-    navigator,
-    getPosition,
-) => {
+const addViewsForTopLayer: NavigatorWrapper = (navigator, getPosition) => {
     const Navigator = addStaticRouterWithPosition(navigator, getPosition)
     const Wrapper = ({ navigation }: NavigationInjectedProps) => {
         const posi = getPosition()
@@ -48,14 +53,66 @@ const addStaticRouterWithOverlay: NavigatorWrapper = (
                         },
                     ]}
                 />
-
                 <Navigator navigation={navigation} />
             </>
         )
     }
     return addStaticRouter(navigator, Wrapper)
 }
 
+const bottomStyles = StyleSheet.create({
+    content: {
+        flex: 1,
+    },
+    contentTablet: {
+        maxWidth: sidebarWidth,
+        alignSelf: 'flex-end',
+    },
+})
+const addViewsForBottomLayer: NavigatorWrapper = (navigator, getPosition) => {
+    const Navigator = addStaticRouterWithPosition(navigator, getPosition)
+    const isTablet =
+        Dimensions.get('window').width >= Breakpoints.tabletVertical
+
+    /*
+    on this bottom layer we wanna add a 'touchable' that goes back
+    in the size and position of the visible parts of the top
+    layer (eg. the issue list shows a bit of the previous issue.
+    we want a touchable there).
+    This gives the user the illusion that by tapping on the bit of
+    the previous screen they see, they are bringing it back into focus
+    */
+    const backButtonStyles = topLayerTransition(new Animated.Value(1), 0)
+
+    const Wrapper = ({ navigation }: NavigationInjectedProps) => {
+        return (
+            <>
+                <View
+                    style={[
+                        bottomStyles.content,
+                        isTablet && bottomStyles.contentTablet,
+                    ]}
+                >
+                    <Navigator navigation={navigation} />
+                </View>
+                <TouchableWithoutFeedback
+                    onPressIn={() => {
+                        navigation.goBack()
+                    }}
+                >
+                    <Animated.View
+                        style={[
+                            StyleSheet.absoluteFillObject,
+                            backButtonStyles,
+                        ]}
+                    />
+                </TouchableWithoutFeedback>
+            </>
+        )
+    }
+    return addStaticRouter(navigator, Wrapper)
+}
+
 const createUnderlayNavigator = (
     top: NavigationRouteConfig,
     bottom: {
@@ -66,12 +123,12 @@ const createUnderlayNavigator = (
 
     const navigation: { [key: string]: NavigationContainer } = {
         _: supportsTransparentCards()
-            ? addStaticRouterWithOverlay(top, () => animatedValue)
+            ? addViewsForTopLayer(top, () => animatedValue)
             : top,
     }
     for (const [key, value] of Object.entries(bottom)) {
         navigation[key] = supportsTransparentCards()
-            ? addStaticRouterWithPosition(value, () => animatedValue)
+            ? addViewsForBottomLayer(value, () => animatedValue)
             : value
     }
 

projects/Mallard/src/navigation/navigators/underlay/positions.tsx

@@ -0,0 +1 @@
+export const sidebarWidth = 360

projects/Mallard/src/navigation/navigators/underlay/transition.tsx

@@ -4,12 +4,12 @@ import { minOpacity, minScale, radius } from 'src/navigation/helpers/transition'
 import { metrics } from 'src/theme/spacing'
 import { Breakpoints } from 'src/theme/breakpoints'
 import { safeInterpolation } from 'src/helpers/math'
+import { sidebarWidth } from './positions'
 
-const sidebarWidth = 360
-
-const issueScreenToIssueList = (sceneProps: NavigationTransitionProps) => {
-    const { position, scene } = sceneProps
-    const sceneIndex = scene.index
+export const topLayerTransition = (
+    position: NavigationTransitionProps['position'],
+    sceneIndex: number,
+) => {
     const { height: windowHeight, width } = Dimensions.get('window')
     const isTablet = width >= Breakpoints.tabletVertical
     const isPhone = width >= Breakpoints.phone
@@ -58,9 +58,10 @@ const issueScreenToIssueList = (sceneProps: NavigationTransitionProps) => {
     }
 }
 
-const IssueListToIssueScreen = (sceneProps: NavigationTransitionProps) => {
-    const { position, scene } = sceneProps
-    const sceneIndex = scene.index
+export const bottomLayerTransition = (
+    position: NavigationTransitionProps['position'],
+    sceneIndex: number,
+) => {
     const { height: windowHeight, width } = Dimensions.get('window')
     const isTablet = width >= Breakpoints.tabletVertical
 
@@ -95,40 +96,31 @@ const IssueListToIssueScreen = (sceneProps: NavigationTransitionProps) => {
     const translateOffset = (windowHeight - windowHeight * minScale) * -0.5
     const finalTranslate = translateOffset + metrics.slideCardSpacing / 1.5
 
-    const translateY = position.interpolate({
+    const translate = position.interpolate({
         inputRange: safeInterpolation([sceneIndex, sceneIndex + 1]),
         outputRange: safeInterpolation([0, finalTranslate]),
     })
 
-    const platformStyles = isTablet
-        ? {
-              transform: [{ translateX: width - sidebarWidth }, { scale }],
-              width: sidebarWidth,
-          }
-        : {
-              transform: [
-                  { translateY },
-                  {
-                      scale,
-                  },
-              ],
-          }
+    const transform = [
+        { scale },
+        isTablet ? { translateX: translate } : { translateY: translate },
+    ]
 
     return {
         zIndex: 0,
         elevation: 0,
         opacity,
-        ...platformStyles,
+        transform,
         borderRadius,
         overflow: 'hidden',
     }
 }
 const screenInterpolator = (sceneProps: NavigationTransitionProps) => {
     const { scene } = sceneProps
     if (scene.route.routeName === '_') {
-        return issueScreenToIssueList(sceneProps)
+        return topLayerTransition(sceneProps.position, sceneProps.scene.index)
     }
-    return IssueListToIssueScreen(sceneProps)
+    return bottomLayerTransition(sceneProps.position, sceneProps.scene.index)
 }
 
 export { screenInterpolator }

projects/Mallard/src/screens/issue-screen.tsx

@@ -1,11 +1,11 @@
 import React, { ReactElement } from 'react'
 import {
     Animated,
+    Image,
     StyleProp,
     StyleSheet,
     View,
     ViewStyle,
-    Image,
 } from 'react-native'
 import { FlatList } from 'react-native-gesture-handler'
 import { NavigationInjectedProps, withNavigation } from 'react-navigation'
@@ -25,15 +25,18 @@ import { Weather } from 'src/components/weather'
 import { supportsTransparentCards } from 'src/helpers/features'
 import { clearCache } from 'src/helpers/fetch/cache'
 import { useIssueDate } from 'src/helpers/issues'
-import { safeInterpolation } from 'src/helpers/math'
 import {
+    CONNECTION_FAILED_AUTO_RETRY,
     CONNECTION_FAILED_ERROR,
     CONNECTION_FAILED_SUB_ERROR,
     REFRESH_BUTTON_TEXT,
-    CONNECTION_FAILED_AUTO_RETRY,
 } from 'src/helpers/words'
 import { useIssueResponse } from 'src/hooks/use-issue'
-import { useMediaQuery, useDimensions } from 'src/hooks/use-screen'
+import {
+    issueSummaryToLatestPath,
+    useIssueSummary,
+} from 'src/hooks/use-issue-summary'
+import { useDimensions, useMediaQuery } from 'src/hooks/use-screen'
 import { useIsPreview } from 'src/hooks/use-settings'
 import { navigateToIssueList } from 'src/navigation/helpers/base'
 import { useNavigatorPosition } from 'src/navigation/helpers/transition'
@@ -43,10 +46,6 @@ import { Breakpoints } from 'src/theme/breakpoints'
 import { color } from 'src/theme/color'
 import { metrics } from 'src/theme/spacing'
 import { useIssueScreenSize, WithIssueScreenSize } from './issue/use-size'
-import {
-    useIssueSummary,
-    issueSummaryToLatestPath,
-} from 'src/hooks/use-issue-summary'
 
 const styles = StyleSheet.create({
     weatherWide: {
@@ -84,7 +83,6 @@ const ScreenHeader = withNavigation(
         )
 
         const goToIssueList = () => {
-            navigation.setParams({ shouldShowMoreIssuesBtn: false })
             navigateToIssueList(navigation)
         }
 
@@ -95,29 +93,13 @@ const ScreenHeader = withNavigation(
                     goToIssueList()
                 }}
                 action={
-                    <Animated.View
-                        style={
-                            supportsTransparentCards() && {
-                                opacity: position.interpolate({
-                                    inputRange: safeInterpolation([0, 1]),
-                                    outputRange: safeInterpolation([1, 0]),
-                                }),
-                            }
-                        }
-                    >
-                        {!supportsTransparentCards() || // ignore for devices that obscure the button
-                        (navigation.getParam('shouldShowMoreIssuesBtn') ||
-                            navigation.getParam('shouldShowMoreIssuesBtn') ===
-                                undefined) ? (
-                            <Button
-                                icon={isTablet ? '' : ''}
-                                alt="More issues"
-                                onPress={() => {
-                                    goToIssueList()
-                                }}
-                            />
-                        ) : null}
-                    </Animated.View>
+                    <Button
+                        icon={isTablet ? '' : ''}
+                        alt="More issues"
+                        onPress={() => {
+                            goToIssueList()
+                        }}
+                    />
                 }
             >
                 <Animated.View