diff --git a/app/client/mobile/src/contacts/Contacts.tsx b/app/client/mobile/src/contacts/Contacts.tsx index 39e1d812..df2516d8 100644 --- a/app/client/mobile/src/contacts/Contacts.tsx +++ b/app/client/mobile/src/contacts/Contacts.tsx @@ -17,7 +17,7 @@ export function Contacts({ openRegistry, openContact }: { openRegistry: ()=>void - } value={state.filter} onChangeText={value => actions.setFilter(value)} /> + } value={state.filter} onChangeText={value => actions.setFilter(value)} /> diff --git a/app/client/mobile/src/registry/Registry.styled.ts b/app/client/mobile/src/registry/Registry.styled.ts index 6124cf8e..0c376bc5 100644 --- a/app/client/mobile/src/registry/Registry.styled.ts +++ b/app/client/mobile/src/registry/Registry.styled.ts @@ -10,20 +10,20 @@ export const styles = StyleSheet.create({ height: '100%', }, header: { + position: 'relative', display: 'flex', flexDirection: 'row', - gap: 8, - paddingTop: 8, alignItems: 'center', - paddingLeft: 8, + justifyContent: 'center', paddingRight: 8, - paddingBottom: 8, + paddingLeft: 8, width: '100%', + zIndex: 1, }, close: { flexShrink: 0, - margin: 0, - padding: 0, + marginRight: 0, + marginLeft: 0, backgroundColor: 'transparent', }, input: { @@ -73,4 +73,29 @@ export const styles = StyleSheet.create({ icon: { backgroundColor: 'transparent', }, + none: { + width: '100%', + height: '100%', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }, + cards: { + display: 'flex', + flexDirection: 'column', + width: '100%', + overscrollBehavior: 'none', + }, + cardsContainer: { + paddingBottom: 64, + }, + card: { + width: '100%', + height: 48, + paddingTop: 8, + paddingBottom: 8, + paddingRight: 16, + paddingLeft: 16, + borderBottomWidth: 1, + } }); diff --git a/app/client/mobile/src/registry/Registry.tsx b/app/client/mobile/src/registry/Registry.tsx index 0fc8cfa8..10c36a63 100644 --- a/app/client/mobile/src/registry/Registry.tsx +++ b/app/client/mobile/src/registry/Registry.tsx @@ -1,12 +1,14 @@ import React from 'react'; -import { SafeAreaView, View } from 'react-native'; -import { IconButton, Icon, Divider, Button, TextInput, Surface } from 'react-native-paper'; +import { SafeAreaView, View, FlatList } from 'react-native'; +import { Text, IconButton, Icon, Divider, Button, TextInput, Surface, useTheme } from 'react-native-paper'; import { ContactParams } from '../profile/Profile'; import {styles} from './Registry.styled'; import {useRegistry} from './useRegistry.hook'; +import { Card } from '../card/Card'; export function Registry({ close, openContact }: { close: ()=>void, openContact: (params: ContactParams)=>void }) { const { state, actions } = useRegistry(); + const theme = useTheme(); return ( @@ -15,13 +17,43 @@ export function Registry({ close, openContact }: { close: ()=>void, openContact: )} - } value={state.username} onChangeText={value => actions.setUsername(value)} /> + } value={state.username} onChangeText={value => actions.setUsername(value)} /> - } value={state.server} onChangeText={value => actions.setServer(value)} /> + } value={state.server} onChangeText={value => actions.setServer(value)} /> + + + { state.profiles.length !== 0 && ( + { + const select = () => { + const { guid, handle, node, name, location, description, imageUrl } = item; + const params = { guid, handle, node, name, location, description, imageUrl }; + openContact(params); + } + return ( + + + + ) + }} + keyExtractor={(profile) => profile.guid} + /> + )} + { state.profiles.length === 0 && ( + { state.strings.noContacts } + )} + ) } + + diff --git a/app/client/mobile/src/session/Session.tsx b/app/client/mobile/src/session/Session.tsx index 8a66fe97..20adde00 100644 --- a/app/client/mobile/src/session/Session.tsx +++ b/app/client/mobile/src/session/Session.tsx @@ -40,8 +40,6 @@ export function Session() { const ContactsRoute = () => ; const SettingsRoute = () => ; -console.log("RENDER: ", state.layout); - return ( {state.layout !== 'large' && ( @@ -170,7 +168,7 @@ function RegistryScreen({nav}) { )} screenOptions={{ - drawerStyle: {width: '45%'}, + drawerStyle: {width: 350}, drawerPosition: 'right', drawerType: 'front', headerShown: false, @@ -194,7 +192,7 @@ function ContactsScreen({nav}) { )} screenOptions={{ - drawerStyle: {width: '50%'}, + drawerStyle: {width: 400}, drawerPosition: 'right', drawerType: 'front', headerShown: false, diff --git a/app/client/mobile/src/settings/Settings.styled.ts b/app/client/mobile/src/settings/Settings.styled.ts index 0dbf2da7..fc8a0b28 100644 --- a/app/client/mobile/src/settings/Settings.styled.ts +++ b/app/client/mobile/src/settings/Settings.styled.ts @@ -205,6 +205,9 @@ export const styles = StyleSheet.create({ label: { fontSize: 16, }, + smallLabel: { + wordBreak: 'break-all', + }, labelUnset: { fontSize: 16, fontStyle: 'italic', @@ -240,7 +243,6 @@ export const styles = StyleSheet.create({ flexShrink: 1, display: 'flex', flexDirection: 'row', - flexWrap: 'wrap', alignItems: 'center', }, radioButtons: { diff --git a/app/client/mobile/src/settings/Settings.tsx b/app/client/mobile/src/settings/Settings.tsx index c90bfcfb..0dfb2df8 100644 --- a/app/client/mobile/src/settings/Settings.tsx +++ b/app/client/mobile/src/settings/Settings.tsx @@ -584,7 +584,7 @@ export function Settings({showLogout}: {showLogout: boolean}) { - {state.strings.timeFormat}: + {state.strings.timeFormat}: - {state.strings.dateFormat}: + {state.strings.dateFormat}: