Page MenuHomePhabricator
Files F3356731

D6660.id23117.diff
No OneTemporary
Actions

D6660.id23117.diff
View Options

diff --git a/native/chat/chat.react.js b/native/chat/chat.react.js
--- a/native/chat/chat.react.js
+++ b/native/chat/chat.react.js
@@ -35,6 +35,7 @@
import ChatRouter, { type ChatRouterNavigationHelpers } from './chat-router.js';
import ComposeSubchannel from './compose-subchannel.react.js';
import ComposeThreadButton from './compose-thread-button.react.js';
+import FullScreenThreadMediaGallery from './fullscreen-thread-media-gallery.react.js';
import HomeChatThreadList from './home-chat-thread-list.react.js';
import MessageListContainer from './message-list-container.react.js';
import MessageListHeaderTitle from './message-list-header-title.react.js';
@@ -55,6 +56,7 @@
ComposeSubchannelRouteName,
DeleteThreadRouteName,
ThreadSettingsRouteName,
+ FullScreenThreadMediaGalleryRouteName,
MessageListRouteName,
ChatThreadListRouteName,
HomeChatThreadListRouteName,
@@ -249,6 +251,10 @@
),
headerBackTitleVisible: false,
});
+const fullScreenThreadMediaGalleryOptions = {
+ headerTitle: 'All Media',
+ headerBackTitleVisible: false,
+};
const deleteThreadOptions = {
headerTitle: 'Delete chat',
headerBackTitleVisible: false,
@@ -346,6 +352,11 @@
component={ThreadSettings}
options={threadSettingsOptions}
/>
+ <Chat.Screen
+ name={FullScreenThreadMediaGalleryRouteName}
+ component={FullScreenThreadMediaGallery}
+ options={fullScreenThreadMediaGalleryOptions}
+ />
<Chat.Screen
name={DeleteThreadRouteName}
component={DeleteThread}
diff --git a/native/chat/fullscreen-thread-media-gallery.react.js b/native/chat/fullscreen-thread-media-gallery.react.js
new file mode 100644
--- /dev/null
+++ b/native/chat/fullscreen-thread-media-gallery.react.js
@@ -0,0 +1,27 @@
+// @flow
+
+import * as React from 'react';
+import { Text } from 'react-native';
+
+import type { ThreadInfo } from 'lib/types/thread-types.js';
+
+import type { ChatNavigationProp } from './chat.react.js';
+import type { NavigationRoute } from '../navigation/route-names.js';
+
+export type FullScreenThreadMediaGalleryParams = {
+ +threadInfo: ThreadInfo,
+};
+
+type FullScreenThreadMediaGalleryProps = {
+ +navigation: ChatNavigationProp<'FullScreenThreadMediaGallery'>,
+ +route: NavigationRoute<'FullScreenThreadMediaGallery'>,
+};
+
+function FullScreenThreadMediaGallery(
+ props: FullScreenThreadMediaGalleryProps,
+): React.Node {
+ const { id } = props.route.params.threadInfo;
+ return <Text>{id}</Text>;
+}
+
+export default FullScreenThreadMediaGallery;
diff --git a/native/chat/settings/thread-settings-category.react.js b/native/chat/settings/thread-settings-category.react.js
--- a/native/chat/settings/thread-settings-category.react.js
+++ b/native/chat/settings/thread-settings-category.react.js
@@ -2,7 +2,7 @@
import invariant from 'invariant';
import * as React from 'react';
-import { View, Text, Platform } from 'react-native';
+import { View, Text, Platform, TouchableOpacity } from 'react-native';
import { useStyles } from '../../themes/colors.js';
@@ -34,6 +34,25 @@
);
}
+type ActionHeaderProps = {
+ +title: string,
+ +actionText: string,
+ +onPress: () => mixed,
+};
+function ThreadSettingsCategoryActionHeader(
+ props: ActionHeaderProps,
+): React.Node {
+ const styles = useStyles(unboundStyles);
+ return (
+ <View style={styles.actionHeader}>
+ <Text style={styles.title}>{props.title.toUpperCase()}</Text>
+ <TouchableOpacity onPress={props.onPress}>
+ <Text style={styles.actionText}>{props.actionText}</Text>
+ </TouchableOpacity>
+ </View>
+ );
+}
+
type FooterProps = {
+type: CategoryType,
};
@@ -93,6 +112,22 @@
paddingBottom: 3,
paddingLeft: 24,
},
+ actionHeader: {
+ marginTop: 16,
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ },
+ actionText: {
+ color: 'link',
+ fontSize: 12,
+ fontWeight: '400',
+ paddingBottom: 3,
+ paddingRight: 12,
+ },
};
-export { ThreadSettingsCategoryHeader, ThreadSettingsCategoryFooter };
+export {
+ ThreadSettingsCategoryHeader,
+ ThreadSettingsCategoryActionHeader,
+ ThreadSettingsCategoryFooter,
+};
diff --git a/native/chat/settings/thread-settings.react.js b/native/chat/settings/thread-settings.react.js
--- a/native/chat/settings/thread-settings.react.js
+++ b/native/chat/settings/thread-settings.react.js
@@ -46,6 +46,7 @@
import type { CategoryType } from './thread-settings-category.react.js';
import {
ThreadSettingsCategoryHeader,
+ ThreadSettingsCategoryActionHeader,
ThreadSettingsCategoryFooter,
} from './thread-settings-category.react.js';
import ThreadSettingsChildThread from './thread-settings-child-thread.react.js';
@@ -80,6 +81,7 @@
import {
AddUsersModalRouteName,
ComposeSubchannelModalRouteName,
+ FullScreenThreadMediaGalleryRouteName,
} from '../../navigation/route-names.js';
import type { NavigationRoute } from '../../navigation/route-names.js';
import type { TabNavigationProp } from '../../navigation/tab-navigator.react.js';
@@ -112,6 +114,13 @@
+title: string,
+categoryType: CategoryType,
}
+ | {
+ +itemType: 'actionHeader',
+ +key: string,
+ +title: string,
+ +actionText: string,
+ +onPress: () => void,
+ }
| {
+itemType: 'footer',
+key: string,
@@ -631,10 +640,11 @@
const limit = 6;
listData.push({
- itemType: 'header',
+ itemType: 'actionHeader',
key: 'mediaGalleryHeader',
title: 'Media Gallery',
- categoryType: 'outline',
+ actionText: 'See more',
+ onPress: this.onPressSeeMoreMediaGallery,
});
listData.push({
@@ -855,6 +865,14 @@
title={item.title}
/>
);
+ } else if (item.itemType === 'actionHeader') {
+ return (
+ <ThreadSettingsCategoryActionHeader
+ title={item.title}
+ actionText={item.actionText}
+ onPress={item.onPress}
+ />
+ );
} else if (item.itemType === 'footer') {
return <ThreadSettingsCategoryFooter type={item.categoryType} />;
} else if (item.itemType === 'name') {
@@ -1019,6 +1037,12 @@
numSidebarsShowing: prevState.numSidebarsShowing + itemPageLength,
}));
};
+
+ onPressSeeMoreMediaGallery = () => {
+ this.props.navigation.navigate(FullScreenThreadMediaGalleryRouteName, {
+ threadInfo: this.props.threadInfo,
+ });
+ };
}
const unboundStyles = {
diff --git a/native/navigation/route-names.js b/native/navigation/route-names.js
--- a/native/navigation/route-names.js
+++ b/native/navigation/route-names.js
@@ -6,6 +6,7 @@
import type { TermsAndPrivacyModalParams } from '../account/terms-and-privacy-modal.react.js';
import type { ThreadPickerModalParams } from '../calendar/thread-picker-modal.react.js';
import type { ComposeSubchannelParams } from '../chat/compose-subchannel.react.js';
+import type { FullScreenThreadMediaGalleryParams } from '../chat/fullscreen-thread-media-gallery.react.js';
import type { ImagePasteModalParams } from '../chat/image-paste-modal.react.js';
import type { MessageListParams } from '../chat/message-list-types.js';
import type { MessageReactionsModalParams } from '../chat/message-reactions-modal.react.js';
@@ -49,6 +50,8 @@
export const DevToolsRouteName = 'DevTools';
export const EditPasswordRouteName = 'EditPassword';
export const FriendListRouteName = 'FriendList';
+export const FullScreenThreadMediaGalleryRouteName =
+ 'FullScreenThreadMediaGallery';
export const HomeChatThreadListRouteName = 'HomeChatThreadList';
export const ImageModalRouteName = 'ImageModal';
export const ImagePasteModalRouteName = 'ImagePasteModal';
@@ -125,6 +128,7 @@
+ComposeSubchannel: ComposeSubchannelParams,
+ThreadSettings: ThreadSettingsParams,
+DeleteThread: DeleteThreadParams,
+ +FullScreenThreadMediaGallery: FullScreenThreadMediaGalleryParams,
};
export type ChatTopTabsParamList = {
@@ -183,4 +187,5 @@
ThreadSettingsRouteName,
DeleteThreadRouteName,
ComposeSubchannelRouteName,
+ FullScreenThreadMediaGalleryRouteName,
];

File Metadata

Mime Type
text/plain
Expires
Sun, Nov 24, 8:21 PM (21 h, 59 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2577226
Default Alt Text
D6660.id23117.diff (8 KB)

Event Timeline