Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update header #104

Merged
merged 1 commit into from
Jun 20, 2024
Merged

Update header #104

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 27 additions & 24 deletions components/Conversation/ConversationTitle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import { XmtpConversation } from "../../data/store/chatStore";
import { useGroupName } from "../../hooks/useGroupName";
import { useGroupPhoto } from "../../hooks/useGroupPhoto";
import { NavigationParamList } from "../../screens/Navigation/Navigation";
import { headerTitleStyle, textSecondaryColor } from "../../utils/colors";
import { headerTitleStyle, textPrimaryColor } from "../../utils/colors";
import { getPreferredAvatar } from "../../utils/profile";
import { conversationName, getTitleFontScale } from "../../utils/str";
import Avatar from "../Avatar";
Expand Down Expand Up @@ -125,25 +125,20 @@ export default function ConversationTitle({
}}
style={{
flexDirection: "row",
justifyContent: "space-between",
width: "100%",
alignItems: "center",
paddingRight: 20,
paddingRight: 40,
paddingLeft: 8,
}}
>
<Avatar
uri={avatar}
size={36}
style={{
marginRight: Platform.OS === "android" ? 24 : 7,
marginLeft: Platform.OS === "ios" ? 6 : -9,
}}
/>
<Text
style={[
headerTitleStyle(colorScheme),
{
color: textPrimaryColor(colorScheme),
fontSize:
Platform.OS === "ios"
? 17 * getTitleFontScale()
? 14 * getTitleFontScale()
: headerTitleStyle(colorScheme).fontSize,
},
]}
Expand All @@ -152,18 +147,26 @@ export default function ConversationTitle({
>
{title}
</Text>
<Picto
picto="chevron.right"
size={Platform.OS === "ios" ? 9 : 16}
style={{
// @todo => fix design on android & web
...Platform.select({
default: { left: 10 },
android: { left: -10, top: 1 },
}),
}}
color={textSecondaryColor(colorScheme)}
/>
{avatar ? (
<Avatar
uri={avatar}
size={24}
style={{
marginRight: Platform.OS === "android" ? 24 : 7,
marginLeft: Platform.OS === "ios" ? 6 : -9,
}}
/>
) : (
<Picto
picto="info.circle"
size={16}
color={textPrimaryColor(colorScheme)}
style={{
marginRight: Platform.OS === "android" ? 24 : 16,
marginLeft: Platform.OS === "ios" ? 6 : -9,
}}
/>
)}
</TouchableOpacity>
</View>
);
Expand Down
19 changes: 19 additions & 0 deletions screens/Navigation/ConversationNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
import { useColorScheme } from "react-native";
import { TouchableOpacity } from "react-native-gesture-handler";

import Picto from "../../components/Picto/Picto.ios";
import { textPrimaryColor } from "../../utils/colors";
import { navigate } from "../../utils/navigation";
import Conversation from "../Conversation";
import { NativeStack, navigationAnimation } from "./Navigation";
import { useIsSplitScreen } from "./navHelpers";
Expand Down Expand Up @@ -26,11 +32,24 @@ export default function ConversationNav(
// but via the DrawerNavigation that passes it back to this component via prop
// so we override the route when instantiating Conversation
const isSplitScreen = useIsSplitScreen();
const colorScheme = useColorScheme();
return (
<NativeStack.Screen
name="Conversation"
options={{
animation: navigationAnimation,
headerLeft: () => (
<TouchableOpacity
onPress={() => navigate("Chats")}
style={{ height: 40, justifyContent: "center", marginLeft: 8 }}
>
<Picto
picto="chevron.left"
size={16}
color={textPrimaryColor(colorScheme)}
/>
</TouchableOpacity>
),
}}
>
{({ route, navigation }) => (
Expand Down
125 changes: 65 additions & 60 deletions screens/Navigation/Navigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import * as Linking from "expo-linking";
import { Platform, useColorScheme } from "react-native";
import { GestureHandlerRootView } from "react-native-gesture-handler";

import config from "../../config";
import { useAppStore } from "../../data/store/appStore";
Expand Down Expand Up @@ -90,67 +91,71 @@ export default function Navigation() {
const colorScheme = useColorScheme();
const splashScreenHidden = useAppStore((s) => s.splashScreenHidden);
return (
<NavigationContainer
linking={splashScreenHidden ? (linking as any) : undefined}
initialState={
Platform.OS === "ios" || Platform.OS === "web"
? {
// On iOS, the Accounts switcher is available through a back button
index: 1,
routes: [
{
name: "Accounts",
},
{
name: "Chats",
},
],
type: "stack",
}
: {
// On Android, the Accounts switcher is available through the drawer
index: 0,
routes: [
{
name: "Chats",
},
],
type: "stack",
}
}
ref={(r) => {
if (r) {
converseNavigations["mainStack"] = r;
<GestureHandlerRootView style={{ flex: 1 }}>
<NavigationContainer
linking={splashScreenHidden ? (linking as any) : undefined}
initialState={
Platform.OS === "ios" || Platform.OS === "web"
? {
// On iOS, the Accounts switcher is available through a back button
index: 1,
routes: [
{
name: "Accounts",
},
{
name: "Chats",
},
],
type: "stack",
}
: {
// On Android, the Accounts switcher is available through the drawer
index: 0,
routes: [
{
name: "Chats",
},
],
type: "stack",
}
}
}}
onUnhandledAction={() => {
// Since we're handling multiple navigators,
// let's silence errors when the action
// is not meant for this one
}}
>
<NativeStack.Navigator
screenOptions={{ gestureEnabled: !isDesktop }}
screenListeners={screenListeners("fullStackNavigation")}
ref={(r) => {
if (r) {
converseNavigations["mainStack"] = r;
}
}}
onUnhandledAction={() => {
// Since we're handling multiple navigators,
// let's silence errors when the action
// is not meant for this one
}}
>
<NativeStack.Group screenOptions={stackGroupScreenOptions(colorScheme)}>
{AccountsNav()}
{ConversationListNav()}
{ConversationRequestsListNav()}
{ConversationNav()}
{NewConversationNav()}
{ConverseMatchMakerNav()}
{ShareProfileNav()}
{ShareFrameNav()}
{WebviewPreviewNav()}
{ProfileNav()}
{GroupNav()}
{GroupLinkNav()}
{UserProfileNav()}
{TopUpNav()}
{EnableTransactionsNav()}
</NativeStack.Group>
</NativeStack.Navigator>
</NavigationContainer>
<NativeStack.Navigator
screenOptions={{ gestureEnabled: !isDesktop }}
screenListeners={screenListeners("fullStackNavigation")}
>
<NativeStack.Group
screenOptions={stackGroupScreenOptions(colorScheme)}
>
{AccountsNav()}
{ConversationListNav()}
{ConversationRequestsListNav()}
{ConversationNav()}
{NewConversationNav()}
{ConverseMatchMakerNav()}
{ShareProfileNav()}
{ShareFrameNav()}
{WebviewPreviewNav()}
{ProfileNav()}
{GroupNav()}
{GroupLinkNav()}
{UserProfileNav()}
{TopUpNav()}
{EnableTransactionsNav()}
</NativeStack.Group>
</NativeStack.Navigator>
</NavigationContainer>
</GestureHandlerRootView>
);
}
Loading