From 143e2c802d1d8d8498e6658c174ed1e657c4ec12 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Thu, 5 Dec 2024 18:59:26 -0600 Subject: [Layout] Base (#6907) * Add common gutter styles as hook * Add computed scrollbar gutter CSS vars * Add new layout components * Replace layout components in settings screens * Remove old back button * Invert web border logic for easier migration * Clean up Slot API * Port over FF handling of scrollbar offset * Trade boilerplate for ease of use * Limit to one line * Allow two lines, fix wrapping * Fix alignment * sticky headers * set max with on header and center * [Layout] Notifications Header (#6910) * Replace notifications screen header * fix cropped indicator --------- Co-authored-by: Samuel Newman * Replace Hashtag header (#6928) * [Layout] ChatList header (#6929) * Replace ChatList header * update chat settings as well --------- Co-authored-by: Samuel Newman * Add web borders to Chat settings * Remove unused var * Move ChatList header outside center * Replace empty chat layout * fix breakpoints * [Layout] Scrollbar gutters (#6908) * Fix sidebar alignment * Make sure scrollbars don't hide * Gift left nav more space * Use stable one-edge, update logic in RightNav * Ope * Increase width * Reset * Add transform to sidebars * Remove bg in sidebars * Handle shifts in layout components * Replace scroll-removal handling * Make react-remove-scroll an explicit dep * Remove unused script * use correct scroll insets (#6950) * [Layout] Feeds headers (#6913) * Replace ViewHeader internals, duplicate old ViewHeader * Replace Feeds header * Replace SavedFeeds header * Visual alignment * Uglier but clear * Use old ViewHeader for SavedFeeds * use Layout.Center instead of Layout.Content * use left-aligned header for feed edit * delete unused old view header --------- Co-authored-by: Samuel Newman * [Layout] Every other screen (#6953) * attempt to fix double borders on every other screen * delete ListHeaderDesktop * delete `SimpleViewHeader` and fix screens (#6956) * Make Layout.Center not full height * Refactor List to use Layout.Center, remove built-in borders * Fix Home screen * Refactor PagerWithHeader to use Layout components * Replace components in ProfileFeed and ProfileList * Borders on Profile * Search screen replacements * use new header for profile subpage header (#6958) * Search AutocompleteResults * use new header for starter pack wizard (#6957) * Fix post thread * Enable borders by default * Moderation muted and blocked accounts * Fix scrollbar offset on Labeler * Remove ScrollView from Moderation * Remove ScrollView from Deactivated * Remove ScrollView from onboarding * Remove ScrollView from SignupQueued * Mark deprecations * fix lint * Fix double borders on profile load * Remove unneeded CenteredView from noty Feed * Remove double Center layout on Notifications screen * Remove double Center layout on ChatList screen * Handle scrollbar offset in chat * Use new atom for other scrollbar offsets * Remove borders from old views * Better doc * Remove temp migration prop * Fix new atom usage on native * Clean up Hashtag screen * Layout docs * Clarify usage in Pager * Handle nested offset contexts * Clean up Layout * fix feeds page * asymmetric header on native (#6969) * Reusable header const * Fix up home header * Add back button to convo * Add hitslop to header buttons * Comment * Better handling on native for new atom * Format * Fix nested flatlist on mod screens * Use react-remove-scroll-bar directly * Fix notification count overflow on web * Clarify doc --------- Co-authored-by: Samuel Newman --- src/view/com/util/ViewHeader.tsx | 270 ++------------------------------------- 1 file changed, 13 insertions(+), 257 deletions(-) (limited to 'src/view/com/util/ViewHeader.tsx') diff --git a/src/view/com/util/ViewHeader.tsx b/src/view/com/util/ViewHeader.tsx index 1d4cf8ff0..2d413f782 100644 --- a/src/view/com/util/ViewHeader.tsx +++ b/src/view/com/util/ViewHeader.tsx @@ -1,271 +1,27 @@ -import React from 'react' -import {StyleSheet, TouchableOpacity, View} from 'react-native' -import Animated from 'react-native-reanimated' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useNavigation} from '@react-navigation/native' - -import {useMinimalShellHeaderTransform} from '#/lib/hooks/useMinimalShellTransform' -import {usePalette} from '#/lib/hooks/usePalette' -import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' -import {NavigationProp} from '#/lib/routes/types' -import {useSetDrawerOpen} from '#/state/shell' -import {useTheme} from '#/alf' -import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu' -import {Text} from './text/Text' -import {CenteredView} from './Views' - -const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20} +import {Header} from '#/components/Layout' +/** + * Legacy ViewHeader component. Use Layout.Header going forward. + * + * @deprecated + */ export function ViewHeader({ title, - subtitle, - canGoBack, - showBackButton = true, - hideOnScroll, - showOnDesktop, - showBorder, renderButton, }: { title: string subtitle?: string - canGoBack?: boolean - showBackButton?: boolean - hideOnScroll?: boolean showOnDesktop?: boolean showBorder?: boolean renderButton?: () => JSX.Element }) { - const pal = usePalette('default') - const {_} = useLingui() - const setDrawerOpen = useSetDrawerOpen() - const navigation = useNavigation() - const {isDesktop, isTablet} = useWebMediaQueries() - const t = useTheme() - - const onPressBack = React.useCallback(() => { - if (navigation.canGoBack()) { - navigation.goBack() - } else { - navigation.navigate('Home') - } - }, [navigation]) - - const onPressMenu = React.useCallback(() => { - setDrawerOpen(true) - }, [setDrawerOpen]) - - if (isDesktop) { - if (showOnDesktop) { - return ( - - ) - } - return null - } else { - if (typeof canGoBack === 'undefined') { - canGoBack = navigation.canGoBack() - } - - return ( - - - - {showBackButton ? ( - - {canGoBack ? ( - - ) : !isTablet ? ( - - ) : null} - - ) : null} - - - {title} - - - {renderButton ? ( - renderButton() - ) : showBackButton ? ( - - ) : null} - - {subtitle ? ( - - - {subtitle} - - - ) : undefined} - - - ) - } -} - -function DesktopWebHeader({ - title, - subtitle, - renderButton, - showBorder = true, -}: { - title: string - subtitle?: string - renderButton?: () => JSX.Element - showBorder?: boolean -}) { - const pal = usePalette('default') - const t = useTheme() - return ( - - - - - {title} - - - {renderButton?.()} - - {subtitle ? ( - - - - {subtitle} - - - - ) : null} - - ) -} - -function Container({ - children, - hideOnScroll, - showBorder, -}: { - children: React.ReactNode - hideOnScroll: boolean - showBorder?: boolean -}) { - const pal = usePalette('default') - const headerMinimalShellTransform = useMinimalShellHeaderTransform() - - if (!hideOnScroll) { - return ( - - {children} - - ) - } return ( - - {children} - + + + + {title} + + {renderButton?.() ?? null} + ) } - -const styles = StyleSheet.create({ - header: { - flexDirection: 'row', - paddingHorizontal: 12, - paddingVertical: 6, - width: '100%', - }, - headerFloating: { - position: 'absolute', - top: 0, - width: '100%', - }, - desktopHeader: { - paddingVertical: 12, - maxWidth: 600, - marginLeft: 'auto', - marginRight: 'auto', - }, - border: { - borderBottomWidth: StyleSheet.hairlineWidth, - }, - titleContainer: { - marginLeft: 'auto', - marginRight: 'auto', - alignItems: 'center', - }, - title: { - fontWeight: '600', - }, - subtitle: { - fontSize: 13, - }, - subtitleDesktop: { - fontSize: 15, - }, - backBtn: { - width: 30, - height: 30, - }, - backBtnWide: { - width: 30, - height: 30, - paddingLeft: 4, - marginRight: 4, - }, - backIcon: { - marginTop: 6, - }, -}) -- cgit 1.4.1