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

adding screen headers

Browse Source
This commit is contained in:
Roland Osborne 2022-09-27 22:30:47 -07:00
parent a112ff5bc9
commit 1d2b807922
5 changed files with 86 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
app/mobile/src/session/Session.jsx
View File

@ -10,7 +10,6 @@ import { useSession } from './useSession.hook';
import { styles } from './Session.styled'; import { styles } from './Session.styled';
import Colors from 'constants/Colors'; import Colors from 'constants/Colors';
import { ProfileTitle, Profile } from './profile/Profile'; import { ProfileTitle, Profile } from './profile/Profile';
import { Channels } from './channels/Channels';
import { CardsTitle, CardsBody, Cards } from './cards/Cards'; import { CardsTitle, CardsBody, Cards } from './cards/Cards';
import { useCards } from './cards/useCards.hook'; import { useCards } from './cards/useCards.hook';
import { RegistryTitle, RegistryBody, Registry } from './registry/Registry'; import { RegistryTitle, RegistryBody, Registry } from './registry/Registry';
@ -19,6 +18,8 @@ import { Contact, ContactTitle } from './contact/Contact';
import { Details } from './details/Details'; import { Details } from './details/Details';
import { Conversation } from './conversation/Conversation'; import { Conversation } from './conversation/Conversation';
import { Welcome } from './welcome/Welcome'; import { Welcome } from './welcome/Welcome';
import { ChannelsTitle, ChannelsBody, Channels } from './channels/Channels';
import { useChannels } from './channels/useChannels.hook';
const ConversationStack = createStackNavigator(); const ConversationStack = createStackNavigator();
const ProfileStack = createStackNavigator(); const ProfileStack = createStackNavigator();
@ -67,10 +68,16 @@ export function Session() {
navigation.goBack(); navigation.goBack();
} }
const channels = useChannels();
return ( return (
<ConversationStack.Navigator screenOptions={({ route }) => ({ headerShown: false })}> <ConversationStack.Navigator screenOptions={({ route }) => ({ headerShown: true })}>
<ConversationStack.Screen name="channels"> <ConversationStack.Screen name="channels" options={{
{(props) => <ChannelsTabScreen openConversation={setConversation} navigation={props.navigation} />} headerStyle: { backgroundColor: Colors.titleBackground },
headerBackTitleVisible: false,
headerTitle: (props) => { console.log(props); return <ChannelsTitle state={channels.state} actions={channels.actions} /> }
}}>
{(props) => <ChannelsBody state={channels.state} actions={channels.actions} openConversation={(cardId, channelId) => setConversation(props.navigation, cardId, channelId)} />}
</ConversationStack.Screen> </ConversationStack.Screen>
<ConversationStack.Screen name="conversation"> <ConversationStack.Screen name="conversation">
{(props) => <ConversationTabScreen channel={selected} closeConversation={clearConversation} openDetails={setDetail} navigation={props.navigation} />} {(props) => <ConversationTabScreen channel={selected} closeConversation={clearConversation} openDetails={setDetail} navigation={props.navigation} />}
@ -81,11 +88,6 @@ export function Session() {
</ConversationStack.Navigator> </ConversationStack.Navigator>
); );
} }
const ChannelsTabScreen = ({ navigation, openConversation }) => {
return (
<Channels openConversation={(cardId, channelId) => openConversation(navigation, cardId, channelId)} />
)
}
const ConversationTabScreen = ({ navigation, channel, closeConversation, openDetails }) => { const ConversationTabScreen = ({ navigation, channel, closeConversation, openDetails }) => {
return <Conversation channel={channel} closeConversation={() => closeConversation(navigation)} openDetails={() => openDetails(navigation)} /> return <Conversation channel={channel} closeConversation={() => closeConversation(navigation)} openDetails={() => openDetails(navigation)} />
} }
@ -320,9 +322,7 @@ export function Session() {
tabBarActiveTintColor: Colors.white, tabBarActiveTintColor: Colors.white,
tabBarInactiveTintColor: Colors.disabled, tabBarInactiveTintColor: Colors.disabled,
})}> })}>
<Tab.Screen name="Conversation"> <Tab.Screen name="Conversation" component={ConversationStackScreen} />
{(props) => (<SafeAreaView style={styles.tabframe} edges={['top']}><ConversationStackScreen /></SafeAreaView>)}
</Tab.Screen>
<Tab.Screen name="Profile" component={ProfileStackScreen} /> <Tab.Screen name="Profile" component={ProfileStackScreen} />
<Tab.Screen name="Contacts" component={ContactStackScreen} /> <Tab.Screen name="Contacts" component={ContactStackScreen} />
</Tab.Navigator> </Tab.Navigator>

101
app/mobile/src/session/channels/Channels.jsx
View File

@ -7,56 +7,59 @@ import { ChannelItem } from './channelItem/ChannelItem';
import Colors from 'constants/Colors'; import Colors from 'constants/Colors';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context'; import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
export function Channels({ openConversation }) { export function ChannelsTitle({ state, actions }) {
const { state, actions } = useChannels();
return ( return (
<View style={styles.container}> <View style={styles.title}>
{ state.tabbed && ( <View style={styles.inputwrapper}>
<> <Ionicons style={styles.icon} name="search1" size={16} color={Colors.disabled} />
<View style={styles.topbar}> <TextInput style={styles.inputfield} value={state.filter} onChangeText={actions.setFilter}
<View style={styles.inputwrapper}> autoCapitalize="none" placeholderTextColor={Colors.disabled} placeholder="Topic" />
<Ionicons style={styles.icon} name="search1" size={16} color={Colors.disabled} /> <View style={styles.space} />
<TextInput style={styles.inputfield} value={state.filter} onChangeText={actions.setFilter} </View>
autoCapitalize="none" placeholderTextColor={Colors.disabled} placeholder="Topic" /> <TouchableOpacity style={styles.add}>
<View style={styles.space} /> <Ionicons name={'message1'} size={16} color={Colors.white} style={[styles.box, { transform: [ { rotateY: "180deg" }, ]} ]}/>
</View> <Text style={styles.newtext}>New</Text>
<TouchableOpacity style={styles.add}> </TouchableOpacity>
<Ionicons name={'message1'} size={16} color={Colors.white} style={[styles.box, { transform: [ { rotateY: "180deg" }, ]} ]}/> </View>
<Text style={styles.newtext}>New</Text> );
</TouchableOpacity> }
</View>
<FlatList style={styles.channels} export function ChannelsBody({ state, actions, openConversation }) {
data={state.channels} return (
renderItem={({ item }) => <ChannelItem item={item} openConversation={openConversation} />} <FlatList style={styles.channels}
keyExtractor={item => (`${item.cardId}:${item.channelId}`)} data={state.channels}
/> renderItem={({ item }) => <ChannelItem item={item} openConversation={openConversation} />}
</> keyExtractor={item => (`${item.cardId}:${item.channelId}`)}
)} />
{ !state.tabbed && ( );
<>
<SafeAreaView edges={['left']} style={styles.searchbar}> }
<View style={styles.inputwrapper}>
<Ionicons style={styles.icon} name="search1" size={16} color={Colors.disabled} /> export function Channels({ openConversation }) {
<TextInput style={styles.inputfield} value={state.topic} onChangeText={actions.setTopic} const { state, actions } = useChannels();
autoCapitalize="none" placeholderTextColor={Colors.disabled} placeholder="Topic" /> return (
<View style={styles.space} /> <View style={styles.container}>
</View> <SafeAreaView edges={['left']} style={styles.searchbar}>
</SafeAreaView> <View style={styles.inputwrapper}>
<SafeAreaView style={styles.channels} edges={['left']}> <Ionicons style={styles.icon} name="search1" size={16} color={Colors.disabled} />
<FlatList <TextInput style={styles.inputfield} value={state.topic} onChangeText={actions.setTopic}
data={state.channels} autoCapitalize="none" placeholderTextColor={Colors.disabled} placeholder="Topic" />
renderItem={({ item }) => <ChannelItem item={item} openConversation={openConversation} />} <View style={styles.space} />
keyExtractor={item => (`${item.cardId}:${item.channelId}`)} </View>
/> </SafeAreaView>
</SafeAreaView> <SafeAreaView style={styles.channels} edges={['left']}>
<SafeAreaView style={styles.bottomArea} edges={['left']}> <FlatList
<TouchableOpacity style={styles.addbottom}> data={state.channels}
<Ionicons name={'message1'} size={16} color={Colors.white} /> renderItem={({ item }) => <ChannelItem item={item} openConversation={openConversation} />}
<Text style={styles.newtext}>New Topic</Text> keyExtractor={item => (`${item.cardId}:${item.channelId}`)}
</TouchableOpacity> />
</SafeAreaView> </SafeAreaView>
</> <SafeAreaView style={styles.bottomArea} edges={['left']}>
)} <TouchableOpacity style={styles.addbottom}>
<Ionicons name={'message1'} size={16} color={Colors.white} />
<Text style={styles.newtext}>New Topic</Text>
</TouchableOpacity>
</SafeAreaView>
</View> </View>
); );
} }

9
app/mobile/src/session/channels/Channels.styled.js
View File

@ -8,6 +8,12 @@ export const styles = StyleSheet.create({
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
}, },
title: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
},
topbar: { topbar: {
borderTopWidth: 1, borderTopWidth: 1,
borderBottomWidth: 1, borderBottomWidth: 1,
@ -32,6 +38,9 @@ export const styles = StyleSheet.create({
backgroundColor: Colors.white, backgroundColor: Colors.white,
alignItems: 'center', alignItems: 'center',
flexGrow: 1, flexGrow: 1,
flexShrink: 1,
paddingTop: 4,
paddingBottom: 4,
}, },
inputfield: { inputfield: {
flex: 1, flex: 1,

4
app/mobile/src/session/profile/Profile.jsx
View File

@ -13,7 +13,9 @@ import { BlockedContacts } from './blockedContacts/BlockedContacts';
export function ProfileTitle(props) { export function ProfileTitle(props) {
const { state, actions } = useProfile(); const { state, actions } = useProfile();
return ( return (
<Text style={styles.title}>{ `${state.handle}@${state.node}` }</Text> <View style={styles.title}>
<Text style={styles.titleText}>{ `${state.handle}@${state.node}` }</Text>
</View>
) )
} }

13
app/mobile/src/session/profile/Profile.styled.js
View File

@ -14,8 +14,16 @@ export const styles = StyleSheet.create({
drawer: { drawer: {
paddingTop: 16, paddingTop: 16,
}, },
title: { titleText: {
fontSize: 18, fontSize: 18,
},
title: {
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
flex: 1,
width: '100%',
textAlign: 'start',
}, },
body: { body: {
paddingTop: 16, paddingTop: 16,
@ -29,8 +37,7 @@ export const styles = StyleSheet.create({
headerText: { headerText: {
fontSize: 16, fontSize: 16,
paddingRight: 4, paddingRight: 4,
textDecorationLine: 'underline', color: Colors.text,
color: Colors.primary,
}, },
camera: { camera: {
position: 'absolute', position: 'absolute',