martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-04-24 02:25:26 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

loading registry

Browse Source
This commit is contained in:
balzack 2024-10-21 15:28:53 -07:00
parent 717274f91b
commit faa0c727f8
4 changed files with 91 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/client/mobile/src/registry/Registry.tsx
View File

@ -1,5 +1,7 @@
import React from 'react';
import { IconButton } from 'react-native-paper';
import { ContactParams } from '../profile/Profile';
export function Registry() {
return <></>;
export function Registry({ close, openContact }: { close: ()=>void, openContact: (params: ContactParams)=>void }) {
return <IconButton mode="contained" icon={'close'} size={32} onPress={close} />
}

29
app/client/mobile/src/session/Session.styled.ts
View File

@ -1,7 +1,7 @@
import {StyleSheet} from 'react-native';
export const styles = StyleSheet.create({
screen: {
container: {
width: '100%',
height: '100%',
},
@ -22,4 +22,31 @@ export const styles = StyleSheet.create({
channels: {
flexGrow: 1,
},
screen: {
width: '100%',
height: '100%',
display: 'flex',
flexDirection: 'column',
},
body: {
width: '100%',
flexGrow: 1,
flexShrink: 1,
},
tabs: {
flexShrink: 0,
height: 64,
width: '100%',
displlay: 'flex',
flexDirection: 'row',
},
idleTab: {
flex: 1,
backgroundColor: 'transparent',
opacity: 0.5,
},
activeTab: {
flex: 1,
backgroundColor: 'transparent',
}
});

100
app/client/mobile/src/session/Session.tsx
View File

@ -1,7 +1,7 @@
import React, {useState} from 'react';
import {SafeAreaView, View, useColorScheme} from 'react-native';
import {styles} from './Session.styled';
import {BottomNavigation, Surface, Text} from 'react-native-paper';
import {IconButton, Surface, Text} from 'react-native-paper';
import {Settings} from '../settings/Settings';
import {Channels} from '../channels/Channels';
import {Contacts} from '../contacts/Contacts';
@ -26,59 +26,55 @@ const ProfileDrawer = createDrawerNavigator();
const DetailsDrawer = createDrawerNavigator();
const ContactStack = createStackNavigator();
const TopicStack = createStackNavigator();
const ContentStack = createStackNavigator();
export function Session() {
const {state} = useSession();
const scheme = useColorScheme();
const [index, setIndex] = useState(0);
const [routes] = useState([
{
key: 'channels',
title: 'Channels',
focusedIcon: 'comment-multiple',
unfocusedIcon: 'comment-multiple-outline',
},
{
key: 'contacts',
title: 'Contacts',
focusedIcon: 'contacts',
unfocusedIcon: 'contacts-outline',
},
{
key: 'settings',
title: 'Settings',
focusedIcon: 'cog',
unfocusedIcon: 'cog-outline',
},
]);
const [tab, setTab] = useState('content');
const sessionNav = {strings: state.strings};
const ChannelsRoute = () => <Channels />;
const ContactsRoute = () => <ContactTab />;
const SettingsRoute = () => <Settings showLogout={true} />;
const renderScene = BottomNavigation.SceneMap({
channels: ChannelsRoute,
contacts: ContactsRoute,
settings: SettingsRoute,
});
return (
<View style={styles.screen}>
<View style={styles.session}>
{state.layout !== 'large' && (
<Surface elevation={2}>
<SafeAreaView style={{ width: '100%', height: '100%' }}>
<NavigationContainer
theme={scheme === 'dark' ? DarkTheme : DefaultTheme}>
<BottomNavigation
barStyle={{ height: 64 }}
labeled={false}
navigationState={{index, routes}}
onIndexChange={setIndex}
renderScene={renderScene}
/>
</NavigationContainer>
<View style={styles.screen}>
<View style={{...styles.body, display: tab === 'content' ? 'flex' : 'none'}}>
<ContentTab scheme={scheme} />
</View>
<View style={{...styles.body, display: tab === 'contacts' ? 'flex' : 'none'}}>
<ContactTab scheme={scheme} />
</View>
<View style={{...styles.body, display: tab === 'settings' ? 'flex' : 'none'}}>
<Settings showLogout={true} />
</View>
<View style={styles.tabs}>
{ tab === 'content' && (
<IconButton style={styles.activeTab} mode="contained" icon={'comment-multiple'} size={28} onPress={()=>{setTab('content')}} />
)}
{ tab !== 'content' && (
<IconButton style={styles.idleTab} mode="contained" icon={'comment-multiple-outline'} size={28} onPress={()=>{setTab('content')}} />
)}
{ tab === 'contacts' && (
<IconButton style={styles.activeTab} mode="contained" icon={'contacts'} size={28} onPress={()=>{setTab('contacts')}} />
)}
{ tab !== 'contacts' && (
<IconButton style={styles.idleTab} mode="contained" icon={'contacts-outline'} size={28} onPress={()=>{setTab('contacts')}} />
)}
{ tab === 'settings' && (
<IconButton style={styles.activeTab} mode="contained" icon={'cog'} size={28} onPress={()=>{setTab('settings')}} />
)}
{ tab !== 'settings' && (
<IconButton style={styles.idleTab} mode="contained" icon={'cog-outline'} size={28} onPress={()=>{setTab('settings')}} />
)}
</View>
</View>
</SafeAreaView>
</Surface>
)}
@ -92,13 +88,31 @@ export function Session() {
);
}
function ContactTab() {
function ContentTab({ scheme }: { scheme: string }) {
return (
<NavigationContainer
theme={scheme === 'dark' ? DarkTheme : DefaultTheme}>
<ContactStack.Navigator initialRouteName="contacts" screenOptions={{ headerShown: false }}>
<ContactStack.Screen name="contacts" options={{ headerBackTitleVisible: false }}>
{(props) => <Contacts openRegistry={()=>{console.log('openreg')}} openContact={(params: ContactParams)=>{console.log('opencon', params)}} />}
<ContactStack.Screen name="content" options={{ headerBackTitleVisible: false }}>
{(props) => <Text>CONTENT</Text>}
</ContactStack.Screen>
</ContactStack.Navigator>
</NavigationContainer>
);
}
function ContactTab({ scheme }: { scheme: string }) {
return (
<NavigationContainer theme={scheme === 'dark' ? DarkTheme : DefaultTheme}>
<ContactStack.Navigator initialRouteName="contacts" screenOptions={{ headerShown: false }}>
<ContactStack.Screen name="contacts" options={{ headerBackTitleVisible: false }}>
{(props) => <Contacts openRegistry={()=>{props.navigation.navigate('registry')}} openContact={(params: ContactParams)=>{console.log('opencon', params)}} />}
</ContactStack.Screen>
<ContactStack.Screen name="registry" options={{ headerBackTitleVisible: false }}>
{(props) => <Registry close={props.navigation.goBack} openContact={(params: ContactParams)=>{console.log('opencon', params)}} />}
</ContactStack.Screen>
</ContactStack.Navigator>
</NavigationContainer>
);
}

4
app/client/mobile/src/settings/Settings.tsx
View File

@ -326,7 +326,7 @@ export function Settings({showLogout}: {showLogout: boolean}) {
};
return (
<>
<Surface elevation={0}>
<ScrollView bounces={false}>
<SafeAreaView style={styles.settings}>
<Text
@ -1427,6 +1427,6 @@ export function Settings({showLogout}: {showLogout: boolean}) {
</KeyboardAwareScrollView>
</View>
</Modal>
</>
</Surface>
);
}