martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-12 11:39:17 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fixing layout for profile

Browse Source
This commit is contained in:
balzack 2022-10-28 22:35:25 -07:00
parent 558a67a16d
commit fea84225ab
5 changed files with 42 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/mobile/src/session/Session.jsx
View File

@ -9,7 +9,7 @@ import Ionicons from '@expo/vector-icons/AntDesign';
import { useSession } from './useSession.hook'; import { useSession } from './useSession.hook';
import { styles } from './Session.styled'; import { styles } from './Session.styled';
import Colors from 'constants/Colors'; import Colors from 'constants/Colors';
import { ProfileTitle, Profile } from './profile/Profile'; import { Profile } from './profile/Profile';
import { CardsTitle, CardsBody, Cards } from './cards/Cards'; import { CardsTitle, CardsBody, Cards } from './cards/Cards';
import { useCards } from './cards/useCards.hook'; import { useCards } from './cards/useCards.hook';
import { RegistryTitle, RegistryBody, Registry } from './registry/Registry'; import { RegistryTitle, RegistryBody, Registry } from './registry/Registry';
@ -105,7 +105,7 @@ export function Session() {
const ProfileStackScreen = () => { const ProfileStackScreen = () => {
return ( return (
<ProfileStack.Navigator screenOptions={({ route }) => ({ headerShown: true, headerTintColor: Colors.primary })}> <ProfileStack.Navigator screenOptions={({ route }) => ({ headerShown: true, headerTintColor: Colors.primary })}>
<ProfileStack.Screen name="profile" component={Profile} options={{ headerStyle: { backgroundColor: Colors.titleBackground }, headerTitle: (props) => <ProfileTitle {...props} /> }} /> <ProfileStack.Screen name="profile" component={Profile} options={{ headerStyle: { backgroundColor: Colors.titleBackground }}} />
</ProfileStack.Navigator> </ProfileStack.Navigator>
); );
} }

43
app/mobile/src/session/profile/Profile.jsx
View File

@ -1,4 +1,4 @@
import { useContext } from 'react'; import { useEffect, useContext } from 'react';
import { KeyboardAvoidingView, Modal, Alert, TextInput, ScrollView, View, Switch, TouchableOpacity, Text } from 'react-native'; import { KeyboardAvoidingView, Modal, Alert, TextInput, ScrollView, View, Switch, TouchableOpacity, Text } from 'react-native';
import { styles } from './Profile.styled'; import { styles } from './Profile.styled';
import { useProfile } from './useProfile.hook'; import { useProfile } from './useProfile.hook';
@ -11,19 +11,27 @@ import { BlockedTopics } from './blockedTopics/BlockedTopics';
import { BlockedContacts } from './blockedContacts/BlockedContacts'; import { BlockedContacts } from './blockedContacts/BlockedContacts';
import { BlockedMessages } from './blockedMessages/BlockedMessages'; import { BlockedMessages } from './blockedMessages/BlockedMessages';
export function ProfileTitle(props) { export function Profile({ navigation }) {
const { state, actions } = useProfile();
return (
<View style={styles.title}>
<Text style={styles.titleText}>{ `${state.handle}@${state.node}` }</Text>
</View>
)
}
export function Profile() {
const { state, actions } = useProfile(); const { state, actions } = useProfile();
useEffect(() => {
if (navigation) {
navigation.setOptions({
headerTitle: () => (
<View style={styles.title}>
<Text style={styles.titleText}>{ `${state.handle}@${state.node}` }</Text>
</View>
),
headerRight: () => (
<TouchableOpacity style={styles.action} onPress={logout} onLongPress={actions.showDelete}>
<Ionicons name="logout" size={22} color={Colors.primary} />
</TouchableOpacity>
),
});
}
}, [navigation, state]);
const setVisible = async (visible) => { const setVisible = async (visible) => {
try { try {
await actions.setVisible(visible); await actions.setVisible(visible);
@ -181,14 +189,6 @@ export function Profile() {
<TouchableOpacity style={styles.link} onPress={actions.showBlockedMessages}> <TouchableOpacity style={styles.link} onPress={actions.showBlockedMessages}>
<Text style={styles.linkText}>Manage Blocked Messages</Text> <Text style={styles.linkText}>Manage Blocked Messages</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity style={styles.logout} onPress={logout}>
<Ionicons name="logout" size={14} color={Colors.white} />
<Text style={styles.logoutText}>Logout</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.delete} onPress={actions.showDelete}>
<Ionicons name="delete" size={14} color={Colors.white} />
<Text style={styles.deleteText}>Delete</Text>
</TouchableOpacity>
</View> </View>
); );
}; };
@ -203,7 +203,10 @@ export function Profile() {
{ !state.tabbed && ( { !state.tabbed && (
<SafeAreaView style={styles.drawer} edges={['top', 'bottom', 'right']}> <SafeAreaView style={styles.drawer} edges={['top', 'bottom', 'right']}>
<View style={styles.header}> <View style={styles.header}>
<Text style={styles.headerText}>{ `${state.handle}@${state.node}` }</Text> <Text style={styles.headerText} numberOfLines={1}>{ `${state.handle}@${state.node}` }</Text>
<TouchableOpacity onPress={logout} onLongPress={actions.showDelete}>
<Ionicons name="logout" size={16} color={Colors.grey} />
</TouchableOpacity>
</View> </View>
<Body /> <Body />
</SafeAreaView> </SafeAreaView>

16
app/mobile/src/session/profile/Profile.styled.js
View File

@ -15,12 +15,21 @@ export const styles = StyleSheet.create({
paddingTop: 16, paddingTop: 16,
backgroundColor: Colors.formBackground, backgroundColor: Colors.formBackground,
}, },
action: {
width: 64,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
titleText: { titleText: {
fontSize: 18, fontSize: 18,
overflow: 'hidden',
flexGrow: 1,
textAlign: 'center',
}, },
title: { title: {
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'row',
flexGrow: 1, flexGrow: 1,
flex: 1, flex: 1,
width: '100%', width: '100%',
@ -38,8 +47,9 @@ export const styles = StyleSheet.create({
justifyContent: 'center', justifyContent: 'center',
}, },
headerText: { headerText: {
fontSize: 16, paddingLeft: 16,
paddingRight: 4, fontSize: 14,
paddingRight: 8,
color: Colors.text, color: Colors.text,
}, },
camera: { camera: {

4
app/mobile/src/session/registry/Registry.jsx
View File

@ -54,9 +54,10 @@ export function RegistryTitle({ state, actions }) {
} }
export function RegistryBody({ state, actions, openContact }) { export function RegistryBody({ state, actions, openContact }) {
return ( return (
<View style={styles.accounts}> <View style={styles.accounts}>
{ state.accounts.length === 0 && state.searcheg && ( { state.accounts.length === 0 && state.searched && (
<View style={styles.empty}> <View style={styles.empty}>
<Text style={styles.emptyText}>No Contacts Found</Text> <Text style={styles.emptyText}>No Contacts Found</Text>
</View> </View>
@ -89,6 +90,7 @@ export function Registry({ closeRegistry, openContact }) {
} }
const { state, actions } = useRegistry(); const { state, actions } = useRegistry();
return ( return (
<View style={styles.container}> <View style={styles.container}>
{ state.tabbed && ( { state.tabbed && (

2
app/mobile/src/session/registry/Registry.styled.js
View File

@ -90,7 +90,7 @@ export const styles = StyleSheet.create({
}, },
emptyText: { emptyText: {
color: Colors.grey, color: Colors.grey,
fontSize: 16, fontSize: 18,
}, },
addbottom: { addbottom: {
marginRight: 8, marginRight: 8,