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,

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

@ -54,6 +54,7 @@ export function TopicItem({ item, focused, focus, hosting }) {
} }
return ( return (
<View style={styles.wrapper}>
<TouchableOpacity activeOpacity={1} style={styles.item} onPress={focus}> <TouchableOpacity activeOpacity={1} style={styles.item} onPress={focus}>
<View style={styles.header}> <View style={styles.header}>
{ state.logo && ( { state.logo && (
@ -64,23 +65,6 @@ export function TopicItem({ item, focused, focus, hosting }) {
)} )}
<Text style={styles.name}>{ state.name }</Text> <Text style={styles.name}>{ state.name }</Text>
<Text style={styles.timestamp}>{ state.timestamp }</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> </View>
{ state.status === 'confirmed' && ( { state.status === 'confirmed' && (
<> <>
@ -103,7 +87,7 @@ export function TopicItem({ item, focused, focus, hosting }) {
</View> </View>
)} )}
{ state.message && ( { 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> </View>
</Modal> </Modal>
</TouchableOpacity> </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'; 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,
}, },
}) })