diff options
Diffstat (limited to 'src/view')
-rw-r--r-- | src/view/com/lightbox/Lightbox.web.tsx | 5 | ||||
-rw-r--r-- | src/view/com/util/forms/Button.tsx | 17 | ||||
-rw-r--r-- | src/view/com/util/forms/DropdownButton.tsx | 2 | ||||
-rw-r--r-- | src/view/screens/SearchMobile.tsx | 2 | ||||
-rw-r--r-- | src/view/shell/Drawer.tsx | 6 | ||||
-rw-r--r-- | src/view/shell/bottom-bar/BottomBar.tsx | 9 | ||||
-rw-r--r-- | src/view/shell/index.web.tsx | 12 |
7 files changed, 44 insertions, 9 deletions
diff --git a/src/view/com/lightbox/Lightbox.web.tsx b/src/view/com/lightbox/Lightbox.web.tsx index eff9af2d2..d389279b1 100644 --- a/src/view/com/lightbox/Lightbox.web.tsx +++ b/src/view/com/lightbox/Lightbox.web.tsx @@ -21,6 +21,9 @@ interface Img { export const Lightbox = observer(function Lightbox() { const store = useStores() + + const onClose = useCallback(() => store.shell.closeLightbox(), [store.shell]) + if (!store.shell.isLightboxActive) { return null } @@ -29,8 +32,6 @@ export const Lightbox = observer(function Lightbox() { const initialIndex = activeLightbox instanceof models.ImagesLightbox ? activeLightbox.index : 0 - const onClose = () => store.shell.closeLightbox() - let imgs: Img[] | undefined if (activeLightbox instanceof models.ProfileImageLightbox) { const opts = activeLightbox diff --git a/src/view/com/util/forms/Button.tsx b/src/view/com/util/forms/Button.tsx index a8f1f363f..6a5f19f99 100644 --- a/src/view/com/util/forms/Button.tsx +++ b/src/view/com/util/forms/Button.tsx @@ -128,6 +128,7 @@ export function Button({ }, }, ) + const onPressWrapped = React.useCallback( (event: Event) => { event.stopPropagation() @@ -136,9 +137,23 @@ export function Button({ }, [onPress], ) + + const getStyle = React.useCallback( + state => { + const arr = [typeOuterStyle, styles.outer, style] + if (state.pressed) { + arr.push({opacity: 0.6}) + } else if (state.hovered) { + arr.push({opacity: 0.8}) + } + return arr + }, + [typeOuterStyle, style], + ) + return ( <Pressable - style={[typeOuterStyle, styles.outer, style]} + style={getStyle} onPress={onPressWrapped} testID={testID} accessibilityRole="button" diff --git a/src/view/com/util/forms/DropdownButton.tsx b/src/view/com/util/forms/DropdownButton.tsx index 10076360f..36ef1f409 100644 --- a/src/view/com/util/forms/DropdownButton.tsx +++ b/src/view/com/util/forms/DropdownButton.tsx @@ -209,7 +209,7 @@ export function PostDropdownBtn({ }, }, {sep: true}, - { + !isAuthor && { testID: 'postDropdownReportBtn', icon: 'circle-exclamation', label: 'Report post', diff --git a/src/view/screens/SearchMobile.tsx b/src/view/screens/SearchMobile.tsx index 6152038d3..f9b4864b2 100644 --- a/src/view/screens/SearchMobile.tsx +++ b/src/view/screens/SearchMobile.tsx @@ -121,7 +121,7 @@ export const SearchScreen = withAuthRequired( <TouchableWithoutFeedback onPress={onPress} accessible={false}> <View style={[pal.view, styles.container]}> <HeaderWithInput - isInputFocused={true} + isInputFocused={isInputFocused} query={query} setIsInputFocused={setIsInputFocused} onChangeQuery={onChangeQuery} diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx index 680b60ba1..79c713e2d 100644 --- a/src/view/shell/Drawer.tsx +++ b/src/view/shell/Drawer.tsx @@ -215,7 +215,11 @@ export const DrawerContent = observer(() => { } label="Notifications" accessibilityLabel="Notifications" - accessibilityHint={`${store.me.notifications.unreadCountLabel} unread`} + accessibilityHint={ + notifications.unreadCountLabel === '' + ? '' + : `${notifications.unreadCountLabel} unread` + } count={notifications.unreadCountLabel} bold={isAtNotifications} onPress={onPressNotifications} diff --git a/src/view/shell/bottom-bar/BottomBar.tsx b/src/view/shell/bottom-bar/BottomBar.tsx index c11a0128c..ef9499f9f 100644 --- a/src/view/shell/bottom-bar/BottomBar.tsx +++ b/src/view/shell/bottom-bar/BottomBar.tsx @@ -38,6 +38,7 @@ export const BottomBar = observer(({navigation}: BottomTabBarProps) => { useNavigationTabState() const {footerMinimalShellTransform} = useMinimalShellMode() + const {notifications} = store.me const onPressTab = React.useCallback( (tab: string) => { @@ -138,11 +139,15 @@ export const BottomBar = observer(({navigation}: BottomTabBarProps) => { ) } onPress={onPressNotifications} - notificationCount={store.me.notifications.unreadCountLabel} + notificationCount={notifications.unreadCountLabel} accessible={true} accessibilityRole="tab" accessibilityLabel="Notifications" - accessibilityHint={`${store.me.notifications.unreadCountLabel} unread`} + accessibilityHint={ + notifications.unreadCountLabel === '' + ? '' + : `${notifications.unreadCountLabel} unread` + } /> <Btn testID="bottomBarProfileBtn" diff --git a/src/view/shell/index.web.tsx b/src/view/shell/index.web.tsx index 349376436..68ce370ed 100644 --- a/src/view/shell/index.web.tsx +++ b/src/view/shell/index.web.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, {useEffect} from 'react' import {observer} from 'mobx-react-lite' import {View, StyleSheet, TouchableOpacity} from 'react-native' import {useStores} from 'state/index' @@ -14,11 +14,21 @@ import {RoutesContainer, FlatNavigator} from '../../Navigation' import {DrawerContent} from './Drawer' import {useWebMediaQueries} from '../../lib/hooks/useWebMediaQueries' import {BottomBarWeb} from './bottom-bar/BottomBarWeb' +import {useNavigation} from '@react-navigation/native' +import {NavigationProp} from 'lib/routes/types' const ShellInner = observer(() => { const store = useStores() const {isDesktop} = useWebMediaQueries() + const navigator = useNavigation<NavigationProp>() + + useEffect(() => { + navigator.addListener('state', () => { + store.shell.closeAnyActiveElement() + }) + }, [navigator, store.shell]) + return ( <> <View style={s.hContentRegion}> |