toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

MM-18829 Updated Channel Header SafeAreaView (#3370)

Browse source 
Removed the RN SafeAreaView and applied the padding for our iOS X specific setting.
This commit is contained in:
CJ 2019-10-11 22:14:07 -04:00 committed by Elias Nahum
parent dd1436503c
commit 6beb40783b
No known key found for this signature in database
GPG key ID: E038DB71E0B61702
4 changed files with 2520 additions and 2481 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4809
app/screens/channel_info/__snapshots__/channel_info_header.test.js.snap
View file

File diff suppressed because it is too large Load diff

1
app/screens/channel_info/channel_info.js
View file

@ -528,6 +528,7 @@ export default class ChannelInfo extends PureComponent {
isTeammateGuest={isTeammateGuest}
hasGuests={currentChannelGuestCount > 0}
isGroupConstrained={currentChannel.group_constrained}
isLandscape={isLandscape}
/>
}
<View style={style.rowsContainer}>

190
app/screens/channel_info/channel_info_header.js
View file

@ -9,7 +9,6 @@ import {
Text,
TouchableHighlight,
View,
SafeAreaView,
} from 'react-native';
import {intlShape} from 'react-intl';
@ -19,6 +18,7 @@ import ChannelIcon from 'app/components/channel_icon';
import FormattedDate from 'app/components/formatted_date';
import FormattedText from 'app/components/formatted_text';
import Markdown from 'app/components/markdown';
import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
import mattermostManaged from 'app/mattermost_managed';
import BottomSheet from 'app/utils/bottom_sheet';
import {getMarkdownTextStyles, getMarkdownBlockStyles} from 'app/utils/markdown';
@ -44,6 +44,7 @@ export default class ChannelInfoHeader extends React.PureComponent {
hasGuests: PropTypes.bool.isRequired,
isGroupConstrained: PropTypes.bool,
timeZone: PropTypes.string,
isLandscape: PropTypes.bool.isRequired,
};
static contextTypes = {
@ -142,6 +143,7 @@ export default class ChannelInfoHeader extends React.PureComponent {
isBot,
isGroupConstrained,
timeZone,
isLandscape,
} = this.props;
const style = getStyleSheet(theme);
@ -152,101 +154,99 @@ export default class ChannelInfoHeader extends React.PureComponent {
style.detail;
return (
<SafeAreaView>
<View style={style.container}>
<View style={[style.channelNameContainer, style.row]}>
<ChannelIcon
isInfo={true}
membersCount={memberCount - 1}
size={16}
status={status}
theme={theme}
type={type}
isArchived={isArchived}
isBot={isBot}
/>
<Text
ellipsizeMode='tail'
numberOfLines={1}
style={style.channelName}
>
{displayName}
</Text>
</View>
{this.renderHasGuestText(style)}
{purpose.length > 0 &&
<View style={style.section}>
<TouchableHighlight
underlayColor={changeOpacity(theme.centerChannelColor, 0.1)}
onLongPress={this.handlePurposeLongPress}
>
<View style={style.row}>
<FormattedText
style={style.header}
id='channel_info.purpose'
defaultMessage='Purpose'
/>
<Markdown
onPermalinkPress={onPermalinkPress}
baseTextStyle={baseTextStyle}
textStyles={textStyles}
blockStyles={blockStyles}
value={purpose}
/>
</View>
</TouchableHighlight>
</View>
}
{header.length > 0 &&
<View style={style.section}>
<TouchableHighlight
underlayColor={changeOpacity(theme.centerChannelColor, 0.1)}
onLongPress={this.handleHeaderLongPress}
>
<View style={style.row}>
<FormattedText
style={style.header}
id='channel_info.header'
defaultMessage='Header'
/>
<Markdown
onPermalinkPress={onPermalinkPress}
baseTextStyle={baseTextStyle}
textStyles={textStyles}
blockStyles={blockStyles}
value={header}
onChannelLinkPress={popToRoot}
/>
</View>
</TouchableHighlight>
</View>
}
{isGroupConstrained &&
<Text style={[style.createdBy, style.row]}>
<FormattedText
id='mobile.routes.channelInfo.groupManaged'
defaultMessage='Members are managed by linked groups'
/>
</Text>
}
{creator &&
<Text style={[style.createdBy, style.row]}>
<FormattedText
id='mobile.routes.channelInfo.createdBy'
defaultMessage='Created by {creator} on '
values={{
creator,
}}
/>
<FormattedDate
format='LL'
timeZone={timeZone}
value={createAt}
/>
</Text>
}
<View style={style.container}>
<View style={[style.channelNameContainer, style.row, padding(isLandscape)]}>
<ChannelIcon
isInfo={true}
membersCount={memberCount - 1}
size={16}
status={status}
theme={theme}
type={type}
isArchived={isArchived}
isBot={isBot}
/>
<Text
ellipsizeMode='tail'
numberOfLines={1}
style={style.channelName}
>
{displayName}
</Text>
</View>
</SafeAreaView>
{this.renderHasGuestText(style)}
{purpose.length > 0 &&
<View style={[style.section, padding(isLandscape, -15)]}>
<TouchableHighlight
underlayColor={changeOpacity(theme.centerChannelColor, 0.1)}
onLongPress={this.handlePurposeLongPress}
>
<View style={style.row}>
<FormattedText
style={style.header}
id='channel_info.purpose'
defaultMessage='Purpose'
/>
<Markdown
onPermalinkPress={onPermalinkPress}
baseTextStyle={baseTextStyle}
textStyles={textStyles}
blockStyles={blockStyles}
value={purpose}
/>
</View>
</TouchableHighlight>
</View>
}
{header.length > 0 &&
<View style={[style.section, padding(isLandscape, -15)]}>
<TouchableHighlight
underlayColor={changeOpacity(theme.centerChannelColor, 0.1)}
onLongPress={this.handleHeaderLongPress}
>
<View style={style.row}>
<FormattedText
style={style.header}
id='channel_info.header'
defaultMessage='Header'
/>
<Markdown
onPermalinkPress={onPermalinkPress}
baseTextStyle={baseTextStyle}
textStyles={textStyles}
blockStyles={blockStyles}
value={header}
onChannelLinkPress={popToRoot}
/>
</View>
</TouchableHighlight>
</View>
}
{isGroupConstrained &&
<Text style={[style.createdBy, style.row, padding(isLandscape)]}>
<FormattedText
id='mobile.routes.channelInfo.groupManaged'
defaultMessage='Members are managed by linked groups'
/>
</Text>
}
{creator &&
<Text style={[style.createdBy, style.row, padding(isLandscape)]}>
<FormattedText
id='mobile.routes.channelInfo.createdBy'
defaultMessage='Created by {creator} on '
values={{
creator,
}}
/>
<FormattedDate
format='LL'
timeZone={timeZone}
value={createAt}
/>
</Text>
}
</View>
);
}
}

1
app/screens/channel_info/channel_info_header.test.js
View file

@ -43,6 +43,7 @@ describe('channel_info_header', () => {
isTeammateGuest: false,
hasGuests: false,
isGroupConstrained: false,
isLandscape: false,
};
test('should match snapshot', async () => {