diff options
Diffstat (limited to 'src/view/com')
| -rw-r--r-- | src/view/com/home/HomeHeaderLayout.web.tsx | 73 | ||||
| -rw-r--r-- | src/view/com/home/HomeHeaderLayoutMobile.tsx | 67 |
2 files changed, 125 insertions, 15 deletions
diff --git a/src/view/com/home/HomeHeaderLayout.web.tsx b/src/view/com/home/HomeHeaderLayout.web.tsx index 28f29ec78..9bfa82cd2 100644 --- a/src/view/com/home/HomeHeaderLayout.web.tsx +++ b/src/view/com/home/HomeHeaderLayout.web.tsx @@ -1,6 +1,15 @@ import React from 'react' import {StyleSheet, View} from 'react-native' -import Animated from 'react-native-reanimated' +import Animated, { + useAnimatedStyle, + useReducedMotion, + useSharedValue, + withDelay, + withRepeat, + withSequence, + withSpring, + withTiming, +} from 'react-native-reanimated' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' @@ -8,11 +17,11 @@ import {useSession} from '#/state/session' import {useShellLayout} from '#/state/shell/shell-layout' import {useMinimalShellHeaderTransform} from 'lib/hooks/useMinimalShellTransform' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {Logo} from '#/view/icons/Logo' +// import {Logo} from '#/view/icons/Logo' import {atoms as a, useTheme} from '#/alf' +import {Icon, Trigger} from '#/components/dialogs/nuxs/TenMillion/Trigger' import {Hashtag_Stroke2_Corner0_Rounded as FeedsIcon} from '#/components/icons/Hashtag' import {Link} from '#/components/Link' -import {useKawaiiMode} from '../../../state/preferences/kawaii' import {HomeHeaderLayoutMobile} from './HomeHeaderLayoutMobile' export function HomeHeaderLayout(props: { @@ -40,7 +49,42 @@ function HomeHeaderLayoutDesktopAndTablet({ const {hasSession} = useSession() const {_} = useLingui() - const kawaii = useKawaiiMode() + // TEMPORARY - REMOVE AFTER MILLY + // This will just cause the icon to shake a bit when the user first opens the app, drawing attention to the celebration + // 🎉 + const rotate = useSharedValue(0) + const reducedMotion = useReducedMotion() + + // Run this a single time on app mount. + React.useEffect(() => { + if (reducedMotion) return + + // Waits 1500ms, then rotates 10 degrees with a spring animation. Repeats once. + rotate.value = withDelay( + 1000, + withRepeat( + withSequence( + withTiming(10, {duration: 100}), + withSpring(0, { + mass: 1, + damping: 1, + stiffness: 200, + overshootClamping: false, + }), + ), + 2, + false, + ), + ) + }, [rotate, reducedMotion]) + + const animatedStyle = useAnimatedStyle(() => ({ + transform: [ + { + rotateZ: `${rotate.value}deg`, + }, + ], + })) return ( <> @@ -57,21 +101,30 @@ function HomeHeaderLayoutDesktopAndTablet({ t.atoms.bg, t.atoms.border_contrast_low, styles.bar, - kawaii && {paddingTop: 22, paddingBottom: 16}, ]}> - <View + <Animated.View style={[ a.absolute, a.inset_0, a.pt_lg, a.m_auto, - kawaii && {paddingTop: 4, paddingBottom: 0}, { - width: kawaii ? 84 : 28, + width: 28, }, + animatedStyle, ]}> - <Logo width={kawaii ? 60 : 28} /> - </View> + <Trigger> + {ctx => ( + <Icon + width={28} + style={{ + opacity: ctx.hovered || ctx.pressed ? 0.8 : 1, + }} + /> + )} + </Trigger> + {/* <Logo width={28} /> */} + </Animated.View> <Link to="/feeds" diff --git a/src/view/com/home/HomeHeaderLayoutMobile.tsx b/src/view/com/home/HomeHeaderLayoutMobile.tsx index e537abfaa..4817757b5 100644 --- a/src/view/com/home/HomeHeaderLayoutMobile.tsx +++ b/src/view/com/home/HomeHeaderLayoutMobile.tsx @@ -1,6 +1,15 @@ import React from 'react' import {StyleSheet, TouchableOpacity, View} from 'react-native' -import Animated from 'react-native-reanimated' +import Animated, { + useAnimatedStyle, + useReducedMotion, + useSharedValue, + withDelay, + withRepeat, + withSequence, + withSpring, + withTiming, +} from 'react-native-reanimated' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' @@ -11,10 +20,11 @@ import {HITSLOP_10} from 'lib/constants' import {useMinimalShellHeaderTransform} from 'lib/hooks/useMinimalShellTransform' import {usePalette} from 'lib/hooks/usePalette' import {isWeb} from 'platform/detection' -import {Logo} from '#/view/icons/Logo' +// import {Logo} from '#/view/icons/Logo' import {atoms} from '#/alf' import {useTheme} from '#/alf' import {atoms as a} from '#/alf' +import {Icon, Trigger} from '#/components/dialogs/nuxs/TenMillion/Trigger' import {ColorPalette_Stroke2_Corner0_Rounded as ColorPalette} from '#/components/icons/ColorPalette' import {Hashtag_Stroke2_Corner0_Rounded as FeedsIcon} from '#/components/icons/Hashtag' import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu' @@ -39,6 +49,43 @@ export function HomeHeaderLayoutMobile({ setDrawerOpen(true) }, [setDrawerOpen]) + // TEMPORARY - REMOVE AFTER MILLY + // This will just cause the icon to shake a bit when the user first opens the app, drawing attention to the celebration + // 🎉 + const rotate = useSharedValue(0) + const reducedMotion = useReducedMotion() + + // Run this a single time on app mount. + React.useEffect(() => { + if (reducedMotion) return + + // Waits 1500ms, then rotates 10 degrees with a spring animation. Repeats once. + rotate.value = withDelay( + 1000, + withRepeat( + withSequence( + withTiming(10, {duration: 100}), + withSpring(0, { + mass: 1, + damping: 1, + stiffness: 200, + overshootClamping: false, + }), + ), + 2, + false, + ), + ) + }, [rotate, reducedMotion]) + + const animatedStyle = useAnimatedStyle(() => ({ + transform: [ + { + rotateZ: `${rotate.value}deg`, + }, + ], + })) + return ( <Animated.View style={[pal.view, pal.border, styles.tabBar, headerMinimalShellTransform]} @@ -59,9 +106,19 @@ export function HomeHeaderLayoutMobile({ <Menu size="lg" fill={t.atoms.text_contrast_medium.color} /> </TouchableOpacity> </View> - <View> - <Logo width={30} /> - </View> + <Animated.View style={animatedStyle}> + <Trigger> + {ctx => ( + <Icon + width={28} + style={{ + opacity: ctx.pressed ? 0.8 : 1, + }} + /> + )} + </Trigger> + {/* <Logo width={30} /> */} + </Animated.View> <View style={[ atoms.flex_row, |