From 6dde5ede34cea0abcf4529c2c7d90d355dfa97a3 Mon Sep 17 00:00:00 2001 From: Mohammad Reza Mahmoudi Date: Wed, 17 May 2023 18:03:05 +0330 Subject: fix theme opposite labels (#700) --- src/lib/icons.tsx | 29 +++++++++++++++++++++++++++++ src/view/shell/desktop/RightNav.tsx | 12 +++++++++--- 2 files changed, 38 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/lib/icons.tsx b/src/lib/icons.tsx index 606d27ea4..06f195011 100644 --- a/src/lib/icons.tsx +++ b/src/lib/icons.tsx @@ -320,6 +320,35 @@ export function MoonIcon({ ) } +// Copyright (c) 2020 Refactoring UI Inc. +// https://github.com/tailwindlabs/heroicons/blob/master/LICENSE +export function SunIcon({ + style, + size, + strokeWidth = 1.5, +}: { + style?: StyleProp + size?: string | number + strokeWidth?: number +}) { + return ( + + + + ) +} + // Copyright (c) 2020 Refactoring UI Inc. // https://github.com/tailwindlabs/heroicons/blob/master/LICENSE export function UserIcon({ diff --git a/src/view/shell/desktop/RightNav.tsx b/src/view/shell/desktop/RightNav.tsx index d6663ce3d..fcdea35e8 100644 --- a/src/view/shell/desktop/RightNav.tsx +++ b/src/view/shell/desktop/RightNav.tsx @@ -11,13 +11,14 @@ import {s} from 'lib/styles' import {useStores} from 'state/index' import {pluralize} from 'lib/strings/helpers' import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle' -import {MoonIcon} from 'lib/icons' +import {MoonIcon, SunIcon} from 'lib/icons' import {formatCount} from 'view/com/util/numeric/format' export const DesktopRightNav = observer(function DesktopRightNav() { const store = useStores() const pal = usePalette('default') const mode = useColorSchemeStyle('Light', 'Dark') + const otherMode = mode === 'Dark' ? 'Light' : 'Dark'; const onDarkmodePress = React.useCallback(() => { store.shell.setDarkMode(!store.shell.darkMode) @@ -71,10 +72,15 @@ export const DesktopRightNav = observer(function DesktopRightNav() { : 'Sets display to dark mode' }> - + { + mode === 'Dark' ? + + : + + } - {mode} mode + {otherMode} mode -- cgit 1.4.1 From d7826a3334cd5ef0cf4e6f816e1c85c49fa1a7a1 Mon Sep 17 00:00:00 2001 From: William Date: Wed, 17 May 2023 10:41:54 -0400 Subject: Properly set isInputFocused (#666) --- src/view/screens/SearchMobile.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') 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( Date: Wed, 17 May 2023 10:43:08 -0400 Subject: hidereport button on own post (#676) --- src/view/com/util/forms/DropdownButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') 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', -- cgit 1.4.1 From 656baa723913951e2a2961f00f0e5219660d0885 Mon Sep 17 00:00:00 2001 From: Ollie H Date: Wed, 17 May 2023 07:46:10 -0700 Subject: Close active elements on state change (#677) --- src/view/com/lightbox/Lightbox.web.tsx | 5 +++-- src/view/shell/index.web.tsx | 12 +++++++++++- 2 files changed, 14 insertions(+), 3 deletions(-) (limited to 'src') 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/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() + + useEffect(() => { + navigator.addListener('state', () => { + store.shell.closeAnyActiveElement() + }) + }, [navigator, store.shell]) + return ( <> -- cgit 1.4.1 From 41f3a0551511c7141aa416efe92130c4bf020214 Mon Sep 17 00:00:00 2001 From: LW Date: Wed, 17 May 2023 07:50:28 -0700 Subject: style: remove `useUnreadCountLabel` hack from `50c1841` (#655) (#686) I just realized how `mobx` works (never used before lol) and now I feel dumb. --- src/Navigation.tsx | 7 +++---- src/lib/hooks/useSetTitle.ts | 8 ++++++-- src/lib/hooks/useUnreadCountLabel.ts | 19 ------------------- 3 files changed, 9 insertions(+), 25 deletions(-) delete mode 100644 src/lib/hooks/useUnreadCountLabel.ts (limited to 'src') diff --git a/src/Navigation.tsx b/src/Navigation.tsx index 17bb3c159..09631701f 100644 --- a/src/Navigation.tsx +++ b/src/Navigation.tsx @@ -28,7 +28,6 @@ import {isNative} from 'platform/detection' import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle' import {router} from './routes' import {usePalette} from 'lib/hooks/usePalette' -import {useUnreadCountLabel} from 'lib/hooks/useUnreadCountLabel' import {useStores} from './state' import {HomeScreen} from './view/screens/Home' @@ -296,9 +295,9 @@ const MyProfileTabNavigator = observer(() => { * The FlatNavigator is used by Web to represent the routes * in a single ("flat") stack. */ -function FlatNavigator() { +const FlatNavigator = observer(() => { const pal = usePalette('default') - const unreadCountLabel = useUnreadCountLabel() + const unreadCountLabel = useStores().me.notifications.unreadCountLabel const title = (page: string) => bskyTitle(page, unreadCountLabel) return ( ) -} +}) /** * The RoutesContainer should wrap all components which need access diff --git a/src/lib/hooks/useSetTitle.ts b/src/lib/hooks/useSetTitle.ts index 85ba44d29..c5c7a5ca1 100644 --- a/src/lib/hooks/useSetTitle.ts +++ b/src/lib/hooks/useSetTitle.ts @@ -3,11 +3,15 @@ import {useNavigation} from '@react-navigation/native' import {NavigationProp} from 'lib/routes/types' import {bskyTitle} from 'lib/strings/headings' -import {useUnreadCountLabel} from './useUnreadCountLabel' +import {useStores} from 'state/index' +/** + * Requires consuming component to be wrapped in `observer`: + * https://stackoverflow.com/a/71488009 + */ export function useSetTitle(title?: string) { const navigation = useNavigation() - const unreadCountLabel = useUnreadCountLabel() + const {unreadCountLabel} = useStores().me.notifications useEffect(() => { if (title) { navigation.setOptions({title: bskyTitle(title, unreadCountLabel)}) diff --git a/src/lib/hooks/useUnreadCountLabel.ts b/src/lib/hooks/useUnreadCountLabel.ts deleted file mode 100644 index e2bf77885..000000000 --- a/src/lib/hooks/useUnreadCountLabel.ts +++ /dev/null @@ -1,19 +0,0 @@ -import {useEffect, useReducer} from 'react' -import {DeviceEventEmitter} from 'react-native' -import {useStores} from 'state/index' - -export function useUnreadCountLabel() { - // HACK: We don't have anything like Redux selectors, - // and we don't want to use - // to react to the whole store - const [, forceUpdate] = useReducer(x => x + 1, 0) - useEffect(() => { - const subscription = DeviceEventEmitter.addListener( - 'unread-notifications', - forceUpdate, - ) - return () => subscription?.remove() - }, [forceUpdate]) - - return useStores().me.notifications.unreadCountLabel -} -- cgit 1.4.1 From 562faa76cce6e935295f30359cbd7180b912cec1 Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Wed, 17 May 2023 11:10:51 -0500 Subject: feat: add basic visual feedback on Button interactions (#708) * feat: add basic visual feedback on Button interaction * Use a more efficient approach to providing visual feedback * Fix some lint issues left over from another PR --------- Co-authored-by: Simek --- src/view/com/util/forms/Button.tsx | 17 ++++++++++++++++- src/view/shell/desktop/RightNav.tsx | 9 ++++----- 2 files changed, 20 insertions(+), 6 deletions(-) (limited to 'src') 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 ( { store.shell.setDarkMode(!store.shell.darkMode) @@ -72,12 +72,11 @@ export const DesktopRightNav = observer(function DesktopRightNav() { : 'Sets display to dark mode' }> - { - mode === 'Dark' ? + {mode === 'Dark' ? ( - : + ) : ( - } + )} {otherMode} mode -- cgit 1.4.1 From f7f0db65d36506d1e32c3d349e4505136180afb0 Mon Sep 17 00:00:00 2001 From: renahlee Date: Tue, 16 May 2023 22:31:59 -0700 Subject: Update hint for notifications --- src/view/shell/Drawer.tsx | 6 +++++- src/view/shell/bottom-bar/BottomBar.tsx | 9 +++++++-- 2 files changed, 12 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx index d595bc524..89e30002e 100644 --- a/src/view/shell/Drawer.tsx +++ b/src/view/shell/Drawer.tsx @@ -222,7 +222,11 @@ export const DrawerContent = observer(() => { } label="Notifications" accessibilityLabel="Notifications" - accessibilityHint={`${store.me.notifications.unreadCountLabel} unread`} + accessibilityHint={ + notifications.unreadCountLabel === '' + ? 'No new notifications' + : `${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..b057964c6 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 === '' + ? 'No new notifications' + : `${notifications.unreadCountLabel} unread` + } /> Date: Wed, 17 May 2023 09:13:06 -0700 Subject: Update to empty hint if no notifications --- src/view/shell/Drawer.tsx | 2 +- src/view/shell/bottom-bar/BottomBar.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx index 89e30002e..2ecdbaab2 100644 --- a/src/view/shell/Drawer.tsx +++ b/src/view/shell/Drawer.tsx @@ -224,7 +224,7 @@ export const DrawerContent = observer(() => { accessibilityLabel="Notifications" accessibilityHint={ notifications.unreadCountLabel === '' - ? 'No new notifications' + ? '' : `${notifications.unreadCountLabel} unread` } count={notifications.unreadCountLabel} diff --git a/src/view/shell/bottom-bar/BottomBar.tsx b/src/view/shell/bottom-bar/BottomBar.tsx index b057964c6..ef9499f9f 100644 --- a/src/view/shell/bottom-bar/BottomBar.tsx +++ b/src/view/shell/bottom-bar/BottomBar.tsx @@ -145,7 +145,7 @@ export const BottomBar = observer(({navigation}: BottomTabBarProps) => { accessibilityLabel="Notifications" accessibilityHint={ notifications.unreadCountLabel === '' - ? 'No new notifications' + ? '' : `${notifications.unreadCountLabel} unread` } /> -- cgit 1.4.1