IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

Configs for themes in Display Settings: hide themes options, hide custom themes, specific list of themes (#7173)

Browse Source 
* Add configuration to enable or disable choosing themes in Display Settings. Only for Licensed servers.

* Add configuration to enable or disable choosing custom themes in Display Settings. Only for Licensed servers.

* Add configuration to enable or disable a specific list of themes to choose in Display Settings. Only for Licensed servers.

* Added config value and logic for "DefaultTheme"

* Fix problem with undefined values when the server is not licensed
This commit is contained in:
David Meza
2017-09-05 19:28:46 -05:00
committed by Chris
parent 7cee7b3342
commit 1605fa5102
9 changed files with 163 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
webapp/components/user_settings/premade_theme_chooser.jsx
View File

@@ -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 = '';

19
webapp/components/user_settings/user_settings_display.jsx
View File

@@ -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'/>

157
webapp/components/user_settings/user_settings_theme.jsx
View File

@@ -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) {

6
webapp/stores/preference_store.jsx
View File

@@ -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;
}