From bef0248daff163d8f4abb3d387b08c9a0a53a82e Mon Sep 17 00:00:00 2001 From: enahum Date: Thu, 4 Jan 2018 13:22:55 -0300 Subject: [PATCH] Android header height consistent across screens (#1324) * Android header height consistent across screens * Feedback review --- .../channel_drawer/channel_drawer.js | 24 ++++++++++++------ .../channels_list/channels_list.js | 5 +++- .../channel_drawer/teams_list/teams_list.js | 7 +++--- app/constants/view.js | 7 +++++- .../channel_nav_bar/channel_nav_bar.js | 25 ++++++++++++++++--- app/screens/settings/general/settings.js | 2 -- 6 files changed, 52 insertions(+), 18 deletions(-) diff --git a/app/components/channel_drawer/channel_drawer.js b/app/components/channel_drawer/channel_drawer.js index a9f82316c..2ca707906 100644 --- a/app/components/channel_drawer/channel_drawer.js +++ b/app/components/channel_drawer/channel_drawer.js @@ -11,9 +11,13 @@ import { StyleSheet, View } from 'react-native'; -import SafeAreaView from 'app/components/safe_area_view'; + +import {General, WebsocketEvents} from 'mattermost-redux/constants'; +import EventEmitter from 'mattermost-redux/utils/event_emitter'; import Drawer from 'app/components/drawer'; +import SafeAreaView from 'app/components/safe_area_view'; +import {ViewTypes} from 'app/contants'; import {alertErrorWithFallback} from 'app/utils/general'; import tracker from 'app/utils/time_tracker'; @@ -21,9 +25,12 @@ import ChannelsList from './channels_list'; import DrawerSwiper from './drawer_swipper'; import TeamsList from './teams_list'; -import {General, WebsocketEvents} from 'mattermost-redux/constants'; -import EventEmitter from 'mattermost-redux/utils/event_emitter'; - +const { + ANDROID_TOP_LANDSCAPE, + ANDROID_TOP_PORTRAIT, + IOS_TOP_LANDSCAPE, + IOS_TOP_PORTRAIT +} = ViewTypes; const DRAWER_INITIAL_OFFSET = 40; const DRAWER_LANDSCAPE_OFFSET = 150; @@ -381,9 +388,12 @@ export default class ChannelDrawer extends Component { }; render() { - const {children} = this.props; + const {children, isLandscape} = this.props; const {openDrawerOffset} = this.state; + const androidTop = isLandscape ? ANDROID_TOP_LANDSCAPE : ANDROID_TOP_PORTRAIT; + const iosTop = isLandscape ? IOS_TOP_LANDSCAPE : IOS_TOP_PORTRAIT; + return ( { borderBottomColor: changeOpacity(theme.sidebarHeaderTextColor, 0.10), ...Platform.select({ android: { - height: 46 + height: ANDROID_TOP_PORTRAIT }, ios: { height: 44 diff --git a/app/components/channel_drawer/teams_list/teams_list.js b/app/components/channel_drawer/teams_list/teams_list.js index 2b68b964a..55b4374a0 100644 --- a/app/components/channel_drawer/teams_list/teams_list.js +++ b/app/components/channel_drawer/teams_list/teams_list.js @@ -15,13 +15,14 @@ import {injectIntl, intlShape} from 'react-intl'; import MaterialIcon from 'react-native-vector-icons/MaterialIcons'; import FormattedText from 'app/components/formatted_text'; -import {ListTypes} from 'app/constants'; +import {ListTypes, ViewTypes} from 'app/constants'; import {wrapWithPreventDoubleTap} from 'app/utils/tap'; import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme'; import tracker from 'app/utils/time_tracker'; import TeamsListItem from './teams_list_item'; +const {ANDROID_TOP_PORTRAIT} = ViewTypes; const VIEWABILITY_CONFIG = { ...ListTypes.VISIBILITY_CONFIG_DEFAULTS, waitForInteraction: true @@ -165,7 +166,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { borderBottomColor: changeOpacity(theme.sidebarHeaderTextColor, 0.10), ...Platform.select({ android: { - height: 46 + height: ANDROID_TOP_PORTRAIT }, ios: { height: 44 @@ -185,7 +186,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { width: 50, ...Platform.select({ android: { - height: 46 + height: ANDROID_TOP_PORTRAIT }, ios: { height: 44 diff --git a/app/constants/view.js b/app/constants/view.js index 7914a8d62..ff315f64d 100644 --- a/app/constants/view.js +++ b/app/constants/view.js @@ -68,5 +68,10 @@ export default { FEATURE_TOGGLE_PREFIX: 'feature_enabled_', EMBED_PREVIEW: 'embed_preview', MIN_CHANNELNAME_LENGTH: 2, - MAX_CHANNELNAME_LENGTH: 22 + MAX_CHANNELNAME_LENGTH: 22, + ANDROID_TOP_LANDSCAPE: 46, + ANDROID_TOP_PORTRAIT: 56, + IOS_TOP_LANDSCAPE: 32, + IOS_TOP_PORTRAIT: 64, + STATUS_BAR_HEIGHT: 20 }; diff --git a/app/screens/channel/channel_nav_bar/channel_nav_bar.js b/app/screens/channel/channel_nav_bar/channel_nav_bar.js index 5ade262e5..2c1ea7e6a 100644 --- a/app/screens/channel/channel_nav_bar/channel_nav_bar.js +++ b/app/screens/channel/channel_nav_bar/channel_nav_bar.js @@ -6,6 +6,7 @@ import PropTypes from 'prop-types'; import {Platform, View} from 'react-native'; import DeviceInfo from 'react-native-device-info'; +import {ViewTypes} from 'app/contants'; import {makeStyleSheetFromTheme} from 'app/utils/theme'; import ChannelDrawerButton from './channel_drawer_button'; @@ -13,6 +14,14 @@ import ChannelSearchButton from './channel_search_button'; import ChannelTitle from './channel_title'; import SettingDrawerButton from './settings_drawer_button'; +const { + ANDROID_TOP_LANDSCAPE, + ANDROID_TOP_PORTRAIT, + IOS_TOP_LANDSCAPE, + IOS_TOP_PORTRAIT, + STATUS_BAR_HEIGHT +} = ViewTypes; + export default class ChannelNavBar extends PureComponent { static propTypes = { isLandscape: PropTypes.bool.isRequired, @@ -35,16 +44,24 @@ export default class ChannelNavBar extends PureComponent { const style = getStyleFromTheme(theme); const padding = {paddingHorizontal: 0}; - let height = 46; - if (Platform.OS === 'ios') { - height = 44; + let height; + switch (Platform.OS) { + case 'android': + height = ANDROID_TOP_PORTRAIT; if (isLandscape) { - height = 32; + height = ANDROID_TOP_LANDSCAPE; + } + break; + case 'ios': + height = IOS_TOP_PORTRAIT - STATUS_BAR_HEIGHT; + if (isLandscape) { + height = IOS_TOP_LANDSCAPE; } if (this.isX && isLandscape) { padding.paddingHorizontal = 10; } + break; } return ( diff --git a/app/screens/settings/general/settings.js b/app/screens/settings/general/settings.js index 9fd3953fc..f6d063672 100644 --- a/app/screens/settings/general/settings.js +++ b/app/screens/settings/general/settings.js @@ -152,8 +152,6 @@ class Settings extends PureComponent { backButtonTitle: '', navigatorStyle: { navBarHidden: false, - statusBarHidden: true, - statusBarHideWithNavBar: true, navBarTextColor: theme.sidebarHeaderTextColor, navBarBackgroundColor: theme.sidebarHeaderBg, navBarButtonColor: theme.sidebarHeaderTextColor