martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-04-23 18:15:19 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

adding profile details to settings

Browse Source
This commit is contained in:
balzack 2024-09-18 22:24:23 -07:00
parent 8ded9553dd
commit c0670c86ca
3 changed files with 126 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/client/mobile/src/access/Access.tsx
View File

@ -2,7 +2,6 @@ import React, {useState} from 'react';
import {
Platform,
KeyboardAvoidingView,
ScrollView,
View,
Image,
} from 'react-native';

65
app/client/mobile/src/settings/Settings.styled.ts
View File

@ -2,11 +2,10 @@ import {StyleSheet} from 'react-native';
export const styles = StyleSheet.create({
settings: {
position: 'relative',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
padding: 8,
gap: 2,
},
header: {
fontSize: 22,
@ -19,8 +18,8 @@ export const styles = StyleSheet.create({
position: 'relative',
width: '90%',
maxWidth: 250,
marginTop: 8,
marginBottom: 24,
marginTop: 16,
marginBottom: 8,
},
logo: {
aspectRatio: 1,
@ -37,9 +36,65 @@ export const styles = StyleSheet.create({
justifyContent: 'center',
alignItems: 'center',
},
editLogo: {
setLogo: {
fontSize: 18,
borderRadius: 8,
backgroundColor: '#44444444',
},
unsetLogo: {
color: '#888888',
fontSize: 18,
},
editDivider: {
paddingLeft: 16,
paddingRight: 16,
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
minHeight: 32,
},
divider: {
flexGrow: 1,
},
nameSet: {
fontSize: 28,
width: '100%',
paddingLeft: 32,
paddingRight: 32,
},
nameUnset: {
fontSize: 28,
width: '100%',
paddingLeft: 32,
paddingRight: 32,
fontStyle: 'italic',
},
attributes: {
display: 'flex',
flexDirection: 'column',
gap: 8,
width: '100%',
},
attribute: {
display: 'flex',
flexDirection: 'row',
alignItem: 'center',
justifyContent: 'center',
paddingLeft: 32,
paddingRight: 32,
},
icon: {
width: 32,
display: 'flex',
justifyContent: 'center',
},
labelUnset: {
fontSize: 18,
fontStyle: 'italic',
flexGrow: 1,
},
labelSet: {
fontSize: 18,
flexGrow: 1,
},
})

80
app/client/mobile/src/settings/Settings.tsx
View File

@ -1,28 +1,80 @@
import React, {useContext} from 'react';
import {Button, Text} from 'react-native-paper';
import {SafeAreaView, View, Image} from 'react-native';
import {Button, Text, Divider, Icon} from 'react-native-paper';
import {SafeAreaView, TouchableOpacity, View, Image, ScrollView} from 'react-native';
import {styles} from './Settings.styled';
import {useSettings} from './useSettings.hook';
export function Settings() {
const { state, actions } = useSettings();
console.log("HERE");
const SelectImage = async () => {
}
return (
<SafeAreaView style={styles.settings}>
<Text style={styles.header}>{`${state.profile.handle}${state.profile.node ? '/' + state.profile.node : ''}`}</Text>
<View style={styles.image}>
<Image style={styles.logo} resizeMode={'contain'} source={{ uri: state.imageUrl }} />
<View style={styles.editBar}>
<Button style={styles.editLogo} mode="text">{state.strings.edit}</Button>
<ScrollView>
<SafeAreaView style={styles.settings}>
<Text style={styles.header}>{`${state.profile.handle}${state.profile.node ? '/' + state.profile.node : ''}`}</Text>
{ state.profile.imageSet && (
<View style={styles.image}>
<Image style={styles.logo} resizeMode={'contain'} source={{ uri: state.imageUrl }} />
<View style={styles.editBar}>
<Button style={styles.setLogo} mode="text" onPress={SelectImage}>{state.strings.edit}</Button>
</View>
</View>
)}
{ !state.profile.imageSet && (
<TouchableOpacity style={styles.image} onPress={SelectImage}>
<Image style={styles.logo} resizeMode={'contain'} source={{ uri: state.imageUrl }} />
<View style={styles.editBar}>
<Text style={styles.unsetLogo}>{state.strings.edit}</Text>
</View>
</TouchableOpacity>
)}
<View style={styles.editDivider}>
<Divider style={styles.divider} bold={true} />
<Button style={styles.editDetails} mode="text">{state.strings.edit}</Button>
</View>
</View>
<View style={styles.attributes}>
{!state.profile.name && (
<Text style={styles.nameUnset}>{state.strings.name}</Text>
)}
{state.profile.name && (
<Text style={styles.nameSet}>{state.profile.name}</Text>
)}
<View style={styles.attribute}>
<View style={styles.icon}>
<Icon size={24} source="map-marker-outline" />
</View>
{!state.profile.location && (
<Text style={styles.labelUnset}>{state.strings.location}</Text>
)}
{state.profile.location && (
<Text style={styles.labelSet}>{state.profile.location}</Text>
)}
</View>
<View style={styles.attribute}>
<View style={styles.icon}>
<Icon size={24} source="book-open-outline" />
</View>
{!state.profile.description && (
<Text style={styles.labelUnset}>{state.strings.description}</Text>
)}
{state.profile.description && (
<Text style={styles.labelSet}>{state.profile.description}</Text>
)}
</View>
</View>
<Button mode="contained" onPress={actions.logout}>
Logout
</Button>
</SafeAreaView>
<View style={styles.editDivider}>
<Divider style={styles.divider} bold={true} />
</View>
<Button mode="contained" onPress={actions.logout}>
Logout
</Button>
</SafeAreaView>
</ScrollView>
);
}