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

implementing refactored contact view for drawers

Browse Source
This commit is contained in:
balzack 2023-09-20 17:59:45 -07:00
parent 8c77245524
commit 7c9b811ca6
4 changed files with 291 additions and 317 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -301,7 +301,7 @@ function ContactDrawerScreen({ navParams }) {
<ContactDrawer.Navigator screenOptions={{ ...drawerParams, drawerStyle: { width: '44%' } }} drawerContent={(props) => ( <ContactDrawer.Navigator screenOptions={{ ...drawerParams, drawerStyle: { width: '44%' } }} drawerContent={(props) => (
<ScrollView style={styles.drawer}> <ScrollView style={styles.drawer}>
<SafeAreaView edges={['top', 'bottom', 'right']}> <SafeAreaView edges={['top', 'bottom', 'right']}>
<Contact contact={contact} /> <Contact contact={contact} drawer={true} back={props.navigation.goBack} />
</SafeAreaView> </SafeAreaView>
</ScrollView> </ScrollView>
)}> )}>

494
app/mobile/src/session/contact/Contact.jsx
View File

@ -11,299 +11,6 @@ import FntIcons from 'react-native-vector-icons/FontAwesome5';
import MatIcons from 'react-native-vector-icons/MaterialCommunityIcons'; import MatIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import MtrIcons from 'react-native-vector-icons/MaterialIcons'; import MtrIcons from 'react-native-vector-icons/MaterialIcons';
export function ContactHeader({ contact }) {
const handle = contact?.node ? `${contact?.handle}@${contact?.node}` : contact?.handle;
return (
<Text style={styles.headerText}>{ handle }</Text>
)
}
export function ContactBody({ contact }) {
const { state, actions } = useContact(contact);
const getStatusText = (status) => {
if (status === 'confirmed') {
return 'saved';
}
if (status === 'pending') {
return 'unknown contact request';
}
if (status === 'connecting') {
return 'request sent';
}
if (status === 'connected') {
return 'connected';
}
if (status === 'requested') {
return 'request received';
}
return 'unsaved';
}
const setContact = async (action) => {
try {
await action();
}
catch (err) {
console.log(err);
Alert.alert(
'Failed to Update Contact',
'Please try again.',
);
}
}
const cancelRequest = () => {
Alert.alert(
"Closing Request",
"Confirm?",
[
{ text: "Cancel",
onPress: () => {},
},
{ text: "Close", onPress: () => {
setContact(actions.disconnectContact);
}}
]
);
}
const disconnectContact = () => {
Alert.alert(
"Disconnecting Contact",
"Confirm?",
[
{ text: "Cancel",
onPress: () => {},
},
{ text: "Disconnect", onPress: () => {
setContact(actions.disconnectContact);
}}
]
);
}
const saveAndConnect = () => {
setContact(actions.saveAndConnect);
}
const confirmAndConnect = () => {
setContact(actions.confirmAndConnect);
}
const saveContact = () => {
setContact(actions.saveContact);
}
const confirmContact = () => {
setContact(actions.confirmContact);
}
const ignoreContact = () => {
setContact(actions.ignoreContact);
}
const deleteContact = () => {
Alert.alert(
"Deleting Contact",
"Confirm?",
[
{ text: "Cancel",
onPress: () => {},
},
{ text: "Delete", onPress: () => {
setContact(actions.deleteContact);
}}
]
);
}
const closeDelete = () => {
Alert.alert(
"Deleting Contact",
"Confirm?",
[
{ text: "Cancel",
onPress: () => {},
},
{ text: "Delete", onPress: () => {
setContact(actions.closeDelete);
}}
]
);
}
const blockContact = () => {
Alert.alert(
"Blocking Contact",
"Confirm?",
[
{ text: "Cancel",
onPress: () => {},
},
{ text: "Block", onPress: () => {
setContact(actions.blockContact);
}}
]
);
}
const reportContact = () => {
Alert.alert(
"Report Contact",
"Confirm?",
[
{ text: "Cancel",
onPress: () => {},
},
{ text: "Report", onPress: () => {
setContact(actions.reportContact);
}}
]
);
}
const connectContact = () => {
setContact(actions.connectContact);
}
return (
<View style={styles.container}>
<Text style={styles.status}>{ `[${getStatusText(state.status)}]` }</Text>
<View style={{ width: 128 }}>
<Logo src={state.logo} width={128} height={128} radius={8} />
</View>
<View style={styles.detail}>
<View style={styles.attribute}>
<Text style={styles.nametext}>{ state.name }</Text>
</View>
<View style={styles.attribute}>
<View style={styles.glyph}>
<Ionicons name="enviromento" size={14} color={Colors.text} />
</View>
<Text style={styles.locationtext}>{ state.location }</Text>
</View>
<View style={styles.attribute}>
<View style={styles.glyph}>
<Ionicons name="book" size={14} color={Colors.text} />
</View>
<Text style={styles.descriptiontext}>{ state.description }</Text>
</View>
</View>
<View style={styles.controls}>
{ state.status === 'connected' && (
<>
<TouchableOpacity style={styles.button} onPress={disconnectContact}>
<Text style={styles.buttonText}>Disconnect</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={closeDelete}>
<Text style={styles.buttonText}>Delete Contact</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={blockContact}>
<Text style={styles.buttonText}>Block Contact</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={reportContact}>
<Text style={styles.buttonText}>Report Contact</Text>
</TouchableOpacity>
{ state.offsync && (
<TouchableOpacity style={styles.alert} onPress={actions.resync}>
<Text>Resync Contact</Text>
</TouchableOpacity>
)}
</>
)}
{ state.status === 'connecting' && (
<>
<TouchableOpacity style={styles.button} onPress={cancelRequest}>
<Text style={styles.buttonText}>Close Request</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={closeDelete}>
<Text style={styles.buttonText}>Delete Contact</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={blockContact}>
<Text style={styles.buttonText}>Block Contact</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={reportContact}>
<Text style={styles.buttonText}>Report Contact</Text>
</TouchableOpacity>
</>
)}
{ state.status === 'confirmed' && (
<>
<TouchableOpacity style={styles.button} onPress={connectContact}>
<Text style={styles.buttonText}>Request Connection</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={deleteContact}>
<Text style={styles.buttonText}>Delete Contact</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={blockContact}>
<Text style={styles.buttonText}>Block Contact</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={reportContact}>
<Text style={styles.buttonText}>Report Contact</Text>
</TouchableOpacity>
</>
)}
{ state.status === 'pending' && (
<>
<TouchableOpacity style={styles.button} onPress={confirmAndConnect}>
<Text style={styles.buttonText}>Save and Connect</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={confirmContact}>
<Text style={styles.buttonText}>Save Contact</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={deleteContact}>
<Text style={styles.buttonText}>Ignore Request</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={blockContact}>
<Text style={styles.buttonText}>Block Contact</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={reportContact}>
<Text style={styles.buttonText}>Report Contact</Text>
</TouchableOpacity>
</>
)}
{ state.status === 'requested' && (
<>
<TouchableOpacity style={styles.button} onPress={connectContact}>
<Text style={styles.buttonText}>Accept Connection</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={ignoreContact}>
<Text style={styles.buttonText}>Ignore Request</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={disconnectContact}>
<Text style={styles.buttonText}>Deny Request</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={deleteContact}>
<Text style={styles.buttonText}>Delete Contact</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={blockContact}>
<Text style={styles.buttonText}>Block Contact</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={reportContact}>
<Text style={styles.buttonText}>Report Contact</Text>
</TouchableOpacity>
</>
)}
{ state.status == null && (
<>
<TouchableOpacity style={styles.button} onPress={saveAndConnect}>
<Text style={styles.buttonText}>Save and Connect</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={saveContact}>
<Text style={styles.buttonText}>Save Contact</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={reportContact}>
<Text style={styles.buttonText}>Report Contact</Text>
</TouchableOpacity>
</>
)}
</View>
</View>
);
}
export function Contact({ contact, drawer, back }) { export function Contact({ contact, drawer, back }) {
const [busy, setBusy] = useState(false); const [busy, setBusy] = useState(false);
@ -353,7 +60,176 @@ export function Contact({ contact, drawer, back }) {
return ( return (
<> <>
{ drawer && ( { drawer && (
<Text>CONTACT DRAWER</Text> <View style={styles.drawerContainer}>
<Text style={styles.drawerHeader} adjustsFontSizeToFit={true} numberOfLines={1}>{ state.username }</Text>
<View style={styles.drawerFrame}>
<Image source={state.imageSource} style={styles.drawerLogo} resizeMode={'contain'} />
</View>
<View style={styles.drawerStatus}>
{ state.status === 'offsync' && (
<View style={styles.statusOffsync}>
<Text numberOfLines={1} style={styles.statusLabel}>{ state.strings.offsync }</Text>
</View>
)}
{ state.status === 'connected' && (
<View style={styles.statusConnected}>
<Text numberOfLines={1} style={styles.statusLabel}>{ state.strings.connected }</Text>
</View>
)}
{ state.status === 'connecting' && (
<View style={styles.statusConnecting}>
<Text numberOfLines={1} style={styles.statusLabel}>{ state.strings.connecting }</Text>
</View>
)}
{ state.status === 'requested' && (
<View style={styles.statusRequested}>
<Text numberOfLines={1} style={styles.statusLabel}>{ state.strings.requested }</Text>
</View>
)}
{ state.status === 'received' && (
<View style={styles.statusReceived}>
<Text numberOfLines={1} style={styles.statusLabel}>{ state.strings.received }</Text>
</View>
)}
{ state.status === 'pending' && (
<View style={styles.statusPending}>
<Text numberOfLines={1} style={styles.statusLabel}>{ state.strings.pending }</Text>
</View>
)}
{ state.status === 'confirmed' && (
<View style={styles.statusConfirmed}>
<Text numberOfLines={1} style={styles.statusLabel}>{ state.strings.confirmed }</Text>
</View>
)}
{ state.status === 'unsaved' && (
<View style={styles.statusUnsaved}>
<Text numberOfLines={1} style={styles.statusLabel}>{ state.strings.unsaved }</Text>
</View>
)}
</View>
<View style={styles.drawerName}>
{ state.name && (
<Text style={styles.drawerNameSet} numberOfLines={1} adjustsFontSizeToFit={true}>{ state.name }</Text>
)}
{ !state.name && (
<Text style={styles.drawerNameUnset}>{ state.strings.name }</Text>
)}
</View>
<View style={styles.drawerEntry}>
<AntIcons name="enviromento" style={styles.drawerIcon} size={20} color={Colors.text} />
{ state.location && (
<Text style={styles.locationSet}>{ state.location }</Text>
)}
{ !state.location && (
<Text style={styles.locationUnset}>Location</Text>
)}
</View>
<View style={styles.drawerEntry}>
<MatIcons name="book-open-outline" style={styles.drawerDescriptionIcon} size={20} color={Colors.text} />
{ state.description && (
<Text style={styles.descriptionSet}>{ state.description }</Text>
)}
{ !state.description && (
<Text style={styles.descriptionUnset}>Description</Text>
)}
</View>
<View style={styles.drawerDivider} />
{ busy && (
<ActivityIndicator animating={true} color={Colors.text} size={'large'} />
)}
{ !busy && (
<View style={styles.drawerActions}>
{ state.status === 'offsync' && (
<TouchableOpacity style={styles.action} activeOpacity={1} onPress={actions.resync}>
<MatIcons name="sync" style={styles.actionIcon} size={44} color={Colors.linkText} />
<Text style={styles.actionLabel}>{ state.strings.actionResync }</Text>
</TouchableOpacity>
)}
{ state.status === 'unsaved' && (
<TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => setAction(actions.saveAndConnect)}>
<FntIcons name="people-arrows" style={{ ...styles.actionIcon, paddingBottom: 8 }} size={32} color={Colors.linkText} />
<Text style={styles.actionLabel}>{ state.strings.actionConnect }</Text>
</TouchableOpacity>
)}
{ state.status === 'confirmed' && (
<TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => setAction(actions.connectContact)}>
<FntIcons name="people-arrows" style={{ ...styles.actionIcon, paddingBottom: 8 }} size={32} color={Colors.linkText} />
<Text style={styles.actionLabel}>{ state.strings.actionConnect }</Text>
</TouchableOpacity>
)}
{ state.status === 'received' && (
<TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => setAction(actions.connectContact)}>
<MatIcons name="account-check-outline" style={{ ...styles.actionIcon, paddingBottom: 2 }} size={42} color={Colors.linkText} />
<Text style={styles.actionLabel}>{ state.strings.actionAccept }</Text>
</TouchableOpacity>
)}
{ state.status === 'pending' && (
<TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => setAction(actions.confirmAndConnect)}>
<MatIcons name="account-check-outline" style={{ ...styles.actionIcon, paddingBottom: 2 }} size={42} color={Colors.linkText} />
<Text style={styles.actionLabel}>{ state.strings.actionAccept }</Text>
</TouchableOpacity>
)}
{ state.status === 'received' && (
<TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => setAction(actions.disconnectContact)}>
<MatIcons name="account-remove-outline" style={{ ...styles.actionIcon, paddingBottom: 2 }} size={42} color={Colors.linkText} />
<Text style={styles.actionLabel}>{ state.strings.actionIgnore }</Text>
</TouchableOpacity>
)}
{ state.status === 'pending' && (
<TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => setAction(actions.ignoreContact)}>
<MatIcons name="account-remove-outline" style={{ ...styles.actionIcon, paddingBottom: 2 }} size={42} color={Colors.linkText} />
<Text style={styles.actionLabel}>{ state.strings.actionIgnore }</Text>
</TouchableOpacity>
)}
{ state.status === 'connected' && (
<TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => promptAction(actions.disconnectPrompt, actions.disconnectContact)}>
<MatIcons name="account-cancel-outline" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={42} color={Colors.linkText} />
<Text style={styles.actionLabel}>{ state.strings.actionDisconnect }</Text>
</TouchableOpacity>
)}
{ state.status === 'connecting' && (
<TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => setAction(actions.disconnectContact)}>
<MtrIcons name="cancel-schedule-send" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={40} color={Colors.linkText} />
<Text style={styles.actionLabel}>{ state.strings.actionCancel }</Text>
</TouchableOpacity>
)}
{ state.status === 'pending' && (
<TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => setAction(actions.confirmContact)}>
<IonIcons name="save-outline" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={38} color={Colors.linkText} />
<Text style={styles.actionLabel}>{ state.strings.actionSave }</Text>
</TouchableOpacity>
)}
{ state.status === 'unsaved' && (
<TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => setAction(actions.saveContact)}>
<IonIcons name="save-outline" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={38} color={Colors.linkText} />
<Text style={styles.actionLabel}>{ state.strings.actionSave }</Text>
</TouchableOpacity>
)}
{ (state.status === 'connected' || state.status === 'connecting' || state.status === 'received') && (
<TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => promptAction(actions.deletePrompt, actions.closeDelete)}>
<MatIcons name="trash-can-outline" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={40} color={Colors.linkText} />
<Text style={styles.actionLabel}>{ state.strings.actionDelete }</Text>
</TouchableOpacity>
)}
{ state.status === 'confirmed' && (
<TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => promptAction(actions.deletePrompt, actions.deleteContact)}>
<MatIcons name="trash-can-outline" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={40} color={Colors.linkText} />
<Text style={styles.actionLabel}>{ state.strings.actionDelete }</Text>
</TouchableOpacity>
)}
{ state.status !== 'unsaved' && state.status !== 'pending' && (
<TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => promptAction(actions.blockPrompt, actions.blockContact)}>
<MatIcons name="block-helper" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={34} color={Colors.linkText} />
<Text style={styles.actionLabel}>{ state.strings.actionBlock }</Text>
</TouchableOpacity>
)}
<TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => promptAction(actions.reportPrompt, actions.reportContact)}>
<MatIcons name="account-alert-outline" style={{ ...styles.actionIcon, paddingBottom: 2 }} size={40} color={Colors.linkText} />
<Text style={styles.actionLabel}>{ state.strings.actionReport }</Text>
</TouchableOpacity>
</View>
)}
</View>
)} )}
{ !drawer && ( { !drawer && (
<View style={styles.container}> <View style={styles.container}>
@ -450,90 +326,90 @@ export function Contact({ contact, drawer, back }) {
<ScrollView horizontal={true} contentContainerStyle={styles.actionList}> <ScrollView horizontal={true} contentContainerStyle={styles.actionList}>
{ state.status === 'offsync' && ( { state.status === 'offsync' && (
<TouchableOpacity style={styles.action} activeOpacity={1} onPress={actions.resync}> <TouchableOpacity style={styles.action} activeOpacity={1} onPress={actions.resync}>
<MatIcons name="sync" style={styles.actionIcon} size={44} color={Colors.linkText} /> <MatIcons name="sync" style={styles.actionIcon} size={40} color={Colors.linkText} />
<Text style={styles.actionLabel}>{ state.strings.actionResync }</Text> <Text style={styles.actionLabel}>{ state.strings.actionResync }</Text>
</TouchableOpacity> </TouchableOpacity>
)} )}
{ state.status === 'unsaved' && ( { state.status === 'unsaved' && (
<TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => setAction(actions.saveAndConnect)}> <TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => setAction(actions.saveAndConnect)}>
<FntIcons name="people-arrows" style={{ ...styles.actionIcon, paddingBottom: 8 }} size={32} color={Colors.linkText} /> <FntIcons name="people-arrows" style={{ ...styles.actionIcon, paddingBottom: 8 }} size={28} color={Colors.linkText} />
<Text style={styles.actionLabel}>{ state.strings.actionConnect }</Text> <Text style={styles.actionLabel}>{ state.strings.actionConnect }</Text>
</TouchableOpacity> </TouchableOpacity>
)} )}
{ state.status === 'confirmed' && ( { state.status === 'confirmed' && (
<TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => setAction(actions.connectContact)}> <TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => setAction(actions.connectContact)}>
<FntIcons name="people-arrows" style={{ ...styles.actionIcon, paddingBottom: 8 }} size={32} color={Colors.linkText} /> <FntIcons name="people-arrows" style={{ ...styles.actionIcon, paddingBottom: 8 }} size={28} color={Colors.linkText} />
<Text style={styles.actionLabel}>{ state.strings.actionConnect }</Text> <Text style={styles.actionLabel}>{ state.strings.actionConnect }</Text>
</TouchableOpacity> </TouchableOpacity>
)} )}
{ state.status === 'received' && ( { state.status === 'received' && (
<TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => setAction(actions.connectContact)}> <TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => setAction(actions.connectContact)}>
<MatIcons name="account-check-outline" style={{ ...styles.actionIcon, paddingBottom: 2 }} size={42} color={Colors.linkText} /> <MatIcons name="account-check-outline" style={{ ...styles.actionIcon, paddingBottom: 2 }} size={38} color={Colors.linkText} />
<Text style={styles.actionLabel}>{ state.strings.actionAccept }</Text> <Text style={styles.actionLabel}>{ state.strings.actionAccept }</Text>
</TouchableOpacity> </TouchableOpacity>
)} )}
{ state.status === 'pending' && ( { state.status === 'pending' && (
<TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => setAction(actions.confirmAndConnect)}> <TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => setAction(actions.confirmAndConnect)}>
<MatIcons name="account-check-outline" style={{ ...styles.actionIcon, paddingBottom: 2 }} size={42} color={Colors.linkText} /> <MatIcons name="account-check-outline" style={{ ...styles.actionIcon, paddingBottom: 2 }} size={38} color={Colors.linkText} />
<Text style={styles.actionLabel}>{ state.strings.actionAccept }</Text> <Text style={styles.actionLabel}>{ state.strings.actionAccept }</Text>
</TouchableOpacity> </TouchableOpacity>
)} )}
{ state.status === 'received' && ( { state.status === 'received' && (
<TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => setAction(actions.disconnectContact)}> <TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => setAction(actions.disconnectContact)}>
<MatIcons name="account-remove-outline" style={{ ...styles.actionIcon, paddingBottom: 2 }} size={42} color={Colors.linkText} /> <MatIcons name="account-remove-outline" style={{ ...styles.actionIcon, paddingBottom: 2 }} size={38} color={Colors.linkText} />
<Text style={styles.actionLabel}>{ state.strings.actionIgnore }</Text> <Text style={styles.actionLabel}>{ state.strings.actionIgnore }</Text>
</TouchableOpacity> </TouchableOpacity>
)} )}
{ state.status === 'pending' && ( { state.status === 'pending' && (
<TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => setAction(actions.ignoreContact)}> <TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => setAction(actions.ignoreContact)}>
<MatIcons name="account-remove-outline" style={{ ...styles.actionIcon, paddingBottom: 2 }} size={42} color={Colors.linkText} /> <MatIcons name="account-remove-outline" style={{ ...styles.actionIcon, paddingBottom: 2 }} size={38} color={Colors.linkText} />
<Text style={styles.actionLabel}>{ state.strings.actionIgnore }</Text> <Text style={styles.actionLabel}>{ state.strings.actionIgnore }</Text>
</TouchableOpacity> </TouchableOpacity>
)} )}
{ state.status === 'connected' && ( { state.status === 'connected' && (
<TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => promptAction(actions.disconnectPrompt, actions.disconnectContact)}> <TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => promptAction(actions.disconnectPrompt, actions.disconnectContact)}>
<MatIcons name="account-cancel-outline" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={42} color={Colors.linkText} /> <MatIcons name="account-cancel-outline" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={38} color={Colors.linkText} />
<Text style={styles.actionLabel}>{ state.strings.actionDisconnect }</Text> <Text style={styles.actionLabel}>{ state.strings.actionDisconnect }</Text>
</TouchableOpacity> </TouchableOpacity>
)} )}
{ state.status === 'connecting' && ( { state.status === 'connecting' && (
<TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => setAction(actions.disconnectContact)}> <TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => setAction(actions.disconnectContact)}>
<MtrIcons name="cancel-schedule-send" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={40} color={Colors.linkText} /> <MtrIcons name="cancel-schedule-send" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={36} color={Colors.linkText} />
<Text style={styles.actionLabel}>{ state.strings.actionCancel }</Text> <Text style={styles.actionLabel}>{ state.strings.actionCancel }</Text>
</TouchableOpacity> </TouchableOpacity>
)} )}
{ state.status === 'pending' && ( { state.status === 'pending' && (
<TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => setAction(actions.confirmContact)}> <TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => setAction(actions.confirmContact)}>
<IonIcons name="save-outline" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={38} color={Colors.linkText} /> <IonIcons name="save-outline" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={34} color={Colors.linkText} />
<Text style={styles.actionLabel}>{ state.strings.actionSave }</Text> <Text style={styles.actionLabel}>{ state.strings.actionSave }</Text>
</TouchableOpacity> </TouchableOpacity>
)} )}
{ state.status === 'unsaved' && ( { state.status === 'unsaved' && (
<TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => setAction(actions.saveContact)}> <TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => setAction(actions.saveContact)}>
<IonIcons name="save-outline" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={38} color={Colors.linkText} /> <IonIcons name="save-outline" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={34} color={Colors.linkText} />
<Text style={styles.actionLabel}>{ state.strings.actionSave }</Text> <Text style={styles.actionLabel}>{ state.strings.actionSave }</Text>
</TouchableOpacity> </TouchableOpacity>
)} )}
{ (state.status === 'connected' || state.status === 'connecting' || state.status === 'received') && ( { (state.status === 'connected' || state.status === 'connecting' || state.status === 'received') && (
<TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => promptAction(actions.deletePrompt, actions.closeDelete)}> <TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => promptAction(actions.deletePrompt, actions.closeDelete)}>
<MatIcons name="trash-can-outline" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={40} color={Colors.linkText} /> <MatIcons name="trash-can-outline" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={36} color={Colors.linkText} />
<Text style={styles.actionLabel}>{ state.strings.actionDelete }</Text> <Text style={styles.actionLabel}>{ state.strings.actionDelete }</Text>
</TouchableOpacity> </TouchableOpacity>
)} )}
{ state.status === 'confirmed' && ( { state.status === 'confirmed' && (
<TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => promptAction(actions.deletePrompt, actions.deleteContact)}> <TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => promptAction(actions.deletePrompt, actions.deleteContact)}>
<MatIcons name="trash-can-outline" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={40} color={Colors.linkText} /> <MatIcons name="trash-can-outline" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={36} color={Colors.linkText} />
<Text style={styles.actionLabel}>{ state.strings.actionDelete }</Text> <Text style={styles.actionLabel}>{ state.strings.actionDelete }</Text>
</TouchableOpacity> </TouchableOpacity>
)} )}
{ state.status !== 'unsaved' && state.status !== 'pending' && ( { state.status !== 'unsaved' && state.status !== 'pending' && (
<TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => promptAction(actions.blockPrompt, actions.blockContact)}> <TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => promptAction(actions.blockPrompt, actions.blockContact)}>
<MatIcons name="block-helper" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={34} color={Colors.linkText} /> <MatIcons name="block-helper" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={30} color={Colors.linkText} />
<Text style={styles.actionLabel}>{ state.strings.actionBlock }</Text> <Text style={styles.actionLabel}>{ state.strings.actionBlock }</Text>
</TouchableOpacity> </TouchableOpacity>
)} )}
<TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => promptAction(actions.reportPrompt, actions.reportContact)}> <TouchableOpacity style={styles.action} activeOpacity={1} onPress={() => promptAction(actions.reportPrompt, actions.reportContact)}>
<MatIcons name="account-alert-outline" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={40} color={Colors.linkText} /> <MatIcons name="account-alert-outline" style={{ ...styles.actionIcon, paddingBottom: 2 }} size={36} color={Colors.linkText} />
<Text style={styles.actionLabel}>{ state.strings.actionReport }</Text> <Text style={styles.actionLabel}>{ state.strings.actionReport }</Text>
</TouchableOpacity> </TouchableOpacity>
</ScrollView> </ScrollView>

106
app/mobile/src/session/contact/Contact.styled.js
View File

@ -2,6 +2,102 @@ import { StyleSheet } from 'react-native';
import { Colors } from 'constants/Colors'; import { Colors } from 'constants/Colors';
export const styles = StyleSheet.create({ export const styles = StyleSheet.create({
drawerContainer: {
width: '100%',
display: 'flex',
alignItems: 'center',
},
drawerHeader: {
fontFamily: 'roboto',
color: Colors.text,
fontSize: 20,
padding: 16,
},
drawerFrame: {
width: '80%',
maxWidth: 400,
paddingBottom: 32,
},
drawerLogo: {
aspectRatio: 1,
resizeMode: 'contain',
borderRadius: 8,
width: null,
height: null,
},
drawerLogoEdit: {
position: 'absolute',
top: 0,
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
alignSelf: 'center',
backgroundColor: Colors.drawerBase,
paddingLeft: 8,
paddingRight: 8,
borderBottomLeftRadius: 6,
borderBottomRightRadius: 6,
},
drawerEditDivider: {
width: '80%',
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
},
drawerLine: {
borderWidth: 1,
borderColor: Colors.areaBase,
flexGrow: 1,
},
drawerDivider: {
width: '80%',
borderWidth: 1,
borderColor: Colors.areaBase,
marginTop: 16,
marginBottom: 32,
},
drawerName: {
width: '80%',
paddingLeft: 8,
paddingRight: 8,
},
drawerNameSet: {
color: Colors.text,
fontFamily: 'roboto',
fontSize: 48,
flexGrow: 1,
flexShrink: 1,
},
drawerNameUnset: {
color: Colors.inputPlaceholder,
fontFamily: 'roboto',
fontSize: 48,
fontStyle: 'italic',
flexGrow: 1,
},
drawerNameEdit: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
paddingLeft: 8,
paddingRight: 8,
},
drawerEntry: {
width: '80%',
display: 'flex',
alignItems: 'center',
flexDirection: 'row',
padding: 8,
},
drawerActions: {
display: 'flex',
flexDirection: 'row',
alignItems: 'flex-end',
justifyContent: 'center',
},
drawerStatus: {
paddingBottom: 8,
},
container: { container: {
width: '100%', width: '100%',
height: '100%', height: '100%',
@ -150,7 +246,7 @@ export const styles = StyleSheet.create({
borderRadius: 8, borderRadius: 8,
backgroundColor: Colors.unsaved, backgroundColor: Colors.unsaved,
}, },
statusOffysnc: { statusOffsync: {
paddingLeft: 8, paddingLeft: 8,
paddingRight: 8, paddingRight: 8,
paddingTop: 2, paddingTop: 2,
@ -160,6 +256,7 @@ export const styles = StyleSheet.create({
}, },
statusLabel: { statusLabel: {
color: Colors.text, color: Colors.text,
fontSize: 16,
}, },
attributes: { attributes: {
marginLeft: 16, marginLeft: 16,
@ -173,12 +270,12 @@ export const styles = StyleSheet.create({
actions: { actions: {
marginLeft: 16, marginLeft: 16,
marginRight: 16, marginRight: 16,
paddingLeft: 16, paddingLeft: 4,
paddingRight: 16, paddingRight: 16,
backgroundColor: Colors.areaBase, backgroundColor: Colors.areaBase,
borderRadius: 8, borderRadius: 8,
marginTop: 24, marginTop: 24,
height: 80, height: 72,
}, },
actionList: { actionList: {
alignItems: 'flex-end', alignItems: 'flex-end',
@ -186,7 +283,8 @@ export const styles = StyleSheet.create({
action: { action: {
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
paddingRight: 24, paddingRight: 12,
paddingLeft: 12,
paddingBottom: 12, paddingBottom: 12,
}, },
actionIcon: { actionIcon: {

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

@ -74,7 +74,7 @@ export function Profile({ drawer }) {
<> <>
{ drawer && ( { drawer && (
<View style={styles.drawerContainer}> <View style={styles.drawerContainer}>
<Text style={styles.drawerHeader} adjustsFontSizeToFit={true}>{ state.username }</Text> <Text style={styles.drawerHeader} adjustsFontSizeToFit={true} numberOfLines={1}>{ state.username }</Text>
<View style={styles.drawerFrame}> <View style={styles.drawerFrame}>
<Image source={state.imageSource} style={styles.drawerLogo} resizeMode={'contain'} /> <Image source={state.imageSource} style={styles.drawerLogo} resizeMode={'contain'} />
<TouchableOpacity activeOpacity={1} style={styles.drawerLogoEdit} onPress={onGallery}> <TouchableOpacity activeOpacity={1} style={styles.drawerLogoEdit} onPress={onGallery}>
@ -120,8 +120,8 @@ export function Profile({ drawer }) {
<TouchableOpacity activeOpacity={1} onPress={() => setVisible(!state.searchable)}> <TouchableOpacity activeOpacity={1} onPress={() => setVisible(!state.searchable)}>
<Text style={styles.visibleLabel}>{ state.strings.visibleRegistry }</Text> <Text style={styles.visibleLabel}>{ state.strings.visibleRegistry }</Text>
</TouchableOpacity> </TouchableOpacity>
<Switch value={state.searchable} style={Platform.OS==='ios' ? styles.visibleSwitch : {}} thumbColor={Colors.sliderGrip} ios_backgroundColor={Colors.disabledIndicator} <Switch value={state.searchable} style={Platform.OS==='ios' ? styles.visibleSwitch : {}} thumbColor={Colors.sliderGrip}
trackColor={styles.track} onValueChange={setVisible} /> ios_backgroundColor={Colors.disabledIndicator} trackColor={styles.track} onValueChange={setVisible} />
</TouchableOpacity> </TouchableOpacity>
</View> </View>
)} )}