From 719bec36d858724aad8852f6f006be234fc50463 Mon Sep 17 00:00:00 2001 From: KoalaSat Date: Sun, 22 Jan 2023 13:43:30 +0100 Subject: [PATCH] New UI last changes --- frontend/Components/MenuItems/index.tsx | 6 +- frontend/Components/NoteCard/index.tsx | 41 +++-- frontend/Components/ProfileCard/index.tsx | 7 +- frontend/Components/TextContent/index.tsx | 13 +- frontend/Pages/ContactsFeed/index.tsx | 5 + frontend/Pages/ConversationPage/index.tsx | 2 +- frontend/Pages/ConversationsFeed/index.tsx | 17 +- frontend/Pages/FeedNavigator/index.tsx | 6 +- frontend/Pages/HomeFeed/index.tsx | 4 +- frontend/Pages/HomeNavigator/index.tsx | 42 +++-- .../Pages/NostrosDrawerNavigator/index.tsx | 2 +- frontend/Pages/NotePage/index.tsx | 58 +++++-- frontend/Pages/NotificationsFeed/index.tsx | 4 +- frontend/Pages/ProfileConfigPage/index.tsx | 12 +- frontend/Pages/ProfilePage/index.tsx | 163 +++++++++--------- frontend/Pages/RelaysPage/index.tsx | 12 +- 16 files changed, 233 insertions(+), 161 deletions(-) diff --git a/frontend/Components/MenuItems/index.tsx b/frontend/Components/MenuItems/index.tsx index 88e5f81f..9ed9f6ff 100644 --- a/frontend/Components/MenuItems/index.tsx +++ b/frontend/Components/MenuItems/index.tsx @@ -18,7 +18,7 @@ import { UserContext } from '../../Contexts/UserContext' import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons' import { navigate } from '../../lib/Navigation' import NostrosAvatar from '../NostrosAvatar' -import { formatPubKey } from '../../Functions/RelayFunctions/Users' +import { formatPubKey, username } from '../../Functions/RelayFunctions/Users' export const MenuItems: React.FC = () => { const [drawerItemIndex, setDrawerItemIndex] = React.useState(-1) @@ -61,7 +61,9 @@ export const MenuItems: React.FC = () => { {nPub && ( - navigate('Profile', { pubKey: publicKey })}> + navigate('Profile', { pubKey: publicKey, title: username(user) })} + > void + onPressUser?: (user: User) => void showAnswerData?: boolean } export const NoteCard: React.FC = ({ note, showAnswerData = true, - onPressOptions = () => {}, + onPressUser = () => {}, }) => { const theme = useTheme() const { publicKey, privateKey } = React.useContext(UserContext) @@ -116,21 +117,15 @@ export const NoteCard: React.FC = ({ )} - - note.kind !== EventKind.recommendServer && push('Note', { noteId: note.id }) - } - > - - {hide ? ( - - ) : ( - - )} - - + + {hide ? ( + + ) : ( + + )} + ) } @@ -187,9 +182,9 @@ export const NoteCard: React.FC = ({ return ( note && ( - + - + onPressUser({ id: note.pubkey, name: note.name })}> = ({ - + onPressUser({ id: note.pubkey, name: note.name })} + /> {getNoteContent()} @@ -262,7 +261,7 @@ export const NoteCard: React.FC = ({ const styles = StyleSheet.create({ container: { - padding: 16, + flex: 1, }, titleUsername: { fontWeight: 'bold', diff --git a/frontend/Components/ProfileCard/index.tsx b/frontend/Components/ProfileCard/index.tsx index 17012217..daef2823 100644 --- a/frontend/Components/ProfileCard/index.tsx +++ b/frontend/Components/ProfileCard/index.tsx @@ -28,6 +28,7 @@ export const ProfileCard: React.FC = ({ userPubKey, bottomShee const [isContact, setIsContact] = React.useState() const [showNotification, setShowNotification] = React.useState() const nPub = React.useMemo(() => getNpub(userPubKey), [userPubKey]) + const username = React.useMemo(() => usernamePubKey(user?.name ?? '', nPub), [nPub, user]) React.useEffect(() => { loadUser() @@ -66,7 +67,7 @@ export const ProfileCard: React.FC = ({ userPubKey, bottomShee const goToProfile: () => void = () => { bottomSheetRef.current?.close() - push('Profile', { pubKey: userPubKey }) + push('Profile', { pubKey: userPubKey, title: username }) } return ( @@ -86,7 +87,7 @@ export const ProfileCard: React.FC = ({ userPubKey, bottomShee - {usernamePubKey(user?.name ?? '', nPub)} + {username} {/* */} {user?.nip05} @@ -123,7 +124,7 @@ export const ProfileCard: React.FC = ({ userPubKey, bottomShee icon='message-plus-outline' size={28} onPress={() => { - navigate('Conversation', { pubKey: userPubKey }) + navigate('Conversation', { pubKey: userPubKey, title: username }) bottomSheetRef.current?.close() }} /> diff --git a/frontend/Components/TextContent/index.tsx b/frontend/Components/TextContent/index.tsx index 460e9763..370209c1 100644 --- a/frontend/Components/TextContent/index.tsx +++ b/frontend/Components/TextContent/index.tsx @@ -3,18 +3,18 @@ import ParsedText from 'react-native-parsed-text' import { Event } from '../../lib/nostr/Events' import { Linking, StyleSheet, View } from 'react-native' import { AppContext } from '../../Contexts/AppContext' -import { getUser } from '../../Functions/DatabaseFunctions/Users' +import { getUser, User } from '../../Functions/DatabaseFunctions/Users' import { formatPubKey } from '../../Functions/RelayFunctions/Users' import moment from 'moment' import { Card, Text, useTheme } from 'react-native-paper' import { getLinkPreview } from 'link-preview-js' -import { push } from '../../lib/Navigation' import { validImageUrl } from '../../Functions/NativeFunctions' interface TextContentProps { event?: Event content?: string preview?: boolean + onPressUser?: (user: User) => void } interface LinkPreviewMedia { @@ -35,7 +35,12 @@ interface LinkPreviewMedia { favicons: string[] } -export const TextContent: React.FC = ({ event, content, preview = true }) => { +export const TextContent: React.FC = ({ + event, + content, + preview = true, + onPressUser = () => {}, +}) => { const theme = useTheme() const { database } = useContext(AppContext) const [userNames, setUserNames] = useState>({}) @@ -55,7 +60,7 @@ export const TextContent: React.FC = ({ event, content, previe const mentionIndex: number = parseInt(text.substring(2, text.length - 1)) const userPubKey = event.tags[mentionIndex][1] - push('Profile', { pubKey: userPubKey }) + onPressUser({ id: userPubKey, name: text }) } const renderMentionText: (matchingString: string, matches: string[]) => string = ( diff --git a/frontend/Pages/ContactsFeed/index.tsx b/frontend/Pages/ContactsFeed/index.tsx index 45aef15f..33545624 100644 --- a/frontend/Pages/ContactsFeed/index.tsx +++ b/frontend/Pages/ContactsFeed/index.tsx @@ -205,6 +205,7 @@ export const ContactsFeed: React.FC = () => { { = ({ route }) => } const onPressOtherUser: () => void = () => { - navigate('Profile', { pubKey: otherPubKey }) + navigate('Profile', { pubKey: otherPubKey, title: username(otherUser) }) } const send: () => void = () => { diff --git a/frontend/Pages/ConversationsFeed/index.tsx b/frontend/Pages/ConversationsFeed/index.tsx index b3a98264..7f8b1dba 100644 --- a/frontend/Pages/ConversationsFeed/index.tsx +++ b/frontend/Pages/ConversationsFeed/index.tsx @@ -109,11 +109,16 @@ export const ConversationsFeed: React.FC = () => { const otherPubKey = getOtherPubKey(item, publicKey) const user: User = users?.find((user) => user.id === otherPubKey) ?? { id: otherPubKey } + const userMame = username(user) return ( - navigate('Conversation', { pubKey: user.id, conversationId: item.conversation_id }) + navigate('Conversation', { + pubKey: user.id, + conversationId: item.conversation_id, + title: userMame, + }) } > @@ -126,7 +131,7 @@ export const ConversationsFeed: React.FC = () => { size={40} /> - {username(user)} + {userMame} @@ -189,7 +194,7 @@ export const ConversationsFeed: React.FC = () => { onPress={() => { bottomSheetUserListRef.current?.close() bottomSheetPubKeyRef.current?.close() - navigate('Conversation', { pubKey: item.id }) + navigate('Conversation', { pubKey: item.id, title: username(item) }) }} > @@ -215,6 +220,7 @@ export const ConversationsFeed: React.FC = () => { {directMessages.length > 0 ? ( { mode='contained' disabled={!sendPubKeyInput || sendPubKeyInput === ''} onPress={() => { - navigate('Conversation', { pubKey: sendPubKeyInput }) + navigate('Conversation', { pubKey: sendPubKeyInput, title: sendPubKeyInput }) bottomSheetPubKeyRef.current?.close() }} > @@ -356,6 +362,9 @@ const styles = StyleSheet.create({ paddingLeft: 16, paddingRight: 16, }, + list: { + paddingBottom: 64, + }, }) export default ConversationsFeed diff --git a/frontend/Pages/FeedNavigator/index.tsx b/frontend/Pages/FeedNavigator/index.tsx index 8e36fc20..ebb67e2e 100644 --- a/frontend/Pages/FeedNavigator/index.tsx +++ b/frontend/Pages/FeedNavigator/index.tsx @@ -82,7 +82,11 @@ export const HomeNavigator: React.FC = () => { onPress={() => (navigation as any as DrawerNavigationProp<{}>).openDrawer()} /> ) : null} - + {['Profile', 'Conversation'].includes(route.name) && ( = ({ navigation }) => { { - setProfileCardPubKey(item.pubkey) + onPressUser={(user) => { + setProfileCardPubKey(user.id) bottomSheetProfileRef.current?.open() }} /> diff --git a/frontend/Pages/HomeNavigator/index.tsx b/frontend/Pages/HomeNavigator/index.tsx index 2a1efeb6..a69943ff 100644 --- a/frontend/Pages/HomeNavigator/index.tsx +++ b/frontend/Pages/HomeNavigator/index.tsx @@ -10,13 +10,12 @@ import { useTranslation } from 'react-i18next' import ProfileCreatePage from '../../Pages/ProfileCreatePage' import { DrawerNavigationProp } from '@react-navigation/drawer' import RelaysPage from '../RelaysPage' -import { useState } from 'react' export const HomeNavigator: React.FC = () => { const theme = useTheme() const { t } = useTranslation('common') - const [bottomSheetPage, setBottomSheetPage] = useState<'keys' | 'relays'>('keys') - const bottomSheetRef = React.useRef(null) + const bottomSheetKeysRef = React.useRef(null) + const bottomSheetRelaysRef = React.useRef(null) const Stack = React.useMemo(() => createStackNavigator(), []) const cardStyleInterpolator = React.useMemo( () => @@ -26,8 +25,9 @@ export const HomeNavigator: React.FC = () => { [], ) const onPressQuestion: (pageName: string) => void = (pageName) => { - bottomSheetRef.current?.open() - setBottomSheetPage(pageName === 'Relays' ? 'relays' : 'keys') + pageName === 'Relays' + ? bottomSheetRelaysRef.current?.open() + : bottomSheetKeysRef.current?.open() } const BottomSheetKeys = React.useMemo( @@ -60,17 +60,6 @@ export const HomeNavigator: React.FC = () => { [], ) - const BottomSheets = { - keys: { - component: BottomSheetKeys, - height: 430, - }, - relays: { - component: BottomSheetRelays, - height: 680, - }, - } - return ( <> { + {BottomSheetKeys} + + { }, }} > - {BottomSheets[bottomSheetPage].component} + {BottomSheetRelays} ) diff --git a/frontend/Pages/NostrosDrawerNavigator/index.tsx b/frontend/Pages/NostrosDrawerNavigator/index.tsx index 65deef66..9c876f07 100644 --- a/frontend/Pages/NostrosDrawerNavigator/index.tsx +++ b/frontend/Pages/NostrosDrawerNavigator/index.tsx @@ -54,7 +54,7 @@ const styles = StyleSheet.create({ justifyContent: 'center', alignContent: 'center', flex: 1, - paddingLeft: 50, + paddingLeft: 90, }, }) diff --git a/frontend/Pages/NotePage/index.tsx b/frontend/Pages/NotePage/index.tsx index f9110e1f..6934b539 100644 --- a/frontend/Pages/NotePage/index.tsx +++ b/frontend/Pages/NotePage/index.tsx @@ -145,16 +145,24 @@ export const NotePage: React.FC = ({ route }) => { } } - const renderItem: (note: Note) => JSX.Element = (note) => ( - - { - setProfileCardPubKey(note.pubkey) - bottomSheetProfileRef.current?.open() - }} - showAnswerData={false} - /> + const renderItem: (note: Note, index: number) => JSX.Element = (note, index) => ( + + + + {index < (replies?.length ?? 0) - 1 && ( + + )} + + + { + setProfileCardPubKey(user.id) + bottomSheetProfileRef.current?.open() + }} + showAnswerData={false} + /> + ) @@ -272,8 +280,8 @@ export const NotePage: React.FC = ({ route }) => { )} {replies && replies.length > 0 && ( - - {replies.map((note) => renderItem(note))} + + {replies.map((note, index) => renderItem(note, index))} {replies.length >= 10 && } )} @@ -317,6 +325,9 @@ export const NotePage: React.FC = ({ route }) => { } const styles = StyleSheet.create({ + container: { + paddingBottom: 32, + }, title: { paddingRight: 16, paddingLeft: 16, @@ -343,14 +354,14 @@ const styles = StyleSheet.create({ justifyContent: 'space-around', }, titleComment: { - borderTopWidth: 1, padding: 16, flexDirection: 'row', justifyContent: 'flex-start', }, list: { - paddingLeft: 16, + marginLeft: 16, paddingRight: 16, + marginBottom: 180, }, loading: { paddingTop: 30, @@ -364,11 +375,26 @@ const styles = StyleSheet.create({ right: 16, position: 'absolute', }, + note: { + flexDirection: 'row', + flex: 1, + }, noteCard: { - borderLeftWidth: 1, - paddingLeft: 32, + flex: 1, paddingTop: 16, }, + noteLine: { + width: 16, + }, + noteLineTop: { + borderBottomWidth: 1, + borderLeftWidth: 1, + height: 60, + }, + noteLineBottom: { + borderLeftWidth: 1, + flex: 1, + }, answerData: { flexDirection: 'row', }, diff --git a/frontend/Pages/NotificationsFeed/index.tsx b/frontend/Pages/NotificationsFeed/index.tsx index abbe62f5..df2ca6e5 100644 --- a/frontend/Pages/NotificationsFeed/index.tsx +++ b/frontend/Pages/NotificationsFeed/index.tsx @@ -130,8 +130,8 @@ export const NotificationsFeed: React.FC = () => { { - setProfileCardPubKey(note.pubkey) + onPressUser={(user) => { + setProfileCardPubKey(user.id) bottomSheetProfileRef.current?.open() }} /> diff --git a/frontend/Pages/ProfileConfigPage/index.tsx b/frontend/Pages/ProfileConfigPage/index.tsx index 90e37b66..06e0abde 100644 --- a/frontend/Pages/ProfileConfigPage/index.tsx +++ b/frontend/Pages/ProfileConfigPage/index.tsx @@ -309,12 +309,16 @@ export const ProfileConfigPage: React.FC = () => { label={t('profileConfigPage.name') ?? ''} onChangeText={setName} value={name} + style={styles.input} /> { forceTextInputFocus={false} /> } + style={styles.input} /> { forceTextInputFocus={false} /> } + style={styles.input} />