martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-14 12:39:17 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

removing float label input, maybe related to oom crash

Browse Source
This commit is contained in:
Roland Osborne 2023-09-12 17:43:13 -07:00
parent 3b0677ff65
commit ac268d4a3d
5 changed files with 99 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/mobile/src/constants/Colors.js
View File

@ -66,8 +66,8 @@ const DarkColors = {
unsetText: '#aaaaaa', unsetText: '#aaaaaa',
descriptionText: '#bbbbbb', descriptionText: '#bbbbbb',
text: '#ffffff', text: '#ffffff',
screenBase: '#333333', screenBase: '#222222',
areaBase: '#555555', areaBase: '#444444',
modalBase: '#111111', modalBase: '#111111',
modalOverlay: 'rgba(88,88,88,0.8)', modalOverlay: 'rgba(88,88,88,0.8)',
headerBar: '#555555', headerBar: '#555555',
@ -99,7 +99,7 @@ const DarkColors = {
disabledIndicator: '#eeeeee', disabledIndicator: '#eeeeee',
disconnectedIndicator: '#aa0000', disconnectedIndicator: '#aa0000',
sliderGrip: '#eeeeee', sliderGrip: '#eeeeee',
areaBorder: '#ffffff', areaBorder: '#aaaaaa',
}; };
function getColor(label) { function getColor(label) {

18
app/mobile/src/constants/Strings.js
View File

@ -81,6 +81,9 @@ const Strings = [
registryVisible: 'Visible in Registry', registryVisible: 'Visible in Registry',
editImage: 'Edit Image', editImage: 'Edit Image',
editDetails: 'Edit Details', editDetails: 'Edit Details',
// contacts page
add: 'Add',
}, },
{ {
visibleRegistry: 'Visible dans le Registre', visibleRegistry: 'Visible dans le Registre',
@ -158,7 +161,10 @@ const Strings = [
description: 'Description', description: 'Description',
registryVisible: 'Visible dans le Registre', registryVisible: 'Visible dans le Registre',
editImage: 'Modifier l\'Image', editImage: 'Modifier l\'Image',
editDetails: 'Modifier les Détails', editDetails: 'Modifier les Détails',
//constacts page
add: 'Ajouter',
}, },
{ {
visibleRegistry: 'Visible en el Registro', visibleRegistry: 'Visible en el Registro',
@ -236,7 +242,10 @@ const Strings = [
description: 'Descripción', description: 'Descripción',
registryVisible: 'Visible en el Registro', registryVisible: 'Visible en el Registro',
editImage: 'Editar Imagen', editImage: 'Editar Imagen',
editDetails: 'Editar Detalles', editDetails: 'Editar Detalles',
// contacts page
add: 'Agregar',
}, },
{ {
visibleRegistry: 'Sichtbar in der Registrierung', visibleRegistry: 'Sichtbar in der Registrierung',
@ -314,7 +323,10 @@ const Strings = [
description: 'Beschreibung', description: 'Beschreibung',
registryVisible: 'Sichtbar in der Registrierung', registryVisible: 'Sichtbar in der Registrierung',
editImage: 'Bild Bearbeiten', editImage: 'Bild Bearbeiten',
editDetails: 'Details bearbeiten', editDetails: 'Details Bearbeiten',
//contacts page
add: 'Hinzufügen',
} }
]; ];

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

@ -1,4 +1,4 @@
import { ActivityIndicator, KeyboardAvoidingView, Image, Modal, View, Switch, Text, ScrollView, TextInput, TouchableOpacity, Alert } from 'react-native'; import { ActivityIndicator, KeyboardAvoidingView, Image, Modal, View, Switch, Text, Platform, ScrollView, TextInput, TouchableOpacity, Alert } from 'react-native';
import { useState } from 'react'; import { useState } from 'react';
import AntIcons from 'react-native-vector-icons/AntDesign'; import AntIcons from 'react-native-vector-icons/AntDesign';
import MatIcons from 'react-native-vector-icons/MaterialCommunityIcons'; import MatIcons from 'react-native-vector-icons/MaterialCommunityIcons';
@ -8,6 +8,7 @@ import { FloatingLabelInput } from 'react-native-floating-label-input';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context'; import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
import { Menu, MenuOptions, MenuOption, MenuTrigger } from 'react-native-popup-menu'; import { Menu, MenuOptions, MenuOption, MenuTrigger } from 'react-native-popup-menu';
import { Colors } from 'constants/Colors'; import { Colors } from 'constants/Colors';
import { InputField } from 'utils/InputField';
import { useProfile } from './useProfile.hook'; import { useProfile } from './useProfile.hook';
import { styles } from './Profile.styled'; import { styles } from './Profile.styled';
import avatar from 'images/avatar.png'; import avatar from 'images/avatar.png';
@ -142,74 +143,63 @@ export function Profile() {
supportedOrientations={['portrait', 'landscape']} supportedOrientations={['portrait', 'landscape']}
onRequestClose={actions.hideDetails} onRequestClose={actions.hideDetails}
> >
<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.hideDetails}> <View style={styles.modalClose}>
<MatIcons name="close" size={20} color={Colors.descriptionText} /> <TouchableOpacity style={styles.dismissButton} activeOpacity={1} onPress={actions.hideDetails}>
</TouchableOpacity> <MatIcons name="close" size={20} color={Colors.descriptionText} />
</View> </TouchableOpacity>
<Text style={styles.modalHeader}>{ state.strings.editDetails }</Text> </View>
<Text style={styles.modalHeader}>{ state.strings.editDetails }</Text>
<View style={styles.modalInput}> <InputField
<FloatingLabelInput
label={state.strings.name} label={state.strings.name}
value={state.detailName} value={state.detailName}
autoCapitalize={'none'} autoCapitalize={'none'}
spellCheck={false} spellCheck={false}
inputStyles={styles.floatingInput} multiline={false}
labelStyles={styles.floatingLabel} style={styles.field}
customLabelStyles={styles.floatingCustomLabel}
containerStyles={styles.floatingContainer}
onChangeText={actions.setDetailName} onChangeText={actions.setDetailName}
/> />
</View>
<View style={styles.modalInput}> <InputField
<FloatingLabelInput
label={state.strings.location} label={state.strings.location}
value={state.detailLocation} value={state.detailLocation}
autoCapitalize={'none'} autoCapitalize={'none'}
spellCheck={false} spellCheck={false}
inputStyles={styles.floatingInput} multiline={false}
labelStyles={styles.floatingLabel} style={styles.field}
customLabelStyles={styles.floatingCustomLabel}
containerStyles={styles.floatingContainer}
onChangeText={actions.setDetailLocation} onChangeText={actions.setDetailLocation}
/> />
</View>
<View style={styles.modalInput}> <InputField
<FloatingLabelInput
label={state.strings.description} label={state.strings.description}
value={state.detailDescription} value={state.detailDescription}
autoCapitalize={'none'} autoCapitalize={'none'}
spellCheck={false} spellCheck={false}
multiline={true} multiline={true}
inputStyles={styles.floatingInput} style={styles.field}
labelStyles={styles.floatingLabel}
customLabelStyles={styles.floatingCustomLabel}
containerStyles={styles.floatingContainer}
onChangeText={actions.setDetailDescription} onChangeText={actions.setDetailDescription}
/> />
</View>
<View style={styles.buttons}> <View style={styles.buttons}>
<TouchableOpacity style={styles.cancelButton} activeOpacity={1} onPress={actions.hideDetails}> <TouchableOpacity style={styles.cancelButton} activeOpacity={1} onPress={actions.hideDetails}>
<Text style={styles.cancelButtonText}>{ state.strings.cancel }</Text> <Text style={styles.cancelButtonText}>{ state.strings.cancel }</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity style={styles.saveButton} activeOpacity={1} onPress={saveDetails}> <TouchableOpacity style={styles.saveButton} activeOpacity={1} onPress={saveDetails}>
{ busyDetail && ( { busyDetail && (
<ActivityIndicator animating={true} color={Colors.primaryButtonText} /> <ActivityIndicator animating={true} color={Colors.primaryButtonText} />
)} )}
{ !busyDetail && ( { !busyDetail && (
<Text style={styles.saveButtonText}>{ state.strings.save }</Text> <Text style={styles.saveButtonText}>{ state.strings.save }</Text>
)} )}
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
</BlurView> </BlurView>
</KeyboardAvoidingView>
</Modal> </Modal>
</ScrollView> </ScrollView>

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

@ -92,17 +92,17 @@ export const styles = StyleSheet.create({
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
flexDirection: 'row', flexDirection: 'row',
padding: 4, padding: 8,
height: 48,
}, },
icon: { icon: {
paddingLeft: 8, paddingLeft: 8,
paddingRight: 8, paddingRight: 16,
}, },
locationSet: { locationSet: {
fontSize: 16, fontSize: 16,
color: Colors.text, color: Colors.text,
fontFamily: 'roboto', fontFamily: 'roboto',
flex: 1,
}, },
locationUnset: { locationUnset: {
fontSize: 16, fontSize: 16,
@ -114,6 +114,7 @@ export const styles = StyleSheet.create({
fontSize: 16, fontSize: 16,
color: Colors.text, color: Colors.text,
fontFamily: 'roboto', fontFamily: 'roboto',
flex: 1,
}, },
descriptionUnset: { descriptionUnset: {
fontSize: 16, fontSize: 16,
@ -144,7 +145,7 @@ export const styles = StyleSheet.create({
borderColor: Colors.areaBorder, borderColor: Colors.areaBorder,
}, },
option: { option: {
padding: 4, padding: 6,
color: Colors.text, color: Colors.text,
backgroundColor: Colors.areaBase, backgroundColor: Colors.areaBase,
fontFamily: 'roboto', fontFamily: 'roboto',
@ -192,6 +193,30 @@ export const styles = StyleSheet.create({
justifyContent: 'center', justifyContent: 'center',
flexDirection: 'row', flexDirection: 'row',
}, },
field: {
input: {
backgroundColor: Colors.inputBase,
color: Colors.inputText,
borderRadius: 8,
minHeight: 48,
maxHeight: 128,
paddingLeft: 8,
},
label: {
height: 16,
paddingLeft: 8,
},
labelText: {
color: Colors.inputPlaceholder,
fontSize: 12,
},
container: {
width: '100%',
paddingLeft: 16,
paddingRight: 16,
paddingTop: 8,
},
},
floatingInput: { floatingInput: {
color: Colors.inputText, color: Colors.inputText,
paddingTop: 20, paddingTop: 20,
@ -208,6 +233,7 @@ export const styles = StyleSheet.create({
floatingContainer: { floatingContainer: {
paddingHorizontal: 12, paddingHorizontal: 12,
backgroundColor: Colors.inputBase, backgroundColor: Colors.inputBase,
width: '100%',
borderRadius: 8, borderRadius: 8,
minHeight: 48, minHeight: 48,
maxHeight: 128, maxHeight: 128,

16
app/mobile/src/utils/InputField.jsx Normal file
View File

@ -0,0 +1,16 @@
import { TextInput, Text, View } from 'react-native';
export function InputField({ label, value, autoCapitalize, spellCheck, multiline, onChangeText, style }) {
return (
<View style={style?.container}>
<View style={style?.label}>
{ !(value == null || value.length == 0) && (
<Text style={style?.labelText}>{ label }</Text>
)}
</View>
<TextInput placeholder={label} lineBreakStategyIOS={'standard'} placeholderTextColor={style?.labelText?.color} value={value} autoCapitalize={autoCapitalize} spellCheck={spellCheck} multiline={multiline} style={style?.input} onChangeText={onChangeText} />
</View>
);
}