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

topic focus options clipping in android

Browse Source
This commit is contained in:
balzack 2022-10-17 22:33:57 -07:00
parent fb6d2e3e7a
commit 3ce3711bd4
3 changed files with 83 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/mobile/src/session/conversation/Conversation.styled.js
View File

@ -50,6 +50,7 @@ export const styles = StyleSheet.create({
}, },
topics: { topics: {
paddingBottom: 32, paddingBottom: 32,
paddingTop: 8,
}, },
conversation: { conversation: {
flexShrink: 1, flexShrink: 1,

138
app/mobile/src/session/conversation/topicItem/TopicItem.jsx
View File

@ -54,82 +54,84 @@ export function TopicItem({ item, focused, focus, hosting }) {
} }
return ( return (
<TouchableOpacity activeOpacity={1} style={styles.item} onPress={focus}> <View style={styles.wrapper}>
<View style={styles.header}> <TouchableOpacity activeOpacity={1} style={styles.item} onPress={focus}>
{ state.logo && ( <View style={styles.header}>
<Image source={{ uri: state.logo }} style={{ width: 28, height: 28, borderRadius: 6 }} /> { state.logo && (
)} <Image source={{ uri: state.logo }} style={{ width: 28, height: 28, borderRadius: 6 }} />
{ !state.logo && ( )}
<Image source={avatar} style={{ width: 28, height: 28, borderRadius: 6 }} /> { !state.logo && (
)} <Image source={avatar} style={{ width: 28, height: 28, borderRadius: 6 }} />
<Text style={styles.name}>{ state.name }</Text> )}
<Text style={styles.timestamp}>{ state.timestamp }</Text> <Text style={styles.name}>{ state.name }</Text>
{ focused && ( <Text style={styles.timestamp}>{ state.timestamp }</Text>
<View style={styles.focused}> </View>
{ state.deletable && ( { state.status === 'confirmed' && (
<TouchableOpacity style={styles.icon}> <>
<MatIcons name="delete-outline" size={20} color={Colors.white} /> { state.transform === 'complete' && state.assets && (
</TouchableOpacity> <FlatList contentContainerStyle={styles.carousel}
data={state.assets}
horizontal={true}
showsHorizontalScrollIndicator={false}
renderItem={renderThumb}
/>
)} )}
{ state.editable && ( { state.transform === 'incomplete' && (
<TouchableOpacity style={styles.icon}> <View style={styles.status}>
<MatIcons name="pencil-outline" size={20} color={Colors.white} /> <MatIcons name="cloud-refresh" size={32} color={Colors.background} />
</TouchableOpacity> </View>
)} )}
<TouchableOpacity style={styles.icon}> { state.transform === 'error' && (
<MatIcons name="block-helper" size={18} color={Colors.white} /> <View style={styles.status}>
</TouchableOpacity> <AntIcons name="weather-cloudy-alert" size={32} color={Colors.alert} />
</View>
)}
{ state.message && (
<Text style={{ ...styles.message, fontSize: state.fontSize }}>{ state.message }</Text>
)}
</>
)}
{ state.status !== 'confirmed' && (
<View style={styles.status}>
<MatIcons name="cloud-refresh" size={32} color={Colors.divider} />
</View> </View>
)} )}
</View> <Modal
{ state.status === 'confirmed' && ( animationType="fade"
<> transparent={true}
{ state.transform === 'complete' && state.assets && ( visible={state.carousel}
<FlatList contentContainerStyle={styles.carousel} supportedOrientations={['portrait', 'landscape']}
data={state.assets} onRequestClose={actions.hideCarousel}
horizontal={true} >
showsHorizontalScrollIndicator={false} <View style={styles.modal}>
renderItem={renderThumb} <Carousel
/> data={state.assets}
firstItem={state.carouselIndex}
renderItem={renderAsset}
sliderWidth={state.width}
itemWidth={state.width}
/>
</View>
</Modal>
</TouchableOpacity>
{ focused && (
<View style={styles.focused}>
{ state.deletable && (
<TouchableOpacity style={styles.icon}>
<MatIcons name="delete-outline" size={20} color={Colors.white} />
</TouchableOpacity>
)} )}
{ state.transform === 'incomplete' && ( { state.editable && (
<View style={styles.status}> <TouchableOpacity style={styles.icon}>
<MatIcons name="cloud-refresh" size={32} color={Colors.background} /> <MatIcons name="pencil-outline" size={20} color={Colors.white} />
</View> </TouchableOpacity>
)} )}
{ state.transform === 'error' && ( <TouchableOpacity style={styles.icon}>
<View style={styles.status}> <MatIcons name="block-helper" size={18} color={Colors.white} />
<AntIcons name="weather-cloudy-alert" size={32} color={Colors.alert} /> </TouchableOpacity>
</View>
)}
{ state.message && (
<Text style={{ paddingLeft: 52, fontSize: state.fontSize, color: state.fontColor }}>{ state.message }</Text>
)}
</>
)}
{ state.status !== 'confirmed' && (
<View style={styles.status}>
<MatIcons name="cloud-refresh" size={32} color={Colors.divider} />
</View> </View>
)} )}
<Modal </View>
animationType="fade"
transparent={true}
visible={state.carousel}
supportedOrientations={['portrait', 'landscape']}
onRequestClose={actions.hideCarousel}
>
<View style={styles.modal}>
<Carousel
data={state.assets}
firstItem={state.carouselIndex}
renderItem={renderAsset}
sliderWidth={state.width}
itemWidth={state.width}
/>
</View>
</Modal>
</TouchableOpacity>
); );
} }

18
app/mobile/src/session/conversation/topicItem/TopicItem.styled.js
View File

@ -2,12 +2,13 @@ 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({
wrapper: {
paddingTop: 8,
},
item: { item: {
borderTopWidth: 1, borderTopWidth: 1,
borderColor: Colors.white, borderColor: Colors.white,
paddingTop: 8, paddingTop: 8,
paddingBottom: 8,
paddingRight: 16,
}, },
header: { header: {
display: 'flex', display: 'flex',
@ -45,8 +46,8 @@ export const styles = StyleSheet.create({
}, },
focused: { focused: {
position: 'absolute', position: 'absolute',
top: -16, top: 0,
right: 0, right: 16,
display: 'flex', display: 'flex',
flexDirection: 'row', flexDirection: 'row',
backgroundColor: 'rgba(0, 0, 0, 0.5)', backgroundColor: 'rgba(0, 0, 0, 0.5)',
@ -57,8 +58,13 @@ export const styles = StyleSheet.create({
paddingRight: 8, paddingRight: 8,
}, },
icon: { icon: {
paddingLeft: 4, paddingLeft: 8,
paddingRight: 4, paddingRight: 8,
},
message: {
paddingRight: 16,
paddingLeft: 52,
color: Colors.fontColor,
}, },
}) })