martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-14 20:49: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: {
paddingBottom: 32,
paddingTop: 8,
},
conversation: {
flexShrink: 1,

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

@ -54,6 +54,7 @@ export function TopicItem({ item, focused, focus, hosting }) {
}
return (
<View style={styles.wrapper}>
<TouchableOpacity activeOpacity={1} style={styles.item} onPress={focus}>
<View style={styles.header}>
{ state.logo && (
@ -64,23 +65,6 @@ export function TopicItem({ item, focused, focus, hosting }) {
)}
<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>
)}
{ state.editable && (
<TouchableOpacity style={styles.icon}>
<MatIcons name="pencil-outline" size={20} color={Colors.white} />
</TouchableOpacity>
)}
<TouchableOpacity style={styles.icon}>
<MatIcons name="block-helper" size={18} color={Colors.white} />
</TouchableOpacity>
</View>
)}
</View>
{ state.status === 'confirmed' && (
<>
@ -103,7 +87,7 @@ export function TopicItem({ item, focused, focus, hosting }) {
</View>
)}
{ state.message && (
<Text style={{ paddingLeft: 52, fontSize: state.fontSize, color: state.fontColor }}>{ state.message }</Text>
<Text style={{ ...styles.message, fontSize: state.fontSize }}>{ state.message }</Text>
)}
</>
)}
@ -130,6 +114,24 @@ export function TopicItem({ item, focused, focus, hosting }) {
</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.editable && (
<TouchableOpacity style={styles.icon}>
<MatIcons name="pencil-outline" size={20} color={Colors.white} />
</TouchableOpacity>
)}
<TouchableOpacity style={styles.icon}>
<MatIcons name="block-helper" size={18} color={Colors.white} />
</TouchableOpacity>
</View>
)}
</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,
},
})