zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

Guided tour for new users (#4690)

Browse source 
* Add home guided tour (WIP)

* Add web handling of the tour

* Switch to our fork of rn-tourguide

* Bump guided-tour

* Fix alignment on android

* Implement home page tour trigger after account creation

* Add new_user_guided_tour gate

* Add a title line to the tour tooltips

* A11y improvements: proper labels, focus capture, scroll capture

* Silence type error

* Native a11y

* Use FocusScope

* Switch to useWebBodyScrollLock()

---------

Co-authored-by: Eric Bailey <git@esb.lol>
This commit is contained in:
Paul Frazee 2024-07-02 21:25:19 -07:00 • committed by GitHub
parent 6694a33603
commit a3d4fb652b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
18 changed files with 541 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/view/shell/bottom-bar/BottomBar.tsx
View file

@ -45,6 +45,7 @@ import {
Message_Stroke2_Corner0_Rounded as Message,
Message_Stroke2_Corner0_Rounded_Filled as MessageFilled,
} from '#/components/icons/Message'
import {HomeTourExploreWrapper} from '#/tours/HomeTour'
import {styles} from './BottomBarStyles'
type TabOptions =
@ -162,17 +163,19 @@ export function BottomBar({navigation}: BottomTabBarProps) {
<Btn
testID="bottomBarSearchBtn"
icon={
isAtSearch ? (
<MagnifyingGlassFilled
width={iconWidth + 2}
style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
/>
) : (
<MagnifyingGlass
width={iconWidth + 2}
style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
/>
)
<HomeTourExploreWrapper>
{isAtSearch ? (
<MagnifyingGlassFilled
width={iconWidth + 2}
style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
/>
) : (
<MagnifyingGlass
width={iconWidth + 2}
style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
/>
)}
</HomeTourExploreWrapper>
}
onPress={onPressSearch}
accessibilityRole="search"

11
src/view/shell/bottom-bar/BottomBarWeb.tsx
View file

@ -41,6 +41,7 @@ import {
UserCircle_Filled_Corner0_Rounded as UserCircleFilled,
UserCircle_Stroke2_Corner0_Rounded as UserCircle,
} from '#/components/icons/UserCircle'
import {HomeTourExploreWrapper} from '#/tours/HomeTour'
import {styles} from './BottomBarStyles'
export function BottomBarWeb() {
@ -94,10 +95,12 @@ export function BottomBarWeb() {
{({isActive}) => {
const Icon = isActive ? MagnifyingGlassFilled : MagnifyingGlass
return (
<Icon
width={iconWidth + 2}
style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
/>
<HomeTourExploreWrapper>
<Icon
width={iconWidth + 2}
style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
/>
</HomeTourExploreWrapper>
)
}}
</NavItem>

22
src/view/shell/desktop/LeftNav.tsx
View file

@ -63,6 +63,7 @@ import {
UserCircle_Filled_Corner0_Rounded as UserCircleFilled,
UserCircle_Stroke2_Corner0_Rounded as UserCircle,
} from '#/components/icons/UserCircle'
import {HomeTourExploreWrapper} from '#/tours/HomeTour'
import {router} from '../../../routes'
const NAV_ICON_WIDTH = 28
@ -340,14 +341,19 @@ export function DesktopLeftNav() {
iconFilled={<HomeFilled width={NAV_ICON_WIDTH} style={pal.text} />}
label={_(msg`Home`)}
/>
<NavItem
href="/search"
icon={<MagnifyingGlass style={pal.text} width={NAV_ICON_WIDTH} />}
iconFilled={
<MagnifyingGlassFilled style={pal.text} width={NAV_ICON_WIDTH} />
}
label={_(msg`Search`)}
/>
<HomeTourExploreWrapper>
<NavItem
href="/search"
icon={<MagnifyingGlass style={pal.text} width={NAV_ICON_WIDTH} />}
iconFilled={
<MagnifyingGlassFilled
style={pal.text}
width={NAV_ICON_WIDTH}
/>
}
label={_(msg`Search`)}
/>
</HomeTourExploreWrapper>
<NavItem
href="/notifications"
count={numUnreadNotifications}