diff options
Diffstat (limited to 'src/view/com/profile')
| -rw-r--r-- | src/view/com/profile/ProfileHeader.tsx | 177 |
1 files changed, 139 insertions, 38 deletions
diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx index 4ad84b32a..08d895554 100644 --- a/src/view/com/profile/ProfileHeader.tsx +++ b/src/view/com/profile/ProfileHeader.tsx @@ -2,19 +2,22 @@ import React, {useState, useEffect} from 'react' import {observer} from 'mobx-react-lite' import { ActivityIndicator, - Button, Image, StyleSheet, Text, TouchableOpacity, View, } from 'react-native' +import LinearGradient from 'react-native-linear-gradient' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {ProfileViewModel} from '../../../state/models/profile-view' import {useStores} from '../../../state' import {pluralize} from '../../lib/strings' -import {s, colors} from '../../lib/styles' -import {AVIS} from '../../lib/assets' +import {s, gradients, colors} from '../../lib/styles' +import {AVIS, BANNER} from '../../lib/assets' import Toast from '../util/Toast' +import {Link} from '../util/Link' +import {Selector, SelectorItem} from '../util/Selector' export const ProfileHeader = observer(function ProfileHeader({ user, @@ -35,6 +38,11 @@ export const ProfileHeader = observer(function ProfileHeader({ newView.setup().catch(err => console.error('Failed to fetch profile', err)) }, [user, view?.params.user, store]) + const selectorItems: SelectorItem[] = [ + {label: 'Posts', onSelect() {}}, + {label: 'Badges', onSelect() {}}, + ] + const onPressToggleFollow = () => { view?.toggleFollowing().then( () => { @@ -51,6 +59,12 @@ export const ProfileHeader = observer(function ProfileHeader({ err => console.error('Failed to toggle follow', err), ) } + const onPressEditProfile = () => { + // TODO + } + const onPressMenu = () => { + // TODO + } const onPressFollowers = () => { store.nav.navigate(`/profile/${user}/followers`) } @@ -84,40 +98,79 @@ export const ProfileHeader = observer(function ProfileHeader({ // loaded // = + const isMe = store.me.did === view.did return ( <View style={styles.outer}> + <Image style={styles.banner} source={BANNER} /> <Image style={styles.avi} source={AVIS[view.name] || AVIS['alice.com']} /> - <View style={[styles.nameLine, s.mb2]}> - <Text style={[s.bold, s.f18, s.mr2]}>{view.displayName}</Text> - <Text style={[s.gray5]}>@{view.name}</Text> - </View> - {view.description && ( - <Text style={[s.mb5, s.f15, s['lh15-1.3']]}>{view.description}</Text> - )} - <View style={s.flexRow}> - <TouchableOpacity - style={[s.flexRow, s.mr10]} - onPress={onPressFollowers}> - <Text style={[s.bold, s.mr2]}>{view.followersCount}</Text> - <Text style={s.gray5}> - {pluralize(view.followersCount, 'follower')} - </Text> - </TouchableOpacity> - <TouchableOpacity style={[s.flexRow, s.mr10]} onPress={onPressFollows}> - <Text style={[s.bold, s.mr2]}>{view.followsCount}</Text> - <Text style={s.gray5}>following</Text> - </TouchableOpacity> - <View style={[s.flexRow, s.mr10]}> - <Text style={[s.bold, s.mr2]}>{view.postsCount}</Text> - <Text style={s.gray5}>{pluralize(view.postsCount, 'post')}</Text> + <View style={styles.content}> + <View style={[styles.displayNameLine]}> + <Text style={styles.displayName}>{view.displayName}</Text> </View> + <View style={styles.badgesLine}> + <FontAwesomeIcon icon="shield" style={s.mr5} size={12} /> + <Link href="/" title="Badge TODO"> + <Text style={[s.f12, s.bold]}> + Employee <Text style={[s.blue3]}>@blueskyweb.xyz</Text> + </Text> + </Link> + </View> + <View style={[styles.buttonsLine]}> + {isMe ? ( + <TouchableOpacity + onPress={onPressEditProfile} + style={[styles.mainBtn, styles.btn]}> + <Text style={[s.fw600, s.f16]}>Edit Profile</Text> + </TouchableOpacity> + ) : view.myState.hasFollowed ? ( + <TouchableOpacity + onPress={onPressToggleFollow} + style={[styles.mainBtn, styles.btn]}> + <Text style={[s.fw600, s.f16]}>Following</Text> + </TouchableOpacity> + ) : ( + <TouchableOpacity onPress={onPressToggleFollow}> + <LinearGradient + colors={[gradients.primary.start, gradients.primary.end]} + start={{x: 0, y: 0}} + end={{x: 1, y: 1}} + style={[styles.followBtn]}> + <FontAwesomeIcon icon="plus" style={[s.white, s.mr5]} /> + <Text style={[s.white, s.fw600, s.f16]}>Follow</Text> + </LinearGradient> + </TouchableOpacity> + )} + <TouchableOpacity + onPress={onPressMenu} + style={[styles.btn, styles.secondaryBtn, s.ml10]}> + <FontAwesomeIcon icon="ellipsis" style={[s.gray5]} /> + </TouchableOpacity> + </View> + <View style={[s.flexRow, s.mb10]}> + <TouchableOpacity + style={[s.flexRow, s.mr10]} + onPress={onPressFollowers}> + <Text style={[s.bold, s.mr2]}>{view.followersCount}</Text> + <Text style={s.gray5}> + {pluralize(view.followersCount, 'follower')} + </Text> + </TouchableOpacity> + <TouchableOpacity + style={[s.flexRow, s.mr10]} + onPress={onPressFollows}> + <Text style={[s.bold, s.mr2]}>{view.followsCount}</Text> + <Text style={s.gray5}>following</Text> + </TouchableOpacity> + <View style={[s.flexRow, s.mr10]}> + <Text style={[s.bold, s.mr2]}>{view.postsCount}</Text> + <Text style={s.gray5}>{pluralize(view.postsCount, 'post')}</Text> + </View> + </View> + {view.description && ( + <Text style={[s.mb10, s.f15, s['lh15-1.3']]}>{view.description}</Text> + )} </View> - <View> - <Button - title={view.myState.hasFollowed ? 'Unfollow' : 'Follow'} - onPress={onPressToggleFollow} - /> - </View> + <Selector items={selectorItems} /> </View> ) }) @@ -125,18 +178,66 @@ export const ProfileHeader = observer(function ProfileHeader({ const styles = StyleSheet.create({ outer: { backgroundColor: colors.white, - padding: 10, borderBottomWidth: 1, borderColor: colors.gray2, }, + banner: { + width: '100%', + height: 120, + }, avi: { - width: 60, - height: 60, - borderRadius: 30, + position: 'absolute', + top: 80, + left: 10, + width: 80, + height: 80, + borderRadius: 40, resizeMode: 'cover', + borderWidth: 2, + borderColor: colors.white, + }, + content: { + paddingTop: 8, + paddingHorizontal: 14, + paddingBottom: 4, }, - nameLine: { + displayNameLine: { + paddingLeft: 86, + marginBottom: 14, + }, + displayName: { + fontSize: 24, + fontWeight: 'bold', + }, + badgesLine: { + flexDirection: 'row', + alignItems: 'center', + marginBottom: 10, + }, + buttonsLine: { + flexDirection: 'row', + marginBottom: 12, + }, + followBtn: { flexDirection: 'row', - alignItems: 'flex-end', + alignItems: 'center', + justifyContent: 'center', + paddingVertical: 8, + paddingHorizontal: 60, + borderRadius: 30, + }, + btn: { + alignItems: 'center', + justifyContent: 'center', + paddingVertical: 8, + borderRadius: 30, + borderWidth: 1, + borderColor: colors.gray2, + }, + mainBtn: { + paddingHorizontal: 40, + }, + secondaryBtn: { + paddingHorizontal: 12, }, }) |