From 2b4574885b24d4ebdf75b3aec4f4c228cb2f9c15 Mon Sep 17 00:00:00 2001 From: Elias Nahum Date: Thu, 16 May 2019 20:40:32 -0400 Subject: [PATCH] Keep the channel drawer opened on tablets (#2793) * Keep the channel drawer opened on tablets * update en.json after running mmjstool * Set the channel drawer to width 220 * feedback review * PM Review * Fix snapshots --- .../channel_loader/channel_loader.js | 21 +- .../post_body_additional_content.js | 4 + app/components/search_bar/search_bar.ios.js | 6 +- app/components/search_bar/search_box.js | 9 +- app/components/sidebars/drawer_layout.js | 181 ++++++++++++------ .../__snapshots__/channel_item.test.js.snap | 14 +- .../channel_item/channel_item.js | 2 +- .../main/channels_list/channels_list.js | 16 +- .../main/drawer_swipper/drawer_swiper.js | 31 ++- .../sidebars/main/drawer_swipper/index.js | 3 - app/components/sidebars/main/index.js | 3 +- app/components/sidebars/main/main_sidebar.js | 53 ++--- .../sidebars/main/teams_list/teams_list.js | 21 +- app/components/sidebars/settings/index.js | 3 +- .../sidebars/settings/settings_sidebar.js | 8 +- app/mattermost.js | 11 ++ .../channel_nav_bar/channel_drawer_button.js | 71 +++---- .../channel_nav_bar/channel_nav_bar.js | 16 +- .../__snapshots__/more_channels.test.js.snap | 2 + .../selector_screen.test.js.snap | 12 ++ 20 files changed, 290 insertions(+), 197 deletions(-) diff --git a/app/components/channel_loader/channel_loader.js b/app/components/channel_loader/channel_loader.js index 34faed959..7b9d51580 100644 --- a/app/components/channel_loader/channel_loader.js +++ b/app/components/channel_loader/channel_loader.js @@ -11,6 +11,7 @@ import {ImageContent} from 'rn-placeholder'; import EventEmitter from 'mattermost-redux/utils/event_emitter'; +import {DeviceTypes} from 'app/constants'; import CustomPropTypes from 'app/constants/custom_prop_types'; import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme'; @@ -99,7 +100,12 @@ export default class ChannelLoader extends PureComponent { }; render() { - const {channelIsLoading, maxRows, style: styleProp, theme} = this.props; + const { + channelIsLoading, + maxRows, + style: styleProp, + theme, + } = this.props; if (!channelIsLoading) { return null; @@ -107,9 +113,14 @@ export default class ChannelLoader extends PureComponent { const style = getStyleSheet(theme); const bg = this.props.backgroundColor || theme.centerChannelBg; + const containerStyle = [style.container]; + + if (DeviceTypes.IS_TABLET) { + containerStyle.push(style.tablet); + } return ( - + {Array(maxRows).fill().map((item, index) => this.buildSections({ key: index, style, @@ -125,12 +136,14 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { return { container: { flex: 1, + }, + tablet: { ...Platform.select({ android: { - top: 0, + paddingTop: 25, }, ios: { - paddingTop: 15, + paddingTop: 30, }, }), }, diff --git a/app/components/post_body_additional_content/post_body_additional_content.js b/app/components/post_body_additional_content/post_body_additional_content.js index a4891055a..e9ca8450a 100644 --- a/app/components/post_body_additional_content/post_body_additional_content.js +++ b/app/components/post_body_additional_content/post_body_additional_content.js @@ -156,6 +156,10 @@ export default class PostBodyAdditionalContent extends PureComponent { const deviceSize = deviceWidth > deviceHeight ? deviceHeight : deviceWidth; let maxWidth = deviceSize - 78; + if (maxWidth > MAX_YOUTUBE_IMAGE_WIDTH) { + maxWidth = MAX_YOUTUBE_IMAGE_WIDTH; + } + if (height <= MAX_YOUTUBE_IMAGE_HEIGHT) { maxHeight = height; } else { diff --git a/app/components/search_bar/search_bar.ios.js b/app/components/search_bar/search_bar.ios.js index cec4e3d0f..305840ed7 100644 --- a/app/components/search_bar/search_bar.ios.js +++ b/app/components/search_bar/search_bar.ios.js @@ -37,6 +37,8 @@ export default class SearchBarIos extends PureComponent { blurOnSubmit: PropTypes.bool, value: PropTypes.string, leftComponent: PropTypes.element, + searchIconCollapsedMargin: PropTypes.number, + searchIconExpandedMargin: PropTypes.number, }; static defaultProps = { @@ -48,6 +50,8 @@ export default class SearchBarIos extends PureComponent { onSelectionChange: () => true, blurOnSubmit: true, leftComponent: null, + searchIconCollapsedMargin: 10, + searchIconExpandedMargin: 10, }; cancel = () => { @@ -102,8 +106,6 @@ export default class SearchBarIos extends PureComponent { ref='search' placeholderCollapsedMargin={33} placeholderExpandedMargin={33} - searchIconCollapsedMargin={10} - searchIconExpandedMargin={10} shadowVisible={false} onCancel={this.onCancel} onChangeText={this.onChangeText} diff --git a/app/components/search_bar/search_box.js b/app/components/search_bar/search_box.js index 02ea12211..7360e5afd 100644 --- a/app/components/search_bar/search_box.js +++ b/app/components/search_bar/search_box.js @@ -76,6 +76,7 @@ export default class Search extends Component { shadowRadius: PropTypes.number, shadowVisible: PropTypes.bool, leftComponent: PropTypes.element, + inputCollapsedMargin: PropTypes.number, }; static defaultProps = { @@ -99,6 +100,7 @@ export default class Search extends Component { shadowVisible: false, value: '', leftComponent: null, + inputCollapsedMargin: 10, }; constructor(props) { @@ -310,7 +312,7 @@ export default class Search extends Component { Animated.timing( this.inputFocusWidthAnimated, { - toValue: this.contentWidth - this.state.leftComponentWidth - 10, + toValue: this.contentWidth - this.state.leftComponentWidth - this.props.inputCollapsedMargin, duration: 200, } ), @@ -347,7 +349,7 @@ export default class Search extends Component { Animated.timing( this.iconSearchAnimated, { - toValue: this.props.searchIconCollapsedMargin + this.state.leftComponentWidth, + toValue: (this.props.searchIconCollapsedMargin + this.state.leftComponentWidth), duration: 200, } ) : null), @@ -395,7 +397,7 @@ export default class Search extends Component { : null )} - + any, statusBarBackgroundColor?: string, useNativeAnimations?: boolean, + isTablet?: boolean, }; export type StateType = { @@ -79,6 +83,7 @@ export default class DrawerLayout extends Component { drawerWidth: 0, drawerPosition: 'left', useNativeAnimations: false, + isTablet: false, }; static positions = { @@ -89,14 +94,42 @@ export default class DrawerLayout extends Component { constructor(props: PropType, context: any) { super(props, context); + this._panResponder = PanResponder.create({ + onMoveShouldSetPanResponder: this._shouldSetPanResponder, + onPanResponderGrant: this._panResponderGrant, + onPanResponderMove: this._panResponderMove, + onPanResponderTerminationRequest: () => false, + onPanResponderRelease: this._panResponderRelease, + onPanResponderTerminate: () => {}, + }); + this.canClose = true; + this.openValue = new Animated.Value(0); this.state = { accessibilityViewIsModal: false, drawerShown: false, - openValue: new Animated.Value(0), }; + this.openValue.addListener(this.handleOpenValueChanged); } + handleOpenValueChanged = ({ value }) => { + const drawerShown = value > 0; + const accessibilityViewIsModal = drawerShown; + + if (drawerShown !== this.state.drawerShown) { + this.setState({ drawerShown, accessibilityViewIsModal }); + } + + if (this.props.keyboardDismissMode === 'on-drag') { + Keyboard.dismiss(); + } + + this._lastOpenValue = value; + if (this.props.onDrawerSlide) { + this.props.onDrawerSlide({ nativeEvent: { offset: value } }); + } + }; + getDrawerPosition() { const { drawerPosition } = this.props; const rtl = I18nManager.isRTL; @@ -105,38 +138,12 @@ export default class DrawerLayout extends Component { : drawerPosition; } - componentWillMount() { - const { openValue } = this.state; + renderDrawer = () => { + if (this.props.isTablet) { + return null; + } - openValue.addListener(({ value }) => { - const drawerShown = value > 0; - const accessibilityViewIsModal = drawerShown; - if (drawerShown !== this.state.drawerShown) { - this.setState({ drawerShown, accessibilityViewIsModal }); - } - - if (this.props.keyboardDismissMode === 'on-drag') { - Keyboard.dismiss(); - } - - this._lastOpenValue = value; - if (this.props.onDrawerSlide) { - this.props.onDrawerSlide({ nativeEvent: { offset: value } }); - } - }); - - this._panResponder = PanResponder.create({ - onMoveShouldSetPanResponder: this._shouldSetPanResponder, - onPanResponderGrant: this._panResponderGrant, - onPanResponderMove: this._panResponderMove, - onPanResponderTerminationRequest: () => false, - onPanResponderRelease: this._panResponderRelease, - onPanResponderTerminate: () => {}, - }); - } - - render() { - const { accessibilityViewIsModal, drawerShown, openValue } = this.state; + const { accessibilityViewIsModal, drawerShown } = this.state; const { drawerBackgroundColor, @@ -164,7 +171,7 @@ export default class DrawerLayout extends Component { outputRange = [drawerWidth, 0]; } - const drawerTranslateX = openValue.interpolate({ + const drawerTranslateX = this.openValue.interpolate({ inputRange: [0, 1], outputRange, extrapolate: 'clamp', @@ -174,7 +181,7 @@ export default class DrawerLayout extends Component { }; /* Overlay styles */ - const overlayOpacity = openValue.interpolate({ + const overlayOpacity = this.openValue.interpolate({ inputRange: [0, 1], outputRange: [0, 0.7], extrapolate: 'clamp', @@ -183,13 +190,7 @@ export default class DrawerLayout extends Component { const pointerEvents = drawerShown ? 'auto' : 'none'; return ( - - - {this.props.children} - + - {this.props.renderNavigationView()} + {this.props.renderNavigationView(drawerWidth)} + + ); + }; + + renderDrawerForTablet = () => { + const {accessibilityViewIsModal} = this.state; + const { + drawerWidth: width, + isTablet, + } = this.props; + + if (isTablet) { + return ( + + {this.props.renderNavigationView(width)} + + ); + } + + return null; + }; + + render() { + const {isTablet} = this.props; + const panHandlers = isTablet ? emptyObject : this._panResponder.panHandlers; + const containerStyles = [styles.container]; + + if (isTablet) { + containerStyles.push(styles.tabletContainer); + } + + return ( + + {this.renderDrawerForTablet()} + + {this.props.children} + + {this.renderDrawer()} ); } @@ -227,37 +272,42 @@ export default class DrawerLayout extends Component { }; openDrawer = (options: DrawerMovementOptionType = {}) => { - this._emitStateChanged(SETTLING); - Animated.spring(this.state.openValue, { - toValue: 1, - bounciness: 0, - restSpeedThreshold: 0.1, - useNativeDriver: this.props.useNativeAnimations, - ...options, - }).start(() => { - if (this.props.onDrawerOpen) { - telemetry.end(['channel:open_drawer']); - telemetry.save(); + if (!this.props.isTablet) { + this._emitStateChanged(SETTLING); + Animated.spring(this.openValue, { + toValue: 1, + bounciness: 0, + restSpeedThreshold: 0.1, + useNativeDriver: this.props.useNativeAnimations, + ...options, + }).start(() => { + this.handleOpenValueChanged({value: 1}); + if (this.props.onDrawerOpen) { + telemetry.end(['channel:open_drawer']); + telemetry.save(); - this.props.onDrawerOpen(); - } - this._emitStateChanged(IDLE); - }); + this.props.onDrawerOpen(); + } + this._emitStateChanged(IDLE); + }); + } }; closeDrawer = (options: DrawerMovementOptionType = {}) => { this._emitStateChanged(SETTLING); - Animated.spring(this.state.openValue, { + Animated.spring(this.openValue, { toValue: 0, bounciness: 0, restSpeedThreshold: 1, useNativeDriver: this.props.useNativeAnimations, ...options, }).start(() => { + this.handleOpenValueChanged({value: 0}); if (this.props.onDrawerClose) { telemetry.end(['channel:close_drawer']); this.props.onDrawerClose(); } + this._emitStateChanged(IDLE); }); }; @@ -347,7 +397,7 @@ export default class DrawerLayout extends Component { openValue = 0; } - this.state.openValue.setValue(openValue); + this.openValue.setValue(openValue); }; _panResponderRelease = ( @@ -423,12 +473,23 @@ export default class DrawerLayout extends Component { } const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: 'transparent', + }, + tabletContainer: { + flexDirection: 'row', + }, drawer: { position: 'absolute', top: 0, bottom: 0, zIndex: 1001, }, + tablet: { + height: '100%', + zIndex: 0, + }, main: { flex: 1, zIndex: 0, @@ -437,7 +498,7 @@ const styles = StyleSheet.create({ backgroundColor: '#000', position: 'absolute', top: 0, - left: 0, + left: -350, bottom: 0, right: 0, zIndex: 1000, diff --git a/app/components/sidebars/main/channels_list/channel_item/__snapshots__/channel_item.test.js.snap b/app/components/sidebars/main/channels_list/channel_item/__snapshots__/channel_item.test.js.snap index c413377ea..5940ff56f 100644 --- a/app/components/sidebars/main/channels_list/channel_item/__snapshots__/channel_item.test.js.snap +++ b/app/components/sidebars/main/channels_list/channel_item/__snapshots__/channel_item.test.js.snap @@ -87,7 +87,7 @@ exports[`ChannelItem should match snapshot 1`] = ` "fontWeight": "600", "height": "100%", "lineHeight": 44, - "paddingRight": 40, + "paddingRight": 10, "textAlignVertical": "center", }, Object { @@ -202,7 +202,7 @@ exports[`ChannelItem should match snapshot for current user i.e currentUser (you "fontWeight": "600", "height": "100%", "lineHeight": 44, - "paddingRight": 40, + "paddingRight": 10, "textAlignVertical": "center", }, Object { @@ -317,7 +317,7 @@ exports[`ChannelItem should match snapshot for current user i.e currentUser (you "fontWeight": "600", "height": "100%", "lineHeight": 44, - "paddingRight": 40, + "paddingRight": 10, "textAlignVertical": "center", }, Object { @@ -432,7 +432,7 @@ exports[`ChannelItem should match snapshot for deactivated user and is currentCh "fontWeight": "600", "height": "100%", "lineHeight": 44, - "paddingRight": 40, + "paddingRight": 10, "textAlignVertical": "center", }, Object { @@ -536,7 +536,7 @@ exports[`ChannelItem should match snapshot for deactivated user and is searchRes "fontWeight": "600", "height": "100%", "lineHeight": 44, - "paddingRight": 40, + "paddingRight": 10, "textAlignVertical": "center", }, Object { @@ -646,7 +646,7 @@ exports[`ChannelItem should match snapshot with draft 1`] = ` "fontWeight": "600", "height": "100%", "lineHeight": 44, - "paddingRight": 40, + "paddingRight": 10, "textAlignVertical": "center", }, Object { @@ -752,7 +752,7 @@ exports[`ChannelItem should match snapshot with mentions and muted 1`] = ` "fontWeight": "600", "height": "100%", "lineHeight": 44, - "paddingRight": 40, + "paddingRight": 10, "textAlignVertical": "center", }, Object { diff --git a/app/components/sidebars/main/channels_list/channel_item/channel_item.js b/app/components/sidebars/main/channels_list/channel_item/channel_item.js index b82c91845..4e5301985 100644 --- a/app/components/sidebars/main/channels_list/channel_item/channel_item.js +++ b/app/components/sidebars/main/channels_list/channel_item/channel_item.js @@ -241,7 +241,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { color: changeOpacity(theme.sidebarText, 0.4), fontSize: 14, fontWeight: '600', - paddingRight: 40, + paddingRight: 10, height: '100%', flex: 1, textAlignVertical: 'center', diff --git a/app/components/sidebars/main/channels_list/channels_list.js b/app/components/sidebars/main/channels_list/channels_list.js index cc609fd1f..6c5903f85 100644 --- a/app/components/sidebars/main/channels_list/channels_list.js +++ b/app/components/sidebars/main/channels_list/channels_list.js @@ -132,8 +132,9 @@ export default class ChannelsList extends PureComponent { ref='search_bar' placeholder={intl.formatMessage({id: 'mobile.channel_drawer.search', defaultMessage: 'Jump to...'})} cancelTitle={intl.formatMessage({id: 'mobile.post.cancel', defaultMessage: 'Cancel'})} + inputCollapsedMargin={0} backgroundColor='transparent' - inputHeight={34} + inputHeight={33} inputStyle={searchBarInput} placeholderTextColor={changeOpacity(theme.sidebarHeaderTextColor, 0.5)} tintColorSearch={changeOpacity(theme.sidebarHeaderTextColor, 0.5)} @@ -144,6 +145,8 @@ export default class ChannelsList extends PureComponent { onCancelButtonPress={this.cancelSearch} onChangeText={this.onSearch} onFocus={this.onSearchFocused} + searchIconCollapsedMargin={5} + searchIconExpandedMargin={5} value={term} leftComponent={( - - - {title} - + + {title} {list} @@ -175,13 +176,10 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { backgroundColor: theme.sidebarBg, flex: 1, }, - statusBar: { - backgroundColor: theme.sidebarHeaderBg, - }, headerContainer: { alignItems: 'center', paddingLeft: 10, - backgroundColor: theme.sidebarHeaderBg, + backgroundColor: theme.sidebarBg, flexDirection: 'row', borderBottomWidth: 1, borderBottomColor: changeOpacity(theme.sidebarHeaderTextColor, 0.10), diff --git a/app/components/sidebars/main/drawer_swipper/drawer_swiper.js b/app/components/sidebars/main/drawer_swipper/drawer_swiper.js index 67a3a1530..d36575e14 100644 --- a/app/components/sidebars/main/drawer_swipper/drawer_swiper.js +++ b/app/components/sidebars/main/drawer_swipper/drawer_swiper.js @@ -12,9 +12,8 @@ import Swiper from 'app/components/swiper'; export default class DrawerSwiper extends Component { static propTypes = { children: PropTypes.node.isRequired, - deviceWidth: PropTypes.number.isRequired, + drawerWidth: PropTypes.number.isRequired, onPageSelected: PropTypes.func, - openDrawerOffset: PropTypes.number, showTeams: PropTypes.bool.isRequired, theme: PropTypes.object.isRequired, drawerOpened: PropTypes.bool, @@ -25,11 +24,12 @@ export default class DrawerSwiper extends Component { openDrawerOffset: 0, }; + swiperRef = React.createRef(); + shouldComponentUpdate(nextProps) { - const {deviceWidth, openDrawerOffset, showTeams, theme} = this.props; - return nextProps.deviceWidth !== deviceWidth || + const {drawerWidth, showTeams, theme} = this.props; + return nextProps.drawerWidth !== drawerWidth || nextProps.showTeams !== showTeams || - nextProps.openDrawerOffset !== openDrawerOffset || nextProps.theme !== theme || nextProps.drawerOpened !== this.props.drawerOpened; } @@ -40,15 +40,15 @@ export default class DrawerSwiper extends Component { } }; - resetPage = () => { - if (this.refs.swiper) { - this.refs.swiper.scrollToIndex(1, false); + resetPage = (animated = false) => { + if (this.swiperRef?.current) { + this.swiperRef.current.scrollToIndex(1, animated); } }; scrollToStart = () => { - if (this.refs.swiper) { - this.refs.swiper.scrollToStart(); + if (this.swiperRef?.current) { + this.swiperRef.current.scrollToStart(); } }; @@ -57,8 +57,8 @@ export default class DrawerSwiper extends Component { }; showTeamsPage = () => { - if (this.refs.swiper) { - this.refs.swiper.scrollToIndex(0, true); + if (this.swiperRef?.current) { + this.swiperRef.current.scrollToIndex(0, true); this.swiperPageSelected(0); } }; @@ -66,8 +66,7 @@ export default class DrawerSwiper extends Component { render() { const { children, - deviceWidth, - openDrawerOffset, + drawerWidth, showTeams, theme, } = this.props; @@ -76,11 +75,11 @@ export default class DrawerSwiper extends Component { return ( { - if (this.state.drawerOpened && this.refs.drawer) { - this.refs.drawer.closeDrawer(); + if (this.state.drawerOpened && this.drawerRef?.current) { + this.drawerRef.current.closeDrawer(); return true; } @@ -128,8 +128,10 @@ export default class ChannelSidebar extends Component { }; closeChannelDrawer = () => { - if (this.state.drawerOpened && this.refs.drawer) { - this.refs.drawer.closeDrawer(); + if (this.state.drawerOpened && this.drawerRef?.current) { + this.drawerRef.current.closeDrawer(); + } else if (this.drawerSwiper && DeviceTypes.IS_TABLET) { + this.resetDrawer(true); } }; @@ -162,8 +164,8 @@ export default class ChannelSidebar extends Component { openChannelSidebar = () => { this.props.blurPostTextBox(); - if (this.refs.drawer) { - this.refs.drawer.openDrawer(); + if (this.drawerRef?.current) { + this.drawerRef.current.openDrawer(); } }; @@ -255,12 +257,8 @@ export default class ChannelSidebar extends Component { onPageSelected = (index) => { this.swiperIndex = index; - if (this.refs.drawer) { - if (this.swiperIndex === 0) { - this.refs.drawer.canClose = false; - } else { - this.refs.drawer.canClose = true; - } + if (this.drawerRef?.current) { + this.drawerRef.current.canClose = this.swiperIndex !== 0; } }; @@ -269,8 +267,8 @@ export default class ChannelSidebar extends Component { }; onSearchStart = () => { - if (this.refs.drawer) { - this.refs.drawer.canClose = false; + if (this.drawerRef?.current) { + this.drawerRef.current.canClose = false; } this.setState({searching: true}); }; @@ -287,7 +285,7 @@ export default class ChannelSidebar extends Component { } }; - renderNavigationView = () => { + renderNavigationView = (drawerWidth) => { const { navigator, teamsCount, @@ -350,6 +348,7 @@ export default class ChannelSidebar extends Component { return ( {lists} @@ -370,15 +369,17 @@ export default class ChannelSidebar extends Component { render() { const {children, deviceWidth} = this.props; const {openDrawerOffset} = this.state; + const drawerWidth = DeviceTypes.IS_TABLET ? TABLET_WIDTH : (deviceWidth - openDrawerOffset); return ( {children} diff --git a/app/components/sidebars/main/teams_list/teams_list.js b/app/components/sidebars/main/teams_list/teams_list.js index e6e0bc236..3788e6b02 100644 --- a/app/components/sidebars/main/teams_list/teams_list.js +++ b/app/components/sidebars/main/teams_list/teams_list.js @@ -139,15 +139,13 @@ export default class TeamsList extends PureComponent { return ( - - - - {moreAction} - + + + {moreAction} { backgroundColor: theme.sidebarBg, flex: 1, }, - statusBar: { - backgroundColor: theme.sidebarHeaderBg, - }, headerContainer: { alignItems: 'center', - backgroundColor: theme.sidebarHeaderBg, + backgroundColor: theme.sidebarBg, flexDirection: 'row', borderBottomWidth: 1, borderBottomColor: changeOpacity(theme.sidebarHeaderTextColor, 0.10), diff --git a/app/components/sidebars/settings/index.js b/app/components/sidebars/settings/index.js index 0c06dc947..140b697d0 100644 --- a/app/components/sidebars/settings/index.js +++ b/app/components/sidebars/settings/index.js @@ -8,7 +8,7 @@ import {logout, setStatus} from 'mattermost-redux/actions/users'; import {getTheme} from 'mattermost-redux/selectors/entities/preferences'; import {getCurrentUser, getStatusForUserId} from 'mattermost-redux/selectors/entities/users'; -import {getDimensions} from 'app/selectors/device'; +import {isLandscape, getDimensions} from 'app/selectors/device'; import SettingsSidebar from './settings_sidebar'; @@ -18,6 +18,7 @@ function mapStateToProps(state) { return { ...getDimensions(state), + isLandscape: isLandscape(state), currentUser, status, theme: getTheme(state), diff --git a/app/components/sidebars/settings/settings_sidebar.js b/app/components/sidebars/settings/settings_sidebar.js index 9b53e91be..ffade1249 100644 --- a/app/components/sidebars/settings/settings_sidebar.js +++ b/app/components/sidebars/settings/settings_sidebar.js @@ -19,7 +19,7 @@ import EventEmitter from 'mattermost-redux/utils/event_emitter'; import SafeAreaView from 'app/components/safe_area_view'; import DrawerLayout from 'app/components/sidebars/drawer_layout'; import UserStatus from 'app/components/user_status'; -import {NavigationTypes} from 'app/constants'; +import {DeviceTypes, NavigationTypes} from 'app/constants'; import {confirmOutOfOfficeDisabled} from 'app/utils/status'; import {preventDoubleTap} from 'app/utils/tap'; import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme'; @@ -30,6 +30,7 @@ import UserInfo from './user_info'; import StatusLabel from './status_label'; const DRAWER_INITIAL_OFFSET = 80; +const DRAWER_TABLET_WIDTH = 300; export default class SettingsDrawer extends PureComponent { static propTypes = { @@ -41,6 +42,7 @@ export default class SettingsDrawer extends PureComponent { children: PropTypes.node, currentUser: PropTypes.object.isRequired, deviceWidth: PropTypes.number.isRequired, + isLandscape: PropTypes.bool.isRequired, navigator: PropTypes.object, status: PropTypes.string, theme: PropTypes.object.isRequired, @@ -349,6 +351,7 @@ export default class SettingsDrawer extends PureComponent { render() { const {children, deviceWidth} = this.props; + const drawerWidth = DeviceTypes.IS_TABLET ? DRAWER_TABLET_WIDTH : (deviceWidth - DRAWER_INITIAL_OFFSET); return ( {children} @@ -373,7 +376,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { backgroundColor: changeOpacity(theme.centerChannelColor, 0.03), }, wrapper: { - flex: 1, paddingTop: 0, }, block: { diff --git a/app/mattermost.js b/app/mattermost.js index 293ce947a..518897269 100644 --- a/app/mattermost.js +++ b/app/mattermost.js @@ -149,8 +149,19 @@ const restartApp = async () => { Navigation.dismissModal({animationType: 'none'}); try { + const window = Dimensions.get('window'); + + handleOrientationChange({window}); await store.dispatch(loadConfigAndLicense()); await store.dispatch(loadMe()); + + if (Platform.OS === 'ios') { + StatusBarManager.getHeight( + (data) => { + handleStatusBarHeightChange(data.height); + } + ); + } } catch (e) { console.warn('Failed to load initial data while restarting', e); // eslint-disable-line no-console } diff --git a/app/screens/channel/channel_nav_bar/channel_drawer_button.js b/app/screens/channel/channel_nav_bar/channel_drawer_button.js index 3341b6774..e5482c677 100644 --- a/app/screens/channel/channel_nav_bar/channel_drawer_button.js +++ b/app/screens/channel/channel_nav_bar/channel_drawer_button.js @@ -5,7 +5,6 @@ import React, {PureComponent} from 'react'; import PropTypes from 'prop-types'; import {connect} from 'react-redux'; import { - PanResponder, TouchableOpacity, View, } from 'react-native'; @@ -21,7 +20,6 @@ import telemetry from 'app/telemetry'; import {getUnreadsInCurrentTeam} from 'mattermost-redux/selectors/entities/channels'; import {getCurrentTeamId, getTeamMemberships} from 'mattermost-redux/selectors/entities/teams'; -import EventEmitter from 'mattermost-redux/utils/event_emitter'; class ChannelDrawerButton extends PureComponent { static propTypes = { @@ -31,6 +29,7 @@ class ChannelDrawerButton extends PureComponent { mentionCount: PropTypes.number, myTeamMembers: PropTypes.object, theme: PropTypes.object, + visible: PropTypes.bool, }; static defaultProps = { @@ -38,36 +37,7 @@ class ChannelDrawerButton extends PureComponent { theme: {}, messageCount: 0, mentionCount: 0, - }; - - constructor(props) { - super(props); - - this.state = { - opacity: 1, - }; - } - - componentWillMount() { - this.panResponder = PanResponder.create({ - onStartShouldSetPanResponder: () => true, - onMoveShouldSetPanResponder: () => true, - onStartShouldSetResponderCapture: () => true, - onMoveShouldSetResponderCapture: () => true, - onResponderMove: () => false, - }); - } - - componentDidMount() { - EventEmitter.on('drawer_opacity', this.setOpacity); - } - - componentWillUnmount() { - EventEmitter.off('drawer_opacity', this.setOpacity); - } - - setOpacity = (value) => { - this.setState({opacity: value > 0 ? 0.1 : 1}); + visible: true, }; handlePress = preventDoubleTap(() => { @@ -82,7 +52,9 @@ class ChannelDrawerButton extends PureComponent { messageCount, myTeamMembers, theme, + visible, } = this.props; + const style = getStyleFromTheme(theme); let mentions = mentionCount; @@ -102,7 +74,7 @@ class ChannelDrawerButton extends PureComponent { } let badge; - if (badgeCount) { + if (badgeCount && visible) { badge = ( - ); + let icon; + let containerStyle; + if (visible) { + icon = ( + + ); + containerStyle = style.container; + } else { + icon = (); + containerStyle = style.tabletContainer; + } return ( - + {icon} {badge} @@ -143,6 +122,12 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => { container: { width: 55, }, + tabletContainer: { + width: 10, + }, + tabletIcon: { + height: 25, + }, wrapper: { alignItems: 'center', flex: 1, 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 d3fb51ec0..d84a2cd6f 100644 --- a/app/screens/channel/channel_nav_bar/channel_nav_bar.js +++ b/app/screens/channel/channel_nav_bar/channel_nav_bar.js @@ -41,13 +41,15 @@ export default class ChannelNavBar extends PureComponent { switch (Platform.OS) { case 'android': height = ANDROID_TOP_PORTRAIT; - if (isLandscape) { + if (DeviceTypes.IS_TABLET) { height = ANDROID_TOP_LANDSCAPE; } break; case 'ios': height = IOS_TOP_PORTRAIT - STATUS_BAR_HEIGHT; - if (isLandscape) { + if (DeviceTypes.IS_TABLET && isLandscape) { + height -= 1; + } else if (isLandscape) { height = IOS_TOP_LANDSCAPE; } @@ -57,9 +59,17 @@ export default class ChannelNavBar extends PureComponent { break; } + let drawerButtonVisible = false; + if (!DeviceTypes.IS_TABLET) { + drawerButtonVisible = true; + } + return ( - +