From 81a1294ed14ed34d74d1a9aa50328f12a2d80ec8 Mon Sep 17 00:00:00 2001 From: Ameer Al Ashhab <33054370+ameer2468@users.noreply.github.com> Date: Mon, 23 Sep 2024 22:53:01 +0300 Subject: [PATCH 1/2] [MOB-123,122,121] Fix & improve navigation issues (#2718) * Fix drawer opening on initial pages only and location in settings to take you to edit location * fix ts --- apps/mobile/src/hooks/useEnableDrawer.ts | 27 +++++++ .../mobile/src/navigation/DrawerNavigator.tsx | 1 + apps/mobile/src/navigation/SearchStack.tsx | 7 +- apps/mobile/src/navigation/TabNavigator.tsx | 70 ++++++++++--------- .../src/navigation/tabs/BrowseStack.tsx | 7 +- .../src/navigation/tabs/OverviewStack.tsx | 7 +- .../src/navigation/tabs/SettingsStack.tsx | 7 +- apps/mobile/src/screens/browse/Browse.tsx | 2 + apps/mobile/src/screens/browse/Locations.tsx | 15 ++-- apps/mobile/src/screens/network/Network.tsx | 2 + apps/mobile/src/screens/overview/Overview.tsx | 2 + apps/mobile/src/screens/settings/Settings.tsx | 2 + .../settings/library/LocationSettings.tsx | 2 +- 13 files changed, 108 insertions(+), 43 deletions(-) create mode 100644 apps/mobile/src/hooks/useEnableDrawer.ts diff --git a/apps/mobile/src/hooks/useEnableDrawer.ts b/apps/mobile/src/hooks/useEnableDrawer.ts new file mode 100644 index 000000000..64079a4d9 --- /dev/null +++ b/apps/mobile/src/hooks/useEnableDrawer.ts @@ -0,0 +1,27 @@ +import { useNavigation } from '@react-navigation/native'; +import { useEffect } from 'react'; + +/** + * This hook enables the drawer swipe gesture when the screen is focused and disables it when the screen is blurred. + */ + +export function useEnableDrawer(): void { + const navigation = useNavigation(); + useEffect(() => { + const tabNavigator = navigation.getParent(); // This is the TabNavigator + const drawerNavigator = tabNavigator?.getParent(); // This is the DrawerNavigator + + const unsubscribeFocus = navigation.addListener('focus', () => { + drawerNavigator?.setOptions({ swipeEnabled: true }); + }); + + const unsubscribeBlur = navigation.addListener('blur', () => { + drawerNavigator?.setOptions({ swipeEnabled: false }); + }); + + return () => { + unsubscribeFocus(); + unsubscribeBlur(); + }; + }, [navigation]); +} diff --git a/apps/mobile/src/navigation/DrawerNavigator.tsx b/apps/mobile/src/navigation/DrawerNavigator.tsx index a72b4b867..211eeb4fc 100644 --- a/apps/mobile/src/navigation/DrawerNavigator.tsx +++ b/apps/mobile/src/navigation/DrawerNavigator.tsx @@ -16,6 +16,7 @@ export default function DrawerNavigator() { initialRouteName="Home" screenOptions={{ headerShown: false, + swipeEnabled: false, drawerStyle: { backgroundColor: tw.color('app-darkBox'), width: '70%', diff --git a/apps/mobile/src/navigation/SearchStack.tsx b/apps/mobile/src/navigation/SearchStack.tsx index 0f0e4388e..ef4edb250 100644 --- a/apps/mobile/src/navigation/SearchStack.tsx +++ b/apps/mobile/src/navigation/SearchStack.tsx @@ -10,7 +10,12 @@ const Stack = createNativeStackNavigator(); export default function SearchStack() { return ( - + - {TabScreens.map((screen, index) => ( - ({ - tabBarLabel: screen.label, - tabBarLabelStyle: screen.labelStyle, - /** - * TouchableWithoutFeedback is used to prevent Android ripple effect - * State is being used to control the animation and make Rive work - * Tab.Screen listeners are needed because if a user taps on the tab text only, the animation won't play - * This may be revisited in the future to update accordingly - */ - tabBarIcon: () => ( - { - navigation.navigate(screen.name); - setActiveIndex(index); - }} - > - {screen.icon} - - ), - tabBarTestID: screen.testID - })} - listeners={() => ({ - focus: () => { - Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); - setActiveIndex(index); - } - })} - /> - ))} + {TabScreens.map((screen, index) => { + return ( + ({ + tabBarLabel: screen.label, + tabBarLabelStyle: screen.labelStyle, + /** + * TouchableWithoutFeedback is used to prevent Android ripple effect + * State is being used to control the animation and make Rive work + * Tab.Screen listeners are needed because if a user taps on the tab text only, the animation won't play + * This may be revisited in the future to update accordingly + */ + tabBarIcon: () => ( + { + navigation.navigate(screen.name); + setActiveIndex(index); + }} + > + {screen.icon} + + ), + tabBarTestID: screen.testID + })} + listeners={() => ({ + focus: () => { + Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); + setActiveIndex(index); + } + })} + /> + ); + })} ); } diff --git a/apps/mobile/src/navigation/tabs/BrowseStack.tsx b/apps/mobile/src/navigation/tabs/BrowseStack.tsx index e7ce71588..5f38af1e1 100644 --- a/apps/mobile/src/navigation/tabs/BrowseStack.tsx +++ b/apps/mobile/src/navigation/tabs/BrowseStack.tsx @@ -16,7 +16,12 @@ const Stack = createNativeStackNavigator(); export default function BrowseStack() { return ( - + (); export default function OverviewStack() { return ( - + (); export default function SettingsStack() { return ( - + {/* */} diff --git a/apps/mobile/src/screens/browse/Locations.tsx b/apps/mobile/src/screens/browse/Locations.tsx index e482baa9b..e951c2d62 100644 --- a/apps/mobile/src/screens/browse/Locations.tsx +++ b/apps/mobile/src/screens/browse/Locations.tsx @@ -16,9 +16,10 @@ import { useSearchStore } from '~/stores/searchStore'; interface Props { viewStyle?: 'grid' | 'list'; + navToSettings?: boolean; // on press, navigate to settings } -export default function LocationsScreen({ viewStyle }: Props) { +export default function LocationsScreen({ viewStyle, navToSettings }: Props) { const locationsQuery = useLibraryQuery(['locations.list']); const locations = locationsQuery.data; const { search } = useSearchStore(); @@ -67,12 +68,18 @@ export default function LocationsScreen({ viewStyle }: Props) { numColumns={viewStyle === 'grid' ? 3 : 1} renderItem={({ item }) => ( + onPress={() => { + if (navToSettings) { + return navigation.navigate('SettingsStack', { + screen: 'EditLocationSettings', + params: { id: item.id } + }); + } navigation.navigate('BrowseStack', { screen: 'Location', params: { id: item.id } - }) - } + }); + }} editLocation={() => navigation.navigate('SettingsStack', { screen: 'EditLocationSettings', diff --git a/apps/mobile/src/screens/network/Network.tsx b/apps/mobile/src/screens/network/Network.tsx index 92e7ed22c..1725a8dd4 100644 --- a/apps/mobile/src/screens/network/Network.tsx +++ b/apps/mobile/src/screens/network/Network.tsx @@ -1,10 +1,12 @@ import { Text } from 'react-native'; import { Icon } from '~/components/icons/Icon'; import ScreenContainer from '~/components/layout/ScreenContainer'; +import { useEnableDrawer } from '~/hooks/useEnableDrawer'; import { tw } from '~/lib/tailwind'; import { NetworkStackScreenProps } from '~/navigation/tabs/NetworkStack'; export default function NetworkScreen({ navigation }: NetworkStackScreenProps<'Network'>) { + useEnableDrawer(); return ( diff --git a/apps/mobile/src/screens/overview/Overview.tsx b/apps/mobile/src/screens/overview/Overview.tsx index 7cc71c35f..c4f19fe9e 100644 --- a/apps/mobile/src/screens/overview/Overview.tsx +++ b/apps/mobile/src/screens/overview/Overview.tsx @@ -5,6 +5,7 @@ import Cloud from '~/components/overview/Cloud'; import Devices from '~/components/overview/Devices'; import Locations from '~/components/overview/Locations'; import OverviewStats from '~/components/overview/OverviewStats'; +import { useEnableDrawer } from '~/hooks/useEnableDrawer'; const EMPTY_STATISTICS = { id: 0, @@ -26,6 +27,7 @@ export default function OverviewScreen() { // Running the query here so the data is already available for settings screen useLibraryQuery(['sync.enabled']); + useEnableDrawer(); return ( diff --git a/apps/mobile/src/screens/settings/Settings.tsx b/apps/mobile/src/screens/settings/Settings.tsx index 7ec0e42c8..e4e22c7e9 100644 --- a/apps/mobile/src/screens/settings/Settings.tsx +++ b/apps/mobile/src/screens/settings/Settings.tsx @@ -19,6 +19,7 @@ import { Platform, SectionList, Text, TouchableWithoutFeedback, View } from 'rea import { DebugState, useDebugState, useDebugStateEnabler, useLibraryQuery } from '@sd/client'; import ScreenContainer from '~/components/layout/ScreenContainer'; import { SettingsItem } from '~/components/settings/SettingsItem'; +import { useEnableDrawer } from '~/hooks/useEnableDrawer'; import { tw, twStyle } from '~/lib/tailwind'; import { SettingsStackParamList, SettingsStackScreenProps } from '~/navigation/tabs/SettingsStack'; @@ -157,6 +158,7 @@ function renderSectionHeader({ section }: { section: { title: string } }) { export default function SettingsScreen({ navigation }: SettingsStackScreenProps<'Settings'>) { const debugState = useDebugState(); const syncEnabled = useLibraryQuery(['sync.enabled']); + useEnableDrawer(); return ( { - return ; + return ; }; export default LocationSettingsScreen; From 33da868a0bdd957892f06ad36bd6b2d5b98328b8 Mon Sep 17 00:00:00 2001 From: Ameer Al Ashhab <33054370+ameer2468@users.noreply.github.com> Date: Tue, 24 Sep 2024 21:56:36 +0300 Subject: [PATCH 2/2] [ENG-1897,1900,1901] Quick add tag fix & more (#2720) * quick view to quick preview & fix add tag in quick preview * Make sure color picker shows when creating a tag in quick preview --- interface/app/$libraryId/Explorer/ContextMenu/SharedItems.tsx | 2 +- interface/app/$libraryId/Explorer/Inspector/index.tsx | 1 + interface/components/ColorPicker.tsx | 2 +- packages/ui/src/Dialog.tsx | 4 ++-- 4 files changed, 5 insertions(+), 4 deletions(-) diff --git a/interface/app/$libraryId/Explorer/ContextMenu/SharedItems.tsx b/interface/app/$libraryId/Explorer/ContextMenu/SharedItems.tsx index f8115633f..1c79d03ac 100644 --- a/interface/app/$libraryId/Explorer/ContextMenu/SharedItems.tsx +++ b/interface/app/$libraryId/Explorer/ContextMenu/SharedItems.tsx @@ -63,7 +63,7 @@ export const OpenQuickView = () => { return ( (getQuickPreviewStore().open = true)} /> diff --git a/interface/app/$libraryId/Explorer/Inspector/index.tsx b/interface/app/$libraryId/Explorer/Inspector/index.tsx index dcdfff4b9..08b3255d0 100644 --- a/interface/app/$libraryId/Explorer/Inspector/index.tsx +++ b/interface/app/$libraryId/Explorer/Inspector/index.tsx @@ -395,6 +395,7 @@ export const SingleItemMetadata = ({ item }: { item: ExplorerItem }) => { {t('add_tag')}} side="left" + className="z-[101]" sideOffset={5} alignOffset={-10} > diff --git a/interface/components/ColorPicker.tsx b/interface/components/ColorPicker.tsx index 0c3d8a92f..68ad2186e 100644 --- a/interface/components/ColorPicker.tsx +++ b/interface/components/ColorPicker.tsx @@ -19,7 +19,7 @@ export const ColorPicker = ({ className, ...props }: Prop style={{ backgroundColor: field.value }} /> } - className="p-3" + className="relative z-[110] p-3" sideOffset={5} > diff --git a/packages/ui/src/Dialog.tsx b/packages/ui/src/Dialog.tsx index 49810c1ec..6efbfeb3b 100644 --- a/packages/ui/src/Dialog.tsx +++ b/packages/ui/src/Dialog.tsx @@ -261,14 +261,14 @@ export function Dialog({ show ? ( props.ignoreClickOutside && e.preventDefault()