From ca78514941c989a22123476f15f848cf34e1fa1b Mon Sep 17 00:00:00 2001 From: Elias Nahum Date: Fri, 7 Dec 2018 12:20:46 -0300 Subject: [PATCH] MM-13362 Update account settings header color when changing theme (#2431) * MM-13362 Update account settings header color when changing theme * Removed unneded static var --- .../display_settings/display_settings.js | 17 ++++++++++++++--- .../display_settings/display_settings.test.js | 5 ++++- app/screens/settings/general/settings.js | 10 ++++------ app/screens/theme/theme.js | 15 +++++++++++---- app/screens/theme/theme.test.js | 11 +++++++---- 5 files changed, 40 insertions(+), 18 deletions(-) diff --git a/app/screens/settings/display_settings/display_settings.js b/app/screens/settings/display_settings/display_settings.js index fdcf4ccc0..02c920e8e 100644 --- a/app/screens/settings/display_settings/display_settings.js +++ b/app/screens/settings/display_settings/display_settings.js @@ -12,7 +12,7 @@ import { import SettingsItem from 'app/screens/settings/settings_item'; 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'; import ClockDisplay from 'app/screens/clock_display'; @@ -32,6 +32,15 @@ export default class DisplaySettings extends PureComponent { showClockDisplaySettings: false, }; + constructor(props) { + super(props); + props.navigator.setOnNavigatorEvent(this.onNavigatorEvent); + } + + closeClockDisplaySettings = () => { + this.setState({showClockDisplaySettings: false}); + }; + goToClockDisplaySettings = preventDoubleTap(() => { const {navigator, theme} = this.props; const {intl} = this.context; @@ -91,8 +100,10 @@ export default class DisplaySettings extends PureComponent { }); }); - closeClockDisplaySettings = () => { - this.setState({showClockDisplaySettings: false}); + onNavigatorEvent = (event) => { + if (event.id === 'willAppear') { + setNavigatorStyles(this.props.navigator, this.props.theme); + } }; render() { diff --git a/app/screens/settings/display_settings/display_settings.test.js b/app/screens/settings/display_settings/display_settings.test.js index a3206a9b0..1d1b40804 100644 --- a/app/screens/settings/display_settings/display_settings.test.js +++ b/app/screens/settings/display_settings/display_settings.test.js @@ -15,7 +15,10 @@ describe('DisplaySettings', () => { theme: Preferences.THEMES.default, enableTheme: false, enableTimezone: false, - navigator: {push: () => {}}, // eslint-disable-line no-empty-function + navigator: { + push: jest.fn(), + setOnNavigatorEvent: jest.fn(), + }, }; test('should match snapshot', () => { diff --git a/app/screens/settings/general/settings.js b/app/screens/settings/general/settings.js index 64ac5b3bb..35341d1d1 100644 --- a/app/screens/settings/general/settings.js +++ b/app/screens/settings/general/settings.js @@ -43,12 +43,6 @@ 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 = [ @@ -180,6 +174,10 @@ class Settings extends PureComponent { }); onNavigatorEvent = (event) => { + if (event.id === 'willAppear') { + setNavigatorStyles(this.props.navigator, this.props.theme); + } + if (event.type === 'NavBarButtonPress') { if (event.id === 'close-settings') { this.props.navigator.dismissModal({ diff --git a/app/screens/theme/theme.js b/app/screens/theme/theme.js index 707fd2fbf..4a0518ca4 100644 --- a/app/screens/theme/theme.js +++ b/app/screens/theme/theme.js @@ -11,19 +11,20 @@ import Section from 'app/screens/settings/section'; import SectionItem from 'app/screens/settings/section_item'; import FormattedText from 'app/components/formatted_text'; -import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme'; +import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme'; import Preferences from 'mattermost-redux/constants/preferences'; export default class Theme extends React.PureComponent { static propTypes = { - teamId: PropTypes.string.isRequired, - theme: PropTypes.object.isRequired, - userId: PropTypes.string.isRequired, actions: PropTypes.shape({ savePreferences: PropTypes.func.isRequired, }).isRequired, allowedThemes: PropTypes.arrayOf(PropTypes.object), customTheme: PropTypes.object, + navigator: PropTypes.object.isRequired, + teamId: PropTypes.string.isRequired, + theme: PropTypes.object.isRequired, + userId: PropTypes.string.isRequired, }; static contextTypes = { @@ -43,6 +44,12 @@ export default class Theme extends React.PureComponent { return null; } + componentDidUpdate(prevProps) { + if (prevProps.theme !== this.props.theme) { + setNavigatorStyles(this.props.navigator, this.props.theme); + } + } + setTheme = (key) => { const {userId, teamId, actions: {savePreferences}, allowedThemes} = this.props; const {customTheme} = this.state; diff --git a/app/screens/theme/theme.test.js b/app/screens/theme/theme.test.js index 31fc11052..d279d4822 100644 --- a/app/screens/theme/theme.test.js +++ b/app/screens/theme/theme.test.js @@ -14,13 +14,16 @@ jest.mock('react-intl'); describe('Theme', () => { const baseProps = { - teamId: 'test-team', - theme: Preferences.THEMES.default, - userId: 'test-user', actions: { savePreferences: jest.fn(), }, allowedThemes, + navigator: { + setOnNavigatorEvent: jest.fn(), + }, + teamId: 'test-team', + theme: Preferences.THEMES.default, + userId: 'test-user', }; test('should match snapshot', () => { @@ -147,4 +150,4 @@ const allowedThemes = [ codeTheme: 'monokai', }, }, -]; \ No newline at end of file +];