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

Fix styling when theme is change in another device (#1229)

Browse source 
* Fix styling when theme is change in another device

* Fix drawer showing behind channel screen
This commit is contained in:
enahum 2017-11-29 13:55:33 -03:00 committed by GitHub
parent a8fc472729
commit c36eb9a9f4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
37 changed files with 287 additions and 125 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/components/channel_drawer/channel_drawer.js
View file

@ -368,7 +368,6 @@ export default class ChannelDrawer extends Component {
<SafeAreaView
backgroundColor={theme.sidebarHeaderBg}
navigator={navigator}
theme={theme}
>
<DrawerSwiper
ref={this.drawerSwiperRef}

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

@ -358,10 +358,7 @@ export default class EmojiPicker extends PureComponent {
}
return (
<SafeAreaView
excludeHeader={true}
theme={theme}
>
<SafeAreaView excludeHeader={true}>
<KeyboardAvoidingView
behavior='padding'
style={{flex: 1}}

5
app/components/layout/keyboard_layout/index.js
View file

@ -3,13 +3,16 @@
import {connect} from 'react-redux';
import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
import {getStatusBarHeight} from 'app/selectors/device';
import KeyboardLayout from './keyboard_layout';
function mapStateToProps(state) {
return {
statusBarHeight: getStatusBarHeight(state)
statusBarHeight: getStatusBarHeight(state),
theme: getTheme(state)
};
}

24
app/components/layout/keyboard_layout/keyboard_layout.js
View file

@ -5,12 +5,15 @@ import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {KeyboardAvoidingView, Platform, View} from 'react-native';
import {makeStyleSheetFromTheme} from 'app/utils/theme';
export default class KeyboardLayout extends PureComponent {
static propTypes = {
behaviour: PropTypes.string,
children: PropTypes.node,
keyboardVerticalOffset: PropTypes.number,
statusBarHeight: PropTypes.number
statusBarHeight: PropTypes.number,
theme: PropTypes.object.isRequired
};
static defaultProps = {
@ -18,11 +21,15 @@ export default class KeyboardLayout extends PureComponent {
};
render() {
const {behaviour, children, keyboardVerticalOffset, statusBarHeight, ...otherProps} = this.props;
const {behaviour, children, keyboardVerticalOffset, statusBarHeight, theme, ...otherProps} = this.props;
const style = getStyleFromTheme(theme);
if (Platform.OS === 'android') {
return (
<View {...otherProps}>
<View
style={style.keyboardLayout}
{...otherProps}
>
{children}
</View>
);
@ -39,6 +46,7 @@ export default class KeyboardLayout extends PureComponent {
<KeyboardAvoidingView
behaviour={behaviour}
keyboardVerticalOffset={height}
style={style.keyboardLayout}
{...otherProps}
>
{children}
@ -46,3 +54,13 @@ export default class KeyboardLayout extends PureComponent {
);
}
}
const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
return {
keyboardLayout: {
backgroundColor: theme.centerChannelBg,
flex: 1,
paddingBottom: 0
}
};
});

66
app/components/post_list/date_header.js
View file

@ -1,66 +0,0 @@
// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import React from 'react';
import PropTypes from 'prop-types';
import {
StyleSheet,
View,
ViewPropTypes
} from 'react-native';
import FormattedDate from 'app/components/formatted_date';
import {makeStyleSheetFromTheme} from 'app/utils/theme';
function DateHeader(props) {
const style = getStyleSheet(props.theme);
return (
<View style={[style.container, props.style]}>
<View style={style.line}/>
<View style={style.dateContainer}>
<FormattedDate
style={style.date}
value={props.date}
weekday='short'
day='2-digit'
month='short'
year='numeric'
/>
</View>
<View style={style.line}/>
</View>
);
}
DateHeader.propTypes = {
date: PropTypes.object.isRequired,
theme: PropTypes.object.isRequired,
style: ViewPropTypes.style
};
const getStyleSheet = makeStyleSheetFromTheme((theme) => {
return {
container: {
alignItems: 'center',
flexDirection: 'row',
height: 28
},
dateContainer: {
marginHorizontal: 15
},
line: {
flex: 1,
height: StyleSheet.hairlineWidth,
backgroundColor: theme.centerChannelColor,
opacity: 0.2
},
date: {
color: theme.centerChannelColor,
fontSize: 14,
fontWeight: '600'
}
};
});
export default DateHeader;

66
app/components/post_list/date_header/date_header.js Normal file
View file

@ -0,0 +1,66 @@
// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {
View,
ViewPropTypes
} from 'react-native';
import FormattedDate from 'app/components/formatted_date';
import {makeStyleSheetFromTheme} from 'app/utils/theme';
export default class DateHeader extends PureComponent {
static propTypes = {
date: PropTypes.object.isRequired,
theme: PropTypes.object.isRequired,
style: ViewPropTypes.style
};
render() {
const {date, theme} = this.props;
const style = getStyleSheet(theme);
return (
<View style={[style.container, this.props.style]}>
<View style={style.line}/>
<View style={style.dateContainer}>
<FormattedDate
style={style.date}
value={date}
weekday='short'
day='2-digit'
month='short'
year='numeric'
/>
</View>
<View style={style.line}/>
</View>
);
}
}
const getStyleSheet = makeStyleSheetFromTheme((theme) => {
return {
container: {
alignItems: 'center',
flexDirection: 'row',
height: 28
},
dateContainer: {
marginHorizontal: 15
},
line: {
flex: 1,
height: 1,
backgroundColor: theme.centerChannelColor,
opacity: 0.2
},
date: {
color: theme.centerChannelColor,
fontSize: 14,
fontWeight: '600'
}
};
});

17
app/components/post_list/date_header/index.js Normal file
View file

@ -0,0 +1,17 @@
// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import {connect} from 'react-redux';
import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
import DateHeader from './date_header';
function mapStateToProps(state) {
return {
theme: getTheme(state)
};
}
export default connect(mapStateToProps)(DateHeader);

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

@ -154,10 +154,7 @@ export default class PostList extends PureComponent {
renderDateHeader = (date) => {
return (
<DateHeader
theme={this.props.theme}
date={date}
/>
<DateHeader date={date}/>
);
};

14
app/components/safe_area_view/index.js
View file

@ -1,5 +1,17 @@
// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import {connect} from 'react-redux';
import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
import SafeAreaView from './safe_area_view';
export default SafeAreaView;
function mapStateToProps(state) {
return {
theme: getTheme(state)
};
}
export default connect(mapStateToProps)(SafeAreaView);

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

@ -14,7 +14,7 @@ import DeviceInfo from 'react-native-device-info';
import FormattedText from 'app/components/formatted_text';
import StatusBar from 'app/components/status_bar';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme';
import AppIcon from 'app/components/app_icon';
import Config from 'assets/config';
@ -25,9 +25,16 @@ export default class About extends PureComponent {
static propTypes = {
config: PropTypes.object.isRequired,
license: PropTypes.object.isRequired,
navigator: PropTypes.object.isRequired,
theme: PropTypes.object.isRequired
};
componentWillReceiveProps(nextProps) {
if (this.props.theme !== nextProps.theme) {
setNavigatorStyles(this.props.navigator, nextProps.theme);
}
}
handleAboutTeam = () => {
Linking.openURL(Config.AboutTeamURL);
};

10
app/screens/add_reaction/add_reaction.js
View file

@ -10,12 +10,14 @@ import {
import EmojiPicker from 'app/components/emoji_picker';
import {emptyFunction} from 'app/utils/general';
import {setNavigatorStyles} from 'app/utils/theme';
export default class AddReaction extends PureComponent {
static propTypes = {
closeButton: PropTypes.object,
navigator: PropTypes.object.isRequired,
onEmojiPress: PropTypes.func
onEmojiPress: PropTypes.func,
theme: PropTypes.object.isRequired
};
static defaultProps = {
@ -35,6 +37,12 @@ export default class AddReaction extends PureComponent {
});
}
componentWillReceiveProps(nextProps) {
if (this.props.theme !== nextProps.theme) {
setNavigatorStyles(this.props.navigator, nextProps.theme);
}
}
close = () => {
this.props.navigator.dismissModal({
animationType: 'slide-down'

12
app/screens/add_reaction/index.js
View file

@ -1,6 +1,16 @@
// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import {connect} from 'react-redux';
import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
import AddReaction from './add_reaction';
export default AddReaction;
function mapStateToProps(state) {
return {
theme: getTheme(state)
};
}
export default connect(mapStateToProps)(AddReaction);

21
app/screens/channel/channel.js
View file

@ -68,6 +68,12 @@ class Channel extends PureComponent {
}
componentWillReceiveProps(nextProps) {
if (this.props.theme !== nextProps.theme) {
this.props.navigator.setStyle({
screenBackgroundColor: nextProps.theme.centerChannelBg
});
}
if (nextProps.currentTeamId && this.props.currentTeamId !== nextProps.currentTeamId) {
this.loadChannels(nextProps.currentTeamId);
}
@ -195,20 +201,14 @@ class Channel extends PureComponent {
intl={intl}
navigator={navigator}
>
<SafeAreaView
navigator={navigator}
theme={theme}
>
<SafeAreaView navigator={navigator}>
<StatusBar/>
<OfflineIndicator/>
<ChannelNavBar
navigator={navigator}
onPress={this.goToChannelInfo}
/>
<KeyboardLayout
behavior='padding'
style={style.keyboardLayout}
>
<KeyboardLayout behavior='padding'>
<View style={style.postList}>
<ChannelPostList navigator={navigator}/>
</View>
@ -234,11 +234,6 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
loading: {
backgroundColor: theme.centerChannelBg,
flex: 1
},
keyboardLayout: {
backgroundColor: theme.centerChannelBg,
flex: 1,
paddingBottom: 0
}
};
});

3
app/screens/channel/channel_nav_bar/channel_search_button/channel_search_button.js
View file

@ -41,9 +41,6 @@ export default class ChannelSearchButton extends PureComponent {
navigatorStyle: {
navBarHidden: true,
screenBackgroundColor: theme.centerChannelBg
},
passProps: {
theme
}
});
});

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

@ -17,7 +17,7 @@ import SearchBar from 'app/components/search_bar';
import StatusBar from 'app/components/status_bar';
import {alertErrorIfInvalidPermissions} from 'app/utils/general';
import {createMembersSections, loadingText, markSelectedProfiles} from 'app/utils/member_list';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme';
import {General, RequestStatus} from 'mattermost-redux/constants';
import {filterProfilesMatchingTerm} from 'mattermost-redux/utils/user_utils';
@ -81,6 +81,10 @@ class ChannelAddMembers extends PureComponent {
}
componentWillReceiveProps(nextProps) {
if (this.props.theme !== nextProps.theme) {
setNavigatorStyles(this.props.navigator, nextProps.theme);
}
const {loadMoreRequestStatus} = this.props;
if (loadMoreRequestStatus === RequestStatus.STARTED &&
nextProps.loadMoreRequestStatus === RequestStatus.SUCCESS) {

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

@ -14,7 +14,7 @@ import {
import StatusBar from 'app/components/status_bar';
import {wrapWithPreventDoubleTap} from 'app/utils/tap';
import {alertErrorWithFallback} from 'app/utils/general';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme';
import {General} from 'mattermost-redux/constants';
import EventEmitter from 'mattermost-redux/utils/event_emitter';
@ -60,6 +60,10 @@ class ChannelInfo extends PureComponent {
}
componentWillReceiveProps(nextProps) {
if (this.props.theme !== nextProps.theme) {
setNavigatorStyles(this.props.navigator, nextProps.theme);
}
const isFavorite = nextProps.isFavorite;
if (isFavorite !== this.state.isFavorite) {
this.setState({isFavorite});

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

@ -17,7 +17,7 @@ import StatusBar from 'app/components/status_bar';
import {alertErrorIfInvalidPermissions} from 'app/utils/general';
import {createMembersSections, loadingText, markSelectedProfiles} from 'app/utils/member_list';
import UserListRow from 'app/components/custom_list/user_list_row';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme';
import {General, RequestStatus} from 'mattermost-redux/constants';
import {filterProfilesMatchingTerm} from 'mattermost-redux/utils/user_utils';
@ -81,6 +81,10 @@ class ChannelMembers extends PureComponent {
}
componentWillReceiveProps(nextProps) {
if (this.props.theme !== nextProps.theme) {
setNavigatorStyles(this.props.navigator, nextProps.theme);
}
const {requestStatus} = this.props;
if (requestStatus === RequestStatus.STARTED &&
nextProps.requestStatus === RequestStatus.SUCCESS) {

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

@ -18,7 +18,7 @@ import StatusBar from 'app/components/status_bar';
import {UpgradeTypes} from 'app/constants/view';
import logo from 'assets/images/logo.png';
import checkUpgradeType from 'app/utils/client_upgrade';
import {makeStyleSheetFromTheme} from 'app/utils/theme';
import {makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme';
export default class ClientUpgrade extends PureComponent {
static propTypes = {
@ -56,6 +56,12 @@ export default class ClientUpgrade extends PureComponent {
}
}
componentWillReceiveProps(nextProps) {
if (this.props.theme !== nextProps.theme) {
setNavigatorStyles(this.props.navigator, nextProps.theme);
}
}
checkUpgrade = ({minVersion, latestVersion}) => {
const {actions, currentVersion, downloadLink} = this.props;

9
app/screens/code/code.js
View file

@ -11,14 +11,21 @@ import {
} from 'react-native';
import {getCodeFont} from 'app/utils/markdown';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme';
export default class Code extends React.PureComponent {
static propTypes = {
navigator: PropTypes.object.isRequired,
theme: PropTypes.object.isRequired,
content: PropTypes.string.isRequired
};
componentWillReceiveProps(nextProps) {
if (this.props.theme !== nextProps.theme) {
setNavigatorStyles(this.props.navigator, nextProps.theme);
}
}
countLines = (content) => {
return content.split('\n').length;
};

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

@ -9,10 +9,12 @@ import {
InteractionManager
} from 'react-native';
import EditChannelInfo from 'app/components/edit_channel_info';
import {General, RequestStatus} from 'mattermost-redux/constants';
import EventEmitter from 'mattermost-redux/utils/event_emitter';
import EditChannelInfo from 'app/components/edit_channel_info';
import {setNavigatorStyles} from 'app/utils/theme';
export default class CreateChannel extends PureComponent {
static propTypes = {
navigator: PropTypes.object.isRequired,
@ -79,6 +81,10 @@ export default class CreateChannel extends PureComponent {
}
componentWillReceiveProps(nextProps) {
if (this.props.theme !== nextProps.theme) {
setNavigatorStyles(this.props.navigator, nextProps.theme);
}
const {createChannelRequest} = nextProps;
if (this.props.createChannelRequest !== createChannelRequest) {

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

@ -9,11 +9,12 @@ import {
InteractionManager
} from 'react-native';
import EditChannelInfo from 'app/components/edit_channel_info';
import {RequestStatus} from 'mattermost-redux/constants';
import EventEmitter from 'mattermost-redux/utils/event_emitter';
import {ViewTypes} from 'app/constants';
import EditChannelInfo from 'app/components/edit_channel_info';
import {ViewTypes} from 'app/constants';
import {setNavigatorStyles} from 'app/utils/theme';
import {cleanUpUrlable} from 'app/utils/url';
const messages = {
@ -107,6 +108,10 @@ export default class EditChannel extends PureComponent {
}
componentWillReceiveProps(nextProps) {
if (this.props.theme !== nextProps.theme) {
setNavigatorStyles(this.props.navigator, nextProps.theme);
}
const {updateChannelRequest} = nextProps;
if (this.props.updateChannelRequest !== updateChannelRequest) {

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

@ -14,7 +14,7 @@ import KeyboardLayout from 'app/components/layout/keyboard_layout';
import Loading from 'app/components/loading';
import StatusBar from 'app/components/status_bar';
import TextInputWithLocalizedPlaceholder from 'app/components/text_input_with_localized_placeholder';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme';
import {RequestStatus} from 'mattermost-redux/constants';
@ -58,6 +58,10 @@ class EditPost extends PureComponent {
}
componentWillReceiveProps(nextProps) {
if (this.props.theme !== nextProps.theme) {
setNavigatorStyles(this.props.navigator, nextProps.theme);
}
const {editPostRequest} = nextProps;
if (this.props.editPostRequest !== editPostRequest) {

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

@ -480,7 +480,6 @@ export default class ImagePreview extends PureComponent {
return (
<SafeAreaView
backgroundColor='#000'
theme={this.props.theme}
navBarBackgroundColor='#000'
>
<View style={[style.wrapper]}>

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

@ -19,7 +19,7 @@ import Loading from 'app/components/loading';
import SearchBar from 'app/components/search_bar';
import StatusBar from 'app/components/status_bar';
import {alertErrorWithFallback} from 'app/utils/general';
import {makeStyleSheetFromTheme, changeOpacity} from 'app/utils/theme';
import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme';
class MoreChannels extends PureComponent {
static propTypes = {
@ -93,6 +93,10 @@ class MoreChannels extends PureComponent {
}
componentWillReceiveProps(nextProps) {
if (this.props.theme !== nextProps.theme) {
setNavigatorStyles(this.props.navigator, nextProps.theme);
}
const {requestStatus} = this.props;
if (this.state.searching &&
nextProps.requestStatus.status === RequestStatus.SUCCESS) {

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

@ -21,7 +21,7 @@ import SearchBar from 'app/components/search_bar';
import StatusBar from 'app/components/status_bar';
import {alertErrorWithFallback} from 'app/utils/general';
import {loadingText} from 'app/utils/member_list';
import {makeStyleSheetFromTheme, changeOpacity} from 'app/utils/theme';
import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme';
import SelectedUsers from './selected_users';
@ -84,6 +84,10 @@ class MoreDirectMessages extends PureComponent {
}
componentWillReceiveProps(nextProps) {
if (this.props.theme !== nextProps.theme) {
setNavigatorStyles(this.props.navigator, nextProps.theme);
}
const {getRequest} = this.props;
if (getRequest.status === RequestStatus.STARTED &&
nextProps.getRequest.status === RequestStatus.SUCCESS) {

4
app/screens/search/index.js
View file

@ -9,6 +9,7 @@ import {selectPost} from 'mattermost-redux/actions/posts';
import {clearSearch, removeSearchTerms, searchPosts} from 'mattermost-redux/actions/search';
import {getCurrentChannelId} from 'mattermost-redux/selectors/entities/channels';
import {getCurrentTeamId} from 'mattermost-redux/selectors/entities/teams';
import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
import {
handleSelectChannel,
@ -33,7 +34,8 @@ function mapStateToProps(state) {
isLandscape: isLandscape(state),
postIds: state.entities.search.results,
recent: recent[currentTeamId],
searchingStatus: searchRequest.status
searchingStatus: searchRequest.status,
theme: getTheme(state)
};
}

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

@ -440,10 +440,6 @@ class Search extends PureComponent {
const {terms, isOrSearch} = recent;
this.handleTextChanged(terms);
this.search(terms, isOrSearch);
if (this.refs.searchBar) {
this.refs.searchBar.blur();
}
});
handleClosePreview = () => {
@ -615,7 +611,6 @@ class Search extends PureComponent {
<SafeAreaView
excludeHeader={isLandscape && this.isX}
forceTop={44}
theme={theme}
>
<View style={style.container}>
<StatusBar/>

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

@ -21,7 +21,7 @@ import Loading from 'app/components/loading';
import StatusBar from 'app/components/status_bar';
import {preventDoubleTap} from 'app/utils/tap';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme';
export default class SelectTeam extends PureComponent {
static propTypes = {
@ -55,6 +55,10 @@ export default class SelectTeam extends PureComponent {
}
componentWillReceiveProps(nextProps) {
if (this.props.theme !== nextProps.theme) {
setNavigatorStyles(this.props.navigator, nextProps.theme);
}
if (this.props.teams !== nextProps.teams) {
this.buildData(nextProps);
}

8
app/screens/settings/general/settings.js
View file

@ -15,7 +15,7 @@ import DeviceInfo from 'react-native-device-info';
import SettingsItem from 'app/screens/settings/settings_item';
import StatusBar from 'app/components/status_bar';
import {wrapWithPreventDoubleTap} from 'app/utils/tap';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme';
import {isValidUrl} from 'app/utils/url';
import LocalConfig from 'assets/config';
@ -43,6 +43,12 @@ class Settings extends PureComponent {
this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent);
}
componentWillReceiveProps(nextProps) {
if (this.props.theme !== nextProps.theme) {
setNavigatorStyles(this.props.navigator, nextProps.theme);
}
}
errorEmailBody = () => {
const {config, currentUserId, currentTeamId, errors} = this.props;
let contents = [

6
app/screens/settings/notification_settings/notification_settings.js
View file

@ -23,7 +23,7 @@ import NotificationPreferences from 'app/notification_preferences';
import SettingsItem from 'app/screens/settings/settings_item';
import {getNotificationProps} from 'app/utils/notify_props';
import {preventDoubleTap} from 'app/utils/tap';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme';
class NotificationSettings extends PureComponent {
static propTypes = {
@ -44,6 +44,10 @@ class NotificationSettings extends PureComponent {
};
componentWillReceiveProps(nextProps) {
if (this.props.theme !== nextProps.theme) {
setNavigatorStyles(this.props.navigator, nextProps.theme);
}
const {updateMeRequest, intl} = nextProps;
if (this.props.updateMeRequest !== updateMeRequest && updateMeRequest.status === RequestStatus.FAILURE) {
Alert.alert(

8
app/screens/settings/notification_settings_email/notification_settings_email.js
View file

@ -15,7 +15,7 @@ import {getPreferencesByCategory} from 'mattermost-redux/utils/preference_utils'
import FormattedText from 'app/components/formatted_text';
import StatusBar from 'app/components/status_bar';
import {getNotificationProps} from 'app/utils/notify_props';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme';
import Section from 'app/screens/settings/section';
import SectionItem from 'app/screens/settings/section_item';
@ -40,6 +40,12 @@ export default class NotificationSettingsEmail extends PureComponent {
this.state = this.setStateFromNotifyProps(notifyProps);
}
componentWillReceiveProps(nextProps) {
if (this.props.theme !== nextProps.theme) {
setNavigatorStyles(this.props.navigator, nextProps.theme);
}
}
onNavigatorEvent = (event) => {
if (event.type === 'ScreenChangedEvent') {
switch (event.id) {

7
app/screens/settings/notification_settings_mentions/notification_settings_mention_base.js
View file

@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
import {intlShape} from 'react-intl';
import {getNotificationProps} from 'app/utils/notify_props';
import {setNavigatorStyles} from 'app/utils/theme';
export default class NotificationSettingsMentionsBase extends PureComponent {
static propTypes = {
@ -28,6 +29,12 @@ export default class NotificationSettingsMentionsBase extends PureComponent {
this.state = this.setStateFromNotifyProps(notifyProps);
}
componentWillReceiveProps(nextProps) {
if (this.props.theme !== nextProps.theme) {
setNavigatorStyles(this.props.navigator, nextProps.theme);
}
}
onNavigatorEvent = (event) => {
if (event.type === 'ScreenChangedEvent' && this.goingBack) {
switch (event.id) {

8
app/screens/settings/notification_settings_mentions_keywords/notification_settings_mentions_keywords.js
View file

@ -7,7 +7,7 @@ import {View} from 'react-native';
import FormattedText from 'app/components/formatted_text';
import StatusBar from 'app/components/status_bar';
import TextInputWithLocalizedPlaceholder from 'app/components/text_input_with_localized_placeholder';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme';
export default class NotificationSettingsMentionsKeywords extends PureComponent {
static propTypes = {
@ -27,6 +27,12 @@ export default class NotificationSettingsMentionsKeywords extends PureComponent
props.navigator.setOnNavigatorEvent(this.onNavigatorEvent);
}
componentWillReceiveProps(nextProps) {
if (this.props.theme !== nextProps.theme) {
setNavigatorStyles(this.props.navigator, nextProps.theme);
}
}
handleSubmit = () => {
this.props.navigator.pop();
};

7
app/screens/settings/notification_settings_mobile/notification_settings_mobile_base.js
View file

@ -7,6 +7,7 @@ import PropTypes from 'prop-types';
import {intlShape} from 'react-intl';
import {getNotificationProps} from 'app/utils/notify_props';
import {setNavigatorStyles} from 'app/utils/theme';
export default class NotificationSettingsMobileBase extends PureComponent {
static propTypes = {
@ -37,6 +38,12 @@ export default class NotificationSettingsMobileBase extends PureComponent {
props.navigator.setOnNavigatorEvent(this.onNavigatorEvent);
}
componentWillReceiveProps(nextProps) {
if (this.props.theme !== nextProps.theme) {
setNavigatorStyles(this.props.navigator, nextProps.theme);
}
}
getNotificationPreferences = (props) => {
if (Platform.OS === 'android') {
const {

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

@ -13,7 +13,7 @@ import PostList from 'app/components/post_list';
import PostTextbox from 'app/components/post_textbox';
import SafeAreaView from 'app/components/safe_area_view';
import StatusBar from 'app/components/status_bar';
import {makeStyleSheetFromTheme} from 'app/utils/theme';
import {makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme';
class Thread extends PureComponent {
static propTypes = {
@ -49,6 +49,10 @@ class Thread extends PureComponent {
}
componentWillReceiveProps(nextProps) {
if (this.props.theme !== nextProps.theme) {
setNavigatorStyles(this.props.navigator, nextProps.theme);
}
if (this.props.postIds !== nextProps.postIds && !nextProps.postIds.length) {
this.close();
return;
@ -92,7 +96,6 @@ class Thread extends PureComponent {
<SafeAreaView
excludeHeader={true}
keyboardOffset={20}
theme={theme}
>
<StatusBar/>
<KeyboardLayout

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

@ -18,7 +18,7 @@ import {displayUsername} from 'mattermost-redux/utils/user_utils';
import ProfilePicture from 'app/components/profile_picture';
import StatusBar from 'app/components/status_bar';
import {alertErrorWithFallback} from 'app/utils/general';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme';
import UserProfileRow from './user_profile_row';
import Config from 'assets/config';
@ -40,6 +40,12 @@ class UserProfile extends PureComponent {
user: PropTypes.object.isRequired
};
componentWillReceiveProps(nextProps) {
if (this.props.theme !== nextProps.theme) {
setNavigatorStyles(this.props.navigator, nextProps.theme);
}
}
close = () => {
const {navigator} = this.props;

9
app/utils/theme.js
View file

@ -75,3 +75,12 @@ export function blendColors(background, foreground, opacity) {
export function concatStyles(...styles) {
return [].concat(styles);
}
export function setNavigatorStyles(navigator, theme) {
navigator.setStyle({
navBarTextColor: theme.sidebarHeaderTextColor,
navBarBackgroundColor: theme.sidebarHeaderBg,
navBarButtonColor: theme.sidebarHeaderTextColor,
screenBackgroundColor: theme.centerChannelBg
});
}