martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-12 03:29:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

adding safe area for rotated phone

Browse Source
This commit is contained in:
balzack 2023-03-04 17:04:10 -08:00
parent dcd5af197e
commit d21d7de58a
4 changed files with 53 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -47,6 +47,7 @@ export function Session() {
const [cardId, setCardId] = useState();
const [channelId, setChannelId] = useState();
console.log("REnDER CONVERSATION STACK");
const openConversation = (navigation, card, channel) => {
(async () => {
conversation.actions.setConversation(card, channel);
@ -72,33 +73,37 @@ export function Session() {
}
return (
<ConversationStack.Navigator initialRouteName="channels" screenOptions={({ route }) => (screenParams)} >
<SafeAreaView edges={['left', 'right']} style={styles.body}>
<ConversationStack.Navigator initialRouteName="channels" screenOptions={({ route }) => (screenParams)} >
<ConversationStack.Screen name="channels" options={stackParams}>
{(props) => <Channels navigation={props.navigation} openConversation={(cardId, channelId) => openConversation(props.navigation, cardId, channelId)} />}
</ConversationStack.Screen>
<ConversationStack.Screen name="channels" options={stackParams}>
{(props) => <Channels navigation={props.navigation} openConversation={(cardId, channelId) => openConversation(props.navigation, cardId, channelId)} />}
</ConversationStack.Screen>
<ConversationStack.Screen name="conversation" options={stackParams}>
{(props) => <Conversation navigation={props.navigation} openDetails={() => openDetails(props.navigation)} closeConversation={(pop) => closeConversation(props.navigation, pop)} /> }
</ConversationStack.Screen>
<ConversationStack.Screen name="conversation" options={stackParams}>
{(props) => <Conversation navigation={props.navigation} openDetails={() => openDetails(props.navigation)} closeConversation={(pop) => closeConversation(props.navigation, pop)} /> }
</ConversationStack.Screen>
<ConversationStack.Screen name="details" options={{ ...stackParams, headerTitle: (props) => (
<Text style={styles.headertext}>Details</Text>
)}}>
{(props) => <Details clearConversation={() => clearConversation(props.navigation)} />}
</ConversationStack.Screen>
<ConversationStack.Screen name="details" options={{ ...stackParams, headerTitle: (props) => (
<Text style={styles.headertext}>Details</Text>
)}}>
{(props) => <Details clearConversation={() => clearConversation(props.navigation)} />}
</ConversationStack.Screen>
</ConversationStack.Navigator>
</ConversationStack.Navigator>
</SafeAreaView>
);
}
const ProfileStackScreen = () => {
return (
<ProfileStack.Navigator screenOptions={({ route }) => (screenParams)}>
<ProfileStack.Screen name="profile" options={{ ...stackParams, headerTitle: () => <ProfileHeader /> }}>
{(props) => <ScrollView><ProfileBody /></ScrollView>}
</ProfileStack.Screen>
</ProfileStack.Navigator>
<SafeAreaView edges={['left', 'right']} style={styles.body}>
<ProfileStack.Navigator screenOptions={({ route }) => (screenParams)}>
<ProfileStack.Screen name="profile" options={{ ...stackParams, headerTitle: () => <ProfileHeader /> }}>
{(props) => <ScrollView><ProfileBody /></ScrollView>}
</ProfileStack.Screen>
</ProfileStack.Navigator>
</SafeAreaView>
);
}
@ -126,27 +131,29 @@ export function Session() {
}
return (
<ContactStack.Navigator screenOptions={({ route }) => (screenParams)} initialRouteName="cards">
<SafeAreaView edges={['left', 'right']} style={styles.body}>
<ContactStack.Navigator screenOptions={({ route }) => (screenParams)} initialRouteName="cards">
<ContactStack.Screen name="cards" options={{ ...stackParams, headerTitle: (props) => (
<CardsHeader filter={filter} setFilter={setFilter} sort={sort} setSort={setSort} openRegistry={openRegistry} />
)}}>
{(props) => <CardsBody filter={filter} sort={sort} openContact={(contact) => openContact(props.navigation, contact)} />}
</ContactStack.Screen>
<ContactStack.Screen name="cards" options={{ ...stackParams, headerTitle: (props) => (
<CardsHeader filter={filter} setFilter={setFilter} sort={sort} setSort={setSort} openRegistry={openRegistry} />
)}}>
{(props) => <CardsBody filter={filter} sort={sort} openContact={(contact) => openContact(props.navigation, contact)} />}
</ContactStack.Screen>
<ContactStack.Screen name="contact" options={{ ...stackParams, headerTitle: (props) => (
<ContactHeader contact={contact} />
)}}>
{(props) => <ScrollView><ContactBody contact={contact} /></ScrollView>}
</ContactStack.Screen>
<ContactStack.Screen name="contact" options={{ ...stackParams, headerTitle: (props) => (
<ContactHeader contact={contact} />
)}}>
{(props) => <ScrollView><ContactBody contact={contact} /></ScrollView>}
</ContactStack.Screen>
<ContactStack.Screen name="registry" options={{ ...stackParams, headerTitle: (props) => (
<RegistryHeader search={search} setSearch={setSearch} handle={handle} setHandle={setHandle} server={server} setServer={setServer} />
)}}>
{(props) => <RegistryBody search={search} handle={handle} server={server} openContact={(contact) => openContact(props.navigation, contact)} />}
</ContactStack.Screen>
<ContactStack.Screen name="registry" options={{ ...stackParams, headerTitle: (props) => (
<RegistryHeader search={search} setSearch={setSearch} handle={handle} setHandle={setHandle} server={server} setServer={setServer} />
)}}>
{(props) => <RegistryBody search={search} handle={handle} server={server} openContact={(contact) => openContact(props.navigation, contact)} />}
</ContactStack.Screen>
</ContactStack.Navigator>
</ContactStack.Navigator>
</SafeAreaView>
);
}
@ -297,6 +304,8 @@ export function Session() {
);
}
console.log("RENDER ROOT", state.tabbed);
return (
<NavigationContainer>
<View style={styles.body}>

6
app/mobile/src/session/conversation/Conversation.jsx
View File

@ -1,5 +1,5 @@
import { useRef, useEffect, useState, useContext } from 'react';
import { Alert, Modal, KeyboardAvoidingView, ActivityIndicator, FlatList, View, TextInput, Text, TouchableOpacity } from 'react-native';
import { Alert, Platform, Modal, KeyboardAvoidingView, ActivityIndicator, FlatList, View, TextInput, Text, TouchableOpacity } from 'react-native';
import { ConversationContext } from 'context/ConversationContext';
import { useConversation } from './useConversation.hook';
import { styles } from './Conversation.styled';
@ -49,10 +49,13 @@ export function Conversation({ navigation, cardId, channelId, closeConversation,
}, [navigation, state.subject, state.loaded]);
useEffect(() => {
console.log("RESET CONVERSATION!");
return () => { closeConversation(); };
}, []);
return (
<KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={72}
enabled={Platform.OS === 'ios' ? state.keyboard : false}>
<View style={styles.container}>
{ !navigation && (
<View style={styles.header}>
@ -127,5 +130,6 @@ export function Conversation({ navigation, cardId, channelId, closeConversation,
</KeyboardAvoidingView>
</Modal>
</View>
</KeyboardAvoidingView>
);
}

6
app/mobile/src/session/conversation/addTopic/AddTopic.jsx
View File

@ -16,7 +16,6 @@ import { ImageFile } from './imageFile/ImageFile';
export function AddTopic({ contentKey }) {
const { state, actions } = useAddTopic(contentKey);
const message = useRef();
const addImage = async () => {
try {
@ -31,7 +30,6 @@ export function AddTopic({ contentKey }) {
const sendMessage = async () => {
try {
if (state.message || state.assets.length > 0) {
message.current.blur();
await actions.addTopic();
}
}
@ -127,9 +125,9 @@ export function AddTopic({ contentKey }) {
renderItem={renderAsset}
/>
)}
<TextInput style={{ ...styles.input, color: state.color, fontSize: state.textSize }} value={state.message} onChangeText={actions.setMessage} ref={message}
<TextInput style={{ ...styles.input, color: state.color, fontSize: state.textSize }} value={state.message} onChangeText={actions.setMessage}
placeholderTextColor={state.color} cursorColor={state.color}
onSubmitEditing={sendMessage} returnKeyType="send"
blurOnSubmit={true} onSubmitEditing={sendMessage} returnKeyType="send"
autoCapitalize="sentences" placeholder="New Message" multiline={true} />
<View style={styles.addButtons}>
{ !state.locked && state.enableImage && (

2
app/mobile/src/session/useSession.hook.js
View File

@ -38,10 +38,12 @@ export function useSession() {
if (dimensions.width > config.tabbedWidth) {
const width = Math.floor((dimensions.width * 33) / 100);
tabbed.current = false;
console.log("SET TABBED: false");
updateState({ tabbed: false, baseWidth: width + 50, subWidth: width });
}
else {
tabbed.current = true;
console.log("SET TABBED: true");
updateState({ tabbed: true });
}
}