[FIX] Room Info styles (#1820)

Co-authored-by: Diego Mello <diegolmello@gmail.com>
This commit is contained in:
Djorkaeff Alexandre 2020-03-04 08:59:30 -03:00 committed by GitHub
parent 4597ab6c78
commit b3e0485db5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 24 deletions

View File

@ -24,7 +24,6 @@ import { getUserSelector } from '../../selectors/login';
import Markdown from '../../containers/markdown'; import Markdown from '../../containers/markdown';
const PERMISSION_EDIT_ROOM = 'edit-room'; const PERMISSION_EDIT_ROOM = 'edit-room';
const camelize = str => str.replace(/^(.)/, (match, chr) => chr.toUpperCase());
const getRoomTitle = (room, type, name, username, theme) => (type === 'd' const getRoomTitle = (room, type, name, username, theme) => (type === 'd'
? ( ? (
<> <>
@ -169,13 +168,15 @@ class RoomInfoView extends React.Component {
isDirect = () => this.t === 'd' isDirect = () => this.t === 'd'
renderItem = (key, room) => { renderItem = ({ label, content, testID }) => {
const { theme } = this.props; const { theme } = this.props;
return ( return (
<View style={styles.item}> <View style={styles.item}>
<Text accessibilityLabel={key} style={[styles.itemLabel, { color: themes[theme].auxiliaryText }]}>{I18n.t(camelize(key))}</Text> <Text accessibilityLabel={label} style={[styles.itemLabel, { color: themes[theme].titleText }]}>{I18n.t(label)}</Text>
<Markdown <Markdown
msg={room[key] ? room[key] : `__${ I18n.t(`No_${ key }_provided`) }__`} testID={testID}
style={[styles.itemContent, { color: themes[theme].auxiliaryText }]}
msg={content || `__${ I18n.t(`No_${ label.toLowerCase() }_provided`) }__`}
theme={theme} theme={theme}
/> />
</View> </View>
@ -212,7 +213,7 @@ class RoomInfoView extends React.Component {
renderTimezone = () => { renderTimezone = () => {
const { roomUser } = this.state; const { roomUser } = this.state;
const { Message_TimeFormat, theme } = this.props; const { Message_TimeFormat } = this.props;
if (roomUser) { if (roomUser) {
const { utcOffset } = roomUser; const { utcOffset } = roomUser;
@ -220,12 +221,11 @@ class RoomInfoView extends React.Component {
if (!utcOffset) { if (!utcOffset) {
return null; return null;
} }
return ( return this.renderItem({
<View style={styles.item}> label: 'Timezone',
<Text style={[styles.itemLabel, { color: themes[theme].titleText }]}>{I18n.t('Timezone')}</Text> content: `${ moment().utcOffset(utcOffset).format(Message_TimeFormat) } (UTC ${ utcOffset })`,
<Text style={[styles.itemContent, { color: themes[theme].auxiliaryText }]}>{moment().utcOffset(utcOffset).format(Message_TimeFormat)} (UTC { utcOffset })</Text> testID: 'room-info-view-timezone'
</View> });
);
} }
return null; return null;
} }
@ -248,16 +248,11 @@ class RoomInfoView extends React.Component {
); );
} }
renderBroadcast = () => ( renderBroadcast = () => this.renderItem({
<View style={styles.item}> label: 'Broadcast_Channel',
<Text style={styles.itemLabel}>{I18n.t('Broadcast_Channel')}</Text> content: I18n.t('Broadcast_channel_Description'),
<Text testID: 'room-info-view-broadcast'
style={styles.itemContent} });
testID='room-info-view-broadcast'
>{I18n.t('Broadcast_channel_Description')}
</Text>
</View>
)
renderCustomFields = () => { renderCustomFields = () => {
const { roomUser } = this.state; const { roomUser } = this.state;
@ -311,11 +306,12 @@ class RoomInfoView extends React.Component {
renderChannel = () => { renderChannel = () => {
const { room } = this.state; const { room } = this.state;
const { description, topic, announcement } = room;
return ( return (
<> <>
{this.renderItem('description', room)} {this.renderItem({ label: 'Description', content: description })}
{this.renderItem('topic', room)} {this.renderItem({ label: 'Topic', content: topic })}
{this.renderItem('announcement', room)} {this.renderItem({ label: 'Announcement', content: announcement })}
{room.broadcast ? this.renderBroadcast() : null} {room.broadcast ? this.renderBroadcast() : null}
</> </>
); );