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

[MM-22959] Use Compass icons (#4847)

Browse source 
* Use Compass icons

* Update ChannelInfo and AdvancedSettings

* Fix search modifiers

* Fix Autocomplete item

* Remove VectorIcon component

* Unlink react-native-vector-icons

* Revert ProgressiveImage changes

* Update Mark as Unread icon

* Apply review suggestion

* Replace extension icons

* Update video control button style

* Replace (un)flag with (un)save

* Replace (un)flag with (un)save - take 2

* Use bookmark-outline icon

Co-authored-by: Miguel Alatzar <miguel@Miguels-MacBook-Pro.local>
This commit is contained in:
Miguel Alatzar 2020-10-15 15:34:24 -07:00 committed by GitHub
parent eb0f511bb7
commit 57d60649f8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
287 changed files with 4519 additions and 2211 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
android/app/src/main/assets/fonts/AntDesign.ttf
View file

Binary file not shown.

BIN
android/app/src/main/assets/fonts/Entypo.ttf
View file

Binary file not shown.

BIN
android/app/src/main/assets/fonts/EvilIcons.ttf
View file

Binary file not shown.

BIN
android/app/src/main/assets/fonts/Feather.ttf
View file

Binary file not shown.

BIN
android/app/src/main/assets/fonts/FontAwesome.ttf
View file

Binary file not shown.

BIN
android/app/src/main/assets/fonts/FontAwesome5_Brands.ttf
View file

Binary file not shown.

BIN
android/app/src/main/assets/fonts/FontAwesome5_Regular.ttf
View file

Binary file not shown.

BIN
android/app/src/main/assets/fonts/FontAwesome5_Solid.ttf
View file

Binary file not shown.

BIN
android/app/src/main/assets/fonts/Foundation.ttf
View file

Binary file not shown.

BIN
android/app/src/main/assets/fonts/Ionicons.ttf
View file

Binary file not shown.

BIN
android/app/src/main/assets/fonts/MaterialCommunityIcons.ttf
View file

Binary file not shown.

BIN
android/app/src/main/assets/fonts/MaterialIcons.ttf
View file

Binary file not shown.

BIN
android/app/src/main/assets/fonts/Octicons.ttf
View file

Binary file not shown.

BIN
android/app/src/main/assets/fonts/SimpleLineIcons.ttf
View file

Binary file not shown.

BIN
android/app/src/main/assets/fonts/Zocial.ttf
View file

Binary file not shown.

BIN
android/app/src/main/assets/fonts/compass-icons.ttf Normal file
View file

Binary file not shown.

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

@ -54,7 +54,7 @@ exports[`AnnouncementBanner should match snapshot 1`] = `
<Icon
allowFontScaling={false}
color="#fff"
name="info"
name="info-outline"
size={16}
/>
</ForwardRef>
@ -115,7 +115,7 @@ exports[`AnnouncementBanner should match snapshot 2`] = `
<Icon
allowFontScaling={false}
color="#fff"
name="info"
name="info-outline"
size={16}
/>
</ForwardRef>

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

@ -11,11 +11,11 @@ import {
TouchableOpacity,
} 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';
import {goToScreen} from 'app/actions/navigation';
import CompassIcon from '@components/compass_icon';
import RemoveMarkdown from '@components/remove_markdown';
import {paddingHorizontal as padding} from '@components/safe_area_view/iphone_x_spacing';
import {goToScreen} from '@actions/navigation';
const {View: AnimatedView} = Animated;
@ -122,9 +122,9 @@ export default class AnnouncementBanner extends PureComponent {
>
<RemoveMarkdown value={bannerText}/>
</Text>
<MaterialIcons
<CompassIcon
color={bannerTextColor}
name='info'
name='info-outline'
size={16}
/>
</TouchableOpacity>

44
app/components/app_icon.js
View file

@ -1,44 +0,0 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import Svg, {
G,
Path,
} from 'react-native-svg';
export default class AppIcon extends PureComponent {
static propTypes = {
width: PropTypes.number.isRequired,
height: PropTypes.number.isRequired,
color: PropTypes.string.isRequired,
};
render() {
return (
<Svg
height={this.props.height}
width={this.props.width}
viewBox='0 0 500 500'
>
<G id='XMLID_1_'>
<G id='XMLID_3_'>
<Path
id='XMLID_4_'
class='st0'
d='M396.9,47.7l2.6,53.1c43,47.5,60,114.8,38.6,178.1c-32,94.4-137.4,144.1-235.4,110.9 S51.1,253.1,83,158.7C104.5,95.2,159.2,52,222.5,40.5l34.2-40.4C150-2.8,49.3,63.4,13.3,169.9C-31,300.6,39.1,442.5,169.9,486.7 s272.6-25.8,316.9-156.6C522.7,223.9,483.1,110.3,396.9,47.7z'
fill={this.props.color}
/>
</G>
<Path
id='XMLID_2_'
class='st0'
d='M335.6,204.3l-1.8-74.2l-1.5-42.7l-1-37c0,0,0.2-17.8-0.4-22c-0.1-0.9-0.4-1.6-0.7-2.2 c0-0.1-0.1-0.2-0.1-0.3c0-0.1-0.1-0.2-0.1-0.2c-0.7-1.2-1.8-2.1-3.1-2.6c-1.4-0.5-2.9-0.4-4.2,0.2c0,0-0.1,0-0.1,0 c-0.2,0.1-0.3,0.1-0.4,0.2c-0.6,0.3-1.2,0.7-1.8,1.3c-3,3-13.7,17.2-13.7,17.2l-23.2,28.8l-27.1,33l-46.5,57.8 c0,0-21.3,26.6-16.6,59.4s29.1,48.7,48,55.1c18.9,6.4,48,8.5,71.6-14.7C336.4,238.4,335.6,204.3,335.6,204.3z'
fill={this.props.color}
/>
</G>
</Svg>
);
}
}

8
app/components/at_mention/at_mention.js
View file

@ -6,13 +6,13 @@ import PropTypes from 'prop-types';
import {StyleSheet, Text} from 'react-native';
import Clipboard from '@react-native-community/clipboard';
import {intlShape} from 'react-intl';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import {displayUsername} from '@mm-redux/utils/user_utils';
import {showModal} from '@actions/navigation';
import {displayUsername} from '@mm-redux/utils/user_utils';
import CompassIcon from '@components/compass_icon';
import CustomPropTypes from '@constants/custom_prop_types';
import mattermostManaged from 'app/mattermost_managed';
import BottomSheet from '@utils/bottom_sheet';
import mattermostManaged from 'app/mattermost_managed';
export default class AtMention extends React.PureComponent {
static propTypes = {
@ -57,7 +57,7 @@ export default class AtMention extends React.PureComponent {
};
if (!this.closeButton) {
this.closeButton = await MaterialIcon.getImageSource('close', 20, theme.sidebarHeaderTextColor);
this.closeButton = await CompassIcon.getImageSource('close', 24, theme.sidebarHeaderTextColor);
}
const options = {

2
app/components/attachment_button/__snapshots__/index.test.js.snap
View file

@ -16,7 +16,7 @@ exports[`AttachmentButton should match snapshot 1`] = `
<Icon
allowFontScaling={false}
color="rgba(61,60,64,0.9)"
name="md-add"
name="plus"
size={30}
style={
Object {

16
app/components/attachment_button/index.js
View file

@ -14,12 +14,12 @@ import RNFetchBlob from 'rn-fetch-blob';
import DeviceInfo from 'react-native-device-info';
import AndroidOpenSettings from 'react-native-android-open-settings';
import Icon from 'react-native-vector-icons/Ionicons';
import DocumentPicker from 'react-native-document-picker';
import ImagePicker from 'react-native-image-picker';
import Permissions from 'react-native-permissions';
import {showModalOverCurrentContext} from '@actions/navigation';
import CompassIcon from '@components/compass_icon';
import TouchableWithFeedback from '@components/touchable_with_feedback';
import {NavigationTypes} from '@constants';
import emmProvider from '@init/emm_provider';
@ -424,7 +424,7 @@ export default class AttachmentButton extends PureComponent {
id: t('mobile.file_upload.camera_photo'),
defaultMessage: 'Take Photo',
},
icon: 'camera',
icon: 'camera-outline',
});
}
@ -435,7 +435,7 @@ export default class AttachmentButton extends PureComponent {
id: t('mobile.file_upload.camera_video'),
defaultMessage: 'Take Video',
},
icon: 'video-camera',
icon: 'video-outline',
});
}
@ -446,7 +446,7 @@ export default class AttachmentButton extends PureComponent {
id: t('mobile.file_upload.library'),
defaultMessage: 'Photo Library',
},
icon: 'photo',
icon: 'file-image-outline',
});
}
@ -457,7 +457,7 @@ export default class AttachmentButton extends PureComponent {
id: t('mobile.file_upload.video'),
defaultMessage: 'Video Library',
},
icon: 'file-video-o',
icon: 'file-video-outline',
});
}
@ -468,7 +468,7 @@ export default class AttachmentButton extends PureComponent {
id: t('mobile.file_upload.browse'),
defaultMessage: 'Browse Files',
},
icon: 'file',
icon: 'file-outline',
});
}
@ -503,11 +503,11 @@ export default class AttachmentButton extends PureComponent {
style={style.buttonContainer}
type={'opacity'}
>
<Icon
<CompassIcon
size={30}
style={style.attachIcon}
color={changeOpacity(theme.centerChannelColor, 0.9)}
name='md-add'
name='plus'
/>
</TouchableWithFeedback>
);

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

@ -7,10 +7,10 @@ import {
Text,
View,
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import TouchableWithFeedback from 'app/components/touchable_with_feedback';
import {makeStyleSheetFromTheme, changeOpacity} from 'app/utils/theme';
import CompassIcon from '@components/compass_icon';
import TouchableWithFeedback from '@components/touchable_with_feedback';
import {makeStyleSheetFromTheme, changeOpacity} from '@utils/theme';
export default class GroupMentionItem extends PureComponent {
static propTypes = {
@ -39,8 +39,8 @@ export default class GroupMentionItem extends PureComponent {
type={'opacity'}
>
<View style={style.rowPicture}>
<Icon
name='users'
<CompassIcon
name='account-group-outline'
style={style.rowIcon}
/>
</View>

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

@ -54,7 +54,7 @@ export default class AtMentionItem extends PureComponent {
name += `(${nickname})`;
}
return name;
return name.trim();
}
render() {
@ -97,6 +97,7 @@ export default class AtMentionItem extends PureComponent {
show={isGuest}
theme={theme}
/>
{Boolean(name.length) &&
<Text
style={style.rowFullname}
numberOfLines={1}
@ -108,9 +109,10 @@ export default class AtMentionItem extends PureComponent {
defaultMessage='(you)'
/>}
</Text>
}
<Text
numberOfLines={1}
style={style.rowUsername}
numberOfLines={1}
>
{` @${username}`}
</Text>
@ -140,6 +142,7 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
rowFullname: {
fontSize: 15,
color: theme.centerChannelColor,
paddingLeft: 4,
},
rowUsername: {
color: theme.centerChannelColor,

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

@ -7,13 +7,13 @@ import {
Text,
View,
} from 'react-native';
import VectorIcon from 'app/components/vector_icon.js';
import {General} from '@mm-redux/constants';
import {BotTag, GuestTag} from 'app/components/tag';
import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
import TouchableWithFeedback from 'app/components/touchable_with_feedback';
import {makeStyleSheetFromTheme, changeOpacity} from 'app/utils/theme';
import CompassIcon from '@components/compass_icon';
import {BotTag, GuestTag} from '@components/tag';
import {paddingHorizontal as padding} from '@components/safe_area_view/iphone_x_spacing';
import TouchableWithFeedback from '@components/touchable_with_feedback';
import {makeStyleSheetFromTheme, changeOpacity} from '@utils/theme';
export default class ChannelMentionItem extends PureComponent {
static propTypes = {
@ -50,10 +50,10 @@ export default class ChannelMentionItem extends PureComponent {
} = this.props;
const style = getStyleFromTheme(theme);
let iconName = 'public';
let iconName = 'globe';
let component;
if (type === General.PRIVATE_CHANNEL) {
iconName = 'private';
iconName = 'lock';
}
if (type === General.DM_CHANNEL || type === General.GM_CHANNEL) {
@ -89,9 +89,8 @@ export default class ChannelMentionItem extends PureComponent {
type={'native'}
>
<View style={style.row}>
<VectorIcon
<CompassIcon
name={iconName}
type={'mattermost'}
style={style.icon}
/>
<Text style={style.rowDisplayName}>{displayName}</Text>

12
app/components/autocomplete/special_mention_item.js
View file

@ -7,11 +7,11 @@ import {
Text,
View,
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import FormattedText from 'app/components/formatted_text';
import TouchableWithFeedback from 'app/components/touchable_with_feedback';
import {makeStyleSheetFromTheme, changeOpacity} from 'app/utils/theme';
import CompassIcon from '@components/compass_icon';
import FormattedText from '@components/formatted_text';
import TouchableWithFeedback from '@components/touchable_with_feedback';
import {makeStyleSheetFromTheme, changeOpacity} from '@utils/theme';
export default class SpecialMentionItem extends PureComponent {
static propTypes = {
@ -47,8 +47,8 @@ export default class SpecialMentionItem extends PureComponent {
>
<View style={style.row}>
<View style={style.rowPicture}>
<Icon
name='users'
<CompassIcon
name='account-group-outline'
style={style.rowIcon}
/>
</View>

18
app/components/autocomplete_selector/autocomplete_selector.js
View file

@ -5,17 +5,17 @@ import React, {PureComponent} from 'react';
import {Text, View} from 'react-native';
import PropTypes from 'prop-types';
import {intlShape} from 'react-intl';
import Icon from 'react-native-vector-icons/FontAwesome';
import {displayUsername} from '@mm-redux/utils/user_utils';
import FormattedText from 'app/components/formatted_text';
import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
import TouchableWithFeedback from 'app/components/touchable_with_feedback';
import {preventDoubleTap} from 'app/utils/tap';
import {makeStyleSheetFromTheme, changeOpacity} from 'app/utils/theme';
import {ViewTypes} from 'app/constants';
import {goToScreen} from 'app/actions/navigation';
import CompassIcon from '@components/compass_icon';
import FormattedText from '@components/formatted_text';
import {paddingHorizontal as padding} from '@components/safe_area_view/iphone_x_spacing';
import TouchableWithFeedback from '@components/touchable_with_feedback';
import {preventDoubleTap} from '@utils/tap';
import {makeStyleSheetFromTheme, changeOpacity} from '@utils/theme';
import {ViewTypes} from '@constants';
import {goToScreen} from '@actions/navigation';
export default class AutocompleteSelector extends PureComponent {
static propTypes = {
@ -202,7 +202,7 @@ export default class AutocompleteSelector extends PureComponent {
>
{text}
</Text>
<Icon
<CompassIcon
name='chevron-down'
color={changeOpacity(theme.centerChannelColor, 0.5)}
style={[style.icon, padding(isLandscape)]}

54
app/components/channel_icon.js
View file

@ -10,9 +10,8 @@ import {
import {General} from '@mm-redux/constants';
import Icon from 'app/components/vector_icon';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
import CompassIcon from '@components/compass_icon';
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
export default class ChannelIcon extends React.PureComponent {
static propTypes = {
@ -82,42 +81,37 @@ export default class ChannelIcon extends React.PureComponent {
let icon;
if (isArchived) {
icon = (
<Icon
name='archive'
<CompassIcon
name='archive-outline'
style={[style.icon, unreadIcon, activeIcon, {fontSize: size}]}
type='mattermost'
/>
);
} else if (isBot) {
icon = (
<Icon
name='bot'
style={[style.icon, unreadIcon, activeIcon, {fontSize: (size - 1), left: -1.5, top: -1}]}
type='mattermost'
<CompassIcon
name='robot-happy'
style={[style.icon, unreadIcon, activeIcon, {fontSize: size, left: -1.5, top: -1}]}
/>
);
} else if (hasDraft) {
icon = (
<Icon
name='draft'
<CompassIcon
name='pencil-outline'
style={[style.icon, unreadIcon, activeIcon, {fontSize: size}]}
type='mattermost'
/>
);
} else if (type === General.OPEN_CHANNEL) {
icon = (
<Icon
name='public'
<CompassIcon
name='globe'
style={[style.icon, unreadIcon, activeIcon, {fontSize: size}]}
type='mattermost'
/>
);
} else if (type === General.PRIVATE_CHANNEL) {
icon = (
<Icon
name='private'
<CompassIcon
name='lock-outline'
style={[style.icon, unreadIcon, activeIcon, {fontSize: size, left: 0.5}]}
type='mattermost'
/>
);
} else if (type === General.GM_CHANNEL) {
@ -132,37 +126,33 @@ export default class ChannelIcon extends React.PureComponent {
switch (status) {
case General.AWAY:
icon = (
<Icon
name='away-avatar'
<CompassIcon
name='clock'
style={[style.icon, unreadIcon, activeIcon, {fontSize: size, color: theme.awayIndicator}]}
type='mattermost'
/>
);
break;
case General.DND:
icon = (
<Icon
name='dnd-avatar'
<CompassIcon
name='minus-circle'
style={[style.icon, unreadIcon, activeIcon, {fontSize: size, color: theme.dndIndicator}]}
type='mattermost'
/>
);
break;
case General.ONLINE:
icon = (
<Icon
name='online-avatar'
<CompassIcon
name='check-circle'
style={[style.icon, unreadIcon, activeIcon, {fontSize: size, color: theme.onlineIndicator}]}
type='mattermost'
/>
);
break;
default:
icon = (
<Icon
name='offline-avatar'
<CompassIcon
name='circle-outline'
style={[style.icon, unreadIcon, activeIcon, {fontSize: size, color: offlineColor}]}
type='mattermost'
/>
);
break;
@ -180,7 +170,7 @@ export default class ChannelIcon extends React.PureComponent {
const getStyleSheet = makeStyleSheetFromTheme((theme) => {
return {
container: {
marginRight: 12,
marginRight: 8,
alignItems: 'center',
},
icon: {

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

@ -8,20 +8,20 @@ import {
View,
} from 'react-native';
import {injectIntl, intlShape} from 'react-intl';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import {displayUsername} from '@mm-redux/utils/user_utils';
import {General} from '@mm-redux/constants';
import {showModal} from 'app/actions/navigation';
import ProfilePicture from 'app/components/profile_picture';
import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
import {BotTag, GuestTag} from 'app/components/tag';
import TouchableWithFeedback from 'app/components/touchable_with_feedback';
import {preventDoubleTap} from 'app/utils/tap';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
import {t} from 'app/utils/i18n';
import {isGuest} from 'app/utils/users';
import {showModal} from '@actions/navigation';
import CompassIcon from '@components/compass_icon';
import ProfilePicture from '@components/profile_picture';
import {paddingHorizontal as padding} from '@components/safe_area_view/iphone_x_spacing';
import {BotTag, GuestTag} from '@components/tag';
import TouchableWithFeedback from '@components/touchable_with_feedback';
import {preventDoubleTap} from '@utils/tap';
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
import {t} from '@utils/i18n';
import {isGuest} from '@utils/users';
class ChannelIntro extends PureComponent {
static propTypes = {
@ -47,7 +47,7 @@ class ChannelIntro extends PureComponent {
};
if (!this.closeButton) {
this.closeButton = await MaterialIcon.getImageSource('close', 20, theme.sidebarHeaderTextColor);
this.closeButton = await CompassIcon.getImageSource('close', 24, theme.sidebarHeaderTextColor);
}
const options = {
@ -91,6 +91,7 @@ class ChannelIntro extends PureComponent {
<ProfilePicture
userId={member.id}
size={64}
iconSize={48}
statusBorderWidth={2}
statusSize={25}
/>

29
app/components/checkmark.js
View file

@ -1,29 +0,0 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import Svg, {Path} from 'react-native-svg';
export default class CheckMark extends PureComponent {
static propTypes = {
width: PropTypes.number.isRequired,
height: PropTypes.number.isRequired,
color: PropTypes.string.isRequired,
};
render() {
return (
<Svg
width={this.props.width}
height={this.props.height}
viewBox='0 0 12 12'
>
<Path
d='M11.667 1.756l-0.775-0.624c-0.382-0.307-0.604-0.304-0.932 0.101l-5.636 6.955 -2.623-2.179c-0.362-0.304-0.588-0.288-0.886 0.084l-0.598 0.779c-0.304 0.382-0.265 0.599 0.094 0.899l3.738 3.092c0.385 0.323 0.602 0.291 0.899-0.071l6.817-8.104c0.32-0.385 0.3-0.615-0.098-0.932Z'
fill={this.props.color}
/>
</Svg>
);
}
}

14
app/components/client_upgrade_listener/client_upgrade_listener.js
View file

@ -11,13 +11,13 @@ import {
View,
} from 'react-native';
import {intlShape} from 'react-intl';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import FormattedText from 'app/components/formatted_text';
import {DeviceTypes} from 'app/constants';
import {checkUpgradeType, isUpgradeAvailable} from 'app/utils/client_upgrade';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
import {showModal, dismissModal} from 'app/actions/navigation';
import CompassIcon from '@components/compass_icon';
import FormattedText from '@components/formatted_text';
import {DeviceTypes} from '@constants';
import {checkUpgradeType, isUpgradeAvailable} from '@utils/client_upgrade';
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
import {showModal, dismissModal} from '@actions/navigation';
const {View: AnimatedView} = Animated;
@ -46,7 +46,7 @@ export default class ClientUpgradeListener extends PureComponent {
constructor(props) {
super(props);
MaterialIcon.getImageSource('close', 20, this.props.theme.sidebarHeaderTextColor).then((source) => {
CompassIcon.getImageSource('close', 24, this.props.theme.sidebarHeaderTextColor).then((source) => {
this.closeButton = source;
});

7
app/components/compass_icon/index.js Normal file
View file

@ -0,0 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import {createIconSetFromFontello} from 'react-native-vector-icons';
import fontelloConfig from '@assets/compass-icons.json';
export default createIconSetFromFontello(fontelloConfig, 'compass-icons', 'compass-icons.ttf');

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

@ -7,10 +7,10 @@ import {
Text,
View,
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import {makeStyleSheetFromTheme, changeOpacity} from 'app/utils/theme';
import CustomListRow from 'app/components/custom_list/custom_list_row';
import CompassIcon from '@components/compass_icon';
import CustomListRow from '@components/custom_list/custom_list_row';
import {makeStyleSheetFromTheme, changeOpacity} from '@utils/theme';
export default class ChannelListRow extends React.PureComponent {
static propTypes = {
@ -53,8 +53,8 @@ export default class ChannelListRow extends React.PureComponent {
>
<View style={style.container}>
<View style={style.titleContainer}>
<Icon
name={this.props.isArchived ? 'archive' : 'globe'}
<CompassIcon
name={this.props.isArchived ? 'archive-outline' : 'globe'}
style={style.icon}
/>
<Text style={style.displayName}>

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

@ -7,10 +7,11 @@ import {
StyleSheet,
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';
import CompassIcon from '@components/compass_icon';
import {paddingLeft as padding} from '@components/safe_area_view/iphone_x_spacing';
import ConditionalTouchable from '@components/conditional_touchable';
import CustomPropTypes from '@constants/custom_prop_types';
export default class CustomListRow extends React.PureComponent {
static propTypes = {
@ -40,9 +41,9 @@ export default class CustomListRow extends React.PureComponent {
<View style={style.selectorContainer}>
<View style={[style.selector, (this.props.selected && style.selectorFilled), (!this.props.enabled && style.selectorDisabled)]}>
{this.props.selected &&
<Icon
<CompassIcon
name='check'
size={16}
size={24}
color='#fff'
/>
}
@ -92,7 +93,7 @@ const style = StyleSheet.create({
backgroundColor: '#888',
},
selectorFilled: {
backgroundColor: '#378FD2',
backgroundColor: '#166DE0',
borderWidth: 0,
},
});

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

@ -27,6 +27,7 @@ exports[`UserListRow should match snapshot 1`] = `
}
>
<Connect(ProfilePicture)
iconSize={24}
size={32}
userId="21345"
/>
@ -159,6 +160,7 @@ exports[`UserListRow should match snapshot for currentUser with (you) populated
}
>
<Connect(ProfilePicture)
iconSize={24}
size={32}
userId="21345"
/>
@ -289,6 +291,7 @@ exports[`UserListRow should match snapshot for deactivated user 1`] = `
}
>
<Connect(ProfilePicture)
iconSize={24}
size={32}
userId="21345"
/>
@ -432,6 +435,7 @@ exports[`UserListRow should match snapshot for guest user 1`] = `
}
>
<Connect(ProfilePicture)
iconSize={24}
size={32}
userId="21345"
/>

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

@ -78,6 +78,7 @@ export default class UserListRow extends React.PureComponent {
<ProfilePicture
userId={id}
size={32}
iconSize={24}
/>
</View>
<View style={style.textContainer}>

15
app/components/deleted_post.js
View file

@ -4,10 +4,11 @@
import React, {PureComponent} from 'react';
import {View} from 'react-native';
import PropTypes from 'prop-types';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
import FormattedText from 'app/components/formatted_text';
import AppIcon from 'app/components/app_icon';
import {ViewTypes} from 'app/constants';
import CompassIcon from '@components/compass_icon';
import FormattedText from '@components/formatted_text';
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
import {ViewTypes} from '@constants';
class DeletedPost extends PureComponent {
static propTypes = {
@ -20,10 +21,10 @@ class DeletedPost extends PureComponent {
return (
<View style={style.main}>
<View style={style.iconContainer}>
<AppIcon
<CompassIcon
name='mattermost'
color={theme.centerChannelColor}
height={ViewTypes.PROFILE_PICTURE_SIZE}
width={ViewTypes.PROFILE_PICTURE_SIZE}
size={ViewTypes.PROFILE_PICTURE_SIZE}
/>
</View>
<View style={style.textContainer}>

36
app/components/emoji_picker/__snapshots__/emoji_picker.test.js.snap
View file

@ -2098,7 +2098,7 @@ exports[`components/emoji_picker/emoji_picker.ios should match snapshot 1`] = `
},
],
"defaultMessage": "PEOPLE",
"icon": "smile-o",
"icon": "emoticon-happy-outline",
"id": "mobile.emoji_picker.people",
"key": "people",
},
@ -3182,7 +3182,7 @@ exports[`components/emoji_picker/emoji_picker.ios should match snapshot 1`] = `
},
],
"defaultMessage": "NATURE",
"icon": "leaf",
"icon": "leaf-outline",
"id": "mobile.emoji_picker.nature",
"key": "nature",
},
@ -3778,7 +3778,7 @@ exports[`components/emoji_picker/emoji_picker.ios should match snapshot 1`] = `
},
],
"defaultMessage": "FOODS",
"icon": "cutlery",
"icon": "food-apple",
"id": "mobile.emoji_picker.foods",
"key": "foods",
},
@ -4335,7 +4335,7 @@ exports[`components/emoji_picker/emoji_picker.ios should match snapshot 1`] = `
},
],
"defaultMessage": "ACTIVITY",
"icon": "futbol-o",
"icon": "basketball",
"id": "mobile.emoji_picker.activity",
"key": "activity",
},
@ -5144,7 +5144,7 @@ exports[`components/emoji_picker/emoji_picker.ios should match snapshot 1`] = `
},
],
"defaultMessage": "PLACES",
"icon": "plane",
"icon": "airplane-variant",
"id": "mobile.emoji_picker.places",
"key": "places",
},
@ -6323,7 +6323,7 @@ exports[`components/emoji_picker/emoji_picker.ios should match snapshot 1`] = `
},
],
"defaultMessage": "OBJECTS",
"icon": "lightbulb-o",
"icon": "lightbulb-outline",
"id": "mobile.emoji_picker.objects",
"key": "objects",
},
@ -8155,7 +8155,7 @@ exports[`components/emoji_picker/emoji_picker.ios should match snapshot 1`] = `
},
],
"defaultMessage": "SYMBOLS",
"icon": "heart-o",
"icon": "heart-outline",
"id": "mobile.emoji_picker.symbols",
"key": "symbols",
},
@ -9874,7 +9874,7 @@ exports[`components/emoji_picker/emoji_picker.ios should match snapshot 1`] = `
},
],
"defaultMessage": "FLAGS",
"icon": "flag-o",
"icon": "flag-outline",
"id": "mobile.emoji_picker.flags",
"key": "flags",
},
@ -9952,7 +9952,7 @@ exports[`components/emoji_picker/emoji_picker.ios should match snapshot 1`] = `
},
],
"defaultMessage": "CUSTOM",
"icon": "at",
"icon": "emoticon-custom-outline",
"id": "mobile.emoji_picker.custom",
"key": "custom",
},
@ -10010,7 +10010,7 @@ exports[`components/emoji_picker/emoji_picker.ios should match snapshot 1`] = `
>
<Icon
allowFontScaling={false}
name="smile-o"
name="emoticon-happy-outline"
size={17}
style={
Array [
@ -10037,7 +10037,7 @@ exports[`components/emoji_picker/emoji_picker.ios should match snapshot 1`] = `
>
<Icon
allowFontScaling={false}
name="leaf"
name="leaf-outline"
size={17}
style={
Array [
@ -10062,7 +10062,7 @@ exports[`components/emoji_picker/emoji_picker.ios should match snapshot 1`] = `
>
<Icon
allowFontScaling={false}
name="cutlery"
name="food-apple"
size={17}
style={
Array [
@ -10087,7 +10087,7 @@ exports[`components/emoji_picker/emoji_picker.ios should match snapshot 1`] = `
>
<Icon
allowFontScaling={false}
name="futbol-o"
name="basketball"
size={17}
style={
Array [
@ -10112,7 +10112,7 @@ exports[`components/emoji_picker/emoji_picker.ios should match snapshot 1`] = `
>
<Icon
allowFontScaling={false}
name="plane"
name="airplane-variant"
size={17}
style={
Array [
@ -10137,7 +10137,7 @@ exports[`components/emoji_picker/emoji_picker.ios should match snapshot 1`] = `
>
<Icon
allowFontScaling={false}
name="lightbulb-o"
name="lightbulb-outline"
size={17}
style={
Array [
@ -10162,7 +10162,7 @@ exports[`components/emoji_picker/emoji_picker.ios should match snapshot 1`] = `
>
<Icon
allowFontScaling={false}
name="heart-o"
name="heart-outline"
size={17}
style={
Array [
@ -10187,7 +10187,7 @@ exports[`components/emoji_picker/emoji_picker.ios should match snapshot 1`] = `
>
<Icon
allowFontScaling={false}
name="flag-o"
name="flag-outline"
size={17}
style={
Array [
@ -10212,7 +10212,7 @@ exports[`components/emoji_picker/emoji_picker.ios should match snapshot 1`] = `
>
<Icon
allowFontScaling={false}
name="at"
name="emoticon-custom-outline"
size={17}
style={
Array [

25
app/components/emoji_picker/emoji_picker_base.js
View file

@ -13,21 +13,20 @@ import {
TouchableOpacity,
View,
} from 'react-native';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import Octicons from 'react-native-vector-icons/Octicons';
import sectionListGetItemLayout from 'react-native-section-list-get-item-layout';
import Emoji from 'app/components/emoji';
import FormattedText from 'app/components/formatted_text';
import {DeviceTypes} from 'app/constants';
import {emptyFunction} from 'app/utils/general';
import CompassIcon from '@components/compass_icon';
import Emoji from '@components/emoji';
import FormattedText from '@components/formatted_text';
import {paddingHorizontal as padding} from '@components/safe_area_view/iphone_x_spacing';
import {DeviceTypes} from '@constants';
import {emptyFunction} from '@utils/general';
import {
makeStyleSheetFromTheme,
changeOpacity,
} from 'app/utils/theme';
import {compareEmojis} from 'app/utils/emoji_utils';
import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
} from '@utils/theme';
import {compareEmojis} from '@utils/emoji_utils';
import EmojiPickerRow from './emoji_picker_row';
const EMOJI_SIZE = 30;
@ -431,7 +430,7 @@ export default class EmojiPicker extends PureComponent {
onPress={onPress}
style={styles.sectionIconContainer}
>
<FontAwesomeIcon
<CompassIcon
name={section.icon}
size={17}
style={[styles.sectionIcon, (index === this.state.currentSectionIndex && styles.sectionIconHighlight)]}
@ -475,9 +474,9 @@ export default class EmojiPicker extends PureComponent {
<View style={[styles.flex, styles.flexCenter]}>
<View style={styles.flexCenter}>
<View style={styles.notFoundIcon}>
<Octicons
name='search'
size={60}
<CompassIcon
name='magnify'
size={72}
color={theme.buttonBg}
/>
</View>

4
app/components/error_list/error_list.js
View file

@ -9,10 +9,10 @@ import {
View,
TouchableOpacity,
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import Config from '@assets/config.json';
import FormattedText from '@components/formatted_text';
import CompassIcon from '@components/compass_icon';
import GeneralError from './general_error';
@ -98,7 +98,7 @@ export default class ErrorList extends PureComponent {
onPress={() => this.props.actions.clearErrors()}
>
<View style={style.closeButton}>
<Icon
<CompassIcon
name='close'
size={10}
color='#fff'

5
app/components/error_list/general_error.js
View file

@ -9,7 +9,8 @@ import {
Text,
TouchableOpacity,
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import CompassIcon from '@components/compass_icon';
const style = StyleSheet.create({
buttonContainer: {
@ -54,7 +55,7 @@ function GeneralError(props) {
style={style.buttonContainer}
onPress={dismiss}
>
<Icon
<CompassIcon
name='close'
size={20}
color='#fff'

14
app/components/file_attachment_list/__snapshots__/file_attachment.test.js.snap
View file

@ -18,8 +18,10 @@ exports[`FileAttachment should match snapshot 1`] = `
<View
style={
Object {
"marginHorizontal": 20,
"marginVertical": 10,
"marginBottom": 8.2,
"marginLeft": 8,
"marginRight": 6,
"marginTop": 7.8,
}
}
>
@ -28,14 +30,16 @@ exports[`FileAttachment should match snapshot 1`] = `
type="opacity"
>
<FileAttachmentIcon
defaultImage={false}
failed={false}
file={
Object {
"mime_type": "image/png",
}
}
iconHeight={48}
iconWidth={36}
iconSize={48}
onCaptureRef={[Function]}
smallImage={false}
theme={
Object {
"awayIndicator": "#ffbc42",
@ -65,8 +69,6 @@ exports[`FileAttachment should match snapshot 1`] = `
"type": "Mattermost",
}
}
wrapperHeight={48}
wrapperWidth={36}
/>
</TouchableWithFeedbackIOS>
</View>

6
app/components/file_attachment_list/file_attachment.js
View file

@ -246,8 +246,10 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
borderRadius: 5,
},
iconWrapper: {
marginHorizontal: 20,
marginVertical: 10,
marginTop: 7.8,
marginRight: 6,
marginBottom: 8.2,
marginLeft: 8,
},
circularProgress: {
width: '100%',

19
app/components/file_attachment_list/file_attachment_document/file_attachment_document.js
View file

@ -26,8 +26,6 @@ import mattermostBucket from 'app/mattermost_bucket';
import {changeOpacity} from 'app/utils/theme';
import {goToScreen} from 'app/actions/navigation';
import {ATTACHMENT_ICON_HEIGHT, ATTACHMENT_ICON_WIDTH} from 'app/constants/attachment';
const {DOCUMENTS_PATH} = DeviceTypes;
const TEXT_PREVIEW_FORMATS = [
'application/json',
@ -40,20 +38,9 @@ export default class FileAttachmentDocument extends PureComponent {
static propTypes = {
backgroundColor: PropTypes.string,
canDownloadFiles: PropTypes.bool.isRequired,
iconHeight: PropTypes.number,
iconWidth: PropTypes.number,
file: PropTypes.object.isRequired,
theme: PropTypes.object.isRequired,
onLongPress: PropTypes.func,
wrapperHeight: PropTypes.number,
wrapperWidth: PropTypes.number,
};
static defaultProps = {
iconHeight: ATTACHMENT_ICON_HEIGHT,
iconWidth: ATTACHMENT_ICON_WIDTH,
wrapperHeight: ATTACHMENT_ICON_HEIGHT,
wrapperWidth: ATTACHMENT_ICON_WIDTH,
};
static contextTypes = {
@ -322,17 +309,13 @@ export default class FileAttachmentDocument extends PureComponent {
};
renderFileAttachmentIcon = () => {
const {backgroundColor, iconHeight, iconWidth, file, theme, wrapperHeight, wrapperWidth} = this.props;
const {backgroundColor, file, theme} = this.props;
return (
<FileAttachmentIcon
backgroundColor={backgroundColor}
file={file.data}
theme={theme}
iconHeight={iconHeight}
iconWidth={iconWidth}
wrapperHeight={wrapperHeight}
wrapperWidth={wrapperWidth}
/>
);
}

100
app/components/file_attachment_list/file_attachment_icon.js
View file

@ -4,62 +4,70 @@
import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {
Image,
View,
StyleSheet,
} from 'react-native';
import audioIcon from '@assets/images/icons/audio.png';
import codeIcon from '@assets/images/icons/code.png';
import excelIcon from '@assets/images/icons/excel.png';
import genericIcon from '@assets/images/icons/generic.png';
import imageIcon from '@assets/images/icons/image.png';
import patchIcon from '@assets/images/icons/patch.png';
import pdfIcon from '@assets/images/icons/pdf.png';
import pptIcon from '@assets/images/icons/ppt.png';
import textIcon from '@assets/images/icons/text.png';
import videoIcon from '@assets/images/icons/video.png';
import wordIcon from '@assets/images/icons/word.png';
import {ATTACHMENT_ICON_HEIGHT, ATTACHMENT_ICON_WIDTH} from '@constants/attachment';
import * as Utils from '@mm-redux/utils/file_utils';
import {changeOpacity} from '@utils/theme';
const ICON_PATH_FROM_FILE_TYPE = {
audio: audioIcon,
code: codeIcon,
image: imageIcon,
other: genericIcon,
patch: patchIcon,
pdf: pdfIcon,
presentation: pptIcon,
spreadsheet: excelIcon,
text: textIcon,
video: videoIcon,
word: wordIcon,
import CompassIcon from '@components/compass_icon';
const BLUE_ICON = '#338AFF';
const RED_ICON = '#ED522A';
const GREEN_ICON = '#1CA660';
const GRAY_ICON = '#999999';
const FAILED_ICON_NAME_AND_COLOR = ['jumbo-attachment-image-broken', GRAY_ICON];
const ICON_NAME_AND_COLOR_FROM_FILE_TYPE = {
audio: ['jumbo-attachment-audio', BLUE_ICON],
code: ['jumbo-attachment-code', BLUE_ICON],
image: ['jumbo-attachment-image', BLUE_ICON],
smallImage: ['image-outline', BLUE_ICON],
other: ['jumbo-attachment-generic', BLUE_ICON],
patch: ['jumbo-attachment-patch', BLUE_ICON],
pdf: ['jumbo-attachment-pdf', RED_ICON],
presentation: ['jumbo-attachment-powerpoint', RED_ICON],
spreadsheet: ['jumbo-attachment-excel', GREEN_ICON],
text: ['jumbo-attachment-text', GRAY_ICON],
video: ['jumbo-attachment-video', BLUE_ICON],
word: ['jumbo-attachment-word', BLUE_ICON],
zip: ['jumbo-attachment-zip', BLUE_ICON],
};
export default class FileAttachmentIcon extends PureComponent {
static propTypes = {
backgroundColor: PropTypes.string,
file: PropTypes.object.isRequired,
iconHeight: PropTypes.number,
iconWidth: PropTypes.number,
failed: PropTypes.bool,
defaultImage: PropTypes.bool,
smallImage: PropTypes.bool,
file: PropTypes.object,
onCaptureRef: PropTypes.func,
wrapperHeight: PropTypes.number,
wrapperWidth: PropTypes.number,
iconColor: PropTypes.string,
iconSize: PropTypes.number,
theme: PropTypes.object,
};
static defaultProps = {
iconHeight: ATTACHMENT_ICON_HEIGHT,
iconWidth: ATTACHMENT_ICON_WIDTH,
wrapperHeight: ATTACHMENT_ICON_HEIGHT,
wrapperWidth: ATTACHMENT_ICON_WIDTH,
failed: false,
defaultImage: false,
smallImage: false,
iconSize: 48,
};
getFileIconPath(file) {
getFileIconNameAndColor(file) {
if (this.props.failed) {
return FAILED_ICON_NAME_AND_COLOR;
}
if (this.props.defaultImage) {
if (this.props.smallImage) {
return ICON_NAME_AND_COLOR_FROM_FILE_TYPE.smallImage;
}
return ICON_NAME_AND_COLOR_FROM_FILE_TYPE.image;
}
const fileType = Utils.getFileType(file);
return ICON_PATH_FROM_FILE_TYPE[fileType] || ICON_PATH_FROM_FILE_TYPE.other;
return ICON_NAME_AND_COLOR_FROM_FILE_TYPE[fileType] || ICON_NAME_AND_COLOR_FROM_FILE_TYPE.other;
}
handleCaptureRef = (ref) => {
@ -71,18 +79,20 @@ export default class FileAttachmentIcon extends PureComponent {
};
render() {
const {backgroundColor, file, iconHeight, iconWidth, wrapperHeight, wrapperWidth, theme} = this.props;
const source = this.getFileIconPath(file);
const bgColor = backgroundColor || theme.centerChannelBg || 'transparent';
const {backgroundColor, file, iconSize, theme, iconColor} = this.props;
const [iconName, defaultIconColor] = this.getFileIconNameAndColor(file);
const color = iconColor || defaultIconColor;
const bgColor = backgroundColor || theme?.centerChannelBg || 'transparent';
return (
<View
ref={this.handleCaptureRef}
style={[styles.fileIconWrapper, {backgroundColor: bgColor, height: wrapperHeight, width: wrapperWidth}]}
style={[styles.fileIconWrapper, {backgroundColor: bgColor}]}
>
<Image
style={{maxHeight: iconHeight, maxWidth: iconWidth, tintColor: changeOpacity(theme.centerChannelColor, 20)}}
source={source}
<CompassIcon
name={iconName}
size={iconSize}
color={color}
/>
</View>
);
@ -91,6 +101,8 @@ export default class FileAttachmentIcon extends PureComponent {
const styles = StyleSheet.create({
fileIconWrapper: {
flex: 1,
borderRadius: 4,
alignItems: 'center',
justifyContent: 'center',
},

30
app/components/file_attachment_list/file_attachment_image.js
View file

@ -8,11 +8,12 @@ import {
StyleSheet,
} from 'react-native';
import brokenImageIcon from '@assets/images/icons/brokenimage.png';
import ProgressiveImage from '@components/progressive_image';
import {Client4} from '@mm-redux/client';
import {changeOpacity} from '@utils/theme';
import FileAttachmentIcon from './file_attachment_icon';
const SMALL_IMAGE_MAX_HEIGHT = 48;
const SMALL_IMAGE_MAX_WIDTH = 48;
@ -36,10 +37,9 @@ export default class FileAttachmentImage extends PureComponent {
theme: PropTypes.object,
resizeMode: PropTypes.string,
resizeMethod: PropTypes.string,
wrapperHeight: PropTypes.number,
wrapperWidth: PropTypes.number,
isSingleImage: PropTypes.bool,
imageDimensions: PropTypes.object,
backgroundColor: PropTypes.string,
};
static defaultProps = {
@ -72,11 +72,8 @@ export default class FileAttachmentImage extends PureComponent {
imageProps = (file) => {
const imageProps = {};
const {failed} = this.state;
if (failed) {
imageProps.defaultSource = brokenImageIcon;
} else if (file.localPath) {
if (file.localPath) {
imageProps.defaultSource = {uri: file.localPath};
} else if (file.id) {
imageProps.thumbnailUri = Client4.getFileThumbnailUrl(file.id);
@ -104,7 +101,10 @@ export default class FileAttachmentImage extends PureComponent {
style={[
wrapperStyle,
style.smallImageBorder,
{borderColor: changeOpacity(theme.centerChannelColor, 0.4)},
{
borderColor: changeOpacity(theme.centerChannelColor, 0.4),
backgroundColor: changeOpacity(theme.centerChannelColor, 0.08),
},
]}
>
{this.boxPlaceholder()}
@ -124,13 +124,26 @@ export default class FileAttachmentImage extends PureComponent {
};
render() {
const {failed} = this.state;
const {
file,
imageDimensions,
resizeMethod,
resizeMode,
backgroundColor,
theme,
} = this.props;
if (failed) {
return (
<FileAttachmentIcon
failed={failed}
backgroundColor={backgroundColor}
theme={theme}
/>
);
}
if (file.height <= SMALL_IMAGE_MAX_HEIGHT || file.width <= SMALL_IMAGE_MAX_WIDTH) {
return this.renderSmallImage();
}
@ -169,7 +182,6 @@ const style = StyleSheet.create({
paddingBottom: '100%',
},
smallImageBorder: {
borderWidth: 1,
borderRadius: 5,
},
smallImageOverlay: {

10
app/components/file_attachment_list/file_attachment_image.test.js
View file

@ -4,7 +4,6 @@ import React from 'react';
import {shallow} from 'enzyme';
import {Client4} from '@mm-redux/client';
import brokenImageIcon from '@assets/images/icons/brokenimage.png';
import FileAttachmentImage from './file_attachment_image.js';
@ -27,15 +26,6 @@ describe('FileAttachmentImage', () => {
);
const instance = wrapper.instance();
it('should have brokenImageIcon as defaultSource if state.failed is true', () => {
wrapper.setState({failed: true});
const file = {};
const imageProps = instance.imageProps(file);
expect(imageProps.defaultSource).toStrictEqual(brokenImageIcon);
expect(imageProps.thumbnailUri).toBeUndefined();
expect(imageProps.imageUri).toBeUndefined();
});
it('should have file.localPath as defaultSource if localPath is set', () => {
wrapper.setState({failed: false});
const file = {localPath: '/localPath.png'};

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

@ -3,11 +3,11 @@
import {PureComponent} from 'react';
import PropTypes from 'prop-types';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import {Alert} from 'react-native';
import {intlShape} from 'react-intl';
import {showModal} from 'app/actions/navigation';
import {showModal} from '@actions/navigation';
import CompassIcon from '@components/compass_icon';
export default class InteractiveDialogController extends PureComponent {
static propTypes = {
@ -22,7 +22,7 @@ export default class InteractiveDialogController extends PureComponent {
constructor(props) {
super(props);
MaterialIcon.getImageSource('close', 20, props.theme.sidebarHeaderTextColor).then((source) => {
CompassIcon.getImageSource('close', 24, props.theme.sidebarHeaderTextColor).then((source) => {
this.closeButton = source;
});
}

10
app/components/markdown/markdown_block_quote.js
View file

@ -8,8 +8,8 @@ import {
View,
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import CustomPropTypes from 'app/constants/custom_prop_types';
import CompassIcon from '@components/compass_icon';
import CustomPropTypes from '@constants/custom_prop_types';
export default class MarkdownBlockQuote extends PureComponent {
static propTypes = {
@ -22,10 +22,10 @@ export default class MarkdownBlockQuote extends PureComponent {
let icon;
if (!this.props.continue) {
icon = (
<Icon
name='quote-left'
<CompassIcon
name='format-quote-open'
style={this.props.iconStyle}
size={14}
size={20}
/>
);
}

9
app/components/markdown/markdown_image/markdown_image.js
View file

@ -12,10 +12,9 @@ import {
Text,
View,
} from 'react-native';
import FastImage from 'react-native-fast-image';
import Clipboard from '@react-native-community/clipboard';
import brokenImageIcon from '@assets/images/icons/brokenimage.png';
import CompassIcon from '@components/compass_icon';
import ImageViewPort from '@components/image_viewport';
import ProgressiveImage from '@components/progressive_image';
import FormattedText from '@components/formatted_text';
@ -224,9 +223,9 @@ export default class MarkdownImage extends ImageViewPort {
}
} else if (this.state.failed) {
image = (
<FastImage
source={brokenImageIcon}
style={style.brokenImageIcon}
<CompassIcon
name='jumbo-attachment-image-broken'
size={24}
/>
);
}

22
app/components/markdown/markdown_table/markdown_table.js
View file

@ -11,14 +11,14 @@ import {
View,
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import Icon from 'react-native-vector-icons/FontAwesome';
import {CELL_MAX_WIDTH, CELL_MIN_WIDTH} from 'app/components/markdown/markdown_table_cell/markdown_table_cell';
import TouchableWithFeedback from 'app/components/touchable_with_feedback';
import {preventDoubleTap} from 'app/utils/tap';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
import {goToScreen} from 'app/actions/navigation';
import {DeviceTypes} from 'app/constants';
import CompassIcon from '@components/compass_icon';
import {CELL_MAX_WIDTH, CELL_MIN_WIDTH} from '@components/markdown/markdown_table_cell/markdown_table_cell';
import TouchableWithFeedback from '@components/touchable_with_feedback';
import {preventDoubleTap} from '@utils/tap';
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
import {goToScreen} from '@actions/navigation';
import {DeviceTypes} from '@constants';
const MAX_HEIGHT = 300;
const MAX_PREVIEW_COLUMNS = 5;
@ -239,14 +239,14 @@ export default class MarkdownTable extends React.PureComponent {
if (expandButtonOffset > 0) {
expandButton = (
<TouchableWithFeedback
type={'opacity'}
type='opacity'
onPress={this.handlePress}
style={[style.expandButton, {left: expandButtonOffset}]}
>
<View style={[style.iconContainer, {width: this.getTableWidth()}]}>
<View style={style.iconButton}>
<Icon
name={'expand'}
<CompassIcon
name='arrow-expand'
style={style.icon}
/>
</View>
@ -259,7 +259,7 @@ export default class MarkdownTable extends React.PureComponent {
<TouchableWithFeedback
style={style.tablePadding}
onPress={this.handlePress}
type={'opacity'}
type='opacity'
>
<ScrollView
onContentSizeChange={this.handleContentSizeChange}

2
app/components/network_indicator/__snapshots__/network_indicator.test.js.snap
View file

@ -57,7 +57,7 @@ exports[`AttachmentFooter matches snapshot 1`] = `
<Icon
allowFontScaling={false}
color="#FFFFFF"
name="md-checkmark"
name="check"
size={20}
/>
</View>

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

@ -12,18 +12,19 @@ import {
View,
} from 'react-native';
import NetInfo from '@react-native-community/netinfo';
import IonIcon from 'react-native-vector-icons/Ionicons';
import {RequestStatus} from '@mm-redux/constants';
import EventEmitter from '@mm-redux/utils/event_emitter';
import FormattedText from 'app/components/formatted_text';
import CompassIcon from '@components/compass_icon';
import FormattedText from '@components/formatted_text';
import {DeviceTypes, ViewTypes} from '@constants';
import {INDICATOR_BAR_HEIGHT} from '@constants/view';
import networkConnectionListener, {checkConnection} from '@utils/network';
import {t} from '@utils/i18n';
import mattermostBucket from 'app/mattermost_bucket';
import PushNotifications from 'app/push_notifications';
import networkConnectionListener, {checkConnection} from 'app/utils/network';
import {t} from 'app/utils/i18n';
const MAX_WEBSOCKET_RETRIES = 3;
const CONNECTION_RETRY_SECONDS = 5;
@ -371,9 +372,9 @@ export default class NetworkIndicator extends PureComponent {
defaultMessage = 'Connected';
action = (
<View style={styles.actionContainer}>
<IonIcon
<CompassIcon
color='#FFFFFF'
name='md-checkmark'
name='check'
size={20}
/>
</View>

47
app/components/no_results.js
View file

@ -3,18 +3,15 @@
import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {Image, Text, View} from 'react-native';
import IonIcon from 'react-native-vector-icons/Ionicons';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import {Text, View} from 'react-native';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
import CompassIcon from '@components/compass_icon';
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
export default class NoResults extends PureComponent {
static propTypes = {
description: PropTypes.string,
iconName: PropTypes.string,
iconType: PropTypes.oneOf(['' /* image */, 'ion', 'material-community']),
image: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
iconName: PropTypes.string.isRequired,
theme: PropTypes.object.isRequired,
title: PropTypes.string.isRequired,
};
@ -23,45 +20,19 @@ export default class NoResults extends PureComponent {
const {
description,
iconName,
iconType,
image,
theme,
title,
} = this.props;
const style = getStyleFromTheme(theme);
let icon;
if (image) {
icon = (
<Image
source={image}
style={{width: 37, height: 37, tintColor: changeOpacity(theme.centerChannelColor, 0.5)}}
/>
);
} else if (iconName) {
if (iconType === 'ion') {
icon = (
<IonIcon
size={72}
name={iconName}
style={style.icon}
/>
);
} else if (iconType === 'material-community') {
icon = (
<MaterialCommunityIcons
size={72}
name={iconName}
style={style.icon}
/>
);
}
}
return (
<View style={style.container}>
<View style={style.iconContainer}>
{icon}
<CompassIcon
size={72}
name={iconName}
style={style.icon}
/>
</View>
<Text style={style.title}>{title}</Text>
{description &&

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

@ -10,7 +10,6 @@ import {
ViewPropTypes,
} from 'react-native';
import {intlShape} from 'react-intl';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import {Posts} from '@mm-redux/constants';
import EventEmitter from '@mm-redux/utils/event_emitter';
@ -18,6 +17,7 @@ import {isPostEphemeral, isPostPendingOrFailed, isSystemMessage} from '@mm-redux
import {showModalOverCurrentContext, showModal} from '@actions/navigation';
import CompassIcon from '@components/compass_icon';
import PostBody from '@components/post_body';
import PostHeader from '@components/post_header';
import PostProfilePicture from '@components/post_profile_picture';
@ -102,7 +102,7 @@ export default class Post extends PureComponent {
};
if (!this.closeButton) {
this.closeButton = await MaterialIcon.getImageSource('close', 20, theme.sidebarHeaderTextColor);
this.closeButton = await CompassIcon.getImageSource('close', 24, theme.sidebarHeaderTextColor);
}
const options = {

35
app/components/post_body/post_body.js
View file

@ -9,24 +9,25 @@ import {
View,
} from 'react-native';
import {intlShape} from 'react-intl';
import Icon from 'react-native-vector-icons/Ionicons';
import {Posts} from '@mm-redux/constants';
import CombinedSystemMessage from 'app/components/combined_system_message';
import CompassIcon from '@components/compass_icon';
import CombinedSystemMessage from '@components/combined_system_message';
import FormattedText from '@components/formatted_text';
import Markdown from '@components/markdown';
import MarkdownEmoji from '@components/markdown/markdown_emoji';
import ShowMoreButton from '@components/show_more_button';
import TouchableWithFeedback from '@components/touchable_with_feedback';
import {emptyFunction} from '@utils/general';
import {getMarkdownTextStyles, getMarkdownBlockStyles} from '@utils/markdown';
import {preventDoubleTap} from '@utils/tap';
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
import {showModalOverCurrentContext} from '@actions/navigation';
import telemetry from '@telemetry';
import {renderSystemMessage} from './system_message_helpers';
import FormattedText from 'app/components/formatted_text';
import Markdown from 'app/components/markdown';
import MarkdownEmoji from 'app/components/markdown/markdown_emoji';
import ShowMoreButton from 'app/components/show_more_button';
import TouchableWithFeedback from 'app/components/touchable_with_feedback';
import {emptyFunction} from 'app/utils/general';
import {getMarkdownTextStyles, getMarkdownBlockStyles} from 'app/utils/markdown';
import {preventDoubleTap} from 'app/utils/tap';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
import {showModalOverCurrentContext} from 'app/actions/navigation';
import telemetry from 'app/telemetry';
let FileAttachmentList;
let PostAddChannelMember;
@ -457,8 +458,8 @@ export default class PostBody extends PureComponent {
style={style.retry}
type={'opacity'}
>
<Icon
name='ios-information-circle-outline'
<CompassIcon
name='information-outline'
size={26}
color={theme.errorTextColor}
/>

154
app/components/post_draft/__snapshots__/post_draft.test.js.snap
View file

@ -398,25 +398,6 @@ exports[`PostDraft Should render the DraftInput 1`] = `
}
}
>
<View
accessible={true}
focusable={true}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Object {
"alignItems": "center",
"justifyContent": "center",
"opacity": 1,
"padding": 10,
}
}
/>
<View
accessible={true}
focusable={true}
@ -436,23 +417,10 @@ exports[`PostDraft Should render the DraftInput 1`] = `
}
}
>
<Image
source={
Object {
"testUri": "../../../dist/assets/images/icons/slash-forward-box.png",
}
}
style={
Array [
Object {
"height": 24,
"opacity": 1,
"tintColor": "rgba(61,60,64,0.64)",
"width": 24,
},
null,
]
}
<Icon
color="rgba(61,60,64,0.64)"
name="at"
size={24}
/>
</View>
<View
@ -473,7 +441,13 @@ exports[`PostDraft Should render the DraftInput 1`] = `
"padding": 10,
}
}
/>
>
<Icon
color="rgba(61,60,64,0.64)"
name="slash-forward-box-outline"
size={24}
/>
</View>
<View
accessible={true}
focusable={true}
@ -492,7 +466,13 @@ exports[`PostDraft Should render the DraftInput 1`] = `
"padding": 10,
}
}
/>
>
<Icon
color="rgba(61,60,64,0.64)"
name="file-document-outline"
size={24}
/>
</View>
<View
accessible={true}
focusable={true}
@ -511,7 +491,38 @@ exports[`PostDraft Should render the DraftInput 1`] = `
"padding": 10,
}
}
/>
>
<Icon
color="rgba(61,60,64,0.64)"
name="image-outline"
size={24}
/>
</View>
<View
accessible={true}
focusable={true}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Object {
"alignItems": "center",
"justifyContent": "center",
"opacity": 1,
"padding": 10,
}
}
>
<Icon
color="rgba(61,60,64,0.64)"
name="camera-outline"
size={24}
/>
</View>
</View>
<View
style={
@ -539,44 +550,11 @@ exports[`PostDraft Should render the DraftInput 1`] = `
]
}
>
<RNSVGSvgView
align="xMidYMid"
bbHeight={16}
bbWidth={19}
focusable={false}
height={16}
meetOrSlice={0}
minX={0}
minY={0}
style={
Array [
Object {
"backgroundColor": "transparent",
"borderWidth": 0,
},
Object {
"flex": 0,
"height": 16,
"width": 19,
},
]
}
vbHeight={14}
vbWidth={16}
width={19}
>
<RNSVGGroup>
<RNSVGPath
d="M1.09222552,5.76354703 L0.405413926,0.94983436 C0.379442059,0.7702001 0.452067095,0.59056584 0.594431403,0.479386798 C0.737276671,0.368693254 0.927737029,0.343932856 1.09318744,0.414815564 C3.7432798,1.54942439 12.1192069,5.13676911 15.0920238,6.40974487 C15.2723839,6.48693905 15.3892573,6.66560231 15.3892573,6.8632 C15.3892573,7.06079769 15.2723839,7.23946095 15.0920238,7.31665513 C12.0961208,8.59982635 3.6105347,12.2337789 1.0316245,13.3378013 C0.878198098,13.4033436 0.701685594,13.3810106 0.569902417,13.2785706 C0.43763828,13.1761305 0.37030381,13.0096047 0.393870874,12.8430789 L1.07875863,7.96479496 L8.93669128,6.8632 L1.09222552,5.76354703 Z"
fill={2164260863}
propList={
Array [
"fill",
]
}
/>
</RNSVGGroup>
</RNSVGSvgView>
<Icon
color="rgba(255,255,255,0.5)"
name="send"
size={24}
/>
</View>
</View>
</View>
@ -607,6 +585,17 @@ exports[`PostDraft Should render the ReadOnly for canPost 1`] = `
}
}
>
<Icon
color="#3d3c40"
name="glasses"
style={
Object {
"fontSize": 20,
"lineHeight": 22,
"opacity": 0.56,
}
}
/>
<Text
style={
Object {
@ -645,6 +634,17 @@ exports[`PostDraft Should render the ReadOnly for channelIsReadOnly 1`] = `
}
}
>
<Icon
color="#3d3c40"
name="glasses"
style={
Object {
"fontSize": 20,
"lineHeight": 22,
"opacity": 0.56,
}
}
/>
<Text
style={
Object {

2
app/components/post_draft/post_draft.test.js
View file

@ -11,6 +11,8 @@ import {renderWithReduxIntl} from 'test/testing_library';
import PostDraft from './post_draft';
jest.mock('app/components/compass_icon', () => 'Icon');
const mockStore = configureMockStore([thunk]);
const state = {
...intitialState,

4
app/components/post_draft/quick_actions/camera_quick_action/index.js
View file

@ -10,10 +10,10 @@ import {
StyleSheet,
} from 'react-native';
import DeviceInfo from 'react-native-device-info';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import ImagePicker from 'react-native-image-picker';
import Permissions from 'react-native-permissions';
import CompassIcon from '@components/compass_icon';
import TouchableWithFeedback from '@components/touchable_with_feedback';
import {NavigationTypes} from '@constants';
import {ICON_SIZE, MAX_FILE_COUNT_WARNING} from '@constants/post_draft';
@ -159,7 +159,7 @@ export default class CameraQuickAction extends PureComponent {
style={style.icon}
type={'opacity'}
>
<MaterialCommunityIcons
<CompassIcon
color={color}
name='camera-outline'
size={ICON_SIZE}

4
app/components/post_draft/quick_actions/file_quick_action/index.js
View file

@ -6,10 +6,10 @@ import {intlShape} from 'react-intl';
import {Alert, NativeModules, Platform, StyleSheet} from 'react-native';
import DeviceInfo from 'react-native-device-info';
import AndroidOpenSettings from 'react-native-android-open-settings';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import DocumentPicker from 'react-native-document-picker';
import Permissions from 'react-native-permissions';
import CompassIcon from '@components/compass_icon';
import TouchableWithFeedback from '@components/touchable_with_feedback';
import {NavigationTypes} from '@constants';
import {ICON_SIZE, MAX_FILE_COUNT_WARNING} from '@constants/post_draft';
@ -151,7 +151,7 @@ export default class FileQuickAction extends PureComponent {
style={style.icon}
type={'opacity'}
>
<MaterialCommunityIcons
<CompassIcon
color={color}
name='file-document-outline'
size={ICON_SIZE}

4
app/components/post_draft/quick_actions/image_quick_action/index.js
View file

@ -5,10 +5,10 @@ import PropTypes from 'prop-types';
import {intlShape} from 'react-intl';
import {Alert, Platform, StatusBar, StyleSheet} from 'react-native';
import DeviceInfo from 'react-native-device-info';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import ImagePicker from 'react-native-image-picker';
import Permissions from 'react-native-permissions';
import CompassIcon from '@components/compass_icon';
import TouchableWithFeedback from '@components/touchable_with_feedback';
import {NavigationTypes} from '@constants';
import EventEmitter from '@mm-redux/utils/event_emitter';
@ -166,7 +166,7 @@ export default class ImageQuickAction extends PureComponent {
style={style.icon}
type={'opacity'}
>
<MaterialCommunityIcons
<CompassIcon
color={color}
name='image-outline'
size={ICON_SIZE}

38
app/components/post_draft/quick_actions/input_quick_action/index.js
View file

@ -3,9 +3,8 @@
import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {Image} from 'react-native';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import CompassIcon from '@components/compass_icon';
import TouchableWithFeedback from '@components/touchable_with_feedback';
import {ICON_SIZE} from '@constants/post_draft';
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
@ -40,27 +39,18 @@ export default class InputQuickAction extends PureComponent {
onTextChange(newValue);
}
renderInput = (style) => {
renderInput = () => {
const {disabled, inputType, theme} = this.props;
if (inputType === 'at') {
const color = disabled ?
changeOpacity(theme.centerChannelColor, 0.16) :
changeOpacity(theme.centerChannelColor, 0.64);
return (
<MaterialCommunityIcons
color={color}
name='at'
size={ICON_SIZE}
/>
);
}
const name = inputType === 'at' ? inputType : 'slash-forward-box-outline';
const color = disabled ?
changeOpacity(theme.centerChannelColor, 0.16) :
changeOpacity(theme.centerChannelColor, 0.64);
return (
<Image
source={require('@assets/images/icons/slash-forward-box.png')}
style={[style.slash, disabled ? style.disabled : null]}
<CompassIcon
name={name}
color={color}
size={ICON_SIZE}
/>
);
}
@ -76,7 +66,7 @@ export default class InputQuickAction extends PureComponent {
style={style.icon}
type={'opacity'}
>
{this.renderInput(style)}
{this.renderInput()}
</TouchableWithFeedback>
);
}
@ -84,12 +74,6 @@ export default class InputQuickAction extends PureComponent {
const getStyleSheet = makeStyleSheetFromTheme((theme) => {
return {
slash: {
width: ICON_SIZE,
height: ICON_SIZE,
opacity: 1,
tintColor: changeOpacity(theme.centerChannelColor, 0.64),
},
disabled: {
tintColor: changeOpacity(theme.centerChannelColor, 0.16),
},

26
app/components/post_draft/read_only/__snapshots__/read_only.test.js.snap
View file

@ -1,8 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`PostDraft ReadOnly Should match snapshot 1`] = `
<RCTSafeAreaView
emulateUnlessSupported={true}
<ForwardRef(SafeAreaView)
style={
Object {
"backgroundColor": "rgba(61,60,64,0.04)",
@ -21,7 +20,22 @@ exports[`PostDraft ReadOnly Should match snapshot 1`] = `
}
}
>
<Text
<Icon
allowFontScaling={false}
color="#3d3c40"
name="glasses"
size={12}
style={
Object {
"fontSize": 20,
"lineHeight": 22,
"opacity": 0.56,
}
}
/>
<FormattedText
defaultMessage="This channel is read-only."
id="mobile.create_post.read_only"
style={
Object {
"color": "#3d3c40",
@ -31,9 +45,7 @@ exports[`PostDraft ReadOnly Should match snapshot 1`] = `
"opacity": 0.56,
}
}
>
This channel is read-only.
</Text>
/>
</View>
</RCTSafeAreaView>
</ForwardRef(SafeAreaView)>
`;

4
app/components/post_draft/read_only/index.tsx
View file

@ -3,8 +3,8 @@
import React, {ReactNode} from 'react';
import {SafeAreaView, View} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome5';
import CompassIcon from '@components/compass_icon';
import FormattedText from '@components/formatted_text';
import type {Theme} from '@mm-redux/types/preferences';
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
@ -18,7 +18,7 @@ const ReadOnlyChannnel = ({theme}: ReadOnlyProps): ReactNode => {
return (
<SafeAreaView style={style.background}>
<View style={style.container}>
<Icon
<CompassIcon
name='glasses'
style={style.icon}
color={theme.centerChannelColor}

6
app/components/post_draft/read_only/read_only.test.js
View file

@ -4,18 +4,18 @@
import React from 'react';
import Preferences from '@mm-redux/constants/preferences';
import {renderWithIntl} from 'test/testing_library';
import {shallowWithIntl} from 'test/intl-test-helper';
import ReadOnly from './index';
describe('PostDraft ReadOnly', () => {
test('Should match snapshot', () => {
const wrapper = renderWithIntl(
const wrapper = shallowWithIntl(
<ReadOnly
theme={Preferences.THEMES.default}
/>,
);
expect(wrapper.toJSON()).toMatchSnapshot();
expect(wrapper).toMatchSnapshot();
});
});

21
app/components/post_draft/send_action/__snapshots__/send.test.js.snap
View file

@ -27,10 +27,11 @@ exports[`SendAction should change theme backgroundColor to 0.3 opacity 1`] = `
]
}
>
<PaperPlane
<Icon
allowFontScaling={false}
color="rgba(255,255,255,0.5)"
height={16}
width={19}
name="send"
size={24}
/>
</View>
</View>
@ -60,10 +61,11 @@ exports[`SendAction should match snapshot 1`] = `
}
}
>
<PaperPlane
<Icon
allowFontScaling={false}
color="#ffffff"
height={16}
width={19}
name="send"
size={24}
/>
</View>
</TouchableWithFeedbackIOS>
@ -93,10 +95,11 @@ exports[`SendAction should render theme backgroundColor 1`] = `
}
}
>
<PaperPlane
<Icon
allowFontScaling={false}
color="#ffffff"
height={16}
width={19}
name="send"
size={24}
/>
</View>
</TouchableWithFeedbackIOS>

19
app/components/post_draft/send_action/index.js
View file

@ -5,19 +5,14 @@ import React, {memo} from 'react';
import {View} from 'react-native';
import PropTypes from 'prop-types';
import CompassIcon from '@components/compass_icon';
import TouchableWithFeedback from '@components/touchable_with_feedback';
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
let PaperPlane = null;
function SendButton(props) {
const {theme} = props;
const style = getStyleSheet(theme);
if (!PaperPlane) {
PaperPlane = require('./paper_plane').default;
}
if (props.disabled) {
return (
<View
@ -25,9 +20,9 @@ function SendButton(props) {
style={style.sendButtonContainer}
>
<View style={[style.sendButton, style.disableButton]}>
<PaperPlane
height={16}
width={19}
<CompassIcon
name='send'
size={24}
color={changeOpacity(theme.buttonColor, 0.5)}
/>
</View>
@ -43,9 +38,9 @@ function SendButton(props) {
type={'opacity'}
>
<View style={style.sendButton}>
<PaperPlane
height={16}
width={19}
<CompassIcon
name='send'
size={24}
color={theme.buttonColor}
/>
</View>

29
app/components/post_draft/send_action/paper_plane.js
View file

@ -1,29 +0,0 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import Svg, {Path} from 'react-native-svg';
export default class PaperPlane extends PureComponent {
static propTypes = {
width: PropTypes.number.isRequired,
height: PropTypes.number.isRequired,
color: PropTypes.string.isRequired,
};
render() {
return (
<Svg
width={this.props.width}
height={this.props.height}
viewBox='0 0 16 14'
>
<Path
d='M1.09222552,5.76354703 L0.405413926,0.94983436 C0.379442059,0.7702001 0.452067095,0.59056584 0.594431403,0.479386798 C0.737276671,0.368693254 0.927737029,0.343932856 1.09318744,0.414815564 C3.7432798,1.54942439 12.1192069,5.13676911 15.0920238,6.40974487 C15.2723839,6.48693905 15.3892573,6.66560231 15.3892573,6.8632 C15.3892573,7.06079769 15.2723839,7.23946095 15.0920238,7.31665513 C12.0961208,8.59982635 3.6105347,12.2337789 1.0316245,13.3378013 C0.878198098,13.4033436 0.701685594,13.3810106 0.569902417,13.2785706 C0.43763828,13.1761305 0.37030381,13.0096047 0.393870874,12.8430789 L1.07875863,7.96479496 L8.93669128,6.8632 L1.09222552,5.76354703 Z'
fill={this.props.color}
/>
</Svg>
);
}
}

5
app/components/post_draft/uploads/upload_item/upload_item.js
View file

@ -15,6 +15,7 @@ import FileAttachmentIcon from '@components/file_attachment_list/file_attachment
import {buildFileUploadData, encodeHeaderURIStringToUTF8} from '@utils/file';
import {emptyFunction} from '@utils/general';
import ImageCacheManager from '@utils/image_cache_manager';
import {changeOpacity} from '@utils/theme';
import UploadRemove from './upload_remove';
import UploadRetry from './upload_retry';
@ -189,6 +190,7 @@ export default class UploadItem extends PureComponent {
file={file}
theme={theme}
resizeMode='center'
backgroundColor={changeOpacity(theme.centerChannelColor, 0.08)}
/>
</View>
);
@ -198,8 +200,7 @@ export default class UploadItem extends PureComponent {
<FileAttachmentIcon
file={file}
theme={theme}
wrapperHeight={53}
wrapperWidth={53}
backgroundColor={changeOpacity(theme.centerChannelColor, 0.08)}
/>
</View>
);

17
app/components/post_draft/uploads/upload_item/upload_remove.js
View file

@ -4,8 +4,8 @@
import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {View, Platform} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import CompassIcon from '@components/compass_icon';
import TouchableWithFeedback from '@components/touchable_with_feedback';
import {makeStyleSheetFromTheme, changeOpacity} from '@utils/theme';
@ -34,10 +34,11 @@ export default class UploadRemove extends PureComponent {
type={'opacity'}
>
<View style={style.removeButton}>
<Icon
<CompassIcon
name='close-circle'
color={changeOpacity(theme.centerChannelColor, 0.64)}
size={21}
size={24}
style={style.removeIcon}
/>
</View>
</TouchableWithFeedback>
@ -50,10 +51,10 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
tappableContainer: {
position: 'absolute',
elevation: 11,
top: -5,
right: -10,
width: 32,
height: 32,
top: -7,
right: -8,
width: 24,
height: 24,
},
removeButton: {
borderRadius: 12,
@ -63,6 +64,8 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
android: 4.75,
}),
backgroundColor: theme.centerChannelBg,
width: 24,
height: 25,
},
};
});

8
app/components/post_draft/uploads/upload_item/upload_retry.js
View file

@ -4,8 +4,8 @@
import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {StyleSheet} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import CompassIcon from '@components/compass_icon';
import TouchableWithFeedback from '@components/touchable_with_feedback';
export default class UploadRetry extends PureComponent {
@ -25,10 +25,10 @@ export default class UploadRetry extends PureComponent {
<TouchableWithFeedback
style={style.failed}
onPress={this.handleOnPress}
type={'opacity'}
type='opacity'
>
<Icon
name='md-refresh'
<CompassIcon
name='refresh'
size={25}
color='#fff'
/>

21
app/components/post_header/__snapshots__/post_header.test.js.snap
View file

@ -531,10 +531,11 @@ exports[`PostHeader should match snapshot when post isBot and shouldRenderReplyB
}
type="opacity"
>
<ReplyIcon
<Icon
allowFontScaling={false}
color="#2389d7"
height={16}
width={16}
name="reply-outline"
size={18}
/>
<Text
style={
@ -683,10 +684,11 @@ exports[`PostHeader should match snapshot when post isBot and shouldRenderReplyB
}
type="opacity"
>
<ReplyIcon
<Icon
allowFontScaling={false}
color="#2389d7"
height={16}
width={16}
name="reply-outline"
size={18}
/>
<Text
style={
@ -882,10 +884,11 @@ exports[`PostHeader should match snapshot when post should display reply button
}
type="opacity"
>
<ReplyIcon
<Icon
allowFontScaling={false}
color="#2389d7"
height={16}
width={16}
name="reply-outline"
size={18}
/>
<Text
style={

96
app/components/post_header/__snapshots__/post_pre_header.test.js.snap
View file

@ -27,18 +27,13 @@ exports[`PostPreHeader should match snapshot when flagged and not pinned 1`] = `
}
}
>
<Image
id="flagIcon"
source={
Object {
"testUri": "../../../dist/assets/images/post_header/flag.png",
}
}
<Icon
allowFontScaling={false}
name="bookmark-outline"
size={14}
style={
Object {
"height": 11,
"tintColor": "#2389d7",
"width": 11,
"color": "#2389d7",
}
}
/>
@ -51,7 +46,7 @@ exports[`PostPreHeader should match snapshot when flagged and not pinned 1`] = `
}
>
<FormattedText
defaultMessage="Flagged"
defaultMessage="Saved"
id="mobile.post_pre_header.flagged"
style={
Object {
@ -96,18 +91,13 @@ exports[`PostPreHeader should match snapshot when pinned and flagged 1`] = `
}
}
>
<Image
id="pinIcon"
source={
Object {
"testUri": "../../../dist/assets/images/post_header/pin.png",
}
}
<Icon
allowFontScaling={false}
name="pin-outline"
size={14}
style={
Object {
"height": 11,
"tintColor": "#2389d7",
"width": 11,
"color": "#2389d7",
}
}
/>
@ -118,18 +108,13 @@ exports[`PostPreHeader should match snapshot when pinned and flagged 1`] = `
}
}
/>
<Image
id="flagIcon"
source={
Object {
"testUri": "../../../dist/assets/images/post_header/flag.png",
}
}
<Icon
allowFontScaling={false}
name="bookmark-outline"
size={14}
style={
Object {
"height": 11,
"tintColor": "#2389d7",
"width": 11,
"color": "#2389d7",
}
}
/>
@ -142,7 +127,7 @@ exports[`PostPreHeader should match snapshot when pinned and flagged 1`] = `
}
>
<FormattedText
defaultMessage="Pinned and Flagged"
defaultMessage="Pinned and Saved"
id="mobile.post_pre_header.pinned_flagged"
style={
Object {
@ -185,18 +170,13 @@ exports[`PostPreHeader should match snapshot when pinned and flagged but skippin
}
}
>
<Image
id="pinIcon"
source={
Object {
"testUri": "../../../dist/assets/images/post_header/pin.png",
}
}
<Icon
allowFontScaling={false}
name="pin-outline"
size={14}
style={
Object {
"height": 11,
"tintColor": "#2389d7",
"width": 11,
"color": "#2389d7",
}
}
/>
@ -250,18 +230,13 @@ exports[`PostPreHeader should match snapshot when pinned and flagged but skippin
}
}
>
<Image
id="flagIcon"
source={
Object {
"testUri": "../../../dist/assets/images/post_header/flag.png",
}
}
<Icon
allowFontScaling={false}
name="bookmark-outline"
size={14}
style={
Object {
"height": 11,
"tintColor": "#2389d7",
"width": 11,
"color": "#2389d7",
}
}
/>
@ -274,7 +249,7 @@ exports[`PostPreHeader should match snapshot when pinned and flagged but skippin
}
>
<FormattedText
defaultMessage="Flagged"
defaultMessage="Saved"
id="mobile.post_pre_header.flagged"
style={
Object {
@ -315,18 +290,13 @@ exports[`PostPreHeader should match snapshot when pinned and not flagged 1`] = `
}
}
>
<Image
id="pinIcon"
source={
Object {
"testUri": "../../../dist/assets/images/post_header/pin.png",
}
}
<Icon
allowFontScaling={false}
name="pin-outline"
size={14}
style={
Object {
"height": 11,
"tintColor": "#2389d7",
"width": 11,
"color": "#2389d7",
}
}
/>

24
app/components/post_header/post_header.js
View file

@ -8,15 +8,15 @@ import {
View,
} from 'react-native';
import FormattedText from 'app/components/formatted_text';
import FormattedTime from 'app/components/formatted_time';
import FormattedDate from 'app/components/formatted_date';
import ReplyIcon from 'app/components/reply_icon';
import Tag, {BotTag, GuestTag} from 'app/components/tag';
import TouchableWithFeedback from 'app/components/touchable_with_feedback';
import {emptyFunction} from 'app/utils/general';
import {t} from 'app/utils/i18n';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
import CompassIcon from '@components/compass_icon';
import FormattedText from '@components/formatted_text';
import FormattedTime from '@components/formatted_time';
import FormattedDate from '@components/formatted_date';
import Tag, {BotTag, GuestTag} from '@components/tag';
import TouchableWithFeedback from '@components/touchable_with_feedback';
import {emptyFunction} from '@utils/general';
import {t} from '@utils/i18n';
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
export default class PostHeader extends PureComponent {
static propTypes = {
@ -233,9 +233,9 @@ export default class PostHeader extends PureComponent {
style={style.replyIconContainer}
type={'opacity'}
>
<ReplyIcon
height={16}
width={16}
<CompassIcon
name='reply-outline'
size={18}
color={theme.linkColor}
/>
{!isSearchResult &&

25
app/components/post_header/post_pre_header.js
View file

@ -3,10 +3,9 @@
import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {Image, View} from 'react-native';
import {View} from 'react-native';
import flagIcon from '@assets/images/post_header/flag.png';
import pinIcon from '@assets/images/post_header/pin.png';
import CompassIcon from '@components/compass_icon';
import FormattedText from '@components/formatted_text';
import {t} from '@utils/i18n';
import {makeStyleSheetFromTheme} from '@utils/theme';
@ -42,7 +41,7 @@ export default class PostPreHeader extends PureComponent {
if (isPinnedAndFlagged) {
text = {
id: t('mobile.post_pre_header.pinned_flagged'),
defaultMessage: 'Pinned and Flagged',
defaultMessage: 'Pinned and Saved',
};
} else if (isPinned && !skipPinnedHeader) {
text = {
@ -52,7 +51,7 @@ export default class PostPreHeader extends PureComponent {
} else if (isFlagged && !skipFlaggedHeader) {
text = {
id: t('mobile.post_pre_header.flagged'),
defaultMessage: 'Flagged',
defaultMessage: 'Saved',
};
}
@ -64,9 +63,9 @@ export default class PostPreHeader extends PureComponent {
<View style={[style.container, (isConsecutive && style.consecutive)]}>
<View style={style.iconsContainer}>
{isPinned && !skipPinnedHeader &&
<Image
id='pinIcon'
source={pinIcon}
<CompassIcon
name='pin-outline'
size={14}
style={style.icon}
/>
}
@ -74,9 +73,9 @@ export default class PostPreHeader extends PureComponent {
<View style={style.iconsSeparator}/>
}
{isFlagged && !skipFlaggedHeader &&
<Image
id='flagIcon'
source={flagIcon}
<CompassIcon
name='bookmark-outline'
size={14}
style={style.icon}
/>
}
@ -113,9 +112,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
width: 35,
},
icon: {
height: 11,
tintColor: theme.linkColor,
width: 11,
color: theme.linkColor,
},
iconsSeparator: {
marginRight: 5,

20
app/components/post_header/post_pre_header.test.js
View file

@ -65,8 +65,8 @@ describe('PostPreHeader', () => {
<PostPreHeader {...props}/>,
);
expect(wrapper.getElement()).toMatchSnapshot();
expect(wrapper.find('#flagIcon').exists()).toEqual(true);
expect(wrapper.find('#pinIcon').exists()).toEqual(false);
expect(wrapper.find({name: 'bookmark-outline'}).exists()).toEqual(true);
expect(wrapper.find({name: 'pin-outline'}).exists()).toEqual(false);
expect(wrapper.find('FormattedText').first().props().id).toEqual('mobile.post_pre_header.flagged');
});
@ -80,8 +80,8 @@ describe('PostPreHeader', () => {
<PostPreHeader {...props}/>,
);
expect(wrapper.getElement()).toMatchSnapshot();
expect(wrapper.find('#flagIcon').exists()).toEqual(false);
expect(wrapper.find('#pinIcon').exists()).toEqual(true);
expect(wrapper.find({name: 'bookmark-outline'}).exists()).toEqual(false);
expect(wrapper.find({name: 'pin-outline'}).exists()).toEqual(true);
expect(wrapper.find('FormattedText').first().props().id).toEqual('mobile.post_pre_header.pinned');
});
@ -96,8 +96,8 @@ describe('PostPreHeader', () => {
<PostPreHeader {...props}/>,
);
expect(wrapper.getElement()).toMatchSnapshot();
expect(wrapper.find('#flagIcon').exists()).toEqual(true);
expect(wrapper.find('#pinIcon').exists()).toEqual(true);
expect(wrapper.find({name: 'bookmark-outline'}).exists()).toEqual(true);
expect(wrapper.find({name: 'pin-outline'}).exists()).toEqual(true);
expect(wrapper.find('FormattedText').first().props().id).toEqual('mobile.post_pre_header.pinned_flagged');
});
@ -113,8 +113,8 @@ describe('PostPreHeader', () => {
<PostPreHeader {...props}/>,
);
expect(wrapper.getElement()).toMatchSnapshot();
expect(wrapper.find('#flagIcon').exists()).toEqual(true);
expect(wrapper.find('#pinIcon').exists()).toEqual(false);
expect(wrapper.find({name: 'bookmark-outline'}).exists()).toEqual(true);
expect(wrapper.find({name: 'pin-outline'}).exists()).toEqual(false);
expect(wrapper.find('FormattedText').first().props().id).toEqual('mobile.post_pre_header.flagged');
});
@ -130,8 +130,8 @@ describe('PostPreHeader', () => {
<PostPreHeader {...props}/>,
);
expect(wrapper.getElement()).toMatchSnapshot();
expect(wrapper.find('#flagIcon').exists()).toEqual(false);
expect(wrapper.find('#pinIcon').exists()).toEqual(true);
expect(wrapper.find({name: 'bookmark-outline'}).exists()).toEqual(false);
expect(wrapper.find({name: 'pin-outline'}).exists()).toEqual(true);
expect(wrapper.find('FormattedText').first().props().id).toEqual('mobile.post_pre_header.pinned');
});

16
app/components/post_list/more_messages_button/__snapshots__/more_messages_button.test.js.snap
View file

@ -69,9 +69,10 @@ exports[`MoreMessagesButton should match snapshot 1`] = `
}
}
>
<VectorIcon
name="md-arrow-up"
size={14}
<Icon
allowFontScaling={false}
name="arrow-up"
size={12}
style={
Object {
"alignSelf": "center",
@ -80,7 +81,6 @@ exports[`MoreMessagesButton should match snapshot 1`] = `
"fontWeight": "bold",
}
}
type="ion"
/>
</View>
<View
@ -118,9 +118,10 @@ exports[`MoreMessagesButton should match snapshot 1`] = `
}
}
>
<VectorIcon
name="md-close"
size={14}
<Icon
allowFontScaling={false}
name="close"
size={12}
style={
Object {
"alignSelf": "center",
@ -129,7 +130,6 @@ exports[`MoreMessagesButton should match snapshot 1`] = `
"fontWeight": "bold",
}
}
type="ion"
/>
</View>
</TouchableWithFeedbackIOS>

12
app/components/post_list/more_messages_button/more_messages_button.js
View file

@ -10,7 +10,7 @@ import EventEmitter from '@mm-redux/utils/event_emitter';
import {messageCount} from '@mm-redux/utils/post_list';
import TouchableWithFeedback from '@components/touchable_with_feedback';
import VectorIcon from '@components/vector_icon';
import CompassIcon from '@components/compass_icon';
import ViewTypes, {INDICATOR_BAR_HEIGHT} from '@constants/view';
import {makeStyleSheetFromTheme, hexToHue} from '@utils/theme';
import {t} from '@utils/i18n';
@ -320,9 +320,8 @@ export default class MoreMessageButton extends React.PureComponent {
/>
}
{!loadingPosts &&
<VectorIcon
name='md-arrow-up'
type='ion'
<CompassIcon
name='arrow-up'
style={styles.icon}
/>
}
@ -335,9 +334,8 @@ export default class MoreMessageButton extends React.PureComponent {
onPress={this.cancel}
>
<View style={styles.cancelContainer}>
<VectorIcon
name='md-close'
type='ion'
<CompassIcon
name='close'
style={styles.icon}
/>
</View>

12
app/components/post_list_retry.js
View file

@ -7,11 +7,11 @@ import {
Platform,
View,
} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import FormattedText from 'app/components/formatted_text';
import TouchableWithFeedback from 'app/components/touchable_with_feedback';
import {makeStyleSheetFromTheme} from 'app/utils/theme';
import CompassIcon from '@components/compass_icon';
import FormattedText from '@components/formatted_text';
import TouchableWithFeedback from '@components/touchable_with_feedback';
import {makeStyleSheetFromTheme} from '@utils/theme';
export default class PostListRetry extends PureComponent {
static propTypes = {
@ -31,8 +31,8 @@ export default class PostListRetry extends PureComponent {
type={'opacity'}
>
<View style={style.buttonWrapper}>
<Icon
name='md-refresh'
<CompassIcon
name='refresh'
size={50}
style={style.icon}
/>

41
app/components/post_profile_picture/post_profile_picture.js
View file

@ -6,8 +6,7 @@ import PropTypes from 'prop-types';
import {Platform, StyleSheet, View} from 'react-native';
import FastImage from 'react-native-fast-image';
import webhookIcon from '@assets/images/icons/webhook.jpg';
import AppIcon from '@components/app_icon';
import CompassIcon from '@components/compass_icon';
import ProfilePicture from '@components/profile_picture';
import TouchableWithFeedback from '@components/touchable_with_feedback';
import {ViewTypes} from '@constants';
@ -48,20 +47,41 @@ export default class PostProfilePicture extends PureComponent {
if (isSystemMessage && !fromAutoResponder && !isBot) {
return (
<View style={style.buffer}>
<AppIcon
<CompassIcon
name='mattermost'
color={theme.centerChannelColor}
height={ViewTypes.PROFILE_PICTURE_SIZE}
width={ViewTypes.PROFILE_PICTURE_SIZE}
size={ViewTypes.PROFILE_PICTURE_SIZE}
/>
</View>
);
}
if (fromWebHook && enablePostIconOverride) {
const icon = overrideIconUrl ? {uri: overrideIconUrl} : webhookIcon;
const frameSize = ViewTypes.PROFILE_PICTURE_SIZE;
const pictureSize = isEmoji ? ViewTypes.PROFILE_PICTURE_EMOJI_SIZE : ViewTypes.PROFILE_PICTURE_SIZE;
const borderRadius = isEmoji ? 0 : ViewTypes.PROFILE_PICTURE_SIZE / 2;
let iconComponent;
if (overrideIconUrl) {
const source = {uri: overrideIconUrl};
iconComponent = (
<FastImage
source={source}
style={{
height: pictureSize,
width: pictureSize,
}}
/>
);
} else {
iconComponent = (
<CompassIcon
name='webhook'
size={32}
/>
);
}
return (
<View
style={[{
@ -73,13 +93,7 @@ export default class PostProfilePicture extends PureComponent {
width: frameSize,
}, style.buffer]}
>
<FastImage
source={icon}
style={{
height: pictureSize,
width: pictureSize,
}}
/>
{iconComponent}
</View>
);
}
@ -89,6 +103,7 @@ export default class PostProfilePicture extends PureComponent {
<ProfilePicture
userId={userId}
size={ViewTypes.PROFILE_PICTURE_SIZE}
iconSize={24}
showStatus={showProfileStatus}
/>
);

39
app/components/profile_picture/profile_picture.js
View file

@ -5,11 +5,11 @@ import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {Platform, View} from 'react-native';
import FastImage from 'react-native-fast-image';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import placeholder from '@assets/images/profile.jpg';
import UserStatus from '@components/user_status';
import {Client4} from '@mm-redux/client';
import CompassIcon from '@components/compass_icon';
import UserStatus from '@components/user_status';
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
const STATUS_BUFFER = Platform.select({
@ -22,6 +22,7 @@ export default class ProfilePicture extends PureComponent {
isCurrentUser: PropTypes.bool.isRequired,
size: PropTypes.number,
statusSize: PropTypes.number,
iconSize: PropTypes.number,
user: PropTypes.object,
showStatus: PropTypes.bool,
status: PropTypes.string,
@ -108,12 +109,16 @@ export default class ProfilePicture extends PureComponent {
}
render() {
const {edit, showStatus, theme, user} = this.props;
const {edit, showStatus, theme, user, size} = this.props;
const {pictureUrl} = this.state;
const style = getStyleSheet(theme);
let statusIcon;
let statusStyle;
let containerStyle = {
width: size + STATUS_BUFFER,
height: size + STATUS_BUFFER,
};
if (edit) {
const iconColor = changeOpacity(theme.centerChannelColor, 0.6);
statusStyle = {
@ -122,8 +127,8 @@ export default class ProfilePicture extends PureComponent {
backgroundColor: theme.centerChannelBg,
};
statusIcon = (
<FontAwesomeIcon
name='camera'
<CompassIcon
name='camera-outline'
size={this.props.statusSize / 1.7}
color={iconColor}
/>
@ -158,16 +163,22 @@ export default class ProfilePicture extends PureComponent {
/>
);
} else {
containerStyle = {
width: size + (STATUS_BUFFER - 1),
height: size + (STATUS_BUFFER - 1),
backgroundColor: changeOpacity(theme.centerChannelColor, 0.08),
};
image = (
<FastImage
style={{width: this.props.size, height: this.props.size, borderRadius: this.props.size / 2}}
source={placeholder}
<CompassIcon
name='account-outline'
size={this.props.iconSize || this.props.size}
style={style.icon}
/>
);
}
return (
<View style={{width: this.props.size + STATUS_BUFFER, height: this.props.size + STATUS_BUFFER}}>
<View style={[style.container, containerStyle]}>
{image}
{(showStatus || edit) && (user && !user.is_bot) &&
<View style={[style.statusWrapper, statusStyle, {borderRadius: this.props.statusSize / 2}]}>
@ -181,6 +192,14 @@ export default class ProfilePicture extends PureComponent {
const getStyleSheet = makeStyleSheetFromTheme((theme) => {
return {
container: {
justifyContent: 'center',
alignItems: 'center',
borderRadius: 80,
},
icon: {
color: changeOpacity(theme.centerChannelColor, 0.48),
},
statusWrapper: {
position: 'absolute',
bottom: 0,

2
app/components/profile_picture_button.js
View file

@ -52,7 +52,7 @@ export default class ProfilePictureButton extends PureComponent {
textStyle: {
color: '#CC3239',
},
icon: 'trash',
icon: 'trash-can-outline',
iconStyle: {
color: '#CC3239',
},

36
app/components/reaction_picker/__snapshots__/reaction_picker.test.js.snap
View file

@ -247,21 +247,15 @@ exports[`Reactions Should match snapshot with default emojis 1`] = `
]
}
>
<Image
height={32}
source={
<Icon
allowFontScaling={false}
name="emoticon-plus-outline"
size={31.2}
style={
Object {
"testUri": "../../../dist/assets/images/icons/reaction.png",
"color": "#3d3c40",
}
}
style={
Array [
Object {
"tintColor": "#3d3c40",
},
]
}
width={32}
/>
</View>
</TouchableWithoutFeedback>
@ -515,21 +509,15 @@ exports[`Reactions Should match snapshot with default emojis 2`] = `
]
}
>
<Image
height={32}
source={
<Icon
allowFontScaling={false}
name="emoticon-plus-outline"
size={31.2}
style={
Object {
"testUri": "../../../dist/assets/images/icons/reaction.png",
"color": "#3d3c40",
}
}
style={
Array [
Object {
"tintColor": "#3d3c40",
},
]
}
width={32}
/>
</View>
</TouchableWithoutFeedback>

16
app/components/reaction_picker/reaction_picker.js
View file

@ -4,13 +4,12 @@
import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {
Image,
View,
TouchableWithoutFeedback,
} from 'react-native';
import CompassIcon from '@components/compass_icon';
import {paddingHorizontal as padding} from '@components/safe_area_view/iphone_x_spacing';
import addReactionIcon from '@assets/images/icons/reaction.png';
import {
REACTION_PICKER_HEIGHT,
DEFAULT_EMOJIS,
@ -92,11 +91,10 @@ export default class ReactionPicker extends PureComponent {
},
]}
>
<Image
source={addReactionIcon}
style={[style.iconImage]}
width={iconSize}
height={iconSize}
<CompassIcon
name='emoticon-plus-outline'
size={31.2}
style={style.icon}
/>
</View>
</TouchableWithoutFeedback>
@ -107,8 +105,8 @@ export default class ReactionPicker extends PureComponent {
const getStyleSheet = makeStyleSheetFromTheme((theme) => {
return {
iconImage: {
tintColor: theme.centerChannelColor,
icon: {
color: theme.centerChannelColor,
},
reactionListContainer: {
flex: 1,

14
app/components/reactions/__snapshots__/reactions.test.js.snap
View file

@ -145,17 +145,13 @@ exports[`Reactions should match snapshot 1`] = `
}
type="opacity"
>
<Image
source={
Object {
"testUri": "../../../dist/assets/images/icons/reaction.png",
}
}
<Icon
allowFontScaling={false}
name="emoticon-plus-outline"
size={24}
style={
Object {
"height": 23,
"tintColor": "rgba(61,60,64,0.5)",
"width": 23,
"color": "rgba(61,60,64,0.5)",
}
}
/>

19
app/components/reactions/reactions.js
View file

@ -3,15 +3,11 @@
import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {
Image,
View,
} from 'react-native';
import {View} from 'react-native';
import {intlShape} from 'react-intl';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import {showModal, showModalOverCurrentContext} from '@actions/navigation';
import addReactionIcon from '@assets/images/icons/reaction.png';
import CompassIcon from '@components/compass_icon';
import TouchableWithFeedback from '@components/touchable_with_feedback';
import {preventDoubleTap} from '@utils/tap';
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
@ -48,7 +44,7 @@ export default class Reactions extends PureComponent {
const screen = 'AddReaction';
const title = formatMessage({id: 'mobile.post_info.add_reaction', defaultMessage: 'Add Reaction'});
MaterialIcon.getImageSource('close', 20, theme.sidebarHeaderTextColor).then((source) => {
CompassIcon.getImageSource('close', 24, theme.sidebarHeaderTextColor).then((source) => {
const passProps = {
closeButton: source,
onEmojiPress: this.handleAddReactionToPost,
@ -140,8 +136,9 @@ export default class Reactions extends PureComponent {
style={[styles.reaction]}
type={'opacity'}
>
<Image
source={addReactionIcon}
<CompassIcon
name='emoticon-plus-outline'
size={24}
style={styles.addReaction}
/>
</TouchableWithFeedback>
@ -175,9 +172,7 @@ export default class Reactions extends PureComponent {
const getStyleSheet = makeStyleSheetFromTheme((theme) => {
return {
addReaction: {
tintColor: changeOpacity(theme.centerChannelColor, 0.5),
width: 23,
height: 23,
color: changeOpacity(theme.centerChannelColor, 0.5),
},
reaction: {
alignItems: 'center',

31
app/components/reply_icon.js
View file

@ -1,31 +0,0 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import Svg, {
Path,
} from 'react-native-svg';
export default class ReplyIcon extends PureComponent {
static propTypes = {
width: PropTypes.number.isRequired,
height: PropTypes.number.isRequired,
color: PropTypes.string.isRequired,
};
render() {
return (
<Svg
width={this.props.width}
height={this.props.height}
viewBox='-158 242 18 18'
>
<Path
d='M-142.2,252.6c-2-3-4.8-4.7-8.3-4.8v-3.3c0-0.2-0.1-0.3-0.2-0.3s-0.3,0-0.4,0.1l-6.9,6.2c-0.1,0.1-0.1,0.2-0.1,0.3 c0,0.1,0,0.2,0.1,0.3l6.9,6.4c0.1,0.1,0.3,0.1,0.4,0.1c0.1-0.1,0.2-0.2,0.2-0.4v-3.8c4.2,0,7.4,0.4,9.6,4.4c0.1,0.1,0.2,0.2,0.3,0.2 c0,0,0.1,0,0.1,0c0.2-0.1,0.3-0.3,0.2-0.4C-140.2,257.3-140.6,255-142.2,252.6z M-150.8,252.5c-0.2,0-0.4,0.2-0.4,0.4v3.3l-6-5.5 l6-5.3v2.8c0,0.2,0.2,0.4,0.4,0.4c3.3,0,6,1.5,8,4.5c0.5,0.8,0.9,1.6,1.2,2.3C-144,252.8-147.1,252.5-150.8,252.5z'
fill={this.props.color}
/>
</Svg>
);
}
}

72
app/components/search_bar/index.js
View file

@ -14,14 +14,12 @@ import {
} from 'react-native';
import {intlShape} from 'react-intl';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import EvilIcon from 'react-native-vector-icons/EvilIcons';
import {SearchBar} from 'react-native-elements';
import {memoizeResult} from '@mm-redux/utils/helpers';
import CustomPropTypes from 'app/constants/custom_prop_types';
import CompassIcon from '@components/compass_icon';
import CustomPropTypes from '@constants/custom_prop_types';
const LEFT_COMPONENT_INITIAL_POSITION = Platform.OS === 'ios' ? 7 : 0;
@ -236,16 +234,18 @@ export default class Search extends PureComponent {
let cancelIcon = null;
if (Platform.OS === 'ios') {
clearIcon = {
type: 'ionicon',
name: 'ios-close-circle',
size: 17,
color: searchBarStyle.clearIconColorIos,
};
clearIcon = (
<CompassIcon
name='close-circle'
size={18}
style={{color: searchBarStyle.clearIconColorIos}}
onPress={this.onClear}
/>
);
searchIcon = (
<EvilIcon
name='search'
<CompassIcon
name='magnify'
size={24}
style={[
styles.fullWidth,
@ -257,35 +257,39 @@ export default class Search extends PureComponent {
searchIcon = this.props.showArrow ?
(
<TouchableWithoutFeedback onPress={this.onCancel}>
<MaterialIcon
name='arrow-back'
<CompassIcon
name='arrow-left'
size={this.props.backArrowSize}
color={searchBarStyle.clearIconColorAndroid}
/>
</TouchableWithoutFeedback>
) :
{
type: 'material',
size: this.props.searchIconSize,
color: searchBarStyle.searchIconColor,
name: 'search',
};
(
<CompassIcon
name='magnify'
size={this.props.searchIconSize}
color={searchBarStyle.searchIconColor}
/>
);
// Making sure the icon won't change depending on whether the input is in focus on Android devices
cancelIcon = {
type: 'material',
size: 25,
color: searchBarStyle.clearIconColorAndroid,
name: 'arrow-back',
underlayColor: 'transparent',
};
cancelIcon = (
<CompassIcon
name='arrow-left'
size={25}
color={searchBarStyle.clearIconColorAndroid}
onPress={this.onCancel}
/>
);
clearIcon = {
type: 'material',
size: this.props.deleteIconSize,
color: searchBarStyle.clearIconColorAndroid,
name: 'close',
};
clearIcon = (
<CompassIcon
name='close'
size={this.props.deleteIconSize}
color={searchBarStyle.clearIconColorAndroid}
onPress={this.onClear}
/>
);
}
return (
@ -415,7 +419,7 @@ const getSearchBarStyle = memoizeResult((
},
searchIcon: {
color: tintColorSearch || placeholderTextColor,
top: 10,
top: 8,
},
searchIconColor: tintColorSearch || placeholderTextColor,
}));

33
app/components/show_more_button/__snapshots__/show_more_button.test.js.snap
View file

@ -4,11 +4,12 @@ exports[`ShowMoreButton should match, button snapshot 1`] = `
<View
style={Object {}}
>
<Text
<Icon
allowFontScaling={false}
name="plus"
size={18}
style={Object {}}
>
+
</Text>
/>
<FormattedText
defaultMessage="Show More"
id="post_info.message.show_more"
@ -21,11 +22,12 @@ exports[`ShowMoreButton should match, button snapshot 2`] = `
<View
style={Object {}}
>
<Text
<Icon
allowFontScaling={false}
name="minus"
size={18}
style={Object {}}
>
-
</Text>
/>
<FormattedText
defaultMessage="Show Less"
id="post_info.message.show_less"
@ -119,25 +121,24 @@ exports[`ShowMoreButton should match, full snapshot 1`] = `
}
}
>
<Text
<Icon
allowFontScaling={false}
name="plus"
size={18}
style={
Object {
"color": "#2389d7",
"fontSize": 16,
"fontWeight": "600",
"marginRight": 8,
"marginRight": 7,
}
}
>
+
</Text>
/>
<FormattedText
defaultMessage="Show More"
id="post_info.message.show_more"
style={
Object {
"color": "#2389d7",
"fontSize": 13,
"fontSize": 15,
"fontWeight": "600",
}
}

27
app/components/show_more_button/index.js
View file

@ -3,13 +3,14 @@
import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {Text, View} from 'react-native';
import {View} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import FormattedText from 'app/components/formatted_text';
import TouchableWithFeedback from 'app/components/touchable_with_feedback';
import {t} from 'app/utils/i18n';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
import CompassIcon from '@components/compass_icon';
import FormattedText from '@components/formatted_text';
import TouchableWithFeedback from '@components/touchable_with_feedback';
import {t} from '@utils/i18n';
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
export default class ShowMoreButton extends PureComponent {
static propTypes = {
@ -24,18 +25,22 @@ export default class ShowMoreButton extends PureComponent {
};
renderButton(showMore, style) {
let sign = '+';
let textId = t('post_info.message.show_more');
let textMessage = 'Show More';
let iconName = 'plus';
if (!showMore) {
sign = '-';
textId = t('post_info.message.show_less');
textMessage = 'Show Less';
iconName = 'minus';
}
return (
<View style={style.button}>
<Text style={style.sign}>{sign}</Text>
<CompassIcon
name={iconName}
size={18}
style={style.sign}
/>
<FormattedText
id={textId}
defaultMessage={textMessage}
@ -126,13 +131,11 @@ const getStyleSheet = makeStyleSheetFromTheme((theme, showMore) => {
},
sign: {
color: theme.linkColor,
fontSize: 16,
fontWeight: '600',
marginRight: 8,
marginRight: 7,
},
text: {
color: theme.linkColor,
fontSize: 13,
fontSize: 15,
fontWeight: '600',
},
dividerRight: {

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

@ -8,16 +8,16 @@ import {
View,
} from 'react-native';
import {intlShape} from 'react-intl';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import SearchBar from 'app/components/search_bar';
import {ViewTypes} from 'app/constants';
import {paddingLeft as padding} from 'app/components/safe_area_view/iphone_x_spacing';
import CompassIcon from '@components/compass_icon';
import SearchBar from '@components/search_bar';
import {paddingLeft as padding} from '@components/safe_area_view/iphone_x_spacing';
import {ViewTypes} from '@constants';
import {
changeOpacity,
makeStyleSheetFromTheme,
getKeyboardAppearanceFromTheme,
} from 'app/utils/theme';
} from '@utils/theme';
import List from './list';
import SwitchTeamsButton from './switch_teams_button';
@ -48,7 +48,7 @@ export default class ChannelsList extends PureComponent {
term: '',
};
MaterialIcon.getImageSource('close', 20, this.props.theme.sidebarHeaderTextColor).then((source) => {
CompassIcon.getImageSource('close', 24, this.props.theme.sidebarHeaderTextColor).then((source) => {
this.closeButton = source;
});
}
@ -137,7 +137,7 @@ export default class ChannelsList extends PureComponent {
placeholder={intl.formatMessage({id: 'mobile.channel_drawer.search', defaultMessage: 'Jump to...'})}
cancelTitle={intl.formatMessage({id: 'mobile.post.cancel', defaultMessage: 'Cancel'})}
backgroundColor='transparent'
inputHeight={33}
inputHeight={36}
inputStyle={searchBarInput}
containerStyle={styles.searchBar}
placeholderTextColor={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
@ -185,7 +185,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
},
action: {
color: changeOpacity(theme.sidebarText, 0.4),
fontSize: 26,
fontSize: 18,
fontWeight: '100',
},
actionContainer: {

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

@ -14,22 +14,21 @@ import {
View,
} from 'react-native';
import {intlShape} from 'react-intl';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import FontAwesomePro from 'react-native-vector-icons/Ionicons';
import EventEmitter from '@mm-redux/utils/event_emitter';
import EventEmitter from '@mm-redux/utils/event_emitter';
import {General} from '@mm-redux/constants';
import {debounce} from '@mm-redux/actions/helpers';
import ChannelItem from 'app/components/sidebars/main/channels_list/channel_item';
import {paddingLeft} from 'app/components/safe_area_view/iphone_x_spacing';
import {DeviceTypes, ListTypes, NavigationTypes} from 'app/constants';
import {SidebarSectionTypes} from 'app/constants/view';
import CompassIcon from '@components/compass_icon';
import ChannelItem from '@components/sidebars/main/channels_list/channel_item';
import {paddingLeft} from '@components/safe_area_view/iphone_x_spacing';
import {DeviceTypes, ListTypes, NavigationTypes} from '@constants';
import {SidebarSectionTypes} from '@constants/view';
import BottomSheet from 'app/utils/bottom_sheet';
import {t} from 'app/utils/i18n';
import {preventDoubleTap} from 'app/utils/tap';
import {showModal} from 'app/actions/navigation';
import BottomSheet from '@utils/bottom_sheet';
import {t} from '@utils/i18n';
import {preventDoubleTap} from '@utils/tap';
import {showModal} from '@actions/navigation';
const VIEWABILITY_CONFIG = {
...ListTypes.VISIBILITY_CONFIG_DEFAULTS,
@ -72,7 +71,7 @@ export default class List extends PureComponent {
onScrollBeginDrag: this.scrollBeginDrag,
};
MaterialIcon.getImageSource('close', 20, this.props.theme.sidebarHeaderTextColor).then((source) => {
CompassIcon.getImageSource('close', 24, this.props.theme.sidebarHeaderTextColor).then((source) => {
this.closeButton = source;
});
}
@ -304,8 +303,8 @@ export default class List extends PureComponent {
underlayColor={'transparent'}
hitSlop={styles.hitSlop}
>
<FontAwesomePro
name='ios-add-circle-outline'
<CompassIcon
name='plus'
ref={anchor ? this.combinedActionsRef : null}
style={styles.action}
/>

19
app/components/sidebars/main/channels_list/switch_teams_button/switch_teams_button.js
View file

@ -7,13 +7,12 @@ import {
TouchableHighlight,
View,
} from 'react-native';
import AwesomeIcon from 'react-native-vector-icons/FontAwesome';
import Badge from 'app/components/badge';
import {preventDoubleTap} from 'app/utils/tap';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
import Badge from '@components/badge';
import CompassIcon from '@components/compass_icon';
import TeamIcon from 'app/components/team_icon';
import {preventDoubleTap} from '@utils/tap';
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
export default class SwitchTeamsButton extends React.PureComponent {
static propTypes = {
@ -68,9 +67,9 @@ export default class SwitchTeamsButton extends React.PureComponent {
underlayColor={changeOpacity(theme.sidebarHeaderBg, 0.5)}
>
<View style={styles.switcherContainer}>
<AwesomeIcon
<CompassIcon
name='chevron-left'
size={12}
size={24}
style={styles.switcherArrow}
/>
<TeamIcon
@ -122,8 +121,8 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
},
switcherArrow: {
color: theme.sidebarHeaderBg,
marginRight: 8,
top: 1,
left: -2,
},
switcherContainer: {
alignItems: 'center',
@ -131,9 +130,9 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
borderRadius: 2,
flexDirection: 'row',
justifyContent: 'center',
height: 32,
height: 36,
marginRight: 12,
width: 56,
width: 57,
},
teamIcon: {
width: 24,

13
app/components/sidebars/main/channels_list/unread_indicator/unread_indicator.base.js
View file

@ -9,10 +9,10 @@ import {
View,
ViewPropTypes,
} from 'react-native';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import FormattedText from 'app/components/formatted_text';
import {makeStyleSheetFromTheme} from 'app/utils/theme';
import CompassIcon from '@components/compass_icon';
import FormattedText from '@components/formatted_text';
import {makeStyleSheetFromTheme} from '@utils/theme';
export default class UnreadIndicatorBase extends PureComponent {
static propTypes = {
@ -36,9 +36,8 @@ export default class UnreadIndicatorBase extends PureComponent {
style={[style.wrapper, this.props.style]}
pointerEvents={visible ? 'auto' : 'none'}
>
<MaterialIcon
size={15}
name='arrow-upward'
<CompassIcon
name='arrow-up'
color={theme.mentionColor}
style={style.arrow}
/>
@ -65,7 +64,7 @@ export default class UnreadIndicatorBase extends PureComponent {
export const getStyleSheet = makeStyleSheetFromTheme((theme) => {
return {
arrow: {
fontSize: 16,
fontSize: 18,
marginRight: 8,
position: 'relative',
textAlignVertical: 'center',

19
app/components/sidebars/main/teams_list/teams_list.js
View file

@ -13,17 +13,18 @@ import {
View,
} from 'react-native';
import {intlShape} from 'react-intl';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import FormattedText from 'app/components/formatted_text';
import {DeviceTypes, ListTypes, ViewTypes} from 'app/constants';
import {showModal} from '@actions/navigation';
import CompassIcon from '@components/compass_icon';
import FormattedText from '@components/formatted_text';
import {DeviceTypes, ListTypes, ViewTypes} from '@constants';
import {preventDoubleTap} from '@utils/tap';
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
import {removeProtocol} from '@utils/url';
import tracker from '@utils/time_tracker';
import {getCurrentServerUrl} from 'app/init/credentials';
import {preventDoubleTap} from 'app/utils/tap';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
import {removeProtocol} from 'app/utils/url';
import tracker from 'app/utils/time_tracker';
import telemetry from 'app/telemetry';
import {showModal} from 'app/actions/navigation';
import TeamsListItem from './teams_list_item';
@ -56,7 +57,7 @@ export default class TeamsList extends PureComponent {
serverUrl: '',
};
MaterialIcon.getImageSource('close', 20, props.theme.sidebarHeaderTextColor).then((source) => {
CompassIcon.getImageSource('close', 24, props.theme.sidebarHeaderTextColor).then((source) => {
this.closeButton = source;
});

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

@ -8,13 +8,13 @@ import {
TouchableHighlight,
View,
} from 'react-native';
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';
import Badge from '@components/badge';
import CompassIcon from '@components/compass_icon';
import TeamIcon from '@components/team_icon';
import {paddingLeft as padding} from '@components/safe_area_view/iphone_x_spacing';
import {preventDoubleTap} from '@utils/tap';
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
export default class TeamsListItem extends React.PureComponent {
static propTypes = {
@ -65,8 +65,8 @@ export default class TeamsListItem extends React.PureComponent {
if (teamId === currentTeamId) {
current = (
<View style={styles.checkmarkContainer}>
<IonIcon
name='md-checkmark'
<CompassIcon
name='check'
style={styles.checkmark}
/>
</View>

17
app/components/sidebars/settings/drawer_item.js
View file

@ -5,9 +5,9 @@ import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {TouchableOpacity, View} from 'react-native';
import FormattedText from 'app/components/formatted_text';
import VectorIcon from 'app/components/vector_icon.js';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
import CompassIcon from '@components/compass_icon';
import FormattedText from '@components/formatted_text';
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
export default class DrawerItem extends PureComponent {
static propTypes = {
@ -15,7 +15,6 @@ export default class DrawerItem extends PureComponent {
defaultMessage: PropTypes.string,
i18nId: PropTypes.string,
iconName: PropTypes.string,
iconType: PropTypes.oneOf(['fontawesome', 'foundation', 'ion', 'material']),
isDestructor: PropTypes.bool,
labelComponent: PropTypes.node,
leftComponent: PropTypes.node,
@ -36,7 +35,6 @@ export default class DrawerItem extends PureComponent {
defaultMessage,
i18nId,
iconName,
iconType,
isDestructor,
labelComponent,
leftComponent,
@ -59,11 +57,10 @@ export default class DrawerItem extends PureComponent {
let icon;
if (leftComponent) {
icon = leftComponent;
} else if (iconType && iconName) {
} else if (iconName) {
icon = (
<VectorIcon
<CompassIcon
name={iconName}
type={iconType}
style={[style.icon, destructor]}
/>
);
@ -120,8 +117,8 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
marginLeft: 5,
},
icon: {
color: theme.linkColor,
fontSize: 22,
color: changeOpacity(theme.centerChannelColor, 0.64),
fontSize: 24,
},
wrapper: {
flex: 1,

32
app/components/sidebars/settings/settings_sidebar_base.js
View file

@ -4,17 +4,17 @@
import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {ScrollView, View} from 'react-native';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import {General} from '@mm-redux/constants';
import EventEmitter from '@mm-redux/utils/event_emitter';
import {showModal, showModalOverCurrentContext, dismissModal} from 'app/actions/navigation';
import UserStatus from 'app/components/user_status';
import {NavigationTypes} from 'app/constants';
import {confirmOutOfOfficeDisabled} from 'app/utils/status';
import {preventDoubleTap} from 'app/utils/tap';
import {t} from 'app/utils/i18n';
import {showModal, showModalOverCurrentContext, dismissModal} from '@actions/navigation';
import CompassIcon from '@components/compass_icon';
import UserStatus from '@components/user_status';
import {NavigationTypes} from '@constants';
import {confirmOutOfOfficeDisabled} from '@utils/status';
import {preventDoubleTap} from '@utils/tap';
import {t} from '@utils/i18n';
import DrawerItem from './drawer_item';
import UserInfo from './user_info';
@ -133,7 +133,7 @@ export default class SettingsSidebarBase extends PureComponent {
this.closeSettingsSidebar();
if (!this.closeButton) {
this.closeButton = await MaterialIcon.getImageSource('close', 20, this.props.theme.sidebarHeaderTextColor);
this.closeButton = await CompassIcon.getImageSource('close', 24, this.props.theme.sidebarHeaderTextColor);
}
const options = {
@ -172,7 +172,7 @@ export default class SettingsSidebarBase extends PureComponent {
renderUserStatusIcon = (userId) => {
return (
<UserStatus
size={18}
size={24}
userId={userId}
/>
);
@ -211,8 +211,7 @@ export default class SettingsSidebarBase extends PureComponent {
<DrawerItem
defaultMessage='Recent Mentions'
i18nId='search_header.title2'
iconName='ios-at'
iconType='ion'
iconName='at'
onPress={this.goToMentions}
separator={true}
theme={theme}
@ -220,8 +219,7 @@ export default class SettingsSidebarBase extends PureComponent {
<DrawerItem
defaultMessage='Saved Messages'
i18nId='search_header.title3'
iconName='ios-bookmark-outline'
iconType='ion'
iconName='bookmark-outline'
onPress={this.goToFlagged}
separator={false}
theme={theme}
@ -232,8 +230,7 @@ export default class SettingsSidebarBase extends PureComponent {
<DrawerItem
defaultMessage='Edit Profile'
i18nId='mobile.routes.edit_profile'
iconName='ios-person'
iconType='ion'
iconName='pencil-outline'
onPress={this.goToEditProfile}
separator={true}
theme={theme}
@ -241,8 +238,7 @@ export default class SettingsSidebarBase extends PureComponent {
<DrawerItem
defaultMessage='Settings'
i18nId='mobile.routes.settings'
iconName='ios-options'
iconType='ion'
iconName='settings-outline'
onPress={this.goToSettings}
separator={false}
theme={theme}
@ -251,9 +247,9 @@ export default class SettingsSidebarBase extends PureComponent {
<View style={style.separator}/>
<View style={style.block}>
<DrawerItem
centered={true}
defaultMessage='Logout'
i18nId='sidebar_right_menu.logout'
iconName='exit-to-app'
isDestructor={true}
onPress={this.logout}
separator={false}

3
app/components/sidebars/settings/user_info/user_info.js
View file

@ -39,7 +39,8 @@ export default class UserInfo extends PureComponent {
<TouchableOpacity onPress={onPress}>
<View style={style.container}>
<ProfilePicture
size={50}
size={48}
iconSize={28}
showStatus={false}
userId={user.id}
/>

11
app/components/start/empty_toolbar.js
View file

@ -5,10 +5,9 @@ import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {Platform, View} from 'react-native';
import {DeviceTypes, ViewTypes} from 'app/constants';
import {makeStyleSheetFromTheme} from 'app/utils/theme';
import Icon from 'react-native-vector-icons/Ionicons';
import CompassIcon from '@components/compass_icon';
import {DeviceTypes, ViewTypes} from '@constants';
import {makeStyleSheetFromTheme} from '@utils/theme';
const {
ANDROID_TOP_LANDSCAPE,
@ -54,8 +53,8 @@ export default class EmptyToolbar extends PureComponent {
<View style={[style.header, padding, {height}]}>
<View style={style.button_container}>
<View style={style.button_wrapper}>
<Icon
name='md-menu'
<CompassIcon
name='menu'
size={25}
color={theme.sidebarHeaderTextColor}
/>

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