martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-04-23 01:55:17 +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: {
flex: 1
},
largeConversation: {
padding: 16,
},
avoid: {
width: '100%',
height: '30%',
@ -25,6 +28,7 @@ export const styles = StyleSheet.create({
width: 40,
height: 32,
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'flex-end',
gap: 4,
@ -115,10 +119,15 @@ export const styles = StyleSheet.create({
},
header: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
width: '100%',
minWidth: 0,
alignItems: 'center',
},
largeHeader: {
height: 64,
},
title: {
display: 'flex',
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 (
<View style={styles.conversation}>
<SafeAreaView style={{ ...styles.header, flexDirection: wide ? 'row-reverse' : 'row' }}>
<View style={containerStyle}>
<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} />
<View style={styles.status}>
</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>
)}
</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 && (
<Icon source="alert-circle-outline" size={20} color={Colors.offsync} />
)}