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

tweaking style for large layout

Browse Source
This commit is contained in:
balzack 2025-01-12 08:46:38 -08:00
parent 40bc0b8464
commit 4c947fdd9c
2 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/client/mobile/src/conversation/Conversation.styled.ts
View File

@ -5,6 +5,9 @@ export const styles = StyleSheet.create({
conversation: { conversation: {
flex: 1 flex: 1
}, },
largeConversation: {
padding: 16,
},
avoid: { avoid: {
width: '100%', width: '100%',
height: '30%', height: '30%',
@ -25,6 +28,7 @@ export const styles = StyleSheet.create({
width: 40, width: 40,
height: 32, height: 32,
display: 'flex', display: 'flex',
flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
justifyContent: 'flex-end', justifyContent: 'flex-end',
gap: 4, gap: 4,
@ -115,10 +119,15 @@ export const styles = StyleSheet.create({
}, },
header: { header: {
display: 'flex', display: 'flex',
flexDirection: 'row',
alignItems: 'center',
width: '100%', width: '100%',
minWidth: 0, minWidth: 0,
alignItems: 'center', alignItems: 'center',
}, },
largeHeader: {
height: 64,
},
title: { title: {
display: 'flex', display: 'flex',
flexDirection: 'row', flexDirection: 'row',

9
app/client/mobile/src/conversation/Conversation.tsx
View File

@ -184,9 +184,12 @@ export function Conversation({close, openDetails, wide}: {close: ()=>void, openD
} }
}); });
const containerStyle = state.layout === 'large' ? { ...styles.conversation, ...styles.largeConversation } : styles.conversation;
const headerStyle = state.layout === 'large' ? { ...styles.header, ...styles.largeHeader } : styles.header;
return ( return (
<View style={styles.conversation}> <View style={containerStyle}>
<SafeAreaView style={{ ...styles.header, flexDirection: wide ? 'row-reverse' : 'row' }}> <SafeAreaView style={{ ...headerStyle, flexDirection: state.layout === 'large' ? 'row-reverse' : 'row' }}>
<IconButton style={styles.icon} mode="contained" icon={wide ? 'close' : 'arrow-left'} size={28} onPress={onClose} /> <IconButton style={styles.icon} mode="contained" icon={wide ? 'close' : 'arrow-left'} size={28} onPress={onClose} />
<View style={styles.status}> <View style={styles.status}>
</View> </View>
@ -204,7 +207,7 @@ export function Conversation({close, openDetails, wide}: {close: ()=>void, openD
<Text adjustsFontSizeToFit={true} numberOfLines={1} style={styles.unknown}>{ `, ${state.strings.unknownContact} (${state.unknownContacts})` }</Text> <Text adjustsFontSizeToFit={true} numberOfLines={1} style={styles.unknown}>{ `, ${state.strings.unknownContact} (${state.unknownContacts})` }</Text>
)} )}
</View> </View>
<View style={{ ...styles.status, flexDirection: wide ? 'row-reverse' : 'row' }}> <View style={{ ...styles.status, flexDirection: state.layout === 'large' ? 'row-reverse' : 'row' }}>
{ state.detailSet && !state.access && ( { state.detailSet && !state.access && (
<Icon source="alert-circle-outline" size={20} color={Colors.offsync} /> <Icon source="alert-circle-outline" size={20} color={Colors.offsync} />
)} )}