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} /> + , + +route: NavigationRoute<'FullScreenThreadMediaGallery'>, +}; + +function FullScreenThreadMediaGallery( + props: FullScreenThreadMediaGalleryProps, +): React.Node { + const { id } = props.route.params.threadInfo; + return {id}; +} + +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 ( + + {props.title.toUpperCase()} + + {props.actionText} + + + ); +} + 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 ( + + ); } else if (item.itemType === 'footer') { return ; } 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, ];