verdnatura-mirror/Rocket.Chat.ReactNative
verdnatura-mirror
/
Rocket.Chat.ReactNative
mirror of https://github.com/RocketChat/Rocket.Chat.ReactNative
2
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

[NEW] Scrollable room name feature (#756)

This commit is contained in:
pranavpandey1998official 2019-03-26 01:50:24 +05:30 committed by Diego Mello
parent c873b20833
commit e9183b523b
2 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/containers/HeaderButton.js
View File

@ -7,9 +7,10 @@ import { CustomIcon } from '../lib/Icons';
import { isIOS } from '../utils/deviceInfo'; import { isIOS } from '../utils/deviceInfo';
const color = isIOS ? '#1D74F5' : '#FFF'; const color = isIOS ? '#1D74F5' : '#FFF';
export const headerIconSize = 23;
const CustomHeaderButton = React.memo(props => ( const CustomHeaderButton = React.memo(props => (
<HeaderButton {...props} IconComponent={CustomIcon} iconSize={23} color={color} /> <HeaderButton {...props} IconComponent={CustomIcon} iconSize={headerIconSize} color={color} />
)); ));
export const CustomHeaderButtons = React.memo(props => ( export const CustomHeaderButtons = React.memo(props => (

12
app/views/RoomView/Header/index.js
View File

@ -1,7 +1,7 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { import {
View, Text, StyleSheet, LayoutAnimation View, Text, StyleSheet, LayoutAnimation, ScrollView
} from 'react-native'; } from 'react-native';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { responsive } from 'react-native-responsive-ui'; import { responsive } from 'react-native-responsive-ui';
@ -13,6 +13,7 @@ import sharedStyles from '../../Styles';
import { isIOS } from '../../../utils/deviceInfo'; import { isIOS } from '../../../utils/deviceInfo';
import { CustomIcon } from '../../../lib/Icons'; import { CustomIcon } from '../../../lib/Icons';
import Status from '../../../containers/Status/Status'; import Status from '../../../containers/Status/Status';
import { headerIconSize } from '../../../containers/HeaderButton';
const TITLE_SIZE = 18; const TITLE_SIZE = 18;
const ICON_SIZE = 18; const ICON_SIZE = 18;
@ -173,6 +174,7 @@ export default class RoomHeaderView extends Component {
window, title, usersTyping window, title, usersTyping
} = this.props; } = this.props;
const portrait = window.height > window.width; const portrait = window.height > window.width;
const widthScrollView = window.width - 6.5 * headerIconSize;
let scale = 1; let scale = 1;
if (!portrait) { if (!portrait) {
@ -183,9 +185,15 @@ export default class RoomHeaderView extends Component {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<View style={styles.titleContainer}> <View style={[styles.titleContainer, { width: widthScrollView }]}>
<ScrollView
showsHorizontalScrollIndicator={false}
horizontal
bounces={false}
>
{this.renderIcon()} {this.renderIcon()}
<Text style={[styles.title, { fontSize: TITLE_SIZE * scale }]} numberOfLines={1}>{title}</Text> <Text style={[styles.title, { fontSize: TITLE_SIZE * scale }]} numberOfLines={1}>{title}</Text>
</ScrollView>
</View> </View>
{this.typing} {this.typing}
</View> </View>