-
Notifications
You must be signed in to change notification settings - Fork 1.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Onboarding avatar creator or upload (#2860)
* add screen to onboarding flow * update base * add icon * fix icon * fix after merge * create flatlist * add emoji list * add state context, pressables * select/update * add camera icon * add photo selection button * image selection * cleanup * add most needed icons * fix icon naming * add icons * export path strings for emoji * canvas drawing for web * types * move breakpoints to individual steps * create canvas * canvas working 🎉 * update state * it works! * working on both platforms * remove comments * remove log * remove unused web canvas * animate picture selection/removal * compress images on web correctly * add times icon * scrollable horizontal flatlist on web * prefetch * adjustments * add more assets * remove unused smiles * add all the icons * adjust color options * animate grow/shrink selections * change layout on tablet/desktop * better web layout * fix path * adjust web layout * organize * organize imports and cleanup styles * make generated images smaller * implement design changes use row for buttons on web use RNGH FlatList random color at start improve logic update dialog for web update dialog style on mobile some more progress create dialog simplify context start implementing design * rm change * cleanup imports * trigger a pr label * Formatting --------- Co-authored-by: Eric Bailey <[email protected]>
- Loading branch information
1 parent
282ad4b
commit 087186e
Showing
21 changed files
with
904 additions
and
20 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| import React from 'react' | ||
| import {TouchableOpacity, TouchableOpacityProps, View} from 'react-native' | ||
| import {Image as ExpoImage} from 'expo-image' | ||
| import {atoms as a, native, useTheme, web} from '#/alf' | ||
| import {useAvatar} from '#/screens/Onboarding/StepProfile/index' | ||
| import {Pencil_Stroke2_Corner0_Rounded as Pencil} from '#/components/icons/Pencil' | ||
| import {StreamingLive_Stroke2_Corner0_Rounded as StreamingLive} from '#/components/icons/StreamingLive' | ||
| import {AvatarCreatorCircle} from '#/screens/Onboarding/StepProfile/AvatarCreatorCircle' | ||
|
|
||
| function AvatarBottomButton({...props}: TouchableOpacityProps) { | ||
| const t = useTheme() | ||
|
|
||
| return ( | ||
| <TouchableOpacity | ||
| {...props} | ||
| style={[ | ||
| a.absolute, | ||
| a.rounded_full, | ||
| a.align_center, | ||
| a.justify_center, | ||
| {backgroundColor: t.palette.primary_500}, | ||
| {height: 48, width: 48, bottom: 2, right: 2}, | ||
| ]}> | ||
| {props.children} | ||
| </TouchableOpacity> | ||
| ) | ||
| } | ||
|
|
||
| export function AvatarCircle({ | ||
| openLibrary, | ||
| openCreator, | ||
| }: { | ||
| openLibrary: () => unknown | ||
| openCreator: () => unknown | ||
| }) { | ||
| const t = useTheme() | ||
| const {avatar} = useAvatar() | ||
|
|
||
| const styles = React.useMemo( | ||
| () => ({ | ||
| imageContainer: [ | ||
| a.rounded_full, | ||
| a.overflow_hidden, | ||
| a.align_center, | ||
| a.justify_center, | ||
| t.atoms.border_contrast_low, | ||
| t.atoms.bg_contrast_25, | ||
| { | ||
| height: 200, | ||
| width: 200, | ||
| }, | ||
| web({borderWidth: 2}), | ||
| native({borderWidth: 1}), | ||
| ], | ||
| }), | ||
| [t.atoms.bg_contrast_25, t.atoms.border_contrast_low], | ||
| ) | ||
|
|
||
| return ( | ||
| <View> | ||
| {avatar.useCreatedAvatar ? ( | ||
| <AvatarCreatorCircle avatar={avatar} size={200} /> | ||
| ) : avatar.image ? ( | ||
| <ExpoImage | ||
| source={avatar.image.path} | ||
| style={styles.imageContainer} | ||
| accessibilityIgnoresInvertColors | ||
| transition={{duration: 300, effect: 'cross-dissolve'}} | ||
| /> | ||
| ) : ( | ||
| <View style={styles.imageContainer}> | ||
| <StreamingLive | ||
| height={100} | ||
| width={100} | ||
| style={{color: t.palette.contrast_200}} | ||
| /> | ||
| </View> | ||
| )} | ||
| <AvatarBottomButton | ||
| onPress={avatar.useCreatedAvatar ? openCreator : openLibrary}> | ||
| <Pencil size="md" style={{color: t.palette.white}} /> | ||
| </AvatarBottomButton> | ||
| </View> | ||
| ) | ||
| } |
44 changes: 44 additions & 0 deletions
44
src/screens/Onboarding/StepProfile/AvatarCreatorCircle.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import React from 'react' | ||
| import {View} from 'react-native' | ||
| import {Avatar} from '#/screens/Onboarding/StepProfile/index' | ||
|
|
||
| import {atoms as a, native, useTheme, web} from '#/alf' | ||
|
|
||
| export function AvatarCreatorCircle({ | ||
| avatar, | ||
| size = 125, | ||
| }: { | ||
| avatar: Avatar | ||
| size?: number | ||
| }) { | ||
| const t = useTheme() | ||
| const Icon = avatar.placeholder.component | ||
|
|
||
| const styles = React.useMemo( | ||
| () => ({ | ||
| imageContainer: [ | ||
| a.rounded_full, | ||
| a.overflow_hidden, | ||
| a.align_center, | ||
| a.justify_center, | ||
| t.atoms.border_contrast_high, | ||
| { | ||
| height: size, | ||
| width: size, | ||
| backgroundColor: avatar.backgroundColor, | ||
| }, | ||
| web({borderWidth: 2}), | ||
| native({borderWidth: 1}), | ||
| ], | ||
| }), | ||
| [avatar.backgroundColor, size, t.atoms.border_contrast_high], | ||
| ) | ||
|
|
||
| return ( | ||
| <View> | ||
| <View style={styles.imageContainer}> | ||
| <Icon height={85} width={85} style={{color: t.palette.white}} /> | ||
| </View> | ||
| </View> | ||
| ) | ||
| } |
Oops, something went wrong.