martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-14 12:39:17 +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: {
paddingBottom: 32,
paddingTop: 8,
},
conversation: {
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 (
<TouchableOpacity activeOpacity={1} style={styles.item} onPress={focus}>
<View style={styles.header}>
{ 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 }} />
)}
<Text style={styles.name}>{ state.name }</Text>
<Text style={styles.timestamp}>{ state.timestamp }</Text>
{ focused && (
<View style={styles.focused}>
{ state.deletable && (
<TouchableOpacity style={styles.icon}>
<MatIcons name="delete-outline" size={20} color={Colors.white} />
</TouchableOpacity>
<View style={styles.wrapper}>
<TouchableOpacity activeOpacity={1} style={styles.item} onPress={focus}>
<View style={styles.header}>
{ 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 }} />
)}
<Text style={styles.name}>{ state.name }</Text>
<Text style={styles.timestamp}>{ state.timestamp }</Text>
</View>
{ state.status === 'confirmed' && (
<>
{ state.transform === 'complete' && state.assets && (
<FlatList contentContainerStyle={styles.carousel}
data={state.assets}
horizontal={true}
showsHorizontalScrollIndicator={false}
renderItem={renderThumb}
/>
)}
{ state.editable && (
<TouchableOpacity style={styles.icon}>
<MatIcons name="pencil-outline" size={20} color={Colors.white} />
</TouchableOpacity>
{ state.transform === 'incomplete' && (
<View style={styles.status}>
<MatIcons name="cloud-refresh" size={32} color={Colors.background} />
</View>
)}
<TouchableOpacity style={styles.icon}>
<MatIcons name="block-helper" size={18} color={Colors.white} />
</TouchableOpacity>
{ state.transform === 'error' && (
<View style={styles.status}>
<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>
{ state.status === 'confirmed' && (
<>
{ state.transform === 'complete' && state.assets && (
<FlatList contentContainerStyle={styles.carousel}
data={state.assets}
horizontal={true}
showsHorizontalScrollIndicator={false}
renderItem={renderThumb}
/>
<Modal
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>
{ focused && (
<View style={styles.focused}>
{ state.deletable && (
<TouchableOpacity style={styles.icon}>
<MatIcons name="delete-outline" size={20} color={Colors.white} />
</TouchableOpacity>
)}
{ state.transform === 'incomplete' && (
<View style={styles.status}>
<MatIcons name="cloud-refresh" size={32} color={Colors.background} />
</View>
{ state.editable && (
<TouchableOpacity style={styles.icon}>
<MatIcons name="pencil-outline" size={20} color={Colors.white} />
</TouchableOpacity>
)}
{ state.transform === 'error' && (
<View style={styles.status}>
<AntIcons name="weather-cloudy-alert" size={32} color={Colors.alert} />
</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} />
<TouchableOpacity style={styles.icon}>
<MatIcons name="block-helper" size={18} color={Colors.white} />
</TouchableOpacity>
</View>
)}
<Modal
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>
</View>
);
}

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