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

avoid keyboard in settings modals

Browse Source
This commit is contained in:
balzack 2023-09-12 23:45:19 -07:00
parent 8c1eb824e7
commit e1351459fb
5 changed files with 224 additions and 219 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -143,7 +143,7 @@ export function Profile() {
supportedOrientations={['portrait', 'landscape']} supportedOrientations={['portrait', 'landscape']}
onRequestClose={actions.hideDetails} onRequestClose={actions.hideDetails}
> >
<KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'}> <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
<BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black"> <BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black">
<View style={styles.modalContainer}> <View style={styles.modalContainer}>
<View style={styles.modalClose}> <View style={styles.modalClose}>

2
app/mobile/src/session/profile/useProfile.hook.js
View File

@ -37,7 +37,7 @@ export function useProfile() {
updateState({ imageWidth: width, imageHeight: width, detailWidth: width + 2 }); updateState({ imageWidth: width, imageHeight: width, detailWidth: width + 2 });
} }
else { else {
updateState({ imageWidth: height, imageHeight, detailWidth: width + 2 }); updateState({ imageWidth: height, imageHeight: height, detailWidth: width + 2 });
} }
}, [dimensions]); }, [dimensions]);

436
app/mobile/src/session/settings/Settings.jsx
View File

@ -331,172 +331,174 @@ export function Settings() {
supportedOrientations={['portrait', 'landscape']} supportedOrientations={['portrait', 'landscape']}
onRequestClose={actions.hideEditSeal} onRequestClose={actions.hideEditSeal}
> >
<BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black"> <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
<View style={styles.modalContainer}> <BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black">
<View style={styles.modalClose}> <View style={styles.modalContainer}>
<TouchableOpacity style={styles.dismissButton} activeOpacity={1} onPress={actions.hideEditSeal}> <View style={styles.modalClose}>
<MatIcons name="close" size={20} color={Colors.descriptionText} /> <TouchableOpacity style={styles.dismissButton} activeOpacity={1} onPress={actions.hideEditSeal}>
</TouchableOpacity> <MatIcons name="close" size={20} color={Colors.descriptionText} />
</TouchableOpacity>
</View>
<Text style={styles.modalHeader}>{ state.strings.sealedTopics }</Text>
{ !state.sealEnabled && (
<>
<Text style={styles.modalDescription}>{ state.strings.sealUnset }</Text>
<InputField style={styles.field}
label={state.strings.password}
secret={true}
value={state.sealPassword}
autoCapitalize={'none'}
spellCheck={false}
onChangeText={actions.setSealPassword}
/>
{ state.sealPassword && (
<TouchableOpacity style={styles.enabledButton} activeOpacity={1} onPress={() => sealAction(actions.generateKey)}>
{ busy && (
<ActivityIndicator style={styles.modalBusy} animating={true} color={Colors.primaryButtonText} />
)}
{ !busy && (
<Text style={styles.enabledButtonText}>{ state.strings.generate }</Text>
)}
</TouchableOpacity>
)}
{ !state.sealPassword && (
<View style={styles.disabledButton}>
<Text style={styles.disabledButtonText}>{ state.strings.generate }</Text>
</View>
)}
<Text style={styles.delayMessage}>{ state.strings.delayMessage }</Text>
</>
)}
{ state.sealEnabled && !state.sealUnlocked && !state.sealRemove && (
<>
<Text style={styles.modalDescription}>{ state.strings.sealLocked }</Text>
<InputField style={styles.field}
label={state.strings.password}
secret={true}
value={state.sealPassword}
autoCapitalize={'none'}
spellCheck={false}
onChangeText={actions.setSealPassword}
/>
{ state.sealPassword && (
<TouchableOpacity style={styles.enabledButton} activeOpacity={1} onPress={() => sealAction(actions.unlockKey)}>
{ busy && (
<ActivityIndicator style={styles.modalBusy} animating={true} color={Colors.primaryButtonText} />
)}
{ !busy && (
<Text style={styles.enabledButtonText}>{ state.strings.unlock }</Text>
)}
</TouchableOpacity>
)}
{ !state.sealPassword && (
<View style={styles.disabledButton}>
<Text style={styles.disabledButtonText}>{ state.strings.unlock }</Text>
</View>
)}
<TouchableOpacity activeOpacity={1} onPress={actions.showSealRemove}>
<Text style={styles.dangerText}>{ state.strings.removeSeal }</Text>
</TouchableOpacity>
</>
)}
{ state.sealEnabled && state.sealUnlocked && !state.sealRemove && !state.sealUpdate && (
<>
<Text style={styles.modalDescription}>{ state.strings.sealUnlocked }</Text>
<TouchableOpacity style={styles.enabledButton} activeOpacity={1} onPress={() => sealAction(actions.disableKey)}>
{ busy && (
<ActivityIndicator style={styles.modalBusy} animating={true} color={Colors.primaryButtonText} />
)}
{ !busy && (
<Text style={styles.enabledButtonText}>{ state.strings.disable }</Text>
)}
</TouchableOpacity>
<TouchableOpacity activeOpacity={1} onPress={actions.showSealUpdate}>
<Text style={styles.modeText}>{ state.strings.changeKey }</Text>
</TouchableOpacity>
<TouchableOpacity activeOpacity={1} onPress={actions.showSealRemove}>
<Text style={styles.dangerText}>{ state.strings.removeSeal }</Text>
</TouchableOpacity>
</>
)}
{ state.sealEnabled && state.sealRemove && (
<>
<Text style={styles.modalDescription}>{ state.strings.sealDelete }</Text>
<InputField style={styles.field}
label={state.strings.typeDelete}
value={state.sealDelete}
autoCapitalize={'none'}
spellCheck={false}
onChangeText={actions.setSealDelete}
/>
{ state.sealDelete === state.strings.deleteKey && (
<TouchableOpacity style={styles.dangerButton} activeOpacity={1} onPress={() => sealAction(actions.removeKey)}>
{ busy && (
<ActivityIndicator style={styles.modalBusy} animating={true} color={Colors.primaryButtonText} />
)}
{ !busy && (
<Text style={styles.dangerButtonText}>{ state.strings.delete }</Text>
)}
</TouchableOpacity>
)}
{ state.sealDelete !== state.strings.deleteKey && (
<View style={styles.disabledButton}>
<Text style={styles.disabledButtonText}>{ state.strings.delete }</Text>
</View>
)}
<TouchableOpacity activeOpacity={1} onPress={actions.hideSealRemove}>
{ state.sealUnlocked && (
<Text style={styles.modeText}>{ state.strings.disableSeal }</Text>
)}
{ !state.sealUnlocked && (
<Text style={styles.modeText}>{ state.strings.unlockSeal }</Text>
)}
</TouchableOpacity>
</>
)}
{ state.sealEnabled && state.sealUnlocked && state.sealUpdate && (
<>
<Text style={styles.modalDescription}>{ state.strings.changePassword }</Text>
<InputField style={styles.field}
label={state.strings.password}
isPassword={true}
value={state.sealPassword}
autoCapitalize={'none'}
spellCheck={false}
onChangeText={actions.setSealPassword}
/>
{ state.sealPassword && (
<TouchableOpacity style={styles.enabledButton} activeOpacity={1} onPress={() => sealAction(actions.updateKey)}>
{ busy && (
<ActivityIndicator style={styles.modalBusy} animating={true} color={Colors.primaryButtonText} />
)}
{ !busy && (
<Text style={styles.enabledButtonText}>{ state.strings.update }</Text>
)}
</TouchableOpacity>
)}
{ !state.sealPassword && (
<View style={styles.disabledButton}>
<Text style={styles.disabledButtonText}>{ state.strings.update }</Text>
</View>
)}
<TouchableOpacity activeOpacity={1} onPress={actions.hideSealUpdate}>
{ state.sealUnlocked && (
<Text style={styles.modeText}>{ state.strings.disableSeal }</Text>
)}
{ !state.sealUnlocked && (
<Text style={styles.modeText}>{ state.strings.unlockSeal }</Text>
)}
</TouchableOpacity>
</>
)}
</View> </View>
<Text style={styles.modalHeader}>{ state.strings.sealedTopics }</Text> </BlurView>
{ !state.sealEnabled && ( </KeyboardAvoidingView>
<>
<Text style={styles.modalDescription}>{ state.strings.sealUnset }</Text>
<InputField style={styles.field}
label={state.strings.password}
secret={true}
value={state.sealPassword}
autoCapitalize={'none'}
spellCheck={false}
onChangeText={actions.setSealPassword}
/>
{ state.sealPassword && (
<TouchableOpacity style={styles.enabledButton} activeOpacity={1} onPress={() => sealAction(actions.generateKey)}>
{ busy && (
<ActivityIndicator style={styles.modalBusy} animating={true} color={Colors.primaryButtonText} />
)}
{ !busy && (
<Text style={styles.enabledButtonText}>{ state.strings.generate }</Text>
)}
</TouchableOpacity>
)}
{ !state.sealPassword && (
<View style={styles.disabledButton}>
<Text style={styles.disabledButtonText}>{ state.strings.generate }</Text>
</View>
)}
<Text style={styles.delayMessage}>{ state.strings.delayMessage }</Text>
</>
)}
{ state.sealEnabled && !state.sealUnlocked && !state.sealRemove && (
<>
<Text style={styles.modalDescription}>{ state.strings.sealLocked }</Text>
<InputField style={styles.field}
label={state.strings.password}
secret={true}
value={state.sealPassword}
autoCapitalize={'none'}
spellCheck={false}
onChangeText={actions.setSealPassword}
/>
{ state.sealPassword && (
<TouchableOpacity style={styles.enabledButton} activeOpacity={1} onPress={() => sealAction(actions.unlockKey)}>
{ busy && (
<ActivityIndicator style={styles.modalBusy} animating={true} color={Colors.primaryButtonText} />
)}
{ !busy && (
<Text style={styles.enabledButtonText}>{ state.strings.unlock }</Text>
)}
</TouchableOpacity>
)}
{ !state.sealPassword && (
<View style={styles.disabledButton}>
<Text style={styles.disabledButtonText}>{ state.strings.unlock }</Text>
</View>
)}
<TouchableOpacity activeOpacity={1} onPress={actions.showSealRemove}>
<Text style={styles.dangerText}>{ state.strings.removeSeal }</Text>
</TouchableOpacity>
</>
)}
{ state.sealEnabled && state.sealUnlocked && !state.sealRemove && !state.sealUpdate && (
<>
<Text style={styles.modalDescription}>{ state.strings.sealUnlocked }</Text>
<TouchableOpacity style={styles.enabledButton} activeOpacity={1} onPress={() => sealAction(actions.disableKey)}>
{ busy && (
<ActivityIndicator style={styles.modalBusy} animating={true} color={Colors.primaryButtonText} />
)}
{ !busy && (
<Text style={styles.enabledButtonText}>{ state.strings.disable }</Text>
)}
</TouchableOpacity>
<TouchableOpacity activeOpacity={1} onPress={actions.showSealUpdate}>
<Text style={styles.modeText}>{ state.strings.changeKey }</Text>
</TouchableOpacity>
<TouchableOpacity activeOpacity={1} onPress={actions.showSealRemove}>
<Text style={styles.dangerText}>{ state.strings.removeSeal }</Text>
</TouchableOpacity>
</>
)}
{ state.sealEnabled && state.sealRemove && (
<>
<Text style={styles.modalDescription}>{ state.strings.sealDelete }</Text>
<InputField style={styles.field}
label={state.strings.typeDelete}
value={state.sealDelete}
autoCapitalize={'none'}
spellCheck={false}
onChangeText={actions.setSealDelete}
/>
{ state.sealDelete === state.strings.deleteKey && (
<TouchableOpacity style={styles.dangerButton} activeOpacity={1} onPress={() => sealAction(actions.removeKey)}>
{ busy && (
<ActivityIndicator style={styles.modalBusy} animating={true} color={Colors.primaryButtonText} />
)}
{ !busy && (
<Text style={styles.dangerButtonText}>{ state.strings.delete }</Text>
)}
</TouchableOpacity>
)}
{ state.sealDelete !== state.strings.deleteKey && (
<View style={styles.disabledButton}>
<Text style={styles.disabledButtonText}>{ state.strings.delete }</Text>
</View>
)}
<TouchableOpacity activeOpacity={1} onPress={actions.hideSealRemove}>
{ state.sealUnlocked && (
<Text style={styles.modeText}>{ state.strings.disableSeal }</Text>
)}
{ !state.sealUnlocked && (
<Text style={styles.modeText}>{ state.strings.unlockSeal }</Text>
)}
</TouchableOpacity>
</>
)}
{ state.sealEnabled && state.sealUnlocked && state.sealUpdate && (
<>
<Text style={styles.modalDescription}>{ state.strings.changePassword }</Text>
<InputField style={styles.field}
label={state.strings.password}
isPassword={true}
value={state.sealPassword}
autoCapitalize={'none'}
spellCheck={false}
onChangeText={actions.setSealPassword}
/>
{ state.sealPassword && (
<TouchableOpacity style={styles.enabledButton} activeOpacity={1} onPress={() => sealAction(actions.updateKey)}>
{ busy && (
<ActivityIndicator style={styles.modalBusy} animating={true} color={Colors.primaryButtonText} />
)}
{ !busy && (
<Text style={styles.enabledButtonText}>{ state.strings.update }</Text>
)}
</TouchableOpacity>
)}
{ !state.sealPassword && (
<View style={styles.disabledButton}>
<Text style={styles.disabledButtonText}>{ state.strings.update }</Text>
</View>
)}
<TouchableOpacity activeOpacity={1} onPress={actions.hideSealUpdate}>
{ state.sealUnlocked && (
<Text style={styles.modeText}>{ state.strings.disableSeal }</Text>
)}
{ !state.sealUnlocked && (
<Text style={styles.modeText}>{ state.strings.unlockSeal }</Text>
)}
</TouchableOpacity>
</>
)}
</View>
</BlurView>
</Modal> </Modal>
<Modal <Modal
@ -506,59 +508,61 @@ export function Settings() {
supportedOrientations={['portrait', 'landscape']} supportedOrientations={['portrait', 'landscape']}
onRequestClose={actions.hideLogin} onRequestClose={actions.hideLogin}
> >
<BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black"> <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
<View style={styles.modalContainer}> <BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black">
<View style={styles.modalClose}> <View style={styles.modalContainer}>
<TouchableOpacity style={styles.dismissButton} activeOpacity={1} onPress={actions.hideLogin}> <View style={styles.modalClose}>
<MatIcons name="close" size={20} color={Colors.descriptionText} /> <TouchableOpacity style={styles.dismissButton} activeOpacity={1} onPress={actions.hideLogin}>
</TouchableOpacity> <MatIcons name="close" size={20} color={Colors.descriptionText} />
</View>
<Text style={styles.modalHeader}>{ state.strings.changeLogin }</Text>
<ActivityIndicator style={styles.modalBusy} animating={busy} color={Colors.primary} />
<Text textAlign={'center'} style={styles.modalDescription}>{ state.strings.changeMessage }</Text>
<InputField
label={state.strings.username}
value={state.username}
autoCapitalize={'none'}
spellCheck={false}
style={styles.field}
onChangeText={actions.setUsername}
/>
<InputField
label={state.strings.password}
value={state.password}
autoCapitalize={'none'}
spellCheck={false}
style={styles.field}
onChangeText={actions.setPassword}
secret={true}
/>
<View style={styles.availableStatus}>
{ state.validated && !state.available && (
<Text style={styles.notAvailable}>{ state.strings.notAvailable }</Text>
)}
</View>
<View style={styles.hintButtons}>
<TouchableOpacity style={styles.cancelButton} activeOpacity={1} onPress={actions.hideLogin}>
<Text style={styles.cancelButtonText}>{ state.strings.cancel }</Text>
</TouchableOpacity>
{ (!state.available || !state.password || !state.validated || !state.username) && (
<View style={styles.disabledButton}>
<Text style={styles.disabledButtonText}>{ state.strings.update }</Text>
</View>
)}
{ state.available && state.password && state.validated && state.username && (
<TouchableOpacity style={styles.promptButton} activeOpacity={1} onPress={changeLogin}>
<Text style={styles.enabledButtonText}>{ state.strings.update }</Text>
</TouchableOpacity> </TouchableOpacity>
)} </View>
<Text style={styles.modalHeader}>{ state.strings.changeLogin }</Text>
<ActivityIndicator style={styles.modalBusy} animating={busy} color={Colors.primary} />
<Text textAlign={'center'} style={styles.modalDescription}>{ state.strings.changeMessage }</Text>
<InputField
label={state.strings.username}
value={state.username}
autoCapitalize={'none'}
spellCheck={false}
style={styles.field}
onChangeText={actions.setUsername}
/>
<InputField
label={state.strings.password}
value={state.password}
autoCapitalize={'none'}
spellCheck={false}
style={styles.field}
onChangeText={actions.setPassword}
secret={true}
/>
<View style={styles.availableStatus}>
{ state.validated && !state.available && (
<Text style={styles.notAvailable}>{ state.strings.notAvailable }</Text>
)}
</View>
<View style={styles.hintButtons}>
<TouchableOpacity style={styles.cancelButton} activeOpacity={1} onPress={actions.hideLogin}>
<Text style={styles.cancelButtonText}>{ state.strings.cancel }</Text>
</TouchableOpacity>
{ (!state.available || !state.password || !state.validated || !state.username) && (
<View style={styles.disabledButton}>
<Text style={styles.disabledButtonText}>{ state.strings.update }</Text>
</View>
)}
{ state.available && state.password && state.validated && state.username && (
<TouchableOpacity style={styles.promptButton} activeOpacity={1} onPress={changeLogin}>
<Text style={styles.enabledButtonText}>{ state.strings.update }</Text>
</TouchableOpacity>
)}
</View>
</View> </View>
</View> </BlurView>
</BlurView> </KeyboardAvoidingView>
</Modal> </Modal>
<Modal <Modal

2
app/mobile/src/session/settings/Settings.styled.js
View File

@ -269,7 +269,7 @@ export const styles = StyleSheet.create({
fontFamily: 'Roboto', fontFamily: 'Roboto',
}, },
promptButton: { promptButton: {
marginTop: 8, marginTop: 24,
marginBottom: 16, marginBottom: 16,
borderRadius: 4, borderRadius: 4,
backgroundColor: Colors.primaryButton, backgroundColor: Colors.primaryButton,

1
todo
View File

@ -1,4 +1,5 @@
login after delete fails login after delete fails
rotate screen mangles profile
registry showing stale handle for unknown contact registry showing stale handle for unknown contact
show disabled notifications if node disabled show disabled notifications if node disabled
warn if federated hostname fails warn if federated hostname fails