diff options
Diffstat (limited to 'webapp')
4 files changed, 107 insertions, 82 deletions
diff --git a/webapp/components/user_settings/premade_theme_chooser.jsx b/webapp/components/user_settings/premade_theme_chooser.jsx index 653628595..1bb2c6be9 100644 --- a/webapp/components/user_settings/premade_theme_chooser.jsx +++ b/webapp/components/user_settings/premade_theme_chooser.jsx @@ -18,8 +18,15 @@ export default class PremadeThemeChooser extends React.Component { const theme = this.props.theme; const premadeThemes = []; + const allowedThemes = global.mm_config.AllowedThemes ? global.mm_config.AllowedThemes.split(',') : []; + const hasAllowedThemes = allowedThemes.length > 1 || (allowedThemes[0] && allowedThemes[0].trim().length > 0); + for (const k in Constants.THEMES) { if (Constants.THEMES.hasOwnProperty(k)) { + if (hasAllowedThemes && allowedThemes.indexOf(k) < 0) { + continue; + } + const premadeTheme = $.extend(true, {}, Constants.THEMES[k]); let activeClass = ''; diff --git a/webapp/components/user_settings/user_settings_display.jsx b/webapp/components/user_settings/user_settings_display.jsx index 74a939994..f10b29900 100644 --- a/webapp/components/user_settings/user_settings_display.jsx +++ b/webapp/components/user_settings/user_settings_display.jsx @@ -595,6 +595,18 @@ export default class UserSettingsDisplay extends React.Component { ); } + let themeSection; + if (global.mm_config.EnableThemeSelection !== 'false') { + themeSection = ( + <ThemeSetting + selected={this.props.activeSection === 'theme'} + updateSection={this.updateSection} + setRequireConfirm={this.props.setRequireConfirm} + setEnforceFocus={this.props.setEnforceFocus} + /> + ); + } + return ( <div> <div className='modal-header'> @@ -632,12 +644,7 @@ export default class UserSettingsDisplay extends React.Component { /> </h3> <div className='divider-dark first'/> - <ThemeSetting - selected={this.props.activeSection === 'theme'} - updateSection={this.updateSection} - setRequireConfirm={this.props.setRequireConfirm} - setEnforceFocus={this.props.setEnforceFocus} - /> + {themeSection} <div className='divider-dark'/> {clockSection} <div className='divider-dark'/> diff --git a/webapp/components/user_settings/user_settings_theme.jsx b/webapp/components/user_settings/user_settings_theme.jsx index 4f39cffa9..871e3ccae 100644 --- a/webapp/components/user_settings/user_settings_theme.jsx +++ b/webapp/components/user_settings/user_settings_theme.jsx @@ -180,10 +180,11 @@ export default class ThemeSetting extends React.Component { } const displayCustom = this.state.type === 'custom'; + const allowCustomThemes = global.mm_config.AllowCustomThemes !== 'false'; let custom; let premade; - if (displayCustom) { + if (displayCustom && allowCustomThemes) { custom = ( <div key='customThemeChooser'> <CustomThemeChooser @@ -208,87 +209,91 @@ export default class ThemeSetting extends React.Component { if (this.props.selected) { const inputs = []; - inputs.push( - <div - className='radio' - key='premadeThemeColorLabel' - > - <label> - <input - id='standardThemes' - type='radio' - name='theme' - checked={!displayCustom} - onChange={this.updateType.bind(this, 'premade')} - /> - <FormattedMessage - id='user.settings.display.theme.themeColors' - defaultMessage='Theme Colors' - /> - </label> - <br/> - </div> - ); + if (allowCustomThemes) { + inputs.push( + <div + className='radio' + key='premadeThemeColorLabel' + > + <label> + <input + id='standardThemes' + type='radio' + name='theme' + checked={!displayCustom} + onChange={this.updateType.bind(this, 'premade')} + /> + <FormattedMessage + id='user.settings.display.theme.themeColors' + defaultMessage='Theme Colors' + /> + </label> + <br/> + </div> + ); + } inputs.push(premade); - inputs.push( - <div - className='radio' - key='customThemeColorLabel' - > - <label> - <input - id='customThemes' - type='radio' - name='theme' - checked={displayCustom} - onChange={this.updateType.bind(this, 'custom')} - /> - <FormattedMessage - id='user.settings.display.theme.customTheme' - defaultMessage='Custom Theme' - /> - </label> - </div> - ); - - inputs.push(custom); - - inputs.push( - <div key='otherThemes'> - <br/> - <a - id='otherThemes' - href='http://docs.mattermost.com/help/settings/theme-colors.html#custom-theme-examples' - target='_blank' - rel='noopener noreferrer' + if (allowCustomThemes) { + inputs.push( + <div + className='radio' + key='customThemeColorLabel' > - <FormattedMessage - id='user.settings.display.theme.otherThemes' - defaultMessage='See other themes' - /> - </a> - </div> - ); + <label> + <input + id='customThemes' + type='radio' + name='theme' + checked={displayCustom} + onChange={this.updateType.bind(this, 'custom')} + /> + <FormattedMessage + id='user.settings.display.theme.customTheme' + defaultMessage='Custom Theme' + /> + </label> + </div> + ); - inputs.push( - <div - key='importSlackThemeButton' - className='padding-top' - > - <a - id='slackImportTheme' - className='theme' - onClick={this.handleImportModal} + inputs.push(custom); + + inputs.push( + <div key='otherThemes'> + <br/> + <a + id='otherThemes' + href='http://docs.mattermost.com/help/settings/theme-colors.html#custom-theme-examples' + target='_blank' + rel='noopener noreferrer' + > + <FormattedMessage + id='user.settings.display.theme.otherThemes' + defaultMessage='See other themes' + /> + </a> + </div> + ); + + inputs.push( + <div + key='importSlackThemeButton' + className='padding-top' > - <FormattedMessage - id='user.settings.display.theme.import' - defaultMessage='Import theme colors from Slack' - /> - </a> - </div> - ); + <a + id='slackImportTheme' + className='theme' + onClick={this.handleImportModal} + > + <FormattedMessage + id='user.settings.display.theme.import' + defaultMessage='Import theme colors from Slack' + /> + </a> + </div> + ); + } let allTeamsCheckbox = null; if (this.state.showAllTeamsCheckbox) { diff --git a/webapp/stores/preference_store.jsx b/webapp/stores/preference_store.jsx index f3476d9ea..cd8ae68be 100644 --- a/webapp/stores/preference_store.jsx +++ b/webapp/stores/preference_store.jsx @@ -141,6 +141,12 @@ class PreferenceStore extends EventEmitter { return this.getObject(Constants.Preferences.CATEGORY_THEME, ''); } + for (const k in Constants.THEMES) { + if (Constants.THEMES.hasOwnProperty(k) && k === global.mm_config.DefaultTheme) { + return Constants.THEMES[k]; + } + } + return Constants.THEMES.default; } |