From 3aa347627049393defed7c41d2d02b8dff590ded Mon Sep 17 00:00:00 2001 From: ameer2468 <33054370+ameer2468@users.noreply.github.com> Date: Thu, 25 Apr 2024 02:34:24 +0300 Subject: [PATCH] [MOB-90] Visual adjustments (#2383) * Visual adjustments * Update Tags.tsx * cleanup * remove prop * remove hitslop * sectionlist --- apps/mobile/src/components/header/Header.tsx | 10 +++-- apps/mobile/src/components/layout/Fade.tsx | 13 +------ .../src/components/layout/ScreenContainer.tsx | 29 -------------- .../src/components/locations/GridLocation.tsx | 2 +- .../src/components/overview/Locations.tsx | 2 - apps/mobile/src/components/search/Search.tsx | 2 +- .../components/search/filters/FiltersBar.tsx | 2 +- apps/mobile/src/components/tags/GridTag.tsx | 2 +- .../src/navigation/tabs/BrowseStack.tsx | 8 ++-- .../src/navigation/tabs/NetworkStack.tsx | 2 +- .../src/navigation/tabs/OverviewStack.tsx | 2 +- .../src/navigation/tabs/SettingsStack.tsx | 2 +- apps/mobile/src/screens/browse/Tags.tsx | 25 ++++++------ apps/mobile/src/screens/search/Filters.tsx | 2 +- apps/mobile/src/screens/settings/Settings.tsx | 38 +++++++++---------- 15 files changed, 52 insertions(+), 89 deletions(-) diff --git a/apps/mobile/src/components/header/Header.tsx b/apps/mobile/src/components/header/Header.tsx index 3fca1ef08..b864af58b 100644 --- a/apps/mobile/src/components/header/Header.tsx +++ b/apps/mobile/src/components/header/Header.tsx @@ -14,7 +14,7 @@ type HeaderProps = { title?: string; //title of the page showSearch?: boolean; //show the search button showDrawer?: boolean; //show the drawer button - searchType?: 'explorer' | 'location' | 'categories'; //Temporary + searchType?: 'explorer' | 'location' | 'categories' | 'tags'; //Temporary navBack?: boolean; //navigate back to the previous screen headerKind?: 'default' | 'location' | 'tag'; //kind of header route?: never; @@ -38,7 +38,7 @@ export default function Header({ routeTitle, headerKind = 'default', showDrawer = false, - showSearch = true + showSearch = false, }: Props) { const navigation = useNavigation(); const explorerStore = useExplorerStore(); @@ -52,7 +52,7 @@ export default function Header({ paddingTop: headerHeight + (isAndroid ? 15 : 0) })} > - + {navBack && ( @@ -132,6 +132,8 @@ const HeaderSearchType = ({ searchType }: HeaderSearchTypeProps) => { return 'Explorer'; //TODO case 'location': return ; + case 'tags': + return ; case 'categories': return ; default: @@ -151,7 +153,7 @@ const HeaderIconKind = ({ headerKind, routeParams }: HeaderIconKindProps) => { case 'tag': return ( diff --git a/apps/mobile/src/components/layout/Fade.tsx b/apps/mobile/src/components/layout/Fade.tsx index 6eab661d0..17acb3e76 100644 --- a/apps/mobile/src/components/layout/Fade.tsx +++ b/apps/mobile/src/components/layout/Fade.tsx @@ -1,9 +1,7 @@ -import { useRoute } from '@react-navigation/native'; import { DimensionValue, Platform } from 'react-native'; import LinearGradient from 'react-native-linear-gradient'; import { ClassInput } from 'twrnc'; import { tw, twStyle } from '~/lib/tailwind'; -import { useExplorerStore } from '~/stores/explorerStore'; interface Props { children: React.ReactNode; // children of fade @@ -13,7 +11,6 @@ interface Props { orientation?: 'horizontal' | 'vertical'; // orientation of fade fadeSides?: 'left-right' | 'top-bottom'; // which sides to fade screenFade?: boolean; // if true, the fade will consider the bottom tab bar height - noConditions?: boolean; // if true, the fade will be rendered as is bottomFadeStyle?: ClassInput; // tailwind style for bottom fade topFadeStyle?: ClassInput; // tailwind style for top fade } @@ -25,20 +22,15 @@ const Fade = ({ height, bottomFadeStyle, topFadeStyle, - noConditions = false, screenFade = false, fadeSides = 'left-right', orientation = 'horizontal' }: Props) => { - const route = useRoute(); - const { toggleMenu } = useExplorerStore(); const bottomTabBarHeight = Platform.OS === 'ios' ? 80 : 60; const gradientStartEndMap = { 'left-right': { start: { x: 0, y: 0 }, end: { x: 1, y: 0 } }, 'top-bottom': { start: { x: 0, y: 1 }, end: { x: 0, y: 0 } } }; - const menuHeight = 57; // height of the explorer menu - const routesWithMenu = ['Location', 'Search', 'Tag']; // routes that are associated with the explorer return ( <> - { @@ -55,20 +38,9 @@ const ScreenContainer = ({ > {children} - ) : ( - {children} - ); }; diff --git a/apps/mobile/src/components/locations/GridLocation.tsx b/apps/mobile/src/components/locations/GridLocation.tsx index 19538ea58..5a9ff67c3 100644 --- a/apps/mobile/src/components/locations/GridLocation.tsx +++ b/apps/mobile/src/components/locations/GridLocation.tsx @@ -28,7 +28,7 @@ const GridLocation: React.FC = ({ location, modalRef }: GridL )} /> - modalRef.current?.present()}> + modalRef.current?.present()}> { <> - { )} /> - diff --git a/apps/mobile/src/components/search/Search.tsx b/apps/mobile/src/components/search/Search.tsx index 3b70fc2c8..a752d8040 100644 --- a/apps/mobile/src/components/search/Search.tsx +++ b/apps/mobile/src/components/search/Search.tsx @@ -18,7 +18,7 @@ export default function Search({ placeholder }: Props) { }, [searchStore]); return ( searchStore.setSearch(text)} diff --git a/apps/mobile/src/components/search/filters/FiltersBar.tsx b/apps/mobile/src/components/search/filters/FiltersBar.tsx index bf019f3e0..0dd249da4 100644 --- a/apps/mobile/src/components/search/filters/FiltersBar.tsx +++ b/apps/mobile/src/components/search/filters/FiltersBar.tsx @@ -47,7 +47,7 @@ const FiltersBar = () => { - + { backgroundColor: tag.color! })} /> - modalRef.current?.present()}> + modalRef.current?.present()}>
}} + options={{ header: () =>
}} /> ( -
+
) }} /> @@ -33,7 +33,7 @@ export default function BrowseStack() { name="Tags" component={TagsScreen} options={{ - header: () =>
+ header: () =>
}} />
+ header: (route) =>
}} />
}} + options={{ header: () =>
}} /> ); diff --git a/apps/mobile/src/navigation/tabs/OverviewStack.tsx b/apps/mobile/src/navigation/tabs/OverviewStack.tsx index 3837d8e32..f4c104815 100644 --- a/apps/mobile/src/navigation/tabs/OverviewStack.tsx +++ b/apps/mobile/src/navigation/tabs/OverviewStack.tsx @@ -14,7 +14,7 @@ export default function OverviewStack() {
}} + options={{ header: () =>
}} />
}} + options={{ header: () =>
}} /> {/* Client */} ['navigation']>(); const modalRef = useRef(null); + const {search} = useSearchStore(); const tags = useLibraryQuery(['tags.list']); useNodes(tags.data?.nodes); const tagData = useCache(tags.data?.items); + const [debouncedSearch] = useDebounce(search, 200); + + const filteredTags = useMemo( + () => + tagData?.filter((location) => + location.name?.toLowerCase().includes(debouncedSearch.toLowerCase()) + ) ?? [], + [debouncedSearch, tagData] + ); return ( @@ -36,15 +47,8 @@ export default function TagsScreen({ viewStyle = 'list' }: Props) { > - ( - ); diff --git a/apps/mobile/src/screens/search/Filters.tsx b/apps/mobile/src/screens/search/Filters.tsx index d7cb48798..bed24f492 100644 --- a/apps/mobile/src/screens/search/Filters.tsx +++ b/apps/mobile/src/screens/search/Filters.tsx @@ -5,7 +5,7 @@ import SaveAdd from '~/components/search/filters/SaveAdd'; const FiltersScreen = () => { return ( <> - + diff --git a/apps/mobile/src/screens/settings/Settings.tsx b/apps/mobile/src/screens/settings/Settings.tsx index 2579eafa8..bfd6fc588 100644 --- a/apps/mobile/src/screens/settings/Settings.tsx +++ b/apps/mobile/src/screens/settings/Settings.tsx @@ -129,7 +129,7 @@ function renderSectionHeader({ section }: { section: { title: string } }) { {section.title} @@ -142,24 +142,24 @@ export default function SettingsScreen({ navigation }: SettingsStackScreenProps< return ( - ( - navigation.navigate(item.navigateTo as any)} - rounded={item.rounded} - /> - )} - renderSectionHeader={renderSectionHeader} - ListFooterComponent={} - showsVerticalScrollIndicator={false} - stickySectionHeadersEnabled={false} - initialNumToRender={50} - /> - + ( + navigation.navigate(item.navigateTo as any)} + rounded={item.rounded} + /> + )} + renderSectionHeader={renderSectionHeader} + ListFooterComponent={} + showsVerticalScrollIndicator={false} + stickySectionHeadersEnabled={false} + initialNumToRender={50} + /> + ); }