mirror of
https://github.com/balzack/databag.git
synced 2025-02-11 19:19:16 +00:00
avoid keyboard in settings modals
This commit is contained in:
balzack
parent
8c1eb824e7
commit
e1351459fb
@ -143,7 +143,7 @@ export function Profile() {
|
||||
supportedOrientations={['portrait', 'landscape']}
|
||||
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">
|
||||
<View style={styles.modalContainer}>
|
||||
<View style={styles.modalClose}>
|
||||
|
||||
@ -37,7 +37,7 @@ export function useProfile() {
|
||||
updateState({ imageWidth: width, imageHeight: width, detailWidth: width + 2 });
|
||||
}
|
||||
else {
|
||||
updateState({ imageWidth: height, imageHeight, detailWidth: width + 2 });
|
||||
updateState({ imageWidth: height, imageHeight: height, detailWidth: width + 2 });
|
||||
}
|
||||
}, [dimensions]);
|
||||
|
||||
|
||||
@ -331,172 +331,174 @@ export function Settings() {
|
||||
supportedOrientations={['portrait', 'landscape']}
|
||||
onRequestClose={actions.hideEditSeal}
|
||||
>
|
||||
<BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black">
|
||||
<View style={styles.modalContainer}>
|
||||
<View style={styles.modalClose}>
|
||||
<TouchableOpacity style={styles.dismissButton} activeOpacity={1} onPress={actions.hideEditSeal}>
|
||||
<MatIcons name="close" size={20} color={Colors.descriptionText} />
|
||||
</TouchableOpacity>
|
||||
<KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
|
||||
<BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black">
|
||||
<View style={styles.modalContainer}>
|
||||
<View style={styles.modalClose}>
|
||||
<TouchableOpacity style={styles.dismissButton} activeOpacity={1} onPress={actions.hideEditSeal}>
|
||||
<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>
|
||||
<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>
|
||||
</BlurView>
|
||||
</BlurView>
|
||||
</KeyboardAvoidingView>
|
||||
</Modal>
|
||||
|
||||
<Modal
|
||||
@ -506,59 +508,61 @@ export function Settings() {
|
||||
supportedOrientations={['portrait', 'landscape']}
|
||||
onRequestClose={actions.hideLogin}
|
||||
>
|
||||
<BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black">
|
||||
<View style={styles.modalContainer}>
|
||||
<View style={styles.modalClose}>
|
||||
<TouchableOpacity style={styles.dismissButton} activeOpacity={1} onPress={actions.hideLogin}>
|
||||
<MatIcons name="close" size={20} color={Colors.descriptionText} />
|
||||
</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>
|
||||
<KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
|
||||
<BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black">
|
||||
<View style={styles.modalContainer}>
|
||||
<View style={styles.modalClose}>
|
||||
<TouchableOpacity style={styles.dismissButton} activeOpacity={1} onPress={actions.hideLogin}>
|
||||
<MatIcons name="close" size={20} color={Colors.descriptionText} />
|
||||
</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>
|
||||
</BlurView>
|
||||
</BlurView>
|
||||
</KeyboardAvoidingView>
|
||||
</Modal>
|
||||
|
||||
<Modal
|
||||
|
||||
@ -269,7 +269,7 @@ export const styles = StyleSheet.create({
|
||||
fontFamily: 'Roboto',
|
||||
},
|
||||
promptButton: {
|
||||
marginTop: 8,
|
||||
marginTop: 24,
|
||||
marginBottom: 16,
|
||||
borderRadius: 4,
|
||||
backgroundColor: Colors.primaryButton,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user