diff --git a/android/app/src/main/assets/fonts/Mattermost-Regular.otf b/android/app/src/main/assets/fonts/Mattermost-Regular.otf new file mode 100644 index 000000000..faedbe935 Binary files /dev/null and b/android/app/src/main/assets/fonts/Mattermost-Regular.otf differ diff --git a/app/components/__snapshots__/badge.test.js.snap b/app/components/__snapshots__/badge.test.js.snap index f627a6671..4ba6eb7c7 100644 --- a/app/components/__snapshots__/badge.test.js.snap +++ b/app/components/__snapshots__/badge.test.js.snap @@ -5,63 +5,75 @@ exports[`Badge should match snapshot 1`] = ` style={ Array [ Object { - "backgroundColor": "#444", "borderRadius": 20, - "height": 20, - "padding": 12, - "paddingBottom": 3, - "paddingTop": 3, "position": "absolute", "right": 30, "top": 2, }, Object { - "backgroundColor": "#ffffff", - }, - Object { - "opacity": 0, + "borderColor": "#000000", }, ] } > - - 1 - + + 99+ + + diff --git a/app/components/badge.js b/app/components/badge.js index 62935020e..190ab239d 100644 --- a/app/components/badge.js +++ b/app/components/badge.js @@ -20,6 +20,7 @@ export default class Badge extends PureComponent { }; static propTypes = { + containerStyle: ViewPropTypes.style, count: PropTypes.number.isRequired, extraPaddingHorizontal: PropTypes.number, style: ViewPropTypes.style, @@ -66,9 +67,13 @@ export default class Badge extends PureComponent { } }; + setBadgeRef = (ref) => { + this.badgeContainerRef = ref; + }; + setNativeProps = (props) => { - if (this.mounted && this.refs.badgeContainer) { - this.refs.badgeContainer.setNativeProps(props); + if (this.mounted && this.badgeContainerRef) { + this.badgeContainerRef.setNativeProps(props); } }; @@ -95,7 +100,7 @@ export default class Badge extends PureComponent { }; renderText = () => { - const {count} = this.props; + const {containerStyle, count, style} = this.props; let unreadCount = null; let unreadIndicator = null; if (count < 0) { @@ -110,25 +115,33 @@ export default class Badge extends PureComponent { ); } else { + let mentionCount = count; + if (count > 99) { + mentionCount = '99+'; + } + unreadCount = ( - {count.toString()} + {mentionCount.toString()} ); } + return ( - - - {unreadCount} - {unreadIndicator} + + + + {unreadCount} + {unreadIndicator} + ); @@ -153,11 +166,13 @@ export default class Badge extends PureComponent { const styles = StyleSheet.create({ badge: { backgroundColor: '#444', - borderRadius: 20, height: 20, padding: 12, paddingTop: 3, paddingBottom: 3, + }, + badgeContainer: { + borderRadius: 20, position: 'absolute', right: 30, top: 2, @@ -173,10 +188,10 @@ const styles = StyleSheet.create({ color: 'white', }, unreadIndicator: { - height: 4, - width: 4, + height: 5, + width: 5, backgroundColor: '#444', - borderRadius: 4, + borderRadius: 5, }, verticalAlign: { flex: 1, diff --git a/app/components/badge.test.js b/app/components/badge.test.js index 7e2a05975..808bd6e47 100644 --- a/app/components/badge.test.js +++ b/app/components/badge.test.js @@ -9,9 +9,10 @@ import Badge from './badge'; describe('Badge', () => { const baseProps = { - count: 1, + count: 100, countStyle: {color: '#145dbf', fontSize: 10}, style: {backgroundColor: '#ffffff'}, + containerStyle: {borderColor: '#000000'}, onPress: jest.fn(), }; @@ -22,6 +23,6 @@ describe('Badge', () => { expect(wrapper.instance().renderText()).toMatchSnapshot(); expect(wrapper.find(TouchableWithoutFeedback).exists()).toEqual(true); - expect(wrapper.find(Text).first().props().children).toContain('1'); + expect(wrapper.find(Text).first().props().children).toContain('99+'); }); }); diff --git a/app/components/bot_tag.js b/app/components/bot_tag.js index d4d1c25bd..e18201091 100644 --- a/app/components/bot_tag.js +++ b/app/components/bot_tag.js @@ -41,8 +41,6 @@ const createStyleSheet = makeStyleSheetFromTheme((theme) => { alignSelf: 'center', backgroundColor: changeOpacity(theme.centerChannelColor, 0.15), borderRadius: 2, - color: theme.centerChannelColor, - fontWeight: '600', marginRight: 2, marginBottom: 1, ...Platform.select({ @@ -55,7 +53,9 @@ const createStyleSheet = makeStyleSheetFromTheme((theme) => { paddingHorizontal: 4, }, botText: { + color: theme.centerChannelColor, fontSize: 10, + fontWeight: '600', }, }; }); diff --git a/app/components/channel_icon.js b/app/components/channel_icon.js index c0969c005..9e2db77b5 100644 --- a/app/components/channel_icon.js +++ b/app/components/channel_icon.js @@ -4,7 +4,6 @@ import React from 'react'; import PropTypes from 'prop-types'; import { - Image, Text, View, } from 'react-native'; @@ -86,45 +85,45 @@ export default class ChannelIcon extends React.PureComponent { ); } else if (isBot) { icon = ( ); } else if (hasDraft) { icon = ( ); } else if (type === General.OPEN_CHANNEL) { icon = ( ); } else if (type === General.PRIVATE_CHANNEL) { icon = ( ); } else if (type === General.GM_CHANNEL) { icon = ( - - + + {membersCount} @@ -133,33 +132,37 @@ export default class ChannelIcon extends React.PureComponent { switch (status) { case General.AWAY: icon = ( - ); break; case General.DND: icon = ( - ); break; case General.ONLINE: icon = ( - ); break; default: icon = ( - ); break; @@ -167,7 +170,7 @@ export default class ChannelIcon extends React.PureComponent { } return ( - + {icon} ); @@ -192,27 +195,26 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { iconInfo: { color: theme.centerChannelColor, }, - iconBot: { - marginLeft: -5, - }, groupBox: { alignSelf: 'flex-start', alignItems: 'center', + backgroundColor: changeOpacity(theme.sidebarText, 0.3), + borderColor: changeOpacity(theme.sidebarText, 0.3), borderWidth: 1, - borderColor: changeOpacity(theme.sidebarText, 0.4), + borderRadius: 2, justifyContent: 'center', }, groupBoxActive: { - borderColor: theme.sidebarTextActiveColor, + backgroundColor: changeOpacity(theme.sidebarTextActiveColor, 0.3), }, groupBoxUnread: { - borderColor: theme.sidebarUnreadText, + backgroundColor: changeOpacity(theme.sidebarUnreadText, 0.3), }, groupBoxInfo: { - borderColor: theme.centerChannelColor, + backgroundColor: changeOpacity(theme.centerChannelColor, 0.3), }, group: { - color: changeOpacity(theme.sidebarText, 0.4), + color: changeOpacity(theme.sidebarText, 0.6), fontSize: 10, fontWeight: '600', }, diff --git a/app/components/fade.js b/app/components/fade.js index 55c78f70a..bb7ac30ed 100644 --- a/app/components/fade.js +++ b/app/components/fade.js @@ -10,8 +10,10 @@ export const FADE_DURATION = 100; export default class Fade extends PureComponent { static propTypes = { children: PropTypes.node.isRequired, + duration: PropTypes.number, style: PropTypes.object, visible: PropTypes.bool.isRequired, + disableScale: PropTypes.bool, }; constructor(props) { @@ -27,7 +29,7 @@ export default class Fade extends PureComponent { this.state.fadeAnim, { toValue: prevProps.visible ? 0 : 1, - duration: FADE_DURATION, + duration: this.props.duration || FADE_DURATION, useNativeDriver: true, } ).start(); @@ -35,6 +37,7 @@ export default class Fade extends PureComponent { } render() { + const {disableScale} = this.props; const {fadeAnim} = this.state; return ( @@ -42,7 +45,7 @@ export default class Fade extends PureComponent { style={{ ...this.props.style, opacity: fadeAnim, - transform: [{scale: fadeAnim}], + transform: disableScale ? [] : [{scale: fadeAnim}], }} > {this.props.children} diff --git a/app/components/sidebars/drawer_layout.js b/app/components/sidebars/drawer_layout.js index a49925163..73dacd416 100644 --- a/app/components/sidebars/drawer_layout.js +++ b/app/components/sidebars/drawer_layout.js @@ -8,6 +8,7 @@ import React, { Component } from 'react'; import { Animated, Dimensions, + Easing, Keyboard, PanResponder, StyleSheet, @@ -183,7 +184,7 @@ export default class DrawerLayout extends Component { /* Overlay styles */ const overlayOpacity = this.openValue.interpolate({ inputRange: [0, 1], - outputRange: [0, 0.7], + outputRange: [0, 0.5], extrapolate: 'clamp', }); const animatedOverlayStyles = { opacity: overlayOpacity }; @@ -274,10 +275,10 @@ export default class DrawerLayout extends Component { openDrawer = (options: DrawerMovementOptionType = {}) => { if (!this.props.isTablet) { this._emitStateChanged(SETTLING); - Animated.spring(this.openValue, { + Animated.timing(this.openValue, { toValue: 1, - bounciness: 0, - restSpeedThreshold: 0.1, + duration: 150, + easing: Easing.out(Easing.cubic), useNativeDriver: this.props.useNativeAnimations, ...options, }).start(() => { @@ -295,10 +296,10 @@ export default class DrawerLayout extends Component { closeDrawer = (options: DrawerMovementOptionType = {}) => { this._emitStateChanged(SETTLING); - Animated.spring(this.openValue, { + Animated.timing(this.openValue, { toValue: 0, - bounciness: 0, - restSpeedThreshold: 1, + duration: 150, + easing: Easing.out(Easing.cubic), useNativeDriver: this.props.useNativeAnimations, ...options, }).start(() => { diff --git a/app/components/sidebars/main/channels_list/channel_item/__snapshots__/channel_item.test.js.snap b/app/components/sidebars/main/channels_list/channel_item/__snapshots__/channel_item.test.js.snap index 821ee00ee..aee95be22 100644 --- a/app/components/sidebars/main/channels_list/channel_item/__snapshots__/channel_item.test.js.snap +++ b/app/components/sidebars/main/channels_list/channel_item/__snapshots__/channel_item.test.js.snap @@ -82,14 +82,16 @@ exports[`ChannelItem should match snapshot 1`] = ` Array [ Object { "alignSelf": "center", - "color": "rgba(255,255,255,0.4)", + "color": "rgba(255,255,255,0.88)", "flex": 1, - "fontSize": 14, - "fontWeight": "600", + "fontFamily": "Open Sans", + "fontSize": 16, + "lineHeight": 24, "paddingRight": 10, }, Object { "color": "#ffffff", + "fontWeight": "500", }, ] } @@ -195,10 +197,11 @@ exports[`ChannelItem should match snapshot for current user i.e currentUser (you Array [ Object { "alignSelf": "center", - "color": "rgba(255,255,255,0.4)", + "color": "rgba(255,255,255,0.88)", "flex": 1, - "fontSize": 14, - "fontWeight": "600", + "fontFamily": "Open Sans", + "fontSize": 16, + "lineHeight": 24, "paddingRight": 10, }, Object { @@ -308,10 +311,11 @@ exports[`ChannelItem should match snapshot for current user i.e currentUser (you Array [ Object { "alignSelf": "center", - "color": "rgba(255,255,255,0.4)", + "color": "rgba(255,255,255,0.88)", "flex": 1, - "fontSize": 14, - "fontWeight": "600", + "fontFamily": "Open Sans", + "fontSize": 16, + "lineHeight": 24, "paddingRight": 10, }, Object { @@ -421,10 +425,11 @@ exports[`ChannelItem should match snapshot for deactivated user and is currentCh Array [ Object { "alignSelf": "center", - "color": "rgba(255,255,255,0.4)", + "color": "rgba(255,255,255,0.88)", "flex": 1, - "fontSize": 14, - "fontWeight": "600", + "fontFamily": "Open Sans", + "fontSize": 16, + "lineHeight": 24, "paddingRight": 10, }, Object { @@ -523,14 +528,16 @@ exports[`ChannelItem should match snapshot for deactivated user and is searchRes Array [ Object { "alignSelf": "center", - "color": "rgba(255,255,255,0.4)", + "color": "rgba(255,255,255,0.88)", "flex": 1, - "fontSize": 14, - "fontWeight": "600", + "fontFamily": "Open Sans", + "fontSize": 16, + "lineHeight": 24, "paddingRight": 10, }, Object { "color": "#ffffff", + "fontWeight": "500", }, ] } @@ -631,14 +638,16 @@ exports[`ChannelItem should match snapshot with draft 1`] = ` Array [ Object { "alignSelf": "center", - "color": "rgba(255,255,255,0.4)", + "color": "rgba(255,255,255,0.88)", "flex": 1, - "fontSize": 14, - "fontWeight": "600", + "fontFamily": "Open Sans", + "fontSize": 16, + "lineHeight": 24, "paddingRight": 10, }, Object { "color": "#ffffff", + "fontWeight": "500", }, ] } @@ -735,14 +744,16 @@ exports[`ChannelItem should match snapshot with mentions and muted 1`] = ` Array [ Object { "alignSelf": "center", - "color": "rgba(255,255,255,0.4)", + "color": "rgba(255,255,255,0.88)", "flex": 1, - "fontSize": 14, - "fontWeight": "600", + "fontFamily": "Open Sans", + "fontSize": 16, + "lineHeight": 24, "paddingRight": 10, }, Object { "color": "#ffffff", + "fontWeight": "500", }, ] } @@ -750,26 +761,33 @@ exports[`ChannelItem should match snapshot with mentions and muted 1`] = ` display_name diff --git a/app/components/sidebars/main/channels_list/channel_item/channel_item.js b/app/components/sidebars/main/channels_list/channel_item/channel_item.js index 1131f50bf..58654311b 100644 --- a/app/components/sidebars/main/channels_list/channel_item/channel_item.js +++ b/app/components/sidebars/main/channels_list/channel_item/channel_item.js @@ -160,10 +160,12 @@ export default class ChannelItem extends PureComponent { if (mentions) { badge = ( ); } @@ -238,31 +240,38 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { paddingLeft: 11, }, text: { - color: changeOpacity(theme.sidebarText, 0.4), - fontSize: 14, - fontWeight: '600', + color: changeOpacity(theme.sidebarText, 0.88), + fontSize: 16, + lineHeight: 24, paddingRight: 10, flex: 1, alignSelf: 'center', + fontFamily: 'Open Sans', }, textActive: { color: theme.sidebarTextActiveColor, }, textUnread: { color: theme.sidebarUnreadText, + fontWeight: '500', }, badge: { backgroundColor: theme.mentionBg, - borderColor: theme.sidebarHeaderBg, - borderRadius: 10, - borderWidth: 1, padding: 3, position: 'relative', - right: 16, + height: 21, + }, + badgeContainer: { + borderColor: theme.sidebarHeaderBg, + borderRadius: 14, + borderWidth: 0, + right: 0, + top: 11, + marginRight: 16, }, mention: { color: theme.mentionColor, - fontSize: 10, + fontSize: 12, }, muted: { opacity: 0.5, diff --git a/app/components/sidebars/main/channels_list/channels_list.js b/app/components/sidebars/main/channels_list/channels_list.js index 6ac8979cb..9bf4b94d5 100644 --- a/app/components/sidebars/main/channels_list/channels_list.js +++ b/app/components/sidebars/main/channels_list/channels_list.js @@ -180,13 +180,34 @@ export default class ChannelsList extends PureComponent { const getStyleSheet = makeStyleSheetFromTheme((theme) => { return { + above: { + backgroundColor: theme.mentionBg, + top: 40, + }, + action: { + color: changeOpacity(theme.sidebarText, 0.4), + fontSize: 26, + fontWeight: '100', + }, + actionContainer: { + alignItems: 'center', + justifyContent: 'center', + marginRight: 16, + }, container: { backgroundColor: theme.sidebarBg, flex: 1, }, + header: { + color: theme.sidebarHeaderTextColor, + flex: 1, + fontSize: 17, + fontWeight: 'normal', + paddingLeft: 16, + }, headerContainer: { alignItems: 'center', - paddingLeft: 10, + paddingLeft: 13, backgroundColor: theme.sidebarBg, flexDirection: 'row', borderBottomWidth: 1, @@ -196,36 +217,15 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { height: ANDROID_TOP_PORTRAIT, }, ios: { - height: 44, + height: 54, }, }), }, - header: { - color: theme.sidebarHeaderTextColor, - flex: 1, - fontSize: 17, - fontWeight: 'normal', - paddingLeft: 16, - }, - switchContainer: { - position: 'relative', - top: -1, - }, - titleContainer: { // These aren't used by this component, but they are passed down to the list component - alignItems: 'center', - flex: 1, - flexDirection: 'row', - height: 48, - marginLeft: 16, - }, - title: { - flex: 1, - color: theme.sidebarText, - opacity: 1, - fontSize: 15, - fontWeight: '400', - letterSpacing: 0.8, - lineHeight: 18, + hitSlop: { + bottom: 10, + left: 10, + right: 10, + top: 10, }, searchContainer: { flex: 1, @@ -239,26 +239,36 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { }, }), }, - divider: { - backgroundColor: changeOpacity(theme.sidebarText, 0.1), + separator: { + backgroundColor: changeOpacity(theme.sidebarHeaderTextColor, 0.1), height: 1, width: '100%', }, - actionContainer: { - alignItems: 'center', - height: 48, + separatorContainer: { + flex: 1, justifyContent: 'center', - width: 50, + marginHorizontal: 16, }, - action: { + switchContainer: { + position: 'relative', + top: -1, + }, + title: { color: theme.sidebarText, - fontSize: 20, - fontWeight: '500', + opacity: 0.4, + fontSize: 12, + fontWeight: '600', + letterSpacing: 0.2, lineHeight: 18, + fontFamily: 'Open Sans', }, - above: { - backgroundColor: theme.mentionBg, - top: 9, + titleContainer: { // These aren't used by this component, but they are passed down to the list component + alignItems: 'center', + backgroundColor: theme.sidebarBg, + flex: 1, + flexDirection: 'row', + height: 40, + paddingLeft: 16, }, }; }); diff --git a/app/components/sidebars/main/channels_list/filtered_list/filtered_list.js b/app/components/sidebars/main/channels_list/filtered_list/filtered_list.js index 3684fc4f9..12b818906 100644 --- a/app/components/sidebars/main/channels_list/filtered_list/filtered_list.js +++ b/app/components/sidebars/main/channels_list/filtered_list/filtered_list.js @@ -5,17 +5,13 @@ import deepEqual from 'deep-equal'; import React, {Component} from 'react'; import PropTypes from 'prop-types'; import { - FlatList, Keyboard, Platform, + SectionList, Text, - TouchableHighlight, View, } from 'react-native'; import {injectIntl, intlShape} from 'react-intl'; -import MaterialIcon from 'react-native-vector-icons/MaterialIcons'; - -import {changeOpacity} from 'app/utils/theme'; import {General} from 'mattermost-redux/constants'; import {sortChannelsByDisplayName} from 'mattermost-redux/utils/channel_utils'; @@ -119,20 +115,6 @@ class FilteredList extends Component { this.props.onSelectChannel(channel, currentChannel.id); }; - createChannelElement = (channel) => { - return ( - - ); - }; - filterChannels = (channels, term) => { if (!term) { return channels; @@ -330,11 +312,10 @@ class FilteredList extends Component { } buildSectionsForSearch = (props, term) => { - const items = []; - const {searchOrder, styles} = props; + const sections = []; + const {searchOrder} = props; const sectionBuilders = this.getSectionBuilders(); - let previousDataLength = 0; for (const section of searchOrder) { if (sectionBuilders.hasOwnProperty(section)) { const sectionBuilder = sectionBuilders[section]; @@ -342,14 +323,12 @@ class FilteredList extends Component { const data = builder(props, term); if (data.length) { - const title = this.renderTitle(styles, id, defaultMessage, null, previousDataLength > 0, true); - items.push(title, ...data); - previousDataLength = data.length; + sections.push({id, defaultMessage, data}); } } } - return items; + return sections; }; buildData = (props, term) => { @@ -360,74 +339,59 @@ class FilteredList extends Component { return this.buildSectionsForSearch(props, term); }; - renderSectionAction = (styles, action) => { - const {theme} = this.props; - return ( - - - - ); - }; + keyExtractor = (item) => item.id || item; - renderDivider = (styles, marginLeft) => { + renderItem = ({item}) => { return ( - ); }; - renderItem = ({item}) => { - if (!item.isTitle) { - return this.createChannelElement(item); - } - return item.title; - }; - - renderTitle = (styles, id, defaultMessage, action, topDivider, bottomDivider) => { - const {formatMessage} = this.props.intl; - - return { + renderSectionHeader = ({section}) => { + const {intl, isLandscape, styles} = this.props; + const { + defaultMessage, id, - isTitle: true, - title: ( - - {topDivider && this.renderDivider(styles, 0)} - - - {formatMessage({id, defaultMessage}).toUpperCase()} - - {action && this.renderSectionAction(styles, action)} + } = section; + + return ( + + + + {intl.formatMessage({id, defaultMessage}).toUpperCase()} + + + - {bottomDivider && this.renderDivider(styles, 16)} - ), - }; + + ); }; render() { const {styles} = this.props; const {dataSource} = this.state; - return ( - item.id} - onViewableItemsChanged={this.updateUnreadIndicators} + renderSectionHeader={this.renderSectionHeader} + keyExtractor={this.keyExtractor} {...this.keyboardDismissProp} keyboardShouldPersistTaps={'always'} maxToRenderPerBatch={10} + stickySectionHeadersEnabled={true} viewabilityConfig={VIEWABILITY_CONFIG} /> diff --git a/app/components/sidebars/main/channels_list/list/list.js b/app/components/sidebars/main/channels_list/list/list.js index 5e35c0c4f..691406d83 100644 --- a/app/components/sidebars/main/channels_list/list/list.js +++ b/app/components/sidebars/main/channels_list/list/list.js @@ -6,7 +6,6 @@ import PropTypes from 'prop-types'; import { Dimensions, findNodeHandle, - InteractionManager, Keyboard, Platform, SectionList, @@ -16,18 +15,18 @@ import { } 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 {General} from 'mattermost-redux/constants'; import {debounce} from 'mattermost-redux/actions/helpers'; import ChannelItem from 'app/components/sidebars/main/channels_list/channel_item'; -import {DeviceTypes, ListTypes, ViewTypes} from 'app/constants'; +import {DeviceTypes, ListTypes} from 'app/constants'; import {SidebarSectionTypes} from 'app/constants/view'; import BottomSheet from 'app/utils/bottom_sheet'; import {t} from 'app/utils/i18n'; import {preventDoubleTap} from 'app/utils/tap'; -import {changeOpacity} from 'app/utils/theme'; import {paddingLeft as padding} from 'app/components/safe_area_view/iphone_x_spacing'; @@ -81,6 +80,12 @@ export default class List extends PureComponent { }); } + componentDidMount() { + if (!UnreadIndicator) { + UnreadIndicator = require('app/components/sidebars/main/channels_list/unread_indicator').default; + } + } + componentWillReceiveProps(nextProps) { const { canCreatePrivateChannels, @@ -162,12 +167,10 @@ export default class List extends PureComponent { orderedChannelIds, } = props; - return orderedChannelIds.map((s, i) => { + return orderedChannelIds.map((s) => { return { ...this.getSectionConfigByType(props, s.type), data: s.items, - topSeparator: i !== 0, - bottomSeparator: s.items.length > 0, }; }); }; @@ -292,15 +295,15 @@ export default class List extends PureComponent { }; renderSectionAction = (styles, action, anchor) => { - const {theme} = this.props; return ( - @@ -308,13 +311,6 @@ export default class List extends PureComponent { ); }; - renderSectionSeparator = () => { - const {styles} = this.props; - return ( - - ); - }; - renderItem = ({item}) => { const {favoriteChannelIds, unreadChannelIds, previewChannel} = this.props; @@ -334,25 +330,24 @@ export default class List extends PureComponent { const {intl} = this.context; const { action, - bottomSeparator, defaultMessage, id, - topSeparator, } = section; const anchor = (id === 'sidebar.types.recent' || id === 'mobile.channel_list.channels'); return ( - - {topSeparator && this.renderSectionSeparator()} + {intl.formatMessage({id, defaultMessage}).toUpperCase()} + + + {action && this.renderSectionAction(styles, action, anchor)} - {bottomSeparator && this.renderSectionSeparator()} - + ); }; @@ -367,24 +362,19 @@ export default class List extends PureComponent { }; emitUnreadIndicatorChange = debounce((showIndicator) => { - if (showIndicator && !UnreadIndicator) { - UnreadIndicator = require('app/components/sidebars/main/channels_list/unread_indicator').default; - } this.setState({showIndicator}); - }, 100); + }, 10); updateUnreadIndicators = ({viewableItems}) => { - InteractionManager.runAfterInteractions(() => { - const {unreadChannelIds} = this.props; - const firstUnread = unreadChannelIds.length && unreadChannelIds[0]; - if (firstUnread && viewableItems.length) { - const isVisible = viewableItems.find((v) => v.item === firstUnread); + const {unreadChannelIds} = this.props; + const firstUnread = unreadChannelIds.length && unreadChannelIds[0]; + if (firstUnread && viewableItems.length) { + const isVisible = viewableItems.find((v) => v.item === firstUnread); - return this.emitUnreadIndicatorChange(!isVisible); - } + return this.emitUnreadIndicatorChange(!isVisible); + } - return this.emitUnreadIndicatorChange(false); - }); + return this.emitUnreadIndicatorChange(false); }; scrollBeginDrag = () => { @@ -408,15 +398,11 @@ export default class List extends PureComponent { }; render() { - const {styles, theme, isLandscape} = this.props; - const {sections, width, showIndicator} = this.state; + const {styles, theme} = this.props; + const {sections, showIndicator} = this.state; const paddingBottom = this.listContentPadding(); - const unreadBarStyles = DeviceTypes.IS_IPHONE_X && isLandscape ? {width: width - 32, marginLeft: ViewTypes.IOS_HORIZONTAL_LANDSCAPE + 16} : {width}; - - const unreadTextStyles = DeviceTypes.IS_IPHONE_X && isLandscape ? {marginLeft: -44} : null; - return ( - {showIndicator && + {UnreadIndicator && diff --git a/app/components/sidebars/main/channels_list/switch_teams_button/index.js b/app/components/sidebars/main/channels_list/switch_teams_button/index.js index 825e93234..6ebb64cea 100644 --- a/app/components/sidebars/main/channels_list/switch_teams_button/index.js +++ b/app/components/sidebars/main/channels_list/switch_teams_button/index.js @@ -4,15 +4,15 @@ import {connect} from 'react-redux'; import {getTheme} from 'mattermost-redux/selectors/entities/preferences'; -import {getCurrentTeam, getMyTeamsCount, getChannelDrawerBadgeCount} from 'mattermost-redux/selectors/entities/teams'; +import {getCurrentTeamId, getMyTeamsCount, getChannelDrawerBadgeCount} from 'mattermost-redux/selectors/entities/teams'; import SwitchTeamsButton from './switch_teams_button'; function mapStateToProps(state) { - const team = getCurrentTeam(state) || {}; + const currentTeamId = getCurrentTeamId(state); return { - currentTeamId: team.id, + currentTeamId, mentionCount: getChannelDrawerBadgeCount(state), teamsCount: getMyTeamsCount(state), theme: getTheme(state), diff --git a/app/components/sidebars/main/channels_list/switch_teams_button/switch_teams_button.js b/app/components/sidebars/main/channels_list/switch_teams_button/switch_teams_button.js index 928136e63..67549d9d5 100644 --- a/app/components/sidebars/main/channels_list/switch_teams_button/switch_teams_button.js +++ b/app/components/sidebars/main/channels_list/switch_teams_button/switch_teams_button.js @@ -48,8 +48,10 @@ export default class SwitchTeamsButton extends React.PureComponent { const badge = ( ); @@ -66,11 +68,11 @@ export default class SwitchTeamsButton extends React.PureComponent { size={12} style={styles.switcherArrow} /> - @@ -82,49 +84,51 @@ export default class SwitchTeamsButton extends React.PureComponent { const getStyleSheet = makeStyleSheetFromTheme((theme) => { return { - switcherContainer: { - backgroundColor: theme.sidebarHeaderTextColor, - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'center', - height: 32, - borderRadius: 2, - marginLeft: 6, - marginRight: 6, - paddingHorizontal: 3, - }, - switcherArrow: { - color: theme.sidebarHeaderBg, - marginRight: 3, - }, - switcherDivider: { - backgroundColor: theme.sidebarHeaderBg, - height: 15, - marginHorizontal: 6, - width: 1, - }, - teamIconContainer: { - width: 26, - height: 26, - marginLeft: 3, - }, - teamIconText: { - fontSize: 14, - }, badge: { backgroundColor: theme.mentionBg, - borderColor: theme.sidebarHeaderBg, - borderRadius: 10, - borderWidth: 1, - flexDirection: 'row', + height: 20, padding: 3, + }, + badgeContainer: { + borderColor: theme.sidebarBg, + borderRadius: 14, + borderWidth: 2, position: 'absolute', - left: -5, - top: -5, + right: 0, + top: -9, }, mention: { color: theme.mentionColor, fontSize: 10, }, + switcherArrow: { + color: theme.sidebarHeaderBg, + marginRight: 8, + top: 1, + }, + switcherContainer: { + alignItems: 'center', + backgroundColor: theme.sidebarHeaderTextColor, + borderRadius: 2, + flexDirection: 'row', + justifyContent: 'center', + height: 32, + marginRight: 12, + width: 56, + }, + teamIcon: { + width: 24, + height: 24, + }, + teamIconContainer: { + alignItems: 'center', + justifyContent: 'center', + height: 24, + width: 24, + }, + teamIconText: { + fontFamily: 'Open Sans', + fontSize: 14, + }, }; }); diff --git a/app/components/sidebars/main/channels_list/unread_indicator/index.js b/app/components/sidebars/main/channels_list/unread_indicator/index.js index 787ab9bf5..ce095e486 100644 --- a/app/components/sidebars/main/channels_list/unread_indicator/index.js +++ b/app/components/sidebars/main/channels_list/unread_indicator/index.js @@ -10,6 +10,7 @@ import { } from 'react-native'; import IonIcon from 'react-native-vector-icons/Ionicons'; +import Fade from 'app/components/fade'; import FormattedText from 'app/components/formatted_text'; import {makeStyleSheetFromTheme} from 'app/utils/theme'; @@ -28,45 +29,47 @@ export default class UnreadIndicator extends PureComponent { render() { const {onPress, show, theme} = this.props; - - if (!show) { - return null; - } - const style = getStyleSheet(theme); - return ( - - - - - - + + + + + + + + ); } } const getStyleSheet = makeStyleSheetFromTheme((theme) => { return { + arrow: { + position: 'relative', + bottom: -1, + }, container: { justifyContent: 'center', alignItems: 'center', flexDirection: 'row', position: 'absolute', - borderRadius: 15, - marginHorizontal: 25, - height: 25, + right: 0, + left: 0, }, indicatorText: { backgroundColor: 'transparent', @@ -77,9 +80,14 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { textAlign: 'center', textAlignVertical: 'center', }, - arrow: { - position: 'relative', - bottom: -1, + wrapper: { + borderRadius: 15, + height: 25, + flexDirection: 'row', + paddingLeft: 10, + paddingRight: 12, + justifyContent: 'center', + alignItems: 'center', }, }; }); diff --git a/app/components/sidebars/main/drawer_swipper/drawer_swiper.js b/app/components/sidebars/main/drawer_swipper/drawer_swiper.js index 0ce3afd5c..8edee0e6f 100644 --- a/app/components/sidebars/main/drawer_swipper/drawer_swiper.js +++ b/app/components/sidebars/main/drawer_swipper/drawer_swiper.js @@ -11,11 +11,12 @@ import Swiper from 'app/components/swiper'; export default class DrawerSwiper extends Component { static propTypes = { children: PropTypes.node.isRequired, + drawerOpened: PropTypes.bool, drawerWidth: PropTypes.number.isRequired, + hasSafeAreaInsets: PropTypes.bool, onPageSelected: PropTypes.func, showTeams: PropTypes.bool.isRequired, theme: PropTypes.object.isRequired, - drawerOpened: PropTypes.bool, }; static defaultProps = { @@ -78,8 +79,9 @@ export default class DrawerSwiper extends Component { onIndexChanged={this.swiperPageSelected} width={drawerWidth} style={{backgroundColor: theme.sidebarBg}} + paginationBackgroundColor={changeOpacity(theme.sidebarText, 0.1)} activeDotColor={theme.sidebarText} - dotColor={changeOpacity(theme.sidebarText, 0.5)} + dotColor={changeOpacity(theme.sidebarText, 0.3)} scrollEnabled={showTeams} showsPagination={showTeams} keyboardShouldPersistTaps={'always'} diff --git a/app/components/sidebars/main/index.js b/app/components/sidebars/main/index.js index 905464943..0ca44dc1c 100644 --- a/app/components/sidebars/main/index.js +++ b/app/components/sidebars/main/index.js @@ -11,7 +11,7 @@ import {getCurrentTeamId, getMyTeamsCount} from 'mattermost-redux/selectors/enti import {setChannelDisplayName, setChannelLoading} from 'app/actions/views/channel'; import {makeDirectChannel} from 'app/actions/views/more_dms'; -import {isLandscape, getDimensions} from 'app/selectors/device'; +import {getDimensions} from 'app/selectors/device'; import telemetry from 'app/telemetry'; import MainSidebar from './main_sidebar.js'; @@ -41,7 +41,6 @@ function mapStateToProps(state) { ...getDimensions(state), currentTeamId: getCurrentTeamId(state), currentUserId, - isLandscape: isLandscape(state), teamsCount: getMyTeamsCount(state), theme: getTheme(state), }; diff --git a/app/components/sidebars/main/main_sidebar.js b/app/components/sidebars/main/main_sidebar.js index ed92bc04d..0233f7a88 100644 --- a/app/components/sidebars/main/main_sidebar.js +++ b/app/components/sidebars/main/main_sidebar.js @@ -30,7 +30,6 @@ import TeamsList from './teams_list'; import telemetry from 'app/telemetry'; const DRAWER_INITIAL_OFFSET = 40; -const DRAWER_LANDSCAPE_OFFSET = 150; export default class ChannelSidebar extends Component { static propTypes = { @@ -46,7 +45,6 @@ export default class ChannelSidebar extends Component { currentTeamId: PropTypes.string.isRequired, currentUserId: PropTypes.string.isRequired, deviceWidth: PropTypes.number.isRequired, - isLandscape: PropTypes.bool.isRequired, teamsCount: PropTypes.number.isRequired, theme: PropTypes.object.isRequired, previewChannel: PropTypes.func, @@ -59,17 +57,12 @@ export default class ChannelSidebar extends Component { constructor(props) { super(props); - let openDrawerOffset = DRAWER_INITIAL_OFFSET; - if (props.isLandscape || DeviceTypes.IS_TABLET) { - openDrawerOffset = DRAWER_LANDSCAPE_OFFSET; - } - this.swiperIndex = 1; this.drawerRef = React.createRef(); this.channelListRef = React.createRef(); this.state = { show: false, - openDrawerOffset, + openDrawerOffset: DRAWER_INITIAL_OFFSET, drawerOpened: false, searching: false, isSplitView: false, @@ -79,7 +72,7 @@ export default class ChannelSidebar extends Component { componentDidMount() { this.mounted = true; this.props.actions.getTeams(); - this.handleDimensions(); + this.handleDimensions({window: Dimensions.get('window')}); this.handlePermanentSidebar(); EventEmitter.on('close_channel_drawer', this.closeChannelDrawer); EventEmitter.on('renderDrawer', this.handleShowDrawerContent); @@ -89,23 +82,8 @@ export default class ChannelSidebar extends Component { Dimensions.addEventListener('change', this.handleDimensions); } - componentWillReceiveProps(nextProps) { - const {isLandscape} = this.props; - - if (nextProps.isLandscape !== isLandscape) { - if (this.state.openDrawerOffset !== 0) { - let openDrawerOffset = DRAWER_INITIAL_OFFSET; - if (nextProps.isLandscape || DeviceTypes.IS_TABLET) { - openDrawerOffset = DRAWER_LANDSCAPE_OFFSET; - } - - this.setState({openDrawerOffset}); - } - } - } - shouldComponentUpdate(nextProps, nextState) { - const {currentTeamId, deviceWidth, isLandscape, teamsCount, theme} = this.props; + const {currentTeamId, deviceWidth, teamsCount, theme} = this.props; const {openDrawerOffset, isSplitView, permanentSidebar, show, searching} = this.state; if (nextState.openDrawerOffset !== openDrawerOffset || nextState.show !== show || nextState.searching !== searching) { @@ -113,7 +91,7 @@ export default class ChannelSidebar extends Component { } return nextProps.currentTeamId !== currentTeamId || - nextProps.isLandscape !== isLandscape || nextProps.deviceWidth !== deviceWidth || + nextProps.deviceWidth !== deviceWidth || nextProps.teamsCount !== teamsCount || nextProps.theme !== theme || nextState.isSplitView !== isSplitView || @@ -139,12 +117,23 @@ export default class ChannelSidebar extends Component { return false; }; - handleDimensions = () => { - if (DeviceTypes.IS_TABLET && this.mounted) { - mattermostManaged.isRunningInSplitView().then((result) => { - const isSplitView = Boolean(result.isSplitView); - this.setState({isSplitView}); - }); + handleDimensions = ({window}) => { + if (this.mounted) { + if (DeviceTypes.IS_TABLET) { + mattermostManaged.isRunningInSplitView().then((result) => { + const isSplitView = Boolean(result.isSplitView); + this.setState({isSplitView}); + }); + } + + if (this.state.openDrawerOffset !== 0) { + let openDrawerOffset = DRAWER_INITIAL_OFFSET; + if ((window.width > window.height) || DeviceTypes.IS_TABLET) { + openDrawerOffset = window.width * 0.5; + } + + this.setState({openDrawerOffset}); + } } }; @@ -343,6 +332,7 @@ export default class ChannelSidebar extends Component { return null; } + const hasSafeAreaInsets = DeviceTypes.IS_IPHONE_X || mattermostManaged.hasSafeAreaInsets; const multipleTeams = teamsCount > 1; const showTeams = !searching && multipleTeams; if (this.drawerSwiper) { @@ -389,6 +379,7 @@ export default class ChannelSidebar extends Component { return ( {lists} diff --git a/app/components/sidebars/main/teams_list/teams_list_item/teams_list_item.js b/app/components/sidebars/main/teams_list/teams_list_item/teams_list_item.js index e8e04c015..bdf5f1ef8 100644 --- a/app/components/sidebars/main/teams_list/teams_list_item/teams_list_item.js +++ b/app/components/sidebars/main/teams_list/teams_list_item/teams_list_item.js @@ -46,6 +46,16 @@ export default class TeamsListItem extends React.PureComponent { } = this.props; const styles = getStyleSheet(theme); + const badge = ( + + ); + let current; if (teamId === currentTeamId) { current = ( @@ -58,14 +68,6 @@ export default class TeamsListItem extends React.PureComponent { ); } - const badge = ( - - ); - return ( - + + + {badge} + - {badge} ); } @@ -145,14 +149,16 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { }, badge: { backgroundColor: theme.mentionBg, - borderColor: theme.sidebarHeaderBg, - borderRadius: 10, - borderWidth: 1, - flexDirection: 'row', + height: 20, padding: 3, + }, + badgeContainer: { + borderColor: theme.sidebarBg, + borderRadius: 14, + borderWidth: 2, position: 'absolute', - left: 45, - top: -2, + right: -12, + top: -10, }, mention: { color: theme.mentionColor, diff --git a/app/components/swiper.js b/app/components/swiper.js index 903cc9def..4764839fe 100644 --- a/app/components/swiper.js +++ b/app/components/swiper.js @@ -20,6 +20,7 @@ export default class Swiper extends PureComponent { activeDotColor: PropTypes.string, children: PropTypes.node.isRequired, dotColor: PropTypes.string, + paginationBackgroundColor: PropTypes.string, initialPage: PropTypes.number, keyboardShouldPersistTaps: PropTypes.string, onIndexChanged: PropTypes.func, @@ -138,7 +139,7 @@ export default class Swiper extends PureComponent { }; renderPagination = () => { - if (this.state.total <= 1 || !this.props.showsPagination) { + if (this.state.total <= 1 || !this.props.showsPagination || Platform.OS === 'android') { return null; } @@ -171,10 +172,10 @@ export default class Swiper extends PureComponent { const bottom = this.paginationBottom(width, height); const drawerWidth = (width > height) ? width - ViewTypes.IOS_HORIZONTAL_LANDSCAPE : width; let style; - if (DeviceTypes.IS_IPHONE_X) { + if (DeviceTypes.IS_IPHONE_X && (width < height)) { style = { bottom, - drawerWidth, + width: drawerWidth, }; } else { style = { @@ -188,7 +189,9 @@ export default class Swiper extends PureComponent { pointerEvents='none' style={[styles.pagination, style]} > - {dots} + + {dots} + ); }; @@ -217,7 +220,7 @@ export default class Swiper extends PureComponent { paginationBottom = (width, height) => { if (DeviceTypes.IS_TABLET) { if (Platform.OS === 'ios' && mattermostManaged.hasSafeAreaInsets) { - return 14; + return 34; } return 24; @@ -225,7 +228,7 @@ export default class Swiper extends PureComponent { const landscape = width > height; if (DeviceTypes.IS_IPHONE_X) { - return landscape ? 14 : 4; + return landscape ? 14 : 34; } return 24; @@ -278,9 +281,17 @@ const styles = StyleSheet.create({ position: 'absolute', left: 0, right: 0, + justifyContent: 'center', + alignItems: 'center', + width: '100%', + }, + paginationWrapper: { flexDirection: 'row', justifyContent: 'center', alignItems: 'center', + height: 24, + borderRadius: 15, + width: 44, }, dotStyle: { width: 8, diff --git a/app/components/team_icon/index.js b/app/components/team_icon/index.js index ae8fddde1..663267d7e 100644 --- a/app/components/team_icon/index.js +++ b/app/components/team_icon/index.js @@ -9,8 +9,12 @@ import {getTheme} from 'mattermost-redux/selectors/entities/preferences'; import TeamIcon from './team_icon'; function mapStateToProps(state, ownProps) { + const team = getTeam(state, ownProps.teamId); + const lastIconUpdate = team.last_team_icon_update; + return { - team: getTeam(state, ownProps.teamId), + displayName: team.display_name, + lastIconUpdate, theme: getTheme(state), }; } diff --git a/app/components/team_icon/team_icon.js b/app/components/team_icon/team_icon.js index 649553bd1..75fed29f8 100644 --- a/app/components/team_icon/team_icon.js +++ b/app/components/team_icon/team_icon.js @@ -17,20 +17,21 @@ import {makeStyleSheetFromTheme} from 'app/utils/theme'; export default class TeamIcon extends React.PureComponent { static propTypes = { + displayName: PropTypes.string, + lastIconUpdate: PropTypes.number, teamId: PropTypes.string.isRequired, // eslint-disable-line react/no-unused-prop-types styleContainer: PropTypes.any, styleText: PropTypes.any, styleImage: PropTypes.any, - team: PropTypes.object.isRequired, theme: PropTypes.object.isRequired, }; constructor(props) { super(props); - const {team} = props; - if (team.last_team_icon_update) { - ImageCacheManager.cache('', Client4.getTeamIconUrl(team.id, team.last_team_icon_update), this.setImageURL); + const {lastIconUpdate, teamId} = props; + if (lastIconUpdate) { + ImageCacheManager.cache('', Client4.getTeamIconUrl(teamId, lastIconUpdate), this.setImageURL); } this.state = { @@ -40,12 +41,18 @@ export default class TeamIcon extends React.PureComponent { } componentWillReceiveProps(nextProps) { - this.setState({imageError: false}); + const newState = {imageError: false}; - if (this.props.team.last_team_icon_update !== nextProps.team.last_team_icon_update) { - const {team} = nextProps; - ImageCacheManager.cache('', Client4.getTeamIconUrl(team.id, team.last_team_icon_update), this.setImageURL); + if (this.props.teamId !== nextProps.teamId) { + newState.teamIcon = null; } + + if (nextProps.lastIconUpdate && this.props.lastIconUpdate !== nextProps.lastIconUpdate) { + const {lastIconUpdate, teamId} = nextProps; + ImageCacheManager.cache('', Client4.getTeamIconUrl(teamId, lastIconUpdate), this.setImageURL); + } + + this.setState(newState); } setImageURL = (teamIcon) => { @@ -54,7 +61,7 @@ export default class TeamIcon extends React.PureComponent { render() { const { - team, + displayName, theme, styleContainer, styleText, @@ -75,7 +82,7 @@ export default class TeamIcon extends React.PureComponent { } else { teamIconContent = ( - {team.display_name.substr(0, 2).toUpperCase()} + {displayName.substr(0, 2).toUpperCase()} ); } diff --git a/app/components/user_status/__snapshots__/user_status.test.js.snap b/app/components/user_status/__snapshots__/user_status.test.js.snap index 92eb46a65..2812fd8b6 100644 --- a/app/components/user_status/__snapshots__/user_status.test.js.snap +++ b/app/components/user_status/__snapshots__/user_status.test.js.snap @@ -1,69 +1,57 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`UserStatus should match snapshot, away status 1`] = ` - `; exports[`UserStatus should match snapshot, dnd status 1`] = ` - `; exports[`UserStatus should match snapshot, online status 1`] = ` - `; exports[`UserStatus should match snapshot, should default to offline status 1`] = ` - `; diff --git a/app/components/user_status/user_status.js b/app/components/user_status/user_status.js index 9e2f1511c..30caab880 100644 --- a/app/components/user_status/user_status.js +++ b/app/components/user_status/user_status.js @@ -2,41 +2,38 @@ // See LICENSE.txt for license information. import React, {PureComponent} from 'react'; -import {Image} from 'react-native'; import PropTypes from 'prop-types'; import {General} from 'mattermost-redux/constants'; +import Icon from 'app/components/vector_icon'; + import {changeOpacity} from 'app/utils/theme'; -import away from 'assets/images/status/away.png'; -import dnd from 'assets/images/status/dnd.png'; -import offline from 'assets/images/status/offline.png'; -import online from 'assets/images/status/online.png'; - const statusToIcon = { - away, - dnd, - offline, - ooo: offline, - online, + away: General.AWAY, + dnd: General.DND, + offline: General.OFFLINE, + ooo: General.OFFLINE, + online: General.ONLINE, }; export default class UserStatus extends PureComponent { static propTypes = { + isAvatar: PropTypes.bool, size: PropTypes.number, status: PropTypes.string, theme: PropTypes.object.isRequired, }; static defaultProps = { - size: 14, + size: 6, status: General.OFFLINE, }; render() { const {size, status, theme} = this.props; - const Icon = statusToIcon[status]; + const iconName = statusToIcon[status]; let iconColor; switch (status) { @@ -55,9 +52,10 @@ export default class UserStatus extends PureComponent { } return ( - ); } diff --git a/app/components/vector_icon.js b/app/components/vector_icon.js index d0a6d89cb..42fa71f18 100644 --- a/app/components/vector_icon.js +++ b/app/components/vector_icon.js @@ -4,12 +4,21 @@ import PropTypes from 'prop-types'; import React, {PureComponent} from 'react'; import {Text} from 'react-native'; +import {createIconSetFromIcoMoon} from 'react-native-vector-icons'; import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome'; import FontAwesome5Icon from 'react-native-vector-icons/FontAwesome5'; import FoundationIcon from 'react-native-vector-icons/Foundation'; import IonIcon from 'react-native-vector-icons/Ionicons'; import MaterialIcon from 'react-native-vector-icons/MaterialIcons'; +import icoMoonConfig from 'assets/mattermost-fonts.json'; + +const Mattermost = createIconSetFromIcoMoon( + icoMoonConfig, + 'Mattermost', + 'Mattermost-Regular.otf' +); + export default class VectorIcon extends PureComponent { static propTypes = { name: PropTypes.string, @@ -66,6 +75,14 @@ export default class VectorIcon extends PureComponent { size={size} /> ); + case 'mattermost': + return ( + + ); } return null; diff --git a/app/constants/list.js b/app/constants/list.js index 3d6a494cb..72a8fb14c 100644 --- a/app/constants/list.js +++ b/app/constants/list.js @@ -2,7 +2,7 @@ // See LICENSE.txt for license information. const VISIBILITY_CONFIG_DEFAULTS = { - viewAreaCoveragePercentThreshold: 3, + itemVisiblePercentThreshold: 100, waitForInteraction: false, }; diff --git a/app/screens/channel/channel_nav_bar/channel_drawer_button.js b/app/screens/channel/channel_nav_bar/channel_drawer_button.js index e5482c677..4111d6977 100644 --- a/app/screens/channel/channel_nav_bar/channel_drawer_button.js +++ b/app/screens/channel/channel_nav_bar/channel_drawer_button.js @@ -77,10 +77,12 @@ class ChannelDrawerButton extends PureComponent { if (badgeCount && visible) { badge = ( ); } @@ -137,14 +139,16 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => { }, badge: { backgroundColor: theme.mentionBg, - borderColor: theme.sidebarHeaderBg, - borderRadius: 10, - borderWidth: 1, - left: -13, + height: 19, padding: 3, + }, + badgeContainer: { + borderColor: theme.sidebarHeaderBg, + borderRadius: 14, + borderWidth: 2, position: 'absolute', - right: 0, - top: -4, + right: -14, + top: -7, }, mention: { color: theme.mentionColor, diff --git a/app/screens/channel/channel_post_list/channel_post_list.js b/app/screens/channel/channel_post_list/channel_post_list.js index 93379612a..82fab1e02 100644 --- a/app/screens/channel/channel_post_list/channel_post_list.js +++ b/app/screens/channel/channel_post_list/channel_post_list.js @@ -6,7 +6,6 @@ import React, {PureComponent} from 'react'; import { Keyboard, Platform, - StyleSheet, View, } from 'react-native'; @@ -18,6 +17,7 @@ import PostList from 'app/components/post_list'; import RetryBarIndicator from 'app/components/retry_bar_indicator'; import {ViewTypes} from 'app/constants'; import tracker from 'app/utils/time_tracker'; +import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme'; import telemetry from 'app/telemetry'; let ChannelIntro = null; @@ -216,8 +216,11 @@ export default class ChannelPostList extends PureComponent { ); } + const style = getStyleSheet(theme); + return ( + {component} @@ -226,8 +229,12 @@ export default class ChannelPostList extends PureComponent { } } -const style = StyleSheet.create({ +const getStyleSheet = makeStyleSheetFromTheme((theme) => ({ container: { flex: 1, }, -}); + separator: { + backgroundColor: changeOpacity(theme.centerChannelColor, 0.2), + height: 1, + }, +})); diff --git a/app/screens/thread/__snapshots__/thread.ios.test.js.snap b/app/screens/thread/__snapshots__/thread.ios.test.js.snap index 897c3640e..3ce6def0a 100644 --- a/app/screens/thread/__snapshots__/thread.ios.test.js.snap +++ b/app/screens/thread/__snapshots__/thread.ios.test.js.snap @@ -5,6 +5,14 @@ exports[`thread should match snapshot, has root post 1`] = ` + + + + {content} {postTextBox} @@ -65,3 +69,10 @@ export default class ThreadAndroid extends ThreadBase { ); } } + +const getStyleSheet = makeStyleSheetFromTheme((theme) => ({ + separator: { + backgroundColor: changeOpacity(theme.centerChannelColor, 0.2), + height: 1, + }, +})); diff --git a/app/screens/thread/thread.ios.js b/app/screens/thread/thread.ios.js index 863717d26..b53125797 100644 --- a/app/screens/thread/thread.ios.js +++ b/app/screens/thread/thread.ios.js @@ -2,7 +2,6 @@ // See LICENSE.txt for license information. import React from 'react'; - import {View} from 'react-native'; import {KeyboardTrackingView} from 'react-native-keyboard-tracking-view'; @@ -16,6 +15,7 @@ import PostTextbox from 'app/components/post_textbox'; import SafeAreaView from 'app/components/safe_area_view'; import StatusBar from 'app/components/status_bar'; import {THREAD} from 'app/constants/screen'; +import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme'; import ThreadBase from './thread_base'; @@ -32,6 +32,7 @@ export default class ThreadIOS extends ThreadBase { postIds, rootId, channelIsArchived, + theme, } = this.props; let content; @@ -87,9 +88,11 @@ export default class ThreadIOS extends ThreadBase { ); } + const style = getStyleSheet(theme); return ( + {content} @@ -98,3 +101,10 @@ export default class ThreadIOS extends ThreadBase { ); } } + +const getStyleSheet = makeStyleSheetFromTheme((theme) => ({ + separator: { + backgroundColor: changeOpacity(theme.centerChannelColor, 0.2), + height: 1, + }, +})); diff --git a/assets/base/images/status/archive_avatar.png b/assets/base/images/status/archive_avatar.png deleted file mode 100644 index 4a7f3a398..000000000 Binary files a/assets/base/images/status/archive_avatar.png and /dev/null differ diff --git a/assets/base/images/status/away.png b/assets/base/images/status/away.png deleted file mode 100644 index c2c19e5f2..000000000 Binary files a/assets/base/images/status/away.png and /dev/null differ diff --git a/assets/base/images/status/away_avatar.png b/assets/base/images/status/away_avatar.png deleted file mode 100644 index 53a9bc1c5..000000000 Binary files a/assets/base/images/status/away_avatar.png and /dev/null differ diff --git a/assets/base/images/status/dnd.png b/assets/base/images/status/dnd.png deleted file mode 100644 index c8c09cd45..000000000 Binary files a/assets/base/images/status/dnd.png and /dev/null differ diff --git a/assets/base/images/status/dnd_avatar.png b/assets/base/images/status/dnd_avatar.png deleted file mode 100644 index 537c287c9..000000000 Binary files a/assets/base/images/status/dnd_avatar.png and /dev/null differ diff --git a/assets/base/images/status/offline.png b/assets/base/images/status/offline.png deleted file mode 100644 index 4de387885..000000000 Binary files a/assets/base/images/status/offline.png and /dev/null differ diff --git a/assets/base/images/status/offline_avatar.png b/assets/base/images/status/offline_avatar.png deleted file mode 100644 index 7d204f630..000000000 Binary files a/assets/base/images/status/offline_avatar.png and /dev/null differ diff --git a/assets/base/images/status/online.png b/assets/base/images/status/online.png deleted file mode 100644 index 84c77b576..000000000 Binary files a/assets/base/images/status/online.png and /dev/null differ diff --git a/assets/base/images/status/online_avatar.png b/assets/base/images/status/online_avatar.png deleted file mode 100644 index 8c99687a7..000000000 Binary files a/assets/base/images/status/online_avatar.png and /dev/null differ diff --git a/assets/base/mattermost-fonts.json b/assets/base/mattermost-fonts.json new file mode 100755 index 000000000..a9d92ff1d --- /dev/null +++ b/assets/base/mattermost-fonts.json @@ -0,0 +1 @@ +{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M512 0c-282.573 0-512 229.427-512 512s229.427 512 512 512c282.573 0 512-229.427 512-512s-229.427-512-512-512zM512 102.4c226.048 0 409.6 183.552 409.6 409.6s-183.552 409.6-409.6 409.6c-226.048 0-409.6-183.552-409.6-409.6s183.552-409.6 409.6-409.6z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["offline"]},"attrs":[{}],"properties":{"order":26,"id":11,"name":"offline","prevSize":32,"code":59648},"setIdx":0,"setId":0,"iconIdx":0},{"icon":{"paths":["M512 0c282.573 0 512 229.427 512 512s-229.427 512-512 512c-282.573 0-512-229.427-512-512s229.427-512 512-512zM780.8 435.2h-537.6c-21.197 0-38.4 17.203-38.4 38.4v76.8c0 21.197 17.203 38.4 38.4 38.4h537.6c21.197 0 38.4-17.203 38.4-38.4v-76.8c0-21.197-17.203-38.4-38.4-38.4z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["dnd"],"defaultCode":59656},"attrs":[{}],"properties":{"order":27,"id":15,"name":"dnd","prevSize":32,"code":59656},"setIdx":0,"setId":0,"iconIdx":1},{"icon":{"paths":["M512 0c-282.573 0-512 229.427-512 512s229.427 512 512 512c282.573 0 512-229.427 512-512s-229.427-512-512-512zM525.824 153.6c34.765 0 62.976 30.003 62.976 66.918v259.686l179.302 179.302c25.088 25.037 25.446 65.382 0.87 89.958l-19.507 19.507c-24.576 24.576-64.922 24.218-89.958-0.87l-204.493-204.493c-7.578-7.526-12.851-16.486-15.923-25.958-2.458-5.069-3.891-10.342-3.891-15.77v-301.363c0-36.915 28.211-66.918 62.976-66.918h27.648z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["away"]},"attrs":[{}],"properties":{"order":28,"id":12,"name":"away","prevSize":32,"code":59649},"setIdx":0,"setId":0,"iconIdx":2},{"icon":{"paths":["M512 0c-282.573 0-512 229.427-512 512s229.427 512 512 512c282.573 0 512-229.427 512-512s-229.427-512-512-512zM828.928 367.616c0 10.65-3.84 19.661-11.469 27.136l-351.693 342.989c-7.629 7.475-16.896 11.162-27.802 11.162s-20.173-3.686-27.802-11.162l-203.622-198.605c-7.629-7.475-11.469-16.486-11.469-27.136s3.84-19.661 11.469-27.136l55.603-54.221c7.629-7.475 16.896-11.162 27.802-11.162s20.173 3.686 27.802 11.162l120.218 117.658 268.288-262.042c7.629-7.475 16.896-11.162 27.802-11.162s20.173 3.686 27.802 11.162l55.603 54.221c7.629 7.475 11.469 16.486 11.469 27.136z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["online"]},"attrs":[{}],"properties":{"order":29,"id":10,"name":"online","prevSize":32,"code":59650},"setIdx":0,"setId":0,"iconIdx":3},{"icon":{"paths":["M250.583 937.937l60.302-60.302-155.724-155.724-60.302 60.302v70.904h84.82v84.82h70.904zM597.151 322.993c0-9.719-4.859-14.578-14.578-14.578-4.418 0-8.173 1.546-11.265 4.639l-359.159 359.159c-3.092 3.092-4.639 6.847-4.639 11.265 0 9.719 4.859 14.578 14.578 14.578 4.418 0 8.173-1.546 11.265-4.639l359.159-359.159c3.092-3.092 4.639-6.847 4.639-11.265zM561.368 195.763l275.664 275.664-551.329 551.329h-275.664v-275.664l551.329-551.329zM1013.961 259.378c0 23.414-8.173 43.293-24.518 59.639l-110.001 110.001-275.664-275.664 110.001-109.338c15.904-16.787 35.783-25.181 59.639-25.181 23.414 0 43.514 8.394 60.302 25.181l155.724 155.061c16.346 17.229 24.518 37.329 24.518 60.302z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["draft"],"defaultCode":59652},"attrs":[{}],"properties":{"order":30,"id":13,"name":"draft","prevSize":32,"code":59652},"setIdx":0,"setId":0,"iconIdx":4},{"icon":{"paths":["M621.714 475.429q0-14.848-10.825-25.746t-25.746-10.825h-146.286q-14.848 0-25.746 10.825t-10.825 25.746 10.825 25.746 25.746 10.825h146.286q14.848 0 25.746-10.825t10.825-25.746zM950.857 365.714v548.571q0 14.848-10.825 25.746t-25.746 10.825h-804.571q-14.848 0-25.746-10.825t-10.825-25.746v-548.571q0-14.848 10.825-25.746t25.746-10.825h804.571q14.848 0 25.746 10.825t10.825 25.746zM987.429 109.714v146.286q0 14.848-10.825 25.746t-25.746 10.825h-877.714q-14.848 0-25.746-10.825t-10.825-25.746v-146.286q0-14.848 10.825-25.746t25.746-10.825h877.714q14.848 0 25.746 10.825t10.825 25.746z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["archive"],"defaultCode":59650},"attrs":[{}],"properties":{"order":31,"id":14,"name":"archive","prevSize":32,"code":59651},"setIdx":0,"setId":0,"iconIdx":5},{"icon":{"paths":["M0 537.876v255.715c0 35.361 27.548 63.929 61.645 63.929h61.645v-383.572h-61.645c-34.098 0-61.645 28.568-61.645 63.929zM911.962 214.522h-219.184v-128.428c0-35.518-27.985-64.214-62.624-64.214s-62.624 28.696-62.624 64.214v128.428h-219.184c-86.499 0-156.56 71.839-156.56 160.535v545.819c0 70.836 56.166 128.428 125.248 128.428h626.24c69.082 0 125.248-57.592 125.248-128.428v-545.819c0-88.696-70.061-160.535-156.56-160.535zM506.863 857.519h-123.291v-68.495h123.291v68.495zM438.368 610.937c-45.412 0-82.194-36.782-82.194-82.194s36.782-82.194 82.194-82.194c45.412 0 82.194 36.782 82.194 82.194s-36.782 82.194-82.194 82.194zM698.649 857.519h-123.291v-68.495h123.291v68.495zM876.736 857.519h-123.291v-68.495h123.291v68.495zM815.090 610.937c-41.628 0-75.344-36.782-75.344-82.194s33.717-82.194 75.344-82.194c41.628 0 75.344 36.782 75.344 82.194s-33.717 82.194-75.344 82.194zM1198.662 473.947h-61.645v383.572h61.645c34.098 0 61.645-28.568 61.645-63.929v-255.715c0-35.361-27.548-63.929-61.645-63.929z"],"attrs":[{}],"width":1260,"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["bot"],"defaultCode":59651},"attrs":[{}],"properties":{"order":32,"id":16,"name":"bot","prevSize":32,"code":59653},"setIdx":0,"setId":0,"iconIdx":6},{"icon":{"paths":["M852.958 443.733h-63.39v-126.781c0-175.084-141.868-316.952-316.952-316.952s-316.952 141.868-316.952 316.952v126.781h-63.39c-35.055 0-63.39 34.675-63.39 69.73v437.394c0 35.055 28.336 63.39 63.39 63.39h760.686c35.055 0 63.39-28.336 63.39-63.39v-437.394c0-35.055-28.336-69.73-63.39-69.73zM472.615 126.781c104.848 0 190.171 85.324 190.171 190.171v126.781h-380.343v-126.781c0-104.848 85.324-190.171 190.171-190.171z"],"attrs":[{}],"width":945,"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["private"],"defaultCode":59649},"attrs":[{}],"properties":{"order":33,"id":17,"name":"private","prevSize":32,"code":59654},"setIdx":0,"setId":0,"iconIdx":7},{"icon":{"paths":["M761.344 65.344c-73.6-41.216-158.592-64.704-249.344-65.344-283.008 0-512 229.696-512 512 0 257.6 189.76 470.144 437.12 506.88 24.768 3.264 49.536 5.12 74.88 5.12 90.752 0 175.744-23.488 249.344-64.768 156.736-87.488 262.656-254.976 262.656-447.232-0.64-192.256-105.92-359.104-262.656-446.656zM845.12 320h-155.264c-9.472-64-23.616-119.872-41.28-167.488 83.136 31.744 152.448 103.488 196.544 167.488zM507.712 127.104c1.408-0.064 2.816-0.256 4.288-0.256s2.88 0.192 4.288 0.256c20.608 31.808 46.72 128.896 63.168 192.896h-134.912c16.448-64 42.56-161.088 63.168-192.896zM132.736 576c-3.456 0-5.888-42.112-5.888-64s2.24-64 5.76-64h188.992c-0.896 0-1.6 42.24-1.6 64s0.704 64 1.6 64h-188.864zM318.528 844.416c-0.64 0-1.28 0-1.28-0.64-57.728-33.664-105.6-75.776-139.008-139.776h155.904c9.472 64 23.552 119.744 41.216 167.296-19.776-7.424-38.912-16.064-56.832-26.88zM334.144 320h-155.392c44.032-64 113.408-135.872 196.608-167.616-17.6 47.616-31.744 103.616-41.216 167.616zM516.352 896.896c-1.472 0-2.88 0.256-4.352 0.256s-2.88-0.256-4.352-0.256c-20.608-31.872-46.656-64.896-63.104-192.896h134.848c-16.384 128-42.432 161.024-63.040 192.896zM593.28 576h-162.56c-1.088 0-1.92-41.6-1.92-64s0.832-64 1.92-64h162.56c1.088 0 1.92 41.6 1.92 64s-0.832 64-1.92 64zM761.344 805.12c-20.352 17.152-42.496 32.384-65.984 45.632-15.040 8-30.72 15.232-46.912 21.376 17.664-47.744 31.872-104.128 41.408-168.128h155.52c-22.208 64-50.496 72.64-84.032 101.12zM702.4 576c0.896 0 1.6-42.24 1.6-64s-0.704-64-1.6-64h188.928c3.584 0 5.824 42.112 5.824 64s-2.368 64-5.888 64h-188.864z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["public"],"defaultCode":59648},"attrs":[{}],"properties":{"order":34,"id":18,"name":"public","prevSize":32,"code":59655},"setIdx":0,"setId":0,"iconIdx":8},{"icon":{"paths":["M597.333 256c0 117.821-95.513 213.333-213.333 213.333s-213.333-95.513-213.333-213.333c0-117.821 95.513-213.333 213.333-213.333s213.333 95.513 213.333 213.333z","M401.067 742.4c0-34.133 8.533-68.267 17.067-102.4-8.533 0-17.067 0-34.133 0-213.333 0-213.333-170.667-213.333-170.667s-85.333 8.533-102.4 42.667c-34.133 51.2-51.2 145.067-59.733 213.333 0 8.533-8.533 42.667 0 51.2 17.067 110.933 187.733 196.267 375.467 204.8h17.067c25.6 0 59.733 0 85.333-8.533-51.2-68.267-85.333-145.067-85.333-230.4z","M861.867 716.8l153.6-153.6c8.533-8.533 8.533-25.6 0-25.6l-59.733-59.733c-8.533-8.533-25.6-8.533-25.6 0l-153.6 153.6-153.6-153.6c-8.533-8.533-25.6-8.533-25.6 0l-59.733 59.733c-8.533 8.533-8.533 25.6 0 25.6l153.6 153.6-153.6 153.6c-8.533 8.533-8.533 25.6 0 25.6l59.733 59.733c8.533 8.533 25.6 8.533 25.6 0l153.6-153.6 153.6 153.6c8.533 8.533 25.6 8.533 25.6 0l59.733-59.733c8.533-8.533 8.533-25.6 0-25.6l-153.6-153.6z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["offline-avatar"],"defaultCode":59655},"attrs":[{},{},{}],"properties":{"order":35,"id":19,"name":"offline-avatar","prevSize":32,"code":59657},"setIdx":0,"setId":0,"iconIdx":9},{"icon":{"paths":["M588.8 256c0 117.821-95.513 213.333-213.333 213.333s-213.333-95.513-213.333-213.333c0-117.821 95.513-213.333 213.333-213.333s213.333 95.513 213.333 213.333z","M443.733 716.8c0-34.133 8.533-59.733 17.067-85.333-25.6 8.533-51.2 17.067-85.333 17.067-213.333 0-213.333-170.667-213.333-170.667s-85.333 8.533-102.4 42.667c-34.133 51.2-51.2 145.067-59.733 213.333 0 8.533-8.533 42.667 0 51.2 17.067 110.933 187.733 196.267 375.467 204.8 0 0 8.533 0 8.533 0s8.533 0 8.533 0c59.733 0 119.467-8.533 170.667-25.6-76.8-68.267-119.467-153.6-119.467-247.467z","M1024 768c0 8.533-8.533 8.533-8.533 8.533h-418.133c-8.533 0-8.533-8.533-8.533-8.533v-136.533c0-8.533 8.533-8.533 8.533-8.533h418.133c8.533 0 8.533 8.533 8.533 8.533v136.533z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["dnd-avatar"]},"attrs":[{},{},{}],"properties":{"order":36,"id":9,"name":"dnd-avatar","prevSize":32,"code":59658},"setIdx":0,"setId":0,"iconIdx":10},{"icon":{"paths":["M774.912 487.424c15.872 0 28.672 12.885 28.672 28.672v259.243l208.811 120.576c13.739 7.936 18.432 25.429 10.496 39.168l-43.093 74.581c-7.851 13.739-25.429 18.432-39.168 10.496l-266.155-153.685c-9.899-5.717-15.104-16.469-14.251-27.136-0.085-0.768-0.085-1.536-0.085-2.304v-320.939c0-15.787 12.8-28.672 28.672-28.672h86.101zM410.624 982.443h-17.664c-194.56-8.789-371.371-97.195-389.035-212.139-8.875-8.875 0-44.203 0-53.077 8.875-70.741 26.539-167.936 61.867-221.013 17.664-35.328 106.155-44.203 106.155-44.203s0 176.811 221.013 176.811h35.328c-8.875 35.413-17.664 70.741-17.664 106.069 0 88.405 35.328 168.021 88.405 238.763-26.539 8.789-61.867 8.789-88.405 8.789zM392.96 9.984c121.941 0 221.013 98.987 221.013 221.013 0 121.941-99.072 221.013-221.013 221.013-122.027 0-221.013-99.072-221.013-221.013 0-122.027 98.987-221.013 221.013-221.013z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["away-avatar"],"defaultCode":59654},"attrs":[{}],"properties":{"order":37,"id":20,"name":"away-avatar","prevSize":32,"code":59659},"setIdx":0,"setId":0,"iconIdx":11},{"icon":{"paths":["M597.333 469.333c0 0 0 0 0 0s0 0 0 0 0 0 0 0z","M597.333 256c0 117.821-95.513 213.333-213.333 213.333s-213.333-95.513-213.333-213.333c0-117.821 95.513-213.333 213.333-213.333s213.333 95.513 213.333 213.333z","M349.867 750.933c0-34.133 8.533-76.8 17.067-110.933-187.733-17.067-187.733-170.667-187.733-170.667s-85.333 8.533-102.4 42.667c-34.133 51.2-51.2 145.067-59.733 213.333 0 8.533-8.533 42.667 0 51.2 17.067 110.933 187.733 196.267 375.467 204.8 0 0 8.533 0 8.533 0s8.533 0 8.533 0c0 0 8.533 0 8.533 0-51.2-68.267-68.267-145.067-68.267-230.4z","M913.067 435.2l110.933 110.933c0 0 0 8.533 0 8.533l-349.867 349.867c0 0 0 0-8.533 0 0 0 0 0 0 0l-230.4-230.4c0 0 0-8.533 0-8.533l102.4-102.4c0 0 8.533 0 8.533 0l119.467 119.467 247.467-247.467c-8.533 0-0 0-0 0z"],"attrs":[{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["online-avatar"],"defaultCode":59653},"attrs":[{},{},{},{}],"properties":{"order":38,"id":21,"name":"online-avatar","prevSize":32,"code":59660},"setIdx":0,"setId":0,"iconIdx":12}],"height":1024,"metadata":{"name":"icomoon"},"preferences":{"showGlyphs":true,"showCodes":true,"showQuickUse":true,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"icon-","metadata":{"fontFamily":"icomoon"},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false},"imagePref":{"prefix":"icon-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215},"historySize":50,"gridSize":16}} \ No newline at end of file diff --git a/assets/fonts/Mattermost-Regular.otf b/assets/fonts/Mattermost-Regular.otf new file mode 100644 index 000000000..faedbe935 Binary files /dev/null and b/assets/fonts/Mattermost-Regular.otf differ diff --git a/ios/Mattermost.xcodeproj/project.pbxproj b/ios/Mattermost.xcodeproj/project.pbxproj index 0c0ce90a4..dcc0657fc 100644 --- a/ios/Mattermost.xcodeproj/project.pbxproj +++ b/ios/Mattermost.xcodeproj/project.pbxproj @@ -5,7 +5,6 @@ }; objectVersion = 46; objects = { - /* Begin PBXBuildFile section */ 00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */; }; 00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */; }; @@ -123,6 +122,7 @@ F006936FC2884C24A1321FC0 /* MaterialIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 356C9186FA374641A00EB2EA /* MaterialIcons.ttf */; }; F083DB472349411A8E6E7AAD /* OpenSans-LightItalic.ttf in Resources */ = {isa = PBXBuildFile; fileRef = BE17F630DB5D41FD93F32D22 /* OpenSans-LightItalic.ttf */; }; F23C99AA5FA10E457A76803A /* libPods-MattermostTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 4246DC09024BB33A3E491E25 /* libPods-MattermostTests.a */; }; + 1A892F126F594A27B6AA095E /* Mattermost-Regular.otf in Resources */ = {isa = PBXBuildFile; fileRef = E2D17ED040D0465DBF9112D3 /* Mattermost-Regular.otf */; }; /* End PBXBuildFile section */ /* Begin PBXContainerItemProxy section */ @@ -903,6 +903,7 @@ EE671DF7637347CD8C069819 /* libRNDeviceInfo.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRNDeviceInfo.a; sourceTree = ""; }; F1F071EE85494E269A50AE88 /* SimpleLineIcons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = SimpleLineIcons.ttf; path = "../node_modules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf"; sourceTree = ""; }; FBBEC29EE2D3418D9AC33BD5 /* OpenSans-ExtraBoldItalic.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "OpenSans-ExtraBoldItalic.ttf"; path = "../assets/fonts/OpenSans-ExtraBoldItalic.ttf"; sourceTree = ""; }; + E2D17ED040D0465DBF9112D3 /* Mattermost-Regular.otf */ = {isa = PBXFileReference; name = "Mattermost-Regular.otf"; path = "../assets/fonts/Mattermost-Regular.otf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; /* End PBXFileReference section */ /* Begin PBXFrameworksBuildPhase section */ @@ -1086,6 +1087,7 @@ 5C5FEE2D22F048709FB330F3 /* FontAwesome5_Brands.ttf */, 59A2AAD141C34AA7B4655F27 /* FontAwesome5_Regular.ttf */, DC1D660B55BE462A9C3B8028 /* FontAwesome5_Solid.ttf */, + E2D17ED040D0465DBF9112D3 /* Mattermost-Regular.otf */, ); name = Resources; sourceTree = ""; @@ -2561,6 +2563,7 @@ E08B278B7BA14C41AD908BE2 /* FontAwesome5_Brands.ttf in Resources */, DA32194224944F1DBD27C485 /* FontAwesome5_Regular.ttf in Resources */, 7BD159C40A68467FB5A17141 /* FontAwesome5_Solid.ttf in Resources */, + 1A892F126F594A27B6AA095E /* Mattermost-Regular.otf in Resources */, ); runOnlyForDeploymentPostprocessing = 0; }; diff --git a/ios/Mattermost/Info.plist b/ios/Mattermost/Info.plist index 3973dc491..7d477e9fd 100644 --- a/ios/Mattermost/Info.plist +++ b/ios/Mattermost/Info.plist @@ -115,6 +115,7 @@ FontAwesome5_Brands.ttf FontAwesome5_Regular.ttf FontAwesome5_Solid.ttf + Mattermost-Regular.otf UIBackgroundModes