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

scrolling description in profile screen

Browse Source
This commit is contained in:
Roland Osborne 2023-09-13 13:36:18 -07:00
parent e1351459fb
commit 376420517f
2 changed files with 44 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,6 +17,7 @@ export function Profile() {
const [busyDetail, setBusyDetail] = useState(false); const [busyDetail, setBusyDetail] = useState(false);
const { state, actions } = useProfile(); const { state, actions } = useProfile();
const OVERLAP = 56;
const onGallery = async () => { const onGallery = async () => {
try { try {
@ -70,11 +71,12 @@ export function Profile() {
} }
return ( return (
<ScrollView style={styles.content} contentContainerStyle={{ display: 'flex', alignItems: 'center' }}> <View style={styles.container}>
<Image source={state.imageSource} style={{ ...styles.logo, width: state.imageWidth, height: state.imageHeight }} resizeMode={'contain'} />
<Image source={state.imageSource} style={{ width: state.imageWidth, height: state.imageHeight, alignSelf: 'center' }} resizeMode={'contain'} /> <View style={styles.content}>
<View style={{ width: state.imageWidth, height: state.imageHeight - OVERLAP }} />
<View style={{ ...styles.details, width: state.detailWidth }}>
<View style={styles.control}> <View style={styles.control}>
<Menu> <Menu>
<MenuTrigger customStyles={styles.trigger}> <MenuTrigger customStyles={styles.trigger}>
@ -94,6 +96,9 @@ export function Profile() {
</Menu> </Menu>
</View> </View>
<View style={{ ...styles.details, width: state.detailWidth }}>
{ state.name && ( { state.name && (
<Text style={styles.nameSet} numberOfLines={1} adjustsFontSizeToFit={true}>{ state.name }</Text> <Text style={styles.nameSet} numberOfLines={1} adjustsFontSizeToFit={true}>{ state.name }</Text>
)} )}
@ -114,15 +119,17 @@ export function Profile() {
)} )}
</View> </View>
<View style={styles.divider} /> <View style={styles.divider} />
<ScrollView style={styles.description}>
<View style={styles.entry}> <View style={styles.entry}>
<MatIcons name="book-open-outline" style={styles.icon} size={20} color={Colors.text} /> <MatIcons name="book-open-outline" style={styles.descriptionIcon} size={20} color={Colors.text} />
{ state.location && ( { state.description && (
<Text style={styles.descriptionSet}>{ state.description }</Text> <Text style={styles.descriptionSet}>{ state.description }</Text>
)} )}
{ !state.description && ( { !state.description && (
<Text style={styles.descriptionUnset}>Description</Text> <Text style={styles.descriptionUnset}>Description</Text>
)} )}
</View> </View>
</ScrollView>
</View> </View>
<View style={styles.group}> <View style={styles.group}>
@ -202,7 +209,8 @@ export function Profile() {
</KeyboardAvoidingView> </KeyboardAvoidingView>
</Modal> </Modal>
</ScrollView> </View>
</View>
); );
} }

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

@ -2,14 +2,22 @@ import { StyleSheet } from 'react-native';
import { Colors } from 'constants/Colors'; import { Colors } from 'constants/Colors';
export const styles = StyleSheet.create({ export const styles = StyleSheet.create({
container: {
width: '100%',
height: '100%',
},
content: { content: {
width: '100%', width: '100%',
height: '100%', height: '100%',
backgroundColor: Colors.screenBase, position: 'absolute',
top: 0,
display: 'flex',
alignItems: 'center',
},
logo: {
alignSelf: 'center',
}, },
details: { details: {
position: 'relative',
top: -32,
minHeight: 32, minHeight: 32,
borderTopRightRadius: 32, borderTopRightRadius: 32,
borderTopLeftRadius: 32, borderTopLeftRadius: 32,
@ -20,11 +28,13 @@ export const styles = StyleSheet.create({
borderRightWidth: 0.2, borderRightWidth: 0.2,
paddingLeft: 1, paddingLeft: 1,
paddingRight: 1, paddingRight: 1,
display: 'flex',
flexShrink: 1,
flexGrow: 1,
paddingBottom: 16,
}, },
control: { control: {
position: 'absolute',
width: '100%', width: '100%',
top: -24,
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
}, },
@ -81,6 +91,8 @@ export const styles = StyleSheet.create({
backgroundColor: Colors.areaBase, backgroundColor: Colors.areaBase,
borderRadius: 8, borderRadius: 8,
marginTop: 16, marginTop: 16,
display: 'flex',
flexShrink: 1,
}, },
divider: { divider: {
width: '100%', width: '100%',
@ -94,6 +106,15 @@ export const styles = StyleSheet.create({
flexDirection: 'row', flexDirection: 'row',
padding: 8, padding: 8,
}, },
description: {
display: 'flex',
flexShrink: 1,
},
descriptionIcon: {
alignSelf: 'flex-start',
paddingLeft: 8,
paddingRight: 16,
},
icon: { icon: {
paddingLeft: 8, paddingLeft: 8,
paddingRight: 16, paddingRight: 16,
@ -109,6 +130,7 @@ export const styles = StyleSheet.create({
color: Colors.inputPlaceholder, color: Colors.inputPlaceholder,
fontFamily: 'roboto', fontFamily: 'roboto',
fontStyle: 'italic', fontStyle: 'italic',
flex: 1,
}, },
descriptionSet: { descriptionSet: {
fontSize: 16, fontSize: 16,
@ -121,6 +143,7 @@ export const styles = StyleSheet.create({
color: Colors.inputPlaceholder, color: Colors.inputPlaceholder,
fontFamily: 'roboto', fontFamily: 'roboto',
fontStyle: 'italic', fontStyle: 'italic',
flex: 1,
}, },
visibleLabel: { visibleLabel: {
fontSize: 16, fontSize: 16,