From 1f35fb070ae3e0c6c28d15d20503358be37275fa Mon Sep 17 00:00:00 2001 From: Diego Mello Date: Tue, 30 Jun 2020 10:52:09 -0300 Subject: [PATCH 01/19] Change drawer icon --- app/containers/HeaderButton.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/containers/HeaderButton.js b/app/containers/HeaderButton.js index 3ac44d45349..3902b5b1b5e 100644 --- a/app/containers/HeaderButton.js +++ b/app/containers/HeaderButton.js @@ -32,7 +32,7 @@ export const CustomHeaderButtons = React.memo(props => ( export const DrawerButton = React.memo(({ navigation, testID, ...otherProps }) => ( - + )); From 6a9a572188031cabe8d24d12cdf69e1ebecdfc84 Mon Sep 17 00:00:00 2001 From: Diego Mello Date: Tue, 30 Jun 2020 11:17:43 -0300 Subject: [PATCH 02/19] Removed iOS variation --- app/views/RoomsListView/Header/Header.ios.js | 95 ------------------- .../Header/{Header.android.js => Header.js} | 0 .../RoomsListView/ListHeader/SearchBar.js | 36 ------- app/views/RoomsListView/ListHeader/index.js | 20 +--- app/views/RoomsListView/index.js | 58 +++++------ 5 files changed, 24 insertions(+), 185 deletions(-) delete mode 100644 app/views/RoomsListView/Header/Header.ios.js rename app/views/RoomsListView/Header/{Header.android.js => Header.js} (100%) delete mode 100644 app/views/RoomsListView/ListHeader/SearchBar.js diff --git a/app/views/RoomsListView/Header/Header.ios.js b/app/views/RoomsListView/Header/Header.ios.js deleted file mode 100644 index e45d8baee8a..00000000000 --- a/app/views/RoomsListView/Header/Header.ios.js +++ /dev/null @@ -1,95 +0,0 @@ -import React from 'react'; -import { - Text, View, TouchableOpacity, StyleSheet -} from 'react-native'; -import PropTypes from 'prop-types'; - -import I18n from '../../../i18n'; -import sharedStyles from '../../Styles'; -import { themes } from '../../../constants/colors'; -import { CustomIcon } from '../../../lib/Icons'; - -const styles = StyleSheet.create({ - container: { - flex: 1, - alignItems: 'center', - justifyContent: 'center' - }, - button: { - flexDirection: 'row', - alignItems: 'center' - }, - title: { - fontSize: 14, - ...sharedStyles.textRegular - }, - server: { - fontSize: 12, - ...sharedStyles.textRegular - }, - disclosure: { - marginLeft: 3, - marginTop: 1, - width: 12, - height: 9 - }, - upsideDown: { - transform: [{ scaleY: -1 }] - } -}); - -const HeaderTitle = React.memo(({ connecting, isFetching, theme }) => { - let title = I18n.t('Messages'); - if (connecting) { - title = I18n.t('Connecting'); - } - if (isFetching) { - title = I18n.t('Updating'); - } - return {title}; -}); - -const Header = React.memo(({ - connecting, isFetching, serverName, showServerDropdown, onPress, theme -}) => ( - - - - - {serverName} - - - - -)); - -Header.propTypes = { - connecting: PropTypes.bool, - isFetching: PropTypes.bool, - serverName: PropTypes.string, - theme: PropTypes.string, - showServerDropdown: PropTypes.bool.isRequired, - onPress: PropTypes.func.isRequired -}; - -Header.defaultProps = { - serverName: 'Rocket.Chat' -}; - -HeaderTitle.propTypes = { - connecting: PropTypes.bool, - isFetching: PropTypes.bool, - theme: PropTypes.string -}; - -export default Header; diff --git a/app/views/RoomsListView/Header/Header.android.js b/app/views/RoomsListView/Header/Header.js similarity index 100% rename from app/views/RoomsListView/Header/Header.android.js rename to app/views/RoomsListView/Header/Header.js diff --git a/app/views/RoomsListView/ListHeader/SearchBar.js b/app/views/RoomsListView/ListHeader/SearchBar.js deleted file mode 100644 index 6446d4cf4de..00000000000 --- a/app/views/RoomsListView/ListHeader/SearchBar.js +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -import SearchBox from '../../../containers/SearchBox'; -import { isIOS } from '../../../utils/deviceInfo'; -import { withTheme } from '../../../theme'; - -const SearchBar = React.memo(({ - theme, onChangeSearchText, inputRef, searching, onCancelSearchPress, onSearchFocus -}) => { - if (isIOS) { - return ( - - ); - } - return null; -}); - -SearchBar.propTypes = { - theme: PropTypes.string, - searching: PropTypes.bool, - inputRef: PropTypes.func, - onChangeSearchText: PropTypes.func, - onCancelSearchPress: PropTypes.func, - onSearchFocus: PropTypes.func -}; - -export default withTheme(SearchBar); diff --git a/app/views/RoomsListView/ListHeader/index.js b/app/views/RoomsListView/ListHeader/index.js index 63d20ca9e58..dec38b5063f 100644 --- a/app/views/RoomsListView/ListHeader/index.js +++ b/app/views/RoomsListView/ListHeader/index.js @@ -1,28 +1,16 @@ import React from 'react'; import PropTypes from 'prop-types'; -import SearchBar from './SearchBar'; import Directory from './Directory'; import Sort from './Sort'; const ListHeader = React.memo(({ searching, sortBy, - onChangeSearchText, toggleSort, - goDirectory, - inputRef, - onCancelSearchPress, - onSearchFocus + goDirectory }) => ( <> - @@ -31,12 +19,8 @@ const ListHeader = React.memo(({ ListHeader.propTypes = { searching: PropTypes.bool, sortBy: PropTypes.string, - onChangeSearchText: PropTypes.func, toggleSort: PropTypes.func, - goDirectory: PropTypes.func, - inputRef: PropTypes.func, - onCancelSearchPress: PropTypes.func, - onSearchFocus: PropTypes.func + goDirectory: PropTypes.func }; export default ListHeader; diff --git a/app/views/RoomsListView/index.js b/app/views/RoomsListView/index.js index f97e67c3e6a..b4eb35e3f39 100644 --- a/app/views/RoomsListView/index.js +++ b/app/views/RoomsListView/index.js @@ -30,7 +30,7 @@ import { } from '../../actions/rooms'; import { appStart as appStartAction, ROOT_BACKGROUND } from '../../actions/app'; import debounce from '../../utils/debounce'; -import { isIOS, isAndroid, isTablet } from '../../utils/deviceInfo'; +import { isIOS, isTablet } from '../../utils/deviceInfo'; import RoomsListHeaderView from './Header'; import { DrawerButton, @@ -62,7 +62,6 @@ import SafeAreaView from '../../containers/SafeAreaView'; import Header from '../../containers/Header'; import { withDimensions } from '../../dimensions'; -const SCROLL_OFFSET = 56; const INITIAL_NUM_TO_RENDER = isTablet ? 20 : 12; const CHATS_HEADER = 'Chats'; const UNREAD_HEADER = 'Unread'; @@ -306,7 +305,8 @@ class RoomsListView extends React.Component { const { searching } = this.state; const { navigation, isMasterDetail } = this.props; return { - headerLeft: () => (searching && isAndroid ? ( + headerTitleAlign: 'left', + headerLeft: () => (searching ? ( navigation.navigate('ModalStackNavigator', { screen: 'SettingsView' }) : () => navigation.toggleDrawer()} + onPress={isMasterDetail + ? () => navigation.navigate('ModalStackNavigator', { screen: 'SettingsView' }) + : () => navigation.toggleDrawer()} /> )), headerTitle: () => , - headerRight: () => (searching && isAndroid ? null : ( + headerRight: () => (searching ? null : ( - {isAndroid ? ( - - ) : null} navigation.navigate('ModalStackNavigator', { screen: 'NewMessageView' }) : () => navigation.navigate('NewMessageStackNavigator')} + onPress={isMasterDetail + ? () => navigation.navigate('ModalStackNavigator', { screen: 'NewMessageView' }) + : () => navigation.navigate('NewMessageStackNavigator')} testID='rooms-list-view-create-channel' /> + )) }; @@ -462,10 +464,8 @@ class RoomsListView extends React.Component { initSearching = () => { const { openSearchHeader } = this.props; this.internalSetState({ searching: true }, () => { - if (isAndroid) { - openSearchHeader(); - this.setHeader(); - } + openSearchHeader(); + this.setHeader(); }); }; @@ -479,18 +479,11 @@ class RoomsListView extends React.Component { Keyboard.dismiss(); - if (isIOS && this.inputRef) { - this.inputRef.blur(); - this.inputRef.clear(); - } - this.setState({ searching: false, search: [] }, () => { - if (isAndroid) { - this.setHeader(); - closeSearchHeader(); - } + this.setHeader(); + closeSearchHeader(); setTimeout(() => { - const offset = isAndroid ? 0 : SCROLL_OFFSET; + const offset = 0; if (this.scroll.scrollTo) { this.scroll.scrollTo({ x: 0, y: offset, animated: true }); } else if (this.scroll.scrollToOffset) { @@ -550,7 +543,7 @@ class RoomsListView extends React.Component { toggleSort = () => { const { toggleSortDropdown } = this.props; - const offset = isAndroid ? 0 : SCROLL_OFFSET; + const offset = 0; if (this.scroll.scrollTo) { this.scroll.scrollTo({ x: 0, y: offset, animated: true }); } else if (this.scroll.scrollToOffset) { @@ -701,7 +694,7 @@ class RoomsListView extends React.Component { navigation.navigate('SettingsView'); } else if (handleCommandSearching(event)) { this.scroll.scrollToOffset({ animated: true, offset: 0 }); - this.inputRef.focus(); + // this.inputRef.focus(); } else if (handleCommandSelectRoom(event)) { this.goRoomByIndex(input); } else if (handleCommandPreviousRoom(event)) { @@ -730,19 +723,13 @@ class RoomsListView extends React.Component { getScrollRef = ref => (this.scroll = ref); - getInputRef = ref => (this.inputRef = ref); - renderListHeader = () => { const { searching } = this.state; const { sortBy } = this.props; return ( @@ -855,7 +842,6 @@ class RoomsListView extends React.Component { ref={this.getScrollRef} data={searching ? search : chats} extraData={searching ? search : chats} - contentOffset={isIOS ? { x: 0, y: SCROLL_OFFSET } : {}} keyExtractor={keyExtractor} style={[styles.list, { backgroundColor: themes[theme].backgroundColor }]} renderItem={this.renderItem} From df15fdb3d64047f8c4413eba21e6efc97a9f194d Mon Sep 17 00:00:00 2001 From: Diego Mello Date: Tue, 30 Jun 2020 14:05:45 -0300 Subject: [PATCH 03/19] Patch to react-navigation-header-buttons... easier to patch then to overwrite its behaviour :( --- patches/react-navigation-header-buttons+3.0.5.patch | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 patches/react-navigation-header-buttons+3.0.5.patch diff --git a/patches/react-navigation-header-buttons+3.0.5.patch b/patches/react-navigation-header-buttons+3.0.5.patch new file mode 100644 index 00000000000..3b47953e818 --- /dev/null +++ b/patches/react-navigation-header-buttons+3.0.5.patch @@ -0,0 +1,12 @@ +diff --git a/node_modules/react-navigation-header-buttons/src/HeaderButtons.js b/node_modules/react-navigation-header-buttons/src/HeaderButtons.js +index 70ff376..01fba5e 100644 +--- a/node_modules/react-navigation-header-buttons/src/HeaderButtons.js ++++ b/node_modules/react-navigation-header-buttons/src/HeaderButtons.js +@@ -144,6 +144,6 @@ const styles = StyleSheet.create({ + }), + }, + button: { +- marginHorizontal: 11, ++ marginHorizontal: 6 + }, + }); From ec8425d25b2e56c9ef5ddafad8684686f137e1f8 Mon Sep 17 00:00:00 2001 From: Diego Mello Date: Tue, 30 Jun 2020 14:27:41 -0300 Subject: [PATCH 04/19] Correctly position title --- app/views/RoomsListView/index.js | 23 ++++++++++++++++++----- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/app/views/RoomsListView/index.js b/app/views/RoomsListView/index.js index b4eb35e3f39..78bf5ddce68 100644 --- a/app/views/RoomsListView/index.js +++ b/app/views/RoomsListView/index.js @@ -12,6 +12,7 @@ import { connect } from 'react-redux'; import { isEqual, orderBy } from 'lodash'; import Orientation from 'react-native-orientation-locker'; import { Q } from '@nozbe/watermelondb'; +import { withSafeAreaInsets } from 'react-native-safe-area-context'; import database from '../../lib/database'; import RocketChat from '../../lib/rocketchat'; @@ -128,7 +129,8 @@ class RoomsListView extends React.Component { connected: PropTypes.bool, isMasterDetail: PropTypes.bool, rooms: PropTypes.array, - width: PropTypes.number + width: PropTypes.number, + insets: PropTypes.object }; constructor(props) { @@ -227,7 +229,7 @@ class RoomsListView extends React.Component { loading, search } = this.state; - const { rooms, width } = this.props; + const { rooms, width, insets } = this.props; if (nextState.loading !== loading) { return true; } @@ -240,6 +242,9 @@ class RoomsListView extends React.Component { if (!isEqual(nextProps.rooms, rooms)) { return true; } + if (!isEqual(nextProps.insets, insets)) { + return true; + } // If it's focused and there are changes, update if (chatsNotEqual) { this.shouldUpdate = false; @@ -258,7 +263,8 @@ class RoomsListView extends React.Component { connected, roomsRequest, rooms, - isMasterDetail + isMasterDetail, + insets } = this.props; const { item } = this.state; @@ -283,6 +289,9 @@ class RoomsListView extends React.Component { // eslint-disable-next-line react/no-did-update-set-state this.setState({ item: { rid: rooms[0] } }); } + if (insets.left !== prevProps.insets.left) { + this.setHeader(); + } } componentWillUnmount() { @@ -303,7 +312,7 @@ class RoomsListView extends React.Component { getHeader = () => { const { searching } = this.state; - const { navigation, isMasterDetail } = this.props; + const { navigation, isMasterDetail, insets } = this.props; return { headerTitleAlign: 'left', headerLeft: () => (searching ? ( @@ -324,6 +333,10 @@ class RoomsListView extends React.Component { /> )), headerTitle: () => , + headerTitleContainerStyle: { + left: 56 + insets.left, + right: 36 + insets.right + }, headerRight: () => (searching ? null : ( ({ closeServerDropdown: () => dispatch(closeServerDropdownAction()) }); -export default connect(mapStateToProps, mapDispatchToProps)(withDimensions(withTheme(RoomsListView))); +export default connect(mapStateToProps, mapDispatchToProps)(withDimensions(withTheme(withSafeAreaInsets(RoomsListView)))); From 8b53bcbc7ed1d5221a9fa9a889229136db2493e4 Mon Sep 17 00:00:00 2001 From: Diego Mello Date: Tue, 30 Jun 2020 14:48:32 -0300 Subject: [PATCH 05/19] Header subtitle --- app/i18n/locales/en.js | 1 + app/i18n/locales/pt-BR.js | 1 + app/views/RoomsListView/Header/Header.js | 25 +++++++++++++++--------- app/views/RoomsListView/Header/index.js | 10 ++++++++-- 4 files changed, 26 insertions(+), 11 deletions(-) diff --git a/app/i18n/locales/en.js b/app/i18n/locales/en.js index c973245bee6..7237b3b2cd0 100644 --- a/app/i18n/locales/en.js +++ b/app/i18n/locales/en.js @@ -543,6 +543,7 @@ export default { Video_call: 'Video call', View_Original: 'View Original', Voice_call: 'Voice call', + Waiting_for_network: 'Waiting for network...', Websocket_disabled: 'Websocket is disabled for this server.\n{{contact}}', Welcome: 'Welcome', What_are_you_doing_right_now: 'What are you doing right now?', diff --git a/app/i18n/locales/pt-BR.js b/app/i18n/locales/pt-BR.js index 8055e7ea3ec..14c76d81922 100644 --- a/app/i18n/locales/pt-BR.js +++ b/app/i18n/locales/pt-BR.js @@ -479,6 +479,7 @@ export default { Verify_your_email_for_the_code_we_sent: 'Verifique em seu e-mail o código que enviamos', Video_call: 'Chamada de vídeo', Voice_call: 'Chamada de voz', + Waiting_for_network: 'Aguardando rede...', Websocket_disabled: 'Websocket está desativado para esse servidor.\n{{contact}}', Welcome: 'Bem vindo', Whats_your_2fa: 'Qual seu código de autenticação?', diff --git a/app/views/RoomsListView/Header/Header.js b/app/views/RoomsListView/Header/Header.js index d1d4fb745de..10e35aa5f4b 100644 --- a/app/views/RoomsListView/Header/Header.js +++ b/app/views/RoomsListView/Header/Header.js @@ -21,11 +21,8 @@ const styles = StyleSheet.create({ marginRight: 64 }, server: { - fontSize: 20, - ...sharedStyles.textRegular - }, - serverSmall: { - fontSize: 16 + fontSize: 16, + ...sharedStyles.textSemibold }, updating: { fontSize: 14, @@ -37,7 +34,7 @@ const styles = StyleSheet.create({ }); const Header = React.memo(({ - connecting, isFetching, serverName, showServerDropdown, showSearchHeader, theme, onSearchChangeText, onPress + connecting, connected, isFetching, serverName, server, showServerDropdown, showSearchHeader, theme, onSearchChangeText, onPress }) => { const titleColorStyle = { color: themes[theme].headerTitleColor }; const isLight = theme === 'light'; @@ -54,15 +51,22 @@ const Header = React.memo(({ ); } + let subtitle; + if (connecting) { + subtitle = I18n.t('Connecting'); + } else if (isFetching) { + subtitle = I18n.t('Updating'); + } else if (!connected) { + subtitle = I18n.t('Waiting_for_network'); + } else { + subtitle = server?.replace(/(^\w+:|^)\/\//, ''); + } return ( - {connecting ? {I18n.t('Connecting')} : null} - {isFetching ? {I18n.t('Updating')} : null} {serverName} + {subtitle ? {subtitle} : null} ); @@ -83,8 +88,10 @@ Header.propTypes = { onPress: PropTypes.func.isRequired, onSearchChangeText: PropTypes.func.isRequired, connecting: PropTypes.bool, + connected: PropTypes.bool, isFetching: PropTypes.bool, serverName: PropTypes.string, + server: PropTypes.string, theme: PropTypes.string }; diff --git a/app/views/RoomsListView/Header/index.js b/app/views/RoomsListView/Header/index.js index badcb59acf0..12a57dc00fb 100644 --- a/app/views/RoomsListView/Header/index.js +++ b/app/views/RoomsListView/Header/index.js @@ -18,8 +18,10 @@ class RoomsListHeaderView extends PureComponent { showSearchHeader: PropTypes.bool, serverName: PropTypes.string, connecting: PropTypes.bool, + connected: PropTypes.bool, isFetching: PropTypes.bool, theme: PropTypes.string, + server: PropTypes.string, open: PropTypes.func, close: PropTypes.func, closeSort: PropTypes.func, @@ -68,16 +70,18 @@ class RoomsListHeaderView extends PureComponent { render() { const { - serverName, showServerDropdown, showSearchHeader, connecting, isFetching, theme + serverName, showServerDropdown, showSearchHeader, connecting, connected, isFetching, theme, server } = this.props; return (
({ showSortDropdown: state.rooms.showSortDropdown, showSearchHeader: state.rooms.showSearchHeader, connecting: state.meteor.connecting || state.server.loading, + connected: state.meteor.connected, isFetching: state.rooms.isFetching, - serverName: state.settings.Site_Name + serverName: state.settings.Site_Name, + server: state.server.server }); const mapDispatchtoProps = dispatch => ({ From d4b80e05752ffe900a2cec247e31713bd4f8374e Mon Sep 17 00:00:00 2001 From: Diego Mello Date: Tue, 30 Jun 2020 17:11:58 -0300 Subject: [PATCH 06/19] Layout --- app/constants/colors.js | 8 ++++---- app/views/RoomsListView/Header/Header.js | 4 ++-- app/views/RoomsListView/index.js | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/app/constants/colors.js b/app/constants/colors.js index 7b9d567630a..4ae24167b85 100644 --- a/app/constants/colors.js +++ b/app/constants/colors.js @@ -34,11 +34,11 @@ export const themes = { separatorColor: '#cbcbcc', navbarBackground: '#ffffff', headerBorder: '#B2B2B2', - headerBackground: isIOS ? '#f8f8f8' : '#2f343d', + headerBackground: '#EEEFF1', headerSecondaryBackground: '#ffffff', - headerTintColor: isAndroid ? '#ffffff' : '#1d74f5', - headerTitleColor: isAndroid ? '#ffffff' : '#0d0e12', - headerSecondaryText: isAndroid ? '#9ca2a8' : '#1d74f5', + headerTintColor: '#6C727A', + headerTitleColor: '#0C0D0F', + headerSecondaryText: '#1d74f5', toastBackground: '#0C0D0F', videoBackground: '#1f2329', favoriteBackground: '#ffbb00', diff --git a/app/views/RoomsListView/Header/Header.js b/app/views/RoomsListView/Header/Header.js index 10e35aa5f4b..5e8a8618345 100644 --- a/app/views/RoomsListView/Header/Header.js +++ b/app/views/RoomsListView/Header/Header.js @@ -25,7 +25,7 @@ const styles = StyleSheet.create({ ...sharedStyles.textSemibold }, updating: { - fontSize: 14, + fontSize: 12, ...sharedStyles.textRegular }, upsideDown: { @@ -76,7 +76,7 @@ const Header = React.memo(({ size={18} /> - {subtitle ? {subtitle} : null} + {subtitle ? {subtitle} : null} ); diff --git a/app/views/RoomsListView/index.js b/app/views/RoomsListView/index.js index 78bf5ddce68..38a3cfc3b5c 100644 --- a/app/views/RoomsListView/index.js +++ b/app/views/RoomsListView/index.js @@ -334,7 +334,7 @@ class RoomsListView extends React.Component { )), headerTitle: () => , headerTitleContainerStyle: { - left: 56 + insets.left, + left: 60 + insets.left, right: 36 + insets.right }, headerRight: () => (searching ? null : ( From 41bc52f460c1b0468162a1dd561e0dc2aadd59fb Mon Sep 17 00:00:00 2001 From: Diego Mello Date: Tue, 30 Jun 2020 17:22:43 -0300 Subject: [PATCH 07/19] Alignment --- app/containers/DisclosureIndicator.js | 2 +- app/views/RoomsListView/styles.js | 16 ++++++++-------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/app/containers/DisclosureIndicator.js b/app/containers/DisclosureIndicator.js index 9d574de6c88..e33dbe81684 100644 --- a/app/containers/DisclosureIndicator.js +++ b/app/containers/DisclosureIndicator.js @@ -17,7 +17,7 @@ const styles = StyleSheet.create({ export const DisclosureImage = React.memo(({ theme }) => ( )); diff --git a/app/views/RoomsListView/styles.js b/app/views/RoomsListView/styles.js index 9deb03dc121..70f2bb6dce7 100644 --- a/app/views/RoomsListView/styles.js +++ b/app/views/RoomsListView/styles.js @@ -23,7 +23,7 @@ export default StyleSheet.create({ sortToggleText: { fontSize: 16, flex: 1, - marginLeft: 15, + marginLeft: 12, ...sharedStyles.textRegular }, dropdownContainer: { @@ -50,16 +50,16 @@ export default StyleSheet.create({ }, sortSeparator: { height: StyleSheet.hairlineWidth, - marginHorizontal: 15, + marginHorizontal: 12, flex: 1 }, sortIcon: { width: 22, height: 22, - marginHorizontal: 15 + marginHorizontal: 12 }, groupTitleContainer: { - paddingHorizontal: 15, + paddingHorizontal: 12, paddingTop: 17, paddingBottom: 10 }, @@ -75,12 +75,12 @@ export default StyleSheet.create({ }, serverHeaderText: { fontSize: 16, - marginLeft: 15, + marginLeft: 12, ...sharedStyles.textRegular }, serverHeaderAdd: { fontSize: 16, - marginRight: 15, + marginRight: 12, paddingVertical: 10, ...sharedStyles.textRegular }, @@ -95,7 +95,7 @@ export default StyleSheet.create({ serverIcon: { width: 42, height: 42, - marginHorizontal: 15, + marginHorizontal: 12, marginVertical: 13, borderRadius: 4, resizeMode: 'contain' @@ -120,7 +120,7 @@ export default StyleSheet.create({ directoryIcon: { width: 22, height: 22, - marginHorizontal: 15 + marginHorizontal: 12 }, directoryText: { fontSize: 16, From ff1a7e856329a206143ea1da5e3192de864c1551 Mon Sep 17 00:00:00 2001 From: Diego Mello Date: Wed, 1 Jul 2020 12:54:02 -0300 Subject: [PATCH 08/19] RoomView header --- app/constants/colors.js | 16 +++++++-------- app/containers/HeaderButton.js | 6 +----- app/containers/StatusBar.js | 3 +-- app/views/RoomView/Header/Icon.js | 3 +-- app/views/RoomView/index.js | 25 ++++++++++++++++++------ app/views/RoomsListView/Header/Header.js | 3 +-- app/views/RoomsListView/index.js | 5 +++-- 7 files changed, 33 insertions(+), 28 deletions(-) diff --git a/app/constants/colors.js b/app/constants/colors.js index 4ae24167b85..0b0a8ae7fbc 100644 --- a/app/constants/colors.js +++ b/app/constants/colors.js @@ -1,5 +1,3 @@ -import { isIOS, isAndroid } from '../utils/deviceInfo'; - export const STATUS_COLORS = { online: '#2de0a5', busy: '#f5455c', @@ -8,7 +6,7 @@ export const STATUS_COLORS = { }; export const SWITCH_TRACK_COLOR = { - false: isAndroid ? '#f5455c' : null, + false: '#f5455c', true: '#2de0a5' }; @@ -63,7 +61,7 @@ export const themes = { chatComponentBackground: '#192132', auxiliaryBackground: '#07101e', bannerBackground: '#0e1f38', - titleText: '#FFFFFF', + titleText: '#f9f9f9', bodyText: '#e8ebed', backdropColor: '#000000', dangerColor: '#f5455c', @@ -80,9 +78,9 @@ export const themes = { headerBorder: '#2F3A4B', headerBackground: '#0b182c', headerSecondaryBackground: '#0b182c', - headerTintColor: isAndroid ? '#ffffff' : '#1d74f5', - headerTitleColor: '#FFFFFF', - headerSecondaryText: isAndroid ? '#9297a2' : '#1d74f5', + headerTintColor: '#f9f9f9', + headerTitleColor: '#f9f9f9', + headerSecondaryText: '#9297a2', toastBackground: '#0C0D0F', videoBackground: '#1f2329', favoriteBackground: '#ffbb00', @@ -124,9 +122,9 @@ export const themes = { headerBorder: '#323232', headerBackground: '#0d0d0d', headerSecondaryBackground: '#0d0d0d', - headerTintColor: isAndroid ? '#ffffff' : '#1e9bfe', + headerTintColor: '#f9f9f9', headerTitleColor: '#f9f9f9', - headerSecondaryText: isAndroid ? '#b2b8c6' : '#1e9bfe', + headerSecondaryText: '#b2b8c6', toastBackground: '#0C0D0F', videoBackground: '#1f2329', favoriteBackground: '#ffbb00', diff --git a/app/containers/HeaderButton.js b/app/containers/HeaderButton.js index 3902b5b1b5e..fdbe9c7e414 100644 --- a/app/containers/HeaderButton.js +++ b/app/containers/HeaderButton.js @@ -15,11 +15,7 @@ const CustomHeaderButton = React.memo(withTheme(({ theme, ...props }) => ( {...props} IconComponent={CustomIcon} iconSize={headerIconSize} - color={ - isAndroid - ? themes[theme].headerTitleColor - : themes[theme].headerTintColor - } + color={themes[theme].headerTintColor} /> ))); diff --git a/app/containers/StatusBar.js b/app/containers/StatusBar.js index cc9bd73cc1a..8add422f1a0 100644 --- a/app/containers/StatusBar.js +++ b/app/containers/StatusBar.js @@ -2,13 +2,12 @@ import React from 'react'; import { StatusBar as StatusBarRN } from 'react-native'; import PropTypes from 'prop-types'; -import { isIOS } from '../utils/deviceInfo'; import { themes } from '../constants/colors'; const StatusBar = React.memo(({ theme, barStyle, backgroundColor }) => { if (!barStyle) { barStyle = 'light-content'; - if (theme === 'light' && isIOS) { + if (theme === 'light') { barStyle = 'dark-content'; } } diff --git a/app/views/RoomView/Header/Icon.js b/app/views/RoomView/Header/Icon.js index 766f5abe475..7de286c24be 100644 --- a/app/views/RoomView/Header/Icon.js +++ b/app/views/RoomView/Header/Icon.js @@ -5,7 +5,6 @@ import PropTypes from 'prop-types'; import { STATUS_COLORS, themes } from '../../../constants/colors'; import { CustomIcon } from '../../../lib/Icons'; import Status from '../../../containers/Status/Status'; -import { isAndroid } from '../../../utils/deviceInfo'; const ICON_SIZE = 15; @@ -32,7 +31,7 @@ const Icon = React.memo(({ if (type === 'l') { colorStyle = { color: STATUS_COLORS[status] }; } else { - colorStyle = { color: isAndroid && theme === 'light' ? themes[theme].buttonText : themes[theme].auxiliaryText }; + colorStyle = { color: themes[theme].auxiliaryText }; } let icon; diff --git a/app/views/RoomView/index.js b/app/views/RoomView/index.js index 62553d36859..6c8aefbe8c2 100644 --- a/app/views/RoomView/index.js +++ b/app/views/RoomView/index.js @@ -8,6 +8,7 @@ import moment from 'moment'; import * as Haptics from 'expo-haptics'; import { Q } from '@nozbe/watermelondb'; import isEqual from 'lodash/isEqual'; +import { withSafeAreaInsets } from 'react-native-safe-area-context'; import Touch from '../../utils/touch'; import { @@ -35,7 +36,7 @@ import ReactionsModal from '../../containers/ReactionsModal'; import { LISTENER } from '../../containers/Toast'; import { isBlocked } from '../../utils/room'; import { isReadOnly } from '../../utils/isReadOnly'; -import { isIOS, isTablet } from '../../utils/deviceInfo'; +import { isIOS, isTablet, isAndroid } from '../../utils/deviceInfo'; import { showErrorAlert } from '../../utils/info'; import { withTheme } from '../../theme'; import { @@ -91,7 +92,8 @@ class RoomView extends React.Component { theme: PropTypes.string, replyBroadcast: PropTypes.func, width: PropTypes.number, - height: PropTypes.number + height: PropTypes.number, + insets: PropTypes.object }; constructor(props) { @@ -178,7 +180,7 @@ class RoomView extends React.Component { shouldComponentUpdate(nextProps, nextState) { const { state } = this; const { roomUpdate, member } = state; - const { appState, theme } = this.props; + const { appState, theme, insets } = this.props; if (theme !== nextProps.theme) { return true; } @@ -192,12 +194,15 @@ class RoomView extends React.Component { if (stateUpdated) { return true; } + if (!isEqual(nextProps.insets, insets)) { + return true; + } return roomAttrsUpdate.some(key => !isEqual(nextState.roomUpdate[key], roomUpdate[key])); } componentDidUpdate(prevProps, prevState) { const { roomUpdate } = this.state; - const { appState } = this.props; + const { appState, insets } = this.props; if (appState === 'foreground' && appState !== prevProps.appState && this.rid) { this.onForegroundInteraction = InteractionManager.runAfterInteractions(() => { @@ -222,6 +227,9 @@ class RoomView extends React.Component { if (((roomUpdate.fname !== prevState.roomUpdate.fname) || (roomUpdate.name !== prevState.roomUpdate.name)) && !this.tmid) { this.setHeader(); } + if (insets.left !== prevProps.insets.left || insets.right !== prevProps.insets.right) { + this.setHeader(); + } this.setReadOnly(); } @@ -281,7 +289,7 @@ class RoomView extends React.Component { setHeader = () => { const { room, unreadsCount, roomUserId: stateRoomUserId } = this.state; const { - navigation, route, isMasterDetail, theme, baseUrl, user + navigation, route, isMasterDetail, theme, baseUrl, user, insets } = this.props; const rid = route.params?.rid; const prid = route.params?.prid; @@ -302,6 +310,11 @@ class RoomView extends React.Component { navigation.setOptions({ headerShown: true, headerTitleAlign: 'left', + // Keep it aligned to message content + headerTitleContainerStyle: { + left: isAndroid ? 58 : 70 + insets.left, + right: 46 + insets.right + }, headerTitle: () => ( ({ replyBroadcast: message => dispatch(replyBroadcastAction(message)) }); -export default connect(mapStateToProps, mapDispatchToProps)(withDimensions(withTheme(RoomView))); +export default connect(mapStateToProps, mapDispatchToProps)(withDimensions(withTheme(withSafeAreaInsets(RoomView)))); diff --git a/app/views/RoomsListView/Header/Header.js b/app/views/RoomsListView/Header/Header.js index 5e8a8618345..dc8456ce93a 100644 --- a/app/views/RoomsListView/Header/Header.js +++ b/app/views/RoomsListView/Header/Header.js @@ -17,8 +17,7 @@ const styles = StyleSheet.create({ }, button: { flexDirection: 'row', - alignItems: 'center', - marginRight: 64 + alignItems: 'center' }, server: { fontSize: 16, diff --git a/app/views/RoomsListView/index.js b/app/views/RoomsListView/index.js index 38a3cfc3b5c..a20cb2af82b 100644 --- a/app/views/RoomsListView/index.js +++ b/app/views/RoomsListView/index.js @@ -289,7 +289,7 @@ class RoomsListView extends React.Component { // eslint-disable-next-line react/no-did-update-set-state this.setState({ item: { rid: rooms[0] } }); } - if (insets.left !== prevProps.insets.left) { + if (insets.left !== prevProps.insets.left || insets.right !== prevProps.insets.right) { this.setHeader(); } } @@ -333,9 +333,10 @@ class RoomsListView extends React.Component { /> )), headerTitle: () => , + // Keep it aligned to RoomView's header headerTitleContainerStyle: { left: 60 + insets.left, - right: 36 + insets.right + right: 80 + insets.right }, headerRight: () => (searching ? null : ( From bfbdc21dc6047d533342089e95d2af51889b88e4 Mon Sep 17 00:00:00 2001 From: Diego Mello Date: Wed, 1 Jul 2020 13:24:21 -0300 Subject: [PATCH 09/19] Renamed RoomHeaderLeft to LeftButtons --- .../{RoomHeaderLeft.js => LeftButtons.js} | 6 ++-- app/views/RoomView/Header/index.js | 4 +-- app/views/RoomView/index.js | 32 +++++++++---------- 3 files changed, 21 insertions(+), 21 deletions(-) rename app/views/RoomView/Header/{RoomHeaderLeft.js => LeftButtons.js} (93%) diff --git a/app/views/RoomView/Header/RoomHeaderLeft.js b/app/views/RoomView/Header/LeftButtons.js similarity index 93% rename from app/views/RoomView/Header/RoomHeaderLeft.js rename to app/views/RoomView/Header/LeftButtons.js index 99257acfb5b..0ee3ccdaeed 100644 --- a/app/views/RoomView/Header/RoomHeaderLeft.js +++ b/app/views/RoomView/Header/LeftButtons.js @@ -13,7 +13,7 @@ const styles = StyleSheet.create({ } }); -const RoomHeaderLeft = React.memo(({ +const LeftButtons = React.memo(({ tmid, unreadsCount, navigation, baseUrl, userId, token, title, t, theme, goRoomActionsView, isMasterDetail }) => { if (!isMasterDetail || tmid) { @@ -44,7 +44,7 @@ const RoomHeaderLeft = React.memo(({ return null; }); -RoomHeaderLeft.propTypes = { +LeftButtons.propTypes = { tmid: PropTypes.string, unreadsCount: PropTypes.number, navigation: PropTypes.object, @@ -58,4 +58,4 @@ RoomHeaderLeft.propTypes = { isMasterDetail: PropTypes.bool }; -export default RoomHeaderLeft; +export default LeftButtons; diff --git a/app/views/RoomView/Header/index.js b/app/views/RoomView/Header/index.js index e94b58ca2f8..c07306a1ec8 100644 --- a/app/views/RoomView/Header/index.js +++ b/app/views/RoomView/Header/index.js @@ -4,9 +4,9 @@ import { connect } from 'react-redux'; import equal from 'deep-equal'; import Header from './Header'; +import LeftButtons from './LeftButtons'; import RightButtons from './RightButtons'; import { withTheme } from '../../../theme'; -import RoomHeaderLeft from './RoomHeaderLeft'; import { withDimensions } from '../../../dimensions'; class RoomHeaderView extends Component { @@ -117,4 +117,4 @@ const mapStateToProps = (state, ownProps) => { export default connect(mapStateToProps)(withDimensions(withTheme(RoomHeaderView))); -export { RightButtons, RoomHeaderLeft }; +export { RightButtons, LeftButtons }; diff --git a/app/views/RoomView/index.js b/app/views/RoomView/index.js index 6c8aefbe8c2..299368ebfbd 100644 --- a/app/views/RoomView/index.js +++ b/app/views/RoomView/index.js @@ -27,7 +27,7 @@ import styles from './styles'; import log from '../../utils/log'; import EventEmitter from '../../utils/events'; import I18n from '../../i18n'; -import RoomHeaderView, { RightButtons, RoomHeaderLeft } from './Header'; +import RoomHeaderView, { RightButtons, LeftButtons } from './Header'; import StatusBar from '../../containers/StatusBar'; import Separator from './Separator'; import { themes } from '../../constants/colors'; @@ -315,6 +315,21 @@ class RoomView extends React.Component { left: isAndroid ? 58 : 70 + insets.left, right: 46 + insets.right }, + headerLeft: () => ( + + ), headerTitle: () => ( - ), - headerLeft: () => ( - ) }); } From 8c75e65578cfd60d27b80863887dd6b2cdeef2e1 Mon Sep 17 00:00:00 2001 From: Diego Mello Date: Wed, 1 Jul 2020 13:48:04 -0300 Subject: [PATCH 10/19] RoomView back button --- app/views/RoomView/Header/LeftButtons.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/app/views/RoomView/Header/LeftButtons.js b/app/views/RoomView/Header/LeftButtons.js index 0ee3ccdaeed..76cbc6c7591 100644 --- a/app/views/RoomView/Header/LeftButtons.js +++ b/app/views/RoomView/Header/LeftButtons.js @@ -18,11 +18,16 @@ const LeftButtons = React.memo(({ }) => { if (!isMasterDetail || tmid) { const onPress = useCallback(() => navigation.goBack()); + const label = unreadsCount > 99 ? '+99' : unreadsCount || ' '; + const labelLength = label.length ? label.length : 1; + const marginLeft = -2 * labelLength; + const fontSize = labelLength > 1 ? 14 : 17; return ( 999 ? '+999' : unreadsCount || ' '} + label={label} onPress={onPress} tintColor={themes[theme].headerTintColor} + labelStyle={{ fontSize, marginLeft }} /> ); } From 4b04f4fdde3ed35a58bbcb5f5640dd8befa4b33d Mon Sep 17 00:00:00 2001 From: Diego Mello Date: Wed, 1 Jul 2020 14:09:57 -0300 Subject: [PATCH 11/19] Search icon on RoomView --- app/views/RoomView/Header/RightButtons.js | 17 +++++++++++++++++ app/views/RoomView/index.js | 2 +- 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/app/views/RoomView/Header/RightButtons.js b/app/views/RoomView/Header/RightButtons.js index caec40d226d..503f6b80d25 100644 --- a/app/views/RoomView/Header/RightButtons.js +++ b/app/views/RoomView/Header/RightButtons.js @@ -68,6 +68,17 @@ class RightButtonsContainer extends React.PureComponent { } } + goSearchView = () => { + const { + rid, navigation, isMasterDetail + } = this.props; + if (isMasterDetail) { + navigation.navigate('ModalStackNavigator', { screen: 'SearchMessagesView', params: { rid } }); + } else { + navigation.navigate('SearchMessagesView', { rid }); + } + } + toggleFollowThread = () => { const { isFollowingThread } = this.state; const { toggleFollowThread } = this.props; @@ -104,6 +115,12 @@ class RightButtonsContainer extends React.PureComponent { testID='room-view-header-threads' /> ) : null} + ); } diff --git a/app/views/RoomView/index.js b/app/views/RoomView/index.js index 299368ebfbd..2dae84bbfcb 100644 --- a/app/views/RoomView/index.js +++ b/app/views/RoomView/index.js @@ -313,7 +313,7 @@ class RoomView extends React.Component { // Keep it aligned to message content headerTitleContainerStyle: { left: isAndroid ? 58 : 70 + insets.left, - right: 46 + insets.right + right: 80 + insets.right }, headerLeft: () => ( Date: Wed, 1 Jul 2020 14:19:21 -0300 Subject: [PATCH 12/19] Refactor --- app/containers/Header/index.js | 5 +++++ app/views/RoomView/Header/Header.js | 11 +---------- app/views/RoomView/index.js | 9 +++++---- app/views/RoomsListView/index.js | 8 ++++---- 4 files changed, 15 insertions(+), 18 deletions(-) diff --git a/app/containers/Header/index.js b/app/containers/Header/index.js index 249b832e466..2137a71ad54 100644 --- a/app/containers/Header/index.js +++ b/app/containers/Header/index.js @@ -20,6 +20,11 @@ export const getHeaderHeight = (isLandscape) => { return 56; }; +export const getHeaderTitlePosition = insets => ({ + left: 60 + insets.left, + right: 80 + insets.right +}); + const styles = StyleSheet.create({ container: { height: headerHeight, diff --git a/app/views/RoomView/Header/Header.js b/app/views/RoomView/Header/Header.js index 58792de2e9f..8e815662fc9 100644 --- a/app/views/RoomView/Header/Header.js +++ b/app/views/RoomView/Header/Header.js @@ -6,28 +6,20 @@ import { import I18n from '../../../i18n'; import sharedStyles from '../../Styles'; -import { isAndroid, isTablet } from '../../../utils/deviceInfo'; import Icon from './Icon'; import { themes } from '../../../constants/colors'; import Markdown from '../../../containers/markdown'; -const androidMarginLeft = isTablet ? 0 : 4; - const TITLE_SIZE = 16; const styles = StyleSheet.create({ container: { flex: 1, - marginRight: isAndroid ? 15 : 5, - marginLeft: isAndroid ? androidMarginLeft : -10, justifyContent: 'center' }, titleContainer: { alignItems: 'center', flexDirection: 'row' }, - threadContainer: { - marginRight: isAndroid ? 20 : undefined - }, title: { ...sharedStyles.textSemibold, fontSize: TITLE_SIZE @@ -36,7 +28,6 @@ const styles = StyleSheet.create({ alignItems: 'center' }, subtitle: { - marginRight: -16, ...sharedStyles.textRegular, fontSize: 12 }, @@ -147,7 +138,7 @@ const Header = React.memo(({ style={styles.container} disabled={tmid} > - + ( { const { searching } = this.state; const { navigation, isMasterDetail, insets } = this.props; + const headerTitlePosition = getHeaderTitlePosition(insets); return { headerTitleAlign: 'left', headerLeft: () => (searching ? ( @@ -333,10 +334,9 @@ class RoomsListView extends React.Component { /> )), headerTitle: () => , - // Keep it aligned to RoomView's header headerTitleContainerStyle: { - left: 60 + insets.left, - right: 80 + insets.right + left: headerTitlePosition.left, + right: headerTitlePosition.right }, headerRight: () => (searching ? null : ( From 3825ca38838ba60da54c749f243d1e1eed1ab715 Mon Sep 17 00:00:00 2001 From: Diego Mello Date: Wed, 1 Jul 2020 14:52:59 -0300 Subject: [PATCH 13/19] Fix header on tablet --- app/views/RoomsListView/Header/Header.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/views/RoomsListView/Header/Header.js b/app/views/RoomsListView/Header/Header.js index dc8456ce93a..ab49cc8b172 100644 --- a/app/views/RoomsListView/Header/Header.js +++ b/app/views/RoomsListView/Header/Header.js @@ -9,11 +9,13 @@ import I18n from '../../../i18n'; import sharedStyles from '../../Styles'; import { themes } from '../../../constants/colors'; import { CustomIcon } from '../../../lib/Icons'; +import { isTablet } from '../../../utils/deviceInfo'; const styles = StyleSheet.create({ container: { flex: 1, - justifyContent: 'center' + justifyContent: 'center', + marginLeft: isTablet ? 10 : 0 }, button: { flexDirection: 'row', From 74bbdd7fc4b5845367361ea6aa1512e87fde3880 Mon Sep 17 00:00:00 2001 From: Diego Mello Date: Wed, 1 Jul 2020 14:54:59 -0300 Subject: [PATCH 14/19] Fix search messages close button on tablet --- app/views/RoomView/Header/RightButtons.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/RoomView/Header/RightButtons.js b/app/views/RoomView/Header/RightButtons.js index 503f6b80d25..201866fe611 100644 --- a/app/views/RoomView/Header/RightButtons.js +++ b/app/views/RoomView/Header/RightButtons.js @@ -73,7 +73,7 @@ class RightButtonsContainer extends React.PureComponent { rid, navigation, isMasterDetail } = this.props; if (isMasterDetail) { - navigation.navigate('ModalStackNavigator', { screen: 'SearchMessagesView', params: { rid } }); + navigation.navigate('ModalStackNavigator', { screen: 'SearchMessagesView', params: { rid, showCloseModal: true } }); } else { navigation.navigate('SearchMessagesView', { rid }); } From 2e83cc24b6765d0a2a3c479b32d93d5d5e1d3306 Mon Sep 17 00:00:00 2001 From: Diego Mello Date: Wed, 1 Jul 2020 15:28:35 -0300 Subject: [PATCH 15/19] Search key command --- app/views/RoomsListView/index.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/app/views/RoomsListView/index.js b/app/views/RoomsListView/index.js index 8ae95cfb195..dcdfff8cf49 100644 --- a/app/views/RoomsListView/index.js +++ b/app/views/RoomsListView/index.js @@ -707,8 +707,7 @@ class RoomsListView extends React.Component { if (handleCommandShowPreferences(event)) { navigation.navigate('SettingsView'); } else if (handleCommandSearching(event)) { - this.scroll.scrollToOffset({ animated: true, offset: 0 }); - // this.inputRef.focus(); + this.initSearching(); } else if (handleCommandSelectRoom(event)) { this.goRoomByIndex(input); } else if (handleCommandPreviousRoom(event)) { From e2233ea97959244d5c87532537584293c885a78c Mon Sep 17 00:00:00 2001 From: Diego Mello Date: Wed, 1 Jul 2020 16:04:48 -0300 Subject: [PATCH 16/19] Network status on RoomView header subtitle --- app/views/RoomView/Header/Header.js | 7 +------ app/views/RoomView/Header/index.js | 21 ++++++++++++++++++--- 2 files changed, 19 insertions(+), 9 deletions(-) diff --git a/app/views/RoomView/Header/Header.js b/app/views/RoomView/Header/Header.js index 8e815662fc9..9022514ab01 100644 --- a/app/views/RoomView/Header/Header.js +++ b/app/views/RoomView/Header/Header.js @@ -78,12 +78,8 @@ SubTitle.propTypes = { }; const HeaderTitle = React.memo(({ - title, tmid, prid, scale, connecting, theme + title, tmid, prid, scale, theme }) => { - if (connecting) { - title = I18n.t('Connecting'); - } - if (!tmid && !prid) { return ( { } return { - connecting: state.meteor.connecting, + connecting: state.meteor.connecting || state.server.loading, + connected: state.meteor.connected, usersTyping: state.usersTyping, status, statusText From ea1882f42ac344c68f7b26235f9da55d9745bd0c Mon Sep 17 00:00:00 2001 From: Diego Mello Date: Wed, 1 Jul 2020 17:31:42 -0300 Subject: [PATCH 17/19] Update tests --- app/containers/HeaderButton.js | 2 +- app/views/RoomsListView/Header/Header.js | 1 + app/views/RoomsListView/index.js | 1 + e2e/helpers/app.js | 11 ++++++++++- e2e/tests/assorted/02-broadcast.spec.js | 6 ++---- e2e/tests/assorted/05-joinpublicroom.spec.js | 6 ++---- e2e/tests/onboarding/06-roomslist.spec.js | 8 ++------ e2e/tests/room/02-room.spec.js | 6 ++---- e2e/tests/room/03-roomactions.spec.js | 7 ++----- e2e/tests/room/04-roominfo.spec.js | 8 ++------ 10 files changed, 25 insertions(+), 31 deletions(-) diff --git a/app/containers/HeaderButton.js b/app/containers/HeaderButton.js index fdbe9c7e414..e712a7e1eb7 100644 --- a/app/containers/HeaderButton.js +++ b/app/containers/HeaderButton.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { HeaderButtons, HeaderButton, Item } from 'react-navigation-header-buttons'; import { CustomIcon } from '../lib/Icons'; -import { isIOS, isAndroid } from '../utils/deviceInfo'; +import { isIOS } from '../utils/deviceInfo'; import { themes } from '../constants/colors'; import I18n from '../i18n'; import { withTheme } from '../theme'; diff --git a/app/views/RoomsListView/Header/Header.js b/app/views/RoomsListView/Header/Header.js index ab49cc8b172..a8eb3addb1a 100644 --- a/app/views/RoomsListView/Header/Header.js +++ b/app/views/RoomsListView/Header/Header.js @@ -48,6 +48,7 @@ const Header = React.memo(({ placeholder='Search' onChangeText={onSearchChangeText} theme={theme} + testID='rooms-list-view-search-input' /> ); diff --git a/app/views/RoomsListView/index.js b/app/views/RoomsListView/index.js index dcdfff8cf49..a7b4ee1a711 100644 --- a/app/views/RoomsListView/index.js +++ b/app/views/RoomsListView/index.js @@ -352,6 +352,7 @@ class RoomsListView extends React.Component { title='search' iconName='magnifier' onPress={this.initSearching} + testID='rooms-list-view-search' /> )) diff --git a/e2e/helpers/app.js b/e2e/helpers/app.js index 5657d4b14ae..9841c4126be 100644 --- a/e2e/helpers/app.js +++ b/e2e/helpers/app.js @@ -72,6 +72,14 @@ async function sleep(ms) { return new Promise(res => setTimeout(res, ms)); } +async function searchRoom(room) { + await element(by.id('rooms-list-view-search')).tap(); + await expect(element(by.id('rooms-list-view-search-input'))).toExist(); + await waitFor(element(by.id('rooms-list-view-search-input'))).toExist().withTimeout(5000); + await element(by.id('rooms-list-view-search-input')).typeText(room); + await sleep(2000); +} + module.exports = { navigateToWorkspace, navigateToLogin, @@ -80,5 +88,6 @@ module.exports = { logout, createUser, tapBack, - sleep + sleep, + searchRoom }; \ No newline at end of file diff --git a/e2e/tests/assorted/02-broadcast.spec.js b/e2e/tests/assorted/02-broadcast.spec.js index 04e3964dd38..ada0641c3bb 100644 --- a/e2e/tests/assorted/02-broadcast.spec.js +++ b/e2e/tests/assorted/02-broadcast.spec.js @@ -3,7 +3,7 @@ const { } = require('detox'); const OTP = require('otp.js'); const GA = OTP.googleAuthenticator; -const { navigateToLogin, login, tapBack, sleep, createUser } = require('../../helpers/app'); +const { navigateToLogin, login, tapBack, sleep, searchRoom } = require('../../helpers/app'); const data = require('../../data'); describe('Broadcast room', () => { @@ -73,9 +73,7 @@ describe('Broadcast room', () => { await sleep(1000); await element(by.id('two-factor-send')).tap(); await waitFor(element(by.id('rooms-list-view'))).toBeVisible().withTimeout(10000); - await element(by.type('UIScrollView')).atIndex(1).scrollTo('top'); - await element(by.id('rooms-list-view-search')).typeText(`broadcast${ data.random }`); - await sleep(2000); + await searchRoom(`broadcast${ data.random }`); await waitFor(element(by.id(`rooms-list-view-item-broadcast${ data.random }`))).toExist().withTimeout(60000); await expect(element(by.id(`rooms-list-view-item-broadcast${ data.random }`))).toExist(); await element(by.id(`rooms-list-view-item-broadcast${ data.random }`)).tap(); diff --git a/e2e/tests/assorted/05-joinpublicroom.spec.js b/e2e/tests/assorted/05-joinpublicroom.spec.js index 1e284db589b..8ebd71463b3 100644 --- a/e2e/tests/assorted/05-joinpublicroom.spec.js +++ b/e2e/tests/assorted/05-joinpublicroom.spec.js @@ -2,7 +2,7 @@ const { device, expect, element, by, waitFor } = require('detox'); const data = require('../../data'); -const { tapBack, sleep } = require('../../helpers/app'); +const { tapBack, sleep, searchRoom } = require('../../helpers/app'); const room = 'detox-public'; @@ -16,9 +16,7 @@ async function mockMessage(message) { async function navigateToRoom() { await sleep(2000); - await element(by.type('UIScrollView')).atIndex(1).scrollTo('top'); - await element(by.id('rooms-list-view-search')).typeText(room); - await sleep(2000); + await searchRoom(room); await waitFor(element(by.id(`rooms-list-view-item-${ room }`)).atIndex(0)).toBeVisible().withTimeout(60000); await element(by.id(`rooms-list-view-item-${ room }`)).atIndex(0).tap(); await waitFor(element(by.id('room-view'))).toBeVisible().withTimeout(5000); diff --git a/e2e/tests/onboarding/06-roomslist.spec.js b/e2e/tests/onboarding/06-roomslist.spec.js index 990fe94c632..5e7e1e8aa02 100644 --- a/e2e/tests/onboarding/06-roomslist.spec.js +++ b/e2e/tests/onboarding/06-roomslist.spec.js @@ -1,7 +1,7 @@ const { device, expect, element, by, waitFor } = require('detox'); -const { logout, tapBack, sleep } = require('../../helpers/app'); +const { logout, tapBack, sleep, searchRoom } = require('../../helpers/app'); describe('Rooms list screen', () => { describe('Render', () => { @@ -27,10 +27,7 @@ describe('Rooms list screen', () => { describe('Usage', () => { it('should search room and navigate', async() => { - await element(by.type('UIScrollView')).atIndex(1).scrollTo('top'); - await waitFor(element(by.id('rooms-list-view-search'))).toExist().withTimeout(2000); - await element(by.id('rooms-list-view-search')).typeText('rocket.cat'); - await sleep(2000); + await searchRoom('rocket.cat'); await waitFor(element(by.id('rooms-list-view-item-rocket.cat'))).toBeVisible().withTimeout(60000); await expect(element(by.id('rooms-list-view-item-rocket.cat'))).toBeVisible(); await element(by.id('rooms-list-view-item-rocket.cat')).tap(); @@ -41,7 +38,6 @@ describe('Rooms list screen', () => { await tapBack(); await waitFor(element(by.id('rooms-list-view'))).toBeVisible().withTimeout(2000); await expect(element(by.id('rooms-list-view'))).toBeVisible(); - // await element(by.id('rooms-list-view-search')).typeText(''); await sleep(2000); await waitFor(element(by.id('rooms-list-view-item-rocket.cat'))).toExist().withTimeout(60000); await expect(element(by.id('rooms-list-view-item-rocket.cat'))).toExist(); diff --git a/e2e/tests/room/02-room.spec.js b/e2e/tests/room/02-room.spec.js index f307e436928..95906ae1d72 100644 --- a/e2e/tests/room/02-room.spec.js +++ b/e2e/tests/room/02-room.spec.js @@ -2,7 +2,7 @@ const { device, expect, element, by, waitFor } = require('detox'); const data = require('../../data'); -const { tapBack, sleep } = require('../../helpers/app'); +const { tapBack, sleep, searchRoom } = require('../../helpers/app'); async function mockMessage(message) { await element(by.id('messagebox-input')).tap(); @@ -13,9 +13,7 @@ async function mockMessage(message) { }; async function navigateToRoom() { - await element(by.type('UIScrollView')).atIndex(1).scrollTo('top'); - await element(by.id('rooms-list-view-search')).typeText(`private${ data.random }`); - await sleep(2000); + await searchRoom(`private${ data.random }`); await waitFor(element(by.id(`rooms-list-view-item-private${ data.random }`))).toExist().withTimeout(60000); await element(by.id(`rooms-list-view-item-private${ data.random }`)).tap(); await waitFor(element(by.id('room-view'))).toBeVisible().withTimeout(5000); diff --git a/e2e/tests/room/03-roomactions.spec.js b/e2e/tests/room/03-roomactions.spec.js index 83f989b0ed4..5294389a0ad 100644 --- a/e2e/tests/room/03-roomactions.spec.js +++ b/e2e/tests/room/03-roomactions.spec.js @@ -2,7 +2,7 @@ const { device, expect, element, by, waitFor } = require('detox'); const data = require('../../data'); -const { tapBack, sleep } = require('../../helpers/app'); +const { tapBack, sleep, searchRoom } = require('../../helpers/app'); const scrollDown = 200; @@ -13,10 +13,7 @@ async function navigateToRoomActions(type) { } else { room = `private${ data.random }`; } - await waitFor(element(by.id('rooms-list-view'))).toExist().withTimeout(10000); - await element(by.type('UIScrollView')).atIndex(1).scrollTo('top'); - await element(by.id('rooms-list-view-search')).typeText(room); - await sleep(2000); + await searchRoom(room); await waitFor(element(by.id(`rooms-list-view-item-${ room }`))).toExist().withTimeout(60000); await element(by.id(`rooms-list-view-item-${ room }`)).tap(); await waitFor(element(by.id('room-view'))).toExist().withTimeout(2000); diff --git a/e2e/tests/room/04-roominfo.spec.js b/e2e/tests/room/04-roominfo.spec.js index 5fc10eb95fe..35a45441bc5 100644 --- a/e2e/tests/room/04-roominfo.spec.js +++ b/e2e/tests/room/04-roominfo.spec.js @@ -2,7 +2,7 @@ const { device, expect, element, by, waitFor } = require('detox'); const data = require('../../data'); -const { tapBack, sleep } = require('../../helpers/app'); +const { tapBack, sleep, searchRoom } = require('../../helpers/app'); async function navigateToRoomInfo(type) { let room; @@ -11,10 +11,7 @@ async function navigateToRoomInfo(type) { } else { room = `private${ data.random }`; } - await waitFor(element(by.id('rooms-list-view'))).toExist().withTimeout(10000); - await element(by.type('UIScrollView')).atIndex(1).swipe('down'); - await element(by.id('rooms-list-view-search')).typeText(room); - await sleep(2000); + await searchRoom(room); await waitFor(element(by.id(`rooms-list-view-item-${ room }`))).toExist().withTimeout(60000); await element(by.id(`rooms-list-view-item-${ room }`)).tap(); await waitFor(element(by.id('room-view'))).toExist().withTimeout(2000); @@ -311,7 +308,6 @@ describe('Room info screen', () => { await expect(element(by.text('Yes, delete it!'))).toExist(); await element(by.text('Yes, delete it!')).tap(); await waitFor(element(by.id('rooms-list-view'))).toExist().withTimeout(10000); - // await element(by.id('rooms-list-view-search')).typeText(''); await sleep(2000); await waitFor(element(by.id(`rooms-list-view-item-${ room }`))).toBeNotVisible().withTimeout(60000); await expect(element(by.id(`rooms-list-view-item-${ room }`))).toBeNotVisible(); From b3d55da131a9a44040b82e3ac81b11647e5cfd2e Mon Sep 17 00:00:00 2001 From: Diego Mello Date: Mon, 6 Jul 2020 17:47:57 -0300 Subject: [PATCH 18/19] Scale content --- app/views/RoomsListView/Header/Header.js | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/app/views/RoomsListView/Header/Header.js b/app/views/RoomsListView/Header/Header.js index a8eb3addb1a..839048bc06f 100644 --- a/app/views/RoomsListView/Header/Header.js +++ b/app/views/RoomsListView/Header/Header.js @@ -9,7 +9,8 @@ import I18n from '../../../i18n'; import sharedStyles from '../../Styles'; import { themes } from '../../../constants/colors'; import { CustomIcon } from '../../../lib/Icons'; -import { isTablet } from '../../../utils/deviceInfo'; +import { isTablet, isIOS } from '../../../utils/deviceInfo'; +import { useOrientation } from '../../../dimensions'; const styles = StyleSheet.create({ container: { @@ -21,12 +22,10 @@ const styles = StyleSheet.create({ flexDirection: 'row', alignItems: 'center' }, - server: { - fontSize: 16, + title: { ...sharedStyles.textSemibold }, - updating: { - fontSize: 12, + subtitle: { ...sharedStyles.textRegular }, upsideDown: { @@ -39,12 +38,17 @@ const Header = React.memo(({ }) => { const titleColorStyle = { color: themes[theme].headerTitleColor }; const isLight = theme === 'light'; + const { isLandscape } = useOrientation(); + const scale = isIOS && isLandscape && !isTablet ? 0.8 : 1; + const titleFontSize = 16 * scale; + const subTitleFontSize = 12 * scale; + if (showSearchHeader) { return ( - {serverName} + {serverName} - {subtitle ? {subtitle} : null} + {subtitle ? {subtitle} : null} ); From 5556e1c492022bc2cd28ab3acc36b745fbd6ef41 Mon Sep 17 00:00:00 2001 From: Diego Mello Date: Mon, 6 Jul 2020 17:52:12 -0300 Subject: [PATCH 19/19] SearchBox cancel color --- app/containers/SearchBox.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/containers/SearchBox.js b/app/containers/SearchBox.js index 7c3e337ee15..89c51def1a8 100644 --- a/app/containers/SearchBox.js +++ b/app/containers/SearchBox.js @@ -47,7 +47,7 @@ const styles = StyleSheet.create({ const CancelButton = (onCancelPress, theme) => ( - {I18n.t('Cancel')} + {I18n.t('Cancel')} );