From bba8dc1616f266d604154bae01790436d478e3e3 Mon Sep 17 00:00:00 2001
From: enahum <nahumhbl@gmail.com>
Date: Mon, 8 Jan 2018 14:19:20 -0300
Subject: [PATCH] Left align title text in channel view navbar (#1327)

* Left align title text in channel view navbar

* UI feedback review
---
 .../channel_nav_bar/channel_drawer_button.js  |  7 +---
 .../channel_nav_bar/channel_nav_bar.js        |  6 +--
 .../channel_search_button.js                  |  5 ++-
 .../channel_title/channel_title.js            | 39 ++++++++-----------
 .../channel_nav_bar/channel_title/index.js    |  3 --
 .../channel_nav_bar/settings_drawer_button.js |  6 +--
 6 files changed, 24 insertions(+), 42 deletions(-)

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 a6c6c47fd..64dbd727c 100644
--- a/app/screens/channel/channel_nav_bar/channel_drawer_button.js
+++ b/app/screens/channel/channel_nav_bar/channel_drawer_button.js
@@ -145,17 +145,14 @@ class ChannelDrawerButton extends PureComponent {
 const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
     return {
         container: {
-            width: 40,
-            zIndex: 45
+            width: 55
         },
         wrapper: {
             alignItems: 'center',
             flex: 1,
             flexDirection: 'column',
             justifyContent: 'center',
-            paddingHorizontal: 10,
-            paddingTop: 5,
-            zIndex: 30
+            paddingHorizontal: 10
         },
         badge: {
             backgroundColor: theme.mentionBj,
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 60b4a1856..f8199d752 100644
--- a/app/screens/channel/channel_nav_bar/channel_nav_bar.js
+++ b/app/screens/channel/channel_nav_bar/channel_nav_bar.js
@@ -67,11 +67,7 @@ export default class ChannelNavBar extends PureComponent {
         return (
             <View style={[style.header, padding, {height}]}>
                 <ChannelDrawerButton openDrawer={openChannelDrawer}/>
-                <ChannelTitle
-                    onPress={onPress}
-                    height={height}
-                />
-                <View style={{flex: 1}}/>
+                <ChannelTitle onPress={onPress}/>
                 <ChannelSearchButton
                     navigator={navigator}
                     theme={theme}
diff --git a/app/screens/channel/channel_nav_bar/channel_search_button/channel_search_button.js b/app/screens/channel/channel_nav_bar/channel_search_button/channel_search_button.js
index 6439edd89..d789a3b6c 100644
--- a/app/screens/channel/channel_nav_bar/channel_search_button/channel_search_button.js
+++ b/app/screens/channel/channel_nav_bar/channel_search_button/channel_search_button.js
@@ -74,13 +74,14 @@ export default class ChannelSearchButton extends PureComponent {
 const getStyle = makeStyleSheetFromTheme((theme) => {
     return {
         container: {
-            width: 40,
-            zIndex: 45
+            width: 40
         },
         flex: {
             flex: 1
         },
         wrapper: {
+            position: 'relative',
+            top: -1,
             alignItems: 'flex-end',
             flex: 1,
             flexDirection: 'column',
diff --git a/app/screens/channel/channel_nav_bar/channel_title/channel_title.js b/app/screens/channel/channel_nav_bar/channel_title/channel_title.js
index edb8d335e..17f6a73de 100644
--- a/app/screens/channel/channel_nav_bar/channel_title/channel_title.js
+++ b/app/screens/channel/channel_nav_bar/channel_title/channel_title.js
@@ -16,9 +16,7 @@ import {makeStyleSheetFromTheme} from 'app/utils/theme';
 export default class ChannelTitle extends PureComponent {
     static propTypes = {
         currentChannelName: PropTypes.string,
-        deviceWidth: PropTypes.number,
         displayName: PropTypes.string,
-        height: PropTypes.number,
         onPress: PropTypes.func,
         theme: PropTypes.object
     };
@@ -30,7 +28,7 @@ export default class ChannelTitle extends PureComponent {
     };
 
     render() {
-        const {currentChannelName, deviceWidth, displayName, height, onPress, theme} = this.props;
+        const {currentChannelName, displayName, onPress, theme} = this.props;
         const channelName = displayName || currentChannelName;
         const style = getStyle(theme);
         let icon;
@@ -46,20 +44,18 @@ export default class ChannelTitle extends PureComponent {
 
         return (
             <TouchableOpacity
-                style={[style.container, {height, width: deviceWidth}]}
+                style={style.container}
                 onPress={onPress}
             >
-                <View style={[style.wrapper, {width: deviceWidth}]}>
-                    <View style={style.innerContainer}>
-                        <Text
-                            ellipsizeMode='tail'
-                            numberOfLines={1}
-                            style={style.text}
-                        >
-                            {channelName}
-                        </Text>
-                        {icon}
-                    </View>
+                <View style={style.wrapper}>
+                    <Text
+                        ellipsizeMode='tail'
+                        numberOfLines={1}
+                        style={style.text}
+                    >
+                        {channelName}
+                    </Text>
+                    {icon}
                 </View>
             </TouchableOpacity>
         );
@@ -69,18 +65,15 @@ export default class ChannelTitle extends PureComponent {
 const getStyle = makeStyleSheetFromTheme((theme) => {
     return {
         container: {
-            position: 'absolute',
-            zIndex: 40
+            flex: 1
         },
         wrapper: {
             alignItems: 'center',
             flex: 1,
-            justifyContent: 'center'
-        },
-        innerContainer: {
-            alignItems: 'center',
+            position: 'relative',
+            top: -1,
             flexDirection: 'row',
-            marginHorizontal: 55
+            justifyContent: 'flex-start'
         },
         icon: {
             color: theme.sidebarHeaderTextColor,
@@ -88,7 +81,7 @@ const getStyle = makeStyleSheetFromTheme((theme) => {
         },
         text: {
             color: theme.sidebarHeaderTextColor,
-            fontSize: 17,
+            fontSize: 18,
             fontWeight: 'bold',
             textAlign: 'center'
         }
diff --git a/app/screens/channel/channel_nav_bar/channel_title/index.js b/app/screens/channel/channel_nav_bar/channel_title/index.js
index 663465b17..d5655d1ed 100644
--- a/app/screens/channel/channel_nav_bar/channel_title/index.js
+++ b/app/screens/channel/channel_nav_bar/channel_title/index.js
@@ -6,15 +6,12 @@ import {connect} from 'react-redux';
 import {getCurrentChannel} from 'mattermost-redux/selectors/entities/channels';
 import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
 
-import {getDimensions} from 'app/selectors/device';
-
 import ChannelTitle from './channel_title';
 
 function mapStateToProps(state) {
     const currentChannel = getCurrentChannel(state);
 
     return {
-        ...getDimensions(state),
         currentChannelName: currentChannel ? currentChannel.display_name : '',
         displayName: state.views.channel.displayName,
         theme: getTheme(state)
diff --git a/app/screens/channel/channel_nav_bar/settings_drawer_button.js b/app/screens/channel/channel_nav_bar/settings_drawer_button.js
index cb69c1c14..d550ce605 100644
--- a/app/screens/channel/channel_nav_bar/settings_drawer_button.js
+++ b/app/screens/channel/channel_nav_bar/settings_drawer_button.js
@@ -57,16 +57,14 @@ class SettingDrawerButton extends PureComponent {
 const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
     return {
         container: {
-            width: 44,
-            zIndex: 45
+            width: 44
         },
         wrapper: {
             alignItems: 'center',
             flex: 1,
             flexDirection: 'column',
             justifyContent: 'center',
-            marginLeft: 8,
-            zIndex: 30
+            marginLeft: 8
         },
         mention: {
             color: theme.mentionColor,