[FIX] Room Info styles (#1820)
Co-authored-by: Diego Mello <diegolmello@gmail.com>
This commit is contained in:
parent
4597ab6c78
commit
b3e0485db5
|
@ -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}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue