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

MM-10193 Apply SafeAreaView to Landscape views (#3003) (#3081)

Browse source 
* MM-10193 for landscape Feature

Commit for MM-10193 to the landscape feature with latest pull.
This is the initial commit with SafeAreaView in place, but should not be merged into master as this is step one and not suitable for production.
Another commit will be following with adjustments to allow SafeAreaView to display correctly for users.

* MM-10193 for landscape Feature

Commit for MM-10193 to the landscape feature with latest pull.
This is the initial commit with SafeAreaView in place, but should not be merged into master as this is step one and not suitable for production.
Another commit will be following with adjustments to allow SafeAreaView to display correctly for users.

* MM-10193 Extend design elements for iPhoneX SafeAreaViews

This is the second portion of the MM-10193 changes for the landscape feature. This item was to extend the design elements for the application into the SafeAreaView so the application looks uniform on the iPhoneX.

* MM-10193 Patch for Snapshot tests and eslint

* MM-10193 Re-Patch

These chanbes mistakenly got reverted from last Patch

* MM-10193 Updates for PR

Fixed the 4 screens from the text box that were missed.
Updated the padding to run from a method.

* Revert "MM-10193 Updates for PR"

This reverts commit fe8d650ce3ca2828d8c94e4af470649aa2582ec1.

* MM-10193 Updates for PR

This reverts commit 4966d83d5401720d26ca22a55cf8f92f1657b7e2.
Applied Updated Snapshots

* MM-10193 Updated Modifier for iphone_x_spacing

Updated Modifier for iphone_x_spacing

* MM-10193 Updates for Review

Review changes for Post Textbox and a few states that were unavailable.

* MM-10193 Fix Longpress padding

Fixed longpress padding for Channel Info and Edit Post views.

* MM-10193 Update isLandscape

Updated isLandscape to pull directly from dimensions.
Updated padding for Recent Mentions and Flagged Posts.

* MM-10193 Updates for review longpost

Updated for longpost padding.
Fixed issue with notifications not padding right correctly.

* MM-10193 Update with Cleanup

Reverted Cocoapods back to 1.5.3.
Cleaned up spacing in two files.

* MM-10193 Merge Conflict Updates

Updates to resolve merge conflicts
This commit is contained in:
Elias Nahum 2019-08-09 11:14:38 -04:00 committed by GitHub
parent 5869e1a110
commit 06e333dc52
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
178 changed files with 1049 additions and 544 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
app/components/announcement_banner/__snapshots__/announcement_banner.test.js.snap
View file

@ -22,11 +22,14 @@ exports[`AnnouncementBanner should match snapshot 1`] = `
activeOpacity={0.2}
onPress={[Function]}
style={
Object {
"alignItems": "center",
"flex": 1,
"flexDirection": "row",
}
Array [
Object {
"alignItems": "center",
"flex": 1,
"flexDirection": "row",
},
null,
]
}
>
<Text

6
app/components/announcement_banner/announcement_banner.js
View file

@ -11,8 +11,8 @@ import {
} from 'react-native';
import {intlShape} from 'react-intl';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import RemoveMarkdown from 'app/components/remove_markdown';
import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
const {View: AnimatedView} = Animated;
@ -27,6 +27,7 @@ export default class AnnouncementBanner extends PureComponent {
bannerText: PropTypes.string,
bannerTextColor: PropTypes.string,
theme: PropTypes.object.isRequired,
isLandscape: PropTypes.bool.isRequired,
};
static contextTypes = {
@ -84,6 +85,7 @@ export default class AnnouncementBanner extends PureComponent {
bannerColor,
bannerText,
bannerTextColor,
isLandscape,
} = this.props;
const bannerStyle = {
@ -101,7 +103,7 @@ export default class AnnouncementBanner extends PureComponent {
>
<TouchableOpacity
onPress={this.handlePress}
style={style.wrapper}
style={[style.wrapper, padding(isLandscape)]}
>
<Text
ellipsizeMode='tail'

1
app/components/announcement_banner/announcement_banner.test.js
View file

@ -21,6 +21,7 @@ describe('AnnouncementBanner', () => {
bannerText: 'Banner Text',
bannerTextColor: '#fff',
theme: Preferences.THEMES.default,
isLandscape: false,
};
test('should match snapshot', () => {

2
app/components/announcement_banner/index.js
View file

@ -8,6 +8,7 @@ import {getConfig, getLicense} from 'mattermost-redux/selectors/entities/general
import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
import {goToScreen} from 'app/actions/navigation';
import {isLandscape} from 'app/selectors/device';
import AnnouncementBanner from './announcement_banner';
@ -23,6 +24,7 @@ function mapStateToProps(state) {
bannerText: config.BannerText,
bannerTextColor: config.BannerTextColor || '#000',
theme: getTheme(state),
isLandscape: isLandscape(state),
};
}

2
app/components/autocomplete/at_mention/at_mention.js
View file

@ -35,6 +35,7 @@ export default class AtMention extends PureComponent {
teamMembers: PropTypes.array,
theme: PropTypes.object.isRequired,
value: PropTypes.string,
isLandscape: PropTypes.bool.isRequired,
};
static defaultProps = {
@ -178,6 +179,7 @@ export default class AtMention extends PureComponent {
id={section.id}
defaultMessage={section.defaultMessage}
theme={this.props.theme}
isLandscape={this.props.isLandscape}
/>
);
};

2
app/components/autocomplete/at_mention/index.js
View file

@ -7,6 +7,7 @@ import {connect} from 'react-redux';
import {autocompleteUsers} from 'mattermost-redux/actions/users';
import {getCurrentChannelId, getDefaultChannel} from 'mattermost-redux/selectors/entities/channels';
import {getCurrentTeamId} from 'mattermost-redux/selectors/entities/teams';
import {isLandscape} from 'app/selectors/device';
import {
filterMembersInChannel,
@ -45,6 +46,7 @@ function mapStateToProps(state, ownProps) {
outChannel,
requestStatus: state.requests.users.autocompleteUsers.status,
theme: getTheme(state),
isLandscape: isLandscape(state),
};
}

5
app/components/autocomplete/at_mention_item/at_mention_item.js
View file

@ -13,6 +13,7 @@ import ProfilePicture from 'app/components/profile_picture';
import BotTag from 'app/components/bot_tag';
import GuestTag from 'app/components/guest_tag';
import {makeStyleSheetFromTheme} from 'app/utils/theme';
import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
export default class AtMentionItem extends PureComponent {
static propTypes = {
@ -24,6 +25,7 @@ export default class AtMentionItem extends PureComponent {
isGuest: PropTypes.bool,
isBot: PropTypes.bool,
theme: PropTypes.object.isRequired,
isLandscape: PropTypes.bool.isRequired,
};
static defaultProps = {
@ -44,6 +46,7 @@ export default class AtMentionItem extends PureComponent {
username,
theme,
isBot,
isLandscape,
isGuest,
} = this.props;
@ -54,7 +57,7 @@ export default class AtMentionItem extends PureComponent {
<TouchableOpacity
key={userId}
onPress={this.completeMention}
style={style.row}
style={[style.row, padding(isLandscape)]}
>
<View style={style.rowPicture}>
<ProfilePicture

2
app/components/autocomplete/at_mention_item/index.js
View file

@ -9,6 +9,7 @@ import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
import AtMentionItem from './at_mention_item';
import {isLandscape} from 'app/selectors/device';
import {isGuest} from 'app/utils/users';
function mapStateToProps(state, ownProps) {
@ -21,6 +22,7 @@ function mapStateToProps(state, ownProps) {
isBot: Boolean(user.is_bot),
isGuest: isGuest(user),
theme: getTheme(state),
isLandscape: isLandscape(state),
};
}

10
app/components/autocomplete/autocomplete_section_header.js
View file

@ -7,6 +7,7 @@ import {ActivityIndicator, View} from 'react-native';
import FormattedText from 'app/components/formatted_text';
import {makeStyleSheetFromTheme, changeOpacity} from 'app/utils/theme';
import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
export default class AutocompleteSectionHeader extends PureComponent {
static propTypes = {
@ -14,15 +15,20 @@ export default class AutocompleteSectionHeader extends PureComponent {
id: PropTypes.string.isRequired,
loading: PropTypes.bool,
theme: PropTypes.object.isRequired,
isLandscape: PropTypes.bool.isRequired,
};
static defaultProps = {
isLandscape: false,
};
render() {
const {defaultMessage, id, loading, theme} = this.props;
const {defaultMessage, id, loading, theme, isLandscape} = this.props;
const style = getStyleFromTheme(theme);
return (
<View style={style.sectionWrapper}>
<View style={style.section}>
<View style={[style.section, padding(isLandscape)]}>
<FormattedText
id={id}
defaultMessage={defaultMessage}

2
app/components/autocomplete/channel_mention/channel_mention.js
View file

@ -39,6 +39,7 @@ export default class ChannelMention extends PureComponent {
theme: PropTypes.object.isRequired,
value: PropTypes.string,
serverVersion: PropTypes.string,
isLandscape: PropTypes.bool.isRequired,
};
static defaultProps = {
@ -195,6 +196,7 @@ export default class ChannelMention extends PureComponent {
defaultMessage={section.defaultMessage}
loading={!section.hideLoadingIndicator && this.props.requestStatus === RequestStatus.STARTED}
theme={this.props.theme}
isLandscape={this.props.isLandscape}
/>
);
};

2
app/components/autocomplete/channel_mention/index.js
View file

@ -7,6 +7,7 @@ import {connect} from 'react-redux';
import {searchChannels, autocompleteChannelsForSearch} from 'mattermost-redux/actions/channels';
import {getMyChannelMemberships} from 'mattermost-redux/selectors/entities/channels';
import {getCurrentTeamId} from 'mattermost-redux/selectors/entities/teams';
import {isLandscape} from 'app/selectors/device';
import {
filterMyChannels,
@ -52,6 +53,7 @@ function mapStateToProps(state, ownProps) {
requestStatus: state.requests.channels.getChannels.status,
theme: getTheme(state),
serverVersion: state.entities.general.serverVersion,
isLandscape: isLandscape(state),
};
}

7
app/components/autocomplete/channel_mention_item/channel_mention_item.js
View file

@ -10,6 +10,7 @@ import {
import {General} from 'mattermost-redux/constants';
import BotTag from 'app/components/bot_tag';
import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
import GuestTag from 'app/components/guest_tag';
import {makeStyleSheetFromTheme} from 'app/utils/theme';
@ -24,6 +25,7 @@ export default class ChannelMentionItem extends PureComponent {
isGuest: PropTypes.bool.isRequired,
onPress: PropTypes.func.isRequired,
theme: PropTypes.object.isRequired,
isLandscape: PropTypes.bool.isRequired,
};
completeMention = () => {
@ -43,6 +45,7 @@ export default class ChannelMentionItem extends PureComponent {
theme,
type,
isBot,
isLandscape,
isGuest,
} = this.props;
@ -56,7 +59,7 @@ export default class ChannelMentionItem extends PureComponent {
<TouchableOpacity
key={channelId}
onPress={this.completeMention}
style={style.row}
style={[style.row, padding(isLandscape)]}
>
<Text style={style.rowDisplayName}>{'@' + displayName}</Text>
<BotTag
@ -74,7 +77,7 @@ export default class ChannelMentionItem extends PureComponent {
<TouchableOpacity
key={channelId}
onPress={this.completeMention}
style={style.row}
style={[style.row, padding(isLandscape)]}
>
<Text style={style.rowDisplayName}>{displayName}</Text>
<Text style={style.rowName}>{` (~${name})`}</Text>

3
app/components/autocomplete/channel_mention_item/index.js
View file

@ -15,6 +15,8 @@ import ChannelMentionItem from './channel_mention_item';
import {getUser} from 'mattermost-redux/selectors/entities/users';
import {isLandscape} from 'app/selectors/device';
function mapStateToProps(state, ownProps) {
const channel = getChannel(state, ownProps.channelId);
const displayName = getChannelNameForSearchAutocomplete(state, ownProps.channelId);
@ -33,6 +35,7 @@ function mapStateToProps(state, ownProps) {
type: channel.type,
isBot,
theme: getTheme(state),
isLandscape: isLandscape(state),
};
}

2
app/components/autocomplete/slash_suggestion/index.js
View file

@ -9,6 +9,7 @@ import {getAutocompleteCommands} from 'mattermost-redux/actions/integrations';
import {getAutocompleteCommandsList} from 'mattermost-redux/selectors/entities/integrations';
import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
import {getCurrentTeamId} from 'mattermost-redux/selectors/entities/teams';
import {isLandscape} from 'app/selectors/device';
import SlashSuggestion from './slash_suggestion';
@ -31,6 +32,7 @@ function mapStateToProps(state) {
commandsRequest: state.requests.integrations.getAutocompleteCommands,
currentTeamId: getCurrentTeamId(state),
theme: getTheme(state),
isLandscape: isLandscape(state),
};
}

2
app/components/autocomplete/slash_suggestion/slash_suggestion.js
View file

@ -32,6 +32,7 @@ export default class SlashSuggestion extends Component {
onChangeText: PropTypes.func.isRequired,
onResultCountChange: PropTypes.func.isRequired,
value: PropTypes.string,
isLandscape: PropTypes.bool.isRequired,
};
static defaultProps = {
@ -145,6 +146,7 @@ export default class SlashSuggestion extends Component {
onPress={this.completeSuggestion}
theme={this.props.theme}
trigger={item.trigger}
isLandscape={this.props.isLandscape}
/>
)

5
app/components/autocomplete/slash_suggestion/slash_suggestion_item.js
View file

@ -9,6 +9,7 @@ import {
} from 'react-native';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
export default class SlashSuggestionItem extends PureComponent {
static propTypes = {
@ -17,6 +18,7 @@ export default class SlashSuggestionItem extends PureComponent {
onPress: PropTypes.func.isRequired,
theme: PropTypes.object.isRequired,
trigger: PropTypes.string,
isLandscape: PropTypes.bool.isRequired,
};
completeSuggestion = () => {
@ -30,6 +32,7 @@ export default class SlashSuggestionItem extends PureComponent {
hint,
theme,
trigger,
isLandscape,
} = this.props;
const style = getStyleFromTheme(theme);
@ -37,7 +40,7 @@ export default class SlashSuggestionItem extends PureComponent {
return (
<TouchableOpacity
onPress={this.completeSuggestion}
style={style.row}
style={[style.row, padding(isLandscape)]}
>
<Text style={style.suggestionName}>{`/${trigger} ${hint}`}</Text>
<Text style={style.suggestionDescription}>{description}</Text>

11
app/components/channel_intro/channel_intro.js
View file

@ -11,7 +11,7 @@ import {
import {getFullName} from 'mattermost-redux/utils/user_utils';
import {General} from 'mattermost-redux/constants';
import {injectIntl, intlShape} from 'react-intl';
import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
import ProfilePicture from 'app/components/profile_picture';
import BotTag from 'app/components/bot_tag';
import GuestTag from 'app/components/guest_tag';
@ -30,6 +30,7 @@ class ChannelIntro extends PureComponent {
currentChannelMembers: PropTypes.array.isRequired,
intl: intlShape.isRequired,
theme: PropTypes.object.isRequired,
isLandscape: PropTypes.bool.isRequired,
};
static defaultProps = {
@ -307,7 +308,7 @@ class ChannelIntro extends PureComponent {
};
render() {
const {currentChannel, theme} = this.props;
const {currentChannel, theme, isLandscape} = this.props;
const style = getStyleSheet(theme);
const channelType = currentChannel.type;
@ -315,10 +316,10 @@ class ChannelIntro extends PureComponent {
if (channelType === General.DM_CHANNEL || channelType === General.GM_CHANNEL) {
profiles = (
<View>
<View style={style.profilesContainer}>
<View style={[style.profilesContainer, padding(isLandscape)]}>
{this.buildProfiles()}
</View>
<View style={style.namesContainer}>
<View style={[style.namesContainer, padding(isLandscape)]}>
{this.buildNames()}
</View>
</View>
@ -328,7 +329,7 @@ class ChannelIntro extends PureComponent {
return (
<View style={style.container}>
{profiles}
<View style={style.contentContainer}>
<View style={[style.contentContainer, padding(isLandscape)]}>
{this.buildContent()}
</View>
</View>

3
app/components/channel_intro/index.js
View file

@ -10,7 +10,7 @@ import {makeGetChannel} from 'mattermost-redux/selectors/entities/channels';
import {getCurrentUserId, getUser, makeGetProfilesInChannel} from 'mattermost-redux/selectors/entities/users';
import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
import {isLandscape} from 'app/selectors/device';
import {goToScreen} from 'app/actions/navigation';
import {getChannelMembersForDm} from 'app/selectors/channel';
@ -50,6 +50,7 @@ function makeMapStateToProps() {
currentChannel,
currentChannelMembers,
theme: getTheme(state),
isLandscape: isLandscape(state),
};
};
}

1
app/components/channel_loader/__snapshots__/channel_loader.test.js.snap
View file

@ -9,6 +9,7 @@ exports[`ChannelLoader should match snapshot 1`] = `
"flex": 1,
},
undefined,
null,
Object {
"backgroundColor": "#ffffff",
},

5
app/components/channel_loader/channel_loader.js
View file

@ -15,6 +15,7 @@ import EventEmitter from 'mattermost-redux/utils/event_emitter';
import CustomPropTypes from 'app/constants/custom_prop_types';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
const {View: AnimatedView} = Animated;
@ -33,6 +34,7 @@ export default class ChannelLoader extends PureComponent {
style: CustomPropTypes.Style,
theme: PropTypes.object.isRequired,
height: PropTypes.number,
isLandscape: PropTypes.bool.isRequired,
};
constructor(props) {
@ -156,6 +158,7 @@ export default class ChannelLoader extends PureComponent {
channelIsLoading,
style: styleProp,
theme,
isLandscape,
} = this.props;
if (!channelIsLoading) {
@ -167,7 +170,7 @@ export default class ChannelLoader extends PureComponent {
return (
<View
style={[style.container, styleProp, {backgroundColor: bg}]}
style={[style.container, styleProp, padding(isLandscape), {backgroundColor: bg}]}
onLayout={this.handleLayout}
>
{Array(this.state.maxRows).fill().map((item, index) => this.buildSections({

1
app/components/channel_loader/channel_loader.test.js
View file

@ -20,6 +20,7 @@ describe('ChannelLoader', () => {
handleSelectChannel: jest.fn(),
setChannelLoading: jest.fn(),
},
isLandscape: false,
};
test('should match snapshot', () => {

3
app/components/channel_loader/index.js
View file

@ -10,6 +10,8 @@ import {handleSelectChannel, setChannelLoading} from 'app/actions/views/channel'
import ChannelLoader from './channel_loader';
import {isLandscape} from 'app/selectors/device';
function mapStateToProps(state, ownProps) {
const channelIsLoading = ownProps.hasOwnProperty('channelIsLoading') ?
ownProps.channelIsLoading :
@ -18,6 +20,7 @@ function mapStateToProps(state, ownProps) {
return {
channelIsLoading,
theme: getTheme(state),
isLandscape: isLandscape(state),
};
}

11
app/components/custom_list/__snapshots__/index.test.js.snap
View file

@ -117,10 +117,13 @@ exports[`CustomList should match snapshot, renderSectionHeader 1`] = `
>
<Text
style={
Object {
"color": "#3d3c40",
"fontWeight": "600",
}
Array [
Object {
"color": "#3d3c40",
"fontWeight": "600",
},
null,
]
}
>
section_id

2
app/components/custom_list/channel_list_row/channel_list_row.js
View file

@ -18,6 +18,7 @@ export default class ChannelListRow extends React.PureComponent {
theme: PropTypes.object.isRequired,
channel: PropTypes.object.isRequired,
...CustomListRow.propTypes,
isLandscape: PropTypes.bool.isRequired,
};
onPress = () => {
@ -47,6 +48,7 @@ export default class ChannelListRow extends React.PureComponent {
enabled={this.props.enabled}
selectable={this.props.selectable}
selected={this.props.selected}
isLandscape={this.props.isLandscape}
>
<View style={style.container}>
<View style={style.titleContainer}>

3
app/components/custom_list/channel_list_row/index.js
View file

@ -6,7 +6,7 @@ import {connect} from 'react-redux';
import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
import {makeGetChannel} from 'mattermost-redux/selectors/entities/channels';
import {isLandscape} from 'app/selectors/device';
import ChannelListRow from './channel_list_row';
function makeMapStateToProps() {
@ -16,6 +16,7 @@ function makeMapStateToProps() {
return {
theme: getTheme(state),
channel: getChannel(state, ownProps),
isLandscape: isLandscape(state),
};
};
}

6
app/components/custom_list/custom_list_row.js
View file

@ -8,7 +8,7 @@ import {
View,
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import {paddingLeft as padding} from 'app/components/safe_area_view/iphone_x_spacing';
import ConditionalTouchable from 'app/components/conditional_touchable';
import CustomPropTypes from 'app/constants/custom_prop_types';
@ -20,10 +20,12 @@ export default class CustomListRow extends React.PureComponent {
selected: PropTypes.bool,
children: CustomPropTypes.Children,
item: PropTypes.object,
isLandscape: PropTypes.bool.isRequired,
};
static defaultProps = {
enabled: true,
isLandscape: false,
};
render() {
@ -33,7 +35,7 @@ export default class CustomListRow extends React.PureComponent {
onPress={this.props.onPress}
style={style.touchable}
>
<View style={style.container}>
<View style={[style.container, padding(this.props.isLandscape)]}>
{this.props.selectable &&
<View style={style.selectorContainer}>
<View style={[style.selector, (this.props.selected && style.selectorFilled), (!this.props.enabled && style.selectorDisabled)]}>

8
app/components/custom_list/index.js
View file

@ -7,6 +7,7 @@ import {FlatList, Keyboard, Platform, SectionList, Text, View} from 'react-nativ
import {ListTypes} from 'app/constants';
import {makeStyleSheetFromTheme, changeOpacity} from 'app/utils/theme';
import {paddingLeft as padding} from 'app/components/safe_area_view/iphone_x_spacing';
export const FLATLIST = 'flat';
export const SECTIONLIST = 'section';
@ -30,12 +31,14 @@ export default class CustomList extends PureComponent {
selectable: PropTypes.bool,
theme: PropTypes.object.isRequired,
shouldRenderSeparator: PropTypes.bool,
isLandscape: PropTypes.bool.isRequired,
};
static defaultProps = {
listType: FLATLIST,
showNoResults: true,
shouldRenderSeparator: true,
isLandscape: false,
};
constructor(props) {
@ -148,12 +151,13 @@ export default class CustomList extends PureComponent {
};
renderSectionHeader = ({section}) => {
const style = getStyleFromTheme(this.props.theme);
const {theme, isLandscape} = this.props;
const style = getStyleFromTheme(theme);
return (
<View style={style.sectionWrapper}>
<View style={style.sectionContainer}>
<Text style={style.sectionText}>{section.id}</Text>
<Text style={[style.sectionText, padding(isLandscape)]}>{section.id}</Text>
</View>
</View>
);

4
app/components/custom_list/user_list_row/__snapshots__/user_list_test.test.js.snap
View file

@ -14,6 +14,7 @@ exports[`UserListRow should match snapshot 1`] = `
<CustomListRow
enabled={true}
id="21345"
isLandscape={false}
onPress={[Function]}
>
<View
@ -143,6 +144,7 @@ exports[`UserListRow should match snapshot for currentUser with (you) populated
<CustomListRow
enabled={true}
id="21345"
isLandscape={false}
onPress={[Function]}
>
<View
@ -270,6 +272,7 @@ exports[`UserListRow should match snapshot for deactivated user 1`] = `
<CustomListRow
enabled={true}
id="21345"
isLandscape={false}
onPress={[Function]}
>
<View
@ -410,6 +413,7 @@ exports[`UserListRow should match snapshot for guest user 1`] = `
<CustomListRow
enabled={true}
id="21345"
isLandscape={false}
onPress={[Function]}
>
<View

3
app/components/custom_list/user_list_row/index.js
View file

@ -5,7 +5,7 @@ import {connect} from 'react-redux';
import {getTeammateNameDisplaySetting, getTheme} from 'mattermost-redux/selectors/entities/preferences';
import {getCurrentUserId, getUser} from 'mattermost-redux/selectors/entities/users';
import {isLandscape} from 'app/selectors/device';
import UserListRow from './user_list_row';
function mapStateToProps(state, ownProps) {
@ -14,6 +14,7 @@ function mapStateToProps(state, ownProps) {
theme: getTheme(state),
user: getUser(state, ownProps.id),
teammateNameDisplay: getTeammateNameDisplaySetting(state),
isLandscape: isLandscape(state),
};
}

3
app/components/custom_list/user_list_row/user_list_row.js
View file

@ -10,7 +10,6 @@ import {
} from 'react-native';
import {displayUsername} from 'mattermost-redux/utils/user_utils';
import ProfilePicture from 'app/components/profile_picture';
import BotTag from 'app/components/bot_tag';
import GuestTag from 'app/components/guest_tag';
@ -48,6 +47,7 @@ export default class UserListRow extends React.PureComponent {
teammateNameDisplay,
theme,
user,
isLandscape,
} = this.props;
const {id, username} = user;
@ -72,6 +72,7 @@ export default class UserListRow extends React.PureComponent {
enabled={enabled}
selectable={selectable}
selected={selected}
isLandscape={isLandscape}
>
<View style={style.profileContainer}>
<ProfilePicture

1
app/components/custom_list/user_list_row/user_list_test.test.js
View file

@ -29,6 +29,7 @@ describe('UserListRow', () => {
},
theme: Preferences.THEMES.default,
teammateNameDisplay: 'test',
isLandscape: false,
};
test('should match snapshot', () => {

25
app/components/edit_channel_info/edit_channel_info.js
View file

@ -23,6 +23,7 @@ import TextInputWithLocalizedPlaceholder from 'app/components/text_input_with_lo
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
import {getShortenedURL} from 'app/utils/url';
import {t} from 'app/utils/i18n';
import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
export default class EditChannelInfo extends PureComponent {
static propTypes = {
@ -51,6 +52,7 @@ export default class EditChannelInfo extends PureComponent {
oldChannelURL: PropTypes.string,
oldHeader: PropTypes.string,
oldPurpose: PropTypes.string,
isLandscape: PropTypes.bool.isRequired,
};
static defaultProps = {
@ -181,6 +183,7 @@ export default class EditChannelInfo extends PureComponent {
channelURL,
header,
purpose,
isLandscape,
} = this.props;
const {error, saving} = this.props;
const fullUrl = currentTeamUrl + '/channels';
@ -204,7 +207,7 @@ export default class EditChannelInfo extends PureComponent {
if (error) {
displayError = (
<View style={[style.errorContainer, {width: deviceWidth}]}>
<View style={style.errorWrapper}>
<View style={[style.errorWrapper, padding(isLandscape)]}>
<ErrorText error={error}/>
</View>
</View>
@ -225,12 +228,12 @@ export default class EditChannelInfo extends PureComponent {
<View>
<View>
<FormattedText
style={style.title}
style={[style.title, padding(isLandscape)]}
id='channel_modal.name'
defaultMessage='Name'
/>
</View>
<View style={style.inputContainer}>
<View style={[style.inputContainer, padding(isLandscape)]}>
<TextInputWithLocalizedPlaceholder
ref={this.nameInput}
value={displayName}
@ -249,7 +252,7 @@ export default class EditChannelInfo extends PureComponent {
{/*TODO: Hide channel url field until it's added to CreateChannel */}
{false && editing && !displayHeaderOnly && (
<View>
<View style={style.titleContainer30}>
<View style={[style.titleContainer30, padding(isLandscape)]}>
<FormattedText
style={style.title}
id='rename_channel.url'
@ -259,7 +262,7 @@ export default class EditChannelInfo extends PureComponent {
{shortUrl}
</Text>
</View>
<View style={style.inputContainer}>
<View style={[style.inputContainer, padding(isLandscape)]}>
<TextInputWithLocalizedPlaceholder
ref={this.urlInput}
value={channelURL}
@ -277,7 +280,7 @@ export default class EditChannelInfo extends PureComponent {
)}
{!displayHeaderOnly && (
<View>
<View style={style.titleContainer30}>
<View style={[style.titleContainer30, padding(isLandscape)]}>
<FormattedText
style={style.title}
id='channel_modal.purpose'
@ -289,7 +292,7 @@ export default class EditChannelInfo extends PureComponent {
defaultMessage='(optional)'
/>
</View>
<View style={style.inputContainer}>
<View style={[style.inputContainer, padding(isLandscape)]}>
<TextInputWithLocalizedPlaceholder
ref={this.purposeInput}
value={purpose}
@ -308,14 +311,14 @@ export default class EditChannelInfo extends PureComponent {
</View>
<View>
<FormattedText
style={style.helpText}
style={[style.helpText, padding(isLandscape)]}
id='channel_modal.descriptionHelp'
defaultMessage='Describe how this channel should be used.'
/>
</View>
</View>
)}
<View style={style.titleContainer15}>
<View style={[style.titleContainer15, padding(isLandscape)]}>
<FormattedText
style={style.title}
id='channel_modal.header'
@ -327,7 +330,7 @@ export default class EditChannelInfo extends PureComponent {
defaultMessage='(optional)'
/>
</View>
<View style={style.inputContainer}>
<View style={[style.inputContainer, padding(isLandscape)]}>
<TextInputWithLocalizedPlaceholder
ref={this.headerInput}
value={header}
@ -347,7 +350,7 @@ export default class EditChannelInfo extends PureComponent {
</View>
<View ref={this.lastText}>
<FormattedText
style={style.helpText}
style={[style.helpText, padding(isLandscape)]}
id='channel_modal.headerHelp'
defaultMessage={'Set text that will appear in the header of the channel beside the channel name. For example, include frequently used links by typing [Link Title](http://example.com).'}
/>

10
app/components/edit_channel_info/index.js
View file

@ -8,9 +8,15 @@ import {
dismissModal,
popTopScreen,
} from 'app/actions/navigation';
import {isLandscape} from 'app/selectors/device';
import EditChannelInfo from './edit_channel_info';
function mapStateToProps(state) {
return {
isLandscape: isLandscape(state),
};
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators({
@ -20,4 +26,4 @@ function mapDispatchToProps(dispatch) {
};
}
export default connect(null, mapDispatchToProps)(EditChannelInfo);
export default connect(mapStateToProps, mapDispatchToProps)(EditChannelInfo);

13
app/components/emoji_picker/emoji_picker.js
View file

@ -26,7 +26,7 @@ import SearchBar from 'app/components/search_bar';
import {DeviceTypes} from 'app/constants';
import {emptyFunction} from 'app/utils/general';
import {makeStyleSheetFromTheme, changeOpacity} from 'app/utils/theme';
import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
import EmojiPickerRow from './emoji_picker_row';
const EMOJI_SIZE = 30;
@ -210,7 +210,8 @@ export default class EmojiPicker extends PureComponent {
};
getNumberOfColumns = (deviceWidth) => {
return Math.floor(Number(((deviceWidth - (SECTION_MARGIN * 2)) / (EMOJI_SIZE + (EMOJI_GUTTER * 2)))));
const shorten = DeviceTypes.IS_IPHONE_X && this.props.isLandscape ? 4 : 2;
return Math.floor(Number(((deviceWidth - (SECTION_MARGIN * shorten)) / (EMOJI_SIZE + (EMOJI_GUTTER * shorten)))));
};
renderItem = ({item}) => {
@ -235,7 +236,7 @@ export default class EmojiPicker extends PureComponent {
onPress={() => this.props.onEmojiPress(item)}
style={style.flatListRow}
>
<View style={style.flatListEmoji}>
<View style={[style.flatListEmoji, padding(this.props.isLandscape)]}>
<Emoji
emojiName={item}
size={20}
@ -395,6 +396,8 @@ export default class EmojiPicker extends PureComponent {
const {formatMessage} = intl;
const styles = getStyleSheetFromTheme(theme);
const shorten = DeviceTypes.IS_IPHONE_X && isLandscape ? 6 : 2;
let listComponent;
if (searchTerm) {
listComponent = (
@ -414,7 +417,7 @@ export default class EmojiPicker extends PureComponent {
<SectionList
ref={this.attachSectionList}
showsVerticalScrollIndicator={false}
style={[styles.listView, {width: deviceWidth - (SECTION_MARGIN * 2)}]}
style={[styles.listView, {width: deviceWidth - (SECTION_MARGIN * shorten)}]}
sections={emojis}
renderSectionHeader={this.renderSectionHeader}
renderItem={this.renderItem}
@ -460,7 +463,7 @@ export default class EmojiPicker extends PureComponent {
keyboardVerticalOffset={keyboardOffset}
enabled={Platform.OS === 'ios'}
>
<View style={styles.searchBar}>
<View style={[styles.searchBar, padding(isLandscape)]}>
<SearchBar
ref='search_bar'
placeholder={formatMessage({id: 'search_bar.search', defaultMessage: 'Search'})}

2
app/components/post/index.js
View file

@ -14,6 +14,7 @@ import {isPostFlagged, isSystemMessage} from 'mattermost-redux/utils/post_utils'
import {goToScreen, showModalOverCurrentContext} from 'app/actions/navigation';
import {insertToDraft, setPostTooltipVisible} from 'app/actions/views/channel';
import {isLandscape} from 'app/selectors/device';
import Post from './post';
@ -83,6 +84,7 @@ function makeMapStateToProps() {
theme: getTheme(state),
isFlagged: isPostFlagged(post.id, myPreferences),
isCommentMention,
isLandscape: isLandscape(state),
};
};
}

5
app/components/post/post.js
View file

@ -21,6 +21,7 @@ import {fromAutoResponder} from 'app/utils/general';
import {preventDoubleTap} from 'app/utils/tap';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
import {t} from 'app/utils/i18n';
import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
import {Posts} from 'mattermost-redux/constants';
import EventEmitter from 'mattermost-redux/utils/event_emitter';
@ -67,6 +68,7 @@ export default class Post extends PureComponent {
isCommentMention: PropTypes.bool,
location: PropTypes.string,
isBot: PropTypes.bool,
isLandscape: PropTypes.bool.isRequired,
};
static defaultProps = {
@ -243,6 +245,7 @@ export default class Post extends PureComponent {
skipFlaggedHeader,
skipPinnedHeader,
location,
isLandscape,
} = this.props;
if (!post) {
@ -300,7 +303,7 @@ export default class Post extends PureComponent {
return (
<TouchableHighlight
style={[style.postStyle, highlighted]}
style={[style.postStyle, highlighted, padding(isLandscape)]}
onPress={this.handlePress}
onLongPress={this.showPostOptions}
underlayColor={changeOpacity(theme.centerChannelColor, 0.1)}

19
app/components/post_textbox/__snapshots__/post_textbox.test.js.snap
View file

@ -6,14 +6,17 @@ exports[`PostTextBox should match, full snapshot 1`] = `
<View
onLayout={[Function]}
style={
Object {
"alignItems": "flex-end",
"backgroundColor": "#ffffff",
"borderTopColor": "rgba(61,60,64,0.2)",
"borderTopWidth": 1,
"flexDirection": "row",
"paddingVertical": 4,
}
Array [
Object {
"alignItems": "flex-end",
"backgroundColor": "#ffffff",
"borderTopColor": "rgba(61,60,64,0.2)",
"borderTopWidth": 1,
"flexDirection": "row",
"paddingVertical": 4,
},
null,
]
}
>
<Connect(AttachmentButton)

2
app/components/post_textbox/index.js
View file

@ -22,6 +22,7 @@ import {userTyping} from 'app/actions/views/typing';
import {getCurrentChannelDraft, getThreadDraft} from 'app/selectors/views';
import {getChannelMembersForDm} from 'app/selectors/channel';
import {getAllowedServerMaxFileSize} from 'app/utils/file';
import {isLandscape} from 'app/selectors/device';
import PostTextbox from './post_textbox';
@ -69,6 +70,7 @@ function mapStateToProps(state, ownProps) {
enableConfirmNotificationsToChannel,
currentChannelMembersCount,
isTimezoneEnabled,
isLandscape: isLandscape(state),
};
}

1
app/components/post_textbox/post_textbox.test.js
View file

@ -49,6 +49,7 @@ describe('PostTextBox', () => {
onCloseChannel: jest.fn(),
cursorPositionEvent: '',
valueEvent: '',
isLandscape: false,
};
test('should match, full snapshot', () => {

9
app/components/post_textbox/post_textbox_base.js
View file

@ -32,6 +32,7 @@ import {NOTIFY_ALL_MEMBERS} from 'app/constants/view';
import {t} from 'app/utils/i18n';
import {confirmOutOfOfficeDisabled} from 'app/utils/status';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
const {RNTextInputReset} = NativeModules;
@ -77,6 +78,7 @@ export default class PostTextBoxBase extends PureComponent {
enableConfirmNotificationsToChannel: PropTypes.bool,
isTimezoneEnabled: PropTypes.bool,
currentChannel: PropTypes.object,
isLandscape: PropTypes.bool.isRequired,
};
static defaultProps = {
@ -146,7 +148,7 @@ export default class PostTextBoxBase extends PureComponent {
numberOfTimezones = async () => {
const {data} = await this.props.actions.getChannelTimezones(this.props.channelId);
return data?.length || 0;
}
};
canSend = () => {
const {files, maxMessageLength, uploadFileRequestStatus} = this.props;
@ -408,6 +410,7 @@ export default class PostTextBoxBase extends PureComponent {
const {files} = this.props;
const {intl} = this.context;
const {value} = this.state;
if (files.length === 0 && !value) {
Alert.alert(
intl.formatMessage({
@ -681,7 +684,7 @@ export default class PostTextBoxBase extends PureComponent {
renderTextBox = () => {
const {intl} = this.context;
const {channelDisplayName, channelIsArchived, channelIsLoading, channelIsReadOnly, theme} = this.props;
const {channelDisplayName, channelIsArchived, channelIsLoading, channelIsReadOnly, theme, isLandscape} = this.props;
const style = getStyleSheet(theme);
if (channelIsArchived) {
@ -694,7 +697,7 @@ export default class PostTextBoxBase extends PureComponent {
return (
<View
style={style.inputWrapper}
style={[style.inputWrapper, padding(isLandscape)]}
onLayout={this.handleLayout}
>
{this.getAttachmentButton()}

20
app/components/safe_area_view/iphone_x_spacing/index.js Normal file
View file

@ -0,0 +1,20 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import {DeviceTypes, ViewTypes} from 'app/constants';
export const paddingHorizontal = (isLandscape, modifier = 0) => {
return DeviceTypes.IS_IPHONE_X && isLandscape ? {paddingHorizontal: ViewTypes.IOS_HORIZONTAL_LANDSCAPE + modifier} : null;
};
export const paddingLeft = (isLandscape, modifier = 0) => {
return DeviceTypes.IS_IPHONE_X && isLandscape ? {paddingLeft: ViewTypes.IOS_HORIZONTAL_LANDSCAPE + modifier} : null;
};
export const paddingRight = (isLandscape, modifier = 0) => {
return DeviceTypes.IS_IPHONE_X && isLandscape ? {paddingRight: ViewTypes.IOS_HORIZONTAL_LANDSCAPE + modifier} : null;
};
export const marginHorizontal = (isLandscape, modifier = 0) => {
return DeviceTypes.IS_IPHONE_X && isLandscape ? {marginHorizontal: ViewTypes.IOS_HORIZONTAL_LANDSCAPE + modifier} : null;
};

6
app/components/safe_area_view/safe_area_view.ios.js
View file

@ -25,10 +25,12 @@ export default class SafeAreaIos extends PureComponent {
navBarBackgroundColor: PropTypes.string,
headerComponent: PropTypes.node,
theme: PropTypes.object.isRequired,
useLandscapeMargin: PropTypes.bool.isRequired,
};
static defaultProps = {
keyboardOffset: 0,
useLandscapeMargin: false,
};
constructor(props) {
@ -150,7 +152,7 @@ export default class SafeAreaIos extends PureComponent {
};
render() {
const {backgroundColor, children, footerColor, footerComponent, keyboardOffset, theme} = this.props;
const {backgroundColor, children, footerColor, footerComponent, keyboardOffset, theme, useLandscapeMargin} = this.props;
const {keyboard, safeAreaInsets} = this.state;
let bgColor = theme.centerChannelBg;
@ -173,6 +175,8 @@ export default class SafeAreaIos extends PureComponent {
style={{
flex: 1,
backgroundColor: bgColor,
marginLeft: useLandscapeMargin ? safeAreaInsets.left : 0,
marginRight: useLandscapeMargin ? safeAreaInsets.right : 0,
}}
>
{this.renderTopBar()}

7
app/components/sidebars/main/channels_list/channel_item/__snapshots__/channel_item.test.js.snap
View file

@ -17,6 +17,7 @@ exports[`ChannelItem should match snapshot 1`] = `
"height": 44,
},
undefined,
null,
]
}
>
@ -118,6 +119,7 @@ exports[`ChannelItem should match snapshot for current user i.e currentUser (you
"height": 44,
},
undefined,
null,
]
}
>
@ -230,6 +232,7 @@ exports[`ChannelItem should match snapshot for current user i.e currentUser (you
"height": 44,
},
undefined,
null,
]
}
>
@ -342,6 +345,7 @@ exports[`ChannelItem should match snapshot for deactivated user and is currentCh
"height": 44,
},
undefined,
null,
]
}
>
@ -454,6 +458,7 @@ exports[`ChannelItem should match snapshot for deactivated user and is searchRes
"height": 44,
},
undefined,
null,
]
}
>
@ -561,6 +566,7 @@ exports[`ChannelItem should match snapshot with draft 1`] = `
"height": 44,
},
undefined,
null,
]
}
>
@ -664,6 +670,7 @@ exports[`ChannelItem should match snapshot with mentions and muted 1`] = `
Object {
"opacity": 0.5,
},
null,
]
}
>

6
app/components/sidebars/main/channels_list/channel_item/channel_item.js
View file

@ -13,7 +13,7 @@ import {intlShape} from 'react-intl';
import {Navigation} from 'react-native-navigation';
import {General} from 'mattermost-redux/constants';
import {paddingLeft as padding} from 'app/components/safe_area_view/iphone_x_spacing';
import Badge from 'app/components/badge';
import ChannelIcon from 'app/components/channel_icon';
import {preventDoubleTap} from 'app/utils/tap';
@ -40,6 +40,7 @@ export default class ChannelItem extends PureComponent {
isSearchResult: PropTypes.bool,
isBot: PropTypes.bool.isRequired,
previewChannel: PropTypes.func,
isLandscape: PropTypes.bool.isRequired,
};
static defaultProps = {
@ -98,6 +99,7 @@ export default class ChannelItem extends PureComponent {
isSearchResult,
channel,
isBot,
isLandscape,
} = this.props;
const isArchived = channel.delete_at > 0;
@ -194,7 +196,7 @@ export default class ChannelItem extends PureComponent {
onPress={this.onPress}
onPressIn={this.onPreview}
>
<View style={[style.container, mutedStyle]}>
<View style={[style.container, mutedStyle, padding(isLandscape)]}>
{extraBorder}
<View style={[style.item, extraItemStyle]}>
{icon}

1
app/components/sidebars/main/channels_list/channel_item/channel_item.test.js
View file

@ -38,6 +38,7 @@ describe('ChannelItem', () => {
unreadMsgs: 1,
isSearchResult: false,
isBot: false,
isLandscape: false,
};
test('should match snapshot', () => {

3
app/components/sidebars/main/channels_list/channel_item/index.js
View file

@ -14,7 +14,7 @@ import {getTheme, getTeammateNameDisplaySetting} from 'mattermost-redux/selector
import {getCurrentUserId, getUser} from 'mattermost-redux/selectors/entities/users';
import {getUserIdFromChannelName, isChannelMuted} from 'mattermost-redux/utils/channel_utils';
import {displayUsername} from 'mattermost-redux/utils/user_utils';
import {isLandscape} from 'app/selectors/device';
import {getDraftForChannel} from 'app/selectors/views';
import {isGuest as isGuestUser} from 'app/utils/users';
@ -84,6 +84,7 @@ function makeMapStateToProps() {
theme: getTheme(state),
unreadMsgs,
isBot,
isLandscape: isLandscape(state),
isGuest,
};
};

7
app/components/sidebars/main/channels_list/channels_list.js
View file

@ -12,7 +12,7 @@ import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import SearchBar from 'app/components/search_bar';
import {ViewTypes} from 'app/constants';
import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
import List from './list';
@ -31,6 +31,7 @@ export default class ChannelsList extends PureComponent {
theme: PropTypes.object.isRequired,
drawerOpened: PropTypes.bool,
previewChannel: PropTypes.func,
isLandscape: PropTypes.bool.isRequired,
};
static contextTypes = {
@ -90,6 +91,7 @@ export default class ChannelsList extends PureComponent {
onShowTeams,
theme,
previewChannel,
isLandscape,
} = this.props;
const {searching, term} = this.state;
@ -127,7 +129,7 @@ export default class ChannelsList extends PureComponent {
};
const title = (
<View style={styles.searchContainer}>
<View style={[styles.searchContainer, padding(isLandscape)]}>
<SearchBar
ref='search_bar'
placeholder={intl.formatMessage({id: 'mobile.channel_drawer.search', defaultMessage: 'Jump to...'})}
@ -234,6 +236,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
divider: {
backgroundColor: changeOpacity(theme.sidebarText, 0.1),
height: 1,
width: '100%',
},
actionContainer: {
alignItems: 'center',

5
app/components/sidebars/main/channels_list/filtered_list/filtered_list.js
View file

@ -21,9 +21,9 @@ import {General} from 'mattermost-redux/constants';
import {sortChannelsByDisplayName} from 'mattermost-redux/utils/channel_utils';
import {displayUsername} from 'mattermost-redux/utils/user_utils';
import {t} from 'app/utils/i18n';
import ChannelItem from 'app/components/sidebars/main/channels_list/channel_item';
import {ListTypes} from 'app/constants';
import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
const VIEWABILITY_CONFIG = ListTypes.VISIBILITY_CONFIG_DEFAULTS;
@ -55,6 +55,7 @@ class FilteredList extends Component {
term: PropTypes.string,
theme: PropTypes.object.isRequired,
previewChannel: PropTypes.func,
isLandscape: PropTypes.bool.isRequired,
};
static defaultProps = {
@ -400,7 +401,7 @@ class FilteredList extends Component {
<View>
{topDivider && this.renderDivider(styles, 0)}
<View style={styles.titleContainer}>
<Text style={styles.title}>
<Text style={[styles.title, padding(this.props.isLandscape)]}>
{formatMessage({id, defaultMessage}).toUpperCase()}
</Text>
{action && this.renderSectionAction(styles, action)}

3
app/components/sidebars/main/channels_list/filtered_list/index.js
View file

@ -20,7 +20,7 @@ import {getConfig} from 'mattermost-redux/selectors/entities/general';
import {getCurrentTeam} from 'mattermost-redux/selectors/entities/teams';
import {getCurrentUserId, getProfilesInCurrentTeam, getUsers, getUserIdsInChannels, getUserStatuses} from 'mattermost-redux/selectors/entities/users';
import {getDirectShowPreferences, getTeammateNameDisplaySetting, getTheme} from 'mattermost-redux/selectors/entities/preferences';
import {isLandscape} from 'app/selectors/device';
import Config from 'assets/config';
import FilteredList from './filtered_list';
@ -124,6 +124,7 @@ function mapStateToProps(state) {
pastDirectMessages: pastDirectMessages(state),
restrictDms,
theme: getTheme(state),
isLandscape: isLandscape(state),
};
}

3
app/components/sidebars/main/channels_list/index.js
View file

@ -4,12 +4,13 @@
import {connect} from 'react-redux';
import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
import {isLandscape} from 'app/selectors/device';
import ChannelsList from './channels_list';
function mapStateToProps(state) {
return {
theme: getTheme(state),
isLandscape: isLandscape(state),
};
}

3
app/components/sidebars/main/channels_list/list/index.js
View file

@ -21,7 +21,7 @@ import {haveITeamPermission} from 'mattermost-redux/selectors/entities/roles';
import Permissions from 'mattermost-redux/constants/permissions';
import {showModal} from 'app/actions/navigation';
import {isLandscape} from 'app/selectors/device';
import {DeviceTypes, ViewTypes} from 'app/constants';
import List from './list';
@ -78,6 +78,7 @@ function mapStateToProps(state) {
theme: getTheme(state),
unreadChannelIds,
orderedChannelIds,
isLandscape: isLandscape(state),
};
}

18
app/components/sidebars/main/channels_list/list/list.js
View file

@ -20,13 +20,15 @@ import {General} from 'mattermost-redux/constants';
import {debounce} from 'mattermost-redux/actions/helpers';
import ChannelItem from 'app/components/sidebars/main/channels_list/channel_item';
import {DeviceTypes, ListTypes} from 'app/constants';
import {DeviceTypes, ListTypes, ViewTypes} from 'app/constants';
import {SidebarSectionTypes} from 'app/constants/view';
import {t} from 'app/utils/i18n';
import {preventDoubleTap} from 'app/utils/tap';
import {changeOpacity} from 'app/utils/theme';
import {paddingLeft as padding} from 'app/components/safe_area_view/iphone_x_spacing';
const VIEWABILITY_CONFIG = {
...ListTypes.VISIBILITY_CONFIG_DEFAULTS,
waitForInteraction: true,
@ -45,6 +47,7 @@ export default class List extends PureComponent {
theme: PropTypes.object.isRequired,
orderedChannelIds: PropTypes.array.isRequired,
previewChannel: PropTypes.func,
isLandscape: PropTypes.bool.isRequired,
actions: PropTypes.shape({
showModal: PropTypes.func.isRequired,
}).isRequired,
@ -342,7 +345,7 @@ export default class List extends PureComponent {
};
renderSectionHeader = ({section}) => {
const {styles} = this.props;
const {styles, isLandscape} = this.props;
const {intl} = this.context;
const {
action,
@ -355,7 +358,7 @@ export default class List extends PureComponent {
return (
<View>
{topSeparator && this.renderSectionSeparator()}
<View style={styles.titleContainer}>
<View style={[styles.titleContainer, padding(isLandscape)]}>
<Text style={styles.title}>
{intl.formatMessage({id, defaultMessage}).toUpperCase()}
</Text>
@ -418,11 +421,15 @@ export default class List extends PureComponent {
};
render() {
const {styles, theme} = this.props;
const {styles, theme, isLandscape} = this.props;
const {sections, width, showIndicator} = this.state;
const paddingBottom = this.listContentPadding();
const unreadBarStyles = DeviceTypes.IS_IPHONE_X && isLandscape ? {width: width - 32, marginLeft: ViewTypes.IOS_HORIZONTAL_LANDSCAPE + 16} : {width};
const unreadTextStyles = DeviceTypes.IS_IPHONE_X && isLandscape ? {marginLeft: -44} : null;
return (
<View
style={styles.container}
@ -445,7 +452,8 @@ export default class List extends PureComponent {
{showIndicator &&
<UnreadIndicator
show={showIndicator}
style={[styles.above, {width}]}
style={[styles.above, unreadBarStyles]}
textStyle={unreadTextStyles}
onPress={this.scrollToTop}
theme={theme}
/>

5
app/components/sidebars/main/channels_list/unread_indicator/index.js
View file

@ -19,6 +19,7 @@ export default class UnreadIndicator extends PureComponent {
style: ViewPropTypes.style,
onPress: PropTypes.func,
theme: PropTypes.object.isRequired,
textStyle: ViewPropTypes.style,
};
static defaultProps = {
@ -40,7 +41,7 @@ export default class UnreadIndicator extends PureComponent {
style={[style.container, this.props.style]}
>
<FormattedText
style={style.indicatorText}
style={[style.indicatorText, this.props.textStyle]}
id='sidebar.unreads'
defaultMessage='More unreads'
/>
@ -64,7 +65,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
flexDirection: 'row',
position: 'absolute',
borderRadius: 15,
marginHorizontal: 15,
marginHorizontal: 25,
height: 25,
},
indicatorText: {

3
app/components/sidebars/main/teams_list/teams_list_item/index.js
View file

@ -6,6 +6,8 @@ import {connect} from 'react-redux';
import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
import {getCurrentTeamId, getTeam, makeGetBadgeCountForTeamId} from 'mattermost-redux/selectors/entities/teams';
import {isLandscape} from 'app/selectors/device';
import TeamsListItem from './teams_list_item.js';
function makeMapStateToProps() {
@ -20,6 +22,7 @@ function makeMapStateToProps() {
mentionCount: getMentionCount(state, ownProps.teamId),
name: team.name,
theme: getTheme(state),
isLandscape: isLandscape(state),
};
};
}

6
app/components/sidebars/main/teams_list/teams_list_item/teams_list_item.js
View file

@ -12,7 +12,7 @@ import IonIcon from 'react-native-vector-icons/Ionicons';
import Badge from 'app/components/badge';
import TeamIcon from 'app/components/team_icon';
import {paddingLeft as padding} from 'app/components/safe_area_view/iphone_x_spacing';
import {preventDoubleTap} from 'app/utils/tap';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
@ -26,6 +26,7 @@ export default class TeamsListItem extends React.PureComponent {
selectTeam: PropTypes.func.isRequired,
teamId: PropTypes.string.isRequired,
theme: PropTypes.object.isRequired,
isLandscape: PropTypes.bool.isRequired,
};
selectTeam = preventDoubleTap(() => {
@ -41,6 +42,7 @@ export default class TeamsListItem extends React.PureComponent {
name,
teamId,
theme,
isLandscape,
} = this.props;
const styles = getStyleSheet(theme);
@ -70,7 +72,7 @@ export default class TeamsListItem extends React.PureComponent {
underlayColor={changeOpacity(theme.sidebarTextHoverBg, 0.5)}
onPress={this.selectTeam}
>
<View style={styles.teamContainer}>
<View style={[styles.teamContainer, padding(isLandscape)]}>
<TeamIcon
teamId={teamId}
styleContainer={styles.teamIconContainer}

5
app/components/swiper.js
View file

@ -12,7 +12,7 @@ import {
View,
} from 'react-native';
import {DeviceTypes} from 'app/constants';
import {DeviceTypes, ViewTypes} from 'app/constants';
import mattermostManaged from 'app/mattermost_managed';
export default class Swiper extends PureComponent {
@ -169,11 +169,12 @@ export default class Swiper extends PureComponent {
const {width, height} = Dimensions.get('window');
const bottom = this.paginationBottom(width, height);
const drawerWidth = (width > height) ? width - ViewTypes.IOS_HORIZONTAL_LANDSCAPE : width;
let style;
if (DeviceTypes.IS_IPHONE_X) {
style = {
bottom,
width,
drawerWidth,
};
} else {
style = {

20
app/components/widgets/settings/text_setting.js
View file

@ -12,6 +12,7 @@ import {
import FormattedText from 'app/components/formatted_text';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
export default class TextSetting extends PureComponent {
static propTypes = {
@ -35,6 +36,7 @@ export default class TextSetting extends PureComponent {
value: PropTypes.string.isRequired,
multiline: PropTypes.bool,
showRequiredAsterisk: PropTypes.bool,
isLandscape: PropTypes.bool.isRequired,
keyboardType: PropTypes.oneOf([
'default',
'number-pad',
@ -53,6 +55,7 @@ export default class TextSetting extends PureComponent {
multiline: false,
showRequiredAsterisk: false,
keyboardType: 'default',
isLandscape: false,
secureTextEntry: false,
};
@ -74,6 +77,7 @@ export default class TextSetting extends PureComponent {
value,
multiline,
showRequiredAsterisk,
isLandscape,
secureTextEntry,
} = this.props;
const style = getStyleSheet(theme);
@ -142,15 +146,17 @@ export default class TextSetting extends PureComponent {
);
}
const noediting = disabled ? style.disabled : null;
return (
<View>
<View style={style.titleContainer}>
<View style={[style.titleContainer, padding(isLandscape)]}>
{labelContent}
{asterisk}
{optionalContent}
</View>
<View style={style.inputContainer}>
<View style={disabled ? style.disabled : null}>
<View style={[style.inputContainer, padding(isLandscape), noediting]}>
<View>
<TextInput
value={value}
placeholder={placeholder}
@ -169,9 +175,11 @@ export default class TextSetting extends PureComponent {
/>
</View>
</View>
{disabledTextContent}
{helpTextContent}
{errorTextContent}
<View style={padding(isLandscape)}>
{disabledTextContent}
{helpTextContent}
{errorTextContent}
</View>
</View>
);
}

3
app/constants/view.js
View file

@ -107,7 +107,7 @@ export default {
MAX_CHANNELNAME_LENGTH: 22,
ANDROID_TOP_LANDSCAPE: 46,
ANDROID_TOP_PORTRAIT: 56,
IOS_TOP_LANDSCAPE: 32,
IOS_TOP_LANDSCAPE: 40,
IOS_TOP_PORTRAIT: 64,
IOSX_TOP_PORTRAIT: 88,
STATUS_BAR_HEIGHT: 20,
@ -117,4 +117,5 @@ export default {
DATA_SOURCE_CHANNELS: 'channels',
NotificationLevels,
SidebarSectionTypes,
IOS_HORIZONTAL_LANDSCAPE: 44,
};

7
app/screens/about/about.js
View file

@ -15,7 +15,7 @@ import DeviceInfo from 'react-native-device-info';
import FormattedText from 'app/components/formatted_text';
import StatusBar from 'app/components/status_bar';
import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme';
import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
import AppIcon from 'app/components/app_icon';
import Config from 'assets/config';
@ -27,6 +27,7 @@ export default class About extends PureComponent {
config: PropTypes.object.isRequired,
license: PropTypes.object.isRequired,
theme: PropTypes.object.isRequired,
isLandscape: PropTypes.bool.isRequired,
};
componentWillReceiveProps(nextProps) {
@ -60,7 +61,7 @@ export default class About extends PureComponent {
}
render() {
const {theme, config, license} = this.props;
const {theme, config, license, isLandscape} = this.props;
const style = getStyleSheet(theme);
let title = (
@ -218,7 +219,7 @@ export default class About extends PureComponent {
<View style={style.wrapper}>
<StatusBar/>
<ScrollView
style={style.scrollView}
style={[style.scrollView, padding(isLandscape)]}
contentContainerStyle={style.scrollViewContent}
>
<View style={style.logoContainer}>

2
app/screens/about/index.js
View file

@ -5,6 +5,7 @@ import {connect} from 'react-redux';
import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
import {getConfig, getLicense} from 'mattermost-redux/selectors/entities/general';
import {isLandscape} from 'app/selectors/device';
import About from './about';
@ -16,6 +17,7 @@ function mapStateToProps(state) {
config,
license,
theme: getTheme(state),
isLandscape: isLandscape(state),
};
}

43
app/screens/channel/channel.ios.js
View file

@ -38,6 +38,7 @@ export default class ChannelIOS extends ChannelBase {
const {height} = Dimensions.get('window');
const {
currentChannelId,
isLandscape,
} = this.props;
const channelLoaderStyle = [style.channelLoader, {height}];
@ -45,8 +46,40 @@ export default class ChannelIOS extends ChannelBase {
channelLoaderStyle.push(style.iOSHomeIndicator);
}
const drawerContent = (
<React.Fragment>
let safeViewContent;
if (DeviceTypes.IS_IPHONE_X && isLandscape) {
safeViewContent = (
<React.Fragment>
<StatusBar/>
<NetworkIndicator/>
<ChannelNavBar
openChannelDrawer={this.openChannelSidebar}
openSettingsDrawer={this.openSettingsSidebar}
onPress={this.goToChannelInfo}
/>
<SafeAreaView>
<ChannelPostList
updateNativeScrollView={this.updateNativeScrollView}
/>
<View nativeID={ACCESSORIES_CONTAINER_NATIVE_ID}>
<FileUploadPreview/>
<Autocomplete
maxHeight={AUTOCOMPLETE_MAX_HEIGHT}
onChangeText={this.handleAutoComplete}
cursorPositionEvent={CHANNEL_POST_TEXTBOX_CURSOR_CHANGE}
valueEvent={CHANNEL_POST_TEXTBOX_VALUE_CHANGE}
/>
</View>
<ChannelLoader
height={height}
style={channelLoaderStyle}
/>
{LocalConfig.EnableMobileClientUpgrade && <ClientUpgradeListener/>}
</SafeAreaView>
</React.Fragment>
);
} else {
safeViewContent = (
<SafeAreaView>
<StatusBar/>
<NetworkIndicator/>
@ -73,6 +106,12 @@ export default class ChannelIOS extends ChannelBase {
/>
{LocalConfig.EnableMobileClientUpgrade && <ClientUpgradeListener/>}
</SafeAreaView>
);
}
const drawerContent = (
<React.Fragment>
{safeViewContent}
<KeyboardTrackingView
ref={this.keyboardTracker}
scrollViewNativeID={currentChannelId}

4
app/screens/channel/channel_nav_bar/__snapshots__/channel_nav_bar.test.js.snap
View file

@ -11,9 +11,7 @@ exports[`ChannelNavBar should match, full snapshot 1`] = `
"width": "100%",
"zIndex": 10,
},
Object {
"paddingHorizontal": 0,
},
null,
Object {
"height": 44,
},

5
app/screens/channel/channel_nav_bar/channel_nav_bar.js
View file

@ -16,6 +16,7 @@ import ChannelDrawerButton from './channel_drawer_button';
import ChannelSearchButton from './channel_search_button';
import ChannelTitle from './channel_title';
import SettingDrawerButton from './settings_drawer_button';
import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
const {
ANDROID_TOP_LANDSCAPE,
@ -73,7 +74,6 @@ export default class ChannelNavBar extends PureComponent {
const {isLandscape, onPress, theme} = this.props;
const {openChannelDrawer, openSettingsDrawer} = this.props;
const style = getStyleFromTheme(theme);
const padding = {paddingHorizontal: 0};
let height;
let canHaveSubtitle = true;
@ -94,7 +94,6 @@ export default class ChannelNavBar extends PureComponent {
}
if (DeviceTypes.IS_IPHONE_X && isLandscape) {
padding.paddingHorizontal = 10;
canHaveSubtitle = false;
}
break;
@ -106,7 +105,7 @@ export default class ChannelNavBar extends PureComponent {
}
return (
<View style={[style.header, padding, {height}]}>
<View style={[style.header, padding(isLandscape), {height}]}>
<ChannelDrawerButton
openDrawer={openChannelDrawer}
visible={drawerButtonVisible}

2
app/screens/channel/channel_post_list/index.js
View file

@ -13,6 +13,7 @@ import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
import {goToScreen} from 'app/actions/navigation';
import {loadPostsIfNecessaryWithRetry, loadThreadIfNecessary, increasePostVisibility, refreshChannelWithRetry} from 'app/actions/views/channel';
import {recordLoadTime} from 'app/actions/views/root';
import {isLandscape} from 'app/selectors/device';
import ChannelPostList from './channel_post_list';
@ -31,6 +32,7 @@ function mapStateToProps(state) {
loadMorePostsVisible: state.views.channel.loadMorePostsVisible,
refreshing: state.views.channel.refreshing,
theme: getTheme(state),
isLandscape: isLandscape(state),
};
}

8
app/screens/channel_add_members/channel_add_members.js
View file

@ -14,7 +14,7 @@ import {Navigation} from 'react-native-navigation';
import {debounce} from 'mattermost-redux/actions/helpers';
import {General} from 'mattermost-redux/constants';
import {filterProfilesMatchingTerm} from 'mattermost-redux/utils/user_utils';
import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
import Loading from 'app/components/loading';
import CustomList, {FLATLIST, SECTIONLIST} from 'app/components/custom_list';
import UserListRow from 'app/components/custom_list/user_list_row';
@ -43,6 +43,7 @@ export default class ChannelAddMembers extends PureComponent {
currentUserId: PropTypes.string.isRequired,
profilesNotInChannel: PropTypes.array.isRequired,
theme: PropTypes.object.isRequired,
isLandscape: PropTypes.bool.isRequired,
};
static defaultProps = {
@ -278,7 +279,7 @@ export default class ChannelAddMembers extends PureComponent {
render() {
const {formatMessage} = this.context.intl;
const {currentUserId, profilesNotInChannel, theme} = this.props;
const {currentUserId, profilesNotInChannel, theme, isLandscape} = this.props;
const {
adding,
loading,
@ -334,7 +335,7 @@ export default class ChannelAddMembers extends PureComponent {
return (
<KeyboardLayout>
<StatusBar/>
<View style={style.searchBar}>
<View style={[style.searchBar, padding(isLandscape)]}>
<SearchBar
ref='search_bar'
placeholder={formatMessage({id: 'search_bar.search', defaultMessage: 'Search'})}
@ -365,6 +366,7 @@ export default class ChannelAddMembers extends PureComponent {
onRowPress={this.handleSelectProfile}
renderItem={this.renderItem}
theme={theme}
isLandscape={isLandscape}
/>
</KeyboardLayout>
);

1
app/screens/channel_add_members/channel_add_members.test.js
View file

@ -25,6 +25,7 @@ describe('ChannelAddMembers', () => {
profilesNotInChannel: [],
theme: Preferences.THEMES.default,
componentId: 'component-id',
isLandscape: false,
};
test('should render without error and call functions on mount', () => {

3
app/screens/channel_add_members/index.js
View file

@ -13,7 +13,7 @@ import {getCurrentUserId, getProfilesNotInCurrentChannel} from 'mattermost-redux
import {setButtons, popTopScreen} from 'app/actions/navigation';
import {handleAddChannelMembers} from 'app/actions/views/channel_add_members';
import {isLandscape} from 'app/selectors/device';
import ChannelAddMembers from './channel_add_members';
function mapStateToProps(state) {
@ -26,6 +26,7 @@ function mapStateToProps(state) {
currentUserId: getCurrentUserId(state),
profilesNotInChannel: getProfilesNotInCurrentChannel(state),
theme: getTheme(state),
isLandscape: isLandscape(state),
};
}

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

@ -65,6 +65,7 @@ export default class ChannelInfo extends PureComponent {
canEditChannel: PropTypes.bool.isRequired,
ignoreChannelMentions: PropTypes.bool.isRequired,
isBot: PropTypes.bool.isRequired,
isLandscape: PropTypes.bool.isRequired,
};
static defaultProps = {
@ -362,6 +363,7 @@ export default class ChannelInfo extends PureComponent {
canEditChannel,
theme,
currentChannel,
isLandscape,
} = this.props;
if (channelIsArchived) {
@ -374,6 +376,7 @@ export default class ChannelInfo extends PureComponent {
icon='users'
textId={canManageUsers ? t('channel_header.manageMembers') : t('channel_header.viewMembers')}
theme={theme}
isLandscape={isLandscape}
/>
<View style={style.separator}/>
</View>);
@ -389,6 +392,7 @@ export default class ChannelInfo extends PureComponent {
textId={t('mobile.routes.channelInfo.favorite')}
togglable={true}
theme={theme}
isLandscape={isLandscape}
/>
<View style={style.separator}/>
<ChannelInfoRow
@ -399,6 +403,7 @@ export default class ChannelInfo extends PureComponent {
textId={t('channel_notifications.muteChannel.settings')}
togglable={true}
theme={theme}
isLandscape={isLandscape}
/>
<View style={style.separator}/>
<ChannelInfoRow
@ -409,6 +414,7 @@ export default class ChannelInfo extends PureComponent {
textId={t('channel_notifications.ignoreChannelMentions.settings')}
togglable={true}
theme={theme}
isLandscape={isLandscape}
/>
<View style={style.separator}/>
<ChannelInfoRow
@ -417,6 +423,7 @@ export default class ChannelInfo extends PureComponent {
image={pinIcon}
textId={t('channel_header.pinnedPosts')}
theme={theme}
isLandscape={isLandscape}
/>
{
@ -441,6 +448,7 @@ export default class ChannelInfo extends PureComponent {
icon='users'
textId={canManageUsers ? t('channel_header.manageMembers') : t('channel_header.viewMembers')}
theme={theme}
isLandscape={isLandscape}
/>
</React.Fragment>
}
@ -453,6 +461,7 @@ export default class ChannelInfo extends PureComponent {
icon='user-plus'
textId={t('channel_header.addMembers')}
theme={theme}
isLandscape={isLandscape}
/>
</React.Fragment>
}
@ -465,6 +474,7 @@ export default class ChannelInfo extends PureComponent {
icon='edit'
textId={t('mobile.channel_info.edit')}
theme={theme}
isLandscape={isLandscape}
/>
</React.Fragment>
)}
@ -482,6 +492,7 @@ export default class ChannelInfo extends PureComponent {
status,
theme,
isBot,
isLandscape,
} = this.props;
const style = getStyleSheet(theme);
@ -535,12 +546,13 @@ export default class ChannelInfo extends PureComponent {
icon='sign-out'
textId={t('navbar.leave')}
theme={theme}
isLandscape={isLandscape}
/>
</React.Fragment>
}
</View>
{this.renderLeaveOrDeleteChannelRow() && canDeleteChannel && !channelIsArchived &&
<View style={style.footer}>
<View style={[style.rowsContainer, style.footer]}>
<ChannelInfoRow
action={this.handleDelete}
defaultMessage='Archive Channel'
@ -549,11 +561,12 @@ export default class ChannelInfo extends PureComponent {
textId={t('mobile.routes.channelInfo.delete_channel')}
textColor='#CA3B27'
theme={theme}
isLandscape={isLandscape}
/>
</View>
}
{this.renderCloseDirect() &&
<View style={style.footer}>
<View style={[style.rowsContainer, style.footer]}>
<ChannelInfoRow
action={this.handleClose}
defaultMessage={defaultMessage}
@ -562,6 +575,7 @@ export default class ChannelInfo extends PureComponent {
textId={i18nId}
textColor='#CA3B27'
theme={theme}
isLandscape={isLandscape}
/>
</View>
}

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

@ -9,6 +9,7 @@ import {
Text,
TouchableHighlight,
View,
SafeAreaView,
} from 'react-native';
import {intlShape} from 'react-intl';
@ -142,99 +143,101 @@ export default class ChannelInfoHeader extends React.PureComponent {
style.detail;
return (
<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>
<SafeAreaView style={style.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}
/>
</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
value={new Date(createAt)}
year='numeric'
month='long'
day='2-digit'
/>
</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}
/>
</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
value={new Date(createAt)}
year='numeric'
month='long'
day='2-digit'
/>
</Text>
}
</View>
</SafeAreaView>
);
}
}
@ -282,5 +285,8 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
row: {
paddingHorizontal: 15,
},
safeAreaView: {
backgroundColor: 'white',
},
};
});

5
app/screens/channel_info/channel_info_row.js
View file

@ -14,6 +14,7 @@ import Icon from 'react-native-vector-icons/FontAwesome';
import FormattedText from 'app/components/formatted_text';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
function createTouchableComponent(children, action) {
return (
@ -24,7 +25,7 @@ function createTouchableComponent(children, action) {
}
function channelInfoRow(props) {
const {action, defaultMessage, detail, icon, iconColor, image, imageTintColor, textColor, textId, togglable, theme, shouldRender} = props;
const {action, defaultMessage, detail, icon, iconColor, image, imageTintColor, textColor, textId, togglable, theme, shouldRender, isLandscape} = props;
if (!shouldRender) {
return null;
@ -52,7 +53,7 @@ function channelInfoRow(props) {
}
const RowComponent = (
<View style={style.container}>
<View style={[style.container, padding(isLandscape)]}>
{iconElement}
<FormattedText
style={[style.label, {color: textColor || theme.centerChannelColor}]}

3
app/screens/channel_info/index.js
View file

@ -46,7 +46,7 @@ import {
selectPenultimateChannel,
setChannelDisplayName,
} from 'app/actions/views/channel';
import {isLandscape} from 'app/selectors/device';
import ChannelInfo from './channel_info';
function mapStateToProps(state) {
@ -111,6 +111,7 @@ function mapStateToProps(state) {
theme: getTheme(state),
canManageUsers,
isBot,
isLandscape: isLandscape(state),
};
}

10
app/screens/channel_members/__snapshots__/channel_members.test.js.snap
View file

@ -5,9 +5,12 @@ exports[`ChannelMembers should match snapshot 1`] = `
<Connect(StatusBar) />
<View
style={
Object {
"marginVertical": 5,
}
Array [
Object {
"marginVertical": 5,
},
null,
]
}
>
<SearchBarIos
@ -43,6 +46,7 @@ exports[`ChannelMembers should match snapshot 1`] = `
<CustomList
data={Array []}
extraData={Object {}}
isLandscape={false}
listType="section"
loading={false}
loadingComponent={null}

12
app/screens/channel_members/channel_members.js
View file

@ -14,7 +14,7 @@ import {Navigation} from 'react-native-navigation';
import {debounce} from 'mattermost-redux/actions/helpers';
import {General} from 'mattermost-redux/constants';
import {filterProfilesMatchingTerm} from 'mattermost-redux/utils/user_utils';
import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
import Loading from 'app/components/loading';
import CustomList, {FLATLIST, SECTIONLIST} from 'app/components/custom_list';
import UserListRow from 'app/components/custom_list/user_list_row';
@ -41,6 +41,7 @@ export default class ChannelMembers extends PureComponent {
currentChannelMembers: PropTypes.array,
currentUserId: PropTypes.string.isRequired,
theme: PropTypes.object.isRequired,
isLandscape: PropTypes.bool.isRequired,
};
static contextTypes = {
@ -279,7 +280,7 @@ export default class ChannelMembers extends PureComponent {
renderNoResults = () => {
const {loading} = this.state;
const {theme} = this.props;
const {theme, isLandscape} = this.props;
const style = getStyleFromTheme(theme);
if (loading || this.page === -1) {
@ -287,7 +288,7 @@ export default class ChannelMembers extends PureComponent {
}
return (
<View style={style.noResultContainer}>
<View style={[style.noResultContainer, padding(isLandscape)]}>
<FormattedText
id='mobile.custom_list.no_results'
defaultMessage='No Results'
@ -309,7 +310,7 @@ export default class ChannelMembers extends PureComponent {
render() {
const {formatMessage} = this.context.intl;
const {theme, canManageUsers} = this.props;
const {theme, canManageUsers, isLandscape} = this.props;
const {
removing,
loading,
@ -362,7 +363,7 @@ export default class ChannelMembers extends PureComponent {
return (
<KeyboardLayout>
<StatusBar/>
<View style={style.searchBar}>
<View style={[style.searchBar, padding(isLandscape)]}>
<SearchBar
ref='search_bar'
placeholder={formatMessage({id: 'search_bar.search', defaultMessage: 'Search'})}
@ -393,6 +394,7 @@ export default class ChannelMembers extends PureComponent {
onRowPress={this.handleSelectProfile}
renderItem={canManageUsers ? this.renderSelectableItem : this.renderUnselectableItem}
theme={theme}
isLandscape={isLandscape}
/>
</KeyboardLayout>
);

1
app/screens/channel_members/channel_members.test.js
View file

@ -23,6 +23,7 @@ describe('ChannelMembers', () => {
popTopScreen: jest.fn(),
},
componentId: 'component-id',
isLandscape: false,
};
test('should match snapshot', () => {

3
app/screens/channel_members/index.js
View file

@ -11,7 +11,7 @@ import {getProfilesInChannel, searchProfiles} from 'mattermost-redux/actions/use
import {setButtons, popTopScreen} from 'app/actions/navigation';
import {handleRemoveChannelMembers} from 'app/actions/views/channel_members';
import {isLandscape} from 'app/selectors/device';
import ChannelMembers from './channel_members';
function makeMapStateToProps() {
@ -32,6 +32,7 @@ function makeMapStateToProps() {
currentChannelMembers,
currentUserId: state.entities.users.currentUserId,
theme: getTheme(state),
isLandscape: isLandscape(state),
};
};
}

50
app/screens/edit_channel/edit_channel.js
View file

@ -9,7 +9,7 @@ import {
InteractionManager,
} from 'react-native';
import {Navigation} from 'react-native-navigation';
import SafeAreaView from 'app/components/safe_area_view';
import {General, RequestStatus} from 'mattermost-redux/constants';
import EventEmitter from 'mattermost-redux/utils/event_emitter';
@ -295,29 +295,31 @@ export default class EditChannel extends PureComponent {
} = this.state;
return (
<EditChannelInfo
theme={theme}
enableRightButton={this.emitCanUpdateChannel}
error={error}
saving={updating}
channelType={type}
currentTeamUrl={currentTeamUrl}
onDisplayNameChange={this.onDisplayNameChange}
onChannelURLChange={this.onChannelURLChange}
onPurposeChange={this.onPurposeChange}
onHeaderChange={this.onHeaderChange}
displayName={displayName}
channelURL={channelURL}
header={header}
purpose={purpose}
editing={true}
oldDisplayName={oldDisplayName}
oldChannelURL={oldChannelURL}
oldPurpose={oldPurpose}
oldHeader={oldHeader}
deviceWidth={deviceWidth}
deviceHeight={deviceHeight}
/>
<SafeAreaView>
<EditChannelInfo
theme={theme}
enableRightButton={this.emitCanUpdateChannel}
error={error}
saving={updating}
channelType={type}
currentTeamUrl={currentTeamUrl}
onDisplayNameChange={this.onDisplayNameChange}
onChannelURLChange={this.onChannelURLChange}
onPurposeChange={this.onPurposeChange}
onHeaderChange={this.onHeaderChange}
displayName={displayName}
channelURL={channelURL}
header={header}
purpose={purpose}
editing={true}
oldDisplayName={oldDisplayName}
oldChannelURL={oldChannelURL}
oldPurpose={oldPurpose}
oldHeader={oldHeader}
deviceWidth={deviceWidth}
deviceHeight={deviceHeight}
/>
</SafeAreaView>
);
}
}

6
app/screens/edit_post/edit_post.js
View file

@ -15,6 +15,7 @@ import StatusBar from 'app/components/status_bar';
import TextInputWithLocalizedPlaceholder from 'app/components/text_input_with_localized_placeholder';
import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme';
import {t} from 'app/utils/i18n';
import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
import {RequestStatus} from 'mattermost-redux/constants';
@ -32,6 +33,7 @@ export default class EditPost extends PureComponent {
editPostRequest: PropTypes.object.isRequired,
post: PropTypes.object.isRequired,
theme: PropTypes.object.isRequired,
isLandscape: PropTypes.bool.isRequired,
};
static contextTypes = {
@ -146,7 +148,7 @@ export default class EditPost extends PureComponent {
};
render() {
const {deviceHeight, deviceWidth, theme} = this.props;
const {deviceHeight, deviceWidth, theme, isLandscape} = this.props;
const {editing, message, error} = this.state;
const style = getStyleSheet(theme);
@ -178,7 +180,7 @@ export default class EditPost extends PureComponent {
<StatusBar/>
<View style={style.scrollView}>
{displayError}
<View style={[style.inputContainer, {height}]}>
<View style={[style.inputContainer, padding(isLandscape), {height}]}>
<TextInputWithLocalizedPlaceholder
ref={this.messageRef}
value={message}

3
app/screens/edit_post/index.js
View file

@ -9,7 +9,7 @@ import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
import {setButtons, dismissModal} from 'app/actions/navigation';
import {getDimensions} from 'app/selectors/device';
import {getDimensions, isLandscape} from 'app/selectors/device';
import EditPost from './edit_post';
@ -21,6 +21,7 @@ function mapStateToProps(state, ownProps) {
editPostRequest,
post: ownProps.post,
theme: getTheme(state),
isLandscape: isLandscape(state),
};
}

20
app/screens/edit_profile/edit_profile.js
View file

@ -9,7 +9,6 @@ import RNFetchBlob from 'rn-fetch-blob';
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
import {DocumentPickerUtil} from 'react-native-document-picker';
import {Navigation} from 'react-native-navigation';
import {Client4} from 'mattermost-redux/client';
import {buildFileUploadData, encodeHeaderURIStringToUTF8} from 'app/utils/file';
@ -100,6 +99,7 @@ export default class EditProfile extends PureComponent {
positionDisabled: PropTypes.bool.isRequired,
theme: PropTypes.object.isRequired,
commandType: PropTypes.string.isRequired,
isLandscape: PropTypes.bool.isRequired,
};
static contextTypes = {
@ -322,7 +322,7 @@ export default class EditProfile extends PureComponent {
renderFirstNameSettings = () => {
const {formatMessage} = this.context.intl;
const {firstNameDisabled, theme} = this.props;
const {firstNameDisabled, theme, isLandscape} = this.props;
const {firstName} = this.state;
return (
@ -337,13 +337,14 @@ export default class EditProfile extends PureComponent {
onChange={this.updateField}
theme={theme}
value={firstName}
isLandscape={isLandscape}
/>
);
};
renderLastNameSettings = () => {
const {formatMessage} = this.context.intl;
const {lastNameDisabled, theme} = this.props;
const {lastNameDisabled, theme, isLandscape} = this.props;
const {lastName} = this.state;
return (
@ -359,6 +360,7 @@ export default class EditProfile extends PureComponent {
onChange={this.updateField}
theme={theme}
value={lastName}
isLandscape={isLandscape}
/>
</View>
);
@ -366,7 +368,7 @@ export default class EditProfile extends PureComponent {
renderUsernameSettings = () => {
const {formatMessage} = this.context.intl;
const {currentUser, theme} = this.props;
const {currentUser, theme, isLandscape} = this.props;
const {username} = this.state;
const disabled = currentUser.auth_service !== '';
@ -383,13 +385,14 @@ export default class EditProfile extends PureComponent {
onChange={this.updateField}
theme={theme}
value={username}
isLandscape={isLandscape}
/>
);
};
renderEmailSettings = () => {
const {formatMessage} = this.context.intl;
const {currentUser, theme} = this.props;
const {currentUser, theme, isLandscape} = this.props;
const {email} = this.state;
let helpText;
@ -444,6 +447,7 @@ export default class EditProfile extends PureComponent {
onChange={this.updateField}
theme={theme}
value={email}
isLandscape={isLandscape}
/>
</View>
);
@ -451,7 +455,7 @@ export default class EditProfile extends PureComponent {
renderNicknameSettings = () => {
const {formatMessage} = this.context.intl;
const {nicknameDisabled, theme} = this.props;
const {nicknameDisabled, theme, isLandscape} = this.props;
const {nickname} = this.state;
return (
@ -467,13 +471,14 @@ export default class EditProfile extends PureComponent {
onChange={this.updateField}
theme={theme}
value={nickname}
isLandscape={isLandscape}
/>
);
};
renderPositionSettings = () => {
const {formatMessage} = this.context.intl;
const {positionDisabled, theme} = this.props;
const {positionDisabled, theme, isLandscape} = this.props;
const {position} = this.state;
return (
@ -489,6 +494,7 @@ export default class EditProfile extends PureComponent {
onChange={this.updateField}
theme={theme}
value={position}
isLandscape={isLandscape}
/>
);
};

1
app/screens/edit_profile/edit_profile.test.js
View file

@ -43,6 +43,7 @@ describe('edit_profile', () => {
},
commandType: 'ShowModal',
componentId: 'component-id',
isLandscape: false,
};
test('should match snapshot', async () => {

3
app/screens/edit_profile/index.js
View file

@ -7,7 +7,7 @@ import {bindActionCreators} from 'redux';
import {getConfig} from 'mattermost-redux/selectors/entities/general';
import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
import {isMinimumServerVersion} from 'mattermost-redux/utils/helpers';
import {isLandscape} from 'app/selectors/device';
import {popTopScreen, dismissModal, setButtons} from 'app/actions/navigation';
import {setProfileImageUri, removeProfileImage, updateUser} from 'app/actions/views/edit_profile';
@ -41,6 +41,7 @@ function mapStateToProps(state, ownProps) {
nicknameDisabled,
positionDisabled,
theme: getTheme(state),
isLandscape: isLandscape(state),
};
}

35
app/screens/expanded_announcement_banner/expanded_announcement_banner.js
View file

@ -5,10 +5,9 @@ import PropTypes from 'prop-types';
import React from 'react';
import {ScrollView, View} from 'react-native';
import Button from 'react-native-button';
import FormattedText from 'app/components/formatted_text';
import Markdown from 'app/components/markdown';
import SafeAreaView from 'app/components/safe_area_view';
import {getMarkdownTextStyles, getMarkdownBlockStyles} from 'app/utils/markdown';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
@ -59,21 +58,23 @@ export default class ExpandedAnnouncementBanner extends React.PureComponent {
}
return (
<View style={style.container}>
<ScrollView
style={style.scrollContainer}
contentContainerStyle={style.textContainer}
>
<Markdown
baseTextStyle={style.baseTextStyle}
blockStyles={getMarkdownBlockStyles(this.props.theme)}
onChannelLinkPress={this.handleChannelLinkPress}
textStyles={getMarkdownTextStyles(this.props.theme)}
value={this.props.bannerText}
/>
</ScrollView>
{dismissButton}
</View>
<SafeAreaView useLandscapeMargin={true}>
<View style={style.container}>
<ScrollView
style={style.scrollContainer}
contentContainerStyle={style.textContainer}
>
<Markdown
baseTextStyle={style.baseTextStyle}
blockStyles={getMarkdownBlockStyles(this.props.theme)}
onChannelLinkPress={this.handleChannelLinkPress}
textStyles={getMarkdownTextStyles(this.props.theme)}
value={this.props.bannerText}
/>
</ScrollView>
{dismissButton}
</View>
</SafeAreaView>
);
}
}

11
app/screens/flagged_posts/flagged_posts.js
View file

@ -8,7 +8,6 @@ import {
Keyboard,
FlatList,
StyleSheet,
SafeAreaView,
View,
} from 'react-native';
import {Navigation} from 'react-native-navigation';
@ -227,12 +226,10 @@ export default class FlaggedPosts extends PureComponent {
}
return (
<SafeAreaView style={style.container}>
<View style={style.container}>
<StatusBar/>
{component}
</View>
</SafeAreaView>
<View style={style.container}>
<StatusBar/>
{component}
</View>
);
}
}

3
app/screens/login/index.js
View file

@ -7,7 +7,7 @@ import {connect} from 'react-redux';
import {login} from 'mattermost-redux/actions/users';
import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
import {getConfig, getLicense} from 'mattermost-redux/selectors/entities/general';
import {isLandscape} from 'app/selectors/device';
import {resetToChannel, goToScreen} from 'app/actions/navigation';
import LoginActions from 'app/actions/views/login';
@ -23,6 +23,7 @@ function mapStateToProps(state) {
config,
license,
theme: getTheme(state),
isLandscape: isLandscape(state),
};
}

5
app/screens/login/login.js
View file

@ -20,7 +20,7 @@ import Button from 'react-native-button';
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
import {RequestStatus} from 'mattermost-redux/constants';
import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
import ErrorText from 'app/components/error_text';
import FormattedText from 'app/components/formatted_text';
import StatusBar from 'app/components/status_bar';
@ -52,6 +52,7 @@ export default class Login extends PureComponent {
loginId: PropTypes.string.isRequired,
password: PropTypes.string.isRequired,
loginRequest: PropTypes.object.isRequired,
isLandscape: PropTypes.bool.isRequired,
};
static contextTypes = {
@ -357,7 +358,7 @@ export default class Login extends PureComponent {
<KeyboardAwareScrollView
ref={this.scrollRef}
style={style.container}
contentContainerStyle={style.innerContainer}
contentContainerStyle={[style.innerContainer, padding(this.props.isLandscape)]}
keyboardShouldPersistTaps='handled'
enableOnAndroid={true}
>

1
app/screens/login/login.test.js
View file

@ -33,6 +33,7 @@ describe('Login', () => {
resetToChannel: jest.fn(),
goToScreen: jest.fn(),
},
isLandscape: false,
};
test('should show "I forgot my password" with only email login enabled', () => {

3
app/screens/login_options/index.js
View file

@ -8,7 +8,7 @@ import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
import {getConfig, getLicense} from 'mattermost-redux/selectors/entities/general';
import {goToScreen} from 'app/actions/navigation';
import {isLandscape} from 'app/selectors/device';
import LoginOptions from './login_options';
function mapStateToProps(state) {
@ -18,6 +18,7 @@ function mapStateToProps(state) {
config,
license,
theme: getTheme(state),
isLandscape: isLandscape(state),
};
}

4
app/screens/login_options/login_options.js
View file

@ -22,6 +22,7 @@ import {preventDoubleTap} from 'app/utils/tap';
import LocalConfig from 'assets/config';
import gitlab from 'assets/images/gitlab.png';
import logo from 'assets/images/logo.png';
import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
export default class LoginOptions extends PureComponent {
static propTypes = {
@ -30,6 +31,7 @@ export default class LoginOptions extends PureComponent {
}).isRequired,
config: PropTypes.object.isRequired,
license: PropTypes.object.isRequired,
isLandscape: PropTypes.bool.isRequired,
};
static contextTypes = {
@ -253,7 +255,7 @@ export default class LoginOptions extends PureComponent {
return (
<ScrollView
style={style.container}
contentContainerStyle={style.innerContainer}
contentContainerStyle={[style.innerContainer, padding(this.props.isLandscape)]}
ref={this.scrollRef}
>
<StatusBar/>

3
app/screens/long_post/index.js
View file

@ -11,7 +11,7 @@ import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
import {dismissModal, goToScreen} from 'app/actions/navigation';
import {loadThreadIfNecessary} from 'app/actions/views/channel';
import {isLandscape} from 'app/selectors/device';
import LongPost from './long_post';
function makeMapStateToProps() {
@ -29,6 +29,7 @@ function makeMapStateToProps() {
inThreadView: Boolean(state.entities.posts.selectedPostId),
fileIds: post ? post.file_ids : false,
theme: getTheme(state),
isLandscape: isLandscape(state),
};
};
}

5
app/screens/long_post/long_post.js
View file

@ -21,6 +21,7 @@ import SafeAreaView from 'app/components/safe_area_view';
import {emptyFunction} from 'app/utils/general';
import {preventDoubleTap} from 'app/utils/tap';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
import {marginHorizontal as margin} from 'app/components/safe_area_view/iphone_x_spacing';
Animatable.initializeRegistryWithDefinitions({
growOut: {
@ -57,6 +58,7 @@ export default class LongPost extends PureComponent {
onPermalinkPress: PropTypes.func,
postId: PropTypes.string.isRequired,
theme: PropTypes.object.isRequired,
isLandscape: PropTypes.bool.isRequired,
};
static defaultProps = {
@ -163,6 +165,7 @@ export default class LongPost extends PureComponent {
onPermalinkPress,
postId,
theme,
isLandscape,
} = this.props;
const style = getStyleSheet(theme);
@ -183,7 +186,7 @@ export default class LongPost extends PureComponent {
footerColor='transparent'
forceTop={44}
>
<View style={style.container}>
<View style={[style.container, margin(isLandscape)]}>
<Animatable.View
ref='view'
animation='zoomIn'

10
app/screens/more_channels/__snapshots__/more_channels.test.js.snap
View file

@ -6,9 +6,12 @@ exports[`MoreChannels should match snapshot 1`] = `
<React.Fragment>
<View
style={
Object {
"marginVertical": 5,
}
Array [
Object {
"marginVertical": 5,
},
null,
]
}
>
<SearchBarIos
@ -50,6 +53,7 @@ exports[`MoreChannels should match snapshot 1`] = `
]
}
extraData={true}
isLandscape={false}
listType="flat"
loading={true}
loadingComponent={

3
app/screens/more_channels/index.js
View file

@ -4,7 +4,7 @@
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {createSelector} from 'reselect';
import {isLandscape} from 'app/selectors/device';
import {General} from 'mattermost-redux/constants';
import {getChannels, joinChannel, searchChannels} from 'mattermost-redux/actions/channels';
import {getChannelsInCurrentTeam, getMyChannelMemberships} from 'mattermost-redux/selectors/entities/channels';
@ -43,6 +43,7 @@ function mapStateToProps(state) {
currentTeamId,
channels,
theme: getTheme(state),
isLandscape: isLandscape(state),
};
}

7
app/screens/more_channels/more_channels.js
View file

@ -10,7 +10,7 @@ import {Navigation} from 'react-native-navigation';
import {debounce} from 'mattermost-redux/actions/helpers';
import {General} from 'mattermost-redux/constants';
import EventEmitter from 'mattermost-redux/utils/event_emitter';
import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
import CustomList from 'app/components/custom_list';
import ChannelListRow from 'app/components/custom_list/channel_list_row';
import FormattedText from 'app/components/formatted_text';
@ -40,6 +40,7 @@ export default class MoreChannels extends PureComponent {
currentUserId: PropTypes.string.isRequired,
currentTeamId: PropTypes.string.isRequired,
theme: PropTypes.object.isRequired,
isLandscape: PropTypes.bool.isRequired,
};
static defaultProps = {
@ -320,7 +321,7 @@ export default class MoreChannels extends PureComponent {
render() {
const {formatMessage} = this.context.intl;
const {theme} = this.props;
const {theme, isLandscape} = this.props;
const {adding, channels, loading, term} = this.state;
const more = term ? () => true : this.getChannels;
const style = getStyleFromTheme(theme);
@ -342,7 +343,7 @@ export default class MoreChannels extends PureComponent {
content = (
<React.Fragment>
<View style={style.searchBar}>
<View style={[style.searchBar, padding(isLandscape)]}>
<SearchBar
ref='search_bar'
placeholder={formatMessage({id: 'search_bar.search', defaultMessage: 'Search'})}

1
app/screens/more_channels/more_channels.test.js
View file

@ -31,6 +31,7 @@ describe('MoreChannels', () => {
currentTeamId: 'current_team_id',
theme: Preferences.THEMES.default,
componentId: 'component-id',
isLandscape: false,
};
test('should match snapshot', () => {

3
app/screens/more_dms/index.js
View file

@ -6,7 +6,7 @@ import {connect} from 'react-redux';
import {setChannelDisplayName} from 'app/actions/views/channel';
import {makeDirectChannel, makeGroupChannel} from 'app/actions/views/more_dms';
import {isLandscape} from 'app/selectors/device';
import {getProfiles, getProfilesInTeam, searchProfiles} from 'mattermost-redux/actions/users';
import {General} from 'mattermost-redux/constants';
import {getConfig} from 'mattermost-redux/selectors/entities/general';
@ -30,6 +30,7 @@ function mapStateToProps(state) {
currentDisplayName: state.views.channel.displayName,
currentUserId: getCurrentUserId(state),
currentTeamId: getCurrentTeamId(state),
isLandscape: isLandscape(state),
};
}

6
app/screens/more_dms/more_dms.js
View file

@ -12,6 +12,7 @@ import {General} from 'mattermost-redux/constants';
import EventEmitter from 'mattermost-redux/utils/event_emitter';
import {getGroupDisplayNameFromUserIds} from 'mattermost-redux/utils/channel_utils';
import {displayUsername, filterProfilesMatchingTerm} from 'mattermost-redux/utils/user_utils';
import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
import CustomList, {FLATLIST, SECTIONLIST} from 'app/components/custom_list';
import UserListRow from 'app/components/custom_list/user_list_row';
@ -50,6 +51,7 @@ export default class MoreDirectMessages extends PureComponent {
restrictDirectMessage: PropTypes.bool.isRequired,
teammateNameDisplay: PropTypes.string,
theme: PropTypes.object.isRequired,
isLandscape: PropTypes.bool.isRequired,
};
static contextTypes = {
@ -394,7 +396,7 @@ export default class MoreDirectMessages extends PureComponent {
render() {
const {formatMessage} = this.context.intl;
const {currentUserId, theme} = this.props;
const {currentUserId, theme, isLandscape} = this.props;
const {
loading,
profiles,
@ -452,7 +454,7 @@ export default class MoreDirectMessages extends PureComponent {
return (
<KeyboardLayout>
<StatusBar/>
<View style={style.searchBar}>
<View style={[style.searchBar, padding(isLandscape)]}>
<SearchBar
ref='search_bar'
placeholder={formatMessage({id: 'search_bar.search', defaultMessage: 'Search'})}

13
app/screens/options_modal/__snapshots__/option_modal_list.test.js.snap
View file

@ -146,11 +146,14 @@ exports[`OptionModalList should match snapshot for Android 1`] = `
exports[`OptionModalList should match snapshot for iOS 1`] = `
<View
style={
Object {
"alignItems": "center",
"flex": 1,
"justifyContent": "flex-end",
}
Array [
Object {
"alignItems": "center",
"flex": 1,
"justifyContent": "flex-end",
},
null,
]
}
>
<View

3
app/screens/options_modal/index.js
View file

@ -6,13 +6,14 @@ import {connect} from 'react-redux';
import {dismissModal} from 'app/actions/navigation';
import {getDimensions} from 'app/selectors/device';
import {getDimensions, isLandscape} from 'app/selectors/device';
import OptionsModal from './options_modal';
function mapStateToProps(state) {
return {
...getDimensions(state),
isLandscape: isLandscape(state),
};
}

1
app/screens/options_modal/option_modal_list.test.js
View file

@ -25,6 +25,7 @@ describe('OptionModalList', () => {
}],
onCancelPress: jest.fn(),
title: 'test',
isLandscape: false,
};
test('should match snapshot for iOS', async () => {

3
app/screens/options_modal/options_modal.js
View file

@ -34,6 +34,7 @@ export default class OptionsModal extends PureComponent {
PropTypes.string,
PropTypes.object,
]),
isLandscape: PropTypes.bool.isRequired,
};
static defaultProps = {
@ -86,6 +87,7 @@ export default class OptionsModal extends PureComponent {
const {
items,
title,
isLandscape,
} = this.props;
return (
@ -97,6 +99,7 @@ export default class OptionsModal extends PureComponent {
onCancelPress={this.handleCancel}
onItemPress={this.onItemPress}
title={title}
isLandscape={isLandscape}
/>
</AnimatedView>
</View>

Some files were not shown because too many files have changed in this diff Show more