Page MenuHomePhorge
Files F32166319

D6073.1765050644.diff
No OneTemporary
Actions

Size
6 KB
Referenced Files
None
Subscribers
None

D6073.1765050644.diff
View Options

diff --git a/native/chat/sidebar-list-modal.react.js b/native/chat/sidebar-list-modal.react.js
--- a/native/chat/sidebar-list-modal.react.js
+++ b/native/chat/sidebar-list-modal.react.js
@@ -62,6 +62,7 @@
onChangeSearchInputText={onChangeSearchInputText}
threadInfo={props.route.params.threadInfo}
searchPlaceholder="Search threads"
+ modalTitle="Threads"
/>
);
}
@@ -128,6 +129,7 @@
sidebar: {
paddingLeft: 0,
paddingRight: 5,
+ height: 38,
},
sidebarItemContainer: {
flex: 1,
diff --git a/native/chat/subchannel-item.react.js b/native/chat/subchannel-item.react.js
--- a/native/chat/subchannel-item.react.js
+++ b/native/chat/subchannel-item.react.js
@@ -62,19 +62,18 @@
</View>
);
}
-
+const fontSize = 14;
const unboundStyles = {
outerView: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
paddingVertical: 8,
- paddingHorizontal: 16,
+ paddingHorizontal: 8,
height: 60,
},
itemRowContainer: {
flexDirection: 'row',
- height: 24,
alignItems: 'center',
},
unread: {
@@ -85,12 +84,11 @@
color: 'listForegroundSecondaryLabel',
flex: 1,
fontSize: 16,
- paddingLeft: 3,
- paddingBottom: 2,
+ paddingBottom: 8,
},
lastActivity: {
color: 'listForegroundTertiaryLabel',
- fontSize: 14,
+ fontSize,
marginLeft: 10,
},
iconWrapper: {
@@ -106,7 +104,7 @@
noMessages: {
color: 'listForegroundTertiaryLabel',
flex: 1,
- fontSize: 14,
+ fontSize,
fontStyle: 'italic',
},
};
diff --git a/native/chat/subchannels-list-modal.react.js b/native/chat/subchannels-list-modal.react.js
--- a/native/chat/subchannels-list-modal.react.js
+++ b/native/chat/subchannels-list-modal.react.js
@@ -38,7 +38,8 @@
setSearchState={setSearchState}
onChangeSearchInputText={onChangeSearchInputText}
threadInfo={props.route.params.threadInfo}
- searchPlaceholder="Search Subchannels"
+ searchPlaceholder="Search subchannels"
+ modalTitle="Subchannels"
/>
);
}
diff --git a/native/chat/thread-list-modal.react.js b/native/chat/thread-list-modal.react.js
--- a/native/chat/thread-list-modal.react.js
+++ b/native/chat/thread-list-modal.react.js
@@ -1,7 +1,14 @@
// @flow
+import { useNavigation } from '@react-navigation/native';
import * as React from 'react';
-import { TextInput, FlatList, StyleSheet } from 'react-native';
+import {
+ Text,
+ TextInput,
+ FlatList,
+ View,
+ TouchableOpacity,
+} from 'react-native';
import type { ThreadSearchState } from 'lib/hooks/search-threads';
import type { ChatThreadItem } from 'lib/selectors/chat-selectors';
@@ -10,7 +17,8 @@
import Modal from '../components/modal.react';
import Search from '../components/search.react';
-import { useIndicatorStyle } from '../themes/colors';
+import SWMansionIcon from '../components/swmansion-icon.react';
+import { useIndicatorStyle, useStyles } from '../themes/colors';
import { waitForModalInputFocus } from '../utils/timers';
import { useNavigateToThread } from './message-list-types';
@@ -37,7 +45,8 @@
+searchState: ThreadSearchState,
+setSearchState: SetState<ThreadSearchState>,
+onChangeSearchInputText: (text: string) => mixed,
- +searchPlaceholder: string,
+ +searchPlaceholder?: string,
+ +modalTitle: string,
};
function ThreadListModal<U: SidebarInfo | ChatThreadItem>(
props: Props<U>,
@@ -49,6 +58,7 @@
listData,
createRenderItem,
searchPlaceholder,
+ modalTitle,
} = props;
const searchTextInputRef = React.useRef();
@@ -86,33 +96,89 @@
onPressItem,
]);
+ const styles = useStyles(unboundStyles);
const indicatorStyle = useIndicatorStyle();
+ const navigation = useNavigation();
+
return (
- <Modal>
- <Search
- searchText={searchState.text}
- onChangeText={onChangeSearchInputText}
- containerStyle={styles.search}
- placeholder={searchPlaceholder}
- ref={setSearchTextInputRef}
- />
- <FlatList
- data={listData}
- renderItem={renderItem}
- keyExtractor={keyExtractor}
- getItemLayout={getItemLayout}
- keyboardShouldPersistTaps="handled"
- initialNumToRender={20}
- indicatorStyle={indicatorStyle}
- />
+ <Modal modalStyle={styles.modal}>
+ <View style={styles.header}>
+ <Text style={styles.title}>{modalTitle}</Text>
+ <TouchableOpacity
+ onPress={navigation.goBack}
+ style={styles.closeButton}
+ >
+ <SWMansionIcon
+ name="cross"
+ size={24}
+ color={styles.closeIcon.color}
+ />
+ </TouchableOpacity>
+ </View>
+ <View style={styles.body}>
+ <Search
+ searchText={searchState.text}
+ onChangeText={onChangeSearchInputText}
+ containerStyle={styles.search}
+ placeholder={searchPlaceholder ?? 'Search'}
+ ref={setSearchTextInputRef}
+ />
+ <FlatList
+ data={listData}
+ renderItem={renderItem}
+ keyExtractor={keyExtractor}
+ getItemLayout={getItemLayout}
+ keyboardShouldPersistTaps="handled"
+ initialNumToRender={20}
+ indicatorStyle={indicatorStyle}
+ />
+ </View>
</Modal>
);
}
-const styles = StyleSheet.create({
+const unboundStyles = {
+ body: {
+ paddingHorizontal: 16,
+ flex: 1,
+ },
+ header: {
+ borderBottomColor: 'subthreadsModalSearch',
+ borderBottomWidth: 1,
+ height: 72,
+ padding: 16,
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ },
+ modal: {
+ borderRadius: 8,
+ paddingHorizontal: 0,
+ backgroundColor: 'subthreadsModalBackgroud',
+ paddingTop: 0,
+ justifyContent: 'flex-start',
+ },
search: {
- marginBottom: 8,
+ height: 40,
+ marginVertical: 16,
+ backgroundColor: 'subthreadsModalSearch',
},
-});
+ title: {
+ color: 'listForegroundLabel',
+ fontSize: 20,
+ fontWeight: '500',
+ lineHeight: 26,
+ alignSelf: 'center',
+ marginLeft: 2,
+ },
+ closeIcon: {
+ color: 'subthreadsModalClose',
+ },
+ closeButton: {
+ marginRight: 2,
+ height: 40,
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+};
export default ThreadListModal;
diff --git a/native/themes/colors.js b/native/themes/colors.js
--- a/native/themes/colors.js
+++ b/native/themes/colors.js
@@ -94,6 +94,9 @@
drawerItemLabelLevel2: '#1F1F1F',
drawerOpenCommunityBackground: '#F5F5F5',
drawerBackgroud: '#FFFFFF',
+ subthreadsModalClose: '#808080',
+ subthreadsModalBackgroud: '#EEEEEE',
+ subthreadsModalSearch: 'rgba(0, 0, 0, 0.08)',
});
export type Colors = $Exact<typeof light>;
@@ -181,6 +184,9 @@
drawerItemLabelLevel2: '#F5F5F5',
drawerOpenCommunityBackground: '#191919',
drawerBackgroud: '#1F1F1F',
+ subthreadsModalClose: '#808080',
+ subthreadsModalBackgroud: '#1F1F1F',
+ subthreadsModalSearch: 'rgba(255, 255, 255, 0.04)',
});
const colors = { light, dark };

File Metadata

Mime Type
text/plain
Expires
Sat, Dec 6, 7:50 PM (18 h, 25 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5840497
Default Alt Text
D6073.1765050644.diff (6 KB)

Event Timeline