mirror of
https://github.com/balzack/databag.git
synced 2025-02-11 19:19:16 +00:00
implementing refactored contact view for drawers
This commit is contained in:
balzack
parent
8c77245524
commit
7c9b811ca6
@ -301,7 +301,7 @@ function ContactDrawerScreen({ navParams }) {
|
||||
<ContactDrawer.Navigator screenOptions={{ ...drawerParams, drawerStyle: { width: '44%' } }} drawerContent={(props) => (
|
||||
<ScrollView style={styles.drawer}>
|
||||
<SafeAreaView edges={['top', 'bottom', 'right']}>
|
||||
<Contact contact={contact} />
|
||||
<Contact contact={contact} drawer={true} back={props.navigation.goBack} />
|
||||
</SafeAreaView>
|
||||
</ScrollView>
|
||||
)}>
|
||||
|
||||
@ -11,299 +11,6 @@ import FntIcons from 'react-native-vector-icons/FontAwesome5';
|
||||
import MatIcons from 'react-native-vector-icons/MaterialCommunityIcons';
|
||||
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 }) {
|
||||
|
||||
const [busy, setBusy] = useState(false);
|
||||
@ -353,7 +60,176 @@ export function Contact({ contact, drawer, back }) {
|
||||
return (
|
||||
<>
|
||||
{ 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 && (
|
||||
<View style={styles.container}>
|
||||
@ -450,90 +326,90 @@ export function Contact({ contact, drawer, back }) {
|
||||
<ScrollView horizontal={true} contentContainerStyle={styles.actionList}>
|
||||
{ state.status === 'offsync' && (
|
||||
<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>
|
||||
</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} />
|
||||
<FntIcons name="people-arrows" style={{ ...styles.actionIcon, paddingBottom: 8 }} size={28} 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} />
|
||||
<FntIcons name="people-arrows" style={{ ...styles.actionIcon, paddingBottom: 8 }} size={28} 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} />
|
||||
<MatIcons name="account-check-outline" style={{ ...styles.actionIcon, paddingBottom: 2 }} size={38} 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} />
|
||||
<MatIcons name="account-check-outline" style={{ ...styles.actionIcon, paddingBottom: 2 }} size={38} 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} />
|
||||
<MatIcons name="account-remove-outline" style={{ ...styles.actionIcon, paddingBottom: 2 }} size={38} 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} />
|
||||
<MatIcons name="account-remove-outline" style={{ ...styles.actionIcon, paddingBottom: 2 }} size={38} 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} />
|
||||
<MatIcons name="account-cancel-outline" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={38} 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} />
|
||||
<MtrIcons name="cancel-schedule-send" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={36} 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} />
|
||||
<IonIcons name="save-outline" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={34} 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} />
|
||||
<IonIcons name="save-outline" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={34} 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} />
|
||||
<MatIcons name="trash-can-outline" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={36} 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} />
|
||||
<MatIcons name="trash-can-outline" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={36} 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} />
|
||||
<MatIcons name="block-helper" style={{ ...styles.actionIcon, paddingBottom: 4 }} size={30} 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: 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>
|
||||
</TouchableOpacity>
|
||||
</ScrollView>
|
||||
|
||||
@ -2,6 +2,102 @@ import { StyleSheet } from 'react-native';
|
||||
import { Colors } from 'constants/Colors';
|
||||
|
||||
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: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
@ -150,7 +246,7 @@ export const styles = StyleSheet.create({
|
||||
borderRadius: 8,
|
||||
backgroundColor: Colors.unsaved,
|
||||
},
|
||||
statusOffysnc: {
|
||||
statusOffsync: {
|
||||
paddingLeft: 8,
|
||||
paddingRight: 8,
|
||||
paddingTop: 2,
|
||||
@ -160,6 +256,7 @@ export const styles = StyleSheet.create({
|
||||
},
|
||||
statusLabel: {
|
||||
color: Colors.text,
|
||||
fontSize: 16,
|
||||
},
|
||||
attributes: {
|
||||
marginLeft: 16,
|
||||
@ -173,12 +270,12 @@ export const styles = StyleSheet.create({
|
||||
actions: {
|
||||
marginLeft: 16,
|
||||
marginRight: 16,
|
||||
paddingLeft: 16,
|
||||
paddingLeft: 4,
|
||||
paddingRight: 16,
|
||||
backgroundColor: Colors.areaBase,
|
||||
borderRadius: 8,
|
||||
marginTop: 24,
|
||||
height: 80,
|
||||
height: 72,
|
||||
},
|
||||
actionList: {
|
||||
alignItems: 'flex-end',
|
||||
@ -186,7 +283,8 @@ export const styles = StyleSheet.create({
|
||||
action: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
paddingRight: 24,
|
||||
paddingRight: 12,
|
||||
paddingLeft: 12,
|
||||
paddingBottom: 12,
|
||||
},
|
||||
actionIcon: {
|
||||
|
||||
@ -74,7 +74,7 @@ export function Profile({ drawer }) {
|
||||
<>
|
||||
{ drawer && (
|
||||
<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}>
|
||||
<Image source={state.imageSource} style={styles.drawerLogo} resizeMode={'contain'} />
|
||||
<TouchableOpacity activeOpacity={1} style={styles.drawerLogoEdit} onPress={onGallery}>
|
||||
@ -120,8 +120,8 @@ export function Profile({ drawer }) {
|
||||
<TouchableOpacity activeOpacity={1} onPress={() => setVisible(!state.searchable)}>
|
||||
<Text style={styles.visibleLabel}>{ state.strings.visibleRegistry }</Text>
|
||||
</TouchableOpacity>
|
||||
<Switch value={state.searchable} style={Platform.OS==='ios' ? styles.visibleSwitch : {}} thumbColor={Colors.sliderGrip} ios_backgroundColor={Colors.disabledIndicator}
|
||||
trackColor={styles.track} onValueChange={setVisible} />
|
||||
<Switch value={state.searchable} style={Platform.OS==='ios' ? styles.visibleSwitch : {}} thumbColor={Colors.sliderGrip}
|
||||
ios_backgroundColor={Colors.disabledIndicator} trackColor={styles.track} onValueChange={setVisible} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user