diff --git a/src/view/com/composer/Prompt.tsx b/src/view/com/composer/Prompt.tsx new file mode 100644 index 000000000..4a84c7160 --- /dev/null +++ b/src/view/com/composer/Prompt.tsx @@ -0,0 +1,63 @@ +import React from 'react' +import {StyleSheet, Text, TouchableOpacity, View} from 'react-native' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {colors} from '../../lib/styles' +import {useStores} from '../../../state' +import {UserAvatar} from '../util/UserAvatar' + +export function ComposePrompt({onPressCompose}: {onPressCompose: () => void}) { + const store = useStores() + const onPressAvatar = () => { + store.nav.navigate(`/profile/${store.me.handle}`) + } + return ( + + + + + + What's happening? + + + Post + + + ) +} + +const styles = StyleSheet.create({ + container: { + borderRadius: 6, + margin: 2, + marginBottom: 0, + paddingHorizontal: 10, + paddingVertical: 10, + flexDirection: 'row', + alignItems: 'center', + backgroundColor: colors.white, + }, + avatar: { + width: 50, + }, + textContainer: { + marginLeft: 10, + flex: 1, + }, + text: { + color: colors.gray4, + fontSize: 17, + }, + btn: { + backgroundColor: colors.gray1, + paddingVertical: 6, + paddingHorizontal: 14, + borderRadius: 30, + }, + btnText: { + color: colors.gray5, + }, +}) diff --git a/src/view/com/posts/Feed.tsx b/src/view/com/posts/Feed.tsx index d10be821f..3a2bc6189 100644 --- a/src/view/com/posts/Feed.tsx +++ b/src/view/com/posts/Feed.tsx @@ -6,23 +6,34 @@ import {EmptyState} from '../util/EmptyState' import {ErrorMessage} from '../util/ErrorMessage' import {FeedModel, FeedItemModel} from '../../../state/models/feed-view' import {FeedItem} from './FeedItem' +import {ComposePrompt} from '../composer/Prompt' + +const COMPOSE_PROMPT_ITEM = {_reactKey: '__prompt__'} export const Feed = observer(function Feed({ feed, style, scrollElRef, + onPressCompose, onPressTryAgain, }: { feed: FeedModel style?: StyleProp scrollElRef?: MutableRefObject | null> + onPressCompose?: () => void onPressTryAgain?: () => void }) { // TODO optimize renderItem or FeedItem, we're getting this notice from RN: -prf // VirtualizedList: You have a large list that is slow to update - make sure your // renderItem function renders components that follow React performance best practices // like PureComponent, shouldComponentUpdate, etc - const renderItem = ({item}: {item: FeedItemModel}) => + const renderItem = ({item}: {item: FeedItemModel}) => { + if (item === COMPOSE_PROMPT_ITEM) { + return + } else { + return + } + } const onRefresh = () => { feed.refresh().catch(err => console.error('Failed to refresh', err)) } @@ -45,7 +56,7 @@ export const Feed = observer(function Feed({ {feed.hasContent && ( item._reactKey} renderItem={renderItem} refreshing={feed.isRefreshing} diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx index 609b1ca38..d90d337ac 100644 --- a/src/view/screens/Home.tsx +++ b/src/view/screens/Home.tsx @@ -65,7 +65,7 @@ export const Home = observer(function Home({ } }, [visible, store]) - const onComposePress = () => { + const onPressCompose = () => { store.shell.openComposer({onPost: onCreatePost}) } const onCreatePost = () => { @@ -81,12 +81,12 @@ export const Home = observer(function Home({ return ( - {defaultFeedView.hasNewLatest ? ( @@ -95,7 +95,6 @@ export const Home = observer(function Home({ Load new posts ) : undefined} - ) }) diff --git a/src/view/screens/Notifications.tsx b/src/view/screens/Notifications.tsx index 7e4de497e..1e7abdb90 100644 --- a/src/view/screens/Notifications.tsx +++ b/src/view/screens/Notifications.tsx @@ -1,7 +1,6 @@ import React, {useState, useEffect} from 'react' import {View} from 'react-native' import {ViewHeader} from '../com/util/ViewHeader' -import {FAB} from '../com/util/FloatingActionButton' import {Feed} from '../com/notifications/Feed' import {useStores} from '../../state' import {NotificationsViewModel} from '../../state/models/notifications-view' @@ -37,9 +36,6 @@ export const Notifications = ({navIdx, visible}: ScreenParams) => { } }, [visible, store]) - const onComposePress = () => { - store.shell.openComposer({}) - } const onPressTryAgain = () => { notesView?.refresh() } @@ -48,7 +44,6 @@ export const Notifications = ({navIdx, visible}: ScreenParams) => { {notesView && } - ) } diff --git a/src/view/screens/Profile.tsx b/src/view/screens/Profile.tsx index e637c6ad8..1187e626e 100644 --- a/src/view/screens/Profile.tsx +++ b/src/view/screens/Profile.tsx @@ -3,7 +3,6 @@ import {StyleSheet, Text, View} from 'react-native' import {observer} from 'mobx-react-lite' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {ViewSelector} from '../com/util/ViewSelector' -import {FAB} from '../com/util/FloatingActionButton' import {ScreenParams} from '../routes' import {ProfileUiModel, Sections} from '../../state/models/profile-ui' import {MembershipItem} from '../../state/models/memberships-view' @@ -86,9 +85,6 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => { ), ) } - const onComposePress = () => { - store.shell.openComposer({}) - } // rendering // = @@ -241,7 +237,6 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => { ) : ( renderHeader() )} - ) }) -- 2.51.2 From 3a1013906494fc0399b908b8ffbba548f00ec976 Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Sun, 20 Nov 2022 11:32:13 -0600 Subject: [PATCH 2/7] Remove downvotes from the UI --- src/view/com/post-thread/PostThreadItem.tsx | 34 +--------------- src/view/com/post/Post.tsx | 8 ---- src/view/com/posts/FeedItem.tsx | 8 ---- src/view/com/util/LoadingPlaceholder.tsx | 6 +-- src/view/com/util/PostCtrls.tsx | 43 +-------------------- 5 files changed, 5 insertions(+), 94 deletions(-) diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx index 0c4565c51..eb420a40e 100644 --- a/src/view/com/post-thread/PostThreadItem.tsx +++ b/src/view/com/post-thread/PostThreadItem.tsx @@ -31,8 +31,7 @@ export const PostThreadItem = observer(function PostThreadItem({ const store = useStores() const [deleted, setDeleted] = useState(false) const record = item.record as unknown as PostType.Record - const hasEngagement = - item.upvoteCount || item.downvoteCount || item.repostCount + const hasEngagement = item.upvoteCount || item.repostCount const itemHref = useMemo(() => { const urip = new AtUri(item.uri) @@ -46,11 +45,6 @@ export const PostThreadItem = observer(function PostThreadItem({ return `/profile/${item.author.handle}/post/${urip.rkey}/upvoted-by` }, [item.uri, item.author.handle]) const upvotesTitle = 'Upvotes on this post' - const downvotesHref = useMemo(() => { - const urip = new AtUri(item.uri) - return `/profile/${item.author.handle}/post/${urip.rkey}/downvoted-by` - }, [item.uri, item.author.handle]) - const downvotesTitle = 'Downvotes on this post' const repostsHref = useMemo(() => { const urip = new AtUri(item.uri) return `/profile/${item.author.handle}/post/${urip.rkey}/reposted-by` @@ -73,11 +67,6 @@ export const PostThreadItem = observer(function PostThreadItem({ .toggleUpvote() .catch(e => console.error('Failed to toggle upvote', record, e)) } - const onPressToggleDownvote = () => { - item - .toggleDownvote() - .catch(e => console.error('Failed to toggle downvote', record, e)) - } const onDeletePost = () => { item.delete().then( () => { @@ -188,21 +177,6 @@ export const PostThreadItem = observer(function PostThreadItem({ ) : ( <> )} - {item.downvoteCount ? ( - - - - {item.downvoteCount} - {' '} - {pluralize(item.downvoteCount, 'downvote')} - - - ) : ( - <> - )} ) : ( <> @@ -212,14 +186,11 @@ export const PostThreadItem = observer(function PostThreadItem({ replyCount={item.replyCount} repostCount={item.repostCount} upvoteCount={item.upvoteCount} - downvoteCount={item.downvoteCount} isReposted={!!item.myState.repost} isUpvoted={!!item.myState.upvote} - isDownvoted={!!item.myState.downvote} onPressReply={onPressReply} onPressToggleRepost={onPressToggleRepost} onPressToggleUpvote={onPressToggleUpvote} - onPressToggleDownvote={onPressToggleDownvote} /> @@ -301,14 +272,11 @@ export const PostThreadItem = observer(function PostThreadItem({ replyCount={item.replyCount} repostCount={item.repostCount} upvoteCount={item.upvoteCount} - downvoteCount={item.downvoteCount} isReposted={!!item.myState.repost} isUpvoted={!!item.myState.upvote} - isDownvoted={!!item.myState.downvote} onPressReply={onPressReply} onPressToggleRepost={onPressToggleRepost} onPressToggleUpvote={onPressToggleUpvote} - onPressToggleDownvote={onPressToggleDownvote} /> diff --git a/src/view/com/post/Post.tsx b/src/view/com/post/Post.tsx index a5c084570..10f8048f0 100644 --- a/src/view/com/post/Post.tsx +++ b/src/view/com/post/Post.tsx @@ -85,11 +85,6 @@ export const Post = observer(function Post({uri}: {uri: string}) { .toggleUpvote() .catch(e => console.error('Failed to toggle upvote', record, e)) } - const onPressToggleDownvote = () => { - item - .toggleDownvote() - .catch(e => console.error('Failed to toggle downvote', record, e)) - } const onDeletePost = () => { item.delete().then( () => { @@ -154,14 +149,11 @@ export const Post = observer(function Post({uri}: {uri: string}) { replyCount={item.replyCount} repostCount={item.repostCount} upvoteCount={item.upvoteCount} - downvoteCount={item.downvoteCount} isReposted={!!item.myState.repost} isUpvoted={!!item.myState.upvote} - isDownvoted={!!item.myState.downvote} onPressReply={onPressReply} onPressToggleRepost={onPressToggleRepost} onPressToggleUpvote={onPressToggleUpvote} - onPressToggleDownvote={onPressToggleDownvote} /> diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx index 2898deff5..6deb04209 100644 --- a/src/view/com/posts/FeedItem.tsx +++ b/src/view/com/posts/FeedItem.tsx @@ -53,11 +53,6 @@ export const FeedItem = observer(function FeedItem({ .toggleUpvote() .catch(e => console.error('Failed to toggle upvote', record, e)) } - const onPressToggleDownvote = () => { - item - .toggleDownvote() - .catch(e => console.error('Failed to toggle downvote', record, e)) - } const onDeletePost = () => { item.delete().then( () => { @@ -150,14 +145,11 @@ export const FeedItem = observer(function FeedItem({ replyCount={item.replyCount} repostCount={item.repostCount} upvoteCount={item.upvoteCount} - downvoteCount={item.downvoteCount} isReposted={!!item.myState.repost} isUpvoted={!!item.myState.upvote} - isDownvoted={!!item.myState.downvote} onPressReply={onPressReply} onPressToggleRepost={onPressToggleRepost} onPressToggleUpvote={onPressToggleUpvote} - onPressToggleDownvote={onPressToggleDownvote} /> diff --git a/src/view/com/util/LoadingPlaceholder.tsx b/src/view/com/util/LoadingPlaceholder.tsx index c198407de..b08e11595 100644 --- a/src/view/com/util/LoadingPlaceholder.tsx +++ b/src/view/com/util/LoadingPlaceholder.tsx @@ -9,7 +9,7 @@ import { } from 'react-native' import LinearGradient from 'react-native-linear-gradient' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {UpIcon, DownIcon} from '../../lib/icons' +import {UpIcon} from '../../lib/icons' import {s, colors} from '../../lib/styles' export function LoadingPlaceholder({ @@ -102,9 +102,7 @@ export function PostLoadingPlaceholder({ - - - + diff --git a/src/view/com/util/PostCtrls.tsx b/src/view/com/util/PostCtrls.tsx index a3d2085e9..6d766951f 100644 --- a/src/view/com/util/PostCtrls.tsx +++ b/src/view/com/util/PostCtrls.tsx @@ -8,27 +8,23 @@ import Animated, { interpolate, } from 'react-native-reanimated' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {UpIcon, UpIconSolid, DownIcon, DownIconSolid} from '../../lib/icons' +import {UpIcon, UpIconSolid} from '../../lib/icons' import {s, colors} from '../../lib/styles' interface PostCtrlsOpts { replyCount: number repostCount: number upvoteCount: number - downvoteCount: number isReposted: boolean isUpvoted: boolean - isDownvoted: boolean onPressReply: () => void onPressToggleRepost: () => void onPressToggleUpvote: () => void - onPressToggleDownvote: () => void } export function PostCtrls(opts: PostCtrlsOpts) { const interp1 = useSharedValue(0) const interp2 = useSharedValue(0) - const interp3 = useSharedValue(0) const anim1Style = useAnimatedStyle(() => ({ transform: [{scale: interpolate(interp1.value, [0, 1.0], [1.0, 3.0])}], @@ -38,10 +34,6 @@ export function PostCtrls(opts: PostCtrlsOpts) { transform: [{scale: interpolate(interp2.value, [0, 1.0], [1.0, 3.0])}], opacity: interpolate(interp2.value, [0, 1.0], [1.0, 0.0]), })) - const anim3Style = useAnimatedStyle(() => ({ - transform: [{scale: interpolate(interp3.value, [0, 1.0], [1.0, 3.0])}], - opacity: interpolate(interp3.value, [0, 1.0], [1.0, 0.0]), - })) const onPressToggleRepostWrapper = () => { if (!opts.isReposted) { @@ -59,14 +51,6 @@ export function PostCtrls(opts: PostCtrlsOpts) { } opts.onPressToggleUpvote() } - const onPressToggleDownvoteWrapper = () => { - if (!opts.isDownvoted) { - interp3.value = withTiming(1, {duration: 300}, () => { - interp3.value = withDelay(100, withTiming(0, {duration: 20})) - }) - } - opts.onPressToggleDownvote() - } return ( @@ -124,27 +108,7 @@ export function PostCtrls(opts: PostCtrlsOpts) { - - - - {opts.isDownvoted ? ( - - ) : ( - - )} - - - {opts.downvoteCount} - - - + ) } @@ -169,7 +133,4 @@ const styles = StyleSheet.create({ ctrlIconUpvoted: { color: colors.red3, }, - ctrlIconDownvoted: { - color: colors.blue3, - }, }) -- 2.51.2 From 63348807b59ec82a905aa2a1164a1484e61aa29a Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Sun, 20 Nov 2022 11:45:31 -0600 Subject: [PATCH 3/7] Adjust post control sizing and alignment --- src/view/com/util/LoadingPlaceholder.tsx | 6 +++--- src/view/com/util/PostCtrls.tsx | 18 ++++++++---------- src/view/lib/icons.tsx | 4 +++- 3 files changed, 14 insertions(+), 14 deletions(-) diff --git a/src/view/com/util/LoadingPlaceholder.tsx b/src/view/com/util/LoadingPlaceholder.tsx index b08e11595..ed94c5502 100644 --- a/src/view/com/util/LoadingPlaceholder.tsx +++ b/src/view/com/util/LoadingPlaceholder.tsx @@ -93,14 +93,14 @@ export function PostLoadingPlaceholder({ - + - + diff --git a/src/view/com/util/PostCtrls.tsx b/src/view/com/util/PostCtrls.tsx index 6d766951f..b22475086 100644 --- a/src/view/com/util/PostCtrls.tsx +++ b/src/view/com/util/PostCtrls.tsx @@ -59,9 +59,9 @@ export function PostCtrls(opts: PostCtrlsOpts) { - {opts.replyCount} + {opts.replyCount} @@ -74,14 +74,14 @@ export function PostCtrls(opts: PostCtrlsOpts) { opts.isReposted ? styles.ctrlIconReposted : styles.ctrlIcon } icon="retweet" - size={18} + size={20} /> {opts.repostCount} @@ -95,14 +95,14 @@ export function PostCtrls(opts: PostCtrlsOpts) { {opts.isUpvoted ? ( ) : ( - + )} {opts.upvoteCount} @@ -116,12 +116,10 @@ export function PostCtrls(opts: PostCtrlsOpts) { const styles = StyleSheet.create({ ctrls: { flexDirection: 'row', - paddingRight: 20, }, ctrl: { flexDirection: 'row', alignItems: 'center', - paddingLeft: 4, paddingRight: 4, }, ctrlIcon: { diff --git a/src/view/lib/icons.tsx b/src/view/lib/icons.tsx index c160df3cc..b3f52a62e 100644 --- a/src/view/lib/icons.tsx +++ b/src/view/lib/icons.tsx @@ -221,9 +221,11 @@ export function UserGroupIcon({ export function UpIcon({ style, size, + strokeWidth = 1.3, }: { style?: StyleProp size?: string | number + strokeWidth: number }) { return ( -- 2.51.2 From a21bcf10dd794b69009b98c7789a7e87d696bfef Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Sun, 20 Nov 2022 12:00:40 -0600 Subject: [PATCH 4/7] Add build flags and disable tabs for now --- src/build-flags.ts | 2 ++ src/state/index.ts | 1 - src/state/models/navigation.ts | 11 ++++++++++- src/view/com/modals/ServerInput.tsx | 4 ++-- src/view/com/onboard/FeatureExplainer.tsx | 5 +++-- src/view/com/util/DropdownBtn.tsx | 17 ++++++++++------- src/view/shell/mobile/index.tsx | 13 ++++++++----- 7 files changed, 35 insertions(+), 18 deletions(-) create mode 100644 src/build-flags.ts diff --git a/src/build-flags.ts b/src/build-flags.ts new file mode 100644 index 000000000..155230e5d --- /dev/null +++ b/src/build-flags.ts @@ -0,0 +1,2 @@ +export const LOGIN_INCLUDE_DEV_SERVERS = true +export const TABS_ENABLED = false diff --git a/src/state/index.ts b/src/state/index.ts index fd81bc842..872cd69f6 100644 --- a/src/state/index.ts +++ b/src/state/index.ts @@ -5,7 +5,6 @@ import {RootStoreModel} from './models/root-store' import * as libapi from './lib/api' import * as storage from './lib/storage' -export const IS_PROD_BUILD = true export const LOCAL_DEV_SERVICE = 'http://localhost:2583' export const STAGING_SERVICE = 'https://pds.staging.bsky.dev' export const PROD_SERVICE = 'https://bsky.social' diff --git a/src/state/models/navigation.ts b/src/state/models/navigation.ts index 0ec097afc..758ae37d8 100644 --- a/src/state/models/navigation.ts +++ b/src/state/models/navigation.ts @@ -1,5 +1,5 @@ import {makeAutoObservable} from 'mobx' -import {isObj, hasProp} from '../lib/type-guards' +import {TABS_ENABLED} from '../../build-flags' let __id = 0 function genId() { @@ -226,6 +226,9 @@ export class NavigationModel { // = newTab(url: string, title?: string) { + if (!TABS_ENABLED) { + return this.navigate(url) + } const tab = new NavigationTabModel() tab.navigate(url, title) tab.isNewTab = true @@ -234,10 +237,16 @@ export class NavigationModel { } setActiveTab(tabIndex: number) { + if (!TABS_ENABLED) { + return + } this.tabIndex = Math.max(Math.min(tabIndex, this.tabs.length - 1), 0) } closeTab(tabIndex: number) { + if (!TABS_ENABLED) { + return + } this.tabs = [ ...this.tabs.slice(0, tabIndex), ...this.tabs.slice(tabIndex + 1), diff --git a/src/view/com/modals/ServerInput.tsx b/src/view/com/modals/ServerInput.tsx index 0aa1a07e2..c885ff164 100644 --- a/src/view/com/modals/ServerInput.tsx +++ b/src/view/com/modals/ServerInput.tsx @@ -5,11 +5,11 @@ import {BottomSheetScrollView, BottomSheetTextInput} from '@gorhom/bottom-sheet' import {useStores} from '../../../state' import {s, colors} from '../../lib/styles' import { - IS_PROD_BUILD, LOCAL_DEV_SERVICE, STAGING_SERVICE, PROD_SERVICE, } from '../../../state/index' +import {LOGIN_INCLUDE_DEV_SERVERS} from '../../../build-flags' export const snapPoints = ['80%'] @@ -36,7 +36,7 @@ export function Component({ Choose Service - {!IS_PROD_BUILD ? ( + {LOGIN_INCLUDE_DEV_SERVERS ? ( <> ( @@ -85,8 +86,8 @@ export const FeatureExplainer = () => { const routes = [ {key: 'intro', title: 'Intro'}, {key: 'scenes', title: 'Scenes'}, - {key: 'tabs', title: 'Tabs'}, - ] + TABS_ENABLED ? {key: 'tabs', title: 'Tabs'} : undefined, + ].filter(Boolean) const onPressSkip = () => store.onboard.next() const onPressNext = () => { diff --git a/src/view/com/util/DropdownBtn.tsx b/src/view/com/util/DropdownBtn.tsx index bef193f1d..85e8453fd 100644 --- a/src/view/com/util/DropdownBtn.tsx +++ b/src/view/com/util/DropdownBtn.tsx @@ -14,6 +14,7 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {colors} from '../../lib/styles' import {useStores} from '../../../state' import {SharePostModel, ConfirmModel} from '../../../state/models/shell-ui' +import {TABS_ENABLED} from '../../../build-flags' export interface DropdownItem { icon?: IconProp @@ -82,13 +83,15 @@ export function PostDropdownBtn({ const store = useStores() const dropdownItems: DropdownItem[] = [ - { - icon: ['far', 'clone'], - label: 'Open in new tab', - onPress() { - store.nav.newTab(itemHref) - }, - }, + TABS_ENABLED + ? { + icon: ['far', 'clone'], + label: 'Open in new tab', + onPress() { + store.nav.newTab(itemHref) + }, + } + : undefined, { icon: 'share', label: 'Share...', diff --git a/src/view/shell/mobile/index.tsx b/src/view/shell/mobile/index.tsx index e0f7c07aa..32b1f35dd 100644 --- a/src/view/shell/mobile/index.tsx +++ b/src/view/shell/mobile/index.tsx @@ -26,6 +26,7 @@ import Animated, { } from 'react-native-reanimated' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {IconProp} from '@fortawesome/fontawesome-svg-core' +import {TABS_ENABLED} from '../../../build-flags' import {useStores} from '../../../state' import {NavigationModel} from '../../../state/models/navigation' import {match, MatchResult} from '../../routes' @@ -331,11 +332,13 @@ export const MobileShell: React.FC = observer(() => { onPress={onPressSearch} onLongPress={doNewTab('/search')} /> - + {TABS_ENABLED ? ( + + ) : undefined} Date: Sun, 20 Nov 2022 12:25:11 -0600 Subject: [PATCH 5/7] Move search btn into the viewheader --- src/view/com/profile/ProfileHeader.tsx | 38 +++++++++-------------- src/view/com/util/ViewHeader.tsx | 43 ++++++++++++++------------ src/view/lib/icons.tsx | 29 +---------------- src/view/screens/Home.tsx | 2 +- src/view/shell/mobile/index.tsx | 19 ------------ 5 files changed, 40 insertions(+), 91 deletions(-) diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx index 5a3743763..ed8924964 100644 --- a/src/view/com/profile/ProfileHeader.tsx +++ b/src/view/com/profile/ProfileHeader.tsx @@ -20,6 +20,7 @@ import { import {pluralize} from '../../lib/strings' import {s, colors} from '../../lib/styles' import {getGradient} from '../../lib/asset-gen' +import {MagnifyingGlassIcon} from '../../lib/icons' import {DropdownBtn, DropdownItem} from '../util/DropdownBtn' import Toast from '../util/Toast' import {LoadingPlaceholder} from '../util/LoadingPlaceholder' @@ -43,10 +44,8 @@ export const ProfileHeader = observer(function ProfileHeader({ const onPressBack = () => { store.nav.tab.goBack() } - const onPressMyAvatar = () => { - if (store.me.handle) { - store.nav.navigate(`/profile/${store.me.handle}`) - } + const onPressSearch = () => { + store.nav.navigate(`/search`) } const onPressToggleFollow = () => { view?.toggleFollowing().then( @@ -117,15 +116,9 @@ export const ProfileHeader = observer(function ProfileHeader({ /> ) : undefined} - {store.me.did ? ( - - - - ) : undefined} + + + ) : undefined} - {store.me.did ? ( - - - - ) : undefined} + + + { store.nav.tab.goBack() } - const onPressAvatar = () => { - if (store.me.handle) { - store.nav.navigate(`/profile/${store.me.handle}`) - } + const onPressSearch = () => { + store.nav.navigate(`/search`) } return ( {store.nav.tab.canGoBack ? ( - + ) : ( @@ -38,17 +37,9 @@ export function ViewHeader({ ) : undefined} - {store.me.did ? ( - - - - ) : ( - - )} + + + ) } @@ -83,8 +74,22 @@ const styles = StyleSheet.create({ }, cornerPlaceholder: { - width: 24, - height: 24, + width: 30, + height: 30, + }, + backIcon: {width: 30, height: 30}, + searchBtn: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + backgroundColor: colors.gray1, + width: 30, + height: 30, + borderRadius: 15, + }, + searchBtnIcon: { + color: colors.black, + position: 'relative', + top: -1, }, - backIcon: {width: 24, height: 24}, }) diff --git a/src/view/lib/icons.tsx b/src/view/lib/icons.tsx index b3f52a62e..21c5c86b7 100644 --- a/src/view/lib/icons.tsx +++ b/src/view/lib/icons.tsx @@ -91,7 +91,7 @@ export function HomeIconSolid({ // Copyright (c) 2020 Refactoring UI Inc. // https://github.com/tailwindlabs/heroicons/blob/master/LICENSE -export function MangifyingGlassIcon({ +export function MagnifyingGlassIcon({ style, size, }: { @@ -116,33 +116,6 @@ export function MangifyingGlassIcon({ ) } -// Copyright (c) 2020 Refactoring UI Inc. -// https://github.com/tailwindlabs/heroicons/blob/master/LICENSE -export function MangifyingGlassIconSolid({ - style, - size, -}: { - style?: StyleProp - size?: string | number -}) { - return ( - - - - ) -} - // https://github.com/Remix-Design/RemixIcon/blob/master/License export function BellIcon({ style, diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx index d90d337ac..8dd7ca411 100644 --- a/src/view/screens/Home.tsx +++ b/src/view/screens/Home.tsx @@ -5,7 +5,6 @@ import useAppState from 'react-native-appstate-hook' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {ViewHeader} from '../com/util/ViewHeader' import {Feed} from '../com/posts/Feed' -import {FAB} from '../com/util/FloatingActionButton' import {useStores} from '../../state' import {FeedModel} from '../../state/models/feed-view' import {ScreenParams} from '../routes' @@ -81,6 +80,7 @@ export const Home = observer(function Home({ return ( + void @@ -86,14 +82,6 @@ const Btn = ({ } else if (icon === 'home-solid') { IconEl = HomeIconSolid size = 24 - } else if (icon === 'search') { - IconEl = MangifyingGlassIcon - size = 24 - addedStyles = {position: 'relative', top: -1} as ViewStyle - } else if (icon === 'search-solid') { - IconEl = MangifyingGlassIconSolid - size = 24 - addedStyles = {position: 'relative', top: -1} as ViewStyle } else if (icon === 'bell') { IconEl = BellIcon size = 24 @@ -148,7 +136,6 @@ export const MobileShell: React.FC = observer(() => { store.nav.navigate('/') } } - const onPressSearch = () => store.nav.navigate('/search') const onPressMenu = () => setMainMenuActive(true) const onPressNotifications = () => store.nav.navigate('/notifications') const onPressTabs = () => toggleTabsMenu(!isTabsSelectorActive) @@ -262,7 +249,6 @@ export const MobileShell: React.FC = observer(() => { } const isAtHome = store.nav.tab.current.url === '/' - const isAtSearch = store.nav.tab.current.url === '/search' const isAtNotifications = store.nav.tab.current.url === '/notifications' return ( @@ -327,11 +313,6 @@ export const MobileShell: React.FC = observer(() => { onPress={onPressHome} onLongPress={doNewTab('/')} /> - {TABS_ENABLED ? ( Date: Sun, 20 Nov 2022 16:24:44 -0600 Subject: [PATCH 6/7] Fix the pointy edges on the arrow icons --- src/view/lib/icons.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/view/lib/icons.tsx b/src/view/lib/icons.tsx index 21c5c86b7..05b1ec601 100644 --- a/src/view/lib/icons.tsx +++ b/src/view/lib/icons.tsx @@ -209,6 +209,8 @@ export function UpIcon({ @@ -232,6 +234,8 @@ export function UpIconSolid({ strokeWidth={1.3} stroke="currentColor" fill="currentColor" + strokeLinecap="round" + strokeLinejoin="round" d="M 7 3 L 2 8 L 4.5 8 L 4.5 11.5 L 9.5 11.5 L 9.5 8 L 12 8 L 7 3 Z" /> @@ -254,6 +258,8 @@ export function DownIcon({ @@ -277,6 +283,8 @@ export function DownIconSolid({ strokeWidth={1.3} stroke="currentColor" fill="currentColor" + strokeLinecap="round" + strokeLinejoin="round" d="M 7 11.5 L 2 6.5 L 4.5 6.5 L 4.5 3 L 9.5 3 L 9.5 6.5 L 12 6.5 L 7 11.5 Z" /> -- 2.51.2 From 7e487fd5ae053ebb4373b85f1b3d7aa66f8a0241 Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Sun, 20 Nov 2022 16:29:43 -0600 Subject: [PATCH 7/7] Adjust control alignment --- src/view/com/util/LoadingPlaceholder.tsx | 2 +- src/view/com/util/PostCtrls.tsx | 14 +++++++------- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/view/com/util/LoadingPlaceholder.tsx b/src/view/com/util/LoadingPlaceholder.tsx index ed94c5502..5ccd1bd14 100644 --- a/src/view/com/util/LoadingPlaceholder.tsx +++ b/src/view/com/util/LoadingPlaceholder.tsx @@ -100,7 +100,7 @@ export function PostLoadingPlaceholder({ - + diff --git a/src/view/com/util/PostCtrls.tsx b/src/view/com/util/PostCtrls.tsx index b22475086..144351d85 100644 --- a/src/view/com/util/PostCtrls.tsx +++ b/src/view/com/util/PostCtrls.tsx @@ -61,7 +61,7 @@ export function PostCtrls(opts: PostCtrlsOpts) { icon={['far', 'comment']} size={16} /> - {opts.replyCount} + {opts.replyCount} @@ -80,8 +80,8 @@ export function PostCtrls(opts: PostCtrlsOpts) { {opts.repostCount} @@ -93,16 +93,16 @@ export function PostCtrls(opts: PostCtrlsOpts) { onPress={onPressToggleUpvoteWrapper}> {opts.isUpvoted ? ( - + ) : ( - + )} {opts.upvoteCount}