From 56cf890debeb9872f791ccb992a5587f2c05fd9e Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Mon, 13 Mar 2023 16:01:43 -0500 Subject: Move to expo and react-navigation (#288) * WIP - adding expo * WIP - adding expo 2 * Fix tsc * Finish adding expo * Disable the 'require cycle' warning * Tweak plist * Modify some dependency versions to make expo happy * Fix icon fill * Get Web compiling for expo * 1.7 * Switch to react-navigation in expo2 (#287) * WIP Switch to react-navigation * WIP Switch to react-navigation 2 * WIP Switch to react-navigation 3 * Convert all screens to react navigation * Update BottomBar for react navigation * Update mobile menu to be react-native drawer * Fixes to drawer and bottombar * Factor out some helpers * Replace the navigation model with react-navigation * Restructure the shell folder and fix the header positioning * Restore the error boundary * Fix tsc * Implement not-found page * Remove react-native-gesture-handler (no longer used) * Handle notifee card presses * Handle all navigations from the state layer * Fix drawer behaviors * Fix two linking issues * Switch to our react-native-progress fork to fix an svg rendering issue * Get Web working with react-navigation * Refactor routes and navigation for a bit more clarity * Remove dead code * Rework Web shell to left/right nav to make this easier * Fix ViewHeader for desktop web * Hide profileheader back btn on desktop web * Move the compose button to the left nav * Implement reply prompt in threads for desktop web * Composer refactors * Factor out all platform-specific text input behaviors from the composer * Small fix * Update the web build to use tiptap for the composer * Tune up the mention autocomplete dropdown * Simplify the default avatar and banner * Fixes to link cards in web composer * Fix dropdowns on web * Tweak load latest on desktop * Add web beta message and feedback link * Fix up links in desktop web --- src/view/shell/web/DesktopHeader.tsx | 222 ----------------------------------- 1 file changed, 222 deletions(-) delete mode 100644 src/view/shell/web/DesktopHeader.tsx (limited to 'src/view/shell/web/DesktopHeader.tsx') diff --git a/src/view/shell/web/DesktopHeader.tsx b/src/view/shell/web/DesktopHeader.tsx deleted file mode 100644 index 8748ebbde..000000000 --- a/src/view/shell/web/DesktopHeader.tsx +++ /dev/null @@ -1,222 +0,0 @@ -import React from 'react' -import {observer} from 'mobx-react-lite' -import {Pressable, StyleSheet, TouchableOpacity, View} from 'react-native' -import {Text} from 'view/com/util/text/Text' -import {UserAvatar} from 'view/com/util/UserAvatar' -import {usePalette} from 'lib/hooks/usePalette' -import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle' -import {useStores} from 'state/index' -import {colors} from 'lib/styles' -import { - ComposeIcon, - HomeIcon, - HomeIconSolid, - BellIcon, - BellIconSolid, - MagnifyingGlassIcon, - CogIcon, -} from 'lib/icons' -import {DesktopSearch} from './DesktopSearch' - -interface NavItemProps { - count?: number - href: string - icon: JSX.Element - iconFilled: JSX.Element - isProfile?: boolean -} -export const NavItem = observer( - ({count, href, icon, iconFilled}: NavItemProps) => { - const store = useStores() - const hoverBg = useColorSchemeStyle( - styles.navItemHoverBgLight, - styles.navItemHoverBgDark, - ) - const isCurrent = store.nav.tab.current.url === href - const onPress = () => store.nav.navigate(href) - return ( - [ - styles.navItem, - // @ts-ignore Pressable state differs for RNW -prf - (state.hovered || isCurrent) && hoverBg, - ]} - onPress={onPress}> - - {isCurrent ? iconFilled : icon} - {typeof count === 'number' && count > 0 && ( - - {count} - - )} - - - ) - }, -) - -export const ProfileItem = observer(() => { - const store = useStores() - const hoverBg = useColorSchemeStyle( - styles.navItemHoverBgLight, - styles.navItemHoverBgDark, - ) - const href = `/profile/${store.me.handle}` - const isCurrent = store.nav.tab.current.url === href - const onPress = () => store.nav.navigate(href) - return ( - [ - styles.navItem, - // @ts-ignore Pressable state differs for RNW -prf - (state.hovered || isCurrent) && hoverBg, - ]} - onPress={onPress}> - - - - - ) -}) - -export const DesktopHeader = observer(function DesktopHeader({}: { - canGoBack?: boolean -}) { - const store = useStores() - const pal = usePalette('default') - const onPressCompose = () => store.shell.openComposer({}) - - return ( - - - Bluesky - - - } - iconFilled={} - /> - - } - iconFilled={} - /> - - } - iconFilled={} - /> - - - - - - - New Post - - - - - - - } - iconFilled={} - /> - - ) -}) - -const styles = StyleSheet.create({ - header: { - flexDirection: 'row', - alignItems: 'center', - // paddingTop: 18, - // paddingBottom: 18, - paddingLeft: 30, - paddingRight: 40, - borderBottomWidth: 1, - zIndex: 1, - }, - - spaceFlex: { - flex: 1, - }, - space15: { - width: 15, - }, - space20: { - width: 20, - }, - space30: { - width: 30, - }, - - title: {}, - - navItem: { - paddingTop: 14, - paddingBottom: 10, - paddingHorizontal: 10, - alignItems: 'center', - borderBottomWidth: 2, - borderBottomColor: 'transparent', - }, - navItemHoverBgLight: { - borderBottomWidth: 2, - borderBottomColor: colors.blue3, - }, - navItemHoverBgDark: { - borderBottomWidth: 2, - backgroundColor: colors.blue3, - }, - navItemIconWrapper: { - alignItems: 'center', - justifyContent: 'center', - width: 28, - height: 28, - marginBottom: 2, - }, - navItemCount: { - position: 'absolute', - top: 0, - left: 15, - backgroundColor: colors.red3, - color: colors.white, - fontSize: 12, - fontWeight: 'bold', - paddingHorizontal: 4, - borderRadius: 6, - }, - - newPostBtn: { - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'center', - borderRadius: 24, - paddingTop: 8, - paddingBottom: 8, - paddingHorizontal: 18, - backgroundColor: colors.blue3, - }, - newPostBtnIconWrapper: { - marginRight: 8, - }, - newPostBtnLabel: { - color: colors.white, - }, -}) -- cgit 1.4.1