SW/mattermost-mobile
2
0
Fork 0
forked from Ivasoft/mattermost-mobile
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MM-18752 Rename constant to handle iPhone X and new iPhone 11 insets (#3300)

Browse Source
This commit is contained in:
Mattermost Build
2019-09-23 22:19:26 +02:00
committed by Elias Nahum
parent 478bf42b62
commit cf2262dbc1
19 changed files with 35 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/autocomplete/autocomplete.js
View File

@@ -149,7 +149,7 @@ export default class Autocomplete extends PureComponent {
} else {
// List is expanding downwards, likely from the search box
let offset = Platform.select({ios: 65, android: 75});
if (DeviceTypes.IS_IPHONE_X) {
if (DeviceTypes.IS_IPHONE_WITH_INSETS) {
offset = 90;
}

6
app/components/client_upgrade_listener/client_upgrade_listener.js
View File

@@ -71,7 +71,7 @@ export default class ClientUpgradeListener extends PureComponent {
if (versionMismatch && (forceUpgrade || Date.now() - lastUpgradeCheck > UPDATE_TIMEOUT)) {
this.checkUpgrade(minVersion, latestVersion, nextProps.isLandscape);
} else if (this.props.isLandscape !== nextProps.isLandscape &&
isUpgradeAvailable(this.state.upgradeType) && DeviceTypes.IS_IPHONE_X) {
isUpgradeAvailable(this.state.upgradeType) && DeviceTypes.IS_IPHONE_WITH_INSETS) {
const newTop = nextProps.isLandscape ? 45 : 100;
this.setState({top: new Animated.Value(newTop)});
}
@@ -98,10 +98,10 @@ export default class ClientUpgradeListener extends PureComponent {
toggleUpgradeMessage = (show = true, isLandscape) => {
let toValue = -100;
if (show) {
if (DeviceTypes.IS_IPHONE_X && isLandscape) {
if (DeviceTypes.IS_IPHONE_WITH_INSETS && isLandscape) {
toValue = 45;
} else {
toValue = DeviceTypes.IS_IPHONE_X ? 100 : 75;
toValue = DeviceTypes.IS_IPHONE_WITH_INSETS ? 100 : 75;
}
}
Animated.timing(this.state.top, {

6
app/components/emoji_picker/emoji_picker.ios.js
View File

@@ -27,7 +27,7 @@ export default class EmojiPicker extends EmojiPickerBase {
const {emojis, filteredEmojis, searchTerm} = this.state;
const styles = getStyleSheetFromTheme(theme);
const shorten = DeviceTypes.IS_IPHONE_X && isLandscape ? 6 : 2;
const shorten = DeviceTypes.IS_IPHONE_WITH_INSETS && isLandscape ? 6 : 2;
let listComponent;
if (searchTerm) {
@@ -68,9 +68,9 @@ export default class EmojiPicker extends EmojiPickerBase {
);
}
let keyboardOffset = DeviceTypes.IS_IPHONE_X ? 50 : 30;
let keyboardOffset = DeviceTypes.IS_IPHONE_WITH_INSETS ? 50 : 30;
if (isLandscape) {
keyboardOffset = DeviceTypes.IS_IPHONE_X ? 0 : 10;
keyboardOffset = DeviceTypes.IS_IPHONE_WITH_INSETS ? 0 : 10;
}
const searchBarInput = {

2
app/components/emoji_picker/emoji_picker_base.js
View File

@@ -216,7 +216,7 @@ export default class EmojiPicker extends PureComponent {
};
getNumberOfColumns = (deviceWidth) => {
const shorten = DeviceTypes.IS_IPHONE_X && this.props.isLandscape ? 4 : 2;
const shorten = DeviceTypes.IS_IPHONE_WITH_INSETS && this.props.isLandscape ? 4 : 2;
return Math.floor(Number(((deviceWidth - (SECTION_MARGIN * shorten)) / (EMOJI_SIZE + (EMOJI_GUTTER * shorten)))));
};

6
app/components/network_indicator/network_indicator.js
View File

@@ -201,11 +201,11 @@ export default class NetworkIndicator extends PureComponent {
return ANDROID_TOP_PORTRAIT;
}
const isX = DeviceTypes.IS_IPHONE_X;
const iPhoneWithInsets = DeviceTypes.IS_IPHONE_WITH_INSETS;
if (isX && isLandscape) {
if (iPhoneWithInsets && isLandscape) {
return IOS_TOP_LANDSCAPE;
} else if (isX) {
} else if (iPhoneWithInsets) {
return IOSX_TOP_PORTRAIT;
} else if (isLandscape && !DeviceTypes.IS_TABLET) {
return IOS_TOP_LANDSCAPE;

10
app/components/safe_area_view/iphone_x_spacing/index.js
View File

@@ -4,17 +4,17 @@
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;
return DeviceTypes.IS_IPHONE_WITH_INSETS && 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;
return DeviceTypes.IS_IPHONE_WITH_INSETS && 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;
return DeviceTypes.IS_IPHONE_WITH_INSETS && 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;
};
return DeviceTypes.IS_IPHONE_WITH_INSETS && isLandscape ? {marginHorizontal: ViewTypes.IOS_HORIZONTAL_LANDSCAPE + modifier} : null;
};

8
app/components/safe_area_view/safe_area_view.ios.js
View File

@@ -38,14 +38,14 @@ export default class SafeAreaIos extends PureComponent {
super(props);
let insetBottom = 0;
if ((DeviceTypes.IS_IPHONE_X || mattermostManaged.hasSafeAreaInsets) && props.excludeFooter) {
if ((DeviceTypes.IS_IPHONE_WITH_INSETS || mattermostManaged.hasSafeAreaInsets) && props.excludeFooter) {
insetBottom = 20;
}
this.state = {
keyboard: false,
safeAreaInsets: {
top: DeviceTypes.IS_IPHONE_X ? 44 : 20,
top: DeviceTypes.IS_IPHONE_WITH_INSETS ? 44 : 20,
left: 0,
bottom: insetBottom,
right: 0,
@@ -94,7 +94,7 @@ export default class SafeAreaIos extends PureComponent {
getSafeAreaInsets = () => {
this.getStatusBarHeight();
if (DeviceTypes.IS_IPHONE_X || mattermostManaged.hasSafeAreaInsets) {
if (DeviceTypes.IS_IPHONE_WITH_INSETS || mattermostManaged.hasSafeAreaInsets) {
SafeArea.getSafeAreaInsetsForRootView().then((result) => {
const {safeAreaInsets} = result;
@@ -128,7 +128,7 @@ export default class SafeAreaIos extends PureComponent {
}
let top = safeAreaInsets.top;
if (forceTop && DeviceTypes.IS_IPHONE_X && !hideTopBar) {
if (forceTop && DeviceTypes.IS_IPHONE_WITH_INSETS && !hideTopBar) {
top = forceTop;
}

2
app/components/sidebars/main/channels_list/list/list.js
View File

@@ -390,7 +390,7 @@ export default class List extends PureComponent {
const {width, height} = Dimensions.get('window');
const landscape = width > height;
if (DeviceTypes.IS_IPHONE_X) {
if (DeviceTypes.IS_IPHONE_WITH_INSETS) {
return landscape ? 54 : 44;
}

2
app/components/sidebars/main/main_sidebar.js
View File

@@ -332,7 +332,7 @@ export default class ChannelSidebar extends Component {
return null;
}
const hasSafeAreaInsets = DeviceTypes.IS_IPHONE_X || mattermostManaged.hasSafeAreaInsets;
const hasSafeAreaInsets = DeviceTypes.IS_IPHONE_WITH_INSETS || mattermostManaged.hasSafeAreaInsets;
const multipleTeams = teamsCount > 1;
const showTeams = !searching && multipleTeams;
if (this.drawerSwiper) {

2
app/components/sidebars/main/teams_list/teams_list.js
View File

@@ -117,7 +117,7 @@ export default class TeamsList extends PureComponent {
const {width, height} = Dimensions.get('window');
const landscape = width > height;
if (DeviceTypes.IS_IPHONE_X) {
if (DeviceTypes.IS_IPHONE_WITH_INSETS) {
return landscape ? 54 : 44;
}

2
app/components/slide_up_panel/slide_up_panel.js
View File

@@ -19,7 +19,7 @@ import {makeStyleSheetFromTheme} from 'app/utils/theme';
import SlideUpPanelIndicator from './slide_up_panel_indicator';
export const BOTTOM_MARGIN = mattermostManaged.hasSafeAreaInsets ? 24 : 0;
const TOP_IOS_MARGIN = DeviceTypes.IS_IPHONE_X ? 84 : 64;
const TOP_IOS_MARGIN = DeviceTypes.IS_IPHONE_WITH_INSETS ? 84 : 64;
const TOP_ANDROID_MARGIN = 44;
const TOP_MARGIN = Platform.OS === 'ios' ? TOP_IOS_MARGIN : TOP_ANDROID_MARGIN;

2
app/components/start/empty_toolbar.js
View File

@@ -44,7 +44,7 @@ export default class EmptyToolbar extends PureComponent {
height = IOS_TOP_LANDSCAPE;
}
if (DeviceTypes.IS_IPHONE_X && isLandscape) {
if (DeviceTypes.IS_IPHONE_WITH_INSETS && isLandscape) {
padding.paddingHorizontal = 10;
}
break;

4
app/components/swiper.js
View File

@@ -180,7 +180,7 @@ export default class Swiper extends PureComponent {
const bottom = this.paginationBottom(width, height);
const drawerWidth = (width > height) ? width - ViewTypes.IOS_HORIZONTAL_LANDSCAPE : width;
let style;
if (DeviceTypes.IS_IPHONE_X && (width < height)) {
if (DeviceTypes.IS_IPHONE_WITH_INSETS && (width < height)) {
style = {
bottom,
width: drawerWidth,
@@ -235,7 +235,7 @@ export default class Swiper extends PureComponent {
}
const landscape = width > height;
if (DeviceTypes.IS_IPHONE_X) {
if (DeviceTypes.IS_IPHONE_WITH_INSETS) {
return landscape ? 14 : 34;
}

2
app/constants/device.js
View File

@@ -17,7 +17,7 @@ export default {
...deviceTypes,
DOCUMENTS_PATH: `${RNFetchBlobFS.dirs.CacheDir}/Documents`,
IMAGES_PATH: `${RNFetchBlobFS.dirs.CacheDir}/Images`,
IS_IPHONE_X: DeviceInfo.getModel().includes('iPhone X'),
IS_IPHONE_WITH_INSETS: DeviceInfo.getModel().includes('iPhone X') || DeviceInfo.getModel().includes('iPhone 11'),
IS_TABLET: DeviceInfo.isTablet(),
VIDEOS_PATH: `${RNFetchBlobFS.dirs.CacheDir}/Videos`,
PERMANENT_SIDEBAR_SETTINGS: '@PERMANENT_SIDEBAR_SETTINGS',

2
app/screens/channel/channel.ios.js
View File

@@ -39,7 +39,7 @@ export default class ChannelIOS extends ChannelBase {
const {currentChannelId} = this.props;
const channelLoaderStyle = [style.channelLoader, {height}];
if ((DeviceTypes.IS_IPHONE_X || DeviceTypes.IS_TABLET)) {
if ((DeviceTypes.IS_IPHONE_WITH_INSETS || DeviceTypes.IS_TABLET)) {
channelLoaderStyle.push(style.iOSHomeIndicator);
}

2
app/screens/channel/channel_nav_bar/channel_nav_bar.js
View File

@@ -93,7 +93,7 @@ export default class ChannelNavBar extends PureComponent {
canHaveSubtitle = false;
}
if (DeviceTypes.IS_IPHONE_X && isLandscape) {
if (DeviceTypes.IS_IPHONE_WITH_INSETS && isLandscape) {
canHaveSubtitle = false;
}
break;

4
app/screens/image_preview/image_preview.js
View File

@@ -359,7 +359,7 @@ export default class ImagePreview extends PureComponent {
const {deviceHeight, deviceWidth} = this.props;
const {height, width} = imageDimensions;
const {style, ...otherProps} = imageProps;
const statusBar = DeviceTypes.IS_IPHONE_X ? 0 : 20;
const statusBar = DeviceTypes.IS_IPHONE_WITH_INSETS ? 0 : 20;
const flattenStyle = StyleSheet.flatten(style);
const calculatedDimensions = calculateDimensions(height, width, deviceWidth, deviceHeight - statusBar);
const imageStyle = {...flattenStyle, ...calculatedDimensions};
@@ -396,7 +396,7 @@ export default class ImagePreview extends PureComponent {
renderVideoPreview = (file) => {
const {deviceHeight, deviceWidth, theme} = this.props;
const statusBar = DeviceTypes.IS_IPHONE_X ? 0 : 20;
const statusBar = DeviceTypes.IS_IPHONE_WITH_INSETS ? 0 : 20;
return (
<VideoPreview

2
app/screens/search/search.js
View File

@@ -687,7 +687,7 @@ export default class Search extends PureComponent {
return (
<SafeAreaView
excludeHeader={isLandscape && DeviceTypes.IS_IPHONE_X}
excludeHeader={isLandscape && DeviceTypes.IS_IPHONE_WITH_INSETS}
forceTop={44}
>
<KeyboardLayout>

4
package.json
View File

@@ -34,7 +34,7 @@
"react-native-calendars": "github:mattermost/react-native-calendars#4937ec5a3bf7e86f9f35fcd85eb4aa6133f45b58",
"react-native-circular-progress": "1.1.0",
"react-native-cookies": "github:joeferraro/react-native-cookies#f11374745deba9f18f7b8a9bb4b0b2573026f522",
"react-native-device-info": "github:mattermost/react-native-device-info#66d730b4f675038867ca389be7374714c2db63b2",
"react-native-device-info": "github:mattermost/react-native-device-info#a434e5378a59825b4c33c9a31bf0d8dc98a45966",
"react-native-doc-viewer": "2.7.8",
"react-native-document-picker": "2.3.0",
"react-native-exception-handler": "2.10.7",
@@ -151,4 +151,4 @@
"node_modules/(?!react-native|jail-monkey)"
]
}
}
}