diff --git a/app/mobile/src/constants/Strings.js b/app/mobile/src/constants/Strings.js index a2434c43..b9a585eb 100644 --- a/app/mobile/src/constants/Strings.js +++ b/app/mobile/src/constants/Strings.js @@ -80,7 +80,7 @@ const Strings = [ description: 'Description', registryVisible: 'Visible in Registry', editImage: 'Edit Image', - editDetails: 'Edit Details', + editDetails: 'Edit Details', }, { visibleRegistry: 'Visible dans le Registre', diff --git a/app/mobile/src/session/profile/Profile.jsx b/app/mobile/src/session/profile/Profile.jsx index 9d667548..fecb7760 100644 --- a/app/mobile/src/session/profile/Profile.jsx +++ b/app/mobile/src/session/profile/Profile.jsx @@ -2,6 +2,8 @@ import { ActivityIndicator, KeyboardAvoidingView, Image, Modal, View, Switch, Te import AntIcons from 'react-native-vector-icons/AntDesign'; import MatIcons from 'react-native-vector-icons/MaterialCommunityIcons'; import ImagePicker from 'react-native-image-crop-picker' +import { BlurView } from "@react-native-community/blur"; +import { FloatingLabelInput } from 'react-native-floating-label-input'; import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context'; import { Menu, MenuOptions, MenuOption, MenuTrigger } from 'react-native-popup-menu'; import { Colors } from 'constants/Colors'; @@ -17,7 +19,16 @@ export function Profile() { try { const full = await ImagePicker.openPicker({ mediaType: 'photo', width: 256, height: 256 }); const crop = await ImagePicker.openCropper({ path: full.path, width: 256, height: 256, cropperCircleOverlay: true, includeBase64: true }); - await actions.setProfileImage(crop.data); + try { + await actions.setProfileImage(crop.data); + } + catch (err) { + console.log(err); + Alert.alert( + state.strings.error, + state.strings.tryAgain, + ); + } } catch (err) { console.log(err); @@ -59,25 +70,25 @@ const triggerStyles = { return ( - + - + - + - - { state.strings.edit } - - + + { state.strings.edit } + + - - alert(`image`)}> + + { state.strings.editImage } - alert(`details`)}> + { state.strings.editDetails } @@ -126,6 +137,70 @@ const triggerStyles = { + + + + + + + + + + { state.strings.editDetails } + + + + + + + + + + + + + + + + + ); } diff --git a/app/mobile/src/session/profile/Profile.styled.js b/app/mobile/src/session/profile/Profile.styled.js index d451f00a..cc2928aa 100644 --- a/app/mobile/src/session/profile/Profile.styled.js +++ b/app/mobile/src/session/profile/Profile.styled.js @@ -5,20 +5,21 @@ export const styles = StyleSheet.create({ content: { width: '100%', height: '100%', - display: 'flex', backgroundColor: Colors.screenBase, }, details: { - width: '100%', position: 'relative', top: -32, minHeight: 32, - backgroundColor: 'yellow', borderTopRightRadius: 32, borderTopLeftRadius: 32, backgroundColor: Colors.screenBase, borderTopWidth: 1, borderColor: Colors.areaBorder, + borderLeftWidth: 0.2, + borderRightWidth: 0.2, + paddingLeft: 1, + paddingRight: 1, }, control: { position: 'absolute', @@ -31,8 +32,8 @@ export const styles = StyleSheet.create({ borderTopLeftRadius: 8, borderTopRightRadius: 8, backgroundColor: Colors.screenBase, - paddingLeft: 8, - paddingRight: 8, + paddingLeft: 16, + paddingRight: 16, paddingTop: 2, display: 'flex', flexDirection: 'row', @@ -45,7 +46,6 @@ export const styles = StyleSheet.create({ }, editLabel: { color: Colors.text, - paddingLeft: 8, paddingRight: 8, paddingTop: 2, fontSize: 16, @@ -139,7 +139,9 @@ export const styles = StyleSheet.create({ }, }, options: { - backgroundColor: Colors.areaBase, + backgroundColor: Colors.areaBase, + borderWidth: 0.2, + borderColor: Colors.areaBorder, }, option: { padding: 4, @@ -147,6 +149,67 @@ export const styles = StyleSheet.create({ backgroundColor: Colors.areaBase, fontFamily: 'roboto', fontSize: 16, + textAlign: 'center', + }, + modalOverlay: { + display: 'flex', + width: '100%', + height: '100%', + alignItems: 'center', + justifyContent: 'center', + }, + modalContainer: { + backgroundColor: Colors.modalBase, + width: '80%', + maxWidth: 400, + display: 'flex', + alignItems: 'center', + borderRadius: 8, + }, + modalClose: { + position: 'absolute', + width: '100%', + display: 'flex', + alignItems: 'flex-end', + }, + dismissButton: { + padding: 12, + }, + modalHeader: { + fontSize: 18, + paddingTop: 16, + color: Colors.labelText, + fontFamily: 'Roboto', + }, + modalInput: { + marginRight: 16, + marginLeft: 16, + marginTop: 8, + marginBottom: 8, + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + flexDirection: 'row', + }, + floatingInput: { + color: Colors.inputText, + paddingTop: 20, + paddingBottom: 4, + }, + floatingLabel: { + color: Colors.text, + }, + floatingCustomLabel: { + colorFocused: Colors.inputPlaceholder, + colorBlurred: Colors.inputPlaceholder, + fontSizeFocused: 12, + }, + floatingContainer: { + paddingHorizontal: 12, + backgroundColor: Colors.inputBase, + borderRadius: 8, + minHeight: 48, + maxHeight: 128, }, }); diff --git a/app/mobile/src/session/profile/useProfile.hook.js b/app/mobile/src/session/profile/useProfile.hook.js index 1a0cdefa..37053c99 100644 --- a/app/mobile/src/session/profile/useProfile.hook.js +++ b/app/mobile/src/session/profile/useProfile.hook.js @@ -16,6 +16,11 @@ export function useProfile() { username: null, location: null, description: null, + imageWidth: null, + imageHeight: null, + detailWidth: null, + details: false, + detailName: '', }); const dimensions = useWindowDimensions(); @@ -29,10 +34,10 @@ export function useProfile() { useEffect(() => { const { width, height } = dimensions; if (height > width) { - updateState({ width, height: width }); + updateState({ imageWidth: width, imageHeight: width, detailWidth: width + 2 }); } else { - updateState({ width: height, height }); + updateState({ imageWidth: height, imageHeight, detailWidth: width + 2 }); } }, [dimensions]); @@ -50,8 +55,33 @@ export function useProfile() { const actions = { setVisible: async (searchable) => { - await account.actions.setSearchable(searchable); - updateState({ searchable }); + const cur = state.searchable; + try { + updateState({ searchable }); + await account.actions.setSearchable(searchable); + } + catch(err) { + updateState({ searchable: cur }); + throw err; + } + }, + setProfileImage: async (data) => { + await profile.actions.setProfileImage(data); + }, + showDetails: () => { + updateState({ details: true, detailName: '', detailLocation: '', detailDescription: '' }); + }, + hideDetails: () => { + updateState({ details: false }); + }, + setDetailName: (detailName) => { + updateState({ detailName }); + }, + setDetailLocation: (detailLocation) => { + updateState({ detailLocation }); + }, + setDetailDescription: (detailDescription) => { + updateState({ detailDescription }); }, }; diff --git a/app/mobile/src/session/settings/Settings.jsx b/app/mobile/src/session/settings/Settings.jsx index 9bda4502..f5770f38 100644 --- a/app/mobile/src/session/settings/Settings.jsx +++ b/app/mobile/src/session/settings/Settings.jsx @@ -440,7 +440,7 @@ export function Settings() { autoCapitalize={'none'} spellCheck={false} inputStyles={styles.floatingInput} - labelStyles={styles.floatingLable} + labelStyles={styles.floatingLabel} customLabelStyles={styles.floatingCustomLabel} containerStyles={styles.floatingContainer} onChangeText={actions.setSealDelete} @@ -542,7 +542,7 @@ export function Settings() { autoComplete={'off'} inputStyles={styles.floatingInput} - labelStyles={styles.floatingLable} + labelStyles={styles.floatingLabel} customLabelStyles={styles.floatingCustomLabel} containerStyles={styles.floatingContainer} @@ -559,7 +559,7 @@ export function Settings() { spellCheck={false} inputStyles={styles.floatingInput} - labelStyles={styles.floatingLable} + labelStyles={styles.floatingLabel} customLabelStyles={styles.floatingCustomLabel} containerStyles={styles.floatingContainer} @@ -616,7 +616,7 @@ export function Settings() { autoCapitalize={'none'} spellCheck={false} inputStyles={styles.floatingInput} - labelStyles={styles.floatingLable} + labelStyles={styles.floatingLabel} customLabelStyles={styles.floatingCustomLabel} containerStyles={styles.floatingContainer} onChangeText={actions.setConfirm}