fixing styles on drawers

This commit is contained in:
Roland Osborne 2022-09-28 15:21:02 -07:00
parent 0f8a90fb85
commit 13a7081361
3 changed files with 56 additions and 48 deletions

View File

@ -83,33 +83,37 @@ export function Cards({ openRegistry, openContact }) {
</> </>
)} )}
{ !state.tabbed && ( { !state.tabbed && (
<SafeAreaView edges={['top', 'right']} style={styles.searcharea}> <>
<View style={styles.searchbar}> <View style={styles.searcharea}>
{ state.sorting && ( <SafeAreaView edges={['top', 'right']} style={styles.searchbar}>
<TouchableOpacity style={styles.sort} onPress={actions.unsort}> { state.sorting && (
<Ionicons style={styles.icon} name="menufold" size={18} color={Colors.text} /> <TouchableOpacity style={styles.sort} onPress={actions.unsort}>
<Ionicons style={styles.icon} name="menufold" size={18} color={Colors.text} />
</TouchableOpacity>
)}
{ !state.sorting && (
<TouchableOpacity style={styles.sort} onPress={actions.sort}>
<Ionicons style={styles.icon} name="menufold" size={18} color={Colors.disabled} />
</TouchableOpacity>
)}
<View style={styles.inputwrapper}>
<Ionicons style={styles.icon} name="search1" size={16} color={Colors.disabled} />
<TextInput style={styles.inputfield} value={state.filter} onChangeText={actions.setFilter}
autoCapitalize="none" placeholderTextColor={Colors.disabled} placeholder="Contacts" />
</View>
<TouchableOpacity style={styles.add} onPress={openRegistry}>
<Ionicons name={'adduser'} size={16} color={Colors.white} style={[styles.box, { transform: [ { rotateY: "180deg" }, ]} ]}/>
</TouchableOpacity> </TouchableOpacity>
)} </SafeAreaView>
{ !state.sorting && (
<TouchableOpacity style={styles.sort} onPress={actions.sort}>
<Ionicons style={styles.icon} name="menufold" size={18} color={Colors.disabled} />
</TouchableOpacity>
)}
<View style={styles.inputwrapper}>
<Ionicons style={styles.icon} name="search1" size={16} color={Colors.disabled} />
<TextInput style={styles.inputfield} value={state.filter} onChangeText={actions.setFilter}
autoCapitalize="none" placeholderTextColor={Colors.disabled} placeholder="Contacts" />
</View>
<TouchableOpacity style={styles.add} onPress={openRegistry}>
<Ionicons name={'adduser'} size={16} color={Colors.white} style={[styles.box, { transform: [ { rotateY: "180deg" }, ]} ]}/>
</TouchableOpacity>
</View> </View>
<FlatList style={styles.cards} <SafeAreaView edges={['right']} style={styles.searcharea}>
data={state.cards} <FlatList style={styles.cards}
renderItem={({ item }) => <CardItem item={item} openContact={openContact} />} data={state.cards}
keyExtractor={item => item.cardId} renderItem={({ item }) => <CardItem item={item} openContact={openContact} />}
/> keyExtractor={item => item.cardId}
</SafeAreaView> />
</SafeAreaView>
</>
)} )}
</View> </View>
); );

View File

@ -20,7 +20,7 @@ export function ConversationHeader({ channel, closeConversation, openDetails })
return ( return (
<View style={styles.title}> <View style={styles.title}>
<View style={styles.subject}> <View style={styles.subject}>
<Text style={styles.subjectText}>{ state.subject }</Text> <Text style={styles.subjectText} numberOfLines={1} ellipsizeMode={'tail'}>{ state.subject }</Text>
</View> </View>
<TouchableOpacity style={styles.action} onPress={setDetails}> <TouchableOpacity style={styles.action} onPress={setDetails}>
<Ionicons name="setting" size={20} color={Colors.primary} /> <Ionicons name="setting" size={20} color={Colors.primary} />
@ -48,7 +48,7 @@ export function Conversation({ channel, closeConversation, openDetails }) {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<View style={styles.header}> <View style={styles.header}>
<Text style={styles.subjectText}>{ state.subject }</Text> <Text style={styles.subjectText} numberOfLines={1} ellipsizeMode={'tail'}>{ state.subject }</Text>
<TouchableOpacity style={styles.action} onPress={openDetails}> <TouchableOpacity style={styles.action} onPress={openDetails}>
<Ionicons name="setting" size={20} color={Colors.primary} /> <Ionicons name="setting" size={20} color={Colors.primary} />
</TouchableOpacity> </TouchableOpacity>

View File

@ -102,31 +102,35 @@ export function Registry({ closeRegistry, openContact }) {
</> </>
)} )}
{ !state.tabbed && ( { !state.tabbed && (
<SafeAreaView edges={['right']}> <>
<View style={styles.searcharea}> <View style={styles.searcharea}>
<View style={styles.searchbar}> <SafeAreaView edges={['right']}>
{ state.busy && ( <View style={styles.searchbar}>
<View style={styles.search}> { state.busy && (
<ActivityIndicator /> <View style={styles.search}>
<ActivityIndicator />
</View>
)}
{ !state.busy && (
<TouchableOpacity style={styles.search} onPress={search}>
<Ionicons name={'search1'} size={16} color={Colors.white} />
</TouchableOpacity>
)}
<View style={styles.inputwrapper}>
<TextInput style={styles.inputfield} value={state.server} onChangeText={actions.setServer}
autoCapitalize="none" placeholderTextColor={Colors.disabled} placeholder="Server" />
</View> </View>
)}
{ !state.busy && (
<TouchableOpacity style={styles.search} onPress={search}>
<Ionicons name={'search1'} size={16} color={Colors.white} />
</TouchableOpacity>
)}
<View style={styles.inputwrapper}>
<TextInput style={styles.inputfield} value={state.server} onChangeText={actions.setServer}
autoCapitalize="none" placeholderTextColor={Colors.disabled} placeholder="Server" />
</View> </View>
</View> </SafeAreaView>
</View> </View>
<FlatList style={styles.accounts} <SafeAreaView edges={['right']}>
data={state.accounts} <FlatList style={styles.accounts}
renderItem={({ item }) => <RegistryItem item={item} openContact={openContact} />} data={state.accounts}
keyExtractor={item => item.guid} renderItem={({ item }) => <RegistryItem item={item} openContact={openContact} />}
/> keyExtractor={item => item.guid}
</SafeAreaView> />
</SafeAreaView>
</>
)} )}
</View> </View>
); );