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

[MM-19084] Apply theme change for all components when theme changes (#3415)

Browse source 
* Apply theme change for all components when theme changes

* Remove unnecessary snapshot test
This commit is contained in:
Miguel Alatzar 2019-10-21 12:11:56 -07:00 committed by GitHub
parent 8137b8575a
commit 1fbf0d28d3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 92 additions and 123 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
app/screens/channel/channel_base.js
View file

@ -20,6 +20,7 @@ import SafeAreaView from 'app/components/safe_area_view';
import SettingsSidebar from 'app/components/sidebars/settings';
import {preventDoubleTap} from 'app/utils/tap';
import {setNavigatorStyles} from 'app/utils/theme';
import PushNotifications from 'app/push_notifications';
import EphemeralStore from 'app/store/ephemeral_store';
import tracker from 'app/utils/time_tracker';
@ -27,7 +28,6 @@ import telemetry from 'app/telemetry';
import {
goToScreen,
showModalOverCurrentContext,
mergeNavigationOptions,
} from 'app/actions/navigation';
import LocalConfig from 'assets/config';
@ -69,12 +69,7 @@ export default class ChannelBase extends PureComponent {
this.postTextbox = React.createRef();
this.keyboardTracker = React.createRef();
const options = {
layout: {
backgroundColor: props.theme.centerChannelBg,
},
};
mergeNavigationOptions(props.componentId, options);
setNavigatorStyles(props.componentId, props.theme);
if (LocalConfig.EnableMobileClientUpgrade && !ClientUpgradeListener) {
ClientUpgradeListener = require('app/components/client_upgrade_listener').default;
@ -113,12 +108,9 @@ export default class ChannelBase extends PureComponent {
componentWillReceiveProps(nextProps) {
if (this.props.theme !== nextProps.theme) {
const options = {
layout: {
backgroundColor: nextProps.theme.centerChannelBg,
},
};
mergeNavigationOptions(this.props.componentId, options);
EphemeralStore.allNavigationComponentIds.forEach((componentId) => {
setNavigatorStyles(componentId, nextProps.theme);
});
}
if (nextProps.currentTeamId && this.props.currentTeamId !== nextProps.currentTeamId) {
@ -322,6 +314,12 @@ export default class ChannelBase extends PureComponent {
</MainSidebar>
);
}
render() {
// Overriden in channel.android.js and channel.ios.js
// but defined here for channel_base.test.js
return; // eslint-disable-line no-useless-return
}
}
export const style = StyleSheet.create({

77
app/screens/channel/channel_base.test.js Normal file
View file

@ -0,0 +1,77 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
import {shallow} from 'enzyme';
import Preferences from 'mattermost-redux/constants/preferences';
import EphemeralStore from 'app/store/ephemeral_store';
import * as NavigationActions from 'app/actions/navigation';
import ChannelBase from './channel_base';
jest.mock('react-intl');
describe('ChannelBase', () => {
const componentIds = ['component-1', 'component-2', 'component-3'];
const baseProps = {
actions: {
loadChannelsIfNecessary: jest.fn(),
loadProfilesAndTeamMembersForDMSidebar: jest.fn(),
selectDefaultTeam: jest.fn(),
selectInitialChannel: jest.fn(),
recordLoadTime: jest.fn(),
getChannelStats: jest.fn(),
},
componentId: componentIds[0],
theme: Preferences.THEMES.default,
};
const optionsForTheme = (theme) => {
return {
topBar: {
backButton: {
color: theme.sidebarHeaderTextColor,
},
background: {
color: theme.sidebarHeaderBg,
},
title: {
color: theme.sidebarHeaderTextColor,
},
leftButtonColor: theme.sidebarHeaderTextColor,
rightButtonColor: theme.sidebarHeaderTextColor,
},
layout: {
backgroundColor: theme.centerChannelBg,
},
};
};
test('should call mergeNavigationOptions on all navigation components when theme changes', () => {
const mergeNavigationOptions = jest.spyOn(NavigationActions, 'mergeNavigationOptions');
componentIds.forEach((componentId) => {
EphemeralStore.addNavigationComponentId(componentId);
});
const wrapper = shallow(
<ChannelBase {...baseProps}/>,
);
const themeOptions = optionsForTheme(Preferences.THEMES.default);
expect(mergeNavigationOptions.mock.calls).toEqual([
[componentIds[0], themeOptions],
]);
mergeNavigationOptions.mockClear();
wrapper.setProps({theme: Preferences.THEMES.mattermostDark});
const newThemeOptions = optionsForTheme(Preferences.THEMES.mattermostDark);
expect(mergeNavigationOptions.mock.calls).toEqual([
[componentIds[2], newThemeOptions],
[componentIds[1], newThemeOptions],
[componentIds[0], newThemeOptions],
]);
});
});

114
app/screens/settings/theme/theme.test.js
View file

@ -14,116 +14,10 @@ import ThemeTile from './theme_tile';
jest.mock('react-intl');
const allowedThemes = [
{
type: 'Mattermost',
sidebarBg: '#145dbf',
sidebarText: '#ffffff',
sidebarUnreadText: '#ffffff',
sidebarTextHoverBg: '#4578bf',
sidebarTextActiveBorder: '#579eff',
sidebarTextActiveColor: '#ffffff',
sidebarHeaderBg: '#1153ab',
sidebarHeaderTextColor: '#ffffff',
onlineIndicator: '#06d6a0',
awayIndicator: '#ffbc42',
dndIndicator: '#f74343',
mentionBg: '#ffffff',
mentionColor: '#145dbf',
centerChannelBg: '#ffffff',
centerChannelColor: '#3d3c40',
newMessageSeparator: '#ff8800',
linkColor: '#2389d7',
buttonBg: '#166de0',
buttonColor: '#ffffff',
errorTextColor: '#fd5960',
mentionHighlightBg: '#ffe577',
mentionHighlightLink: '#166de0',
codeTheme: 'github',
key: 'default',
},
{
type: 'Organization',
sidebarBg: '#2071a7',
sidebarText: '#ffffff',
sidebarUnreadText: '#ffffff',
sidebarTextHoverBg: '#136197',
sidebarTextActiveBorder: '#7ab0d6',
sidebarTextActiveColor: '#ffffff',
sidebarHeaderBg: '#2f81b7',
sidebarHeaderTextColor: '#ffffff',
onlineIndicator: '#7dbe00',
awayIndicator: '#dcbd4e',
dndIndicator: '#ff6a6a',
mentionBg: '#fbfbfb',
mentionColor: '#2071f7',
centerChannelBg: '#f2f4f8',
centerChannelColor: '#333333',
newMessageSeparator: '#ff8800',
linkColor: '#2f81b7',
buttonBg: '#1dacfc',
buttonColor: '#ffffff',
errorTextColor: '#a94442',
mentionHighlightBg: '#f3e197',
mentionHighlightLink: '#2f81b7',
codeTheme: 'github',
key: 'organization',
},
{
type: 'Mattermost Dark',
sidebarBg: '#1b2c3e',
sidebarText: '#ffffff',
sidebarUnreadText: '#ffffff',
sidebarTextHoverBg: '#4a5664',
sidebarTextActiveBorder: '#66b9a7',
sidebarTextActiveColor: '#ffffff',
sidebarHeaderBg: '#1b2c3e',
sidebarHeaderTextColor: '#ffffff',
onlineIndicator: '#65dcc8',
awayIndicator: '#c1b966',
dndIndicator: '#e81023',
mentionBg: '#b74a4a',
mentionColor: '#ffffff',
centerChannelBg: '#2f3e4e',
centerChannelColor: '#dddddd',
newMessageSeparator: '#5de5da',
linkColor: '#a4ffeb',
buttonBg: '#4cbba4',
buttonColor: '#ffffff',
errorTextColor: '#ff6461',
mentionHighlightBg: '#984063',
mentionHighlightLink: '#a4ffeb',
codeTheme: 'solarized-dark',
key: 'mattermostDark',
},
{
type: 'Windows Dark',
sidebarBg: '#171717',
sidebarText: '#ffffff',
sidebarUnreadText: '#ffffff',
sidebarTextHoverBg: '#302e30',
sidebarTextActiveBorder: '#196caf',
sidebarTextActiveColor: '#ffffff',
sidebarHeaderBg: '#1f1f1f',
sidebarHeaderTextColor: '#ffffff',
onlineIndicator: '#399fff',
awayIndicator: '#c1b966',
dndIndicator: '#e81023',
mentionBg: '#0177e7',
mentionColor: '#ffffff',
centerChannelBg: '#1f1f1f',
centerChannelColor: '#dddddd',
newMessageSeparator: '#cc992d',
linkColor: '#0d93ff',
buttonBg: '#0177e7',
buttonColor: '#ffffff',
errorTextColor: '#ff6461',
mentionHighlightBg: '#784098',
mentionHighlightLink: '#a4ffeb',
codeTheme: 'monokai',
key: 'windows10',
},
];
const allowedThemes = Object.keys(Preferences.THEMES).map((key) => ({
key,
...Preferences.THEMES[key],
}));
describe('Theme', () => {
const baseProps = {