martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-12 03:29:16 +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 { styles } from './Session.styled';
import Colors from 'constants/Colors';
import { ProfileTitle, Profile } from './profile/Profile';
import { Profile } from './profile/Profile';
import { CardsTitle, CardsBody, Cards } from './cards/Cards';
import { useCards } from './cards/useCards.hook';
import { RegistryTitle, RegistryBody, Registry } from './registry/Registry';
@ -105,7 +105,7 @@ export function Session() {
const ProfileStackScreen = () => {
return (
<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>
);
}

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 { styles } from './Profile.styled';
import { useProfile } from './useProfile.hook';
@ -11,19 +11,27 @@ import { BlockedTopics } from './blockedTopics/BlockedTopics';
import { BlockedContacts } from './blockedContacts/BlockedContacts';
import { BlockedMessages } from './blockedMessages/BlockedMessages';
export function ProfileTitle(props) {
const { state, actions } = useProfile();
return (
<View style={styles.title}>
<Text style={styles.titleText}>{ `${state.handle}@${state.node}` }</Text>
</View>
)
}
export function Profile() {
export function Profile({ navigation }) {
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) => {
try {
await actions.setVisible(visible);
@ -181,14 +189,6 @@ export function Profile() {
<TouchableOpacity style={styles.link} onPress={actions.showBlockedMessages}>
<Text style={styles.linkText}>Manage Blocked Messages</Text>
</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>
);
};
@ -203,7 +203,10 @@ export function Profile() {
{ !state.tabbed && (
<SafeAreaView style={styles.drawer} edges={['top', 'bottom', 'right']}>
<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>
<Body />
</SafeAreaView>

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

@ -15,12 +15,21 @@ export const styles = StyleSheet.create({
paddingTop: 16,
backgroundColor: Colors.formBackground,
},
action: {
width: 64,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
titleText: {
fontSize: 18,
overflow: 'hidden',
flexGrow: 1,
textAlign: 'center',
},
title: {
display: 'flex',
flexDirection: 'column',
flexDirection: 'row',
flexGrow: 1,
flex: 1,
width: '100%',
@ -38,8 +47,9 @@ export const styles = StyleSheet.create({
justifyContent: 'center',
},
headerText: {
fontSize: 16,
paddingRight: 4,
paddingLeft: 16,
fontSize: 14,
paddingRight: 8,
color: Colors.text,
},
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 }) {
return (
<View style={styles.accounts}>
{ state.accounts.length === 0 && state.searcheg && (
{ state.accounts.length === 0 && state.searched && (
<View style={styles.empty}>
<Text style={styles.emptyText}>No Contacts Found</Text>
</View>
@ -89,6 +90,7 @@ export function Registry({ closeRegistry, openContact }) {
}
const { state, actions } = useRegistry();
return (
<View style={styles.container}>
{ state.tabbed && (

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

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