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

Sizing and spacing fixes based on on-device testing

zio/stable
Paul Frazee 2022-11-05 16:12:06 -05:00
parent 5d6ab1f548
commit ff9161d8e7
13 changed files with 120 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/view/com/notifications/FeedItem.tsx
View File

@ -133,20 +133,20 @@ export const FeedItem = observer(function FeedItem({
style={styles.metaItem}
href={authors[0].href}
title={`@${authors[0].handle}`}>
<Text style={[s.f14, s.bold]}>
<Text style={[s.f15, s.bold]}>
{authors[0].displayName || authors[0].handle}
</Text>
</Link>
{authors.length > 1 ? (
<>
<Text style={[styles.metaItem, s.f14]}>and</Text>
<Text style={[styles.metaItem, s.f14, s.bold]}>
<Text style={[styles.metaItem, s.f15]}>and</Text>
<Text style={[styles.metaItem, s.f15, s.bold]}>
{authors.length - 1} {pluralize(authors.length - 1, 'other')}
</Text>
</>
) : undefined}
<Text style={[styles.metaItem, s.f14]}>{action}</Text>
<Text style={[styles.metaItem, s.f14, s.gray5]}>
<Text style={[styles.metaItem, s.f15]}>{action}</Text>
<Text style={[styles.metaItem, s.f15, s.gray5]}>
{ago(item.indexedAt)}
</Text>
</View>

14
src/view/com/post-thread/PostThread.tsx
View File

@ -1,4 +1,4 @@
import React, {useState, useEffect, useRef} from 'react'
import React, {useState, useEffect} from 'react'
import {observer} from 'mobx-react-lite'
import {ActivityIndicator, FlatList, Text, View} from 'react-native'
import {
@ -9,12 +9,9 @@ import {useStores} from '../../../state'
import {SharePostModel} from '../../../state/models/shell'
import {PostThreadItem} from './PostThreadItem'
const UPDATE_DELAY = 2e3 // wait 2s before refetching the thread for updates
export const PostThread = observer(function PostThread({uri}: {uri: string}) {
const store = useStores()
const [view, setView] = useState<PostThreadViewModel | undefined>()
const [lastUpdate, setLastUpdate] = useState<number>(Date.now())
useEffect(() => {
if (view?.params.uri === uri) {
@ -27,14 +24,6 @@ export const PostThread = observer(function PostThread({uri}: {uri: string}) {
newView.setup().catch(err => console.error('Failed to fetch thread', err))
}, [uri, view?.params.uri, store])
// TODO
// useFocusEffect(() => {
// if (Date.now() - lastUpdate > UPDATE_DELAY) {
// view?.update()
// setLastUpdate(Date.now())
// }
// })
const onPressShare = (uri: string) => {
store.shell.openModal(new SharePostModel(uri))
}
@ -83,6 +72,7 @@ export const PostThread = observer(function PostThread({uri}: {uri: string}) {
renderItem={renderItem}
refreshing={view.isRefreshing}
onRefresh={onRefresh}
style={{flex: 1}}
/>
)
})

58
src/view/com/post-thread/PostThreadItem.tsx
View File

@ -77,14 +77,14 @@ export const PostThreadItem = observer(function PostThreadItem({
/>
</Link>
<View style={styles.layoutContent}>
<View style={[styles.meta, s.mt5]}>
<View style={[styles.meta, {paddingTop: 5, paddingBottom: 0}]}>
<Link
style={styles.metaItem}
href={authorHref}
title={authorTitle}>
<Text style={[s.f15, s.bold]}>{item.author.displayName}</Text>
<Text style={[s.f16, s.bold]}>{item.author.displayName}</Text>
</Link>
<Text style={[styles.metaItem, s.f14, s.gray5]}>
<Text style={[styles.metaItem, s.f15, s.gray5]}>
&middot; {ago(item.indexedAt)}
</Text>
<View style={s.flex1} />
@ -104,7 +104,7 @@ export const PostThreadItem = observer(function PostThreadItem({
style={styles.metaItem}
href={authorHref}
title={authorTitle}>
<Text style={[s.f14, s.gray5]}>@{item.author.handle}</Text>
<Text style={[s.f15, s.gray5]}>@{item.author.handle}</Text>
</Link>
</View>
</View>
@ -125,8 +125,10 @@ export const PostThreadItem = observer(function PostThreadItem({
style={styles.expandedInfoItem}
href={repostsHref}
title={repostsTitle}>
<Text style={[s.gray5, s.semiBold]}>
<Text style={[s.bold, s.black]}>{item.repostCount}</Text>{' '}
<Text style={[s.gray5, s.semiBold, s.f16]}>
<Text style={[s.bold, s.black, s.f16]}>
{item.repostCount}
</Text>{' '}
{pluralize(item.repostCount, 'repost')}
</Text>
</Link>
@ -138,8 +140,10 @@ export const PostThreadItem = observer(function PostThreadItem({
style={styles.expandedInfoItem}
href={likesHref}
title={likesTitle}>
<Text style={[s.gray5, s.semiBold]}>
<Text style={[s.bold, s.black]}>{item.likeCount}</Text>{' '}
<Text style={[s.gray5, s.semiBold, s.f16]}>
<Text style={[s.bold, s.black, s.f16]}>
{item.likeCount}
</Text>{' '}
{pluralize(item.likeCount, 'like')}
</Text>
</Link>
@ -205,37 +209,20 @@ export const PostThreadItem = observer(function PostThreadItem({
/>
</Link>
<View style={styles.layoutContent}>
{item.replyingToAuthor &&
item.replyingToAuthor !== item.author.handle && (
<View style={[s.flexRow, {alignItems: 'center'}]}>
<FontAwesomeIcon
icon="reply"
size={9}
style={[s.gray4, s.mr5]}
/>
<Link
href={`/profile/${item.replyingToAuthor}`}
title={`@${item.replyingToAuthor}`}>
<Text style={[s.f12, s.gray5]}>
@{item.replyingToAuthor}
</Text>
</Link>
</View>
)}
<View style={styles.meta}>
<Link
style={styles.metaItem}
href={authorHref}
title={authorTitle}>
<Text style={[s.f15, s.bold]}>{item.author.displayName}</Text>
<Text style={[s.f17, s.bold]}>{item.author.displayName}</Text>
</Link>
<Link
style={styles.metaItem}
href={authorHref}
title={authorTitle}>
<Text style={[s.f14, s.gray5]}>@{item.author.handle}</Text>
<Text style={[s.f15, s.gray5]}>@{item.author.handle}</Text>
</Link>
<Text style={[styles.metaItem, s.f14, s.gray5]}>
<Text style={[styles.metaItem, s.f15, s.gray5]}>
&middot; {ago(item.indexedAt)}
</Text>
<View style={s.flex1} />
@ -250,11 +237,24 @@ export const PostThreadItem = observer(function PostThreadItem({
/>
</PostDropdownBtn>
</View>
{item.replyingToAuthor &&
item.replyingToAuthor !== item.author.handle && (
<View style={[s.flexRow, s.mb5, {alignItems: 'center'}]}>
<Text style={[s.gray5, s.f15, s.mr2]}>Replying to</Text>
<Link
href={`/profile/${item.replyingToAuthor}`}
title={`@${item.replyingToAuthor}`}>
<Text style={[s.f14, s.blue3]}>
@{item.replyingToAuthor}
</Text>
</Link>
</View>
)}
<View style={styles.postTextContainer}>
<RichText
text={record.text}
entities={record.entities}
style={[styles.postText, s.f15, s['lh15-1.3']]}
style={[styles.postText, s.f17, s['lh17-1.3']]}
/>
</View>
<PostCtrls

8
src/view/com/post/Post.tsx
View File

@ -97,12 +97,12 @@ export const Post = observer(function Post({uri}: {uri: string}) {
<View style={styles.layoutContent}>
<View style={styles.meta}>
<Link style={styles.metaItem} href={authorHref} title={authorTitle}>
<Text style={[s.f15, s.bold]}>{item.author.displayName}</Text>
<Text style={[s.f16, s.bold]}>{item.author.displayName}</Text>
</Link>
<Link style={styles.metaItem} href={authorHref} title={authorTitle}>
<Text style={[s.f14, s.gray5]}>@{item.author.handle}</Text>
<Text style={[s.f15, s.gray5]}>@{item.author.handle}</Text>
</Link>
<Text style={[styles.metaItem, s.f14, s.gray5]}>
<Text style={[styles.metaItem, s.f15, s.gray5]}>
&middot; {ago(item.indexedAt)}
</Text>
</View>
@ -123,7 +123,7 @@ export const Post = observer(function Post({uri}: {uri: string}) {
<RichText
text={record.text}
entities={record.entities}
style={[s.f15, s['lh15-1.3']]}
style={[s.f16, s['lh16-1.3']]}
/>
</View>
<PostCtrls

15
src/view/com/posts/FeedItem.tsx
View File

@ -84,15 +84,15 @@ export const FeedItem = observer(function FeedItem({
style={styles.metaItem}
href={authorHref}
title={item.author.handle}>
<Text style={[s.f15, s.bold]}>{item.author.displayName}</Text>
<Text style={[s.f17, s.bold]}>{item.author.displayName}</Text>
</Link>
<Link
style={styles.metaItem}
href={authorHref}
title={item.author.handle}>
<Text style={[s.f14, s.gray5]}>@{item.author.handle}</Text>
<Text style={[s.f15, s.gray5]}>@{item.author.handle}</Text>
</Link>
<Text style={[styles.metaItem, s.f14, s.gray5]}>
<Text style={[styles.metaItem, s.f15, s.gray5]}>
&middot; {ago(item.indexedAt)}
</Text>
<View style={s.flex1} />
@ -108,13 +108,12 @@ export const FeedItem = observer(function FeedItem({
</PostDropdownBtn>
</View>
{replyHref !== '' && (
<View style={[s.flexRow, s.mb2, {alignItems: 'center'}]}>
<FontAwesomeIcon icon="reply" size={9} style={[s.gray4, s.mr5]} />
<Text style={[s.gray4, s.f12, s.mr2]}>Reply to</Text>
<View style={[s.flexRow, s.mb5, {alignItems: 'center'}]}>
<Text style={[s.gray5, s.f15, s.mr2]}>Replying to</Text>
<Link href={replyHref} title="Parent post">
<UserInfoText
did={replyAuthorDid}
style={[s.f12, s.gray5]}
style={[s.f15, s.blue3]}
prefix="@"
/>
</Link>
@ -124,7 +123,7 @@ export const FeedItem = observer(function FeedItem({
<RichText
text={record.text}
entities={record.entities}
style={[s.f15, s['lh15-1.3']]}
style={[s.f17, s['lh17-1.3']]}
/>
</View>
<PostCtrls

37
src/view/com/profile/ProfileHeader.tsx
View File

@ -154,8 +154,10 @@ export const ProfileHeader = observer(function ProfileHeader({
<TouchableOpacity
style={[s.flexRow, s.mr10]}
onPress={onPressFollowers}>
<Text style={[s.bold, s.mr2]}>{view.followersCount}</Text>
<Text style={s.gray5}>
<Text style={[s.bold, s.mr2, styles.metricsText]}>
{view.followersCount}
</Text>
<Text style={[s.gray5, styles.metricsText]}>
{pluralize(view.followersCount, 'follower')}
</Text>
</TouchableOpacity>
@ -163,27 +165,35 @@ export const ProfileHeader = observer(function ProfileHeader({
<TouchableOpacity
style={[s.flexRow, s.mr10]}
onPress={onPressFollows}>
<Text style={[s.bold, s.mr2]}>{view.followsCount}</Text>
<Text style={s.gray5}>following</Text>
<Text style={[s.bold, s.mr2, styles.metricsText]}>
{view.followsCount}
</Text>
<Text style={[s.gray5, styles.metricsText]}>following</Text>
</TouchableOpacity>
) : undefined}
{view.isScene ? (
<TouchableOpacity
style={[s.flexRow, s.mr10]}
onPress={onPressFollows}>
<Text style={[s.bold, s.mr2]}>{view.followsCount}</Text>
<Text style={s.gray5}>
<Text style={[s.bold, s.mr2, styles.metricsText]}>
{view.followsCount}
</Text>
<Text style={[s.gray5, styles.metricsText]}>
{pluralize(view.followsCount, 'member')}
</Text>
</TouchableOpacity>
) : undefined}
<View style={[s.flexRow, s.mr10]}>
<Text style={[s.bold, s.mr2]}>{view.postsCount}</Text>
<Text style={s.gray5}>{pluralize(view.postsCount, 'post')}</Text>
<Text style={[s.bold, s.mr2, styles.metricsText]}>
{view.postsCount}
</Text>
<Text style={[s.gray5, styles.metricsText]}>
{pluralize(view.postsCount, 'post')}
</Text>
</View>
</View>
{view.description && (
<Text style={[s.mb5, s.f15, s['lh15-1.3']]}>{view.description}</Text>
<Text style={[s.mb5, s.f16, s['lh16-1.3']]}>{view.description}</Text>
)}
{
undefined /*<View style={styles.badgesLine}>
@ -268,7 +278,7 @@ const styles = StyleSheet.create({
// marginBottom: 14,
},
displayName: {
fontSize: 24,
fontSize: 28,
fontWeight: 'bold',
},
@ -277,7 +287,7 @@ const styles = StyleSheet.create({
marginBottom: 8,
},
handle: {
fontSize: 14,
fontSize: 15,
fontWeight: 'bold',
color: colors.gray5,
},
@ -288,7 +298,7 @@ const styles = StyleSheet.create({
marginRight: 5,
},
typeLabel: {
fontSize: 14,
fontSize: 15,
fontWeight: 'bold',
color: colors.gray5,
},
@ -297,6 +307,9 @@ const styles = StyleSheet.create({
flexDirection: 'row',
marginBottom: 8,
},
metricsText: {
fontSize: 15,
},
badgesLine: {
flexDirection: 'row',

8
src/view/com/util/DropdownBtn.tsx
View File

@ -157,9 +157,9 @@ const styles = StyleSheet.create({
menuItem: {
flexDirection: 'row',
alignItems: 'center',
paddingVertical: 6,
paddingLeft: 10,
paddingRight: 30,
paddingVertical: 10,
paddingLeft: 15,
paddingRight: 40,
},
menuItemBorder: {
borderTopWidth: 1,
@ -172,6 +172,6 @@ const styles = StyleSheet.create({
marginRight: 8,
},
label: {
fontSize: 15,
fontSize: 18,
},
})

2
src/view/com/util/UserBanner.tsx
View File

@ -5,7 +5,7 @@ import {getGradient} from '../../lib/asset-gen'
export function UserBanner({handle}: {handle: string}) {
const gradient = getGradient(handle)
return (
<Svg width="400" height="120" viewBox="50 0 200 100">
<Svg width="100%" height="120" viewBox="50 0 200 100">
<Defs>
<LinearGradient id="grad" x1="0" y1="0" x2="1" y2="1">
<Stop offset="0" stopColor={gradient[0]} stopOpacity="1" />

26
src/view/lib/icons.tsx
View File

@ -31,12 +31,18 @@ export function GridIcon({style}: {style?: StyleProp<ViewStyle>}) {
)
}
export function HomeIcon({style}: {style?: StyleProp<ViewStyle>}) {
export function HomeIcon({
style,
size,
}: {
style?: StyleProp<ViewStyle>
size?: string | number
}) {
return (
<Svg
viewBox="0 0 48 48"
width="24"
height="24"
width={size || 24}
height={size || 24}
stroke="currentColor"
style={style}>
<Path
@ -73,14 +79,20 @@ export function BellIcon({
// Copyright (c) 2020 Refactoring UI Inc.
// https://github.com/tailwindlabs/heroicons/blob/master/LICENSE
export function UserGroupIcon({style}: {style?: StyleProp<ViewStyle>}) {
export function UserGroupIcon({
style,
size,
}: {
style?: StyleProp<ViewStyle>
size?: string | number
}) {
return (
<Svg
fill="none"
viewBox="0 0 24 24"
width="32"
height="32"
strokeWidth={1.5}
width={size || 32}
height={size || 32}
strokeWidth={2}
stroke="currentColor"
style={style}>
<Path

3
src/view/lib/styles.ts
View File

@ -71,6 +71,7 @@ export const s = StyleSheet.create({
f14: {fontSize: 14},
f15: {fontSize: 15},
f16: {fontSize: 16},
f17: {fontSize: 17},
f18: {fontSize: 18},
// line heights
@ -82,6 +83,8 @@ export const s = StyleSheet.create({
['lh15-1.3']: {lineHeight: 19.5}, // 1.3 of 15px
['lh16-1']: {lineHeight: 16},
['lh16-1.3']: {lineHeight: 20.8}, // 1.3 of 16px
['lh17-1']: {lineHeight: 17},
['lh17-1.3']: {lineHeight: 22.1}, // 1.3 of 16px
['lh18-1']: {lineHeight: 18},
['lh18-1.3']: {lineHeight: 23.4}, // 1.3 of 18px

6
src/view/screens/PostThread.tsx
View File

@ -18,9 +18,11 @@ export const PostThread = ({visible, params}: ScreenParams) => {
}, [visible, store.nav, name])
return (
<View>
<View style={{flex: 1}}>
<ViewHeader title="Post" subtitle={`by ${name}`} />
<PostThreadComponent uri={uri} />
<View style={{flex: 1}}>
<PostThreadComponent uri={uri} />
</View>
</View>
)
}

2
src/view/shell/mobile/Composer.tsx
View File

@ -78,6 +78,6 @@ const styles = StyleSheet.create({
bottom: 0,
width: '100%',
backgroundColor: '#fff',
paddingTop: 20,
paddingTop: 24,
},
})

24
src/view/shell/mobile/MainMenu.tsx
View File

@ -51,6 +51,10 @@ export const MainMenu = observer(
// rendering
// =
const MenuItemBlank = () => (
<View style={[styles.menuItem, styles.menuItemMargin]} />
)
const MenuItem = ({
icon,
label,
@ -67,16 +71,16 @@ export const MainMenu = observer(
onPress={() => onNavigate(url)}>
<View style={[styles.menuItemIconWrapper]}>
{icon === 'home' ? (
<HomeIcon style={styles.menuItemIcon} />
<HomeIcon style={styles.menuItemIcon} size="32" />
) : icon === 'user-group' ? (
<UserGroupIcon style={styles.menuItemIcon} />
<UserGroupIcon style={styles.menuItemIcon} size="36" />
) : icon === 'bell' ? (
<BellIcon style={styles.menuItemIcon} size="28" />
<BellIcon style={styles.menuItemIcon} size="32" />
) : (
<FontAwesomeIcon
icon={icon}
style={styles.menuItemIcon}
size={24}
size={28}
/>
)}
</View>
@ -133,7 +137,7 @@ export const MainMenu = observer(
onPress={() => onNavigate(`/profile/${store.me.handle || ''}`)}>
<View style={styles.profileImage}>
<UserAvatar
size={30}
size={35}
displayName={store.me.displayName}
handle={store.me.handle || ''}
/>
@ -167,6 +171,8 @@ export const MainMenu = observer(
url="/notifications"
count={store.me.notificationCount}
/>
<MenuItemBlank />
<MenuItemBlank />
</View>
<Text style={styles.heading}>Scenes</Text>
@ -183,6 +189,8 @@ export const MainMenu = observer(
<View style={[styles.menuItems]}>
<MenuItemActor label="Cool People Only" url="/" />
<MenuItemActor label="Techsky" url="/" />
<MenuItemBlank />
<MenuItemBlank />
</View>
</Animated.View>
</SafeAreaView>
@ -215,7 +223,7 @@ const styles = StyleSheet.create({
alignItems: 'center',
height: 40,
paddingHorizontal: 10,
marginBottom: 10,
marginBottom: 16,
},
section: {
paddingHorizontal: 10,
@ -238,7 +246,7 @@ const styles = StyleSheet.create({
marginRight: 8,
},
profileText: {
fontSize: 15,
fontSize: 17,
fontWeight: 'bold',
},
@ -256,7 +264,7 @@ const styles = StyleSheet.create({
marginBottom: 20,
},
menuItem: {
width: 82,
flex: 1,
alignItems: 'center',
},
menuItemMargin: {